sidebar

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 collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
-  const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
+  const expandSidebar = useCallback(() => setCollapsed(false), [setCollapsed]);
 
   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
-        sidebarProps={sidebarPropsWithActions}
-        sidebarCollapsed={sidebarCollapsed}
-      >
+      <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
         <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
-      sidebarProps={sidebarPropsWithActions}
-      sidebarCollapsed={sidebarCollapsed}
-    >
+    <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
       <div className={mainContentClass}>
         {header ? (
           <PanelHeader
@@ -163,4 +156,10 @@ const DocumentsRoute = () => {
   );
 };
 
+const DocumentsRoute = () => (
+  <SidebarProvider>
+    <DocumentsRouteContent />
+  </SidebarProvider>
+);
+
 export default DocumentsRoute;