Track collapsible state in sessionStorage

ghengeveld · ghengeveld · commit 8ee2b2be86c5 · 2025-11-26T16:26:17.000+01:00
diff --git a/code/core/src/components/components/Collapsible/Collapsible.tsx b/code/core/src/components/components/Collapsible/Collapsible.tsx
@@ -34,16 +34,20 @@ export const Collapsible = Object.assign(
     summary,
     collapsed,
     disabled,
+    initialCollapsed,
+    storageKey,
     state: providedState,
     ...props
   }: {
     children: ReactNode | ((state: ReturnType<typeof useCollapsible>) => ReactNode);
     summary?: ReactNode | ((state: ReturnType<typeof useCollapsible>) => ReactNode);
     collapsed?: boolean;
     disabled?: boolean;
+    initialCollapsed?: boolean;
+    storageKey?: string;
     state?: ReturnType<typeof useCollapsible>;
   } & ComponentProps<typeof CollapsibleContent>) {
-    const internalState = useCollapsible(collapsed, disabled);
+    const internalState = useCollapsible({ collapsed, disabled, initialCollapsed, storageKey });
     const state = providedState || internalState;
     return (
       <>
@@ -64,14 +68,47 @@ export const Collapsible = Object.assign(
   }
 );
 
-export const useCollapsible = (collapsed?: boolean, disabled?: boolean) => {
-  const [isCollapsed, setCollapsed] = useState(!!collapsed);
+const useSessionState = <T,>(key: string | undefined, initialValue: T) => {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      return (JSON.parse(sessionStorage.getItem(key!)!) as T) ?? initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      if (key) {
+        sessionStorage.setItem(key, JSON.stringify(value));
+      }
+    } catch {}
+  }, [key, value]);
+
+  return [value, setValue] as const;
+};
+
+export const useCollapsible = ({
+  collapsed,
+  disabled,
+  initialCollapsed = collapsed,
+  storageKey,
+}: {
+  collapsed?: boolean;
+  disabled?: boolean;
+  initialCollapsed?: boolean;
+  storageKey?: string;
+}) => {
+  const [isCollapsed, setCollapsed] = useSessionState(
+    storageKey && `useCollapsible:${storageKey}`,
+    !!initialCollapsed
+  );
 
   useEffect(() => {
     if (collapsed !== undefined) {
       setCollapsed(collapsed);
     }
-  }, [collapsed]);
+  }, [collapsed, setCollapsed]);
 
   const toggleCollapsed = useCallback(
     (event?: SyntheticEvent<Element, Event>) => {
@@ -80,7 +117,7 @@ export const useCollapsible = (collapsed?: boolean, disabled?: boolean) => {
         setCollapsed((value) => !value);
       }
     },
-    [disabled]
+    [disabled, setCollapsed]
   );
 
   const contentId = useId();
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -220,7 +220,8 @@ export const ChecklistWidget = () => {
     <CollapsibleWithMargin collapsed={!hasItems || !loaded}>
       <HoverCard id="storybook-checklist-widget" outlineAnimation="rainbow">
         <Collapsible
-          collapsed={!hasItems}
+          storageKey="checklist-widget"
+          initialCollapsed={!hasItems}
           disabled={!hasItems}
           summary={({ isCollapsed, toggleCollapsed, toggleProps }) => (
             <ActionList as="div" onClick={toggleCollapsed}>
