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] 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,
 };