style

frontend/src/DesktopWorkspace.jsx

@@ -10,6 +10,7 @@ import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
 import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
 import { createDocumentsTableHeaderActions } from './documents/DocumentsTable';
+import createWorkspaceSurfaceConfig from './documents/workspaceHeader';
 import { clamp, formatTransform } from './desktop/math';
 import { preventAll } from './desktop/events';
 import useDocumentDrag from './desktop/useDocumentDrag';
@@ -2017,7 +2018,12 @@ const DesktopWorkspaceView = () => {
 
 export default DesktopWorkspace;
 
-export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) => {
+export const createDesktopSurface = ({
+  workspaceProps,
+  renderSidebarToggle,
+  parentBreadcrumb,
+  onNavigateParent,
+}) => {
   if (!workspaceProps) {
     return null;
   }
@@ -2034,26 +2040,28 @@ export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) =>
     ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
     : null;
 
-  const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
-  const leading = sidebarToggle ? <>{sidebarToggle}</> : null;
-
   const actions = createDocumentsTableHeaderActions({
     viewMode: viewMode || 'desk',
     onViewModeChange,
     onRefresh,
   });
 
-  return {
+  const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+  const surfaceConfig = createWorkspaceSurfaceConfig({
     key: 'workspace',
     variant: 'workspace',
-    header: {
+    title,
-      title,
+    subtitle,
-      subtitle,
+    sidebarToggle,
-      leading,
+    parentBreadcrumb,
-      actions,
+    onNavigateParent,
-      breadcrumbs: workspaceProps?.breadcrumbs || null,
+    actions,
-    },
+    breadcrumbs: workspaceProps?.breadcrumbs || null,
     content: <DesktopWorkspace {...workspaceProps} />,
+  });
+
+  return {
+    ...surfaceConfig,
     supportsDetail: false,
   };
 };

frontend/src/app/useWorkspaceSurface.js

@@ -101,8 +101,10 @@ export const useWorkspaceSurface = ({
     return createDesktopSurface({
       workspaceProps: deskWorkspaceProps,
       renderSidebarToggle,
+      parentBreadcrumb,
+      onNavigateParent: parentBreadcrumb ? onNavigateParent : null,
     });
-  }, [viewMode, deskWorkspaceProps, renderSidebarToggle]);
+  }, [viewMode, deskWorkspaceProps, renderSidebarToggle, parentBreadcrumb, onNavigateParent]);
 
   const surface = useMemo(() => {
     if (showPreviewWorkspace) {

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;
 };

frontend/src/documents/workspaceHeader.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ArrowUpIcon } from '../ui/icons';
+
+export const createWorkspaceSurfaceConfig = ({
+  title,
+  subtitle = null,
+  sidebarToggle = null,
+  parentBreadcrumb = null,
+  onNavigateParent = null,
+  actions = null,
+  breadcrumbs = null,
+  content = null,
+  detail = null,
+  variant = 'documents',
+  key = 'documents',
+}) => {
+  const showParent = parentBreadcrumb && typeof onNavigateParent === 'function';
+
+  const parentControl = showParent ? (
+    <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;
+
+  return {
+    key,
+    variant,
+    header: {
+      title,
+      subtitle,
+      leading,
+      actions,
+      breadcrumbs,
+    },
+    content,
+    detail,
+  };
+};
+
+export default createWorkspaceSurfaceConfig;

frontend/src/styles.css

@@ -2395,7 +2395,7 @@ button.danger:hover:not([disabled]) {
 .panel-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
   padding: 0.5rem;
   min-width: 0;
 }
@@ -2404,7 +2404,7 @@ button.danger:hover:not([disabled]) {
 .panel-header__actions {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .panel-header__title {