Add React hooks eslint

src-web/hooks/useKeyValue.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { buildKeyValueKey, getKeyValue, setKeyValue } from '../lib/keyValueStore';
 
 const DEFAULT_NAMESPACE = 'app';
@@ -46,15 +46,18 @@ export function useKeyValue<T extends Object | null>({
         mutate.mutate(value);
       }
     },
-    [defaultValue],
+    [defaultValue, key, mutate, namespace],
   );
 
-  const reset = useCallback(() => mutate.mutate(defaultValue), [defaultValue]);
+  const reset = useCallback(() => mutate.mutate(defaultValue), [mutate, defaultValue]);
 
-  return {
-    value: query.data,
-    isLoading: query.isLoading,
-    set,
-    reset,
-  };
+  return useMemo(
+    () => ({
+      value: query.data,
+      isLoading: query.isLoading,
+      set,
+      reset,
+    }),
+    [query.data, query.isLoading, reset, set],
+  );
 }

src-web/hooks/useSidebarDisplay.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
 import { useKeyValue } from './useKeyValue';
 
@@ -28,12 +28,15 @@ export function useSidebarDisplay() {
       const hidden = width < COLLAPSE_WIDTH;
       display.set({ hidden, width: Math.max(MIN_WIDTH, width) });
     },
-    [display.set],
+    [display],
   );
-  const hide = useCallback(() => display.set((v) => ({ ...v, hidden: true })), []);
-  const show = useCallback(() => display.set((v) => ({ ...v, hidden: false })), []);
-  const toggle = useCallback(() => display.set((v) => ({ ...v, hidden: !v.hidden })), []);
+  const hide = useCallback(() => display.set((v) => ({ ...v, hidden: true })), [display]);
+  const show = useCallback(() => display.set((v) => ({ ...v, hidden: false })), [display]);
+  const toggle = useCallback(() => display.set((v) => ({ ...v, hidden: !v.hidden })), [display]);
   const reset = display.reset;
 
-  return { width, hidden, set, reset, hide, show, toggle };
+  return useMemo(
+    () => ({ width, hidden, set, reset, hide, show, toggle }),
+    [hidden, hide, reset, set, show, toggle, width],
+  );
 }

src-web/hooks/useTauriListeners.ts

@@ -87,7 +87,9 @@ export function useTauriListeners() {
           : null;
 
       if (queryKey === null) {
-        console.log('Unrecognized updated model:', payload);
+        if (payload.model) {
+          console.log('Unrecognized updated model:', payload);
+        }
         return;
       }
 
@@ -154,5 +156,5 @@ export function useTauriListeners() {
         unsub();
       }
     };
-  }, []);
+  }, [queryClient, sidebarDisplay.toggle, wasUpdatedExternally]);
 }

src-web/hooks/useTheme.ts

@@ -13,16 +13,12 @@ export function useTheme() {
     defaultValue: getAppearance(),
   });
 
-  const themeChange = (appearance: Appearance) => {
-    appearanceKv.set(appearance);
-  };
-
   const handleToggleAppearance = async () => {
     appearanceKv.set(appearanceKv.value === 'dark' ? 'light' : 'dark');
   };
 
   // Set appearance when preferred theme changes
-  useEffect(() => subscribeToPreferredAppearanceChange(themeChange), []);
+  useEffect(() => subscribeToPreferredAppearanceChange(appearanceKv.set), [appearanceKv.set]);
 
   // Sync appearance when k/v changes
   useEffect(() => setAppearance(appearanceKv.value), [appearanceKv.value]);