refactor

frontend/src/documents/DocumentsTable.jsx

@@ -1,7 +1,18 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
-import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon, TrashIcon } from '../ui/icons';
+import {
+  DownloadIcon,
+  EditIcon,
+  ViewListIcon,
+  ViewGridIcon,
+  FolderIcon,
+  TrashIcon,
+  RefreshIcon,
+  FolderPlusIcon,
+  MinusVerticalIcon,
+  ArrowUpIcon,
+} from '../ui/icons';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const DEFAULT_GRID_ICON_SIZE = 144;
@@ -39,7 +50,6 @@ const resolveCorrespondents = (doc) => {
     results.push({
       id,
       name,
-      role: entry.role || null,
       key: id ?? `${name}-${index}`,
     });
   });
@@ -1048,3 +1058,127 @@ const DocumentsTable = ({
 
 export default DocumentsTable;
 export { DocumentThumbnailImage };
+
+export const createDocumentsTableHeaderActions = ({
+  viewMode,
+  onViewModeChange,
+  onRequestCreateFolder,
+  creatingFolder,
+  onRefresh,
+  onShowSkeuoWorkspace,
+}) => {
+  const isGridView = viewMode === 'grid';
+
+  return (
+    <>
+      <div className="view-toggle" role="group" aria-label="Change view">
+        <button
+          type="button"
+          className={`view-toggle__button${isGridView ? '' : ' active'}`}
+          onClick={() => onViewModeChange?.('list')}
+          aria-pressed={!isGridView}
+          title="List view"
+        >
+          <ViewListIcon className="view-toggle__icon" size={18} />
+        </button>
+        <button
+          type="button"
+          className={`view-toggle__button${isGridView ? ' active' : ''}`}
+          onClick={() => onViewModeChange?.('grid')}
+          aria-pressed={isGridView}
+          title="Icons view"
+        >
+          <ViewGridIcon className="view-toggle__icon" size={18} />
+        </button>
+      </div>
+      <span className="main-content__actions-divider" aria-hidden="true">
+        <MinusVerticalIcon />
+      </span>
+      <button
+        type="button"
+        className="icon-button ghost"
+        onClick={onRequestCreateFolder}
+        disabled={creatingFolder}
+        aria-label={creatingFolder ? 'Creating folder…' : 'Create folder'}
+        title={creatingFolder ? 'Creating folder…' : 'Create folder'}
+      >
+        <FolderPlusIcon />
+      </button>
+      <button
+        type="button"
+        className="icon-button ghost"
+        onClick={onRefresh}
+        aria-label="Refresh"
+        title="Refresh"
+      >
+        <RefreshIcon />
+      </button>
+      <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
+        Desk View
+      </button>
+    </>
+  );
+}; 
+
+export const createDocumentsSurface = ({
+  tableProps,
+  parentBreadcrumb,
+  onNavigateParent,
+  renderSidebarToggle,
+}) => {
+  const {
+    currentFolderName,
+    searchResults,
+    viewMode,
+    onViewModeChange,
+    onRequestCreateFolder,
+    creatingFolder,
+    onRefresh,
+    onShowSkeuoWorkspace,
+  } = tableProps;
+
+  const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
+  const subtitle = Array.isArray(searchResults)
+    ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
+    : null;
+
+  const actions = createDocumentsTableHeaderActions({
+    viewMode,
+    onViewModeChange,
+    onRequestCreateFolder,
+    creatingFolder,
+    onRefresh,
+    onShowSkeuoWorkspace,
+  });
+
+  const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+  const parentControl = parentBreadcrumb
+    ? (
+        <button
+          type="button"
+          className="icon-button ghost"
+          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: 'documents',
+    variant: 'documents',
+    header: { title, subtitle, leading, actions },
+    content: <DocumentsTable {...tableProps} showHeader={false} />,
+    supportsDetail: true,
+  };
+};