feat: update frontend for document handling and styling.

frontend/src/app/DocumentsRoute.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import {
   DocumentsFilterProvider,
 } from '../documents/context/DocumentsFilterContext';
-import { PreviewProvider, usePreviewContext } from '../preview/PreviewContext';
+import { PreviewProvider, usePreviewContext } from '../viewer/PreviewContext';
 import { DocumentOpenProvider } from '../lib/context/DocumentOpenContext';
 import { useWorkspaceSurface } from './useWorkspaceSurface';
 import { DocumentsHeaderBreadcrumb } from '../documents/panel/DocumentsPanelHeader';

frontend/src/app/useWorkspaceSurface.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import type { ComponentProps, ReactNode } from 'react';
 import { SidebarExpandIcon } from '../components/icons';
 import DocumentsPanel from '../documents/panel/DocumentsPanel';
-import DocumentViewerPanel from '../preview/DocumentViewerPanel';
+import DocumentViewerPanel from '../viewer/DocumentViewerPanel';
 import { usePanelManager } from './PanelManagerContext';
 import { FolderManagerProvider } from '../folders/FolderManagerContext';
 import type { Identifier } from '../types/identifiers';

frontend/src/documents/data/useDocumentsWorkspace.ts

@@ -47,7 +47,7 @@ import useDocumentTagActions from '../features/tagging/useDocumentTagActions';
 import useDocumentUploads from '../features/upload/useDocumentUploads';
 import useDocumentDragHandlers from '../features/upload/useDocumentDragHandlers';
 import useDocumentMutations from './useDocumentMutations';
-import useDetailWorkspace from '../../detail/useDetailWorkspace';
+import useDetailWorkspace from '../../viewer/logic/useDetailWorkspace';
 import useWorkspaceTaxonomies from './useWorkspaceTaxonomies';
 import useWorkspaceBreadcrumbs from '../logic/useWorkspaceBreadcrumbs';
 import useWorkspaceSelectionSync from '../features/selection/useWorkspaceSelectionSync';

frontend/src/styles/index.css

@@ -2,17 +2,17 @@
 @import './base/controls.css';
 @import './layout/panel-header-controls.css';
 @import './components/resize-handle.css';
-@import './preview/preview-zoom.css';
+@import './viewer/preview-zoom.css';
 @import './base/iconography.css';
 @import '../documents/styles/controls.css';
 @import './layout/structure.css';
-@import '../documents/styles/viewer.css';
+@import '../viewer/styles/viewer.css';
 @import '../documents/styles/drag-preview.css';
 @import '../documents/styles/tags-correspondents.css';
 @import '../documents/styles/panel-sections.css';
 @import '../sidebar/sidebar.css';
 @import '../documents/styles/listing.css';
-@import '../detail/detail-panels.css';
+@import '../viewer/styles/detail-panels.css';
 @import './forms/elements.css';
 @import './modals/status-drop.css';
 @import '../settings/settings.css';

frontend/src/viewer/DocumentViewerLayout.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { JSX } from 'react';
-import DocumentInfoPanel from '../documents/DocumentInfoPanel';
+import DocumentInfoPanel from './components/DocumentInfoPanel';
 import UnifiedDocumentViewer from './UnifiedDocumentViewer';
 
 import type { Document } from '../types/documents';

frontend/src/viewer/DocumentViewerPanel.tsx

@@ -14,10 +14,10 @@ import {
 import {
   buildCorrespondentOptions,
   sortCorrespondents,
-} from '../documents/DocumentSummarySection';
+} from './components/DocumentSummarySection';
-import { usePreviewContext } from '../preview/PreviewContext';
+import { usePreviewContext } from './PreviewContext';
-import type { DocumentSummarySectionProps } from '../documents/DocumentSummarySection';
+import type { DocumentSummarySectionProps } from './components/DocumentSummarySection';
-import { extractDocumentMetadataPayload } from '../documents/documentSummary';
+import { extractDocumentMetadataPayload } from './logic/documentSummary';
 import { createDocumentActionState } from '../documents/documentActions';
 import { resolveDocumentAssetUrl } from '../lib/assets/AssetManager';
 import PanelHeader from '../components/PanelHeader';

frontend/src/viewer/PreviewContext.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useRef } from 'react';
-import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
+import PreviewZoomOverlay from './components/PreviewZoomOverlay';
 import type { Document } from '../types/documents';
 import type { Identifier } from '../types/identifiers';
 import { createSafeContext } from '../utils/createSafeContext';

frontend/src/viewer/components/DocumentInfoPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { ReactNode } from 'react';
 import DocumentSummarySection, { DocumentSummarySectionProps } from './DocumentSummarySection';
-import { describeDocumentSummary, extractDocumentMetadataPayload, type DocumentSummaryRow } from './documentSummary';
+import { describeDocumentSummary, extractDocumentMetadataPayload, type DocumentSummaryRow } from '../logic/documentSummary';
 
 type PanelTab = { id: string; label: string; render: (context?: Record<string, unknown>) => ReactNode };
 

frontend/src/viewer/components/DocumentSummarySection.tsx

@@ -1,21 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useState, type FormEvent } from 'react';
 import { Link } from 'react-router-dom';
-import { EditIcon, IconX, PlusIcon } from '../components/icons';
+import { EditIcon, IconX, PlusIcon } from '../../components/icons';
-import InlineRenameInput from './components/InlineRenameInput';
+import InlineRenameInput from '../../documents/components/InlineRenameInput';
 import SelectionAssignmentMenu, {
   SelectionAssignmentMenuItem,
   type NormalizedSelectionAssignmentItem,
-} from './features/selection/SelectionAssignmentMenu';
+} from '../../documents/features/selection/SelectionAssignmentMenu';
-import { getTagColorStyle } from '../utils/colors';
+import { getTagColorStyle } from '../../utils/colors';
 import {
   formatDate,
   toDateInputValue,
   toIssuedTimestamp,
-} from '../utils/date';
+} from '../../utils/date';
-import { describeDocumentSummary, type DocumentSummaryRow } from './documentSummary';
+import { describeDocumentSummary, type DocumentSummaryRow } from '../logic/documentSummary';
 
-import { useFolderManager } from '../folders/FolderManagerContext';
+import { useFolderManager } from '../../folders/FolderManagerContext';
-import type { FolderId, Identifier, TagId } from '../types/identifiers';
+import type { FolderId, Identifier, TagId } from '../../types/identifiers';
 
 interface TagEntry {
   id?: TagId;
@@ -29,7 +29,7 @@ interface CorrespondentEntry {
   count?: number;
 }
 
-import type { Document } from '../types/documents';
+import type { Document } from '../../types/documents';
 
 interface TagSectionProps {
   tags?: TagEntry[];

frontend/src/viewer/components/PreviewZoomOverlay.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import UnifiedDocumentViewer from '../preview/UnifiedDocumentViewer';
+import UnifiedDocumentViewer from '../UnifiedDocumentViewer';
-import PanelHeader from '../components/PanelHeader';
+import PanelHeader from '../../components/PanelHeader';
-import { IconX, DownloadIcon, FileInfoIcon } from '../components/icons';
+import { IconX, DownloadIcon, FileInfoIcon } from '../../components/icons';
 
-import type { Document } from '../types/documents';
+import type { Document } from '../../types/documents';
 
 interface PreviewZoomOverlayProps {
   open?: boolean;

frontend/src/viewer/logic/documentSummary.ts

@@ -1,8 +1,8 @@
-import { formatFileSize } from '../utils/format';
+import { formatFileSize } from '../../utils/format';
-import { formatDateTime as defaultFormatDateTime } from '../utils/date';
+import { formatDateTime as defaultFormatDateTime } from '../../utils/date';
-import { DEFAULT_FOLDER_NAME } from '../app/workspaceUtils';
+import { DEFAULT_FOLDER_NAME } from '../../app/workspaceUtils';
 
-import type { DocumentTag, DocumentCorrespondent, Document } from '../types/documents';
+import type { DocumentTag, DocumentCorrespondent, Document } from '../../types/documents';
 
 interface DescribeSummaryOptions {
   formatDateTime?: typeof defaultFormatDateTime;

frontend/src/viewer/logic/useDetailWorkspace.ts

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import type { MutableRefObject } from 'react';
-import { resolveDocumentAssetUrl } from '../lib/assets/AssetManager';
+import { resolveDocumentAssetUrl } from '../../lib/assets/AssetManager';
-import { useDetailPanel } from '../app/useDetailPanel';
+import { useDetailPanel } from '../../app/useDetailPanel';
-import { DEFAULT_FOLDER_NAME } from '../app/workspaceUtils';
+import { DEFAULT_FOLDER_NAME } from '../../app/workspaceUtils';
-import type { DocumentInfoPanelProps } from '../documents/DocumentInfoPanel';
+import type { DocumentInfoPanelProps } from '../components/DocumentInfoPanel';
-import type { EnsureAssetUrl, GetDocumentAsset } from '../utils/ocr';
+import type { EnsureAssetUrl, GetDocumentAsset } from '../../utils/ocr';
-import type { Identifier } from '../types/identifiers';
+import type { Identifier } from '../../types/identifiers';
-import type { Document } from '../types/documents';
+import type { Document } from '../../types/documents';
 
 interface FolderNode {
   id: Identifier | 'root';