Fixed key/value stuff

src-web/components/App.tsx

@@ -13,12 +13,10 @@ import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { requestsQueryKey } from '../hooks/useRequests';
 import { responsesQueryKey } from '../hooks/useResponses';
 import { routePaths } from '../hooks/useRoutes';
-import type { SidebarDisplay } from '../hooks/useSidebarDisplay';
-import { sidebarDisplayDefaultValue, sidebarDisplayKey } from '../hooks/useSidebarDisplay';
 import { workspacesQueryKey } from '../hooks/useWorkspaces';
 import { DEFAULT_FONT_SIZE } from '../lib/constants';
 import { debounce } from '../lib/debounce';
-import { extractKeyValue, getKeyValue, setKeyValue } from '../lib/keyValueStore';
+import { extractKeyValue } from '../lib/keyValueStore';
 import type { HttpRequest, HttpResponse, KeyValue, Workspace } from '../lib/models';
 import { AppRouter } from './AppRouter';
 import { DialogProvider } from './DialogContext';
@@ -161,17 +159,6 @@ await listen('refresh', () => {
   location.reload();
 });
 
-await listen('toggle_sidebar', async () => {
-  const display = await getKeyValue<SidebarDisplay>({
-    key: sidebarDisplayKey,
-    fallback: sidebarDisplayDefaultValue,
-  });
-  await setKeyValue({
-    key: sidebarDisplayKey,
-    value: { width: display.width, hidden: !display.hidden },
-  });
-});
-
 await listen('zoom', ({ payload: zoomDelta }: { payload: number }) => {
   const fontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
 

src-web/components/AppRouter.tsx

@@ -1,8 +1,9 @@
 import { Suspense } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
 import { routePaths } from '../hooks/useRoutes';
-import Workspace from './Workspace';
+import { useTauriListeners } from '../hooks/useTauriListeners';
 import RouteError from './RouteError';
+import Workspace from './Workspace';
 import Workspaces from './Workspaces';
 
 const router = createBrowserRouter([
@@ -34,6 +35,7 @@ const router = createBrowserRouter([
 ]);
 
 export function AppRouter() {
+  useTauriListeners();
   return (
     <Suspense>
       <RouterProvider router={router} />

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();
+      }
+    };
+  }, []);
+}