Separate floating sidebar hidden state

src-web/hooks/useFloatingSidebarHidden.ts

@@ -0,0 +1,13 @@
+import { useActiveWorkspaceId } from './useActiveWorkspaceId';
+import { useKeyValue } from './useKeyValue';
+
+export function useFloatingSidebarHidden() {
+  const activeWorkspaceId = useActiveWorkspaceId();
+  const { set, value } = useKeyValue<boolean>({
+    namespace: 'no_sync',
+    key: ['floating_sidebar_hidden', activeWorkspaceId ?? 'n/a'],
+    fallback: false,
+  });
+
+  return [value, set] as const;
+}

src-web/hooks/useShouldFloatSidebar.ts

@@ -0,0 +1,8 @@
+import { useWindowSize } from 'react-use';
+
+const WINDOW_FLOATING_SIDEBAR_WIDTH = 600;
+
+export function useShouldFloatSidebar() {
+  const windowSize = useWindowSize();
+  return windowSize.width <= WINDOW_FLOATING_SIDEBAR_WIDTH;
+}

src-web/hooks/useSidebarHidden.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useKeyValue } from './useKeyValue';
 
@@ -10,12 +9,5 @@ export function useSidebarHidden() {
     fallback: false,
   });
 
-  return useMemo(() => {
-    return {
-      show: () => set(false),
-      hide: () => set(true),
-      toggle: () => set((h) => !h),
-      hidden: value,
-    };
-  }, [set, value]);
+  return [value, set] as const;
 }