diff --git a/src-web/components/App.tsx b/src-web/components/App.tsx
index cc79d924..2fe208c4 100644
--- a/src-web/components/App.tsx
+++ b/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);
 
diff --git a/src-web/components/AppRouter.tsx b/src-web/components/AppRouter.tsx
index ff28eab9..d6390b44 100644
--- a/src-web/components/AppRouter.tsx
+++ b/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} />
diff --git a/src-web/hooks/useKeyValue.ts b/src-web/hooks/useKeyValue.ts
index 3b41bfa6..e5920a04 100644
--- a/src-web/hooks/useKeyValue.ts
+++ b/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]);
diff --git a/src-web/hooks/useSidebarDisplay.ts b/src-web/hooks/useSidebarDisplay.ts
index 28314e1f..f3ad6248 100644
--- a/src-web/hooks/useSidebarDisplay.ts
+++ b/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 };
diff --git a/src-web/hooks/useTauriListeners.ts b/src-web/hooks/useTauriListeners.ts
new file mode 100644
index 00000000..807761ec
--- /dev/null
+++ b/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();
+      }
+    };
+  }, []);
+}