sidebar

frontend/src/app/DocumentsLayout.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import Sidebar from '../sidebar/Sidebar';
+import { useSidebarContext } from '../sidebar/SidebarContext';
 
-const DocumentsLayout = ({ sidebarProps, children, sidebarCollapsed }) => (
+const DocumentsLayout = ({ sidebarProps, children }) => {
-  <main className={`documents-main${sidebarCollapsed ? ' documents-main--sidebar-collapsed' : ''}`}>
+  const { collapsed } = useSidebarContext();
-    {!sidebarCollapsed ? <Sidebar {...sidebarProps} /> : null}
+  return (
+    <main className={`documents-main${collapsed ? ' documents-main--sidebar-collapsed' : ''}`}>
+      {!collapsed ? <Sidebar {...sidebarProps} /> : null}
       {children}
     </main>
   );
+};
 
 export default DocumentsLayout;

frontend/src/app/DocumentsRoute.jsx

@@ -1,12 +1,13 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAppShell } from '../appShellContext';
 import DocumentsLayout from './DocumentsLayout';
 import { useWorkspaceSurface } from './useWorkspaceSurface';
 import PanelHeader from '../ui/PanelHeader';
 import BreadcrumbTrail from '../ui/BreadcrumbTrail';
+import { SidebarProvider, useSidebarContext } from '../sidebar/SidebarContext';
 
-const DocumentsRoute = () => {
+const DocumentsRouteContent = () => {
   const {
     sidebarProps,
     documentsTableProps,
@@ -28,19 +29,17 @@ const DocumentsRoute = () => {
     notifyApiError,
   } = useAppShell();
   const navigate = useNavigate();
+  const { collapsed: sidebarCollapsed, setCollapsed } = useSidebarContext();
 
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const expandSidebar = useCallback(() => setCollapsed(false), [setCollapsed]);
-  const collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
-  const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
 
   const sidebarPropsWithActions = useMemo(
     () => ({
       ...sidebarProps,
       onManageTags: openTagsModal,
       onManageCorrespondents: openCorrespondentsModal,
-      onCollapse: collapseSidebar,
     }),
-    [sidebarProps, openTagsModal, openCorrespondentsModal, collapseSidebar],
+    [sidebarProps, openTagsModal, openCorrespondentsModal],
   );
 
   const breadcrumbs = documentsTableProps?.breadcrumbs || null;
@@ -93,10 +92,7 @@ const DocumentsRoute = () => {
 
   if (!surface) {
     return (
-      <DocumentsLayout
+      <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-        sidebarProps={sidebarPropsWithActions}
-        sidebarCollapsed={sidebarCollapsed}
-      >
         <div className="main-content main-content--documents">
           <div className="main-content__body main-content__body--documents" />
         </div>
@@ -142,10 +138,7 @@ const DocumentsRoute = () => {
   }
 
   return (
-    <DocumentsLayout
+    <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-      sidebarProps={sidebarPropsWithActions}
-      sidebarCollapsed={sidebarCollapsed}
-    >
       <div className={mainContentClass}>
         {header ? (
           <PanelHeader
@@ -163,4 +156,10 @@ const DocumentsRoute = () => {
   );
 };
 
+const DocumentsRoute = () => (
+  <SidebarProvider>
+    <DocumentsRouteContent />
+  </SidebarProvider>
+);
+
 export default DocumentsRoute;

frontend/src/sidebar/Sidebar.jsx

@@ -21,6 +21,7 @@ import PanelHeader from '../ui/PanelHeader';
 import useFloatingMenu from '../ui/useFloatingMenu';
 
 import { getTagColorStyle } from '../utils/colors';
+import { useSidebarContext } from './SidebarContext';
 
 const FolderNode = ({
   node,
@@ -177,13 +178,16 @@ const Sidebar = ({
   isFilterActive,
   onLogout,
   status,
-  onCollapse,
   tenantName,
   tenants = [],
   activeTenantId = null,
   onSelectTenant,
   onOpenSettings,
 }) => {
+  const { setCollapsed } = useSidebarContext();
+  const handleCollapse = useCallback(() => {
+    setCollapsed(true);
+  }, [setCollapsed]);
   const neutralHueInputId = useId();
   const sortedCorrespondents = useMemo(() => {
     if (!Array.isArray(correspondents)) {
@@ -504,14 +508,14 @@ const Sidebar = ({
           </>
         )}
         actions={
-          onCollapse
+            handleCollapse
             ? [
                 (
                   <button
                     key="collapse"
                     type="button"
                     className="icon-button"
-                    onClick={onCollapse}
+                    onClick={handleCollapse}
                     aria-label="Collapse sidebar"
                     title="Collapse sidebar"
                   >

frontend/src/sidebar/SidebarContext.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useMemo, useState, useCallback } from 'react';
+
+const SidebarContext = createContext(null);
+
+export const SidebarProvider = ({ initialCollapsed = false, children }) => {
+  const [collapsed, setCollapsed] = useState(initialCollapsed);
+
+  const contextValue = useMemo(() => ({ collapsed, setCollapsed }), [collapsed]);
+
+  return <SidebarContext.Provider value={contextValue}>{children}</SidebarContext.Provider>;
+};
+
+export const useSidebarContext = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebarContext must be used within a SidebarProvider');
+  }
+  return context;
+};
+
+export const useSidebarControls = () => {
+  const { setCollapsed } = useSidebarContext();
+  const openSidebar = useCallback(() => setCollapsed(false), [setCollapsed]);
+  const closeSidebar = useCallback(() => setCollapsed(true), [setCollapsed]);
+  return { openSidebar, closeSidebar };
+};
+
+export default SidebarContext;