panel actions

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "papercrate-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource/inter": "^5.2.8",
         "@tabler/icons-react": "3.11.0",
         "axios": "1.7.7",
         "react": "18.3.1",
@@ -1852,6 +1853,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "echo \"No linting configured\""
   },
   "dependencies": {
+    "@fontsource/inter": "^5.2.8",
     "@tabler/icons-react": "3.11.0",
     "axios": "1.7.7",
     "react": "18.3.1",
@@ -19,6 +20,7 @@
     "@babel/core": "7.26.0",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-react": "7.26.3",
+    "@svgr/webpack": "8.1.0",
     "babel-loader": "9.2.1",
     "css-loader": "7.1.2",
     "dotenv": "16.4.5",
@@ -26,7 +28,6 @@
     "style-loader": "4.0.0",
     "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.1.0",
+    "webpack-dev-server": "5.1.0"
-    "@svgr/webpack": "8.1.0"
   }
 }

frontend/src/correspondents/CorrespondentsPanel.jsx

@@ -118,7 +118,7 @@ function CorrespondentsPanel({
   }, []);
 
   return (
-    <section className="correspondents-panel column">
+    <section className="correspondents-panel">
       <div className="column-header">
         <div className="column-header__titles">
           <h2>Correspondents</h2>

frontend/src/detail/DetailPanel.jsx

@@ -1,6 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { DownloadIcon, EditIcon, ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
+import {
+  DownloadIcon,
+  EditIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronsRightIcon,
+  AnalyzeIcon,
+  WindowMaximizeIcon,
+  TextScanIcon,
+} from '../ui/icons';
 import { getTagColorStyle } from '../utils/colors';
 import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
@@ -297,10 +306,20 @@ const DetailPanel = ({
   onCorrespondentAdd,
   onCorrespondentRemove,
   resolveApiPath,
+  onClose = () => {},
 }) => {
   const selectedCount = selectedDocuments.length;
   const singleDoc = selectedCount === 1 ? selectedDocuments[0] : null;
 
+  const singleDownloadHref = useMemo(() => {
+    if (!singleDoc) return null;
+    const downloadPath = singleDoc.current_version?.download_path;
+    if (!downloadPath || !resolveApiPath) {
+      return null;
+    }
+    return resolveApiPath(downloadPath);
+  }, [singleDoc, resolveApiPath]);
+
   const [titleEditDocId, setTitleEditDocId] = useState(null);
   const [titleDraft, setTitleDraft] = useState('');
   const [titleSaving, setTitleSaving] = useState(false);
@@ -705,9 +724,6 @@ const DetailPanel = ({
     }
 
     const displayName = singleDoc.title || singleDoc.original_name;
-    const downloadHref = singleDoc.current_version?.download_path
-      ? resolveApiPath?.(singleDoc.current_version.download_path)
-      : null;
     const isEditingTitle = titleEditDocId === singleDoc.id;
     const sizeBytes = Number(singleDoc.current_version?.size_bytes) || 0;
     const sizeLabel = sizeBytes > 0 ? formatFileSize(sizeBytes) : '—';
@@ -857,44 +873,6 @@ const DetailPanel = ({
             {singleDoc.original_name}
           </div>
         </div>
-        <div className="detail-actions">
-          <a
-            className="button-link with-icon"
-            href={downloadHref || '#'}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-disabled={!downloadHref}
-            onClick={(event) => {
-              if (!downloadHref) {
-                event.preventDefault();
-              }
-            }}
-          >
-            <DownloadIcon className="icon-inline" />
-            <span>Download</span>
-          </a>
-          <button
-            type="button"
-            className="secondary"
-            onClick={() => onOpenPreview(singleDoc.id)}
-          >
-            Open preview
-          </button>
-        <button
-          type="button"
-          className="secondary"
-          onClick={() => onRegenerateThumbnails(singleDoc.id)}
-        >
-          Re-run analysis
-        </button>
-        </div>
-        {hasOcrAsset ? (
-          <div className="detail-ocr-trigger">
-            <button type="button" className="secondary" onClick={openOcrModal}>
-              View OCR text
-            </button>
-          </div>
-        ) : null}
         <TagSection
           title="Tags"
           tags={tagsForDoc.map((tag) => ({
@@ -1074,20 +1052,100 @@ const DetailPanel = ({
           showCount
           className="bulk-correspondents"
         />
-        <button
-          type="button"
-          className="secondary"
-          onClick={() => onBulkReanalyze?.()}
-        >
-          Re-analyze selection
-        </button>
       </>
     );
   };
 
+  const isBulkSelection = selectedCount > 1;
+  const showOcrAction = Boolean(singleDoc && hasOcrAsset);
+
   return (
-    <aside className="detail-panel column">
+    <aside className="detail-panel panel">
-      <div className="column-body scrollable">
+      <div className="panel-header">
+        <div className="panel-actions">
+          <button
+            type="button"
+            className="icon-button ghost"
+            onClick={onClose}
+            aria-label="Close detail panel"
+            title="Close detail panel"
+          >
+            <ChevronsRightIcon />
+          </button>
+          <div className="spacer" />
+          {isBulkSelection && onBulkReanalyze ? (
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={(event) => {
+                event.stopPropagation();
+                onBulkReanalyze();
+              }}
+              aria-label="Re-run analysis for selection"
+              title="Re-run analysis for selection"
+            >
+              <AnalyzeIcon />
+            </button>
+          ) : null}
+          {singleDoc && singleDownloadHref ? (
+            <a
+              className="icon-button"
+              href={singleDownloadHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Download document"
+              title="Download document"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <DownloadIcon />
+            </a>
+          ) : null}
+          {singleDoc ? (
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenPreview(singleDoc.id);
+              }}
+              aria-label="Open preview"
+              title="Open preview"
+              disabled={!singleHasPreview}
+            >
+              <WindowMaximizeIcon />
+            </button>
+          ) : null}
+          {showOcrAction ? (
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={(event) => {
+                event.stopPropagation();
+                openOcrModal();
+              }}
+              aria-label="View OCR text"
+              title="View OCR text"
+            >
+              <TextScanIcon />
+            </button>
+          ) : null}
+          {singleDoc ? (
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={(event) => {
+                event.stopPropagation();
+                onRegenerateThumbnails(singleDoc.id);
+              }}
+              aria-label="Re-run analysis"
+              title="Re-run analysis"
+            >
+              <AnalyzeIcon />
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <div className="panel-body">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
     </aside>

frontend/src/documents/DocumentsTable.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
-import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon } from '../ui/icons';
+import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon, TrashIcon } from '../ui/icons';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const DEFAULT_GRID_ICON_SIZE = 96;
@@ -263,16 +263,6 @@ const DocumentsTable = ({
     [isTagDragEvent, onDocumentTagDrop],
   );
 
-  const handleGridBackgroundClick = useCallback(
-    (event) => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      onClearSelection?.();
-    },
-    [onClearSelection],
-  );
-
   const showDefaultEmptyState = !showingSearchResults && !subfolders.length && rows.length === 0;
   const showListSearchEmptyState =
     showingSearchResults && rows.length === 0 && !isGridView && !isSearchLoading;
@@ -286,29 +276,7 @@ const DocumentsTable = ({
     >
       <div className="column-header">
         <div className="column-header__titles">
-          <nav className="breadcrumb" aria-label="Folder breadcrumbs">
+          <h2>{currentFolderName}</h2>
-            {breadcrumbs.map((crumb, index) => {
-              const isLast = index === breadcrumbs.length - 1;
-              return (
-                <span key={crumb.id} className="breadcrumb-item">
-                  {isLast ? (
-                    <span className="breadcrumb-current">{crumb.name}</span>
-                  ) : (
-                    <a
-                      href="#"
-                      onClick={(event) => {
-                        event.preventDefault();
-                        onFolderSelect(crumb.id);
-                      }}
-                    >
-                      {crumb.name}
-                    </a>
-                  )}
-                  {!isLast && <span className="breadcrumb-separator">›</span>}
-                </span>
-              );
-            })}
-          </nav>
           {showingSearchResults && (
             <div className="column-subtitle">Search results</div>
           )}
@@ -376,13 +344,22 @@ const DocumentsTable = ({
               onDocumentListKeyDown(event);
             }
           }}
+          onClick={(event) => {
+            if (event.target === event.currentTarget) {
+              onClearSelection?.();
+            }
+          }}
           aria-activedescendant={isGridView ? undefined : activeDescendantId}
         >
           {showDefaultEmptyState ? null : isGridView ? (
             <div
               className="documents-grid"
               role="list"
-              onClick={handleGridBackgroundClick}
+              onClick={(event) => {
+                if (event.target === event.currentTarget) {
+                  onClearSelection?.();
+                }
+              }}
               style={{ '--documents-grid-icon-size': `${gridIconSize}px` }}
             >
               {!showingSearchResults &&
@@ -619,13 +596,20 @@ const DocumentsTable = ({
                         <td className="doc-list__name">
                           <div className="doc-list__name-content">
                             <span>{folder.name}</span>
-                            {folder.id !== 'root' && (
+                          </div>
+                        </td>
+                        <td>Folder</td>
+                        <td>—</td>
+                        <td className="actions">
+                          <div className="action-buttons">
+                            {folder.id !== 'root' && onFolderRename && (
                               <button
                                 type="button"
-                                className="icon-button ghost doc-list__icon-button"
+                                className="icon-button ghost"
+                                title="Rename"
+                                aria-label={`Rename folder ${folder.name}`}
                                 onClick={(event) => {
                                   event.stopPropagation();
-                                  if (!onFolderRename) return;
                                   const nextName = window.prompt('Rename folder', folder.name || '');
                                   if (!nextName) {
                                     return;
@@ -636,28 +620,24 @@ const DocumentsTable = ({
                                   }
                                   onFolderRename(folder.id, trimmed);
                                 }}
-                                title="Rename folder"
-                                aria-label={`Rename folder ${folder.name}`}
                               >
-                                <EditIcon className="doc-list__icon" size={16} />
+                                <EditIcon className="icon-inline" />
                               </button>
                             )}
+                            <button
+                              type="button"
+                              className="icon-button danger"
+                              title="Delete"
+                              aria-label={`Delete folder ${folder.name}`}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                onFolderDelete(folder.id);
+                              }}
+                            >
+                              <TrashIcon className="icon-inline" />
+                            </button>
                           </div>
                         </td>
-                        <td>Folder</td>
-                        <td>—</td>
-                        <td className="actions">
-                          <button
-                            type="button"
-                            className="icon-button danger"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              onFolderDelete(folder.id);
-                            }}
-                          >
-                            Delete
-                          </button>
-                        </td>
                       </tr>
                     );
                   })}
@@ -696,30 +676,6 @@ const DocumentsTable = ({
                         <div className="doc-name">
                           <div className="doc-list__name-content">
                             <span className="doc-name__title">{doc.title || doc.original_name}</span>
-                            <button
-                              type="button"
-                              className="icon-button ghost doc-list__icon-button"
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                if (!onDocumentRename) return;
-                                const nextName = window.prompt(
-                                  'Rename document',
-                                  doc.title || doc.original_name || '',
-                                );
-                                if (!nextName) {
-                                  return;
-                                }
-                                const trimmed = nextName.trim();
-                                if (!trimmed || trimmed === (doc.title || doc.original_name)) {
-                                  return;
-                                }
-                                onDocumentRename(doc.id, trimmed);
-                              }}
-                              title="Rename document"
-                              aria-label={`Rename document ${doc.title || doc.original_name}`}
-                            >
-                              <EditIcon className="doc-list__icon" size={16} />
-                            </button>
                           </div>
                           {(doc.tags || []).length > 0 && (
                             <div className="doc-name__tags">
@@ -788,31 +744,59 @@ const DocumentsTable = ({
                       </td>
                       <td className="actions">
                         <div className="action-buttons">
+                          {onDocumentRename && (
+                            <button
+                              type="button"
+                              className="icon-button ghost"
+                              title="Rename"
+                              aria-label={`Rename document ${doc.title || doc.original_name}`}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                const nextName = window.prompt(
+                                  'Rename document',
+                                  doc.title || doc.original_name || '',
+                                );
+                                if (!nextName) {
+                                  return;
+                                }
+                                const trimmed = nextName.trim();
+                                if (!trimmed || trimmed === (doc.title || doc.original_name)) {
+                                  return;
+                                }
+                                onDocumentRename(doc.id, trimmed);
+                              }}
+                            >
+                              <EditIcon className="icon-inline" />
+                            </button>
+                          )}
                           {downloadHref ? (
                             <a
-                              className="button-link with-icon"
+                              className="icon-button"
                               href={downloadHref}
                               target="_blank"
                               rel="noopener noreferrer"
+                              title="Download"
+                              aria-label="Download document"
                               onClick={(event) => event.stopPropagation()}
                               onAuxClick={(event) => event.stopPropagation()}
                               onContextMenu={(event) => event.stopPropagation()}
                             >
                               <DownloadIcon className="icon-inline" />
-                              <span>Download</span>
                             </a>
                           ) : (
                             <span className="meta">No download</span>
                           )}
                           <button
                             type="button"
-                            className="danger"
+                            className="icon-button danger"
+                            title="Delete"
+                            aria-label="Delete document"
                             onClick={(event) => {
                               event.stopPropagation();
                               onDocumentDelete?.(doc.id);
                             }}
                           >
-                            Delete
+                            <TrashIcon className="icon-inline" />
                           </button>
                         </div>
                       </td>

frontend/src/index.jsx

@@ -1,3 +1,5 @@
+import '@fontsource/inter/400.css';
+
 import React, {
   useCallback,
   useContext,
@@ -345,6 +347,8 @@ const AppLayout = () => {
   );
   const [loading, setLoading] = useState(false);
   const [isCreateFolderModalOpen, setCreateFolderModalOpen] = useState(false);
+  const [isTagsModalOpen, setTagsModalOpen] = useState(false);
+  const [isCorrespondentsModalOpen, setCorrespondentsModalOpen] = useState(false);
   const [newFolderName, setNewFolderName] = useState('');
   const [createFolderError, setCreateFolderError] = useState('');
   const [creatingFolder, setCreatingFolder] = useState(false);
@@ -366,15 +370,11 @@ const AppLayout = () => {
     const stored = window.localStorage.getItem('papercrate_view_mode');
     return stored === 'grid' ? 'grid' : 'list';
   });
-  const initialRowSelection = routeDocumentId
+  const initialRowSelection = [];
-    ? [resolveDocumentRowKey(routeDocumentId)]
-    : [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
   const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
-  const [focusedDocumentId, setFocusedDocumentId] = useState(routeDocumentId);
+  const [focusedDocumentId, setFocusedDocumentId] = useState(null);
-  const [focusedRowKey, setFocusedRowKey] = useState(() =>
+  const [focusedRowKey, setFocusedRowKey] = useState(null);
-    routeDocumentId ? resolveDocumentRowKey(routeDocumentId) : null,
-  );
   const tokenRef = useRef(token);
   const refreshPromiseRef = useRef(null);
   const breadcrumbFetchRef = useRef(new Set());
@@ -423,13 +423,9 @@ const AppLayout = () => {
   const documentsRouteMatch = useMatch('/documents');
   const documentsFolderRouteMatch = useMatch('/documents/folder/:folderId');
   const documentsDetailRouteMatch = useMatch('/documents/:documentId');
-  const tagsRouteMatch = useMatch('/tags');
-  const correspondentsRouteMatch = useMatch('/correspondents');
   const isDocumentsRoute = Boolean(
     documentsRouteMatch || documentsFolderRouteMatch || documentsDetailRouteMatch,
   );
-  const isTagsRoute = Boolean(tagsRouteMatch);
-  const isCorrespondentsRoute = Boolean(correspondentsRouteMatch);
   const toggleTagFilter = useCallback((tagId) => {
     if (!tagId) return;
     setActiveTagFilters((previous) =>
@@ -455,6 +451,10 @@ const AppLayout = () => {
     setSearchLoading(false);
   }, []);
 
+  const handleSearchChange = useCallback((value) => {
+    setSearchQuery(value);
+  }, []);
+
   const handleSearchSubmit = useCallback(() => {
     if (!navigate) return;
     const targetFolder = selectedFolder && selectedFolder !== 'root' ? selectedFolder : 'root';
@@ -814,14 +814,7 @@ const AppLayout = () => {
         if (selectionInitializedRef.current) {
           nextDocKeys = previousDocKeys.filter((key) => availableDocKeySet.has(key));
         } else {
-          const filtered = previousDocKeys.filter((key) => availableDocKeySet.has(key));
+          nextDocKeys = previousDocKeys.filter((key) => availableDocKeySet.has(key));
-          if (filtered.length) {
-            nextDocKeys = filtered;
-          } else if (availableDocKeys.length) {
-            nextDocKeys = [availableDocKeys[0]];
-          } else {
-            nextDocKeys = [];
-          }
         }
 
         mergedSelection = [...previousFolderKeys, ...nextDocKeys];
@@ -3682,6 +3675,24 @@ const AppLayout = () => {
     setCreateFolderError('');
   }, [creatingFolder]);
 
+  const openTagsModal = useCallback(() => {
+    setCorrespondentsModalOpen(false);
+    setTagsModalOpen(true);
+  }, []);
+
+  const closeTagsModal = useCallback(() => {
+    setTagsModalOpen(false);
+  }, []);
+
+  const openCorrespondentsModal = useCallback(() => {
+    setTagsModalOpen(false);
+    setCorrespondentsModalOpen(true);
+  }, []);
+
+  const closeCorrespondentsModal = useCallback(() => {
+    setCorrespondentsModalOpen(false);
+  }, []);
+
   const handleCreateFolderSubmit = useCallback(
     async (event) => {
       event.preventDefault();
@@ -3742,6 +3753,31 @@ const AppLayout = () => {
     };
   }, [isCreateFolderModalOpen, closeCreateFolderModal]);
 
+  useEffect(() => {
+    setTagsModalOpen(false);
+    setCorrespondentsModalOpen(false);
+  }, [location.pathname]);
+
+  useEffect(() => {
+    if (!isTagsModalOpen && !isCorrespondentsModalOpen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        if (isTagsModalOpen) {
+          closeTagsModal();
+        } else if (isCorrespondentsModalOpen) {
+          closeCorrespondentsModal();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isTagsModalOpen, isCorrespondentsModalOpen, closeTagsModal, closeCorrespondentsModal]);
+
   useEffect(() => {
     if (!token) return undefined;
 
@@ -4442,6 +4478,16 @@ const AppLayout = () => {
     correspondents,
     activeCorrespondentIds: activeCorrespondentFilters,
     onToggleCorrespondentFilter: toggleCorrespondentFilter,
+    appStatus,
+    loading,
+    previewActive,
+    searchQuery,
+    onSearchChange: handleSearchChange,
+    onSearchSubmit: handleSearchSubmit,
+    onSearchClear: clearFilters,
+    isFilterActive,
+    onLogout: handleLogout,
+    status,
   };
 
   const resolveThumbnailUrlForDoc = useCallback(
@@ -4538,6 +4584,7 @@ const AppLayout = () => {
     onCorrespondentAdd: handleCorrespondentAdd,
     onCorrespondentRemove: handleCorrespondentRemove,
     resolveApiPath,
+    onClose: clearDocumentSelection,
   };
 
   const skeuoWorkspaceProps = useMemo(
@@ -4585,7 +4632,6 @@ const AppLayout = () => {
       tags,
       refreshTags,
       handleTagUpdate,
-      handleTagCreate,
       handleTagDelete,
       handleDocumentTagAttach,
       correspondents,
@@ -4610,6 +4656,8 @@ const AppLayout = () => {
       ensurePreviewData,
       notifyApiError,
       resolveApiPath,
+      openTagsModal,
+      openCorrespondentsModal,
     }),
     [
       token,
@@ -4622,7 +4670,6 @@ const AppLayout = () => {
       tags,
       refreshTags,
       handleTagUpdate,
-      handleTagCreate,
       handleTagDelete,
       handleDocumentTagAttach,
       correspondents,
@@ -4647,6 +4694,8 @@ const AppLayout = () => {
       ensurePreviewData,
       notifyApiError,
       resolveApiPath,
+      openTagsModal,
+      openCorrespondentsModal,
     ],
   );
 
@@ -4667,81 +4716,6 @@ const AppLayout = () => {
           active={dropOverlayState.active}
           folderName={dropOverlayState.folderName}
         />
-        <header className="app-bar">
-          <div className="app-bar__main">
-            <div className="app-bar__meta">
-              <h1>Papercrate</h1>
-              <span className="app-bar__hint">
-                {appStatus === 'bootstrapping' && loading
-                  ? 'Loading your library…'
-                  : previewActive
-                  ? 'Viewing document preview. Press ← Back to return to the library.'
-                  : 'Drag files here to upload.'}
-              </span>
-            </div>
-            <div className="app-bar__search">
-              <input
-                type="search"
-                value={searchQuery}
-                onChange={(event) => setSearchQuery(event.target.value)}
-                placeholder="Search documents"
-                aria-label="Search documents"
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    event.preventDefault();
-                    handleSearchSubmit();
-                  }
-                }}
-              />
-              {isFilterActive && (
-                <button
-                  type="button"
-                  className="app-bar__search-clear"
-                  onClick={clearFilters}
-                >
-                  Clear
-                </button>
-              )}
-            </div>
-            <div className="app-bar__right">
-              <div className="app-bar__links">
-                <button
-                  type="button"
-                  className={`app-bar__link${isDocumentsRoute ? ' active' : ''}`}
-                  onClick={() => navigate('/documents')}
-                >
-                  Documents
-                </button>
-                <button
-                  type="button"
-                  className={`app-bar__link${isTagsRoute ? ' active' : ''}`}
-                  onClick={() => navigate('/tags')}
-                >
-                  Tags
-                  <span className="app-bar__link-count">{tags.length}</span>
-                </button>
-                <button
-                  type="button"
-                  className={`app-bar__link${isCorrespondentsRoute ? ' active' : ''}`}
-                  onClick={() => navigate('/correspondents')}
-                >
-                  Correspondents
-                  <span className="app-bar__link-count">{correspondents.length}</span>
-                </button>
-              </div>
-              {status && (
-                <div className="app-bar__status">
-                  <StatusBanner status={status} />
-                </div>
-              )}
-              <div className="app-bar__actions">
-                <button className="secondary" onClick={handleLogout}>
-                  Log out
-                </button>
-              </div>
-            </div>
-          </div>
-        </header>
         <Outlet />
         {isCreateFolderModalOpen && (
           <div
@@ -4791,6 +4765,74 @@ const AppLayout = () => {
             </div>
           </div>
         )}
+        {isTagsModalOpen && (
+          <div
+            className="modal-backdrop"
+            role="presentation"
+            onClick={closeTagsModal}
+          >
+            <div
+              className="modal modal--panel"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="tags-modal-title"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div className="panel-modal__header">
+                <h3 id="tags-modal-title">Manage Tags</h3>
+                <button type="button" className="secondary" onClick={closeTagsModal}>
+                  Close
+                </button>
+              </div>
+              <div className="panel-modal__body">
+                <TagsPanel
+                  tags={tags}
+                  onRefresh={refreshTags}
+                  onCreateTag={handleTagCreate}
+                  onUpdateTag={handleTagUpdate}
+                  onDeleteTag={handleTagDelete}
+                  onNotify={setStatusMessage}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+        {isCorrespondentsModalOpen && (
+          <div
+            className="modal-backdrop"
+            role="presentation"
+            onClick={closeCorrespondentsModal}
+          >
+            <div
+              className="modal modal--panel"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="correspondents-modal-title"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div className="panel-modal__header">
+                <h3 id="correspondents-modal-title">Manage Correspondents</h3>
+                <button
+                  type="button"
+                  className="secondary"
+                  onClick={closeCorrespondentsModal}
+                >
+                  Close
+                </button>
+              </div>
+              <div className="panel-modal__body">
+                <CorrespondentsPanel
+                  correspondents={correspondents}
+                  onRefresh={refreshCorrespondents}
+                  onCreate={handleCorrespondentCreate}
+                  onUpdate={handleCorrespondentUpdate}
+                  onDelete={handleCorrespondentDelete}
+                  onNotify={setStatusMessage}
+                />
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </AppShellContext.Provider>
   );
@@ -4803,20 +4845,39 @@ const DocumentsRoute = () => {
     detailPanelProps,
     workspaceMode,
     skeuoWorkspaceProps,
+    openTagsModal,
+    openCorrespondentsModal,
   } = useAppShell();
 
+  const sidebarPropsWithActions = useMemo(
+    () => ({
+      ...sidebarProps,
+      onManageTags: openTagsModal,
+      onManageCorrespondents: openCorrespondentsModal,
+    }),
+    [sidebarProps, openTagsModal, openCorrespondentsModal],
+  );
+
   if (workspaceMode === 'skeuo') {
     return (
-      <DocumentsLayout sidebarProps={sidebarProps}>
+      <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-        <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+        <div className="main-content">
+          <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+        </div>
       </DocumentsLayout>
     );
   }
 
+  const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
+
   return (
-    <DocumentsLayout sidebarProps={sidebarProps}>
+    <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-      <DocumentsTable {...documentsTableProps} />
+      <div
-      <DetailPanel {...detailPanelProps} />
+        className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}
+      >
+        <DocumentsTable {...documentsTableProps} />
+        {detailHasContent ? <DetailPanel {...detailPanelProps} /> : null}
+      </div>
     </DocumentsLayout>
   );
 };
@@ -4951,51 +5012,6 @@ const LoginRoute = () => {
   );
 };
 
-function TagsRoute() {
-  const {
-    tags,
-    refreshTags,
-    handleTagUpdate,
-    handleTagDelete,
-    setStatusMessage,
-  } = useAppShell();
-  return (
-    <main className="panels-main">
-      <TagsPanel
-        tags={tags}
-        onRefresh={refreshTags}
-        onUpdateTag={handleTagUpdate}
-        onDeleteTag={handleTagDelete}
-        onNotify={setStatusMessage}
-      />
-    </main>
-  );
-}
-
-function CorrespondentsRoute() {
-  const {
-    correspondents,
-    refreshCorrespondents,
-    handleCorrespondentCreate,
-    handleCorrespondentUpdate,
-    handleCorrespondentDelete,
-    setStatusMessage,
-  } = useAppShell();
-
-  return (
-    <main className="panels-main">
-      <CorrespondentsPanel
-        correspondents={correspondents}
-        onRefresh={refreshCorrespondents}
-        onCreate={handleCorrespondentCreate}
-        onUpdate={handleCorrespondentUpdate}
-        onDelete={handleCorrespondentDelete}
-        onNotify={setStatusMessage}
-      />
-    </main>
-  );
-}
-
 const AppRouter = () => (
   <Routes>
     <Route path="/account/login" element={<LoginRoute />} />
@@ -5004,8 +5020,6 @@ const AppRouter = () => (
       <Route path="/documents" element={<DocumentsRoute />} />
       <Route path="/documents/folder/:folderId" element={<DocumentsRoute />} />
       <Route path="/documents/:documentId" element={<DocumentViewerRoute />} />
-      <Route path="/tags" element={<TagsRoute />} />
-      <Route path="/correspondents" element={<CorrespondentsRoute />} />
       <Route path="*" element={<Navigate to="/documents" replace />} />
     </Route>
   </Routes>

frontend/src/sidebar/Sidebar.jsx

@@ -136,6 +136,18 @@ const Sidebar = ({
   correspondents = [],
   activeCorrespondentIds = [],
   onToggleCorrespondentFilter,
+  onManageTags,
+  onManageCorrespondents,
+  searchQuery = '',
+  onSearchChange,
+  onSearchSubmit,
+  onSearchClear,
+  isFilterActive,
+  appStatus,
+  loading,
+  previewActive,
+  onLogout,
+  status,
 }) => {
   const sortedCorrespondents = useMemo(
     () =>
@@ -150,6 +162,27 @@ const Sidebar = ({
   );
   const handleToggleTag = onToggleTagFilter || (() => {});
   const activeTagSet = new Set(activeTagIds);
+  const handleManageTags = onManageTags || (() => {});
+  const handleManageCorrespondents = onManageCorrespondents || (() => {});
+  const handleSearchInputChange = useCallback(
+    (event) => {
+      onSearchChange?.(event.target.value);
+    },
+    [onSearchChange],
+  );
+  const handleSearchFormSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      onSearchSubmit?.();
+    },
+    [onSearchSubmit],
+  );
+  const handleSearchClear = useCallback(() => {
+    onSearchClear?.();
+  }, [onSearchClear]);
+  const handleLogoutClick = useCallback(() => {
+    onLogout?.();
+  }, [onLogout]);
 
   const renderNodes = useCallback(
     (ids, depth) =>
@@ -193,9 +226,39 @@ const Sidebar = ({
   );
 
   const rootNode = folderNodes.get('root');
+  const hintText = appStatus === 'bootstrapping' && loading
+    ? 'Loading your library…'
+    : previewActive
+    ? 'Viewing document preview. Press ← Back to return to the library.'
+    : 'Drag files here to upload.';
 
   return (
-    <aside className="sidebar column">
+    <aside className="sidebar">
+      <div className="sidebar__meta">
+        <h1 className="sidebar__title">Papercrate</h1>
+        <span className="sidebar__hint">{hintText}</span>
+        {onSearchChange && (
+          <form className="sidebar__search" onSubmit={handleSearchFormSubmit}>
+            <input
+              type="search"
+              value={searchQuery}
+              onChange={handleSearchInputChange}
+              placeholder="Search documents"
+              aria-label="Search documents"
+            />
+            {isFilterActive && (
+              <button type="button" onClick={handleSearchClear}>
+                Clear
+              </button>
+            )}
+          </form>
+        )}
+        {status && (
+          <div className="sidebar__status">
+            <div className={`status-banner ${status.variant}`}>{status.message}</div>
+          </div>
+        )}
+      </div>
       <div className="sidebar-section sidebar-section--folders">
         <div className="sidebar-section__header">
           <h3>Folders</h3>
@@ -206,8 +269,14 @@ const Sidebar = ({
       </div>
       <div className="sidebar-section">
         <div className="sidebar-section__header">
-          <h3>Tags</h3>
+          <button
-          <span className="meta">{tags.length}</span>
+            type="button"
+            className="sidebar-section__title"
+            onClick={handleManageTags}
+          >
+            <h3>Tags</h3>
+            <span className="meta">{tags.length}</span>
+          </button>
         </div>
         <div
           className={`sidebar-tag-cloud${
@@ -215,84 +284,87 @@ const Sidebar = ({
           }`}
           role="list"
         >
-          {tags.length ? (
+          {tags.map((tag) => {
-            tags.map((tag) => {
+            const isActive = activeTagSet.has(tag.id);
-              const isActive = activeTagSet.has(tag.id);
+            const style = getTagColorStyle(tag.color);
-              const style = getTagColorStyle(tag.color);
+            const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
-              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+            return (
-              return (
+              <button
-                <button
+                key={tag.id}
-                  key={tag.id}
+                type="button"
-                  type="button"
+                role="listitem"
-                  role="listitem"
+                className={className}
-                  className={className}
+                style={style || undefined}
-                  style={style || undefined}
+                onClick={() => handleToggleTag(tag.id)}
-                  onClick={() => handleToggleTag(tag.id)}
+                aria-pressed={isActive}
-                  aria-pressed={isActive}
+                draggable
-                  draggable
+                onDragStart={(event) => {
-                  onDragStart={(event) => {
+                  try {
-                    try {
+                    const payload = JSON.stringify({
-                      const payload = JSON.stringify({
+                      id: tag.id,
-                        id: tag.id,
+                      label: tag.label,
-                        label: tag.label,
+                      color: tag.color || null,
-                        color: tag.color || null,
+                    });
-                      });
+                    event.dataTransfer.effectAllowed = 'copy';
-                      event.dataTransfer.effectAllowed = 'copy';
+                    event.dataTransfer.setData('application/x-papercrate-tag', payload);
-                      event.dataTransfer.setData('application/x-papercrate-tag', payload);
+                    event.dataTransfer.setData('text/papercrate-tag', payload);
-                      event.dataTransfer.setData('text/papercrate-tag', payload);
+                  } catch (
-                    } catch (
+                    // eslint-disable-next-line no-empty
-                      // eslint-disable-next-line no-empty
+                    error
-                      error
+                  ) {}
-                    ) {}
+                }}
-                  }}
+              >
-                >
+                {tag.label}
-                  {tag.label}
+              </button>
-                </button>
+            );
-              );
+          })}
-            })
-          ) : (
-            <span className="meta">No tags yet</span>
-          )}
         </div>
       </div>
       <div className="sidebar-section">
         <div className="sidebar-section__header">
-          <h3>Correspondents</h3>
+          <button
-          <span className="meta">{correspondents.length}</span>
+            type="button"
+            className="sidebar-section__title"
+            onClick={handleManageCorrespondents}
+          >
+            <h3>Correspondents</h3>
+            <span className="meta">{correspondents.length}</span>
+          </button>
         </div>
         <ul className="sidebar-correspondent-list">
-          {sortedCorrespondents.length ? (
+          {sortedCorrespondents.map((correspondent) => {
-            sortedCorrespondents.map((correspondent) => {
+            const isActive = activeCorrespondentSet.has(correspondent.id);
-              const isActive = activeCorrespondentSet.has(correspondent.id);
+            const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
-              const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
+            const label = correspondent.name || 'Unnamed';
-              const label = correspondent.name || 'Unnamed';
+            const handleSelect = () => {
-              const handleSelect = () => {
+              const nextId = isActive ? null : correspondent.id;
-                const nextId = isActive ? null : correspondent.id;
+              onToggleCorrespondentFilter?.(nextId);
-                onToggleCorrespondentFilter?.(nextId);
+            };
-              };
+            return (
-              return (
+              <li key={correspondent.id}>
-                <li key={correspondent.id}>
+                <span
-                  <span
+                  className={className}
-                    className={className}
+                  role="button"
-                    role="button"
+                  onClick={handleSelect}
-                    onClick={handleSelect}
+                  onKeyDown={(event) => {
-                    onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
-                      if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
-                        event.preventDefault();
+                      handleSelect();
-                        handleSelect();
+                    }
-                      }
+                  }}
-                    }}
+                >
-                  >
+                  {label}
-                    {label}
+                </span>
-                  </span>
+              </li>
-                </li>
+            );
-              );
+          })}
-            })
-          ) : (
-            <li className="meta">No correspondents yet</li>
-          )}
         </ul>
       </div>
+      <div className="sidebar__footer">
+        <button className="secondary" type="button" onClick={handleLogoutClick}>
+          Log out
+        </button>
+      </div>
     </aside>
   );
 };

frontend/src/skeuomorphic_ws.css

@@ -13,7 +13,6 @@
   grid-column: 2 / -1;
   min-height: 0;
   position: relative;
-  background-color: var(--surface-subtle);
 }
 
 .skeuo-header {
@@ -22,7 +21,6 @@
   justify-content: space-between;
   gap: 1rem;
   padding: 0.75rem 1rem 0.5rem;
-  background-color: var(--surface-subtle);
 }
 
 .skeuo-header__meta {

frontend/src/skeuomorphic_ws.jsx

@@ -1489,29 +1489,11 @@ const SkeuomorphicWorkspace = ({
     [queueFocusCanvas, handleTagDragEnd, onRemoveTagFromDocument, updateRemovalCursor],
   );
 
-  const renderBreadcrumbs = () => {
-    if (!breadcrumbs.length) return null;
-    return (
-      <nav className="skeuo-breadcrumbs" aria-label="Folder breadcrumbs">
-        {breadcrumbs.map((crumb, index) => {
-          const isLast = index === breadcrumbs.length - 1;
-          return (
-            <span key={crumb.id} className={`skeuo-crumb${isLast ? ' is-current' : ''}`}>
-              {crumb.name}
-              {!isLast && <span className="skeuo-crumb-separator">›</span>}
-            </span>
-          );
-        })}
-      </nav>
-    );
-  };
-
   return (
     <div className="skeuo-shell">
       <header className="skeuo-header">
         <div className="skeuo-header__meta">
           <h2>{currentFolderName}</h2>
-          {renderBreadcrumbs()}
           {showingSearchResults && <span className="meta">Showing search results</span>}
         </div>
         <div className="skeuo-header__actions">

frontend/src/styles.css

@@ -1,64 +1,62 @@
 :root {
   color-scheme: light;
-  /* Neutrals */
-  --bg: #f6f6f6;
-  --surface: #fbfbfb;
-  --surface-subtle: #f3f3f3;
-  --fg: #1e2127;
-  --muted: #646a75;
-  --sidebar-fg: #5f6672;
-  --border: #dde1e6;
-  --shadow-faint: rgba(0, 0, 0, 0.06);
-  --shadow-soft: rgba(0, 0, 0, 0.12);
-  --shadow-medium: rgba(0, 0, 0, 0.18);
-  --overlay-backdrop: rgba(30, 33, 39, 0.45);
-  --overlay-shadow: rgba(30, 33, 39, 0.18);
 
-  --app-bar-background: var(--surface-subtle);
+  /* master warmth bias: positive = warmer, negative = cooler */
+  --warmth: 3deg; /* try +5deg for warmer, -5deg for cooler */
 
-  /* Accent (primary action, selection, focus) */
+  /* --- Neutrals --- */
-  --accent: #3f6ad8;
+  --bg: oklch(0.97 0.001 calc(100deg + var(--warmth)));
-  --accent-hover: #365cb9;
+  --surface: oklch(0.985 0.001 calc(100deg + var(--warmth)));
-  --on-accent: #ffffff;
+  --surface-subtle: oklch(0.96 0.002 calc(100deg + var(--warmth)));
+  --fg: oklch(0.32 0.005 calc(270deg + var(--warmth)));
+  --muted: oklch(0.54 0.008 calc(270deg + var(--warmth)));
+  --sidebar-fg: oklch(0.56 0.007 calc(270deg + var(--warmth)));
+  --border: oklch(0.88 0.002 calc(270deg + var(--warmth)));
 
-  /* Soft tints & outlines (for chips, row hovers, subtle fills) */
+  /* --- Accent (primary) --- */
-  --accent-soft: rgba(63, 106, 216, 0.12);
+  --accent: oklch(0.61 0.20 calc(260deg + var(--warmth)));
-  --accent-elevated: rgba(63, 106, 216, 0.16);
+  --accent-hover: oklch(0.70 0.18 calc(260deg + var(--warmth)));
-  --accent-elevated-strong: rgba(63, 106, 216, 0.22);
+  --on-accent: oklch(1 0 0);
-  --accent-outline: rgba(63, 106, 216, 0.45);
-  --accent-outline-strong: rgba(63, 106, 216, 0.9);
-  --accent-focus: rgba(63, 106, 216, 0.85);
-  --surface-overlay: rgba(255, 255, 255, 0.82);
 
-  /* States specific to explorer UX */
+  /* --- Derived accent states --- */
-  --row-hover-bg: rgba(63, 106, 216, 0.06);
+  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
-  --row-active-bg: rgba(63, 106, 216, 0.12);
+  --accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
-  --sidebar-hover-bg: rgba(63, 106, 216, 0.08);
+  --accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
-  --sidebar-active-bg: rgba(63, 106, 216, 0.16);
+  --accent-outline: color-mix(in oklch, var(--accent) 45%, transparent);
-  --selection-ring: #9bb6ff;
+  --accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
-  --documents-grid-title-size: 12px;
+  --accent-focus: color-mix(in oklch, var(--accent) 85%, transparent);
-  --documents-grid-icon-size: 128px;
+  --surface-overlay: color-mix(in oklch, white 82%, transparent);
 
-  /* Semantic colors */
+  /* --- Shadows & overlays --- */
-  --success: #2e7d6b;
+  --shadow-faint: color-mix(in oklch, black 6%, transparent);
-  --success-subtle: rgba(46, 125, 107, 0.12);
+  --shadow-soft: color-mix(in oklch, black 12%, transparent);
-  --warning: #b98a2e;
+  --shadow-medium: color-mix(in oklch, black 18%, transparent);
-  --warning-subtle: rgba(185, 138, 46, 0.12);
+  --overlay-backdrop: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 45%, transparent);
-  --danger: #cc5a52;
+  --overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 18%, transparent);
-  --danger-border: rgba(204, 90, 82, 0.45);
-  --danger-soft: rgba(204, 90, 82, 0.12);
-  --danger-subtle: rgba(204, 90, 82, 0.08);
 
-  /* File-type accents (used for icons/labels) */
+  /* --- Semantic colors (relative warmth) --- */
-  --file-folder: #e6a23c;   /* folders */
+  --success: oklch(0.62 0.18 calc(190deg + var(--warmth)));
-  --file-doc: #3f6ad8;      /* docs */
+  --warning: oklch(0.72 0.17 calc(95deg + var(--warmth)));
-  --file-code: #5b9b5f;     /* code */
+  --danger: oklch(0.60 0.18 calc(35deg + var(--warmth)));
-  --file-image: #9a6bd1;    /* images */
+
-  --file-audio: #db6f9a;    /* audio */
+  --success-subtle: color-mix(in oklch, var(--success) 12%, transparent);
-  --file-archive: #9c7a59;  /* zips */
+  --warning-subtle: color-mix(in oklch, var(--warning) 12%, transparent);
+  --danger-border: color-mix(in oklch, var(--danger) 45%, transparent);
+  --danger-soft: color-mix(in oklch, var(--danger) 12%, transparent);
+  --danger-subtle: color-mix(in oklch, var(--danger) 8%, transparent);
+
+  /* --- Explorer states --- */
+  --row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
+  --row-active-bg: color-mix(in oklch, var(--accent) 12%, transparent);
+  --sidebar-hover-bg: color-mix(in oklch, var(--accent) 8%, transparent);
+  --sidebar-active-bg: color-mix(in oklch, var(--accent) 16%, transparent);
+  --selection-ring: oklch(0.78 0.16 calc(260deg + var(--warmth)));
 
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
+
+  --detail-panel-width: 30em;
+  --documents-grid-title-size: 0.8rem;
 }
 
 html,
@@ -144,23 +142,79 @@ button.danger:hover:not([disabled]) {
   background: var(--danger-subtle);
 }
 
-button.icon-button {
+.icon-button {
-  padding: 0.25rem 0.55rem;
+  display: inline-flex;
-  min-width: auto;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.25rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
 }
 
-button.icon-button.ghost {
+.icon-button:hover:not([disabled]) {
+  background: var(--sidebar-hover-bg);
+  color: var(--fg);
+}
+
+.icon-button.danger {
+  color: var(--danger);
+}
+
+.icon-button.danger:hover:not([disabled]) {
+  background: var(--danger-subtle);
+}
+
+.icon-button.ghost {
   border: none;
   background: transparent;
   color: var(--muted);
   padding: 0.2rem;
 }
 
-button.icon-button.ghost:hover:not([disabled]) {
+.icon-button.ghost:hover:not([disabled]) {
   color: var(--danger);
   background: transparent;
 }
 
+.panel-actions .icon-button,
+.panel-actions button,
+.panel-actions a.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.25rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+  text-decoration: none;
+}
+
+.panel-actions .icon-button:hover:not([disabled]),
+.panel-actions button:hover:not([disabled]),
+.panel-actions a.icon-button:hover {
+  background: var(--sidebar-hover-bg);
+  color: var(--fg);
+}
+
+.panel-actions .icon-button.ghost,
+.panel-actions button.icon-button.ghost {
+  color: var(--muted);
+  padding: 0.25rem;
+}
+
+.panel-actions .icon-button.ghost:hover:not([disabled]),
+.panel-actions button.icon-button.ghost:hover:not([disabled]) {
+  color: var(--fg);
+  background: var(--sidebar-hover-bg);
+}
+
 .with-icon {
   display: inline-flex;
   align-items: center;
@@ -205,7 +259,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 .view-toggle {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-subtle);
   margin-right: 0.5rem;
@@ -251,151 +304,36 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: var(--bg);
 }
 
-.app-bar {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  padding: 0.6rem 1.5rem 0.4rem;
-  background: var(--app-bar-background);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.app-bar__main {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-}
-
-.app-bar__meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  flex: 0 0 auto;
-}
-
-.app-bar h1 {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-.app-bar__hint {
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-.app-bar__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.app-bar__status {
-  margin: 0 1rem;
-  min-width: 220px;
-}
-
-.app-bar__status .status-banner {
-  margin: 0;
-}
-
-.app-bar__search {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1 1 320px;
-  max-width: 420px;
-  min-width: 240px;
-  margin: 0 auto;
-}
-
-.app-bar__search input[type='search'] {
-  flex: 1;
-  min-width: 180px;
-  padding: 0.4rem 0.6rem;
-  border-radius: 4px;
-  border: 1px solid var(--border);
-  background: var(--surface-subtle);
-  color: var(--fg);
-}
-
-.app-bar__search input[type='search']:focus {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-.app-bar__search-clear {
-  border: none;
-  background: transparent;
-  color: var(--accent);
-  font-weight: 600;
-  font-size: 0.85rem;
-  cursor: pointer;
-  padding: 0.2rem 0.3rem;
-}
-
-.app-bar__search-clear:hover {
-  text-decoration: underline;
-}
-
-.app-bar__right {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-left: auto;
-}
-
-.app-bar__links {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.app-bar__link {
-  border: none;
-  background: transparent;
-  color: var(--muted);
-  font: inherit;
-  padding: 0.3rem 0.65rem;
-  border-radius: 999px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-
-.app-bar__link:hover {
-  background: var(--sidebar-hover-bg);
-  color: var(--fg);
-}
-
-.app-bar__link:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.app-bar__link.active {
-  background: var(--sidebar-active-bg);
-  color: var(--fg);
-  font-weight: 600;
-}
-
-.app-bar__link-count {
-  font-size: 0.75rem;
-  color: var(--muted);
-}
 
 .documents-main {
   flex: 1;
   display: grid;
-  grid-template-columns: 20rem minmax(0, 1fr) 30rem;
+  grid-template-columns: 20rem minmax(0, 1fr);
+  min-height: 100vh;
+  height: 100%;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: row;
   min-height: 0;
-  overflow: hidden;
+  margin: 0;
+  border-radius: 0;
+  background: var(--surface);
+  position: relative;
+}
+
+.documents-main .main-content--documents > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.documents-main .main-content--documents > *:not(.detail-panel) {
+  flex: 1 1 auto;
+}
+
+.documents-main .main-content--documents.main-content--has-detail {
+  padding-right: var(--detail-panel-width);
 }
 
 .panels-main {
@@ -558,7 +496,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 .preview-workspace__object {
   width: 100%;
   height: 100%;
-  border: none;
 }
 
 .tags-panel__body {
@@ -580,7 +517,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 .tags-table td {
   padding: 0.45rem 0.6rem;
   text-align: left;
-  border-bottom: 1px solid var(--divider);
   font-size: 0.85rem;
 }
 
@@ -638,20 +574,21 @@ button.icon-button.ghost:hover:not([disabled]) {
   width: 2.25rem;
   height: 2.25rem;
   padding: 0;
-  border: none;
   background: none;
   cursor: pointer;
 }
 
 .tags-table__edit-controls {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding: 0.25rem;
   gap: 0.4rem;
 }
 
 .tags-table__row-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding: 0.25rem;
   gap: 0.4rem;
 }
 
@@ -659,6 +596,24 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.5rem;
 }
 
+.tags-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.tags-actions__form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.tags-actions__form input[type='text'] {
+  min-width: 14rem;
+}
+
 .correspondents-actions__form {
   display: flex;
   gap: 0.4rem;
@@ -680,7 +635,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   align-items: center;
   gap: 0.35rem;
   background: var(--surface-subtle);
-  border: 1px solid var(--border-subtle);
   border-radius: 999px;
   padding: 0.15rem 0.5rem;
   font-size: 0.9rem;
@@ -729,7 +683,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .preview-workspace__metadata {
-  border: 1px solid var(--border);
   border-radius: 2px;
   padding: 0.75rem;
   background: var(--surface);
@@ -742,25 +695,12 @@ button.icon-button.ghost:hover:not([disabled]) {
   font-size: 0.9rem;
 }
 
-.column {
-  background: transparent;
-  border: none;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.column + .column {
-  padding-left: 1.25rem;
-}
-
 .column-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: 0 0 0.5rem;
-  border-bottom: 1px solid var(--border);
 }
 
 .column-header__titles {
@@ -769,39 +709,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.3rem;
 }
 
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.breadcrumb-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-}
-
-.breadcrumb-item a {
-  text-decoration: none;
-  color: var(--accent);
-}
-
-.breadcrumb-item a:hover,
-.breadcrumb-item a:focus {
-  text-decoration: underline;
-}
-
-.breadcrumb-current {
-  font-weight: 600;
-  color: var(--fg);
-}
-
-.breadcrumb-separator {
-  color: var(--muted);
-}
-
 .column-header h2 {
   margin: 0;
   font-size: 0.9rem;
@@ -854,9 +761,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.25rem;
   flex: 1;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 3rem;
 }
 
 .folder-row:hover {
@@ -940,7 +844,71 @@ button.icon-button.ghost:hover:not([disabled]) {
   overflow-y: auto;
   padding: 1.25rem;
   color: var(--sidebar-fg);
-  border-right: 1px solid var(--border);
+  box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin-bottom: 1rem;
+}
+
+.sidebar__title {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.sidebar__hint {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.sidebar__search {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.6rem;
+}
+
+.sidebar__search input[type='search'] {
+  flex: 1;
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg);
+}
+
+.sidebar__search button {
+  padding: 0.35rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--accent);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.sidebar__search button:hover:not([disabled]) {
+  background: var(--sidebar-hover-bg);
+}
+
+.sidebar__status {
+  margin-top: 0.75rem;
+}
+
+.sidebar__footer {
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+.sidebar__footer button {
+  width: 100%;
 }
 
 .sidebar-section:first-of-type,
@@ -957,21 +925,45 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 0.75rem;
   color: var(--muted);
-  text-transform: uppercase;
+}
-  letter-spacing: 0.04em;
+
+.sidebar-section__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.4rem;
+  width: 100%;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  padding: 0.25rem 0.35rem;
+  margin: -0.25rem -0.35rem;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.sidebar-section__title:hover:not([disabled]),
+.sidebar-section__title:focus-visible {
+  background: var(--sidebar-hover-bg);
+  color: var(--fg);
+}
+
+.sidebar-section__title:hover:not([disabled]) h3,
+.sidebar-section__title:focus-visible h3 {
+  color: var(--fg);
 }
 
 .sidebar-section__header h3 {
   margin: 0;
-  font-size: 0.75rem;
+  font-size: 0.9rem;
   font-weight: 600;
   color: inherit;
 }
 
 .sidebar-item {
-  border: none;
   background: transparent;
   padding: 0.16rem 0.26rem;
   text-align: left;
@@ -1020,7 +1012,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .sidebar-tag-pill {
-  border: 1px solid var(--sidebar-pill-border, rgba(15, 23, 42, 0.08));
   border-radius: 999px;
   padding: 0.25rem 0.6rem;
   font-size: 0.75rem;
@@ -1065,7 +1056,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .sidebar-correspondent-item {
   display: block;
-  width: 100%;
   background: transparent;
   border-radius: 4px;
   padding: 0.35rem 0.5rem;
@@ -1096,12 +1086,17 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel {
   padding: 1.25rem 1.25rem 0 1.25rem;
-  background-color: var(--surface);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .tags-panel,
 .correspondents-panel {
   padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .folder-row.is-drop-target {
@@ -1130,15 +1125,14 @@ button.icon-button.ghost:hover:not([disabled]) {
 .documents-panel .column-toolbar {
   flex-shrink: 0;
   padding-bottom: 0.4rem;
-  border-bottom: 1px solid var(--border);
 }
 
 .documents-panel .documents-scroll {
   overflow-y: auto;
-  border: none;
   background: transparent;
   min-height: 0;
   padding-right: 0.3rem;
+  flex-grow: 1;
 }
 
 .documents-panel table {
@@ -1149,15 +1143,11 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel thead th {
-  border-bottom: 1px solid var(--border);
   background-color: var(--surface);
   position: sticky;
   top: 0;
   z-index: 1;
   padding: 0.45rem 0.6rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
   color: var(--muted);
 }
 
@@ -1266,14 +1256,59 @@ button.icon-button.ghost:hover:not([disabled]) {
   white-space: nowrap;
 }
 
-.documents-panel tbody tr {
+.documents-panel td.doc-list__name {
-  background: transparent;
+  width: 100%;
-  border-bottom: 1px solid var(--border);
-  transition: background 0.15s ease;
 }
 
-.documents-panel tbody tr:last-child {
+.doc-entry {
-  border-bottom: none;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.doc-entry--with-thumb .doc-entry__thumb {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.doc-entry__thumb .document-thumbnail-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.doc-entry__main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.doc-entry__name {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.doc-entry__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
+
+.documents-panel td.actions .action-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.documents-panel tbody tr {
+  background: transparent;
+  transition: background 0.15s ease;
 }
 
 .documents-panel tbody tr:hover {
@@ -1282,7 +1317,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel tbody tr.folder {
   cursor: pointer;
-  font-weight: 600;
 }
 
 .documents-panel tbody tr.folder.focused {
@@ -1476,7 +1510,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: var(--surface-subtle);
   color: var(--fg);
   font-size: 0.74rem;
-  border: 1px solid transparent;
 }
 
 .tag-chip {
@@ -1505,37 +1538,56 @@ button.icon-button.ghost:hover:not([disabled]) {
   border-style: solid;
 }
 
-.detail-panel {
+.panel.detail-panel {
-  position: relative;
+  position: absolute;
-  padding: 1.25rem;
+  top: 0;
-  overflow-y: auto;
+  right: 0;
-  border-left: 1px solid var(--border);
+  width: var(--detail-panel-width);
-}
+  min-height: 100vh;
-
+  height: 100%;
-.detail-panel .column-body {
+  height: 100%;
-  gap: 1rem;
+  background: var(--surface);
-}
+  box-shadow: 0 0 24px var(--shadow-soft);
-
-.detail-panel .column-body.scrollable {
-  overflow: visible;
-}
-
-.detail-actions {
   display: flex;
-  gap: 0.32rem;
+  flex-direction: column;
-  margin: 0.6rem 0;
+  z-index: 20;
 }
 
-.detail-ocr-trigger {
+.panel-header {
-  margin: 0.75rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.25rem;
 }
 
+.panel-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.panel-actions .spacer {
+  flex-grow: 1;
+}
+
+.detail-panel .panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 1.25rem;
+}
+
+
 .detail-ocr__content {
   max-height: 60vh;
   overflow: auto;
   padding: 0.75rem;
   background: var(--surface-soft);
-  border: 1px solid var(--border);
   border-radius: 6px;
   box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
 }
@@ -1553,7 +1605,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   width: 100%;
   min-height: 360px;
   height: 60vh;
-  border: none;
   background: var(--surface-subtle);
   border-radius: 4px;
   box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
@@ -1582,7 +1633,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .preview-pane {
   margin-top: 0.4rem;
-  border: none;
   border-radius: 0;
   background: transparent;
   min-height: 220px;
@@ -1745,7 +1795,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   height: 2.2em;
   padding: 0.45em;
   border-radius: 999px;
-  border: none;
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
   cursor: pointer;
@@ -1930,7 +1979,6 @@ form.inline {
   text-align: center;
   font-size: 0.95rem;
   box-shadow: none;
-  border: 1px solid var(--border);
 }
 .modal-backdrop {
   position: fixed;
@@ -1945,7 +1993,6 @@ form.inline {
 
 .modal {
   background: var(--surface);
-  border: 1px solid var(--border);
   border-radius: 4px;
   box-shadow: 0 18px 42px var(--overlay-shadow);
   width: min(360px, 100%);
@@ -1955,6 +2002,29 @@ form.inline {
   gap: 1rem;
 }
 
+.modal--panel {
+  width: min(80vw, 960px);
+  max-height: 90vh;
+  padding: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  gap: 0;
+}
+
+.panel-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-modal__body {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
 .modal h3 {
   margin: 0;
   font-size: 1.15rem;
@@ -1980,7 +2050,8 @@ form.inline {
 
 .modal__actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding: 0.25rem;
   gap: 0.6rem;
 }
 
@@ -2004,6 +2075,7 @@ form.inline {
 }
 .login-screen {
   min-height: 100vh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2014,7 +2086,6 @@ form.inline {
 .login-card {
   width: min(340px, 100%);
   background: var(--surface);
-  border: 1px solid var(--border);
   border-radius: 2px;
   padding: 1.75rem;
   box-shadow: none;
@@ -2133,24 +2204,12 @@ form.inline {
   white-space: nowrap;
 }
 
-.doc-list__icon-button {
-  opacity: 0;
-  pointer-events: none;
-  padding: 0.14rem;
-  margin: 0;
-  transition: opacity 0.12s ease;
-}
-
-.doc-list__name-content:hover .doc-list__icon-button, .doc-list__name-content:focus-within .doc-list__icon-button {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.doc-list__icon {
-  width: 0.9rem;
-  height: 0.9rem;
-}
 .preview-pane__nav-button svg {
   width: 100%;
   height: 100%;
 }
+
+.panel-header .icon-button svg {
+  width: 1.41rem;
+  height: 1.41rem;
+}

frontend/src/tags/TagsPanel.jsx

@@ -1,12 +1,22 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { getTagColorStyle, HEX_COLOR_PATTERN } from '../utils/colors';
 
-function TagsPanel({ tags, onRefresh, onUpdateTag, onDeleteTag, onNotify }) {
+function TagsPanel({
+  tags,
+  onRefresh,
+  onCreateTag,
+  onUpdateTag,
+  onDeleteTag,
+  onNotify,
+}) {
   const [editingId, setEditingId] = useState(null);
   const [draftLabel, setDraftLabel] = useState('');
   const [draftColor, setDraftColor] = useState('');
   const [saving, setSaving] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
+  const [createLabel, setCreateLabel] = useState('');
+  const [createColor, setCreateColor] = useState('');
+  const [creating, setCreating] = useState(false);
 
   const startEdit = useCallback((tag) => {
     setEditingId(tag.id);
@@ -98,19 +108,87 @@ function TagsPanel({ tags, onRefresh, onUpdateTag, onDeleteTag, onNotify }) {
     [onDeleteTag, editingId, cancelEdit, onNotify],
   );
 
+  const handleCreate = useCallback(
+    async (event) => {
+      event.preventDefault();
+      if (typeof onCreateTag !== 'function') {
+        return;
+      }
+
+      const trimmedLabel = createLabel.trim();
+      if (!trimmedLabel) {
+        onNotify?.('Tag label cannot be empty.', 'error');
+        return;
+      }
+
+      const trimmedColor = createColor.trim();
+      const colorPattern = /^#([0-9a-fA-F]{6})$/;
+      if (trimmedColor && !colorPattern.test(trimmedColor)) {
+        onNotify?.('Colors must use the #RRGGBB format.', 'error');
+        return;
+      }
+
+      setCreating(true);
+      try {
+        await onCreateTag({
+          label: trimmedLabel,
+          color: trimmedColor ? trimmedColor : null,
+        });
+        setCreateLabel('');
+        setCreateColor('');
+      } catch (createError) {
+        const message = createError?.message || 'Failed to create tag.';
+        onNotify?.(message, 'error');
+      } finally {
+        setCreating(false);
+      }
+    },
+    [createLabel, createColor, onCreateTag, onNotify],
+  );
+
   return (
-    <section className="tags-panel column">
+    <section className="tags-panel">
       <div className="column-header">
         <div className="column-header__titles">
           <h2>Tags</h2>
           <div className="column-subtitle">{tags.length} total</div>
         </div>
-        <div className="header-actions">
+        <div className="header-actions tags-actions">
+          <form className="tags-actions__form" onSubmit={handleCreate}>
+            <input
+              type="text"
+              placeholder="New tag label"
+              value={createLabel}
+              onChange={(event) => setCreateLabel(event.target.value)}
+              disabled={creating}
+            />
+            <input
+              type="color"
+              className="tags-table__color-picker"
+              value={createColor || '#3366ff'}
+              onChange={(event) => setCreateColor(event.target.value)}
+              disabled={creating}
+              aria-label="Tag color (optional)"
+            />
+            {createColor && (
+              <button
+                type="button"
+                className="secondary"
+                onClick={() => setCreateColor('')}
+                disabled={creating}
+              >
+                Clear
+              </button>
+            )}
+            <button type="submit" disabled={creating || !createLabel.trim()}>
+              {creating ? 'Creating…' : 'Create'}
+            </button>
+          </form>
           <button
             className="secondary"
             type="button"
             onClick={onRefresh}
-            disabled={saving || Boolean(deletingId)}
+            disabled={saving || creating || Boolean(deletingId)}
           >
             Refresh
           </button>

frontend/src/ui/icons.js

@@ -9,6 +9,10 @@ import {
   IconLayoutGrid,
   IconArrowLeft,
   IconArrowRight,
+  IconChevronsRight,
+  IconAnalyze,
+  IconWindowMaximize,
+  IconTextScan2,
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 
@@ -120,6 +124,33 @@ export const ArrowRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest
   />
 );
 
+export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconChevronsRight
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const AnalyzeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconAnalyze
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const WindowMaximizeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconWindowMaximize
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
 export default {
   ChevronIcon,
   TrashIcon,
@@ -130,4 +161,16 @@ export default {
   DownloadIcon,
   ViewListIcon,
   ViewGridIcon,
+  ChevronsRightIcon,
+  AnalyzeIcon,
+  WindowMaximizeIcon,
 };
+
+export const TextScanIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconTextScan2
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);