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] 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>