From 2ee69406b60490f81c0ef695b25fc297fab1eed3 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 3 Nov 2025 00:17:00 +0100
Subject: [PATCH] stuff

---
 frontend/src/DesktopWorkspace.css         |  33 ++
 frontend/src/DesktopWorkspace.jsx         |  17 ++
 frontend/src/app/AppLayout.jsx            | 148 +--------
 frontend/src/app/useDocumentSelection.js  |   4 +-
 frontend/src/documents/DocumentsGrid.jsx  | 215 ++++++++++++-
 frontend/src/documents/DocumentsList.jsx  | 353 ++++++++++++++--------
 frontend/src/documents/DocumentsPanel.jsx |  16 +-
 frontend/src/documents/useInlineRename.js | 133 ++++++++
 frontend/src/styles.css                   |  76 ++++-
 9 files changed, 720 insertions(+), 275 deletions(-)
 create mode 100644 frontend/src/documents/useInlineRename.js

diff --git a/frontend/src/DesktopWorkspace.css b/frontend/src/DesktopWorkspace.css
index 6489c37..4aecad2 100644
--- a/frontend/src/DesktopWorkspace.css
+++ b/frontend/src/DesktopWorkspace.css
@@ -111,6 +111,39 @@
   transition: transform 0.28s ease;
 }
 
+.desk-item__correspondents {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  align-items: flex-start;
+  transform-origin: bottom left;
+  transform: translate(0.5em, -0.5em);
+  pointer-events: none;
+}
+
+.desk-correspondent-chip {
+  pointer-events: none;
+  font-size: 0.82rem;
+  padding: 0.18rem 0.55rem;
+  max-width: min(16rem, 80%);
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  box-shadow: 2px 2px 4px var(--shadow-faint);
+  background: color-mix(in oklch, var(--surface-subtle) 88%, transparent);
+  color: var(--muted);
+}
+
+.desk-correspondent-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 
 .tag-chip--draggable {
   user-select: none;
diff --git a/frontend/src/DesktopWorkspace.jsx b/frontend/src/DesktopWorkspace.jsx
index 6c50014..3df97ea 100644
--- a/frontend/src/DesktopWorkspace.jsx
+++ b/frontend/src/DesktopWorkspace.jsx
@@ -12,6 +12,7 @@ import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon, CloseIcon } from './ui/icons';
 import { createDocumentsTableHeaderActions } from './documents/DocumentsPanel';
 import createWorkspaceSurfaceConfig from './documents/workspaceHeader';
+import { resolveCorrespondents } from './documents/correspondents';
 import DetailPanel from './detail/DetailPanel';
 import { clamp, formatTransform } from './desktop/math';
 import { preventAll } from './desktop/events';
@@ -2204,6 +2205,7 @@ const DesktopWorkspaceView = () => {
               const shouldLoad = docKey ? visibleDocIds.has(docKey) : false;
               const dragging = draggingId === doc.id;
               const tags = Array.isArray(doc.tags) ? doc.tags : [];
+              const correspondents = resolveCorrespondents(doc);
               const docTagKeys = tags
                 .map((tag) => (tag ? tag.id : null))
                 .filter(Boolean);
@@ -2298,6 +2300,21 @@ const DesktopWorkspaceView = () => {
                       onNavigatorSnapshot={handleNavigatorSnapshot}
                       shouldLoad={shouldLoad}
                     />
+                    {correspondents.length > 0 && (
+                      <div className="desk-item__correspondents" aria-hidden="true">
+                        {correspondents.map((correspondent) => (
+                          <span
+                            key={correspondent.key}
+                            className="badge desk-correspondent-chip"
+                            title={correspondent.name}
+                          >
+                            <span className="desk-correspondent-chip__label">
+                              {correspondent.name}
+                            </span>
+                          </span>
+                        ))}
+                      </div>
+                    )}
                     {tags.length > 0 && (
                       <div className="desk-item__tags" aria-hidden="true">
                         {tags.map((tag) => {
diff --git a/frontend/src/app/AppLayout.jsx b/frontend/src/app/AppLayout.jsx
index e29488e..0c79ee7 100644
--- a/frontend/src/app/AppLayout.jsx
+++ b/frontend/src/app/AppLayout.jsx
@@ -371,7 +371,7 @@ const AppLayout = () => {
     setFocusedRowKey,
     applySelection,
     clearSelection: clearSelectionInternal,
-    handleRowSelection: handleRowSelectionInternal,
+    handleEntrySelection: handleEntrySelectionInternal,
     promoteSelectionOrder: promoteSelectionOrderInternal,
     configureSelectionEnvironment,
   } = useDocumentSelection({
@@ -784,44 +784,6 @@ const AppLayout = () => {
     [mapDocumentCaches],
   );
 
-  const removeDocumentFromCaches = useCallback(
-    (documentId) => {
-      if (!documentId) {
-        return;
-      }
-
-      const removeFromList = (list) => {
-        const next = list.filter((doc) => doc.id !== documentId);
-        return next.length === list.length ? list : next;
-      };
-
-      setDocuments((prev) => removeFromList(prev));
-      setSearchResults((prev) => (Array.isArray(prev) ? removeFromList(prev) : prev));
-      setFolderContents((prev) => {
-        if (!prev.size) {
-          return prev;
-        }
-        let changed = false;
-        const next = new Map();
-        prev.forEach((contents, key) => {
-          const docs = Array.isArray(contents?.documents) ? contents.documents : null;
-          if (!docs || docs.length === 0) {
-            next.set(key, contents);
-            return;
-          }
-          const filteredDocs = docs.filter((doc) => doc.id !== documentId);
-          if (filteredDocs.length !== docs.length) {
-            changed = true;
-            next.set(key, { ...contents, documents: filteredDocs });
-          } else {
-            next.set(key, contents);
-          }
-        });
-        return changed ? next : prev;
-      });
-    },
-    [setDocuments, setSearchResults, setFolderContents],
-  );
 
 
   const folderOptions = useMemo(() => {
@@ -900,11 +862,11 @@ const AppLayout = () => {
     });
   }, [configureSelectionEnvironment, visibleRowKeySet, navigableRowKeys]);
 
-  const handleRowSelection = useCallback(
+  const handleEntrySelection = useCallback(
     (rowKey, event) => {
-      handleRowSelectionInternal(rowKey, event);
+      handleEntrySelectionInternal(rowKey, event);
     },
-    [handleRowSelectionInternal],
+    [handleEntrySelectionInternal],
   );
 
   const promoteSelectionOrder = useCallback(
@@ -2462,7 +2424,7 @@ const AppLayout = () => {
       if (!isAlreadySelected && folderKey) {
         effectiveFolderSelection = [folderId];
         effectiveDocumentSelection = [];
-        handleRowSelection(folderKey, { preventDefault: () => {} });
+        handleEntrySelection(folderKey, { preventDefault: () => {} });
       }
 
       const uniqueFolders = effectiveFolderSelection.length
@@ -2513,7 +2475,7 @@ const AppLayout = () => {
       selectedDocumentIds,
       setDraggedFolderId,
       setDraggedDocumentIds,
-      handleRowSelection,
+      handleEntrySelection,
       documentLookup,
       createDragPreview,
     ],
@@ -3150,7 +3112,7 @@ const AppLayout = () => {
         if (!row) {
           return;
         }
-        handleRowSelection(row.key, event);
+        handleEntrySelection(row.key, event);
         if (row.type === 'folder') {
           selectFolder(row.id);
         } else if (row.type === 'document') {
@@ -3163,7 +3125,7 @@ const AppLayout = () => {
 
       if (key === 'ArrowDown') {
         if (initializedFromEmptyState && selectedEntries.length === 0) {
-          handleRowSelection(activeKey, {
+          handleEntrySelection(activeKey, {
             shiftKey,
             preventDefault: () => {},
           });
@@ -3172,7 +3134,7 @@ const AppLayout = () => {
         nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, navigableRows.length - 1);
       } else if (key === 'ArrowUp') {
         if (initializedFromEmptyState && selectedEntries.length === 0) {
-          handleRowSelection(activeKey, {
+          handleEntrySelection(activeKey, {
             shiftKey,
             preventDefault: () => {},
           });
@@ -3200,7 +3162,7 @@ const AppLayout = () => {
 
       setFocusedRowKey(targetRow.key);
 
-      handleRowSelection(targetRow.key, {
+      handleEntrySelection(targetRow.key, {
         shiftKey,
         preventDefault: () => {},
       });
@@ -3210,7 +3172,7 @@ const AppLayout = () => {
       navigableRowKeys,
       focusedRowKey,
       selectedEntries,
-      handleRowSelection,
+      handleEntrySelection,
       selectFolder,
       openDocumentPreview,
       setFocusedRowKey,
@@ -4163,76 +4125,6 @@ const AppLayout = () => {
     return list.find((doc) => doc.id === focusedDocumentId) || null;
   }, [searchResults, documents, focusedDocumentId]);
 
-  const handleDocumentDelete = useCallback(
-    async (documentId) => {
-      if (!documentId) return;
-      if (!token) {
-        setStatusMessage('Log in to manage documents.', 'error');
-        return;
-      }
-
-      const doc = documentLookup.get(documentId) || null;
-      const label = doc?.title;
-
-      const confirmed = window.confirm(`Move "${label}" to trash? You can restore it from trash later.`);
-      if (!confirmed) {
-        return;
-      }
-
-      setLoading(true);
-      try {
-        await api.delete(`/documents/${documentId}`);
-
-        removeDocumentFromCaches(documentId);
-
-        setPreviewEntries((prev) => {
-          if (!prev.has(documentId)) {
-            return prev;
-          }
-          const next = new Map(prev);
-          next.delete(documentId);
-          return next;
-        });
-        previewInflightRef.current.delete(documentId);
-
-        if (selectedDocumentIds.includes(documentId)) {
-          const remainingRowKeys = selectedDocumentIds
-            .filter((id) => id !== documentId)
-            .map((id) => resolveDocumentRowKey(id))
-            .filter(Boolean);
-          const removedKey = resolveDocumentRowKey(documentId);
-          applySelection(remainingRowKeys, {
-            anchor: null,
-            interactedKeys: removedKey ? [removedKey] : [],
-          });
-        }
-
-        if (previewDocumentId === documentId) {
-          closeDocumentPreview();
-        }
-
-        setStatusMessage('Document deleted.', 'success');
-      } catch (error) {
-        const message = error.response?.data?.error || 'Failed to delete document.';
-        notifyApiError(error, message);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [
-      token,
-      documentLookup,
-      setStatusMessage,
-      removeDocumentFromCaches,
-      setPreviewEntries,
-      previewInflightRef,
-      previewDocumentId,
-      closeDocumentPreview,
-      selectedDocumentIds,
-      applySelection,
-      notifyApiError,
-    ],
-  );
 
   const orderedSelectedDocuments = useMemo(() => {
     const ordered = [];
@@ -4591,10 +4483,8 @@ const AppLayout = () => {
       onFolderDragStart: handleFolderDragStart,
       onFolderDragEnd: handleFolderDragEnd,
       draggedFolderId,
-      onFolderDelete: handleFolderDelete,
       onFolderRename: handleFolderRename,
       onDocumentOpen: openDocumentPreview,
-      onDocumentDelete: handleDocumentDelete,
       onDocumentRename: handleDocumentTitleUpdate,
       selectedDocumentIds,
       selectedFolderIds,
@@ -4610,17 +4500,13 @@ const AppLayout = () => {
       onFocusedRowChange: setFocusedRowKey,
       ensureAssetUrl,
       getDocumentAsset,
-      getDownloadHref: (doc) =>
-        doc?.current_version?.download_path
-          ? resolveApiPath(doc.current_version.download_path)
-          : null,
       onTagClick: toggleTagFilter,
       onCorrespondentClick: toggleCorrespondentFilter,
       onDocumentTagDrop: handleDocumentTagDrop,
       viewMode: documentsViewMode,
       onViewModeChange: handleDocumentsViewModeChange,
       onClearSelection: clearDocumentSelection,
-      onRowSelection: handleRowSelection,
+      onEntrySelection: handleEntrySelection,
       onOpenDetailPanel: openDetailPanel,
     }),
     [
@@ -4635,7 +4521,6 @@ const AppLayout = () => {
       draggedFolderId,
       focusedRowKey,
       folderClickHandlers,
-      handleDocumentDelete,
       handleDocumentDragEnd,
       handleDocumentDragStart,
       handleDocumentListFocus,
@@ -4643,11 +4528,10 @@ const AppLayout = () => {
       handleDocumentTagDrop,
       handleDocumentTitleUpdate,
       handleDocumentsViewModeChange,
-      handleFolderDelete,
       handleFolderDragEnd,
       handleFolderDragStart,
       handleFolderRename,
-      handleRowSelection,
+      handleEntrySelection,
       isFilterActive,
       openDetailPanel,
       openDocumentPreview,
@@ -4715,9 +4599,9 @@ const AppLayout = () => {
       currentTenantId,
       folderClickHandlers,
       folderNodes,
-      handleFolderDelete,
       handleFolderDragEnd,
       handleFolderDragStart,
+      handleFolderDelete,
       handleFolderRename,
       handleLogout,
       handleSearchChange,
@@ -4830,9 +4714,9 @@ const AppLayout = () => {
       if (!rowKey) {
         return;
       }
-      handleRowSelection(rowKey, event);
+      handleEntrySelection(rowKey, event);
     },
-    [handleRowSelection],
+    [handleEntrySelection],
   );
 
   const handleDeskDocumentStackSelect = useCallback(
diff --git a/frontend/src/app/useDocumentSelection.js b/frontend/src/app/useDocumentSelection.js
index 171ff8e..16f3b83 100644
--- a/frontend/src/app/useDocumentSelection.js
+++ b/frontend/src/app/useDocumentSelection.js
@@ -143,7 +143,7 @@ export const useDocumentSelection = ({
     applySelection([], { anchor: null, interactedKeys: [] });
   }, [applySelection]);
 
-  const handleRowSelection = useCallback(
+  const handleEntrySelection = useCallback(
     (rowKey, event) => {
       const visibleRowKeySet = visibleRowKeySetRef.current;
       const navigableRowKeys = navigableRowKeysRef.current;
@@ -241,7 +241,7 @@ export const useDocumentSelection = ({
     setFocusedRowKey,
     applySelection,
     clearSelection,
-    handleRowSelection,
+    handleEntrySelection,
     promoteSelectionOrder,
     configureSelectionEnvironment,
   };
diff --git a/frontend/src/documents/DocumentsGrid.jsx b/frontend/src/documents/DocumentsGrid.jsx
index 94fdd56..9c56ea6 100644
--- a/frontend/src/documents/DocumentsGrid.jsx
+++ b/frontend/src/documents/DocumentsGrid.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { FolderIcon } from '../ui/icons';
+import { FolderIcon, CheckIcon, CloseIcon } from '../ui/icons';
 import DocumentThumbnailImage from './DocumentThumbnailImage';
 import CorrespondentLinks from './CorrespondentLinks';
 import { getTagColorStyle } from '../utils/colors';
 import { resolveCorrespondents } from './correspondents';
 import { writeTagTransferData } from './tagTransfer';
+import useInlineRename from './useInlineRename';
 
 const DocumentsGrid = ({
   entries,
@@ -35,7 +36,42 @@ const DocumentsGrid = ({
   onCorrespondentClick,
   activeCorrespondentIdSet,
   onClearSelection,
-}) => (
+  onDocumentRename,
+  onFolderRename,
+}) => {
+  const {
+    editingId: editingDocumentId,
+    draftValue: documentDraft,
+    setDraftValue: setDocumentDraft,
+    beginEditing: beginDocumentEditing,
+    cancelEditing: cancelDocumentEditing,
+    submitEditing: submitDocumentEditing,
+    savingId: savingDocumentId,
+    attachInputRef: attachDocumentInputRef,
+  } = useInlineRename(onDocumentRename, {
+    getCurrentValue: (doc) => doc?.title ?? '',
+    getEntityId: (doc) => doc?.id ?? null,
+  });
+
+  const {
+    editingId: editingFolderId,
+    draftValue: folderDraft,
+    setDraftValue: setFolderDraft,
+    beginEditing: beginFolderEditing,
+    cancelEditing: cancelFolderEditing,
+    submitEditing: submitFolderEditing,
+    savingId: savingFolderId,
+    attachInputRef: attachFolderInputRef,
+  } = useInlineRename(onFolderRename, {
+    getCurrentValue: (folder) => folder?.name ?? '',
+    getEntityId: (folder) => folder?.id ?? null,
+  });
+
+  const documentSelectionCount = selectedDocumentIdsSet?.size ?? 0;
+  const folderSelectionCount = selectedFolderIdsSet?.size ?? 0;
+  const totalSelectionCount = documentSelectionCount + folderSelectionCount;
+
+  return (
   <div
     className="documents-grid"
     role="list"
@@ -58,6 +94,14 @@ const DocumentsGrid = ({
         const classes = ['document-card', 'folder-card'];
         if (isDraggingFolder) classes.push('is-dragging');
         if (isSelectedFolder) classes.push('selected');
+        const canRenameFolder = folder.id !== 'root' && typeof onFolderRename === 'function';
+        const isFolderEditing = editingFolderId === folder.id;
+        const folderDraftValue = isFolderEditing ? folderDraft : folder.name;
+        const trimmedFolderDraft = isFolderEditing ? folderDraft.trim() : '';
+        const isFolderSaving = savingFolderId === folder.id;
+        const canSubmitFolder =
+          isFolderEditing && trimmedFolderDraft.length > 0 && trimmedFolderDraft !== folder.name;
+        const allowInlineFolderEdit = canRenameFolder && isSelectedFolder && totalSelectionCount === 1;
 
         return (
           <div
@@ -89,9 +133,83 @@ const DocumentsGrid = ({
               <FolderIcon className="folder-card__icon-svg" size={gridIconSize} />
             </div>
             <div className="folder-card__meta">
-              <div className="folder-card__name" title={folder.name}>
-                {folder.name}
-              </div>
+              {isFolderEditing ? (
+                <div className="folder-card__edit doc-title-edit">
+                  <input
+                    type="text"
+                    ref={attachFolderInputRef}
+                    value={folderDraftValue}
+                    onChange={(event) => setFolderDraft(event.target.value)}
+                    onClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        submitFolderEditing(folder);
+                      } else if (event.key === 'Escape') {
+                        event.preventDefault();
+                        cancelFolderEditing(event);
+                      }
+                    }}
+                    onBlur={(event) => {
+                      const nextFocus = event.relatedTarget;
+                      if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
+                        cancelFolderEditing();
+                      }
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="icon-button"
+                    aria-label="Save name"
+                    title="Save name"
+                    disabled={!canSubmitFolder || isFolderSaving}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      submitFolderEditing(folder);
+                    }}
+                  >
+                    <CheckIcon />
+                  </button>
+                  <button
+                    type="button"
+                    className="icon-button"
+                    aria-label="Cancel"
+                    title="Cancel"
+                    onClick={(event) => cancelFolderEditing(event)}
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+              ) : (
+                <div className="folder-card__label-row">
+                  <span
+                    className="folder-card__name"
+                    title={folder.name}
+                    role={allowInlineFolderEdit ? 'button' : undefined}
+                    tabIndex={allowInlineFolderEdit ? 0 : undefined}
+                    onClick={(event) => {
+                      if (!allowInlineFolderEdit) {
+                        return;
+                      }
+                      event.preventDefault();
+                      event.stopPropagation();
+                      beginFolderEditing(folder);
+                    }}
+                    onKeyDown={(event) => {
+                      if (!allowInlineFolderEdit) {
+                        return;
+                      }
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        beginFolderEditing(folder);
+                      }
+                    }}
+                  >
+                    {folder.name}
+                  </span>
+                </div>
+              )}
             </div>
           </div>
         );
@@ -111,6 +229,13 @@ const DocumentsGrid = ({
       const cardClasses = ['document-card', 'document'];
       if (isSelected) cardClasses.push('selected');
       if (isDraggingDoc) cardClasses.push('is-dragging');
+      const isEditingDoc = editingDocumentId === doc.id;
+      const documentDraftValue = isEditingDoc ? documentDraft : doc.title;
+      const trimmedDocumentDraft = isEditingDoc ? documentDraft.trim() : '';
+      const isDocumentSaving = savingDocumentId === doc.id;
+      const canSubmitDocument =
+        isEditingDoc && trimmedDocumentDraft.length > 0 && trimmedDocumentDraft !== doc.title;
+      const allowInlineDocumentEdit = onDocumentRename && isSelected && totalSelectionCount === 1;
       return (
         <div
           key={entry.key}
@@ -149,7 +274,82 @@ const DocumentsGrid = ({
                   />
                 </span>
               ) : null}
-              <span className="doc-name__primary">{doc.title}</span>
+              {isEditingDoc ? (
+                <div className="document-card__title-edit doc-title-edit">
+                  <input
+                    type="text"
+                    ref={attachDocumentInputRef}
+                    value={documentDraftValue}
+                    onChange={(event) => setDocumentDraft(event.target.value)}
+                    onClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        submitDocumentEditing(doc);
+                      } else if (event.key === 'Escape') {
+                        event.preventDefault();
+                        cancelDocumentEditing(event);
+                      }
+                    }}
+                    onBlur={(event) => {
+                      const nextFocus = event.relatedTarget;
+                      if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
+                        cancelDocumentEditing();
+                      }
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="icon-button"
+                    aria-label="Save title"
+                    title="Save title"
+                    disabled={!canSubmitDocument || isDocumentSaving}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      submitDocumentEditing(doc);
+                    }}
+                  >
+                    <CheckIcon />
+                  </button>
+                  <button
+                    type="button"
+                    className="icon-button"
+                    aria-label="Cancel"
+                    title="Cancel"
+                    onClick={(event) => cancelDocumentEditing(event)}
+                  >
+                    <CloseIcon />
+                  </button>
+                </div>
+              ) : (
+                <div className="document-card__title-row">
+                  <span
+                    className="document-card__title-badge"
+                    role={allowInlineDocumentEdit ? 'button' : undefined}
+                    tabIndex={allowInlineDocumentEdit ? 0 : undefined}
+                    onClick={(event) => {
+                      if (!allowInlineDocumentEdit) {
+                        return;
+                      }
+                      event.preventDefault();
+                      event.stopPropagation();
+                      beginDocumentEditing(doc);
+                    }}
+                    onKeyDown={(event) => {
+                      if (!allowInlineDocumentEdit) {
+                        return;
+                      }
+                      if (event.key === 'Enter') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        beginDocumentEditing(doc);
+                      }
+                    }}
+                  >
+                    {doc.title}
+                  </span>
+                </div>
+              )}
             </div>
             {visibleTags.length > 0 && (
               <div className="document-card__tags">
@@ -204,6 +404,7 @@ const DocumentsGrid = ({
       );
     })}
   </div>
-);
+  );
+};
 
 export default DocumentsGrid;
diff --git a/frontend/src/documents/DocumentsList.jsx b/frontend/src/documents/DocumentsList.jsx
index 3e3c49b..0ce3783 100644
--- a/frontend/src/documents/DocumentsList.jsx
+++ b/frontend/src/documents/DocumentsList.jsx
@@ -1,15 +1,22 @@
 import React from 'react';
-import {
-  FolderIcon,
-  EditIcon,
-  DownloadIcon,
-  TrashIcon,
-} from '../ui/icons';
+import { FolderIcon, CheckIcon, CloseIcon } from '../ui/icons';
 import { getTagColorStyle } from '../utils/colors';
 import DocumentThumbnailImage from './DocumentThumbnailImage';
 import CorrespondentLinks from './CorrespondentLinks';
 import { resolveCorrespondents } from './correspondents';
 import { writeTagTransferData } from './tagTransfer';
+import useInlineRename from './useInlineRename';
+
+const formatDate = (value) => {
+  if (!value) {
+    return "—";
+  }
+  const timestamp = Date.parse(value);
+  if (Number.isNaN(timestamp)) {
+    return "—";
+  }
+  return new Date(timestamp).toLocaleDateString();
+};
 
 const DocumentsList = ({
   entries,
@@ -20,7 +27,6 @@ const DocumentsList = ({
   draggedFolderId,
   ensureAssetUrl,
   getDocumentAsset,
-  getDownloadHref,
   onFolderClick,
   onFolderSelect,
   onFolderDragOver,
@@ -29,7 +35,6 @@ const DocumentsList = ({
   onFolderDragStart,
   onFolderDragEnd,
   onFolderRename,
-  onFolderDelete,
   onDocumentClick,
   onDocumentOpen,
   onDocumentDragStart,
@@ -38,20 +43,53 @@ const DocumentsList = ({
   onDocumentTagDragLeave,
   onDocumentTagDrop,
   onDocumentRename,
-  onDocumentDelete,
   tagLookupById,
   onTagClick,
   onCorrespondentClick,
   activeCorrespondentIdSet,
   scrollRef,
-}) => (
+}) => {
+  const {
+    editingId: editingDocumentId,
+    draftValue: documentDraft,
+    setDraftValue: setDocumentDraft,
+    beginEditing: beginDocumentEditing,
+    cancelEditing: cancelDocumentEditing,
+    submitEditing: submitDocumentEditing,
+    savingId: savingDocumentId,
+    attachInputRef: attachDocumentInputRef,
+  } = useInlineRename(onDocumentRename, {
+    getCurrentValue: (doc) => doc?.title ?? '',
+    getEntityId: (doc) => doc?.id ?? null,
+  });
+
+  const {
+    editingId: editingFolderId,
+    draftValue: folderDraft,
+    setDraftValue: setFolderDraft,
+    beginEditing: beginFolderEditing,
+    cancelEditing: cancelFolderEditing,
+    submitEditing: submitFolderEditing,
+    savingId: savingFolderId,
+    attachInputRef: attachFolderInputRef,
+  } = useInlineRename(onFolderRename, {
+    getCurrentValue: (folder) => folder?.name ?? '',
+    getEntityId: (folder) => folder?.id ?? null,
+  });
+
+
+  const documentSelectionCount = selectedDocumentIdsSet?.size ?? 0;
+  const folderSelectionCount = selectedFolderIdsSet?.size ?? 0;
+  const totalSelectionCount = documentSelectionCount + folderSelectionCount;
+
+  return (
   <table aria-multiselectable="true">
     <thead>
       <tr>
         <th className="thumb-column"></th>
         <th>Name</th>
         <th>Issued</th>
-        <th>Actions</th>
+        <th>Added</th>
       </tr>
     </thead>
     <tbody>
@@ -65,6 +103,14 @@ const DocumentsList = ({
           const isDraggingFolder = draggedFolderId === folder.id;
           const isSelectedFolder = selectedFolderIdsSet?.has(folder.id);
           const rowKey = `folder:${folder.id}`;
+          const canRenameFolder = folder.id !== 'root' && typeof onFolderRename === 'function';
+          const isFolderEditing = editingFolderId === folder.id;
+          const folderDraftValue = isFolderEditing ? folderDraft : folder.name;
+          const trimmedFolderDraft = isFolderEditing ? folderDraft.trim() : '';
+          const isFolderSaving = savingFolderId === folder.id;
+          const canSubmitFolder =
+            isFolderEditing && trimmedFolderDraft.length > 0 && trimmedFolderDraft !== folder.name;
+          const allowInlineFolderEdit = canRenameFolder && isSelectedFolder && totalSelectionCount === 1;
 
           return (
             <tr
@@ -100,48 +146,90 @@ const DocumentsList = ({
               </td>
               <td className="doc-list__name">
                 <div className="doc-list__name-content">
-                  <span>{folder.name}</span>
-                </div>
-              </td>
-              <td></td>
-              <td className="actions">
-                <div className="action-buttons">
-                  {folder.id !== 'root' && onFolderRename && (
-                    <button
-                      type="button"
-                      className="icon-button"
-                      title="Rename"
-                      aria-label={`Rename folder ${folder.name}`}
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        const nextName = window.prompt('Rename folder', folder.name);
-                        if (!nextName) {
-                          return;
-                        }
-                        const trimmed = nextName.trim();
-                        if (!trimmed || trimmed === folder.name) {
-                          return;
-                        }
-                        onFolderRename?.(folder.id, trimmed);
-                      }}
-                    >
-                      <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>
+                  <span className="doc-name__title">
+                    <span className="doc-name__primary">
+                      {isFolderEditing ? (
+                        <span className="doc-title-edit">
+                          <input
+                            type="text"
+                            ref={attachFolderInputRef}
+                            value={folderDraftValue}
+                            onChange={(event) => setFolderDraft(event.target.value)}
+                            onClick={(event) => event.stopPropagation()}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter') {
+                                event.preventDefault();
+                                submitFolderEditing(folder);
+                              } else if (event.key === 'Escape') {
+                                event.preventDefault();
+                                cancelFolderEditing(event);
+                              }
+                            }}
+                            onBlur={(event) => {
+                              const nextFocus = event.relatedTarget;
+                              if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
+                                cancelFolderEditing();
+                              }
+                            }}
+                          />
+                          <button
+                            type="button"
+                            className="icon-button"
+                            aria-label="Save name"
+                            title="Save name"
+                            disabled={!canSubmitFolder || isFolderSaving}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              submitFolderEditing(folder);
+                            }}
+                          >
+                            <CheckIcon />
+                          </button>
+                          <button
+                            type="button"
+                            className="icon-button"
+                            aria-label="Cancel"
+                            title="Cancel"
+                            onClick={(event) => {
+                              cancelFolderEditing(event);
+                            }}
+                          >
+                            <CloseIcon />
+                          </button>
+                        </span>
+                      ) : (
+                        <span
+                          className="doc-name__primary-text"
+                          role={allowInlineFolderEdit ? 'button' : undefined}
+                          tabIndex={allowInlineFolderEdit ? 0 : undefined}
+                          onClick={(event) => {
+                            if (!allowInlineFolderEdit) {
+                              return;
+                            }
+                            event.preventDefault();
+                            event.stopPropagation();
+                            beginFolderEditing(folder);
+                          }}
+                          onKeyDown={(event) => {
+                            if (!allowInlineFolderEdit) {
+                              return;
+                            }
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              beginFolderEditing(folder);
+                            }
+                          }}
+                        >
+                          {folder.name}
+                        </span>
+                      )}
+                    </span>
+                  </span>
                 </div>
               </td>
+              <td>—</td>
+              <td>—</td>
             </tr>
           );
         }
@@ -155,8 +243,17 @@ const DocumentsList = ({
         const rowClasses = ['document'];
         if (isSelected) rowClasses.push('selected');
         if (isDraggingDoc) rowClasses.push('is-dragging');
-        const downloadHref = getDownloadHref?.(doc) || null;
         const correspondents = resolveCorrespondents(doc);
+        const isEditingDoc = editingDocumentId === doc.id;
+        const documentDraftValue = isEditingDoc ? documentDraft : doc.title;
+        const trimmedDocumentDraft = isEditingDoc ? documentDraft.trim() : '';
+        const isDocumentSaving = savingDocumentId === doc.id;
+        const canSubmitDocument =
+          isEditingDoc && trimmedDocumentDraft.length > 0 && trimmedDocumentDraft !== doc.title;
+        const allowInlineDocumentEdit =
+          onDocumentRename && isSelected && totalSelectionCount === 1;
+        const issuedLabel = formatDate(doc.issued_at);
+        const addedLabel = formatDate(doc.created_at || doc.uploaded_at);
         return (
           <tr
             key={entry.key}
@@ -194,7 +291,84 @@ const DocumentsList = ({
                         />
                       </span>
                     ) : null}
-                    <span className="doc-name__primary">{doc.title}</span>
+                    <span className="doc-name__primary">
+                      {isEditingDoc ? (
+                        <span className="doc-title-edit">
+                          <input
+                            type="text"
+                            ref={attachDocumentInputRef}
+                            value={documentDraftValue}
+                            onChange={(event) => setDocumentDraft(event.target.value)}
+                            onClick={(event) => event.stopPropagation()}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              submitDocumentEditing(doc);
+                            } else if (event.key === 'Escape') {
+                              event.preventDefault();
+                              cancelDocumentEditing(event);
+                            }
+                          }}
+                          onBlur={(event) => {
+                            const nextFocus = event.relatedTarget;
+                            if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
+                              cancelDocumentEditing();
+                            }
+                          }}
+                        />
+                          <button
+                            type="button"
+                            className="icon-button"
+                            aria-label="Save title"
+                            title="Save title"
+                            disabled={!canSubmitDocument || isDocumentSaving}
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              submitDocumentEditing(doc);
+                            }}
+                          >
+                            <CheckIcon />
+                          </button>
+                          <button
+                            type="button"
+                            className="icon-button"
+                            aria-label="Cancel"
+                            title="Cancel"
+                            onClick={(event) => {
+                              cancelDocumentEditing(event);
+                            }}
+                          >
+                            <CloseIcon />
+                          </button>
+                        </span>
+                      ) : (
+                        <span
+                          className="doc-name__primary-text"
+                          role={allowInlineDocumentEdit ? 'button' : undefined}
+                          tabIndex={allowInlineDocumentEdit ? 0 : undefined}
+                          onClick={(event) => {
+                            if (!allowInlineDocumentEdit) {
+                              return;
+                            }
+                            event.preventDefault();
+                            event.stopPropagation();
+                            beginDocumentEditing(doc);
+                          }}
+                          onKeyDown={(event) => {
+                            if (!allowInlineDocumentEdit) {
+                              return;
+                            }
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              beginDocumentEditing(doc);
+                            }
+                          }}
+                        >
+                          {doc.title}
+                        </span>
+                      )}
+                    </span>
                   </span>
                 </div>
                 {(doc.tags || []).length > 0 && (
@@ -244,79 +418,14 @@ const DocumentsList = ({
                 )}
               </div>
             </td>
-            <td>
-              {(() => {
-                const issuedAt = doc.issued_at || null;
-                if (!issuedAt) {
-                  return '—';
-                }
-                const timestamp = Date.parse(issuedAt);
-                if (Number.isNaN(timestamp)) {
-                  return '—';
-                }
-                return new Date(timestamp).toLocaleDateString();
-              })()}
-            </td>
-            <td className="actions">
-              <div className="action-buttons">
-                {onDocumentRename && (
-                  <button
-                    type="button"
-                    className="icon-button"
-                    title="Rename"
-                    aria-label={`Rename document ${doc.title}`}
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      const nextName = window.prompt('Rename document', doc.title);
-                      if (!nextName) {
-                        return;
-                      }
-                      const trimmed = nextName.trim();
-                      if (!trimmed || trimmed === doc.title) {
-                        return;
-                      }
-                      onDocumentRename?.(doc.id, trimmed);
-                    }}
-                  >
-                    <EditIcon className="icon-inline" />
-                  </button>
-                )}
-                {downloadHref ? (
-                  <a
-                    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" />
-                  </a>
-                ) : (
-                  <span className="meta">No download</span>
-                )}
-                <button
-                  type="button"
-                  className="icon-button danger"
-                  title="Delete"
-                  aria-label="Delete document"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onDocumentDelete?.(doc.id);
-                  }}
-                >
-                  <TrashIcon className="icon-inline" />
-                </button>
-              </div>
-            </td>
+            <td>{issuedLabel}</td>
+            <td>{addedLabel}</td>
           </tr>
         );
       })}
     </tbody>
   </table>
-);
+  );
+};
 
 export default DocumentsList;
diff --git a/frontend/src/documents/DocumentsPanel.jsx b/frontend/src/documents/DocumentsPanel.jsx
index e56c280..1ec7ca1 100644
--- a/frontend/src/documents/DocumentsPanel.jsx
+++ b/frontend/src/documents/DocumentsPanel.jsx
@@ -36,7 +36,6 @@ const DocumentsPanel = ({
   onFolderDragStart,
   onFolderDragEnd,
   draggedFolderId,
-  onFolderDelete,
   onFolderRename,
   selectedFolderIds = [],
   onDocumentOpen,
@@ -45,9 +44,8 @@ const DocumentsPanel = ({
   draggingDocumentIds = [],
   onDocumentDragStart,
   onDocumentDragEnd,
-  onDocumentDelete,
   onDocumentRename,
-  onRowSelection = null,
+  onEntrySelection = null,
   onOpenDetailPanel = null,
   tagLookupById,
   activeCorrespondentIds = [],
@@ -56,7 +54,6 @@ const DocumentsPanel = ({
   onFocusedRowChange,
   ensureAssetUrl = null,
   getDocumentAsset = () => null,
-  getDownloadHref,
   onTagClick,
   onCorrespondentClick,
   isSearchLoading = false,
@@ -253,8 +250,8 @@ const DocumentsPanel = ({
 
       const rowKey = entry.type === EntryType.document ? `document:${entry.id}` : `folder:${entry.id}`;
 
-      if (rowKey && typeof onRowSelection === 'function') {
-        onRowSelection(rowKey, event);
+      if (rowKey && typeof onEntrySelection === 'function') {
+        onEntrySelection(rowKey, event);
       }
 
       if (entry.type === EntryType.document) {
@@ -281,7 +278,7 @@ const DocumentsPanel = ({
         onFocusedRowChange?.(rowKey);
       }
     },
-    [onRowSelection, onOpenDetailPanel, onFocusedRowChange, onFolderSelect],
+    [onEntrySelection, onOpenDetailPanel, onFocusedRowChange, onFolderSelect],
   );
 
   const handleDocumentClick = useCallback(
@@ -472,6 +469,8 @@ const DocumentsPanel = ({
                 onCorrespondentClick={onCorrespondentClick}
                 activeCorrespondentIdSet={activeCorrespondentIdSet}
                 onClearSelection={onClearSelection}
+                onDocumentRename={onDocumentRename}
+                onFolderRename={onFolderRename}
               />
             ) : !showTableRows ? null : (
               <DocumentsList
@@ -483,7 +482,6 @@ const DocumentsPanel = ({
                 draggedFolderId={draggedFolderId}
                 ensureAssetUrl={ensureAssetUrl}
                 getDocumentAsset={getDocumentAsset}
-                getDownloadHref={getDownloadHref}
                 onFolderClick={handleFolderClick}
                 onFolderSelect={onFolderSelect}
                 onFolderDragOver={onFolderDragOver}
@@ -492,7 +490,6 @@ const DocumentsPanel = ({
                 onFolderDragStart={onFolderDragStart}
                 onFolderDragEnd={onFolderDragEnd}
                 onFolderRename={onFolderRename}
-                onFolderDelete={onFolderDelete}
                 onDocumentClick={handleDocumentClick}
                 onDocumentOpen={onDocumentOpen}
                 onDocumentDragStart={handleDocumentDragStartLocal}
@@ -501,7 +498,6 @@ const DocumentsPanel = ({
                 onDocumentTagDragLeave={handleDocumentTagDragLeave}
                 onDocumentTagDrop={handleDocumentTagDrop}
                 onDocumentRename={onDocumentRename}
-                onDocumentDelete={onDocumentDelete}
                 tagLookupById={tagLookupById}
                 onTagClick={onTagClick}
                 onCorrespondentClick={onCorrespondentClick}
diff --git a/frontend/src/documents/useInlineRename.js b/frontend/src/documents/useInlineRename.js
new file mode 100644
index 0000000..a2b2082
--- /dev/null
+++ b/frontend/src/documents/useInlineRename.js
@@ -0,0 +1,133 @@
+import { useCallback, useRef, useState } from 'react';
+
+const focusInput = (node) => {
+  if (!node) {
+    return;
+  }
+  const applyFocus = () => {
+    node.focus();
+    if (typeof node.select === 'function') {
+      node.select();
+    }
+  };
+  if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(applyFocus);
+  } else {
+    applyFocus();
+  }
+};
+
+const identity = (value) => value;
+
+const useInlineRename = (
+  onRename,
+  {
+    getCurrentValue = identity,
+    getEntityId = (entity) => entity?.id ?? null,
+  } = {},
+) => {
+  const [editingId, setEditingId] = useState(null);
+  const [draftValue, setDraftValue] = useState('');
+  const [savingId, setSavingId] = useState(null);
+  const inputRef = useRef(null);
+
+  const resetState = useCallback(() => {
+    setEditingId(null);
+    setDraftValue('');
+    setSavingId(null);
+    inputRef.current = null;
+  }, []);
+
+  const beginEditing = useCallback(
+    (entity, event) => {
+      if (!entity) {
+        return;
+      }
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      const entityId = getEntityId(entity);
+      if (!entityId) {
+        return;
+      }
+      const currentValue = getCurrentValue(entity) ?? '';
+      setEditingId(entityId);
+      setDraftValue(currentValue);
+      setSavingId(null);
+    },
+    [getCurrentValue, getEntityId],
+  );
+
+  const cancelEditing = useCallback(
+    (event) => {
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      resetState();
+    },
+    [resetState],
+  );
+
+  const submitEditing = useCallback(
+    async (entity) => {
+      if (!entity) {
+        return false;
+      }
+      const entityId = getEntityId(entity);
+      if (!entityId || editingId !== entityId) {
+        return false;
+      }
+      const trimmed = draftValue.trim();
+      const currentValue = getCurrentValue(entity) ?? '';
+      if (!trimmed || trimmed === currentValue) {
+        resetState();
+        return true;
+      }
+      if (typeof onRename !== 'function') {
+        resetState();
+        return true;
+      }
+      setSavingId(entityId);
+      try {
+        const result = await onRename(entityId, trimmed);
+        if (result === false) {
+          return false;
+        }
+        resetState();
+        return true;
+      } catch (error) {
+        return false;
+      } finally {
+        setSavingId((current) => (current === entityId ? null : current));
+      }
+    },
+    [draftValue, editingId, getCurrentValue, getEntityId, onRename, resetState],
+  );
+
+  const attachInputRef = useCallback(
+    (node) => {
+      if (node) {
+        inputRef.current = node;
+        focusInput(node);
+      } else if (inputRef.current) {
+        inputRef.current = null;
+      }
+    },
+    [],
+  );
+
+  return {
+    editingId,
+    draftValue,
+    setDraftValue,
+    beginEditing,
+    cancelEditing,
+    submitEditing,
+    savingId,
+    attachInputRef,
+  };
+};
+
+export default useInlineRename;
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index a72ccce..2a41c56 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -2168,6 +2168,43 @@ button.danger:hover:not([disabled]) {
   width: 100%;
 }
 
+.doc-title-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: nowrap;
+}
+
+.doc-title-edit input[type='text'] {
+  padding: 0.3rem 0.55rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--fg);
+  min-width: 8rem;
+}
+
+.doc-title-edit input[type='text']:focus-visible {
+  outline: 2px solid var(--selection-ring);
+  outline-offset: 1px;
+}
+
+.doc-title-edit .icon-button {
+  flex-shrink: 0;
+}
+
+.documents-panel .doc-name__primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.documents-panel .doc-name__primary-text {
+  overflow-wrap: anywhere;
+}
+
+
 .doc-entry {
   display: flex;
   align-items: center;
@@ -2294,16 +2331,31 @@ button.danger:hover:not([disabled]) {
 }
 
 .document-card__title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
   color: var(--fg);
+}
+
+.document-card__title-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.document-card__title-badge {
   padding: 0.2rem 0.7rem;
   border-radius: 1rem;
   max-width: 100%;
   word-break: break-word;
   font-size: var(--documents-grid-title-size);
+  color: inherit;
 }
 
-.document-card.selected .document-card__title,
-.folder-card.selected .folder-card__name {
+.document-card.selected .document-card__title-badge {
   background-color: var(--accent);
   color: var(--on-accent);
 }
@@ -2346,6 +2398,14 @@ button.danger:hover:not([disabled]) {
   padding-top: 0.35rem;
 }
 
+.folder-card__label-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
 .folder-card__name {
   color: var(--fg);
   overflow: hidden;
@@ -2356,6 +2416,18 @@ button.danger:hover:not([disabled]) {
   border-radius: 1rem;
 }
 
+.folder-card__edit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+}
+
+.folder-card.selected .folder-card__name {
+  background-color: var(--accent);
+  color: var(--on-accent);
+}
+
 
 .doc-name__title {
   max-width: 100%;