refactor: Decompose document and folder views into modular components and hooks, replacing monolithic list/grid implementations.

frontend/src/documents/panel/DocumentsPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import DocumentsGrid from '../DocumentsGrid';
-import DocumentsList from '../DocumentsList';
+import { DocumentsList, DocumentsGrid } from '../DocumentsView';
 import type { DragEvent, ReactNode, RefObject } from 'react';
 import type {
   DocumentsListEntry,
@@ -653,9 +652,9 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
     if (!container) return;
     let selector = null;
     if (focusedEntryKey.startsWith('document:')) {
-      selector = `#document-row-${focusedEntryKey.slice('document:'.length)}`;
+      selector = `#document-${focusedEntryKey.slice('document:'.length)}`;
     } else if (focusedEntryKey.startsWith('folder:')) {
-      selector = `#folder-row-${focusedEntryKey.slice('folder:'.length)}`;
+      selector = `#folder-${focusedEntryKey.slice('folder:'.length)}`;
     }
     if (!selector) {
       return;
@@ -690,10 +689,10 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
   const activeDescendantId = useMemo(() => {
     if (!focusedEntryKey) return undefined;
     if (focusedEntryKey.startsWith('document:')) {
-      return `document-row-${focusedEntryKey.slice('document:'.length)}`;
+      return `document-${focusedEntryKey.slice('document:'.length)}`;
     }
     if (focusedEntryKey.startsWith('folder:')) {
-      return `folder-row-${focusedEntryKey.slice('folder:'.length)}`;
+      return `folder-${focusedEntryKey.slice('folder:'.length)}`;
     }
     return undefined;
   }, [focusedEntryKey]);
@@ -785,7 +784,7 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
     [entries],
   );
 
-  const viewProps: DocumentsViewProps = {
+  const viewProps = {
     entries,
     draggingDocumentIdsSet: draggingSet,
     draggedFolderId,
@@ -796,6 +795,7 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
     onFolderDrop,
     onFolderDragStart,
     onFolderDragEnd,
+    onFolderRename,
     onDocumentClick: handleDocumentClick,
     onDocumentActivate: handleDocumentActivate,
     onDocumentDragStart: handleDocumentDragStartLocal,
@@ -804,22 +804,17 @@ const DocumentsPanelInner: React.FC<DocumentsPanelInnerProps> = ({
     onDocumentTagDragLeave: handleDocumentTagDragLeave,
     onDocumentTagDrop,
     onDocumentRename,
-    onFolderRename,
     ensureAssetUrl,
     getDocumentAsset,
     tagLookupById,
     onTagClick: toggleTagFilter,
-    onCorrespondentClick: toggleCorrespondentFilter,
-    activeCorrespondentIdSet: activeCorrespondentIdSet,
-    activeTagFilters,
     scrollRef,
-    // Desk specific
-    onDocumentStackSelect: handleDeskDocumentStackSelect,
-    onPromoteSelection: promoteSelectionOrder,
+    activeCorrespondentIdSet: activeCorrespondentIdSet,
+    onCorrespondentClick: toggleCorrespondentFilter,
     tenantId: currentTenantId,
     viewId: deskViewId,
-    documentLinks: documentLinkMap,
-    ensureDownloadUrl,
+    onDocumentStackSelect: handleDeskDocumentStackSelect,
+    onPromoteSelection: promoteSelectionOrder,
   };
 
   const renderBody = () => {