breadcrumbs

frontend/src/app/AppLayout.jsx

@@ -23,7 +23,7 @@ import { api, useAppDispatch, useAppState } from './appState';
 const ASSET_PRESIGN_TTL_MS = 240 * 1000; // backend issues 5 min tokens; refresh slightly early
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 
-const DEFAULT_FOLDER_NAME = 'All Documents';
+const DEFAULT_FOLDER_NAME = 'Documents';
 
 const ROW_KEY_SEPARATOR = ':';
 const DOCUMENT_ROW_PREFIX = 'document';
@@ -394,7 +394,7 @@ const AppLayout = () => {
 
   const handleNeutralHueChange = useCallback((value) => {
     if (value === '') {
-      setNeutralHue(260);
+      setNeutralHue(180);
       return;
     }
     const parsed = Number(value);

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