style

frontend/src/documents/DocumentsTable.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
-import DetailPanel from '../detail/DetailPanel';
 import {
   DownloadIcon,
   EditIcon,
@@ -12,9 +11,10 @@ import {
   TrashIcon,
   RefreshIcon,
   MinusVerticalIcon,
-  ArrowUpIcon,
 } from '../ui/icons';
 import BreadcrumbTrail from '../ui/BreadcrumbTrail';
+import createWorkspaceSurfaceConfig from './workspaceHeader';
+import DetailPanel from '../detail/DetailPanel';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const DEFAULT_GRID_ICON_SIZE = 144;
@@ -1161,35 +1161,21 @@ export const createDocumentsSurface = ({
   });
 
   const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
-  const parentControl = parentBreadcrumb
-    ? (
-        <button
-          type="button"
-          className="icon-button"
-          onClick={onNavigateParent}
-          aria-label="Go to parent folder"
-          title="Go to parent folder"
-        >
-          <ArrowUpIcon />
-        </button>
-      )
-    : null;
-  const leading = sidebarToggle || parentControl
-    ? (
-        <>
-          {sidebarToggle}
-          {parentControl}
-        </>
-      )
-    : null;
-
   const detail = detailOpen && detailProps ? <DetailPanel {...detailProps} /> : null;
 
-  return {
+  const surfaceConfig = createWorkspaceSurfaceConfig({
     key: 'documents',
     variant: 'documents',
-    header: { title, subtitle, leading, actions, breadcrumbs },
+    title,
+    subtitle,
+    sidebarToggle,
+    parentBreadcrumb,
+    onNavigateParent,
+    actions,
+    breadcrumbs,
     content: <DocumentsTable {...tableProps} showHeader={false} />,
     detail,
-  };
+  });
+
+  return surfaceConfig;
 };