various

frontend/src/sidebar/SidebarContext.js

@@ -7,6 +7,8 @@ import React, {
   useEffect,
 } from 'react';
 
+const SIDEBAR_COLLAPSE_STORAGE_KEY = 'papercrate_sidebar_collapsed';
+
 const SidebarContext = createContext(null);
 
 const THEME_STORAGE_KEY = 'papercrate_theme_settings';
@@ -71,8 +73,26 @@ const loadInitialThemeSettings = () => {
   return { neutralHue: neutralHueValue, mode: modeValue };
 };
 
+const loadInitialCollapsedState = (defaultValue) => {
+  if (typeof window === 'undefined') {
+    return Boolean(defaultValue);
+  }
+  try {
+    const stored = window.sessionStorage.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY);
+    if (stored === '1' || stored === 'true') {
+      return true;
+    }
+    if (stored === '0' || stored === 'false') {
+      return false;
+    }
+  } catch (error) {
+    console.warn('[sidebar] failed to read collapse state', error);
+  }
+  return Boolean(defaultValue);
+};
+
 export const SidebarProvider = ({ initialCollapsed = false, children }) => {
-  const [collapsed, setCollapsed] = useState(initialCollapsed);
+  const [collapsed, setCollapsedState] = useState(() => loadInitialCollapsedState(initialCollapsed));
   const initialTheme = useMemo(() => loadInitialThemeSettings(), []);
   const [neutralHue, setNeutralHueState] = useState(initialTheme.neutralHue);
   const [themeMode, setThemeModeState] = useState(initialTheme.mode);
@@ -141,6 +161,25 @@ export const SidebarProvider = ({ initialCollapsed = false, children }) => {
     setThemeModeState(THEME_MODES[nextIndex]);
   }, [themeMode]);
 
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      window.sessionStorage.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, collapsed ? '1' : '0');
+    } catch (error) {
+      console.warn('[sidebar] failed to persist collapse state', error);
+    }
+  }, [collapsed]);
+
+  const setCollapsed = useCallback((value) => {
+    if (typeof value === 'function') {
+      setCollapsedState((prev) => Boolean(value(prev)));
+      return;
+    }
+    setCollapsedState(Boolean(value));
+  }, []);
+
   const contextValue = useMemo(
     () => ({
       collapsed,
@@ -154,7 +193,16 @@ export const SidebarProvider = ({ initialCollapsed = false, children }) => {
       themeModes: THEME_MODES,
       defaultNeutralHue: DEFAULT_NEUTRAL_HUE,
     }),
-    [collapsed, neutralHue, setNeutralHue, resetNeutralHue, themeMode, setThemeMode, cycleThemeMode],
+    [
+      collapsed,
+      setCollapsed,
+      neutralHue,
+      setNeutralHue,
+      resetNeutralHue,
+      themeMode,
+      setThemeMode,
+      cycleThemeMode,
+    ],
   );
 
   return <SidebarContext.Provider value={contextValue}>{children}</SidebarContext.Provider>;