breadcrumbs

frontend/src/app/DocumentsRoute.jsx

@@ -4,6 +4,7 @@ import { useAppShell } from '../appShellContext';
 import DocumentsLayout from './DocumentsLayout';
 import { useWorkspaceSurface } from './useWorkspaceSurface';
 import PanelHeader from '../ui/PanelHeader';
+import BreadcrumbTrail from '../ui/BreadcrumbTrail';
 
 const DocumentsRoute = () => {
   const {
@@ -59,6 +60,14 @@ const DocumentsRoute = () => {
     navigate(target);
   }, [navigate, parentBreadcrumb]);
 
+  const handleHeaderBreadcrumbClick = useCallback((crumb) => {
+    if (!crumb || !crumb.id) {
+      return;
+    }
+    const target = crumb.id === 'root' ? '/documents' : `/documents/folder/${crumb.id}`;
+    navigate(target);
+  }, [navigate]);
+
   const { surface } = useWorkspaceSurface({
     sidebarCollapsed,
     onExpandSidebar: expandSidebar,
@@ -104,16 +113,31 @@ const DocumentsRoute = () => {
 
   const header = surface.header || null;
 
-  const headerTitle = header
-    ? header.subtitle
-      ? (
-          <h2 className="main-content__title">
-            {header.title}
-            <span className="main-content__subtitle">{header.subtitle}</span>
-          </h2>
-        )
-      : header.title
-    : null;
+  let headerTitle = null;
+  if (header) {
+    const breadcrumbEntries = Array.isArray(header.breadcrumbs) ? header.breadcrumbs.filter(Boolean) : [];
+    const lastIndex = breadcrumbEntries.length - 1;
+    const trailEntries = breadcrumbEntries.length
+      ? breadcrumbEntries.map((crumb, index) => ({
+          id: crumb.id ?? index,
+          label: crumb.name ?? crumb.label ?? crumb.title ?? '',
+          onClick: index < lastIndex ? () => handleHeaderBreadcrumbClick(crumb) : null,
+        }))
+      : [{ id: 'current-location', label: header.title }];
+
+    headerTitle = (
+      <h2 className="main-content__title">
+        <BreadcrumbTrail
+          entries={trailEntries}
+          className="main-content__breadcrumbs"
+          separator="/"
+        />
+        {header.subtitle ? (
+          <span className="main-content__subtitle">{header.subtitle}</span>
+        ) : null}
+      </h2>
+    );
+  }
 
   return (
     <DocumentsLayout