papercrate/frontend/src/app/useWorkspaceSurface.js

import React, { useCallback, useMemo } from 'react';
import { ChevronsRightIcon } from '../ui/icons';
import { createDocumentsSurface } from '../documents/DocumentsTable';
import { createPreviewSurface } from '../preview/PreviewWorkspace';
import { createDesktopSurface } from '../DesktopWorkspace';

export const useWorkspaceSurface = ({
  sidebarCollapsed,
  onExpandSidebar,
  documentsTableProps,
  detailPanelProps,
  detailPanelOpen,
  viewMode,
  deskWorkspaceProps,
  previewWorkspaceDocument,
  previewWorkspaceEntry,
  ensureAssetUrl,
  ensurePreviewData,
  getDocumentAsset,
  resolveApiPath,
  notifyApiError,
  handleThumbnailRegeneration,
  closeDocumentPreview,
  parentBreadcrumb,
  onNavigateParent,
}) => {
  const renderSidebarToggle = useCallback(() => {
    if (!sidebarCollapsed) {
      return null;
    }
    return (
      <button
        type="button"
        className="icon-button"
        onClick={onExpandSidebar}
        aria-label="Expand sidebar"
        title="Expand sidebar"
      >
        <ChevronsRightIcon />
      </button>
    );
  }, [sidebarCollapsed, onExpandSidebar]);

  const documentsSurface = useMemo(() => {
    if (!documentsTableProps) {
      return null;
    }
    return createDocumentsSurface({
      tableProps: documentsTableProps,
      parentBreadcrumb,
      onNavigateParent: parentBreadcrumb ? onNavigateParent : null,
      renderSidebarToggle,
      detailProps: detailPanelProps,
      detailOpen: detailPanelOpen,
    });
  }, [
    documentsTableProps,
    parentBreadcrumb,
    onNavigateParent,
    renderSidebarToggle,
    detailPanelProps,
    detailPanelOpen,
  ]);

  const showPreviewWorkspace = viewMode !== 'desk' && Boolean(previewWorkspaceDocument);

  const previewSurface = useMemo(() => {
    if (!showPreviewWorkspace || !previewWorkspaceDocument) {
      return null;
    }
    const detailExtras = detailPanelProps || {};
    const {
      tagLookupById,
      tags: tagOptions,
      onTagAdd,
      onTagRemove,
      correspondents,
      onCorrespondentAdd,
      onCorrespondentRemove,
      onUpdateTitle,
      onUpdateIssued,
      resolveFolderPath,
      onFolderNavigate,
    } = detailExtras;
    return createPreviewSurface({
      document: previewWorkspaceDocument,
      previewEntry: previewWorkspaceEntry,
      ensureAssetUrl,
      ensurePreviewData,
      getDocumentAsset,
      resolveApiPath,
      notifyApiError,
      onRegenerate: handleThumbnailRegeneration,
      onClose: closeDocumentPreview,
      renderSidebarToggle,
      tagLookupById,
      tagOptions,
      onTagAdd,
      onTagRemove,
      correspondents,
      onCorrespondentAdd,
      onCorrespondentRemove,
      onUpdateTitle,
      onUpdateIssued,
      resolveFolderPath,
      onFolderNavigate,
    });
  }, [
    showPreviewWorkspace,
    previewWorkspaceDocument,
    previewWorkspaceEntry,
    ensureAssetUrl,
    ensurePreviewData,
    getDocumentAsset,
    resolveApiPath,
    notifyApiError,
    handleThumbnailRegeneration,
    closeDocumentPreview,
    renderSidebarToggle,
    detailPanelProps,
  ]);

  const workspaceSurface = useMemo(() => {
    if (viewMode !== 'desk') {
      return null;
    }
    return createDesktopSurface({
      workspaceProps: deskWorkspaceProps,
      renderSidebarToggle,
      parentBreadcrumb,
      onNavigateParent: parentBreadcrumb ? onNavigateParent : null,
    });
  }, [viewMode, deskWorkspaceProps, renderSidebarToggle, parentBreadcrumb, onNavigateParent]);

  const surface = useMemo(() => {
    if (showPreviewWorkspace) {
      return previewSurface;
    }
    if (viewMode === 'desk') {
      return workspaceSurface;
    }
    return documentsSurface;
  }, [showPreviewWorkspace, viewMode, previewSurface, workspaceSurface, documentsSurface]);

  return { surface };
};