Refactor sidebar display

src-web/hooks/useIntrospectGraphQL.ts

@@ -11,9 +11,12 @@ const introspectionRequestBody = JSON.stringify({
 });
 
 export function useIntrospectGraphQL(baseRequest: HttpRequest) {
-  const url = useDebouncedValue(baseRequest.url);
+  // Debounce the URL because it can change rapidly, and we don't
+  // want to send so many requests.
+  const debouncedUrl = useDebouncedValue(baseRequest.url);
+
   return useQuery<GraphQLSchema, Error>({
-    queryKey: ['introspectGraphQL', { url }],
+    queryKey: ['introspectGraphQL', { url: debouncedUrl }],
     refetchOnWindowFocus: true,
     // staleTime: 1000 * 60 * 60, // 1 hour
     refetchInterval: 1000 * 60, // Refetch every minute

src-web/hooks/useSidebarDisplay.ts

@@ -1,42 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
-import { useKeyValue } from './useKeyValue';
-
-const START_WIDTH = 200;
-const MIN_WIDTH = 150;
-const COLLAPSE_WIDTH = MIN_WIDTH * 0.25;
-
-export const sidebarDisplayKey = 'sidebar_display';
-export const sidebarDisplayDefaultValue: SidebarDisplay = { hidden: false, width: START_WIDTH };
-
-export interface SidebarDisplay {
-  hidden: boolean;
-  width: number;
-}
-
-export function useSidebarDisplay() {
-  const display = useKeyValue<SidebarDisplay>({
-    namespace: NAMESPACE_NO_SYNC,
-    key: sidebarDisplayKey,
-    defaultValue: sidebarDisplayDefaultValue,
-  });
-  const hidden = display.value?.hidden ?? false;
-  const width = display.value?.width ?? START_WIDTH;
-
-  const set = useCallback(
-    (width: number) => {
-      const hidden = width < COLLAPSE_WIDTH;
-      display.set({ hidden, width: Math.max(MIN_WIDTH, width) });
-    },
-    [display],
-  );
-  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 useMemo(
-    () => ({ width, hidden, set, reset, hide, show, toggle }),
-    [hidden, hide, reset, set, show, toggle, width],
-  );
-}

src-web/hooks/useSidebarHidden.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
+import { useKeyValue } from './useKeyValue';
+
+export function useSidebarHidden() {
+  const { set, value } = useKeyValue<boolean>({
+    namespace: NAMESPACE_NO_SYNC,
+    key: 'sidebar_hidden',
+    defaultValue: false,
+  });
+
+  return useMemo(() => {
+    return {
+      show: () => set(false),
+      hide: () => set(true),
+      toggle: () => set((h) => !h),
+      hidden: value,
+    };
+  }, [set, value]);
+}

src-web/hooks/useSidebarWidth.ts

@@ -0,0 +1,10 @@
+import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
+import { useKeyValue } from './useKeyValue';
+
+export function useSidebarWidth() {
+  return useKeyValue<number>({
+    namespace: NAMESPACE_NO_SYNC,
+    key: 'sidebar_width',
+    defaultValue: 200,
+  });
+}

src-web/hooks/useTauriListeners.ts

@@ -15,14 +15,14 @@ import { requestsQueryKey } from './useRequests';
 import { useRequestUpdateKey } from './useRequestUpdateKey';
 import { responsesQueryKey } from './useResponses';
 import { routePaths } from './useRoutes';
-import { useSidebarDisplay } from './useSidebarDisplay';
+import { useSidebarHidden } from './useSidebarHidden';
 import { workspacesQueryKey } from './useWorkspaces';
 
 const unsubFns: (() => void)[] = [];
 export const UPDATE_DEBOUNCE_MILLIS = 100;
 
 export function useTauriListeners() {
-  const sidebarDisplay = useSidebarDisplay();
+  const { toggle } = useSidebarHidden();
   const queryClient = useQueryClient();
   const { wasUpdatedExternally } = useRequestUpdateKey(null);
 
@@ -41,7 +41,7 @@ export function useTauriListeners() {
       listen(event, debounce(fn, UPDATE_DEBOUNCE_MILLIS));
     }
 
-    listen<void>('toggle_sidebar', sidebarDisplay.toggle);
+    listen<void>('toggle_sidebar', toggle);
     listen<void>('refresh', () => location.reload());
 
     listenDebounced<Model>('created_model', ({ payload, windowLabel }) => {
@@ -156,5 +156,5 @@ export function useTauriListeners() {
         unsub();
       }
     };
-  }, [queryClient, sidebarDisplay.toggle, wasUpdatedExternally]);
+  }, [queryClient, toggle, wasUpdatedExternally]);
 }