cleanup

frontend/src/app/useWorkspaceSurface.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import type { ReactNode } from 'react';
 import { SidebarExpandIcon } from '../ui/icons';
-import { createDocumentsSurface } from '../documents/DocumentsPanel';
-import { createDocumentViewerSurface } from '../preview/DocumentViewerPanel';
+import DocumentsPanel from '../documents/panel/DocumentsPanel';
+import DocumentViewerPanel from '../preview/DocumentViewerPanel';
 import { usePanelManager } from './PanelManagerContext';
 
 type Identifier = string | number;
@@ -13,9 +13,7 @@ type GetDocumentAsset = (document: unknown, assetType: string) => unknown;
 type ResolveApiPath = (path: string) => string;
 type NotifyApiError = (error: unknown, fallbackMessage?: string) => void;
 
-type DocumentsSurface = ReturnType<typeof createDocumentsSurface> | null;
-type PreviewSurface = ReturnType<typeof createDocumentViewerSurface> | null;
-type WorkspaceSurface = DocumentsSurface | PreviewSurface | null;
+type WorkspaceSurface = { content: ReactNode; detail?: ReactNode | null } | null;
 
 interface UseWorkspaceSurfaceArgs {
   sidebarHidden?: boolean;
@@ -84,29 +82,52 @@ export const useWorkspaceSurface = ({
     );
   }, [sidebarHidden, onExpandSidebar]);
 
-  const documentsSurface = useMemo<DocumentsSurface>(() => {
+  const documentsSurface = useMemo<WorkspaceSurface>(() => {
     if (!documentsTableProps) {
       return null;
     }
-    return createDocumentsSurface({
-      tableProps: documentsTableProps,
-      renderSidebarToggle,
-      detailProps: detailPanelProps,
-      detailOpen: detailPanelOpen,
-    });
+
+    const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+
+    const detail = detailPanelOpen && detailPanelProps
+      ? (() => {
+          const { onClose, onOpenPreview, tags: tagOptions, ...restDetailProps } = detailPanelProps;
+          return (
+            <DocumentViewerPanel
+              variant="sidebar"
+              onCollapsePanel={onClose}
+              onMaximizePanel={onOpenPreview}
+              tagOptions={tagOptions}
+              {...restDetailProps}
+            />
+          );
+        })()
+      : null;
+
+    return {
+      content: (
+        <DocumentsPanel
+          {...documentsTableProps}
+          headerLeading={sidebarToggle}
+        />
+      ),
+      detail,
+    };
   }, [
     documentsTableProps,
     renderSidebarToggle,
-    detailPanelProps,
     detailPanelOpen,
+    detailPanelProps,
   ]);
 
   const showPreviewWorkspace = Boolean(previewDocumentId);
 
-  const previewSurface = useMemo<PreviewSurface>(() => {
-    if (!showPreviewWorkspace) {
+  const previewSurface = useMemo<WorkspaceSurface>(() => {
+    if (!showPreviewWorkspace || !previewWorkspaceDocument) {
       return null;
     }
+
+    const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
     const detailExtras = detailPanelProps || {};
     const {
       tagLookupById,
@@ -120,38 +141,45 @@ export const useWorkspaceSurface = ({
       onUpdateIssued,
       resolveFolderPath,
     } = detailExtras;
-    return createDocumentViewerSurface({
-      document: previewWorkspaceDocument,
-      documentLink,
-      ensureAssetUrl,
-      ensurePreviewData,
-      getDocumentAsset,
-      resolveApiPath,
-      notifyApiError,
-      onClose: closeDocumentPreview,
-      renderSidebarToggle,
-      tagLookupById,
-      tagOptions,
-      onTagAdd,
-      onTagRemove,
-      correspondents,
-      onCorrespondentAdd,
-      onCorrespondentRemove,
-      onUpdateTitle,
-      onUpdateIssued,
-      resolveFolderPath,
-    });
+
+    return {
+      content: (
+        <DocumentViewerPanel
+          document={previewWorkspaceDocument}
+          documentLink={documentLink}
+          hydrateDocument={ensurePreviewData}
+          tagLookupById={tagLookupById}
+          tagOptions={tagOptions}
+          onTagAdd={onTagAdd}
+          onTagRemove={onTagRemove}
+          correspondents={correspondents}
+          onCorrespondentAdd={onCorrespondentAdd}
+          onCorrespondentRemove={onCorrespondentRemove}
+          onUpdateTitle={onUpdateTitle}
+          onUpdateIssued={onUpdateIssued}
+          ensureAssetUrl={ensureAssetUrl}
+          getDocumentAsset={getDocumentAsset}
+          ensurePreviewData={ensurePreviewData}
+          resolveApiPath={resolveApiPath}
+          notifyApiError={notifyApiError}
+          sidebarToggle={sidebarToggle}
+          onClosePanel={closeDocumentPreview}
+          resolveFolderPath={resolveFolderPath}
+        />
+      ),
+      detail: null,
+    };
   }, [
     showPreviewWorkspace,
     previewWorkspaceDocument,
     documentLink,
-    ensureAssetUrl,
     ensurePreviewData,
+    ensureAssetUrl,
     getDocumentAsset,
     resolveApiPath,
     notifyApiError,
-    closeDocumentPreview,
     renderSidebarToggle,
+    closeDocumentPreview,
     detailPanelProps,
   ]);