breadcrumbs

frontend/src/documents/DocumentsTable.jsx

@@ -14,6 +14,7 @@ import {
   MinusVerticalIcon,
   ArrowUpIcon,
 } from '../ui/icons';
+import BreadcrumbTrail from '../ui/BreadcrumbTrail';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const DEFAULT_GRID_ICON_SIZE = 144;
@@ -197,6 +198,7 @@ const DocumentThumbnailImage = ({
 
 const DocumentsTable = ({
   currentFolderName,
+  breadcrumbs,
   onRefresh,
   subfolders,
   documents,
@@ -477,6 +479,20 @@ const DocumentsTable = ({
   const showGridSearchEmptyState =
     isGridView && showingSearchResults && rows.length === 0 && !isSearchLoading;
   const showSearchHint = showingSearchResults && rows.length > 0;
+  const breadcrumbEntries = useMemo(() => (Array.isArray(breadcrumbs) ? breadcrumbs.filter(Boolean) : []), [breadcrumbs]);
+  const trailEntries = useMemo(() => {
+    if (!breadcrumbEntries.length) {
+      return [{ id: 'current-folder', label: currentFolderName }];
+    }
+    const lastIndex = breadcrumbEntries.length - 1;
+    return breadcrumbEntries.map((crumb, index) => ({
+      id: crumb.id ?? index,
+      label: crumb.name ?? crumb.label ?? crumb.title ?? '',
+      onClick: index < lastIndex && onFolderSelect
+        ? () => onFolderSelect(crumb.id)
+        : null,
+    }));
+  }, [breadcrumbEntries, currentFolderName, onFolderSelect]);
 
   return (
     <section
@@ -485,7 +501,13 @@ const DocumentsTable = ({
       {showHeader ? (
         <div className="panel-section__header">
           <div className="panel-section__titles">
-            <h2>{currentFolderName}</h2>
+            <h2 className="documents-panel__title">
+              <BreadcrumbTrail
+                entries={trailEntries}
+                className="documents-panel__breadcrumbs"
+                separator="/"
+              />
+            </h2>
             {showingSearchResults && (
               <div className="panel-section__subtitle">Search results</div>
             )}
@@ -1120,6 +1142,7 @@ export const createDocumentsSurface = ({
 }) => {
   const {
     currentFolderName,
+    breadcrumbs,
     searchResults,
     viewMode,
     onViewModeChange,
@@ -1165,7 +1188,7 @@ export const createDocumentsSurface = ({
   return {
     key: 'documents',
     variant: 'documents',
-    header: { title, subtitle, leading, actions },
+    header: { title, subtitle, leading, actions, breadcrumbs },
     content: <DocumentsTable {...tableProps} showHeader={false} />,
     detail,
   };