Fixed key/value stuff

src-web/hooks/useKeyValue.ts

@@ -41,12 +41,14 @@ export function useKeyValue<T extends Object>({
   const set = useCallback(
     (value: ((v: T) => T) | T) => {
       if (typeof value === 'function') {
-        mutate.mutate(value(query.data ?? defaultValue));
+        getKeyValue({ namespace, key, fallback: defaultValue }).then((kv) => {
+          mutate.mutate(value(kv));
+        });
       } else {
         mutate.mutate(value);
       }
     },
-    [query.data, defaultValue],
+    [defaultValue],
   );
 
   const reset = useCallback(() => mutate.mutate(defaultValue), [defaultValue]);

src-web/hooks/useSidebarDisplay.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useKeyValue } from './useKeyValue';
 
 const START_WIDTH = 200;
@@ -28,9 +28,9 @@ export function useSidebarDisplay() {
     },
     [display.set],
   );
-  const hide = useCallback(() => display.set((v) => ({ ...v, hidden: true })), [display.set]);
-  const show = useCallback(() => display.set((v) => ({ ...v, hidden: false })), [display.set]);
-  const toggle = useMemo(() => (hidden ? show : hide), [hidden, show, hide]);
+  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 reset = display.reset;
 
   return { width, hidden, set, reset, hide, show, toggle };

src-web/hooks/useTauriListeners.ts

@@ -0,0 +1,29 @@
+import { listen } from '@tauri-apps/api/event';
+import { useEffect } from 'react';
+import { useSidebarDisplay } from './useSidebarDisplay';
+
+const unsubFns: (() => void)[] = [];
+
+export function useTauriListeners() {
+  const sidebarDisplay = useSidebarDisplay();
+  useEffect(() => {
+    let unmounted = false;
+
+    listen('toggle_sidebar', async () => {
+      sidebarDisplay.toggle();
+    }).then((fn) => {
+      if (unmounted) {
+        fn();
+      } else {
+        unsubFns.push(fn);
+      }
+    });
+
+    return () => {
+      unmounted = true;
+      for (const unsub of unsubFns) {
+        unsub();
+      }
+    };
+  }, []);
+}