From e33ab71fac0fde1c31b6b2adc5d898e0c3f3bddf Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Fri, 24 Oct 2025 14:07:09 +0200
Subject: [PATCH 01/17] move to sidebar

---
 frontend/src/index.jsx           | 284 ++++++++++++++------------
 frontend/src/sidebar/Sidebar.jsx |  88 +++++++-
 frontend/src/styles.css          | 337 ++++++++++++++-----------------
 frontend/src/tags/TagsPanel.jsx  |  84 +++++++-
 4 files changed, 473 insertions(+), 320 deletions(-)

diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 8f878da..9f407b1 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -345,6 +345,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);
@@ -423,13 +425,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 +453,10 @@ const AppLayout = () => {
     setSearchLoading(false);
   }, []);
 
+  const handleSearchChange = useCallback((value) => {
+    setSearchQuery(value);
+  }, []);
+
   const handleSearchSubmit = useCallback(() => {
     if (!navigate) return;
     const targetFolder = selectedFolder && selectedFolder !== 'root' ? selectedFolder : 'root';
@@ -3682,6 +3684,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 +3762,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 +4487,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(
@@ -4585,7 +4640,6 @@ const AppLayout = () => {
       tags,
       refreshTags,
       handleTagUpdate,
-      handleTagCreate,
       handleTagDelete,
       handleDocumentTagAttach,
       correspondents,
@@ -4610,6 +4664,8 @@ const AppLayout = () => {
       ensurePreviewData,
       notifyApiError,
       resolveApiPath,
+      openTagsModal,
+      openCorrespondentsModal,
     }),
     [
       token,
@@ -4622,7 +4678,6 @@ const AppLayout = () => {
       tags,
       refreshTags,
       handleTagUpdate,
-      handleTagCreate,
       handleTagDelete,
       handleDocumentTagAttach,
       correspondents,
@@ -4647,6 +4702,8 @@ const AppLayout = () => {
       ensurePreviewData,
       notifyApiError,
       resolveApiPath,
+      openTagsModal,
+      openCorrespondentsModal,
     ],
   );
 
@@ -4667,81 +4724,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 +4773,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 +4853,35 @@ 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}>
-        <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+      <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
+        <div className="main-content">
+          <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+        </div>
       </DocumentsLayout>
     );
   }
 
   return (
-    <DocumentsLayout sidebarProps={sidebarProps}>
-      <DocumentsTable {...documentsTableProps} />
-      <DetailPanel {...detailPanelProps} />
+    <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
+      <div className="main-content main-content--documents">
+        <DocumentsTable {...documentsTableProps} />
+        <DetailPanel {...detailPanelProps} />
+      </div>
     </DocumentsLayout>
   );
 };
@@ -4951,51 +5016,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 +5024,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>
diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index 690b191..a5c408a 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/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">
+      <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>
-          <span className="meta">{tags.length}</span>
+          <button
+            type="button"
+            className="sidebar-section__title"
+            onClick={handleManageTags}
+          >
+            <h3>Tags</h3>
+            <span className="meta">{tags.length}</span>
+          </button>
         </div>
         <div
           className={`sidebar-tag-cloud${
@@ -257,8 +326,14 @@ const Sidebar = ({
       </div>
       <div className="sidebar-section">
         <div className="sidebar-section__header">
-          <h3>Correspondents</h3>
-          <span className="meta">{correspondents.length}</span>
+          <button
+            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 ? (
@@ -293,6 +368,11 @@ const Sidebar = ({
           )}
         </ul>
       </div>
+      <div className="sidebar__footer">
+        <button className="secondary" type="button" onClick={handleLogoutClick}>
+          Log out
+        </button>
+      </div>
     </aside>
   );
 };
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9492ae5..52ca293 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -4,7 +4,7 @@
   --bg: #f6f6f6;
   --surface: #fbfbfb;
   --surface-subtle: #f3f3f3;
-  --fg: #1e2127;
+  --fg: #2b2b2b;
   --muted: #646a75;
   --sidebar-fg: #5f6672;
   --border: #dde1e6;
@@ -14,11 +14,9 @@
   --overlay-backdrop: rgba(30, 33, 39, 0.45);
   --overlay-shadow: rgba(30, 33, 39, 0.18);
 
-  --app-bar-background: var(--surface-subtle);
-
   /* Accent (primary action, selection, focus) */
   --accent: #3f6ad8;
-  --accent-hover: #365cb9;
+  --accent-hover: #9bb6ff;
   --on-accent: #ffffff;
 
   /* Soft tints & outlines (for chips, row hovers, subtle fills) */
@@ -205,7 +203,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 +248,32 @@ 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: 0;
+}
+
+.main-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  margin: 0;
+  border-radius: 0;
+  background: var(--surface);
+}
+
+.documents-main .main-content--documents {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 30rem;
+  min-height: 0;
+}
+
+.documents-main .main-content--documents > * {
+  min-width: 0;
   min-height: 0;
-  overflow: hidden;
 }
 
 .panels-main {
@@ -558,7 +436,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 .preview-workspace__object {
   width: 100%;
   height: 100%;
-  border: none;
 }
 
 .tags-panel__body {
@@ -580,7 +457,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,7 +514,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   width: 2.25rem;
   height: 2.25rem;
   padding: 0;
-  border: none;
   background: none;
   cursor: pointer;
 }
@@ -659,6 +534,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 +573,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 +621,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);
@@ -744,7 +635,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .column {
   background: transparent;
-  border: none;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -760,7 +650,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   justify-content: space-between;
   gap: 0.5rem;
   padding: 0 0 0.5rem;
-  border-bottom: 1px solid var(--border);
 }
 
 .column-header__titles {
@@ -940,7 +829,69 @@ 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);
+}
+
+.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 +908,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 +995,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;
@@ -1096,7 +1070,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel {
   padding: 1.25rem 1.25rem 0 1.25rem;
-  background-color: var(--surface);
 }
 
 .tags-panel,
@@ -1130,12 +1103,10 @@ 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;
@@ -1149,15 +1120,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);
 }
 
@@ -1268,14 +1235,9 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel tbody tr {
   background: transparent;
-  border-bottom: 1px solid var(--border);
   transition: background 0.15s ease;
 }
 
-.documents-panel tbody tr:last-child {
-  border-bottom: none;
-}
-
 .documents-panel tbody tr:hover {
   background: var(--surface-subtle);
 }
@@ -1476,7 +1438,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 {
@@ -1509,7 +1470,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   position: relative;
   padding: 1.25rem;
   overflow-y: auto;
-  border-left: 1px solid var(--border);
+  box-shadow: 0 0 24px var(--shadow-faint);
 }
 
 .detail-panel .column-body {
@@ -1535,7 +1496,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   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 +1513,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 +1541,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 +1703,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 +1887,6 @@ form.inline {
   text-align: center;
   font-size: 0.95rem;
   box-shadow: none;
-  border: 1px solid var(--border);
 }
 .modal-backdrop {
   position: fixed;
@@ -1945,7 +1901,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 +1910,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;
@@ -2014,7 +1992,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;
diff --git a/frontend/src/tags/TagsPanel.jsx b/frontend/src/tags/TagsPanel.jsx
index 0c2c70e..fd9d9e0 100644
--- a/frontend/src/tags/TagsPanel.jsx
+++ b/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,6 +108,44 @@ 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">
       <div className="column-header">
@@ -105,12 +153,42 @@ function TagsPanel({ tags, onRefresh, onUpdateTag, onDeleteTag, onNotify }) {
           <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>

From dc633783e02c7bc4f98bb17fe9310805df9e7e83 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Fri, 24 Oct 2025 15:13:37 +0200
Subject: [PATCH 02/17] frontend

---
 frontend/package-lock.json                    |  10 +
 frontend/package.json                         |   5 +-
 .../correspondents/CorrespondentsPanel.jsx    |   2 +-
 frontend/src/detail/DetailPanel.jsx           |   2 +-
 frontend/src/documents/DocumentsTable.jsx     | 126 +++++-----
 frontend/src/index.jsx                        |  21 +-
 frontend/src/sidebar/Sidebar.jsx              | 130 +++++------
 frontend/src/skeuomorphic_ws.css              |   2 -
 frontend/src/styles.css                       | 220 +++++++++++-------
 frontend/src/tags/TagsPanel.jsx               |   2 +-
 10 files changed, 283 insertions(+), 237 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index aeb6da3..5e35cb5 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 5de499f..a3f0da4 100644
--- a/frontend/package.json
+++ b/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",
-    "@svgr/webpack": "8.1.0"
+    "webpack-dev-server": "5.1.0"
   }
 }
diff --git a/frontend/src/correspondents/CorrespondentsPanel.jsx b/frontend/src/correspondents/CorrespondentsPanel.jsx
index 25f156a..46ba941 100644
--- a/frontend/src/correspondents/CorrespondentsPanel.jsx
+++ b/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>
diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index c6c5589..7b5c7ca 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1086,7 +1086,7 @@ const DetailPanel = ({
   };
 
   return (
-    <aside className="detail-panel column">
+    <aside className="detail-panel">
       <div className="column-body scrollable">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index c2cc35b..69059c3 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/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;
@@ -376,13 +366,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 +618,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 +642,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 +698,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 +766,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>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 9f407b1..95a2ea4 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,3 +1,5 @@
+import '@fontsource/inter/400.css';
+
 import React, {
   useCallback,
   useContext,
@@ -368,15 +370,11 @@ const AppLayout = () => {
     const stored = window.localStorage.getItem('papercrate_view_mode');
     return stored === 'grid' ? 'grid' : 'list';
   });
-  const initialRowSelection = routeDocumentId
-    ? [resolveDocumentRowKey(routeDocumentId)]
-    : [];
+  const initialRowSelection = [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
   const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
-  const [focusedDocumentId, setFocusedDocumentId] = useState(routeDocumentId);
-  const [focusedRowKey, setFocusedRowKey] = useState(() =>
-    routeDocumentId ? resolveDocumentRowKey(routeDocumentId) : null,
-  );
+  const [focusedDocumentId, setFocusedDocumentId] = useState(null);
+  const [focusedRowKey, setFocusedRowKey] = useState(null);
   const tokenRef = useRef(token);
   const refreshPromiseRef = useRef(null);
   const breadcrumbFetchRef = useRef(new Set());
@@ -816,14 +814,7 @@ const AppLayout = () => {
         if (selectionInitializedRef.current) {
           nextDocKeys = previousDocKeys.filter((key) => availableDocKeySet.has(key));
         } else {
-          const filtered = previousDocKeys.filter((key) => availableDocKeySet.has(key));
-          if (filtered.length) {
-            nextDocKeys = filtered;
-          } else if (availableDocKeys.length) {
-            nextDocKeys = [availableDocKeys[0]];
-          } else {
-            nextDocKeys = [];
-          }
+          nextDocKeys = previousDocKeys.filter((key) => availableDocKeySet.has(key));
         }
 
         mergedSelection = [...previousFolderKeys, ...nextDocKeys];
diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index a5c408a..e5bc356 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/frontend/src/sidebar/Sidebar.jsx
@@ -233,7 +233,7 @@ const Sidebar = ({
     : '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>
@@ -284,44 +284,40 @@ const Sidebar = ({
           }`}
           role="list"
         >
-          {tags.length ? (
-            tags.map((tag) => {
-              const isActive = activeTagSet.has(tag.id);
-              const style = getTagColorStyle(tag.color);
-              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
-              return (
-                <button
-                  key={tag.id}
-                  type="button"
-                  role="listitem"
-                  className={className}
-                  style={style || undefined}
-                  onClick={() => handleToggleTag(tag.id)}
-                  aria-pressed={isActive}
-                  draggable
-                  onDragStart={(event) => {
-                    try {
-                      const payload = JSON.stringify({
-                        id: tag.id,
-                        label: tag.label,
-                        color: tag.color || null,
-                      });
-                      event.dataTransfer.effectAllowed = 'copy';
-                      event.dataTransfer.setData('application/x-papercrate-tag', payload);
-                      event.dataTransfer.setData('text/papercrate-tag', payload);
-                    } catch (
-                      // eslint-disable-next-line no-empty
-                      error
-                    ) {}
-                  }}
-                >
-                  {tag.label}
-                </button>
-              );
-            })
-          ) : (
-            <span className="meta">No tags yet</span>
-          )}
+          {tags.map((tag) => {
+            const isActive = activeTagSet.has(tag.id);
+            const style = getTagColorStyle(tag.color);
+            const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+            return (
+              <button
+                key={tag.id}
+                type="button"
+                role="listitem"
+                className={className}
+                style={style || undefined}
+                onClick={() => handleToggleTag(tag.id)}
+                aria-pressed={isActive}
+                draggable
+                onDragStart={(event) => {
+                  try {
+                    const payload = JSON.stringify({
+                      id: tag.id,
+                      label: tag.label,
+                      color: tag.color || null,
+                    });
+                    event.dataTransfer.effectAllowed = 'copy';
+                    event.dataTransfer.setData('application/x-papercrate-tag', payload);
+                    event.dataTransfer.setData('text/papercrate-tag', payload);
+                  } catch (
+                    // eslint-disable-next-line no-empty
+                    error
+                  ) {}
+                }}
+              >
+                {tag.label}
+              </button>
+            );
+          })}
         </div>
       </div>
       <div className="sidebar-section">
@@ -336,36 +332,32 @@ const Sidebar = ({
           </button>
         </div>
         <ul className="sidebar-correspondent-list">
-          {sortedCorrespondents.length ? (
-            sortedCorrespondents.map((correspondent) => {
-              const isActive = activeCorrespondentSet.has(correspondent.id);
-              const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
-              const label = correspondent.name || 'Unnamed';
-              const handleSelect = () => {
-                const nextId = isActive ? null : correspondent.id;
-                onToggleCorrespondentFilter?.(nextId);
-              };
-              return (
-                <li key={correspondent.id}>
-                  <span
-                    className={className}
-                    role="button"
-                    onClick={handleSelect}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        handleSelect();
-                      }
-                    }}
-                  >
-                    {label}
-                  </span>
-                </li>
-              );
-            })
-          ) : (
-            <li className="meta">No correspondents yet</li>
-          )}
+          {sortedCorrespondents.map((correspondent) => {
+            const isActive = activeCorrespondentSet.has(correspondent.id);
+            const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
+            const label = correspondent.name || 'Unnamed';
+            const handleSelect = () => {
+              const nextId = isActive ? null : correspondent.id;
+              onToggleCorrespondentFilter?.(nextId);
+            };
+            return (
+              <li key={correspondent.id}>
+                <span
+                  className={className}
+                  role="button"
+                  onClick={handleSelect}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      handleSelect();
+                    }
+                  }}
+                >
+                  {label}
+                </span>
+              </li>
+            );
+          })}
         </ul>
       </div>
       <div className="sidebar__footer">
diff --git a/frontend/src/skeuomorphic_ws.css b/frontend/src/skeuomorphic_ws.css
index 33e6912..00ec775 100644
--- a/frontend/src/skeuomorphic_ws.css
+++ b/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 {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 52ca293..e0ff320 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,59 +1,56 @@
 :root {
   color-scheme: light;
-  /* Neutrals */
-  --bg: #f6f6f6;
-  --surface: #fbfbfb;
-  --surface-subtle: #f3f3f3;
-  --fg: #2b2b2b;
-  --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);
 
-  /* Accent (primary action, selection, focus) */
-  --accent: #3f6ad8;
-  --accent-hover: #9bb6ff;
-  --on-accent: #ffffff;
+  /* master warmth bias: positive = warmer, negative = cooler */
+  --warmth: 3deg; /* try +5deg for warmer, -5deg for cooler */
 
-  /* Soft tints & outlines (for chips, row hovers, subtle fills) */
-  --accent-soft: rgba(63, 106, 216, 0.12);
-  --accent-elevated: rgba(63, 106, 216, 0.16);
-  --accent-elevated-strong: rgba(63, 106, 216, 0.22);
-  --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);
+  /* --- Neutrals --- */
+  --bg: oklch(0.97 0.001 calc(100deg + var(--warmth)));
+  --surface: oklch(0.985 0.001 calc(100deg + var(--warmth)));
+  --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)));
 
-  /* States specific to explorer UX */
-  --row-hover-bg: rgba(63, 106, 216, 0.06);
-  --row-active-bg: rgba(63, 106, 216, 0.12);
-  --sidebar-hover-bg: rgba(63, 106, 216, 0.08);
-  --sidebar-active-bg: rgba(63, 106, 216, 0.16);
-  --selection-ring: #9bb6ff;
-  --documents-grid-title-size: 12px;
-  --documents-grid-icon-size: 128px;
+  /* --- Accent (primary) --- */
+  --accent: oklch(0.61 0.20 calc(260deg + var(--warmth)));
+  --accent-hover: oklch(0.70 0.18 calc(260deg + var(--warmth)));
+  --on-accent: oklch(1 0 0);
 
-  /* Semantic colors */
-  --success: #2e7d6b;
-  --success-subtle: rgba(46, 125, 107, 0.12);
-  --warning: #b98a2e;
-  --warning-subtle: rgba(185, 138, 46, 0.12);
-  --danger: #cc5a52;
-  --danger-border: rgba(204, 90, 82, 0.45);
-  --danger-soft: rgba(204, 90, 82, 0.12);
-  --danger-subtle: rgba(204, 90, 82, 0.08);
+  /* --- Derived accent states --- */
+  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
+  --accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
+  --accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
+  --accent-outline: color-mix(in oklch, var(--accent) 45%, transparent);
+  --accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
+  --accent-focus: color-mix(in oklch, var(--accent) 85%, transparent);
+  --surface-overlay: color-mix(in oklch, white 82%, transparent);
 
-  /* File-type accents (used for icons/labels) */
-  --file-folder: #e6a23c;   /* folders */
-  --file-doc: #3f6ad8;      /* docs */
-  --file-code: #5b9b5f;     /* code */
-  --file-image: #9a6bd1;    /* images */
-  --file-audio: #db6f9a;    /* audio */
-  --file-archive: #9c7a59;  /* zips */
+  /* --- Shadows & overlays --- */
+  --shadow-faint: color-mix(in oklch, black 6%, transparent);
+  --shadow-soft: color-mix(in oklch, black 12%, transparent);
+  --shadow-medium: color-mix(in oklch, black 18%, transparent);
+  --overlay-backdrop: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 45%, transparent);
+  --overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 18%, transparent);
+
+  /* --- Semantic colors (relative warmth) --- */
+  --success: oklch(0.62 0.18 calc(190deg + var(--warmth)));
+  --warning: oklch(0.72 0.17 calc(95deg + var(--warmth)));
+  --danger: oklch(0.60 0.18 calc(35deg + var(--warmth)));
+
+  --success-subtle: color-mix(in oklch, var(--success) 12%, transparent);
+  --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;
@@ -142,19 +139,40 @@ button.danger:hover:not([disabled]) {
   background: var(--danger-subtle);
 }
 
-button.icon-button {
-  padding: 0.25rem 0.55rem;
-  min-width: auto;
+.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;
 }
 
-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;
 }
@@ -633,17 +651,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   font-size: 0.9rem;
 }
 
-.column {
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.column + .column {
-  padding-left: 1.25rem;
-}
-
 .column-header {
   display: flex;
   align-items: center;
@@ -743,9 +750,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 {
@@ -830,6 +834,8 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 1.25rem;
   color: var(--sidebar-fg);
   box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar__meta {
@@ -1070,11 +1076,17 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel {
   padding: 1.25rem 1.25rem 0 1.25rem;
+  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 {
@@ -1110,6 +1122,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   background: transparent;
   min-height: 0;
   padding-right: 0.3rem;
+  flex-grow: 1;
 }
 
 .documents-panel table {
@@ -1233,6 +1246,56 @@ button.icon-button.ghost:hover:not([disabled]) {
   white-space: nowrap;
 }
 
+.documents-panel td.doc-list__name {
+  width: 100%;
+}
+
+.doc-entry {
+  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;
@@ -1244,7 +1307,6 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-panel tbody tr.folder {
   cursor: pointer;
-  font-weight: 600;
 }
 
 .documents-panel tbody tr.folder.focused {
@@ -1471,6 +1533,9 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 1.25rem;
   overflow-y: auto;
   box-shadow: 0 0 24px var(--shadow-faint);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .detail-panel .column-body {
@@ -2110,23 +2175,6 @@ 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%;
diff --git a/frontend/src/tags/TagsPanel.jsx b/frontend/src/tags/TagsPanel.jsx
index fd9d9e0..0865ab0 100644
--- a/frontend/src/tags/TagsPanel.jsx
+++ b/frontend/src/tags/TagsPanel.jsx
@@ -147,7 +147,7 @@ function TagsPanel({
   );
 
   return (
-    <section className="tags-panel column">
+    <section className="tags-panel">
       <div className="column-header">
         <div className="column-header__titles">
           <h2>Tags</h2>

From c53213a357746a587e78903a45dffcc1a007d034 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sat, 25 Oct 2025 23:49:51 +0200
Subject: [PATCH 03/17] cleanup

---
 frontend/src/documents/DocumentsTable.jsx | 24 +----------------
 frontend/src/skeuomorphic_ws.jsx          | 18 -------------
 frontend/src/styles.css                   | 33 -----------------------
 3 files changed, 1 insertion(+), 74 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 69059c3..26993b0 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -276,29 +276,7 @@ const DocumentsTable = ({
     >
       <div className="column-header">
         <div className="column-header__titles">
-          <nav className="breadcrumb" aria-label="Folder breadcrumbs">
-            {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>
+          <h2>{currentFolderName}</h2>
           {showingSearchResults && (
             <div className="column-subtitle">Search results</div>
           )}
diff --git a/frontend/src/skeuomorphic_ws.jsx b/frontend/src/skeuomorphic_ws.jsx
index cdc1d95..1926b6b 100644
--- a/frontend/src/skeuomorphic_ws.jsx
+++ b/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">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e0ff320..9f3199f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -665,39 +665,6 @@ button.danger: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;

From 2a0c96bb4c209ce1bcbb47f3de174edce12cda83 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 00:28:40 +0200
Subject: [PATCH 04/17] detail panel

---
 frontend/src/detail/DetailPanel.jsx | 25 +++++++--
 frontend/src/index.jsx              |  9 +++-
 frontend/src/styles.css             | 80 +++++++++++++++++++++--------
 frontend/src/ui/icons.js            | 11 ++++
 4 files changed, 98 insertions(+), 27 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 7b5c7ca..d83bc3f 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1,6 +1,12 @@
 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,
+} from '../ui/icons';
 import { getTagColorStyle } from '../utils/colors';
 import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
@@ -297,6 +303,7 @@ const DetailPanel = ({
   onCorrespondentAdd,
   onCorrespondentRemove,
   resolveApiPath,
+  onClose = () => {},
 }) => {
   const selectedCount = selectedDocuments.length;
   const singleDoc = selectedCount === 1 ? selectedDocuments[0] : null;
@@ -1086,8 +1093,20 @@ const DetailPanel = ({
   };
 
   return (
-    <aside className="detail-panel">
-      <div className="column-body scrollable">
+    <aside className="detail-panel panel">
+      <div className="panel-header">
+        <div className="panel-actions">
+          <button
+            type="button"
+            className="icon-button ghost"
+            onClick={onClose}
+            aria-label="Close detail panel"
+          >
+            <ChevronsRightIcon />
+          </button>
+        </div>
+      </div>
+      <div className="panel-body">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
     </aside>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 95a2ea4..bbe7ac2 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -4584,6 +4584,7 @@ const AppLayout = () => {
     onCorrespondentAdd: handleCorrespondentAdd,
     onCorrespondentRemove: handleCorrespondentRemove,
     resolveApiPath,
+    onClose: clearDocumentSelection,
   };
 
   const skeuoWorkspaceProps = useMemo(
@@ -4867,11 +4868,15 @@ const DocumentsRoute = () => {
     );
   }
 
+  const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
+
   return (
     <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-      <div className="main-content main-content--documents">
+      <div
+        className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}
+      >
         <DocumentsTable {...documentsTableProps} />
-        <DetailPanel {...detailPanelProps} />
+        {detailHasContent ? <DetailPanel {...detailPanelProps} /> : null}
       </div>
     </DocumentsLayout>
   );
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9f3199f..a4ab13c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -44,6 +44,7 @@
   --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);
+  --detail-panel-width: 30em;
 
   /* --- Explorer states --- */
   --row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
@@ -271,22 +272,18 @@ button.danger:hover:not([disabled]) {
   flex: 1;
   display: grid;
   grid-template-columns: 20rem minmax(0, 1fr);
-  min-height: 0;
+  min-height: 100vh;
+  height: 100%;
 }
 
 .main-content {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   min-height: 0;
   margin: 0;
   border-radius: 0;
   background: var(--surface);
-}
-
-.documents-main .main-content--documents {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 30rem;
-  min-height: 0;
+  position: relative;
 }
 
 .documents-main .main-content--documents > * {
@@ -294,6 +291,14 @@ button.danger:hover:not([disabled]) {
   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 {
   flex: 1;
   display: flex;
@@ -538,13 +543,15 @@ button.danger:hover:not([disabled]) {
 
 .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;
 }
 
@@ -1495,22 +1502,44 @@ button.danger:hover:not([disabled]) {
   border-style: solid;
 }
 
-.detail-panel {
-  position: relative;
-  padding: 1.25rem;
-  overflow-y: auto;
-  box-shadow: 0 0 24px var(--shadow-faint);
+.panel.detail-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--detail-panel-width);
+  min-height: 100vh;
+  height: 100%;
+  height: 100%;
+  background: var(--surface);
+  box-shadow: 0 0 24px var(--shadow-soft);
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  z-index: 20;
 }
 
-.detail-panel .column-body {
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0.25rem;
+  gap: 0.5rem;
+  padding: 0.25rem;
+}
+
+.panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.detail-panel .panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
-}
-
-.detail-panel .column-body.scrollable {
-  overflow: visible;
+  overflow-y: auto;
+  min-height: 0;
+  padding: 1.25rem;
 }
 
 .detail-actions {
@@ -1990,7 +2019,8 @@ form.inline {
 
 .modal__actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
+  padding: 0.25rem;
   gap: 0.6rem;
 }
 
@@ -2014,6 +2044,7 @@ form.inline {
 }
 .login-screen {
   min-height: 100vh;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2146,3 +2177,8 @@ form.inline {
   width: 100%;
   height: 100%;
 }
+
+.panel-header .icon-button svg {
+  width: 1.41rem;
+  height: 1.41rem;
+}
diff --git a/frontend/src/ui/icons.js b/frontend/src/ui/icons.js
index c4c4204..fbbd4b5 100644
--- a/frontend/src/ui/icons.js
+++ b/frontend/src/ui/icons.js
@@ -9,6 +9,7 @@ import {
   IconLayoutGrid,
   IconArrowLeft,
   IconArrowRight,
+  IconChevronsRight,
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 
@@ -120,6 +121,15 @@ 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 default {
   ChevronIcon,
   TrashIcon,
@@ -130,4 +140,5 @@ export default {
   DownloadIcon,
   ViewListIcon,
   ViewGridIcon,
+  ChevronsRightIcon,
 };

From 0864b39336a56fe5f7caaeb4313d107456017d87 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 01:01:42 +0200
Subject: [PATCH 05/17] panel actions

---
 frontend/src/detail/DetailPanel.jsx | 135 ++++++++++++++++++----------
 frontend/src/styles.css             |  55 +++++++++---
 frontend/src/ui/icons.js            |  32 +++++++
 3 files changed, 162 insertions(+), 60 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index d83bc3f..2eae843 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -6,6 +6,9 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
   ChevronsRightIcon,
+  AnalyzeIcon,
+  WindowMaximizeIcon,
+  TextScanIcon,
 } from '../ui/icons';
 import { getTagColorStyle } from '../utils/colors';
 import { formatFileSize } from '../utils/format';
@@ -308,6 +311,15 @@ const DetailPanel = ({
   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);
@@ -712,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) : '—';
@@ -864,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) => ({
@@ -1081,17 +1052,13 @@ 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 panel">
       <div className="panel-header">
@@ -1101,9 +1068,81 @@ const DetailPanel = ({
             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">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a4ab13c..acacaed 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -44,7 +44,6 @@
   --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);
-  --detail-panel-width: 30em;
 
   /* --- Explorer states --- */
   --row-hover-bg: color-mix(in oklch, var(--accent) 6%, transparent);
@@ -55,6 +54,9 @@
 
   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,
@@ -178,6 +180,41 @@ button.danger:hover:not([disabled]) {
   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;
@@ -1019,7 +1056,6 @@ button.danger:hover:not([disabled]) {
 
 .sidebar-correspondent-item {
   display: block;
-  width: 100%;
   background: transparent;
   border-radius: 4px;
   padding: 0.35rem 0.5rem;
@@ -1528,8 +1564,12 @@ button.danger:hover:not([disabled]) {
 
 .panel-actions {
   display: flex;
-  align-items: center;
   gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.panel-actions .spacer {
+  flex-grow: 1;
 }
 
 .detail-panel .panel-body {
@@ -1542,15 +1582,6 @@ button.danger:hover:not([disabled]) {
   padding: 1.25rem;
 }
 
-.detail-actions {
-  display: flex;
-  gap: 0.32rem;
-  margin: 0.6rem 0;
-}
-
-.detail-ocr-trigger {
-  margin: 0.75rem 0;
-}
 
 .detail-ocr__content {
   max-height: 60vh;
diff --git a/frontend/src/ui/icons.js b/frontend/src/ui/icons.js
index fbbd4b5..7cc457c 100644
--- a/frontend/src/ui/icons.js
+++ b/frontend/src/ui/icons.js
@@ -10,6 +10,9 @@ import {
   IconArrowLeft,
   IconArrowRight,
   IconChevronsRight,
+  IconAnalyze,
+  IconWindowMaximize,
+  IconTextScan2,
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 
@@ -130,6 +133,24 @@ export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...re
   />
 );
 
+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,
@@ -141,4 +162,15 @@ export default {
   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}
+  />
+);

From dcbd46531e3a8e4ceb5d40ae2d3a55779e4e8760 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 01:45:37 +0200
Subject: [PATCH 06/17] preview zoom

---
 frontend/src/detail/DetailPanel.jsx | 246 ++++++++++++++++++++++++++--
 frontend/src/styles.css             |  86 ++++++++++
 2 files changed, 318 insertions(+), 14 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 2eae843..f0fb139 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -217,6 +217,7 @@ const PreviewStack = ({
   emptyMessage = 'Preview unavailable',
   onItemActivate,
   onOpenPreview,
+  onZoomPreview,
   activeItemId = null,
 }) => {
   if (!items.length) {
@@ -249,7 +250,11 @@ const PreviewStack = ({
               zIndex: preparedItems.length - index,
               transform,
             }}
-            aria-hidden={hasMultiple && !onItemActivate && !onOpenPreview ? 'true' : undefined}
+            aria-hidden={
+              hasMultiple && !onItemActivate && !onOpenPreview && !onZoomPreview
+                ? 'true'
+                : undefined
+            }
           >
             <img
               src={entry.url}
@@ -257,19 +262,31 @@ const PreviewStack = ({
               className="preview-stack__image"
               onClick={(event) => {
                 event.stopPropagation();
-                if (isFront && onOpenPreview) {
-                  onOpenPreview(entry.id);
+                if (isFront) {
+                  if (onZoomPreview) {
+                    onZoomPreview(entry);
+                  } else if (onOpenPreview) {
+                    onOpenPreview(entry.id);
+                  } else if (onItemActivate) {
+                    onItemActivate(entry.id);
+                  }
                 } else if (onItemActivate) {
                   onItemActivate(entry.id);
                 }
               }}
               onKeyDown={(event) => {
-                if (!onItemActivate && !onOpenPreview) return;
+                if (!onItemActivate && !onOpenPreview && !onZoomPreview) return;
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault();
                   event.stopPropagation();
-                  if (isFront && onOpenPreview) {
-                    onOpenPreview(entry.id);
+                  if (isFront) {
+                    if (onZoomPreview) {
+                      onZoomPreview(entry);
+                    } else if (onOpenPreview) {
+                      onOpenPreview(entry.id);
+                    } else {
+                      onItemActivate?.(entry.id);
+                    }
                   } else {
                     onItemActivate?.(entry.id);
                   }
@@ -310,6 +327,11 @@ const DetailPanel = ({
 }) => {
   const selectedCount = selectedDocuments.length;
   const singleDoc = selectedCount === 1 ? selectedDocuments[0] : null;
+  const singleDocId = singleDoc?.id || null;
+  const selectionKey = useMemo(
+    () => selectedDocuments.map((doc) => doc?.id ?? '').join('|'),
+    [selectedDocuments],
+  );
 
   const singleDownloadHref = useMemo(() => {
     if (!singleDoc) return null;
@@ -328,6 +350,7 @@ const DetailPanel = ({
   const [ocrUrl, setOcrUrl] = useState(null);
   const [ocrLoading, setOcrLoading] = useState(false);
   const [ocrError, setOcrError] = useState(null);
+  const [zoomedPreview, setZoomedPreview] = useState(null);
 
   useEffect(() => {
     if (!singleDoc) {
@@ -357,6 +380,10 @@ const DetailPanel = ({
     setOcrUrl(null);
   }, [singleDoc?.id]);
 
+  useEffect(() => {
+    setZoomedPreview(null);
+  }, [selectionKey]);
+
   const startTitleEdit = useCallback(() => {
     if (!singleDoc) return;
     setTitleEditDocId(singleDoc.id);
@@ -519,6 +546,7 @@ const DetailPanel = ({
   }, [selectedDocuments]);
 
   const stackTopDocument = stackDocuments[0] || null;
+  const stackTopDocId = stackTopDocument?.id || null;
   const stackPreviewNavigator = useAssetNavigator({
     document: stackTopDocument,
     assetType: 'preview',
@@ -718,6 +746,138 @@ const DetailPanel = ({
     [bulkCorrespondents, onBulkCorrespondentRemove, onCorrespondentRemove, selectedDocuments],
   );
 
+  const openZoomPreview = useCallback((config) => {
+    if (!config) return;
+    setZoomedPreview({
+      mode: config.mode,
+      docId: config.docId ?? null,
+    });
+  }, []);
+
+  const closeZoomPreview = useCallback(() => {
+    setZoomedPreview(null);
+  }, []);
+
+  const handleSingleZoom = useCallback(
+    (entry) => {
+      if (!singleHasPreview) return;
+      const targetId = entry?.id ?? singleDocId;
+      if (!targetId) return;
+      openZoomPreview({ mode: 'single', docId: targetId });
+    },
+    [openZoomPreview, singleHasPreview, singleDocId],
+  );
+
+  const handleStackZoom = useCallback(
+    (entry) => {
+      if (!stackTopDocId || entry?.id !== stackTopDocId) return;
+      if (!topHasPreview) return;
+      openZoomPreview({ mode: 'stack', docId: stackTopDocId });
+    },
+    [openZoomPreview, stackTopDocId, topHasPreview],
+  );
+
+  const zoomDisplay = useMemo(() => {
+    if (!zoomedPreview) {
+      return null;
+    }
+
+    if (
+      zoomedPreview.mode === 'single' &&
+      singleDocId &&
+      singleDoc &&
+      singleHasPreview &&
+      zoomedPreview.docId === singleDocId
+    ) {
+      return {
+        url: singlePreviewNavigator.currentUrl,
+        alt: singleDoc.title || singleDoc.original_name || 'Document preview',
+        canGoPrev:
+          singleEffectiveCardinality > 1 && Boolean(singlePreviewNavigator.canGoPrev),
+        canGoNext:
+          singleEffectiveCardinality > 1 && Boolean(singlePreviewNavigator.canGoNext),
+        goPrev: singlePreviewNavigator.goPrev,
+        goNext: singlePreviewNavigator.goNext,
+      };
+    }
+
+    if (
+      zoomedPreview.mode === 'stack' &&
+      stackTopDocId &&
+      stackTopDocument &&
+      zoomedPreview.docId === stackTopDocId &&
+      topHasPreview
+    ) {
+      return {
+        url: stackPreviewNavigator.currentUrl,
+        alt: stackTopDocument.title || stackTopDocument.original_name || 'Document preview',
+        canGoPrev:
+          topEffectiveCardinality > 1 && Boolean(stackPreviewNavigator.canGoPrev),
+        canGoNext:
+          topEffectiveCardinality > 1 && Boolean(stackPreviewNavigator.canGoNext),
+        goPrev: stackPreviewNavigator.goPrev,
+        goNext: stackPreviewNavigator.goNext,
+      };
+    }
+
+    return null;
+  }, [
+    zoomedPreview,
+    singleDoc,
+    singleDocId,
+    singleHasPreview,
+    singlePreviewNavigator.currentUrl,
+    singlePreviewNavigator.canGoPrev,
+    singlePreviewNavigator.canGoNext,
+    singlePreviewNavigator.goPrev,
+    singlePreviewNavigator.goNext,
+    singleEffectiveCardinality,
+    stackTopDocument,
+    stackTopDocId,
+    topHasPreview,
+    stackPreviewNavigator.currentUrl,
+    stackPreviewNavigator.canGoPrev,
+    stackPreviewNavigator.canGoNext,
+    stackPreviewNavigator.goPrev,
+    stackPreviewNavigator.goNext,
+    topEffectiveCardinality,
+  ]);
+
+  useEffect(() => {
+    if (zoomedPreview && !zoomDisplay) {
+      setZoomedPreview(null);
+    }
+  }, [zoomedPreview, zoomDisplay]);
+
+  useEffect(() => {
+    if (!zoomedPreview) {
+      return undefined;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setZoomedPreview(null);
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (zoomDisplay?.canGoPrev) {
+          zoomDisplay.goPrev?.();
+        }
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (zoomDisplay?.canGoNext) {
+          zoomDisplay.goNext?.();
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [zoomedPreview, zoomDisplay]);
+
   const renderSingle = () => {
     if (!singleDoc) {
       return <p className="meta">Select a document to view metadata, tags and actions.</p>;
@@ -759,6 +919,7 @@ const DetailPanel = ({
             emptyMessage="Preview loading…"
             onItemActivate={handlePreviewActivate}
             onOpenPreview={onOpenPreview}
+            onZoomPreview={handleSingleZoom}
             activeItemId={activePreviewId}
           />
           {hasPreviewImage && (effectiveCardinality > 1 || canGoPrev || canGoNext) ? (
@@ -980,6 +1141,7 @@ const DetailPanel = ({
             emptyMessage="No previews available."
             onItemActivate={handlePreviewActivate}
             onOpenPreview={onOpenPreview}
+            onZoomPreview={handleStackZoom}
             activeItemId={activePreviewId}
           />
           {topDocIdLocal && topHasPreview && (topCardinalityLocal > 1 || topCanGoPrev || topCanGoNext) ? (
@@ -1060,13 +1222,14 @@ const DetailPanel = ({
   const showOcrAction = Boolean(singleDoc && hasOcrAsset);
 
   return (
-    <aside className="detail-panel panel">
-      <div className="panel-header">
-        <div className="panel-actions">
-          <button
-            type="button"
-            className="icon-button ghost"
-            onClick={onClose}
+    <>
+      <aside className="detail-panel panel">
+        <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"
           >
@@ -1148,7 +1311,62 @@ const DetailPanel = ({
       <div className="panel-body">
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
-    </aside>
+      </aside>
+      {zoomDisplay?.url
+        ? createPortal(
+            <div
+              className="preview-zoom-backdrop"
+              role="dialog"
+              aria-modal="true"
+              aria-label="Enlarged document preview"
+              onClick={closeZoomPreview}
+            >
+              <div className="preview-zoom__stage" onClick={(event) => event.stopPropagation()}>
+                <img
+                  src={zoomDisplay.url}
+                  alt={zoomDisplay.alt}
+                  className="preview-zoom__image"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    closeZoomPreview();
+                  }}
+                />
+                <div className="preview-zoom__nav">
+                  <button
+                    type="button"
+                    className="preview-zoom__nav-button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (zoomDisplay.canGoPrev) {
+                        zoomDisplay.goPrev?.();
+                      }
+                    }}
+                    aria-label="Previous preview"
+                    disabled={!zoomDisplay.canGoPrev}
+                  >
+                    <ArrowLeftIcon />
+                  </button>
+                  <button
+                    type="button"
+                    className="preview-zoom__nav-button"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      if (zoomDisplay.canGoNext) {
+                        zoomDisplay.goNext?.();
+                      }
+                    }}
+                    aria-label="Next preview"
+                    disabled={!zoomDisplay.canGoNext}
+                  >
+                    <ArrowRightIcon />
+                  </button>
+                </div>
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
   );
 };
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index acacaed..9fde27c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -215,6 +215,92 @@ button.danger:hover:not([disabled]) {
   background: var(--sidebar-hover-bg);
 }
 
+.preview-zoom-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  z-index: 3000;
+  cursor: zoom-out;
+}
+
+.preview-zoom__stage {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  max-width: 95vw;
+  max-height: 95vh;
+}
+
+.preview-zoom__image {
+  max-width: 95vw;
+  max-height: 95vh;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  box-shadow: 0 32px 120px rgba(15, 23, 42, 0.55);
+  cursor: inherit;
+}
+
+.preview-zoom__nav {
+  position: absolute;
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.9rem;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.preview-zoom__stage:hover .preview-zoom__nav,
+.preview-zoom__stage:focus-within .preview-zoom__nav {
+  opacity: 1;
+}
+
+.preview-zoom__nav-button {
+  width: 2.8rem;
+  height: 2.8rem;
+  border: none;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.62);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1;
+  transition: background 0.15s ease, transform 0.15s ease;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
+}
+
+.preview-zoom__nav-button:hover {
+  background: rgba(0, 0, 0, 0.82);
+}
+
+.preview-zoom__nav-button:focus-visible {
+  outline: 2px solid var(--accent, #4f46e5);
+  outline-offset: 3px;
+}
+
+.preview-zoom__nav-button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.preview-zoom__nav-button[disabled] {
+  opacity: 0.35;
+  cursor: default;
+}
+
 .with-icon {
   display: inline-flex;
   align-items: center;

From 80238bb7a1cda891c379930b2140733cce2ce3b8 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 02:05:31 +0200
Subject: [PATCH 07/17] zoom

---
 frontend/src/detail/DetailPanel.jsx | 338 +++++++++++++++++++++++++---
 frontend/src/styles.css             |  13 +-
 2 files changed, 313 insertions(+), 38 deletions(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index f0fb139..11cb512 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   DownloadIcon,
@@ -351,6 +351,35 @@ const DetailPanel = ({
   const [ocrLoading, setOcrLoading] = useState(false);
   const [ocrError, setOcrError] = useState(null);
   const [zoomedPreview, setZoomedPreview] = useState(null);
+  const [zoomNative, setZoomNative] = useState(false);
+  const [zoomPan, setZoomPan] = useState({ x: 0, y: 0 });
+  const [isZoomDragging, setIsZoomDragging] = useState(false);
+  const zoomStageRef = useRef(null);
+  const zoomImageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
+  const zoomDragRef = useRef(null);
+  const zoomSkipClickRef = useRef(false);
+
+  const clampPan = useCallback(
+    (x, y) => {
+      const stage = zoomStageRef.current;
+      const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+      if (!stage || !naturalWidth || !naturalHeight) {
+        return { x: 0, y: 0 };
+      }
+      const stageRect = stage.getBoundingClientRect();
+      if (stageRect.width <= 0 || stageRect.height <= 0) {
+        return { x: 0, y: 0 };
+      }
+      const imageWidth = zoomNative ? naturalWidth : Math.min(naturalWidth, stageRect.width);
+      const imageHeight = zoomNative ? naturalHeight : Math.min(naturalHeight, stageRect.height);
+      const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
+      const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
+      const clampedX = Math.min(Math.max(x, -limitX), limitX);
+      const clampedY = Math.min(Math.max(y, -limitY), limitY);
+      return { x: clampedX, y: clampedY };
+    },
+    [zoomNative],
+  );
 
   useEffect(() => {
     if (!singleDoc) {
@@ -384,6 +413,51 @@ const DetailPanel = ({
     setZoomedPreview(null);
   }, [selectionKey]);
 
+  useEffect(() => {
+    if (!zoomedPreview) {
+      setZoomNative(false);
+      setZoomPan({ x: 0, y: 0 });
+      setIsZoomDragging(false);
+      zoomDragRef.current = null;
+      zoomSkipClickRef.current = false;
+    }
+  }, [zoomedPreview]);
+
+  useEffect(() => {
+    zoomSkipClickRef.current = false;
+    if (zoomNative) {
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        return clamped;
+      });
+    } else {
+      setZoomPan({ x: 0, y: 0 });
+      setIsZoomDragging(false);
+      zoomDragRef.current = null;
+    }
+  }, [zoomNative, clampPan]);
+
+  useEffect(() => {
+    if (!zoomNative) {
+      return undefined;
+    }
+    const handleResize = () => {
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        return clamped;
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, [zoomNative, clampPan]);
+
   const startTitleEdit = useCallback(() => {
     if (!singleDoc) return;
     setTitleEditDocId(singleDoc.id);
@@ -752,10 +826,22 @@ const DetailPanel = ({
       mode: config.mode,
       docId: config.docId ?? null,
     });
+    setZoomNative(false);
+    setZoomPan({ x: 0, y: 0 });
+    setIsZoomDragging(false);
+    zoomDragRef.current = null;
+    zoomSkipClickRef.current = false;
+    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
   }, []);
 
   const closeZoomPreview = useCallback(() => {
     setZoomedPreview(null);
+    setZoomNative(false);
+    setZoomPan({ x: 0, y: 0 });
+    setIsZoomDragging(false);
+    zoomDragRef.current = null;
+    zoomSkipClickRef.current = false;
+    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
   }, []);
 
   const handleSingleZoom = useCallback(
@@ -777,6 +863,133 @@ const DetailPanel = ({
     [openZoomPreview, stackTopDocId, topHasPreview],
   );
 
+  const handleZoomImageLoad = useCallback(
+    (event) => {
+      zoomImageMetricsRef.current = {
+        naturalWidth: event.currentTarget.naturalWidth || 0,
+        naturalHeight: event.currentTarget.naturalHeight || 0,
+      };
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        return { x: clamped.x, y: clamped.y };
+      });
+    },
+    [clampPan],
+  );
+
+  const handleZoomImageClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (zoomSkipClickRef.current) {
+        zoomSkipClickRef.current = false;
+        return;
+      }
+
+      if (!zoomNative) {
+        const stage = zoomStageRef.current;
+        const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+        if (stage && naturalWidth && naturalHeight) {
+          const stageRect = stage.getBoundingClientRect();
+          const imageRect = event.currentTarget.getBoundingClientRect();
+          const clickX = event.clientX - imageRect.left;
+          const clickY = event.clientY - imageRect.top;
+          const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
+          const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
+          const focusX = naturalWidth * ratioX;
+          const focusY = naturalHeight * ratioY;
+          const halfWidth = naturalWidth / 2;
+          const halfHeight = naturalHeight / 2;
+          const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
+          const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
+          let targetPanX = -(focusX - halfWidth);
+          let targetPanY = -(focusY - halfHeight);
+          targetPanX = Math.min(Math.max(targetPanX, -limitX), limitX);
+          targetPanY = Math.min(Math.max(targetPanY, -limitY), limitY);
+          setZoomPan({ x: targetPanX, y: targetPanY });
+        } else {
+          setZoomPan({ x: 0, y: 0 });
+        }
+        setZoomNative(true);
+      } else {
+        setZoomNative(false);
+      }
+    },
+    [zoomNative],
+  );
+
+  const handleZoomImagePointerDown = useCallback(
+    (event) => {
+      if (!zoomNative || event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      zoomSkipClickRef.current = false;
+      zoomDragRef.current = {
+        pointerId: event.pointerId,
+        originX: zoomPan.x,
+        originY: zoomPan.y,
+        startX: event.clientX,
+        startY: event.clientY,
+        moved: false,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [zoomNative, zoomPan],
+  );
+
+  const handleZoomImagePointerMove = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      const deltaX = event.clientX - drag.startX;
+      const deltaY = event.clientY - drag.startY;
+      if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+        drag.moved = true;
+        setIsZoomDragging(true);
+      }
+      if (drag.moved) {
+        const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
+        setZoomPan((current) =>
+          current.x === clamped.x && current.y === clamped.y ? current : clamped,
+        );
+      }
+    },
+    [clampPan],
+  );
+
+  const endZoomDrag = useCallback(() => {
+    zoomDragRef.current = null;
+    setIsZoomDragging(false);
+  }, []);
+
+  const handleZoomImagePointerUp = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      zoomSkipClickRef.current = Boolean(drag.moved);
+      endZoomDrag();
+    },
+    [endZoomDrag],
+  );
+
+  const handleZoomImagePointerCancel = useCallback(
+    (event) => {
+      const drag = zoomDragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      zoomSkipClickRef.current = true;
+      endZoomDrag();
+    },
+    [endZoomDrag],
+  );
+
   const zoomDisplay = useMemo(() => {
     if (!zoomedPreview) {
       return null;
@@ -849,6 +1062,21 @@ const DetailPanel = ({
     }
   }, [zoomedPreview, zoomDisplay]);
 
+  const zoomDisplayUrl = zoomDisplay?.url;
+
+  useEffect(() => {
+    if (!zoomDisplayUrl) {
+      return;
+    }
+    setZoomPan((current) => {
+      const clamped = clampPan(current.x, current.y);
+      if (clamped.x === current.x && clamped.y === current.y) {
+        return current;
+      }
+      return clamped;
+    });
+  }, [zoomDisplayUrl, clampPan]);
+
   useEffect(() => {
     if (!zoomedPreview) {
       return undefined;
@@ -878,6 +1106,38 @@ const DetailPanel = ({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [zoomedPreview, zoomDisplay]);
 
+  const zoomImageStyle = useMemo(() => {
+    if (!zoomNative) {
+      return {
+        cursor: 'zoom-in',
+        transform: 'none',
+        maxWidth: '95vw',
+        maxHeight: '95vh',
+      };
+    }
+    const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
+    return {
+      cursor: isZoomDragging ? 'grabbing' : 'grab',
+      width: naturalWidth ? `${naturalWidth}px` : 'auto',
+      height: naturalHeight ? `${naturalHeight}px` : 'auto',
+      maxWidth: 'none',
+      maxHeight: 'none',
+      transform: `translate3d(${zoomPan.x}px, ${zoomPan.y}px, 0)`,
+    };
+  }, [zoomNative, zoomPan.x, zoomPan.y, isZoomDragging]);
+
+  const zoomStageClassName = useMemo(
+    () =>
+      [
+        'preview-zoom__stage',
+        zoomNative ? 'preview-zoom__stage--native' : '',
+        isZoomDragging ? 'preview-zoom__stage--dragging' : '',
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [zoomNative, isZoomDragging],
+  );
+
   const renderSingle = () => {
     if (!singleDoc) {
       return <p className="meta">Select a document to view metadata, tags and actions.</p>;
@@ -1321,46 +1581,52 @@ const DetailPanel = ({
               aria-label="Enlarged document preview"
               onClick={closeZoomPreview}
             >
-              <div className="preview-zoom__stage" onClick={(event) => event.stopPropagation()}>
+              <div ref={zoomStageRef} className={zoomStageClassName}>
                 <img
                   src={zoomDisplay.url}
                   alt={zoomDisplay.alt}
                   className="preview-zoom__image"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    closeZoomPreview();
-                  }}
+                  style={zoomImageStyle}
+                  onLoad={handleZoomImageLoad}
+                  onClick={handleZoomImageClick}
+                  onPointerDown={handleZoomImagePointerDown}
+                  onPointerMove={handleZoomImagePointerMove}
+                  onPointerUp={handleZoomImagePointerUp}
+                  onPointerCancel={handleZoomImagePointerCancel}
+                  draggable={false}
                 />
-                <div className="preview-zoom__nav">
-                  <button
-                    type="button"
-                    className="preview-zoom__nav-button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      if (zoomDisplay.canGoPrev) {
-                        zoomDisplay.goPrev?.();
-                      }
-                    }}
-                    aria-label="Previous preview"
-                    disabled={!zoomDisplay.canGoPrev}
-                  >
-                    <ArrowLeftIcon />
-                  </button>
-                  <button
-                    type="button"
-                    className="preview-zoom__nav-button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      if (zoomDisplay.canGoNext) {
-                        zoomDisplay.goNext?.();
-                      }
-                    }}
-                    aria-label="Next preview"
-                    disabled={!zoomDisplay.canGoNext}
-                  >
-                    <ArrowRightIcon />
-                  </button>
-                </div>
+                {zoomDisplay.canGoPrev || zoomDisplay.canGoNext ? (
+                  <div className="preview-zoom__nav">
+                    <button
+                      type="button"
+                      className="preview-zoom__nav-button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (zoomDisplay.canGoPrev) {
+                          zoomDisplay.goPrev?.();
+                        }
+                      }}
+                      aria-label="Previous preview"
+                      disabled={!zoomDisplay.canGoPrev}
+                    >
+                      <ArrowLeftIcon />
+                    </button>
+                    <button
+                      type="button"
+                      className="preview-zoom__nav-button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        if (zoomDisplay.canGoNext) {
+                          zoomDisplay.goNext?.();
+                        }
+                      }}
+                      aria-label="Next preview"
+                      disabled={!zoomDisplay.canGoNext}
+                    >
+                      <ArrowRightIcon />
+                    </button>
+                  </div>
+                ) : null}
               </div>
             </div>,
             document.body,
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9fde27c..7f0df53 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -233,9 +233,17 @@ button.danger:hover:not([disabled]) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1.25rem;
   max-width: 95vw;
   max-height: 95vh;
+  cursor: zoom-in;
+}
+
+.preview-zoom__stage--native {
+  cursor: grab;
+}
+
+.preview-zoom__stage--dragging {
+  cursor: grabbing;
 }
 
 .preview-zoom__image {
@@ -259,11 +267,13 @@ button.danger:hover:not([disabled]) {
   gap: 0.9rem;
   opacity: 0;
   transition: opacity 0.18s ease;
+  pointer-events: none;
 }
 
 .preview-zoom__stage:hover .preview-zoom__nav,
 .preview-zoom__stage:focus-within .preview-zoom__nav {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .preview-zoom__nav-button {
@@ -1826,7 +1836,6 @@ button.danger:hover:not([disabled]) {
   filter: drop-shadow(0 2px 6px var(--shadow-soft));
   transform-origin: center;
   border-radius: 6px;
-  overflow: hidden;
   pointer-events: none;
 }
 

From 4a06fa82eb998b1455add91f773d0369ac5682e2 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 02:13:20 +0200
Subject: [PATCH 08/17] cache warming

---
 frontend/src/detail/DetailPanel.jsx | 63 +++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 11cb512..1ded293 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1106,6 +1106,69 @@ const DetailPanel = ({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [zoomedPreview, zoomDisplay]);
 
+  useEffect(() => {
+    if (typeof ensureAssetUrl !== 'function') {
+      return;
+    }
+
+    const warmNavigator = (navigator) => {
+      const {
+        documentId,
+        asset,
+        ordinal,
+        canGoPrev,
+        canGoNext,
+        cardinality,
+      } = navigator;
+      if (!documentId || !asset || !Number.isFinite(ordinal)) {
+        return;
+      }
+
+      const requests = [];
+      if (canGoPrev) {
+        const prevOrdinal = Math.max(1, ordinal - 1);
+        if (!cardinality || prevOrdinal <= cardinality) {
+          requests.push(
+            ensureAssetUrl(documentId, asset, {
+              start: prevOrdinal,
+              limit: 1,
+              objectOrdinal: prevOrdinal,
+            }),
+          );
+        }
+      }
+      if (canGoNext) {
+        const nextOrdinal = ordinal + 1;
+        if (!cardinality || nextOrdinal <= cardinality) {
+          requests.push(
+            ensureAssetUrl(documentId, asset, {
+              start: nextOrdinal,
+              limit: 1,
+              objectOrdinal: nextOrdinal,
+            }),
+          );
+        }
+      }
+
+      requests.forEach((promise) => promise?.catch?.(() => {}));
+    };
+
+    warmNavigator(singlePreviewNavigator);
+    warmNavigator(stackPreviewNavigator);
+  }, [
+    ensureAssetUrl,
+    singlePreviewNavigator.documentId,
+    singlePreviewNavigator.asset,
+    singlePreviewNavigator.ordinal,
+    singlePreviewNavigator.canGoPrev,
+    singlePreviewNavigator.canGoNext,
+    stackPreviewNavigator.documentId,
+    stackPreviewNavigator.asset,
+    stackPreviewNavigator.ordinal,
+    stackPreviewNavigator.canGoPrev,
+    stackPreviewNavigator.canGoNext,
+  ]);
+
   const zoomImageStyle = useMemo(() => {
     if (!zoomNative) {
       return {

From 42a3a5331495072c7f309f94d500ad4c812fe81a Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 02:52:26 +0200
Subject: [PATCH 09/17] panning

---
 frontend/src/detail/DetailPanel.jsx | 33 ++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 1ded293..4207e86 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -990,6 +990,33 @@ const DetailPanel = ({
     [endZoomDrag],
   );
 
+  const handleZoomStageWheel = useCallback(
+    (event) => {
+      if (!zoomNative) {
+        return;
+      }
+      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      if (!deltaX && !deltaY) {
+        return;
+      }
+      let updated = false;
+      setZoomPan((current) => {
+        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        updated = true;
+        return clamped;
+      });
+      if (updated) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [zoomNative, clampPan],
+  );
+
   const zoomDisplay = useMemo(() => {
     if (!zoomedPreview) {
       return null;
@@ -1644,7 +1671,11 @@ const DetailPanel = ({
               aria-label="Enlarged document preview"
               onClick={closeZoomPreview}
             >
-              <div ref={zoomStageRef} className={zoomStageClassName}>
+              <div
+                ref={zoomStageRef}
+                className={zoomStageClassName}
+                onWheel={handleZoomStageWheel}
+              >
                 <img
                   src={zoomDisplay.url}
                   alt={zoomDisplay.alt}

From b163a07e84906c0b86b13b16cd5bf541c1b00530 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 10:36:47 +0100
Subject: [PATCH 10/17] lazy-thumbnails

---
 frontend/src/documents/DocumentsTable.jsx | 88 ++++++++++++++++++++---
 1 file changed, 77 insertions(+), 11 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 26993b0..954ae4f 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { getAssetFromVersion, resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
 import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon, TrashIcon } from '../ui/icons';
@@ -13,13 +13,62 @@ const getPageCount = (doc) =>
     ? doc.current_version.metadata.page_count
     : null;
 
+// Detects when an element becomes visible within a scroll container.
+const useLazyVisibility = (rootRef, resetKey) => {
+  const targetRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(false);
+  }, [resetKey]);
+
+  const rootNode = rootRef?.current || null;
+
+  useEffect(() => {
+    if (isVisible) {
+      return undefined;
+    }
+    const element = targetRef.current;
+    if (!element) {
+      return undefined;
+    }
+    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined') {
+      setIsVisible(true);
+      return undefined;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      {
+        root: rootNode,
+        rootMargin: '200px 0px',
+        threshold: 0.01,
+      },
+    );
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isVisible, rootNode, resetKey]);
+
+  return { ref: targetRef, isVisible };
+};
+
 const DocumentThumbnailImage = ({
   document,
   ensureAssetUrl,
   getDocumentAsset,
   alt,
   maxSize = LIST_ICON_SIZE,
+  scrollRootRef = null,
 }) => {
+  const { ref: visibilityRef, isVisible } = useLazyVisibility(scrollRootRef, document?.id);
   const resolvedMaxSize = Math.max(1, Math.round(maxSize || 1));
   const thumbnailAsset = useMemo(
     () => getAssetFromVersion(document?.current_version, 'thumbnail'),
@@ -45,14 +94,15 @@ const DocumentThumbnailImage = ({
     () => ({ width: `${dimensions.width}px`, height: `${dimensions.height}px` }),
     [dimensions.height, dimensions.width],
   );
-  const url = useMemo(
-    () =>
-      resolveDocumentAssetUrl(document, 'thumbnail', {
-        ensureAssetUrl,
-        getAsset: getDocumentAsset,
-      }),
-    [document, ensureAssetUrl, getDocumentAsset],
-  );
+  const url = useMemo(() => {
+    if (!isVisible) {
+      return null;
+    }
+    return resolveDocumentAssetUrl(document, 'thumbnail', {
+      ensureAssetUrl,
+      getAsset: getDocumentAsset,
+    });
+  }, [document, ensureAssetUrl, getDocumentAsset, isVisible]);
 
   const pageCount = getPageCount(document);
   const showMultiPageBadge = Number.isFinite(pageCount) && pageCount > 1;
@@ -62,13 +112,15 @@ const DocumentThumbnailImage = ({
   }
 
   return (
-    <div className="document-thumbnail-wrapper">
+    <div className="document-thumbnail-wrapper" ref={visibilityRef}>
       <div className={innerClasses.join(' ')} style={innerStyle}>
         {url ? (
           <img
             src={url}
             alt={alt || ''}
             className="document-thumbnail"
+            loading="lazy"
+            decoding="async"
             draggable={false}
             onDragStart={(event) => event.preventDefault()}
           />
@@ -142,6 +194,18 @@ const DocumentsTable = ({
     [draggingDocumentIds],
   );
   const scrollRef = useRef(null);
+  const [, forceVisibilityTick] = useState(0);
+  const lastScrollNodeRef = useRef(null);
+  const assignScrollRef = useCallback((node) => {
+    if (lastScrollNodeRef.current === node) {
+      return;
+    }
+    lastScrollNodeRef.current = node;
+    scrollRef.current = node;
+    if (node) {
+      forceVisibilityTick((value) => value + 1);
+    }
+  }, []);
   const isGridView = viewMode === 'grid';
   const gridIconSize = DEFAULT_GRID_ICON_SIZE;
   const handleSetViewMode = useCallback(
@@ -329,7 +393,7 @@ const DocumentsTable = ({
       )}
       <div className="column-body">
         <div
-          ref={scrollRef}
+          ref={assignScrollRef}
           className="documents-scroll"
           onFocus={(event) => {
             if (event.target === scrollRef.current) {
@@ -454,6 +518,7 @@ const DocumentsTable = ({
                       getDocumentAsset={getDocumentAsset}
                       alt={`Thumbnail for ${doc.title || doc.original_name}`}
                       maxSize={gridIconSize}
+                      scrollRootRef={scrollRef}
                     />
                     <div className="document-card__meta">
                       <div
@@ -670,6 +735,7 @@ const DocumentsTable = ({
                           ensureAssetUrl={ensureAssetUrl}
                           getDocumentAsset={getDocumentAsset}
                           alt={`Thumbnail for ${doc.title || doc.original_name}`}
+                          scrollRootRef={scrollRef}
                         />
                       </td>
                       <td className="doc-list__name">

From b6300ffa30e6343ff5e9879a8758dd03ad1094bf Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 19:14:35 +0100
Subject: [PATCH 11/17] panel actions

---
 frontend/src/documents/DocumentsTable.jsx |  80 ++++----
 frontend/src/index.jsx                    | 215 ++++++++++++++++++--
 frontend/src/sidebar/Sidebar.jsx          | 233 ++++++++++++----------
 frontend/src/skeuomorphic_ws.css          |  49 -----
 frontend/src/skeuomorphic_ws.jsx          |  19 --
 frontend/src/styles.css                   | 134 +++++++++----
 frontend/src/ui/icons.js                  |  55 +++++
 7 files changed, 522 insertions(+), 263 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 954ae4f..9a23c13 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -177,6 +177,7 @@ const DocumentsTable = ({
   viewMode = 'list',
   onViewModeChange,
   onClearSelection,
+  showHeader = true,
 }) => {
   const showingSearchResults = searchResults !== null;
   const rows = showingSearchResults ? searchResults : documents;
@@ -220,6 +221,11 @@ const DocumentsTable = ({
     },
     [onViewModeChange],
   );
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+  }, [viewMode]);
   const isTagDragEvent = useCallback((event) => {
     const types = Array.from(event.dataTransfer?.types || []);
     return TAG_MIME_TYPES.some((type) => types.includes(type));
@@ -338,49 +344,51 @@ const DocumentsTable = ({
     <section
       className={`documents-panel column documents-panel--view-${isGridView ? 'grid' : 'list'}`}
     >
-      <div className="column-header">
-        <div className="column-header__titles">
-          <h2>{currentFolderName}</h2>
-          {showingSearchResults && (
-            <div className="column-subtitle">Search results</div>
-          )}
-        </div>
-        <div className="header-actions">
-          <div className="view-toggle" role="group" aria-label="Change view">
+      {showHeader ? (
+        <div className="column-header">
+          <div className="column-header__titles">
+            <h2>{currentFolderName}</h2>
+            {showingSearchResults && (
+              <div className="column-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${isGridView ? '' : ' active'}`}
+                onClick={() => handleSetViewMode('list')}
+                aria-pressed={!isGridView}
+                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>
+            </div>
             <button
               type="button"
-              className={`view-toggle__button${isGridView ? '' : ' active'}`}
-              onClick={() => handleSetViewMode('list')}
-              aria-pressed={!isGridView}
-              title="List view"
+              onClick={onRequestCreateFolder}
+              disabled={creatingFolder}
             >
-              <ViewListIcon className="view-toggle__icon" size={18} />
+              {creatingFolder ? 'Creating…' : 'New folder'}
             </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 className="secondary" onClick={onRefresh}>
+              Refresh
+            </button>
+            <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
+              Desk View
             </button>
           </div>
-          <button
-            type="button"
-            onClick={onRequestCreateFolder}
-            disabled={creatingFolder}
-          >
-            {creatingFolder ? 'Creating…' : 'New folder'}
-          </button>
-          <button className="secondary" onClick={onRefresh}>
-            Refresh
-          </button>
-          <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
-            Desk View
-          </button>
         </div>
-      </div>
+      ) : null}
       {showDefaultEmptyState && (
         <div className="empty-state">
           Drop files anywhere or onto a folder to upload documents.
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index bbe7ac2..05d6726 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -32,6 +32,16 @@ import CorrespondentsPanel from './correspondents/CorrespondentsPanel';
 import { CORRESPONDENT_ROLES } from './constants/correspondents';
 import TagManager from './tag_manager';
 import Sidebar from './sidebar/Sidebar';
+import {
+  ChevronsRightIcon,
+  ChevronsLeftIcon,
+  ViewListIcon,
+  ViewGridIcon,
+  FolderPlusIcon,
+  RefreshIcon,
+  ArrowUpIcon,
+  MinusVerticalIcon,
+} from './ui/icons';
 import DocumentsTable from './documents/DocumentsTable';
 import { AppShellContext, useAppShell } from './appShellContext';
 import DocumentViewerRoute from './routes/DocumentViewerRoute';
@@ -311,9 +321,9 @@ const LoginView = ({
 
 
 
-const DocumentsLayout = ({ sidebarProps, children }) => (
-  <main className="documents-main">
-    <Sidebar {...sidebarProps} />
+const DocumentsLayout = ({ sidebarProps, children, sidebarCollapsed }) => (
+  <main className={`documents-main${sidebarCollapsed ? ' documents-main--sidebar-collapsed' : ''}`}>
+    {!sidebarCollapsed ? <Sidebar {...sidebarProps} /> : null}
     {children}
   </main>
 );
@@ -337,6 +347,9 @@ const AppLayout = () => {
     ({ message, variant }) => setStatusMessage(message, variant),
     [setStatusMessage],
   );
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
+  const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
   const reportApiError = useApiError({
     onReport: handleApiReport,
   });
@@ -4488,6 +4501,7 @@ const AppLayout = () => {
     isFilterActive,
     onLogout: handleLogout,
     status,
+    onCollapse: collapseSidebar,
   };
 
   const resolveThumbnailUrlForDoc = useCallback(
@@ -4847,36 +4861,209 @@ const DocumentsRoute = () => {
     skeuoWorkspaceProps,
     openTagsModal,
     openCorrespondentsModal,
+    exitSkeuoWorkspace,
   } = useAppShell();
+  const navigate = useNavigate();
+
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const collapseSidebar = useCallback(() => setSidebarCollapsed(true), []);
+  const expandSidebar = useCallback(() => setSidebarCollapsed(false), []);
 
   const sidebarPropsWithActions = useMemo(
     () => ({
       ...sidebarProps,
       onManageTags: openTagsModal,
       onManageCorrespondents: openCorrespondentsModal,
+      onCollapse: collapseSidebar,
     }),
-    [sidebarProps, openTagsModal, openCorrespondentsModal],
+    [sidebarProps, openTagsModal, openCorrespondentsModal, collapseSidebar],
   );
 
+  const {
+    currentFolderName,
+    viewMode,
+    onViewModeChange,
+    onRequestCreateFolder,
+    creatingFolder,
+    onRefresh,
+    onShowSkeuoWorkspace,
+    searchResults,
+    breadcrumbs,
+  } = documentsTableProps;
+
+  const isGridView = viewMode === 'grid';
+  const showingSearchResults = Array.isArray(searchResults);
+  const headerTitle = showingSearchResults ? 'Search results' : currentFolderName;
+  const headerSubtitle = showingSearchResults
+    ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
+    : null;
+  const parentBreadcrumb = breadcrumbs && breadcrumbs.length > 1 ? breadcrumbs[breadcrumbs.length - 2] : null;
+  const handleNavigateParent = parentBreadcrumb
+    ? () => {
+        const target = parentBreadcrumb.id === 'root'
+          ? '/documents'
+          : `/documents/folder/${parentBreadcrumb.id}`;
+        navigate(target);
+      }
+    : null;
+
+  const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
+  const toggleSidebar = sidebarCollapsed ? expandSidebar : collapseSidebar;
+  const ToggleIcon = sidebarCollapsed ? ChevronsRightIcon : ChevronsLeftIcon;
+  const toggleLabel = sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar';
+
   if (workspaceMode === 'skeuo') {
     return (
-      <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
+      <DocumentsLayout
+        sidebarProps={sidebarPropsWithActions}
+        sidebarCollapsed={sidebarCollapsed}
+      >
         <div className="main-content">
-          <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+          <div className="panel-header main-content__header">
+            <div className="panel-actions main-content__actions">
+              {sidebarCollapsed ? (
+                <button
+                  type="button"
+                  className="icon-button ghost"
+                  onClick={toggleSidebar}
+                  aria-label={toggleLabel}
+                  title={toggleLabel}
+                >
+                  <ToggleIcon />
+                </button>
+              ) : null}
+              {parentBreadcrumb ? (
+                <button
+                  type="button"
+                  className="icon-button ghost"
+                  onClick={handleNavigateParent}
+                  aria-label="Go to parent folder"
+                  title="Go to parent folder"
+                >
+                  <ArrowUpIcon />
+                </button>
+              ) : null}
+              <h2 className="main-content__title">
+                {headerTitle}
+                {headerSubtitle ? (
+                  <span className="main-content__subtitle">{headerSubtitle}</span>
+                ) : null}
+              </h2>
+              <div className="spacer" />
+              <button
+                type="button"
+                className="icon-button ghost"
+                onClick={skeuoWorkspaceProps.onRefresh}
+                aria-label="Refresh"
+                title="Refresh"
+              >
+                <RefreshIcon />
+              </button>
+              <button type="button" className="secondary" onClick={exitSkeuoWorkspace}>
+                Back to List
+              </button>
+            </div>
+          </div>
+          <div className="main-content__body">
+            <SkeuomorphicWorkspace {...skeuoWorkspaceProps} />
+          </div>
         </div>
       </DocumentsLayout>
     );
   }
 
-  const detailHasContent = detailPanelProps.selectedDocuments?.length > 0;
-
   return (
-    <DocumentsLayout sidebarProps={sidebarPropsWithActions}>
-      <div
-        className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}
-      >
-        <DocumentsTable {...documentsTableProps} />
-        {detailHasContent ? <DetailPanel {...detailPanelProps} /> : null}
+    <DocumentsLayout
+      sidebarProps={sidebarPropsWithActions}
+      sidebarCollapsed={sidebarCollapsed}
+    >
+      <div className={`main-content main-content--documents${detailHasContent ? ' main-content--has-detail' : ''}`}>
+        <div className="panel-header main-content__header">
+          <div className="panel-actions main-content__actions">
+            {sidebarCollapsed ? (
+              <button
+                type="button"
+                className="icon-button ghost"
+                onClick={toggleSidebar}
+                aria-label={toggleLabel}
+                title={toggleLabel}
+              >
+                <ToggleIcon />
+              </button>
+            ) : null}
+            {parentBreadcrumb ? (
+              <button
+                type="button"
+                className="icon-button ghost"
+                onClick={handleNavigateParent}
+                aria-label="Go to parent folder"
+                title="Go to parent folder"
+              >
+                <ArrowUpIcon />
+              </button>
+            ) : null}
+            <h2 className="main-content__title">
+              {headerTitle}
+              {headerSubtitle ? (
+                <span className="main-content__subtitle">{headerSubtitle}</span>
+              ) : null}
+            </h2>
+            <div className="spacer" />
+            <div className="view-toggle" role="group" aria-label="Change view">
+              <button
+                type="button"
+                className={`view-toggle__button${isGridView ? '' : ' active'}`}
+                onClick={() => onViewModeChange?.('list')}
+                aria-pressed={!isGridView}
+                title="List view"
+              >
+                <ViewListIcon className="view-toggle__icon" size={18} />
+              </button>
+              <button
+                type="button"
+                className={`view-toggle__button${isGridView ? ' active' : ''}`}
+                onClick={() => onViewModeChange?.('grid')}
+                aria-pressed={isGridView}
+                title="Icons view"
+              >
+                <ViewGridIcon className="view-toggle__icon" size={18} />
+              </button>
+            </div>
+            <span className="main-content__actions-divider" aria-hidden="true">
+              <MinusVerticalIcon />
+            </span>
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={onRequestCreateFolder}
+              disabled={creatingFolder}
+              aria-label={creatingFolder ? 'Creating folder…' : 'Create folder'}
+              title={creatingFolder ? 'Creating folder…' : 'Create folder'}
+            >
+              <FolderPlusIcon />
+            </button>
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={onRefresh}
+              aria-label="Refresh"
+              title="Refresh"
+            >
+              <RefreshIcon />
+            </button>
+            <button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
+              Desk View
+            </button>
+          </div>
+        </div>
+        <div
+          className={`main-content__body main-content__body--documents${detailHasContent ? ' main-content__body--has-detail' : ''}`}
+        >
+          <DocumentsTable {...documentsTableProps} showHeader={false} />
+        </div>
+        {detailHasContent ? (
+          <DetailPanel {...detailPanelProps} />
+        ) : null}
       </div>
     </DocumentsLayout>
   );
diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index e5bc356..11851b0 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/frontend/src/sidebar/Sidebar.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { ChevronIcon, TrashIcon, EditIcon, FolderIcon } from '../ui/icons';
+import { ChevronIcon, TrashIcon, EditIcon, FolderIcon, ChevronsLeftIcon } from '../ui/icons';
 
 import { getTagColorStyle } from '../utils/colors';
 
@@ -148,6 +148,7 @@ const Sidebar = ({
   previewActive,
   onLogout,
   status,
+  onCollapse,
 }) => {
   const sortedCorrespondents = useMemo(
     () =>
@@ -234,9 +235,30 @@ const Sidebar = ({
 
   return (
     <aside className="sidebar">
-      <div className="sidebar__meta">
-        <h1 className="sidebar__title">Papercrate</h1>
+      <div className="panel-header sidebar__header">
+        <div className="panel-actions">
+          <h1 className="sidebar__title">Papercrate</h1>
+          <div className="spacer" />
+          {onCollapse ? (
+            <button
+              type="button"
+              className="icon-button ghost"
+              onClick={onCollapse}
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar"
+            >
+              <ChevronsLeftIcon />
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <div className="panel-body sidebar__body">
         <span className="sidebar__hint">{hintText}</span>
+        {status && (
+          <div className="sidebar__status">
+            <div className={`status-banner ${status.variant}`}>{status.message}</div>
+          </div>
+        )}
         {onSearchChange && (
           <form className="sidebar__search" onSubmit={handleSearchFormSubmit}>
             <input
@@ -253,117 +275,112 @@ const Sidebar = ({
             )}
           </form>
         )}
-        {status && (
-          <div className="sidebar__status">
-            <div className={`status-banner ${status.variant}`}>{status.message}</div>
+        <div className="sidebar-section sidebar-section--folders">
+          <div className="sidebar-section__header">
+            <h3>Folders</h3>
           </div>
-        )}
-      </div>
-      <div className="sidebar-section sidebar-section--folders">
-        <div className="sidebar-section__header">
-          <h3>Folders</h3>
+          <ul className="folder-tree">
+            {rootNode && renderNodes([rootNode.id], 0)}
+          </ul>
         </div>
-        <ul className="folder-tree">
-          {rootNode && renderNodes([rootNode.id], 0)}
-        </ul>
-      </div>
-      <div className="sidebar-section">
-        <div className="sidebar-section__header">
-          <button
-            type="button"
-            className="sidebar-section__title"
-            onClick={handleManageTags}
+        <div className="sidebar-section">
+          <div className="sidebar-section__header">
+            <button
+              type="button"
+              className="sidebar-section__title"
+              onClick={handleManageTags}
+            >
+              <h3>Tags</h3>
+              <span className="meta">{tags.length}</span>
+            </button>
+          </div>
+          <div
+            className={`sidebar-tag-cloud${
+              activeTagSet.size ? ' sidebar-tag-cloud--has-active' : ''
+            }`}
+            role="list"
           >
-            <h3>Tags</h3>
-            <span className="meta">{tags.length}</span>
-          </button>
-        </div>
-        <div
-          className={`sidebar-tag-cloud${
-            activeTagSet.size ? ' sidebar-tag-cloud--has-active' : ''
-          }`}
-          role="list"
-        >
-          {tags.map((tag) => {
-            const isActive = activeTagSet.has(tag.id);
-            const style = getTagColorStyle(tag.color);
-            const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
-            return (
-              <button
-                key={tag.id}
-                type="button"
-                role="listitem"
-                className={className}
-                style={style || undefined}
-                onClick={() => handleToggleTag(tag.id)}
-                aria-pressed={isActive}
-                draggable
-                onDragStart={(event) => {
-                  try {
-                    const payload = JSON.stringify({
-                      id: tag.id,
-                      label: tag.label,
-                      color: tag.color || null,
-                    });
-                    event.dataTransfer.effectAllowed = 'copy';
-                    event.dataTransfer.setData('application/x-papercrate-tag', payload);
-                    event.dataTransfer.setData('text/papercrate-tag', payload);
-                  } catch (
-                    // eslint-disable-next-line no-empty
-                    error
-                  ) {}
-                }}
-              >
-                {tag.label}
-              </button>
-            );
-          })}
-        </div>
-      </div>
-      <div className="sidebar-section">
-        <div className="sidebar-section__header">
-          <button
-            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.map((correspondent) => {
-            const isActive = activeCorrespondentSet.has(correspondent.id);
-            const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
-            const label = correspondent.name || 'Unnamed';
-            const handleSelect = () => {
-              const nextId = isActive ? null : correspondent.id;
-              onToggleCorrespondentFilter?.(nextId);
-            };
-            return (
-              <li key={correspondent.id}>
-                <span
+            {tags.map((tag) => {
+              const isActive = activeTagSet.has(tag.id);
+              const style = getTagColorStyle(tag.color);
+              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+              return (
+                <button
+                  key={tag.id}
+                  type="button"
+                  role="listitem"
                   className={className}
-                  role="button"
-                  onClick={handleSelect}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                      event.preventDefault();
-                      handleSelect();
-                    }
+                  style={style || undefined}
+                  onClick={() => handleToggleTag(tag.id)}
+                  aria-pressed={isActive}
+                  draggable
+                  onDragStart={(event) => {
+                    try {
+                      const payload = JSON.stringify({
+                        id: tag.id,
+                        label: tag.label,
+                        color: tag.color || null,
+                      });
+                      event.dataTransfer.effectAllowed = 'copy';
+                      event.dataTransfer.setData('application/x-papercrate-tag', payload);
+                      event.dataTransfer.setData('text/papercrate-tag', payload);
+                    } catch (
+                      // eslint-disable-next-line no-empty
+                      error
+                    ) {}
                   }}
                 >
-                  {label}
-                </span>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-      <div className="sidebar__footer">
-        <button className="secondary" type="button" onClick={handleLogoutClick}>
-          Log out
-        </button>
+                  {tag.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        <div className="sidebar-section">
+          <div className="sidebar-section__header">
+            <button
+              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.map((correspondent) => {
+              const isActive = activeCorrespondentSet.has(correspondent.id);
+              const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
+              const label = correspondent.name || 'Unnamed';
+              const handleSelect = () => {
+                const nextId = isActive ? null : correspondent.id;
+                onToggleCorrespondentFilter?.(nextId);
+              };
+              return (
+                <li key={correspondent.id}>
+                  <span
+                    className={className}
+                    role="button"
+                    onClick={handleSelect}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleSelect();
+                      }
+                    }}
+                  >
+                    {label}
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div className="sidebar__footer">
+          <button className="secondary" type="button" onClick={handleLogoutClick}>
+            Log out
+          </button>
+        </div>
       </div>
     </aside>
   );
diff --git a/frontend/src/skeuomorphic_ws.css b/frontend/src/skeuomorphic_ws.css
index 00ec775..ff0da1a 100644
--- a/frontend/src/skeuomorphic_ws.css
+++ b/frontend/src/skeuomorphic_ws.css
@@ -15,55 +15,6 @@
   position: relative;
 }
 
-.skeuo-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 1rem 0.5rem;
-}
-
-.skeuo-header__meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.skeuo-header__meta h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.skeuo-breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-}
-
-.skeuo-crumb {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-}
-
-.skeuo-crumb.is-current {
-  color: var(--fg);
-  font-weight: 600;
-}
-
-.skeuo-crumb-separator {
-  opacity: 0.4;
-}
-
-.skeuo-header__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 .skeuo-canvas {
   flex: 1;
   position: relative;
diff --git a/frontend/src/skeuomorphic_ws.jsx b/frontend/src/skeuomorphic_ws.jsx
index 1926b6b..39a580a 100644
--- a/frontend/src/skeuomorphic_ws.jsx
+++ b/frontend/src/skeuomorphic_ws.jsx
@@ -547,10 +547,6 @@ const getContrastingTextColor = (hex) => getReadableTextColor(hex, { light: '#1f
 const SkeuomorphicWorkspace = ({
   documents = [],
   searchResults = null,
-  breadcrumbs = [],
-  currentFolderName = 'Folder',
-  onExit,
-  onRefresh,
   onDocumentOpen,
   resolveThumbnailUrl,
   onAssignTagToDocument = null,
@@ -560,7 +556,6 @@ const SkeuomorphicWorkspace = ({
   activeTagIds = [],
 }) => {
   const items = useMemo(() => (searchResults ? searchResults : documents), [documents, searchResults]);
-  const showingSearchResults = searchResults !== null;
 
 
   const containerRef = useRef(null);
@@ -1491,20 +1486,6 @@ const SkeuomorphicWorkspace = ({
 
   return (
     <div className="skeuo-shell">
-      <header className="skeuo-header">
-        <div className="skeuo-header__meta">
-          <h2>{currentFolderName}</h2>
-          {showingSearchResults && <span className="meta">Showing search results</span>}
-        </div>
-        <div className="skeuo-header__actions">
-          <button type="button" className="secondary" onClick={onRefresh}>
-            Refresh
-          </button>
-          <button type="button" onClick={onExit}>
-            Back to List
-          </button>
-        </div>
-      </header>
       <div
         className="skeuo-canvas"
         ref={containerRef}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 7f0df53..347b7c9 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -352,39 +352,34 @@ button.danger:hover:not([disabled]) {
   fill: currentColor;
 }
 
+
 .view-toggle {
   display: inline-flex;
   align-items: center;
-  border-radius: 999px;
-  background: var(--surface-subtle);
-  margin-right: 0.5rem;
-  overflow: hidden;
+  gap: 0.25rem;
 }
 
 .view-toggle__button {
-  width: 2.5rem;
-  height: 2.2rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
+  border: 1px solid var(--border);
   background: transparent;
   color: var(--muted);
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
   cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-  padding: 0;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .view-toggle__button:hover,
 .view-toggle__button:focus-visible {
-  background: transparent;
+  background: var(--surface-subtle);
   color: var(--fg);
   outline: none;
 }
 
 .view-toggle__button.active {
-  background: var(--accent-soft, rgba(63, 106, 216, 0.16));
-  color: var(--accent);
+  background: var(--accent);
+  color: var(--on-accent);
+  border-color: var(--accent);
 }
 
 .view-toggle__icon {
@@ -403,35 +398,96 @@ button.danger:hover:not([disabled]) {
 
 .documents-main {
   flex: 1;
-  display: grid;
+  display: flex;
   grid-template-columns: 20rem minmax(0, 1fr);
   min-height: 100vh;
-  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.documents-main--sidebar-collapsed {
+  position: relative;
 }
 
 .main-content {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   min-height: 0;
   margin: 0;
   border-radius: 0;
   background: var(--surface);
-  position: relative;
+  flex-grow: 1;
 }
 
-.documents-main .main-content--documents > * {
+.main-content__header {
+  padding: 0.5rem 1.25rem;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.main-content__body {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  min-height: 0;
+}
+
+.main-content__body > * {
   min-width: 0;
   min-height: 0;
 }
 
-.documents-main .main-content--documents > *:not(.detail-panel) {
+.main-content__body > *:not(.detail-panel) {
   flex: 1 1 auto;
 }
 
-.documents-main .main-content--documents.main-content--has-detail {
+.main-content--has-detail {
   padding-right: var(--detail-panel-width);
 }
 
+.main-content__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--fg);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.main-content__subtitle {
+  font-size: 0.9rem;
+  color: var(--muted);
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+
+.documents-main--sidebar-collapsed {
+  position: relative;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.sidebar .panel-actions .icon,
+.main-content__header .panel-actions .icon,
+.detail-panel .panel-actions .icon {
+  width: 1.35rem;
+  height: 1.35rem;
+}
+
+.main-content__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.main-content__actions-divider {
+  display: inline-flex;
+  align-items: center;
+  color: var(--muted);
+}
+
 .panels-main {
   flex: 1;
   display: flex;
@@ -936,25 +992,26 @@ button.danger:hover:not([disabled]) {
 }
 
 .sidebar {
-  gap: 0.28rem;
+  gap: 0;
   overflow-y: auto;
-  padding: 1.25rem;
   color: var(--sidebar-fg);
   box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
   display: flex;
   flex-direction: column;
+  max-width: 20em;
 }
 
-.sidebar__meta {
+.sidebar__body {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
-  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  gap: 0.75rem;
 }
 
 .sidebar__title {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: 600;
   color: var(--fg);
 }
@@ -968,7 +1025,7 @@ button.danger:hover:not([disabled]) {
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  margin-top: 0.6rem;
+  margin: 0 0 0.75rem;
 }
 
 .sidebar__search input[type='search'] {
@@ -994,10 +1051,6 @@ button.danger:hover:not([disabled]) {
   background: var(--sidebar-hover-bg);
 }
 
-.sidebar__status {
-  margin-top: 0.75rem;
-}
-
 .sidebar__footer {
   margin-top: auto;
   padding-top: 1rem;
@@ -1181,7 +1234,7 @@ button.danger:hover:not([disabled]) {
 
 
 .documents-panel {
-  padding: 1.25rem 1.25rem 0 1.25rem;
+  padding: 0 0.75rem 0.75rem 0.75rem;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -1653,9 +1706,12 @@ button.danger:hover:not([disabled]) {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0.25rem;
   gap: 0.5rem;
-  padding: 0.25rem;
+  padding: 0.5rem;
+}
+
+.panel-body {
+  padding: 0.5rem 1rem;
 }
 
 .panel-actions {
@@ -1664,6 +1720,11 @@ button.danger:hover:not([disabled]) {
   flex-grow: 1;
 }
 
+.panel-actions > h1:first-child,
+.panel-actions > h2:first-child {
+  padding-left: 0.5rem;
+}
+
 .panel-actions .spacer {
   flex-grow: 1;
 }
@@ -2033,7 +2094,6 @@ form.inline {
   padding: 0.45rem 0.8rem;
   border-radius: 2px;
   font-size: 0.85rem;
-  margin-bottom: 0.8rem;
 }
 
 .status-banner.info {
diff --git a/frontend/src/ui/icons.js b/frontend/src/ui/icons.js
index 7cc457c..b8533b6 100644
--- a/frontend/src/ui/icons.js
+++ b/frontend/src/ui/icons.js
@@ -9,10 +9,15 @@ import {
   IconLayoutGrid,
   IconArrowLeft,
   IconArrowRight,
+  IconArrowUp,
   IconChevronsRight,
+  IconChevronsLeft,
   IconAnalyze,
   IconWindowMaximize,
   IconTextScan2,
+  IconFolderPlus,
+  IconRefresh,
+  IconMinusVertical,
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 
@@ -124,6 +129,15 @@ export const ArrowRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest
   />
 );
 
+export const ChevronsLeftIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconChevronsLeft
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
 export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
   <IconChevronsRight
     className={composeClassName('icon', className)}
@@ -133,6 +147,42 @@ export const ChevronsRightIcon = ({ className, size = '1em', stroke = 1.6, ...re
   />
 );
 
+export const FolderPlusIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconFolderPlus
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const RefreshIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconRefresh
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const ArrowUpIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconArrowUp
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
+export const MinusVerticalIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+  <IconMinusVertical
+    className={composeClassName('icon', className)}
+    size={size}
+    stroke={stroke}
+    {...rest}
+  />
+);
+
 export const AnalyzeIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
   <IconAnalyze
     className={composeClassName('icon', className)}
@@ -161,9 +211,14 @@ export default {
   DownloadIcon,
   ViewListIcon,
   ViewGridIcon,
+  ChevronsLeftIcon,
   ChevronsRightIcon,
   AnalyzeIcon,
   WindowMaximizeIcon,
+  FolderPlusIcon,
+  RefreshIcon,
+  ArrowUpIcon,
+  MinusVerticalIcon,
 };
 
 export const TextScanIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (

From 01fb4e308abbea8073b3426be56e1d97ede81423 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 19:46:32 +0100
Subject: [PATCH 12/17] cleanup

---
 frontend/src/index.jsx  |  7 ++++++-
 frontend/src/styles.css | 16 +++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 05d6726..ad0e5d3 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -4714,11 +4714,16 @@ const AppLayout = () => {
   );
 
   if (['logged-out', 'authenticating', 'selecting-tenant'].includes(appStatus)) {
+    const shouldRememberLastLocation = appStatus !== 'logged-out';
     return (
       <Navigate
         to="/account/login"
         replace
-        state={{ from: location.pathname + location.search }}
+        state={
+          shouldRememberLastLocation
+            ? { from: location.pathname + location.search }
+            : undefined
+        }
       />
     );
   }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 347b7c9..20e1097 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -399,7 +399,6 @@ button.danger:hover:not([disabled]) {
 .documents-main {
   flex: 1;
   display: flex;
-  grid-template-columns: 20rem minmax(0, 1fr);
   min-height: 100vh;
   width: 100%;
   position: relative;
@@ -451,9 +450,10 @@ button.danger:hover:not([disabled]) {
   font-size: 1rem;
   font-weight: 600;
   color: var(--fg);
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
 }
 
 .main-content__subtitle {
@@ -461,6 +461,7 @@ button.danger:hover:not([disabled]) {
   color: var(--muted);
   font-weight: 400;
   line-height: 1.2;
+  display: inline-flex;
 }
 
 
@@ -998,7 +999,9 @@ button.danger:hover:not([disabled]) {
   box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
   display: flex;
   flex-direction: column;
+  width: 20em;
   max-width: 20em;
+  flex: 0 0 20em;
 }
 
 .sidebar__body {
@@ -2354,9 +2357,8 @@ form.inline {
 
 .doc-list__name-content span {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .preview-pane__nav-button svg {

From 518b79bec63f20374a26c3fc85350be5c452ce5c Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 20:29:43 +0100
Subject: [PATCH 13/17] stuff

---
 .../correspondents/CorrespondentsPanel.jsx    |  8 ++---
 frontend/src/documents/DocumentsTable.jsx     | 10 +++----
 frontend/src/styles.css                       | 29 +++++++------------
 frontend/src/tags/TagsPanel.jsx               |  8 ++---
 4 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/frontend/src/correspondents/CorrespondentsPanel.jsx b/frontend/src/correspondents/CorrespondentsPanel.jsx
index 46ba941..b1ad5c8 100644
--- a/frontend/src/correspondents/CorrespondentsPanel.jsx
+++ b/frontend/src/correspondents/CorrespondentsPanel.jsx
@@ -119,10 +119,10 @@ function CorrespondentsPanel({
 
   return (
     <section className="correspondents-panel">
-      <div className="column-header">
-        <div className="column-header__titles">
+      <div className="panel-section__header">
+        <div className="panel-section__titles">
           <h2>Correspondents</h2>
-          <div className="column-subtitle">{correspondents.length} total</div>
+          <div className="panel-section__subtitle">{correspondents.length} total</div>
         </div>
         <div className="header-actions correspondents-actions">
           <form className="correspondents-actions__form" onSubmit={handleCreate}>
@@ -147,7 +147,7 @@ function CorrespondentsPanel({
           </button>
         </div>
       </div>
-      <div className="column-body tags-panel__body">
+      <div className="panel-section__body tags-panel__body">
         {correspondents.length === 0 ? (
           <div className="empty-state">No correspondents created yet.</div>
         ) : (
diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 9a23c13..780e22a 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -342,14 +342,14 @@ const DocumentsTable = ({
 
   return (
     <section
-      className={`documents-panel column documents-panel--view-${isGridView ? 'grid' : 'list'}`}
+      className={`documents-panel documents-panel--view-${isGridView ? 'grid' : 'list'}`}
     >
       {showHeader ? (
-        <div className="column-header">
-          <div className="column-header__titles">
+        <div className="panel-section__header">
+          <div className="panel-section__titles">
             <h2>{currentFolderName}</h2>
             {showingSearchResults && (
-              <div className="column-subtitle">Search results</div>
+              <div className="panel-section__subtitle">Search results</div>
             )}
           </div>
           <div className="header-actions">
@@ -399,7 +399,7 @@ const DocumentsTable = ({
           No documents match the current filters.
         </div>
       )}
-      <div className="column-body">
+      <div className="panel-section__body">
         <div
           ref={assignScrollRef}
           className="documents-scroll"
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 20e1097..f91f071 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -848,7 +848,7 @@ button.danger:hover:not([disabled]) {
   font-size: 0.9rem;
 }
 
-.column-header {
+.panel-section__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -856,33 +856,33 @@ button.danger:hover:not([disabled]) {
   padding: 0 0 0.5rem;
 }
 
-.column-header__titles {
+.panel-section__titles {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
 }
 
-.column-header h2 {
+.panel-section__header h2 {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 600;
 }
 
-.column-subtitle {
+.panel-section__subtitle {
   margin-top: 0.25rem;
   font-size: 0.78rem;
   color: var(--muted);
 }
 
-
-.column-body {
+.panel-section__body {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: 0;
 }
 
-.column-body.scrollable {
+.panel-section__body--scrollable,
+.panel-section__body.scrollable {
   overflow-y: auto;
 }
 
@@ -1256,29 +1256,23 @@ button.danger:hover:not([disabled]) {
   outline-offset: 2px;
 }
 
-.documents-panel .column-header {
+.documents-panel .panel-section__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.documents-panel .column-header .header-actions {
+.documents-panel .panel-section__header .header-actions {
   display: flex;
   gap: 0.5rem;
 }
 
-
-.documents-panel .column-body {
+.documents-panel .panel-section__body {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.documents-panel .column-toolbar {
-  flex-shrink: 0;
-  padding-bottom: 0.4rem;
-}
-
 .documents-panel .documents-scroll {
   overflow-y: auto;
   background: transparent;
@@ -2341,9 +2335,6 @@ form.inline {
   opacity: 0.6;
   cursor: default;
 }
-.column-toolbar .filter-bar {
-  margin-bottom: 0;
-}
 .doc-list__name {
   width: 100%;
 }
diff --git a/frontend/src/tags/TagsPanel.jsx b/frontend/src/tags/TagsPanel.jsx
index 0865ab0..867cfb6 100644
--- a/frontend/src/tags/TagsPanel.jsx
+++ b/frontend/src/tags/TagsPanel.jsx
@@ -148,10 +148,10 @@ function TagsPanel({
 
   return (
     <section className="tags-panel">
-      <div className="column-header">
-        <div className="column-header__titles">
+      <div className="panel-section__header">
+        <div className="panel-section__titles">
           <h2>Tags</h2>
-          <div className="column-subtitle">{tags.length} total</div>
+          <div className="panel-section__subtitle">{tags.length} total</div>
         </div>
         <div className="header-actions tags-actions">
           <form className="tags-actions__form" onSubmit={handleCreate}>
@@ -194,7 +194,7 @@ function TagsPanel({
           </button>
         </div>
       </div>
-      <div className="column-body tags-panel__body">
+      <div className="panel-section__body tags-panel__body">
         {tags.length === 0 ? (
           <div className="empty-state">No tags created yet.</div>
         ) : (

From 40e45f3a019186d698ae5a600917ae7aa073f0a2 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 21:01:48 +0100
Subject: [PATCH 14/17] previewzoomoverlay

---
 frontend/src/detail/DetailPanel.jsx        | 387 +-------------------
 frontend/src/detail/PreviewZoomOverlay.jsx | 388 +++++++++++++++++++++
 frontend/src/skeuomorphic_ws.css           |   4 -
 frontend/src/skeuomorphic_ws.jsx           | 240 +++++++------
 4 files changed, 521 insertions(+), 498 deletions(-)
 create mode 100644 frontend/src/detail/PreviewZoomOverlay.jsx

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 4207e86..4dabd2b 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import {
   DownloadIcon,
   EditIcon,
@@ -15,6 +14,7 @@ import { formatFileSize } from '../utils/format';
 import { resolveDocumentAssetUrl, createAssetView } from '../asset_manager';
 import { useAssetNavigator } from '../hooks/useAssetNavigator';
 import { CORRESPONDENT_ROLES } from '../constants/correspondents';
+import PreviewZoomOverlay from './PreviewZoomOverlay';
 
 const MAX_PREVIEW_STACK_ITEMS = 15;
 
@@ -351,35 +351,6 @@ const DetailPanel = ({
   const [ocrLoading, setOcrLoading] = useState(false);
   const [ocrError, setOcrError] = useState(null);
   const [zoomedPreview, setZoomedPreview] = useState(null);
-  const [zoomNative, setZoomNative] = useState(false);
-  const [zoomPan, setZoomPan] = useState({ x: 0, y: 0 });
-  const [isZoomDragging, setIsZoomDragging] = useState(false);
-  const zoomStageRef = useRef(null);
-  const zoomImageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
-  const zoomDragRef = useRef(null);
-  const zoomSkipClickRef = useRef(false);
-
-  const clampPan = useCallback(
-    (x, y) => {
-      const stage = zoomStageRef.current;
-      const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
-      if (!stage || !naturalWidth || !naturalHeight) {
-        return { x: 0, y: 0 };
-      }
-      const stageRect = stage.getBoundingClientRect();
-      if (stageRect.width <= 0 || stageRect.height <= 0) {
-        return { x: 0, y: 0 };
-      }
-      const imageWidth = zoomNative ? naturalWidth : Math.min(naturalWidth, stageRect.width);
-      const imageHeight = zoomNative ? naturalHeight : Math.min(naturalHeight, stageRect.height);
-      const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
-      const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
-      const clampedX = Math.min(Math.max(x, -limitX), limitX);
-      const clampedY = Math.min(Math.max(y, -limitY), limitY);
-      return { x: clampedX, y: clampedY };
-    },
-    [zoomNative],
-  );
 
   useEffect(() => {
     if (!singleDoc) {
@@ -413,51 +384,6 @@ const DetailPanel = ({
     setZoomedPreview(null);
   }, [selectionKey]);
 
-  useEffect(() => {
-    if (!zoomedPreview) {
-      setZoomNative(false);
-      setZoomPan({ x: 0, y: 0 });
-      setIsZoomDragging(false);
-      zoomDragRef.current = null;
-      zoomSkipClickRef.current = false;
-    }
-  }, [zoomedPreview]);
-
-  useEffect(() => {
-    zoomSkipClickRef.current = false;
-    if (zoomNative) {
-      setZoomPan((current) => {
-        const clamped = clampPan(current.x, current.y);
-        if (clamped.x === current.x && clamped.y === current.y) {
-          return current;
-        }
-        return clamped;
-      });
-    } else {
-      setZoomPan({ x: 0, y: 0 });
-      setIsZoomDragging(false);
-      zoomDragRef.current = null;
-    }
-  }, [zoomNative, clampPan]);
-
-  useEffect(() => {
-    if (!zoomNative) {
-      return undefined;
-    }
-    const handleResize = () => {
-      setZoomPan((current) => {
-        const clamped = clampPan(current.x, current.y);
-        if (clamped.x === current.x && clamped.y === current.y) {
-          return current;
-        }
-        return clamped;
-      });
-    };
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, [zoomNative, clampPan]);
-
   const startTitleEdit = useCallback(() => {
     if (!singleDoc) return;
     setTitleEditDocId(singleDoc.id);
@@ -826,22 +752,10 @@ const DetailPanel = ({
       mode: config.mode,
       docId: config.docId ?? null,
     });
-    setZoomNative(false);
-    setZoomPan({ x: 0, y: 0 });
-    setIsZoomDragging(false);
-    zoomDragRef.current = null;
-    zoomSkipClickRef.current = false;
-    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
   }, []);
 
   const closeZoomPreview = useCallback(() => {
     setZoomedPreview(null);
-    setZoomNative(false);
-    setZoomPan({ x: 0, y: 0 });
-    setIsZoomDragging(false);
-    zoomDragRef.current = null;
-    zoomSkipClickRef.current = false;
-    zoomImageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
   }, []);
 
   const handleSingleZoom = useCallback(
@@ -863,160 +777,6 @@ const DetailPanel = ({
     [openZoomPreview, stackTopDocId, topHasPreview],
   );
 
-  const handleZoomImageLoad = useCallback(
-    (event) => {
-      zoomImageMetricsRef.current = {
-        naturalWidth: event.currentTarget.naturalWidth || 0,
-        naturalHeight: event.currentTarget.naturalHeight || 0,
-      };
-      setZoomPan((current) => {
-        const clamped = clampPan(current.x, current.y);
-        return { x: clamped.x, y: clamped.y };
-      });
-    },
-    [clampPan],
-  );
-
-  const handleZoomImageClick = useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (zoomSkipClickRef.current) {
-        zoomSkipClickRef.current = false;
-        return;
-      }
-
-      if (!zoomNative) {
-        const stage = zoomStageRef.current;
-        const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
-        if (stage && naturalWidth && naturalHeight) {
-          const stageRect = stage.getBoundingClientRect();
-          const imageRect = event.currentTarget.getBoundingClientRect();
-          const clickX = event.clientX - imageRect.left;
-          const clickY = event.clientY - imageRect.top;
-          const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
-          const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
-          const focusX = naturalWidth * ratioX;
-          const focusY = naturalHeight * ratioY;
-          const halfWidth = naturalWidth / 2;
-          const halfHeight = naturalHeight / 2;
-          const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
-          const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
-          let targetPanX = -(focusX - halfWidth);
-          let targetPanY = -(focusY - halfHeight);
-          targetPanX = Math.min(Math.max(targetPanX, -limitX), limitX);
-          targetPanY = Math.min(Math.max(targetPanY, -limitY), limitY);
-          setZoomPan({ x: targetPanX, y: targetPanY });
-        } else {
-          setZoomPan({ x: 0, y: 0 });
-        }
-        setZoomNative(true);
-      } else {
-        setZoomNative(false);
-      }
-    },
-    [zoomNative],
-  );
-
-  const handleZoomImagePointerDown = useCallback(
-    (event) => {
-      if (!zoomNative || event.button !== 0) {
-        return;
-      }
-      event.preventDefault();
-      zoomSkipClickRef.current = false;
-      zoomDragRef.current = {
-        pointerId: event.pointerId,
-        originX: zoomPan.x,
-        originY: zoomPan.y,
-        startX: event.clientX,
-        startY: event.clientY,
-        moved: false,
-      };
-      event.currentTarget.setPointerCapture(event.pointerId);
-    },
-    [zoomNative, zoomPan],
-  );
-
-  const handleZoomImagePointerMove = useCallback(
-    (event) => {
-      const drag = zoomDragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-      const deltaX = event.clientX - drag.startX;
-      const deltaY = event.clientY - drag.startY;
-      if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
-        drag.moved = true;
-        setIsZoomDragging(true);
-      }
-      if (drag.moved) {
-        const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
-        setZoomPan((current) =>
-          current.x === clamped.x && current.y === clamped.y ? current : clamped,
-        );
-      }
-    },
-    [clampPan],
-  );
-
-  const endZoomDrag = useCallback(() => {
-    zoomDragRef.current = null;
-    setIsZoomDragging(false);
-  }, []);
-
-  const handleZoomImagePointerUp = useCallback(
-    (event) => {
-      const drag = zoomDragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      zoomSkipClickRef.current = Boolean(drag.moved);
-      endZoomDrag();
-    },
-    [endZoomDrag],
-  );
-
-  const handleZoomImagePointerCancel = useCallback(
-    (event) => {
-      const drag = zoomDragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      zoomSkipClickRef.current = true;
-      endZoomDrag();
-    },
-    [endZoomDrag],
-  );
-
-  const handleZoomStageWheel = useCallback(
-    (event) => {
-      if (!zoomNative) {
-        return;
-      }
-      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
-      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
-      if (!deltaX && !deltaY) {
-        return;
-      }
-      let updated = false;
-      setZoomPan((current) => {
-        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
-        if (clamped.x === current.x && clamped.y === current.y) {
-          return current;
-        }
-        updated = true;
-        return clamped;
-      });
-      if (updated) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [zoomNative, clampPan],
-  );
-
   const zoomDisplay = useMemo(() => {
     if (!zoomedPreview) {
       return null;
@@ -1089,50 +849,6 @@ const DetailPanel = ({
     }
   }, [zoomedPreview, zoomDisplay]);
 
-  const zoomDisplayUrl = zoomDisplay?.url;
-
-  useEffect(() => {
-    if (!zoomDisplayUrl) {
-      return;
-    }
-    setZoomPan((current) => {
-      const clamped = clampPan(current.x, current.y);
-      if (clamped.x === current.x && clamped.y === current.y) {
-        return current;
-      }
-      return clamped;
-    });
-  }, [zoomDisplayUrl, clampPan]);
-
-  useEffect(() => {
-    if (!zoomedPreview) {
-      return undefined;
-    }
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        setZoomedPreview(null);
-        return;
-      }
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        event.stopPropagation();
-        if (zoomDisplay?.canGoPrev) {
-          zoomDisplay.goPrev?.();
-        }
-        return;
-      }
-      if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        event.stopPropagation();
-        if (zoomDisplay?.canGoNext) {
-          zoomDisplay.goNext?.();
-        }
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [zoomedPreview, zoomDisplay]);
-
   useEffect(() => {
     if (typeof ensureAssetUrl !== 'function') {
       return;
@@ -1196,38 +912,6 @@ const DetailPanel = ({
     stackPreviewNavigator.canGoNext,
   ]);
 
-  const zoomImageStyle = useMemo(() => {
-    if (!zoomNative) {
-      return {
-        cursor: 'zoom-in',
-        transform: 'none',
-        maxWidth: '95vw',
-        maxHeight: '95vh',
-      };
-    }
-    const { naturalWidth, naturalHeight } = zoomImageMetricsRef.current;
-    return {
-      cursor: isZoomDragging ? 'grabbing' : 'grab',
-      width: naturalWidth ? `${naturalWidth}px` : 'auto',
-      height: naturalHeight ? `${naturalHeight}px` : 'auto',
-      maxWidth: 'none',
-      maxHeight: 'none',
-      transform: `translate3d(${zoomPan.x}px, ${zoomPan.y}px, 0)`,
-    };
-  }, [zoomNative, zoomPan.x, zoomPan.y, isZoomDragging]);
-
-  const zoomStageClassName = useMemo(
-    () =>
-      [
-        'preview-zoom__stage',
-        zoomNative ? 'preview-zoom__stage--native' : '',
-        isZoomDragging ? 'preview-zoom__stage--dragging' : '',
-      ]
-        .filter(Boolean)
-        .join(' '),
-    [zoomNative, isZoomDragging],
-  );
-
   const renderSingle = () => {
     if (!singleDoc) {
       return <p className="meta">Select a document to view metadata, tags and actions.</p>;
@@ -1662,70 +1346,11 @@ const DetailPanel = ({
         {selectedCount <= 1 ? renderSingle() : renderBulk()}
       </div>
       </aside>
-      {zoomDisplay?.url
-        ? createPortal(
-            <div
-              className="preview-zoom-backdrop"
-              role="dialog"
-              aria-modal="true"
-              aria-label="Enlarged document preview"
-              onClick={closeZoomPreview}
-            >
-              <div
-                ref={zoomStageRef}
-                className={zoomStageClassName}
-                onWheel={handleZoomStageWheel}
-              >
-                <img
-                  src={zoomDisplay.url}
-                  alt={zoomDisplay.alt}
-                  className="preview-zoom__image"
-                  style={zoomImageStyle}
-                  onLoad={handleZoomImageLoad}
-                  onClick={handleZoomImageClick}
-                  onPointerDown={handleZoomImagePointerDown}
-                  onPointerMove={handleZoomImagePointerMove}
-                  onPointerUp={handleZoomImagePointerUp}
-                  onPointerCancel={handleZoomImagePointerCancel}
-                  draggable={false}
-                />
-                {zoomDisplay.canGoPrev || zoomDisplay.canGoNext ? (
-                  <div className="preview-zoom__nav">
-                    <button
-                      type="button"
-                      className="preview-zoom__nav-button"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        if (zoomDisplay.canGoPrev) {
-                          zoomDisplay.goPrev?.();
-                        }
-                      }}
-                      aria-label="Previous preview"
-                      disabled={!zoomDisplay.canGoPrev}
-                    >
-                      <ArrowLeftIcon />
-                    </button>
-                    <button
-                      type="button"
-                      className="preview-zoom__nav-button"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        if (zoomDisplay.canGoNext) {
-                          zoomDisplay.goNext?.();
-                        }
-                      }}
-                      aria-label="Next preview"
-                      disabled={!zoomDisplay.canGoNext}
-                    >
-                      <ArrowRightIcon />
-                    </button>
-                  </div>
-                ) : null}
-              </div>
-            </div>,
-            document.body,
-          )
-        : null}
+      <PreviewZoomOverlay
+        open={Boolean(zoomDisplay?.url)}
+        display={zoomDisplay}
+        onClose={closeZoomPreview}
+      />
     </>
   );
 };
diff --git a/frontend/src/detail/PreviewZoomOverlay.jsx b/frontend/src/detail/PreviewZoomOverlay.jsx
new file mode 100644
index 0000000..1b02046
--- /dev/null
+++ b/frontend/src/detail/PreviewZoomOverlay.jsx
@@ -0,0 +1,388 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
+
+const noop = () => {};
+
+const clamp = (value, min, max) => {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+};
+
+const ensureDocumentRoot = () => {
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  return document.body;
+};
+
+const PreviewZoomOverlay = ({ open = false, display = null, onClose = noop }) => {
+  const portalTarget = ensureDocumentRoot();
+  const isActive = Boolean(open && display?.url && portalTarget);
+
+  const stageRef = useRef(null);
+  const imageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
+  const dragRef = useRef(null);
+  const skipClickRef = useRef(false);
+
+  const [isNativeScale, setIsNativeScale] = useState(false);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const resetInteraction = useCallback(() => {
+    setIsNativeScale(false);
+    setPan({ x: 0, y: 0 });
+    setIsDragging(false);
+    dragRef.current = null;
+    skipClickRef.current = false;
+    imageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      resetInteraction();
+    }
+  }, [open, resetInteraction]);
+
+  useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+    resetInteraction();
+  }, [isActive, display?.url, resetInteraction]);
+
+  const clampPan = useCallback(
+    (x, y) => {
+      const stage = stageRef.current;
+      const { naturalWidth, naturalHeight } = imageMetricsRef.current;
+      if (!stage || !naturalWidth || !naturalHeight) {
+        return { x: 0, y: 0 };
+      }
+
+      const stageRect = stage.getBoundingClientRect();
+      if (stageRect.width <= 0 || stageRect.height <= 0) {
+        return { x: 0, y: 0 };
+      }
+
+      const imageWidth = isNativeScale
+        ? naturalWidth
+        : Math.min(naturalWidth, stageRect.width);
+      const imageHeight = isNativeScale
+        ? naturalHeight
+        : Math.min(naturalHeight, stageRect.height);
+
+      const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
+      const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
+
+      return {
+        x: clamp(x, -limitX, limitX),
+        y: clamp(y, -limitY, limitY),
+      };
+    },
+    [isNativeScale],
+  );
+
+  const handleBackdropClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const handleStageClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
+  const handleImageLoad = useCallback(
+    (event) => {
+      imageMetricsRef.current = {
+        naturalWidth: event.currentTarget.naturalWidth || 0,
+        naturalHeight: event.currentTarget.naturalHeight || 0,
+      };
+      setPan((current) => {
+        const clamped = clampPan(current.x, current.y);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        return clamped;
+      });
+    },
+    [clampPan],
+  );
+
+  const handleImageClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (skipClickRef.current) {
+        skipClickRef.current = false;
+        return;
+      }
+
+      if (!isNativeScale) {
+        const stage = stageRef.current;
+        const { naturalWidth, naturalHeight } = imageMetricsRef.current;
+        if (stage && naturalWidth && naturalHeight) {
+          const stageRect = stage.getBoundingClientRect();
+          const imageRect = event.currentTarget.getBoundingClientRect();
+          const clickX = event.clientX - imageRect.left;
+          const clickY = event.clientY - imageRect.top;
+          const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
+          const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
+          const focusX = naturalWidth * ratioX;
+          const focusY = naturalHeight * ratioY;
+          const halfWidth = naturalWidth / 2;
+          const halfHeight = naturalHeight / 2;
+          const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
+          const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
+          const targetPanX = clamp(-(focusX - halfWidth), -limitX, limitX);
+          const targetPanY = clamp(-(focusY - halfHeight), -limitY, limitY);
+          setPan({ x: targetPanX, y: targetPanY });
+        } else {
+          setPan({ x: 0, y: 0 });
+        }
+        setIsNativeScale(true);
+      } else {
+        setIsNativeScale(false);
+      }
+    },
+    [isNativeScale],
+  );
+
+  const endDrag = useCallback(() => {
+    dragRef.current = null;
+    setIsDragging(false);
+  }, []);
+
+  const handlePointerDown = useCallback(
+    (event) => {
+      if (!isNativeScale || event.button !== 0) {
+        return;
+      }
+
+      event.preventDefault();
+      skipClickRef.current = false;
+      dragRef.current = {
+        pointerId: event.pointerId,
+        originX: pan.x,
+        originY: pan.y,
+        startX: event.clientX,
+        startY: event.clientY,
+        moved: false,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [isNativeScale, pan.x, pan.y],
+  );
+
+  const handlePointerMove = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+
+      const deltaX = event.clientX - drag.startX;
+      const deltaY = event.clientY - drag.startY;
+      if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
+        drag.moved = true;
+        setIsDragging(true);
+      }
+      if (drag.moved) {
+        const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
+        setPan((current) =>
+          current.x === clamped.x && current.y === clamped.y ? current : clamped,
+        );
+      }
+    },
+    [clampPan],
+  );
+
+  const handlePointerUp = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      skipClickRef.current = Boolean(drag.moved);
+      endDrag();
+    },
+    [endDrag],
+  );
+
+  const handlePointerCancel = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      skipClickRef.current = true;
+      endDrag();
+    },
+    [endDrag],
+  );
+
+  const handleWheel = useCallback(
+    (event) => {
+      if (!isNativeScale) {
+        return;
+      }
+      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
+      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
+      if (!deltaX && !deltaY) {
+        return;
+      }
+      let updated = false;
+      setPan((current) => {
+        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
+        if (clamped.x === current.x && clamped.y === current.y) {
+          return current;
+        }
+        updated = true;
+        return clamped;
+      });
+      if (updated) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [isNativeScale, clampPan],
+  );
+
+  useEffect(() => {
+    if (!isActive) {
+      return undefined;
+    }
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (display?.canGoPrev && display?.goPrev) {
+          display.goPrev();
+        }
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        event.stopPropagation();
+        if (display?.canGoNext && display?.goNext) {
+          display.goNext();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isActive, display, onClose]);
+
+  const imageStyle = useMemo(() => {
+    if (!isNativeScale) {
+      return {
+        cursor: 'zoom-in',
+        transform: 'none',
+        maxWidth: '95vw',
+        maxHeight: '95vh',
+      };
+    }
+
+    const { naturalWidth, naturalHeight } = imageMetricsRef.current;
+    return {
+      cursor: isDragging ? 'grabbing' : 'grab',
+      width: naturalWidth ? `${naturalWidth}px` : 'auto',
+      height: naturalHeight ? `${naturalHeight}px` : 'auto',
+      maxWidth: 'none',
+      maxHeight: 'none',
+      transform: `translate3d(${pan.x}px, ${pan.y}px, 0)`,
+    };
+  }, [isNativeScale, pan.x, pan.y, isDragging]);
+
+  const stageClassName = useMemo(
+    () =>
+      [
+        'preview-zoom__stage',
+        isNativeScale ? 'preview-zoom__stage--native' : '',
+        isDragging ? 'preview-zoom__stage--dragging' : '',
+      ]
+        .filter(Boolean)
+        .join(' '),
+    [isNativeScale, isDragging],
+  );
+
+  if (!isActive) {
+    return null;
+  }
+
+  return createPortal(
+    (
+      <div
+        className="preview-zoom-backdrop"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Enlarged document preview"
+        onClick={handleBackdropClick}
+      >
+        <div
+          ref={stageRef}
+          className={stageClassName}
+          onClick={handleStageClick}
+          onWheel={handleWheel}
+        >
+          <img
+            src={display?.url}
+            alt={display?.alt || 'Document preview'}
+            className="preview-zoom__image"
+            style={imageStyle}
+            onLoad={handleImageLoad}
+            onClick={handleImageClick}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerCancel}
+            draggable={false}
+          />
+          <div className="preview-zoom__nav">
+            <button
+              type="button"
+              className="preview-zoom__nav-button"
+              onClick={(event) => {
+                event.stopPropagation();
+                if (display?.goPrev) {
+                  display.goPrev();
+                }
+              }}
+              aria-label="Previous preview"
+              disabled={!display?.canGoPrev}
+            >
+              <ArrowLeftIcon />
+            </button>
+            <button
+              type="button"
+              className="preview-zoom__nav-button"
+              onClick={(event) => {
+                event.stopPropagation();
+                if (display?.goNext) {
+                  display.goNext();
+                }
+              }}
+              aria-label="Next preview"
+              disabled={!display?.canGoNext}
+            >
+              <ArrowRightIcon />
+            </button>
+          </div>
+        </div>
+      </div>
+    ),
+    portalTarget,
+  );
+};
+
+export default PreviewZoomOverlay;
diff --git a/frontend/src/skeuomorphic_ws.css b/frontend/src/skeuomorphic_ws.css
index ff0da1a..992ef54 100644
--- a/frontend/src/skeuomorphic_ws.css
+++ b/frontend/src/skeuomorphic_ws.css
@@ -68,10 +68,6 @@
   transition: none;
 }
 
-.skeuo-item.is-zoomed {
-  cursor: pointer;
-}
-
 .skeuo-item.is-tag-target .skeuo-item__card {
   outline: 1em dashed var(--accent);
   outline-offset: 1.41em;
diff --git a/frontend/src/skeuomorphic_ws.jsx b/frontend/src/skeuomorphic_ws.jsx
index 39a580a..b5bd2e4 100644
--- a/frontend/src/skeuomorphic_ws.jsx
+++ b/frontend/src/skeuomorphic_ws.jsx
@@ -9,6 +9,7 @@ import React, {
 import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
 import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
+import PreviewZoomOverlay from './detail/PreviewZoomOverlay';
 import { getReadableTextColor } from './utils/colors';
 import './skeuomorphic_ws.css';
 
@@ -28,9 +29,6 @@ const resolveSizeKey = (doc) =>
 const CARD_MIN = 240;
 const CARD_MAX = 340;
 const EMPTY_CARD_ASPECT = 1.4;
-const ZOOM_FILL_RATIO = 0.99;
-const ZOOM_MIN_SCALE = 1.05;
-const ZOOM_MAX_SCALE = 5;
 const TAG_REMOVE_DISTANCE = 160;
 
 const DEBUG_DRAG = false;
@@ -52,6 +50,7 @@ const SkeuoPreviewCard = ({
   getDocumentAsset,
   navScale = 1,
   prefetch = 3,
+  onNavigatorSnapshot,
 }) => {
   const navigator = useAssetNavigator({
     document: doc,
@@ -62,6 +61,32 @@ const SkeuoPreviewCard = ({
   });
 
   const { currentUrl, cardinality, canGoPrev, canGoNext } = navigator;
+  const docId = doc?.id ?? null;
+
+  useEffect(() => {
+    if (!onNavigatorSnapshot || !docId) {
+      return undefined;
+    }
+    const snapshot = {
+      url: currentUrl || null,
+      alt: title,
+      canGoPrev,
+      canGoNext,
+      goPrev: navigator.goPrev,
+      goNext: navigator.goNext,
+    };
+    onNavigatorSnapshot(docId, snapshot);
+    return () => onNavigatorSnapshot(docId, null);
+  }, [
+    docId,
+    currentUrl,
+    title,
+    canGoPrev,
+    canGoNext,
+    navigator.goPrev,
+    navigator.goNext,
+    onNavigatorSnapshot,
+  ]);
   const hasPreview = Boolean(currentUrl);
   const cardClasses = ['skeuo-item__card'];
   if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
@@ -303,7 +328,7 @@ const useDocumentDrag = ({
   setDraggingId,
   syncLayoutSnapshot,
   canvasSize,
-  toggleZoom,
+  openOverlayForDoc,
 }) => {
   const dragStateRef = useRef(null);
 
@@ -330,7 +355,7 @@ const useDocumentDrag = ({
   );
 
   const handlePointerDown = useCallback(
-    (event, docId, { lockWhenZoomed = false } = {}) => {
+    (event, docId) => {
       if (DEBUG_DRAG) {
         console.log(
           '[skeuo] handlePointerDown fired for doc',
@@ -376,7 +401,7 @@ const useDocumentDrag = ({
         startY: event.clientY,
         rotation: entry?.rotation ?? 0,
         moved: false,
-        locked: Boolean(lockWhenZoomed),
+        locked: false,
         width: docWidth,
         height: docHeight,
         scale: baseScale,
@@ -475,13 +500,13 @@ const useDocumentDrag = ({
         const docId = state.docId;
         finishDrag(event.pointerId);
         if (!moved) {
-          toggleZoom(docId);
+          openOverlayForDoc(docId);
         }
         return;
       }
       finishDrag(event.pointerId);
     },
-    [finishDrag, toggleZoom],
+    [finishDrag, openOverlayForDoc],
   );
 
   const handlePointerCancel = useCallback(
@@ -567,7 +592,8 @@ const SkeuomorphicWorkspace = ({
 
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
   const [draggingId, setDraggingId] = useState(null);
-  const [zoomedId, setZoomedId] = useState(null);
+  const [overlayDocId, setOverlayDocId] = useState(null);
+  const [previewSnapshots, setPreviewSnapshots] = useState(() => new Map());
   const [tagDropTargetId, setTagDropTargetId] = useState(null);
   const [pendingTagDocId, setPendingTagDocId] = useState(null);
   const [pendingRemovalTag, setPendingRemovalTag] = useState(null);
@@ -575,6 +601,36 @@ const SkeuomorphicWorkspace = ({
   const pendingDocTagDragRef = useRef(null);
   const docSizeMapRef = useRef(new Map());
   const removalCursorActiveRef = useRef(false);
+  const handleNavigatorSnapshot = useCallback((docId, snapshot) => {
+    if (!docId) {
+      return;
+    }
+    setPreviewSnapshots((previous) => {
+      const prevSnapshot = previous.get(docId);
+      if (!snapshot) {
+        if (!previous.has(docId)) {
+          return previous;
+        }
+        const next = new Map(previous);
+        next.delete(docId);
+        return next;
+      }
+      const next = new Map(previous);
+      const sameSnapshot =
+        prevSnapshot &&
+        prevSnapshot.url === snapshot.url &&
+        prevSnapshot.alt === snapshot.alt &&
+        prevSnapshot.canGoPrev === snapshot.canGoPrev &&
+        prevSnapshot.canGoNext === snapshot.canGoNext &&
+        prevSnapshot.goPrev === snapshot.goPrev &&
+        prevSnapshot.goNext === snapshot.goNext;
+      if (sameSnapshot) {
+        return previous;
+      }
+      next.set(docId, snapshot);
+      return next;
+    });
+  }, []);
   const activeTagSet = useMemo(() => {
     if (!Array.isArray(activeTagIds) || activeTagIds.length === 0) {
       return new Set();
@@ -774,70 +830,35 @@ const SkeuomorphicWorkspace = ({
     docSizeMapRef.current = new Map();
   }, [items]);
 
-  const resolveZoomMetrics = useCallback(
-    (doc, cardWidth, cardHeight) => {
-      const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
-      const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
-      const safeCardWidth = cardWidth || CARD_MIN;
-      const safeCardHeight = cardHeight || CARD_MIN;
-      const usableWidth = Math.max(canvasWidth - CANVAS_PADDING * 2, safeCardWidth);
-      const usableHeight = Math.max(canvasHeight - CANVAS_PADDING * 2, safeCardHeight);
-      const viewportTargetWidth = usableWidth * ZOOM_FILL_RATIO;
-      const viewportTargetHeight = usableHeight * ZOOM_FILL_RATIO;
+  const overlayDisplay = useMemo(() => {
+    if (!overlayDocId) {
+      return null;
+    }
+    const snapshot = previewSnapshots.get(overlayDocId);
+    if (!snapshot || !snapshot.url) {
+      return null;
+    }
+    const doc = documentLookup.get(overlayDocId);
+    const alt = snapshot.alt || doc?.title || doc?.original_name || 'Document preview';
+    return {
+      url: snapshot.url,
+      alt,
+      canGoPrev: snapshot.canGoPrev,
+      canGoNext: snapshot.canGoNext,
+      goPrev: snapshot.goPrev,
+      goNext: snapshot.goNext,
+    };
+  }, [overlayDocId, previewSnapshots, documentLookup]);
 
-      let zoomWidth = safeCardWidth;
-      let zoomHeight = safeCardHeight;
+  const closeOverlay = useCallback(() => {
+    setOverlayDocId(null);
+  }, []);
 
-      const previewDims = doc ? resolvePreviewDimensions(doc) : null;
-      if (previewDims?.width && previewDims?.height) {
-        const previewWidth = previewDims.width;
-        const previewHeight = previewDims.height;
-        const widthScaleLimit = previewWidth > 0 ? viewportTargetWidth / previewWidth : 1;
-        const heightScaleLimit = previewHeight > 0 ? viewportTargetHeight / previewHeight : 1;
-        const scaleToFit = Math.min(1, widthScaleLimit || 1, heightScaleLimit || 1);
-        zoomWidth = previewWidth * scaleToFit;
-        zoomHeight = previewHeight * scaleToFit;
-      } else {
-        const rawScale = Math.min(
-          viewportTargetWidth / safeCardWidth,
-          viewportTargetHeight / safeCardHeight,
-        );
-        const boundedScale =
-          rawScale >= 1
-            ? clamp(Math.max(rawScale, ZOOM_MIN_SCALE), ZOOM_MIN_SCALE, ZOOM_MAX_SCALE)
-            : rawScale;
-        zoomWidth = safeCardWidth * boundedScale;
-        zoomHeight = safeCardHeight * boundedScale;
-      }
-
-      if (!Number.isFinite(zoomWidth) || zoomWidth <= 0) {
-        zoomWidth = safeCardWidth;
-      }
-      if (!Number.isFinite(zoomHeight) || zoomHeight <= 0) {
-        zoomHeight = safeCardHeight;
-      }
-
-      zoomWidth = Math.max(zoomWidth, safeCardWidth);
-      zoomHeight = Math.max(zoomHeight, safeCardHeight);
-
-      const zoomTargetX = (canvasWidth - zoomWidth) / 2;
-      const zoomTargetY = (canvasHeight - zoomHeight) / 2;
-      const maxX = Math.max(CANVAS_PADDING, canvasWidth - zoomWidth - CANVAS_PADDING);
-      const maxY = Math.max(CANVAS_PADDING, canvasHeight - zoomHeight - CANVAS_PADDING);
-      const clampedX = clamp(zoomTargetX, CANVAS_PADDING, maxX);
-      const clampedY = clamp(zoomTargetY, CANVAS_PADDING, maxY);
-      const zoomCenterX = clampedX + zoomWidth / 2;
-      const zoomCenterY = clampedY + zoomHeight / 2;
-
-      return {
-        zoomWidth,
-        zoomHeight,
-        zoomCenterX,
-        zoomCenterY,
-      };
-    },
-    [canvasSize.width, canvasSize.height, resolvePreviewDimensions],
-  );
+  useEffect(() => {
+    if (overlayDocId && !documentLookup.has(overlayDocId)) {
+      setOverlayDocId(null);
+    }
+  }, [overlayDocId, documentLookup]);
 
   const resolveBaseMetrics = useCallback(
     (doc, cardWidth, cardHeight) => {
@@ -1009,17 +1030,19 @@ const SkeuomorphicWorkspace = ({
     [syncLayoutSnapshot],
   );
 
-  const toggleZoom = useCallback(
+  const openOverlayForDoc = useCallback(
     (docId) => {
-      setZoomedId((current) => {
-        if (current === docId) {
-          return null;
-        }
-        bringToFront(docId);
-        return docId;
-      });
+      if (!docId) {
+        return;
+      }
+      const snapshot = previewSnapshots.get(docId);
+      if (!snapshot || !snapshot.url) {
+        return;
+      }
+      bringToFront(docId);
+      setOverlayDocId(docId);
     },
-    [bringToFront],
+    [bringToFront, previewSnapshots],
   );
   const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
     layoutRef,
@@ -1031,7 +1054,7 @@ const SkeuomorphicWorkspace = ({
     setDraggingId,
     syncLayoutSnapshot,
     canvasSize,
-    toggleZoom,
+    openOverlayForDoc,
   });
 
   const handleTagDragEnterDoc = useCallback(
@@ -1485,14 +1508,15 @@ const SkeuomorphicWorkspace = ({
   );
 
   return (
-    <div className="skeuo-shell">
-      <div
-        className="skeuo-canvas"
-        ref={containerRef}
-        onDragOver={handleCanvasDragOver}
-        onDragLeave={handleCanvasDragLeave}
-        onDrop={handleCanvasDrop}
-      >
+    <>
+      <div className="skeuo-shell">
+        <div
+          className="skeuo-canvas"
+          ref={containerRef}
+          onDragOver={handleCanvasDragOver}
+          onDragLeave={handleCanvasDragLeave}
+          onDrop={handleCanvasDrop}
+        >
         {items.length === 0 ? (
           <div className="skeuo-empty">
             <p>No documents to show here yet. Drop files to make this space come alive.</p>
@@ -1513,31 +1537,17 @@ const SkeuomorphicWorkspace = ({
               typeof layout.centerX === 'number' ? layout.centerX : fallbackLayout.centerX;
             const layoutCenterY =
               typeof layout.centerY === 'number' ? layout.centerY : fallbackLayout.centerY;
-            const isZoomed = zoomedId === doc.id;
-            const { zoomWidth, zoomHeight, zoomCenterX, zoomCenterY } = resolveZoomMetrics(
-              doc,
-              cardWidth,
-              cardHeight,
-            );
-            const targetCenterX = isZoomed ? zoomCenterX : layoutCenterX;
-            const targetCenterY = isZoomed ? zoomCenterY : layoutCenterY;
-            const rotation = isZoomed ? 0 : layout.rotation || 0;
-            const zoomScale = isZoomed
-              ? Math.min(
-                  1,
-                  Number.isFinite(zoomWidth / baseWidth) ? zoomWidth / baseWidth : 1,
-                  Number.isFinite(zoomHeight / baseHeight) ? zoomHeight / baseHeight : 1,
-                )
-              : baseScale;
+            const rotation = layout.rotation || 0;
+            const zoomScale = baseScale;
             const transform = formatTransform(
-              Math.round(targetCenterX),
-              Math.round(targetCenterY),
+              Math.round(layoutCenterX),
+              Math.round(layoutCenterY),
               rotation,
               zoomScale,
             );
             const style = {
               transform,
-              zIndex: isZoomed ? 9999 : layout.z ?? 1,
+              zIndex: layout.z ?? 1,
             };
             const bodyStyle = {
               width: Math.round(baseWidth),
@@ -1558,7 +1568,6 @@ const SkeuomorphicWorkspace = ({
             const dropPending = pendingTagDocId === doc.id;
             const itemClasses = ['skeuo-item'];
             if (dragging) itemClasses.push('is-dragging');
-            if (isZoomed) itemClasses.push('is-zoomed');
             if (dropActive) itemClasses.push('is-tag-target');
             if (dropPending) itemClasses.push('is-tag-pending');
             if (!matchesFilter) itemClasses.push('is-filtered-out');
@@ -1579,9 +1588,7 @@ const SkeuomorphicWorkspace = ({
                     itemRefs.current.delete(doc.id);
                   }
                 }}
-                onPointerDown={(event) =>
-                  handlePointerDown(event, doc.id, { lockWhenZoomed: isZoomed })
-                }
+                onPointerDown={(event) => handlePointerDown(event, doc.id)}
                 onPointerMove={handlePointerMove}
                 onPointerUp={handlePointerUp}
                 onPointerCancel={handlePointerCancel}
@@ -1603,6 +1610,7 @@ const SkeuomorphicWorkspace = ({
                     ensureAssetUrl={ensureAssetUrl}
                     getDocumentAsset={getDocumentAsset}
                     navScale={inverseTagScale}
+                    onNavigatorSnapshot={handleNavigatorSnapshot}
                   />
                   {tags.length > 0 && (
                     <div className="skeuo-item__tags" aria-hidden="true" style={tagsStyle}>
@@ -1648,8 +1656,14 @@ const SkeuomorphicWorkspace = ({
             );
           })
         )}
+        </div>
       </div>
-    </div>
+      <PreviewZoomOverlay
+        open={Boolean(overlayDisplay?.url)}
+        display={overlayDisplay}
+        onClose={closeOverlay}
+      />
+    </>
   );
 };
 

From 970678986aa78f327b8e1f1772682dc2cdf3bf25 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Sun, 26 Oct 2025 23:15:12 +0100
Subject: [PATCH 15/17] sidebar shadow

---
 frontend/src/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f91f071..efe4bb3 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -416,6 +416,7 @@ button.danger:hover:not([disabled]) {
   border-radius: 0;
   background: var(--surface);
   flex-grow: 1;
+  box-shadow: -12px 0 24px -12px var(--shadow-faint);
 }
 
 .main-content__header {
@@ -996,7 +997,6 @@ button.danger:hover:not([disabled]) {
   gap: 0;
   overflow-y: auto;
   color: var(--sidebar-fg);
-  box-shadow: inset -12px 0 24px -12px var(--shadow-faint);
   display: flex;
   flex-direction: column;
   width: 20em;

From 10e28cc5e2680cbd22593459fa7b62e73585c0ce Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 27 Oct 2025 00:14:10 +0100
Subject: [PATCH 16/17] previewzoomoverlay

---
 frontend/src/detail/PreviewZoomOverlay.jsx | 516 ++++++++-------------
 frontend/src/skeuomorphic_ws.jsx           |  63 ++-
 frontend/src/styles.css                    |  34 +-
 3 files changed, 275 insertions(+), 338 deletions(-)

diff --git a/frontend/src/detail/PreviewZoomOverlay.jsx b/frontend/src/detail/PreviewZoomOverlay.jsx
index 1b02046..d07b23a 100644
--- a/frontend/src/detail/PreviewZoomOverlay.jsx
+++ b/frontend/src/detail/PreviewZoomOverlay.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ArrowLeftIcon, ArrowRightIcon } from '../ui/icons';
 
@@ -17,308 +17,154 @@ const ensureDocumentRoot = () => {
   return document.body;
 };
 
-const PreviewZoomOverlay = ({ open = false, display = null, onClose = noop }) => {
+const PreviewZoomOverlay = ({
+  open = false,
+  display = null,
+  onClose = noop,
+}) => {
   const portalTarget = ensureDocumentRoot();
-  const isActive = Boolean(open && display?.url && portalTarget);
-
-  const stageRef = useRef(null);
-  const imageMetricsRef = useRef({ naturalWidth: 0, naturalHeight: 0 });
-  const dragRef = useRef(null);
-  const skipClickRef = useRef(false);
-
   const [isNativeScale, setIsNativeScale] = useState(false);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = useState(false);
+  const [naturalSize, setNaturalSize] = useState({ width: null, height: null });
+  const scrollRef = useRef(null);
+  const imageRef = useRef(null);
+  const focusRef = useRef(null);
+  const previouslyFocusedRef = useRef(null);
 
-  const resetInteraction = useCallback(() => {
+  useEffect(() => {
     setIsNativeScale(false);
-    setPan({ x: 0, y: 0 });
-    setIsDragging(false);
-    dragRef.current = null;
-    skipClickRef.current = false;
-    imageMetricsRef.current = { naturalWidth: 0, naturalHeight: 0 };
-  }, []);
+    setNaturalSize({ width: null, height: null });
+    focusRef.current = null;
+    const scrollEl = scrollRef.current;
+    if (scrollEl) {
+      scrollEl.scrollLeft = 0;
+      scrollEl.scrollTop = 0;
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || !isNativeScale) {
+      return;
+    }
+
+    const scrollEl = scrollRef.current;
+    const imageEl = imageRef.current;
+    if (!scrollEl || !imageEl) {
+      return;
+    }
+
+    const imageWidth = imageEl.naturalWidth || imageEl.clientWidth;
+    const imageHeight = imageEl.naturalHeight || imageEl.clientHeight;
+    if (!(imageWidth > 0 && imageHeight > 0)) {
+      return;
+    }
+
+    const target = focusRef.current || { xRatio: 0.5, yRatio: 0.5 };
+    const maxScrollLeft = Math.max(0, imageWidth - scrollEl.clientWidth);
+    const maxScrollTop = Math.max(0, imageHeight - scrollEl.clientHeight);
+
+    const desiredLeft = target.xRatio * imageWidth - scrollEl.clientWidth / 2;
+    const desiredTop = target.yRatio * imageHeight - scrollEl.clientHeight / 2;
+
+    scrollEl.scrollLeft = clamp(desiredLeft, 0, maxScrollLeft);
+    scrollEl.scrollTop = clamp(desiredTop, 0, maxScrollTop);
+  }, [open, isNativeScale, naturalSize.width, naturalSize.height]);
 
   useEffect(() => {
     if (!open) {
-      resetInteraction();
-    }
-  }, [open, resetInteraction]);
-
-  useEffect(() => {
-    if (!isActive) {
-      return;
-    }
-    resetInteraction();
-  }, [isActive, display?.url, resetInteraction]);
-
-  const clampPan = useCallback(
-    (x, y) => {
-      const stage = stageRef.current;
-      const { naturalWidth, naturalHeight } = imageMetricsRef.current;
-      if (!stage || !naturalWidth || !naturalHeight) {
-        return { x: 0, y: 0 };
+      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === 'function') {
+        previouslyFocusedRef.current.focus();
       }
-
-      const stageRect = stage.getBoundingClientRect();
-      if (stageRect.width <= 0 || stageRect.height <= 0) {
-        return { x: 0, y: 0 };
-      }
-
-      const imageWidth = isNativeScale
-        ? naturalWidth
-        : Math.min(naturalWidth, stageRect.width);
-      const imageHeight = isNativeScale
-        ? naturalHeight
-        : Math.min(naturalHeight, stageRect.height);
-
-      const limitX = Math.max(0, (imageWidth - stageRect.width) / 2);
-      const limitY = Math.max(0, (imageHeight - stageRect.height) / 2);
-
-      return {
-        x: clamp(x, -limitX, limitX),
-        y: clamp(y, -limitY, limitY),
-      };
-    },
-    [isNativeScale],
-  );
-
-  const handleBackdropClick = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  const handleStageClick = useCallback((event) => {
-    event.stopPropagation();
-  }, []);
-
-  const handleImageLoad = useCallback(
-    (event) => {
-      imageMetricsRef.current = {
-        naturalWidth: event.currentTarget.naturalWidth || 0,
-        naturalHeight: event.currentTarget.naturalHeight || 0,
-      };
-      setPan((current) => {
-        const clamped = clampPan(current.x, current.y);
-        if (clamped.x === current.x && clamped.y === current.y) {
-          return current;
-        }
-        return clamped;
-      });
-    },
-    [clampPan],
-  );
-
-  const handleImageClick = useCallback(
-    (event) => {
-      event.stopPropagation();
-      if (skipClickRef.current) {
-        skipClickRef.current = false;
-        return;
-      }
-
-      if (!isNativeScale) {
-        const stage = stageRef.current;
-        const { naturalWidth, naturalHeight } = imageMetricsRef.current;
-        if (stage && naturalWidth && naturalHeight) {
-          const stageRect = stage.getBoundingClientRect();
-          const imageRect = event.currentTarget.getBoundingClientRect();
-          const clickX = event.clientX - imageRect.left;
-          const clickY = event.clientY - imageRect.top;
-          const ratioX = imageRect.width ? clickX / imageRect.width : 0.5;
-          const ratioY = imageRect.height ? clickY / imageRect.height : 0.5;
-          const focusX = naturalWidth * ratioX;
-          const focusY = naturalHeight * ratioY;
-          const halfWidth = naturalWidth / 2;
-          const halfHeight = naturalHeight / 2;
-          const limitX = Math.max(0, (naturalWidth - stageRect.width) / 2);
-          const limitY = Math.max(0, (naturalHeight - stageRect.height) / 2);
-          const targetPanX = clamp(-(focusX - halfWidth), -limitX, limitX);
-          const targetPanY = clamp(-(focusY - halfHeight), -limitY, limitY);
-          setPan({ x: targetPanX, y: targetPanY });
-        } else {
-          setPan({ x: 0, y: 0 });
-        }
-        setIsNativeScale(true);
-      } else {
-        setIsNativeScale(false);
-      }
-    },
-    [isNativeScale],
-  );
-
-  const endDrag = useCallback(() => {
-    dragRef.current = null;
-    setIsDragging(false);
-  }, []);
-
-  const handlePointerDown = useCallback(
-    (event) => {
-      if (!isNativeScale || event.button !== 0) {
-        return;
-      }
-
-      event.preventDefault();
-      skipClickRef.current = false;
-      dragRef.current = {
-        pointerId: event.pointerId,
-        originX: pan.x,
-        originY: pan.y,
-        startX: event.clientX,
-        startY: event.clientY,
-        moved: false,
-      };
-      event.currentTarget.setPointerCapture(event.pointerId);
-    },
-    [isNativeScale, pan.x, pan.y],
-  );
-
-  const handlePointerMove = useCallback(
-    (event) => {
-      const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-
-      const deltaX = event.clientX - drag.startX;
-      const deltaY = event.clientY - drag.startY;
-      if (!drag.moved && (Math.abs(deltaX) > 2 || Math.abs(deltaY) > 2)) {
-        drag.moved = true;
-        setIsDragging(true);
-      }
-      if (drag.moved) {
-        const clamped = clampPan(drag.originX + deltaX, drag.originY + deltaY);
-        setPan((current) =>
-          current.x === clamped.x && current.y === clamped.y ? current : clamped,
-        );
-      }
-    },
-    [clampPan],
-  );
-
-  const handlePointerUp = useCallback(
-    (event) => {
-      const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      skipClickRef.current = Boolean(drag.moved);
-      endDrag();
-    },
-    [endDrag],
-  );
-
-  const handlePointerCancel = useCallback(
-    (event) => {
-      const drag = dragRef.current;
-      if (!drag || drag.pointerId !== event.pointerId) {
-        return;
-      }
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      skipClickRef.current = true;
-      endDrag();
-    },
-    [endDrag],
-  );
-
-  const handleWheel = useCallback(
-    (event) => {
-      if (!isNativeScale) {
-        return;
-      }
-      const deltaX = Number.isFinite(event.deltaX) ? event.deltaX : 0;
-      const deltaY = Number.isFinite(event.deltaY) ? event.deltaY : 0;
-      if (!deltaX && !deltaY) {
-        return;
-      }
-      let updated = false;
-      setPan((current) => {
-        const clamped = clampPan(current.x - deltaX, current.y - deltaY);
-        if (clamped.x === current.x && clamped.y === current.y) {
-          return current;
-        }
-        updated = true;
-        return clamped;
-      });
-      if (updated) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [isNativeScale, clampPan],
-  );
-
-  useEffect(() => {
-    if (!isActive) {
+      previouslyFocusedRef.current = null;
       return undefined;
     }
 
-    const handleKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-        return;
+    if (typeof document !== 'undefined') {
+      const active = document.activeElement;
+      if (active && typeof active.focus === 'function') {
+        previouslyFocusedRef.current = active;
+      } else {
+        previouslyFocusedRef.current = null;
       }
+    }
 
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        event.stopPropagation();
-        if (display?.canGoPrev && display?.goPrev) {
-          display.goPrev();
-        }
-        return;
-      }
+    const scrollEl = scrollRef.current;
+    if (!scrollEl) {
+      return undefined;
+    }
 
-      if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        event.stopPropagation();
-        if (display?.canGoNext && display?.goNext) {
-          display.goNext();
-        }
+    const frame = requestAnimationFrame(() => {
+      scrollEl.focus();
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === 'function') {
+        previouslyFocusedRef.current.focus();
+        previouslyFocusedRef.current = null;
       }
     };
+  }, [open]);
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isActive, display, onClose]);
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
 
-  const imageStyle = useMemo(() => {
-    if (!isNativeScale) {
-      return {
+    if (!open) {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+
+    if (event.key === 'ArrowLeft') {
+      if (display?.canGoPrev && display?.goPrev) {
+        event.preventDefault();
+        display.goPrev();
+      }
+      return;
+    }
+
+    if (event.key === 'ArrowRight') {
+      if (display?.canGoNext && display?.goNext) {
+        event.preventDefault();
+        display.goNext();
+      }
+    }
+  };
+
+  if (!open || !display?.url || !portalTarget) {
+    return null;
+  }
+
+  const navVisible = Boolean(display?.canGoPrev || display?.canGoNext);
+  const stageClassName = [
+    'preview-zoom__stage',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const containerClassName = [
+    'preview-zoom__scroll',
+    isNativeScale ? 'preview-zoom__scroll--native' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const imageStyle = isNativeScale
+    ? {
+        cursor: 'zoom-out',
+        width: naturalSize.width ? `${naturalSize.width}px` : 'auto',
+        height: naturalSize.height ? `${naturalSize.height}px` : 'auto',
+        maxWidth: 'none',
+        maxHeight: 'none',
+      }
+    : {
         cursor: 'zoom-in',
-        transform: 'none',
         maxWidth: '95vw',
         maxHeight: '95vh',
       };
-    }
-
-    const { naturalWidth, naturalHeight } = imageMetricsRef.current;
-    return {
-      cursor: isDragging ? 'grabbing' : 'grab',
-      width: naturalWidth ? `${naturalWidth}px` : 'auto',
-      height: naturalHeight ? `${naturalHeight}px` : 'auto',
-      maxWidth: 'none',
-      maxHeight: 'none',
-      transform: `translate3d(${pan.x}px, ${pan.y}px, 0)`,
-    };
-  }, [isNativeScale, pan.x, pan.y, isDragging]);
-
-  const stageClassName = useMemo(
-    () =>
-      [
-        'preview-zoom__stage',
-        isNativeScale ? 'preview-zoom__stage--native' : '',
-        isDragging ? 'preview-zoom__stage--dragging' : '',
-      ]
-        .filter(Boolean)
-        .join(' '),
-    [isNativeScale, isDragging],
-  );
-
-  if (!isActive) {
-    return null;
-  }
 
   return createPortal(
     (
@@ -327,57 +173,85 @@ const PreviewZoomOverlay = ({ open = false, display = null, onClose = noop }) =>
         role="dialog"
         aria-modal="true"
         aria-label="Enlarged document preview"
-        onClick={handleBackdropClick}
+        onClick={onClose}
+      >
+      <div
+        className={stageClassName}
+        onClick={(event) => event.stopPropagation()}
+        onKeyDown={handleKeyDown}
       >
         <div
-          ref={stageRef}
-          className={stageClassName}
-          onClick={handleStageClick}
-          onWheel={handleWheel}
+          className={containerClassName}
+          ref={scrollRef}
+          tabIndex={-1}
         >
           <img
-            src={display?.url}
-            alt={display?.alt || 'Document preview'}
+            src={display.url}
+            alt={display.alt || 'Document preview'}
             className="preview-zoom__image"
-            style={imageStyle}
-            onLoad={handleImageLoad}
-            onClick={handleImageClick}
-            onPointerDown={handlePointerDown}
-            onPointerMove={handlePointerMove}
-            onPointerUp={handlePointerUp}
-            onPointerCancel={handlePointerCancel}
+            ref={imageRef}
             draggable={false}
+            onLoad={(event) => {
+              setNaturalSize({
+                width: event.currentTarget.naturalWidth || null,
+                height: event.currentTarget.naturalHeight || null,
+              });
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (!isNativeScale) {
+                const img = imageRef.current;
+                if (img) {
+                  const rect = img.getBoundingClientRect();
+                  const xRatio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
+                  const yRatio = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0.5;
+                  focusRef.current = {
+                    xRatio: clamp(xRatio, 0, 1),
+                    yRatio: clamp(yRatio, 0, 1),
+                  };
+                } else {
+                  focusRef.current = null;
+                }
+              } else {
+                focusRef.current = null;
+              }
+              setIsNativeScale((current) => !current);
+            }}
+            style={imageStyle}
           />
+        </div>
+        {navVisible ? (
           <div className="preview-zoom__nav">
             <button
               type="button"
               className="preview-zoom__nav-button"
-              onClick={(event) => {
-                event.stopPropagation();
-                if (display?.goPrev) {
-                  display.goPrev();
-                }
-              }}
-              aria-label="Previous preview"
-              disabled={!display?.canGoPrev}
-            >
-              <ArrowLeftIcon />
-            </button>
-            <button
-              type="button"
-              className="preview-zoom__nav-button"
-              onClick={(event) => {
-                event.stopPropagation();
-                if (display?.goNext) {
-                  display.goNext();
-                }
-              }}
-              aria-label="Next preview"
-              disabled={!display?.canGoNext}
-            >
-              <ArrowRightIcon />
-            </button>
-          </div>
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (display?.canGoPrev && display?.goPrev) {
+                    display.goPrev();
+                  }
+                }}
+                aria-label="Previous preview"
+                disabled={!display?.canGoPrev}
+              >
+                <ArrowLeftIcon />
+              </button>
+              <button
+                type="button"
+                className="preview-zoom__nav-button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (display?.canGoNext && display?.goNext) {
+                    display.goNext();
+                  }
+                }}
+                aria-label="Next preview"
+                disabled={!display?.canGoNext}
+              >
+                <ArrowRightIcon />
+              </button>
+            </div>
+          ) : null}
         </div>
       </div>
     ),
diff --git a/frontend/src/skeuomorphic_ws.jsx b/frontend/src/skeuomorphic_ws.jsx
index b5bd2e4..6b9f858 100644
--- a/frontend/src/skeuomorphic_ws.jsx
+++ b/frontend/src/skeuomorphic_ws.jsx
@@ -500,7 +500,13 @@ const useDocumentDrag = ({
         const docId = state.docId;
         finishDrag(event.pointerId);
         if (!moved) {
-          openOverlayForDoc(docId);
+          const originInfo = {
+            rotation: state.rotation || 0,
+            scale: state.scale || 1,
+            width: state.width,
+            height: state.height,
+          };
+          openOverlayForDoc(docId, originInfo);
         }
         return;
       }
@@ -593,6 +599,8 @@ const SkeuomorphicWorkspace = ({
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
   const [draggingId, setDraggingId] = useState(null);
   const [overlayDocId, setOverlayDocId] = useState(null);
+  const [overlayOriginRect, setOverlayOriginRect] = useState(null);
+  const [overlayOriginTransform, setOverlayOriginTransform] = useState(null);
   const [previewSnapshots, setPreviewSnapshots] = useState(() => new Map());
   const [tagDropTargetId, setTagDropTargetId] = useState(null);
   const [pendingTagDocId, setPendingTagDocId] = useState(null);
@@ -852,11 +860,15 @@ const SkeuomorphicWorkspace = ({
 
   const closeOverlay = useCallback(() => {
     setOverlayDocId(null);
+    setOverlayOriginRect(null);
+    setOverlayOriginTransform(null);
   }, []);
 
   useEffect(() => {
     if (overlayDocId && !documentLookup.has(overlayDocId)) {
       setOverlayDocId(null);
+      setOverlayOriginRect(null);
+      setOverlayOriginTransform(null);
     }
   }, [overlayDocId, documentLookup]);
 
@@ -1031,7 +1043,7 @@ const SkeuomorphicWorkspace = ({
   );
 
   const openOverlayForDoc = useCallback(
-    (docId) => {
+    (docId, originInfo = null) => {
       if (!docId) {
         return;
       }
@@ -1039,10 +1051,53 @@ const SkeuomorphicWorkspace = ({
       if (!snapshot || !snapshot.url) {
         return;
       }
+      const container = itemRefs.current.get(docId);
+      const imageNode = container?.querySelector?.('.skeuo-item__card img');
+      if (!container || !imageNode) {
+        return;
+      }
+      const rect = imageNode.getBoundingClientRect();
+      let originTransform = null;
+      if (originInfo) {
+        const { rotation = 0, scale = 1, width: originWidth, height: originHeight } = originInfo;
+        originTransform = {
+          rotation,
+          scaleX: scale,
+          scaleY: scale,
+          baseWidth: originWidth,
+          baseHeight: originHeight,
+        };
+      }
+      if (!originTransform) {
+        const entry = layoutRef.current.get(docId) || null;
+        const doc = documentLookup.get(docId) || null;
+        const { width: cardWidth, height: cardHeight } = ensureDocumentSize(doc);
+        const { baseWidth, baseHeight, baseScale } = resolveBaseMetrics(doc, cardWidth, cardHeight);
+        const effectiveWidth = baseWidth * baseScale;
+        const effectiveHeight = baseHeight * baseScale;
+        originTransform = {
+          rotation: entry?.rotation ?? 0,
+          scaleX: baseScale,
+          scaleY: baseScale,
+          baseWidth: Number.isFinite(effectiveWidth) && effectiveWidth > 0 ? effectiveWidth : cardWidth,
+          baseHeight: Number.isFinite(effectiveHeight) && effectiveHeight > 0 ? effectiveHeight : cardHeight,
+        };
+      }
       bringToFront(docId);
+      setOverlayOriginRect(rect);
+      setOverlayOriginTransform(originTransform);
       setOverlayDocId(docId);
     },
-    [bringToFront, previewSnapshots],
+    [
+      bringToFront,
+      previewSnapshots,
+      itemRefs,
+      setOverlayOriginTransform,
+      ensureDocumentSize,
+      resolveBaseMetrics,
+      documentLookup,
+      layoutRef,
+    ],
   );
   const { handlePointerDown, handlePointerMove, handlePointerUp, handlePointerCancel } = useDocumentDrag({
     layoutRef,
@@ -1662,6 +1717,8 @@ const SkeuomorphicWorkspace = ({
         open={Boolean(overlayDisplay?.url)}
         display={overlayDisplay}
         onClose={closeOverlay}
+        originRect={overlayOriginRect}
+        originTransform={overlayOriginTransform}
       />
     </>
   );
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index efe4bb3..cbb246e 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -229,31 +229,37 @@ button.danger:hover:not([disabled]) {
 
 .preview-zoom__stage {
   position: relative;
-  display: inline-flex;
-  flex-direction: column;
+  display: flex;
   align-items: center;
   justify-content: center;
   max-width: 95vw;
   max-height: 95vh;
-  cursor: zoom-in;
 }
-
-.preview-zoom__stage--native {
-  cursor: grab;
-}
-
-.preview-zoom__stage--dragging {
-  cursor: grabbing;
-}
-
 .preview-zoom__image {
   max-width: 95vw;
   max-height: 95vh;
   width: auto;
   height: auto;
-  border-radius: 0;
+}
+
+.preview-zoom__scroll {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 95vw;
+  max-height: 95vh;
   box-shadow: 0 32px 120px rgba(15, 23, 42, 0.55);
-  cursor: inherit;
+}
+
+.preview-zoom__scroll:focus {
+  outline: none;
+}
+
+.preview-zoom__scroll--native {
+  overflow: auto;
+  cursor: zoom-out;
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .preview-zoom__nav {

From 6a04d29eed0c7a4cfee2812ee335c8ee79bd3798 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 27 Oct 2025 00:17:15 +0100
Subject: [PATCH 17/17] metadata

---
 frontend/src/detail/DetailPanel.jsx |  2 +-
 frontend/src/styles.css             | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/detail/DetailPanel.jsx b/frontend/src/detail/DetailPanel.jsx
index 4dabd2b..d5bcda6 100644
--- a/frontend/src/detail/DetailPanel.jsx
+++ b/frontend/src/detail/DetailPanel.jsx
@@ -1104,7 +1104,7 @@ const DetailPanel = ({
         {metadata && (
           <div>
             <dt>Metadata</dt>
-            <pre>{JSON.stringify(metadata, null, 2)}</pre>
+            <pre className="detail-metadata__block">{JSON.stringify(metadata, null, 2)}</pre>
           </div>
         )}
         {hasOcrAsset && ocrOpen
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cbb246e..34d2565 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2035,6 +2035,19 @@ button.danger:hover:not([disabled]) {
   margin-top: 0.5rem;
 }
 
+.detail-metadata__block {
+  margin: 0.35rem 0 0;
+  padding: 0.5rem 0.6rem;
+  background: var(--surface-soft);
+  border-radius: 4px;
+  border: 1px solid var(--border-muted, var(--border));
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
 .tag-pill {
   display: inline-flex;
   align-items: center;