cleanup

2025-11-18 00:41:49 +01:00
parent bc9be96123
commit 0b0a1a88fd
11 changed files with 253 additions and 702 deletions
@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ViewListIcon, ViewGridIcon, IconFileStack } from '../../ui/icons';
-import BreadcrumbTrail from '../../ui/BreadcrumbTrail';
 import DocumentsGrid from '../DocumentsGrid';
 import DocumentsList from '../DocumentsList';
+import DesktopWorkspace from '../../desktop/DesktopWorkspace';
 import { isTagTransferEvent } from '../tagTransfer';
 import PreviewZoomOverlay from '../../detail/PreviewZoomOverlay';
 import { isPointerModifierEvent, isPrimaryPointerEvent } from '../useEntryPointer';
@@ -24,9 +23,8 @@ const defaultGetDocumentAsset = (_doc?: unknown, _type?: string) => null;
 export type PreviewEntryLike = { url?: string | null; contentType?: string | null };

 const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
-  currentFolderName,
+  currentFolderName: _currentFolderName,
  breadcrumbs,
-  onRefresh,
  subfolders,
  documents,
  searchResults,
@@ -54,10 +52,10 @@ const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
  isSearchLoading = false,
  onDocumentTagDrop,
  viewMode = 'list',
-  onViewModeChange,
-  showHeader = true,
+  onViewModeChange: _onViewModeChange,
  previewEntries,
  ensureDownloadUrl,
+  deskWorkspaceProps = null,
 }) => {
  const {
    selectedEntries,
@@ -403,20 +401,7 @@ const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
    ],
  );

-  const isListView = viewMode === 'list';
  const gridIconSize = DEFAULT_GRID_ICON_SIZE;
-  const handleSetViewMode = useCallback(
-    (nextMode) => {
-      if (!onViewModeChange) {
-        return;
-      }
-      onViewModeChange(nextMode);
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop = 0;
-      }
-    },
-    [onViewModeChange],
-  );
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0;
@@ -590,181 +575,152 @@ const DocumentsPanel: React.FC<DocumentsPanelProps> = ({
  const showDefaultEmptyState = !showingSearchResults && !isFilterActive && entries.length === 0;
  const showListSearchEmptyState = showingSearchResults && !hasDocumentEntries && !isGridView && !isSearchLoading;
  const showGridSearchEmptyState = isGridView && showingSearchResults && !hasDocumentEntries && !isSearchLoading;
-  const breadcrumbEntries = useMemo(() => (Array.isArray(breadcrumbs) ? breadcrumbs.filter(Boolean) : []), [breadcrumbs]);
-  const trailEntries = useMemo(() => {
-    if (!breadcrumbEntries.length) {
-      return [{ id: 'current-folder', label: currentFolderName }];
-    }
-    const lastIndex = breadcrumbEntries.length - 1;
-    return breadcrumbEntries.map((crumb, index) => ({
-      id: crumb.id ?? index,
-      label: crumb.name ?? crumb.label ?? crumb.title ?? '',
-      onClick: index < lastIndex && onFolderSelect
-        ? () => onFolderSelect(crumb.id)
-        : null,
-    }));
-  }, [breadcrumbEntries, currentFolderName, onFolderSelect]);
-
-  return (
-    <>
-      <section
-      className={`documents-panel documents-panel--view-${isGridView ? 'grid' : 'list'}`}
-    >
-      {showHeader ? (
-        <div className="panel-section__header">
-          <div className="panel-section__titles">
-            <h2 className="documents-panel__title">
-              <BreadcrumbTrail
-                entries={trailEntries}
-                className="documents-panel__breadcrumbs"
-                separator="/"
-              />
-            </h2>
-            {showingSearchResults && (
-              <div className="panel-section__subtitle">Search results</div>
-            )}
-          </div>
-          <div className="header-actions">
-            <div className="view-toggle" role="group" aria-label="Change view">
-              <button
-                type="button"
-                className={`view-toggle__button${isListView ? ' active' : ''}`}
-                onClick={() => handleSetViewMode('list')}
-                aria-pressed={isListView}
-                title="List view"
-              >
-                <ViewListIcon className="view-toggle__icon" size={18} />
-              </button>
-              <button
-                type="button"
-                className={`view-toggle__button${isGridView ? ' active' : ''}`}
-                onClick={() => handleSetViewMode('grid')}
-                aria-pressed={isGridView}
-                title="Icons view"
-              >
-                <ViewGridIcon className="view-toggle__icon" size={18} />
-              </button>
-              <button
-                type="button"
-                className={`view-toggle__button${isDeskView ? ' active' : ''}`}
-                onClick={() => handleSetViewMode('desk')}
-                aria-pressed={isDeskView}
-                title="Desk view"
-              >
-                <IconFileStack className="view-toggle__icon" size={18} />
-              </button>
+  const renderBody = () => {
+    if (isDeskView) {
+      return (
+        <div className="panel-section__body panel-section__body--desk">
+          {deskWorkspaceProps ? (
+            <DesktopWorkspace {...deskWorkspaceProps} />
+          ) : (
+            <div className="empty-state empty-state--global">
+              Desk view is unavailable.
            </div>
-            <button className="secondary" onClick={onRefresh}>
-              Refresh
-            </button>
-          </div>
+          )}
        </div>
-      ) : null}
-      {showDefaultEmptyState ? (
+      );
+    }
+
+    if (showDefaultEmptyState) {
+      return (
        <div className="panel-section__body">
          <div className="empty-state">
            Drop files anywhere or onto a folder to upload documents.
          </div>
        </div>
-      ) : showGridSearchEmptyState ? (
+      );
+    }
+
+    if (showGridSearchEmptyState) {
+      return (
        <div className="panel-section__body">
          <div className="empty-state empty-state--global">
            No documents match the current filters.
          </div>
        </div>
-      ) : showListSearchEmptyState ? (
+      );
+    }
+
+    if (showListSearchEmptyState) {
+      return (
        <div className="panel-section__body">
          <div className="empty-state">No documents match the current filters.</div>
        </div>
-      ) : (
-        <div className="panel-section__body">
-          <div
-            ref={assignScrollRef}
-            className="documents-scroll"
-            tabIndex={0}
-            onFocus={(event) => {
-              if (event.target === scrollRef.current) {
-                handlePanelFocus();
-              }
-            }}
-            onKeyDown={(event) => {
-              if (event.target !== scrollRef.current) {
-                return;
-              }
-              handlePanelKeyDown(event);
-            }}
-            onClick={(event) => {
-              if (event.target === event.currentTarget) {
-                clearSelection();
-              }
-            }}
-            aria-activedescendant={isGridView ? undefined : activeDescendantId}
-          >
-            {isGridView ? (
-              <DocumentsGrid
-                entries={entries}
-                draggingDocumentIdsSet={draggingSet}
-                draggedFolderId={draggedFolderId}
-                onFolderClick={handleFolderClick}
-                onFolderSelect={onFolderSelect}
-                onFolderDragOver={onFolderDragOver}
-                onFolderDragLeave={onFolderDragLeave}
-                onFolderDrop={onFolderDrop}
-                onFolderDragStart={onFolderDragStart}
-                onFolderDragEnd={onFolderDragEnd}
-                onDocumentClick={handleDocumentClick}
-                onDocumentActivate={handleDocumentActivate}
-                onDocumentDragStart={handleDocumentDragStartLocal}
-                onDocumentDragEnd={handleDocumentDragEndLocal}
-                onDocumentTagDragOver={handleDocumentTagDragOver}
-                onDocumentTagDragLeave={handleDocumentTagDragLeave}
-                onDocumentTagDrop={handleDocumentTagDrop}
-                ensureAssetUrl={ensureAssetUrl}
-                getDocumentAsset={getDocumentAsset}
-                gridIconSize={gridIconSize}
-                tagLookupById={tagLookupById}
-                onTagClick={onTagClick}
-                scrollRef={scrollRef}
-                onCorrespondentClick={onCorrespondentClick}
-                activeCorrespondentIdSet={activeCorrespondentIdSet}
-                onDocumentRename={onDocumentRename}
-                onFolderRename={onFolderRename}
-              />
-            ) : !showTableRows ? null : (
-              <DocumentsList
-                entries={entries}
-                focusedRowKey={focusedRowKey}
-                draggingDocumentIdsSet={draggingSet}
-                draggedFolderId={draggedFolderId}
-                ensureAssetUrl={ensureAssetUrl}
-                getDocumentAsset={getDocumentAsset}
-                onFolderClick={handleFolderClick}
-                onFolderSelect={onFolderSelect}
-                onFolderDragOver={onFolderDragOver}
-                onFolderDragLeave={onFolderDragLeave}
-                onFolderDrop={onFolderDrop}
-                onFolderDragStart={onFolderDragStart}
-                onFolderDragEnd={onFolderDragEnd}
-                onFolderRename={onFolderRename}
-                onDocumentClick={handleDocumentClick}
-                onDocumentActivate={handleDocumentActivate}
-                onDocumentDragStart={handleDocumentDragStartLocal}
-                onDocumentDragEnd={handleDocumentDragEndLocal}
-                onDocumentTagDragOver={handleDocumentTagDragOver}
-                onDocumentTagDragLeave={handleDocumentTagDragLeave}
-                onDocumentTagDrop={handleDocumentTagDrop}
-                onDocumentRename={onDocumentRename}
-                tagLookupById={tagLookupById}
-                onTagClick={onTagClick}
-                onCorrespondentClick={onCorrespondentClick}
-                activeCorrespondentIdSet={activeCorrespondentIdSet}
-                scrollRef={scrollRef}
-              />
-            )}
-          </div>
+      );
+    }
+
+    if (!showTableRows) {
+      return null;
+    }
+
+    return (
+      <div className="panel-section__body">
+        <div
+          ref={assignScrollRef}
+          className="documents-scroll"
+          tabIndex={0}
+          onFocus={(event) => {
+            if (event.target === scrollRef.current) {
+              handlePanelFocus();
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.target !== scrollRef.current) {
+              return;
+            }
+            handlePanelKeyDown(event);
+          }}
+          onClick={(event) => {
+            if (event.target === event.currentTarget) {
+              clearSelection();
+            }
+          }}
+          aria-activedescendant={isGridView ? undefined : activeDescendantId}
+        >
+          {isGridView ? (
+            <DocumentsGrid
+              entries={entries}
+              draggingDocumentIdsSet={draggingSet}
+              draggedFolderId={draggedFolderId}
+              onFolderClick={handleFolderClick}
+              onFolderSelect={onFolderSelect}
+              onFolderDragOver={onFolderDragOver}
+              onFolderDragLeave={onFolderDragLeave}
+              onFolderDrop={onFolderDrop}
+              onFolderDragStart={onFolderDragStart}
+              onFolderDragEnd={onFolderDragEnd}
+              onDocumentClick={handleDocumentClick}
+              onDocumentActivate={handleDocumentActivate}
+              onDocumentDragStart={handleDocumentDragStartLocal}
+              onDocumentDragEnd={handleDocumentDragEndLocal}
+              onDocumentTagDragOver={handleDocumentTagDragOver}
+              onDocumentTagDragLeave={handleDocumentTagDragLeave}
+              onDocumentTagDrop={handleDocumentTagDrop}
+              ensureAssetUrl={ensureAssetUrl}
+              getDocumentAsset={getDocumentAsset}
+              gridIconSize={gridIconSize}
+              tagLookupById={tagLookupById}
+              onTagClick={onTagClick}
+              scrollRef={scrollRef}
+              onCorrespondentClick={onCorrespondentClick}
+              activeCorrespondentIdSet={activeCorrespondentIdSet}
+              onDocumentRename={onDocumentRename}
+              onFolderRename={onFolderRename}
+            />
+          ) : (
+            <DocumentsList
+              entries={entries}
+              focusedRowKey={focusedRowKey}
+              draggingDocumentIdsSet={draggingSet}
+              draggedFolderId={draggedFolderId}
+              ensureAssetUrl={ensureAssetUrl}
+              getDocumentAsset={getDocumentAsset}
+              onFolderClick={handleFolderClick}
+              onFolderSelect={onFolderSelect}
+              onFolderDragOver={onFolderDragOver}
+              onFolderDragLeave={onFolderDragLeave}
+              onFolderDrop={onFolderDrop}
+              onFolderDragStart={onFolderDragStart}
+              onFolderDragEnd={onFolderDragEnd}
+              onFolderRename={onFolderRename}
+              onDocumentClick={handleDocumentClick}
+              onDocumentActivate={handleDocumentActivate}
+              onDocumentDragStart={handleDocumentDragStartLocal}
+              onDocumentDragEnd={handleDocumentDragEndLocal}
+              onDocumentTagDragOver={handleDocumentTagDragOver}
+              onDocumentTagDragLeave={handleDocumentTagDragLeave}
+              onDocumentTagDrop={handleDocumentTagDrop}
+              onDocumentRename={onDocumentRename}
+              tagLookupById={tagLookupById}
+              onTagClick={onTagClick}
+              onCorrespondentClick={onCorrespondentClick}
+              activeCorrespondentIdSet={activeCorrespondentIdSet}
+              scrollRef={scrollRef}
+            />
+          )}
        </div>
-      )}
-    </section>
+      </div>
+    );
+  };
+
+  const panelVariant = isDeskView ? 'desk' : isGridView ? 'grid' : 'list';
+
+  return (
+    <>
+      <section
+        className={`documents-panel documents-panel--view-${panelVariant}`}
+      >
+        {renderBody()}
+      </section>
      <PreviewZoomOverlay
        open={Boolean(zoomDisplay?.url)}
        onClose={closePreviewOverlay}