outline

frontend/src/documents/DocumentsList.jsx

@@ -139,7 +139,9 @@ const DocumentsList = ({
                   <FolderIcon className="thumb-icon__image" size={32} />
                 </div>
               </td>
-              <td className="doc-list__name">
+              <td className="doc-list__name" colSpan={3}>
+                <div className="folder-row__columns">
+                  <div className="folder-row__primary">
                     <div className="doc-list__name-content">
                       <span className="doc-name__title">
                         <span className="doc-name__primary">
@@ -222,9 +224,11 @@ const DocumentsList = ({
                         </span>
                       </span>
                     </div>
+                  </div>
+                  <div className="folder-row__meta">—</div>
+                  <div className="folder-row__meta">—</div>
+                </div>
               </td>
-              <td>—</td>
-              <td>—</td>
             </tr>
           );
         }

frontend/src/documents/panel/DocumentsPanel.jsx

@@ -196,7 +196,6 @@ const DocumentsPanel = ({
     [handleDocumentPreviewZoom, onInspectDocument],
   );
 
-  const selectedRowKeySet = useMemo(() => new Set(selectedEntries || []), [selectedEntries]);
   const navigableRows = useMemo(
     () => entries.map((entry) => ({ key: entry.key, type: entry.type, id: entry.id })),
     [entries],
@@ -234,21 +233,12 @@ const DocumentsPanel = ({
     }
 
     onFocusedRowChange?.(resolvedKey);
-
-    if (!selectedRowKeySet.has(resolvedKey) && typeof onEntrySelection === 'function') {
-      onEntrySelection(resolvedKey, {
-        shiftKey: false,
-        preventDefault: () => {},
-      });
-    }
   }, [
     focusedRowKey,
     navigableRowKeys,
     navigableRows,
-    onEntrySelection,
     onFocusedRowChange,
     selectedEntries,
-    selectedRowKeySet,
   ]);
 
   const handlePanelKeyDown = useCallback(

frontend/src/documents/useEntryPointer.js

@@ -14,11 +14,15 @@ export const isPrimaryPointerEvent = (event) => {
   return type === 'click' || type === 'pointerdown' || type === 'pointerup';
 };
 
+const EntryType = Object.freeze({
+  document: 'document',
+  folder: 'folder',
+});
+
 export const useEntryPointer = ({
   resolveDocumentRowKey,
   resolveFolderRowKey,
-  onSelectDocument,
+  onSelectEntry,
-  onSelectFolder,
   onInspectDocument,
 }) =>
   useCallback(
@@ -28,41 +32,34 @@ export const useEntryPointer = ({
       }
 
       const { type, id } = entry;
-      if (type !== 'document' && type !== 'folder') {
+      if (type !== EntryType.document && type !== EntryType.folder) {
         return;
       }
 
       const rowKey = entry.key
-        || (type === 'document' ? resolveDocumentRowKey?.(id) : resolveFolderRowKey?.(id));
+        || (type === EntryType.document ? resolveDocumentRowKey?.(id) : resolveFolderRowKey?.(id));
       if (!rowKey) {
         return;
       }
 
       const modifierClick = isPointerModifierEvent(event);
       const primaryClick = isPrimaryPointerEvent(event);
-      const metadata = { modifierClick, primaryClick, rowKey };
+      const metadata = { modifierClick, primaryClick, rowKey, type, id };
 
-      if (type === 'document') {
+      if (typeof onSelectEntry === 'function') {
-        if (typeof onSelectDocument === 'function') {
+        onSelectEntry(entry, event, metadata);
-          onSelectDocument(id, event, metadata);
       }
-        if (!modifierClick && primaryClick && typeof onInspectDocument === 'function') {
+
+      if (
+        type === EntryType.document
+        && !modifierClick
+        && primaryClick
+        && typeof onInspectDocument === 'function'
+      ) {
         onInspectDocument(id, metadata);
       }
-        return;
-      }
-
-      if (typeof onSelectFolder === 'function') {
-        onSelectFolder(id, event, metadata);
-      }
     },
-    [
+    [resolveDocumentRowKey, resolveFolderRowKey, onSelectEntry, onInspectDocument],
-      resolveDocumentRowKey,
-      resolveFolderRowKey,
-      onSelectDocument,
-      onSelectFolder,
-      onInspectDocument,
-    ],
   );
 
 export default useEntryPointer;

frontend/src/hooks/documents/useDocumentDragHandlers.js

@@ -29,6 +29,10 @@ const useDocumentDragHandlers = ({
     ({ documents = [], folders = [] } = {}) => {
       destroyDragPreview();
 
+      if (typeof document === 'undefined') {
+        return null;
+      }
+
       const docEntries = (documents || []).filter(Boolean);
       const folderEntries = (folders || []).filter(Boolean);
       const totalCount = docEntries.length + folderEntries.length;
@@ -54,6 +58,8 @@ const useDocumentDragHandlers = ({
       const wrapper = document.createElement('div');
       wrapper.className = 'document-drag-preview';
       wrapper.style.setProperty('--drag-preview-size', `${canvasSize}px`);
+      wrapper.style.width = `${canvasSize}px`;
+      wrapper.style.height = `${canvasSize}px`;
 
       visibleItems.forEach((item, index) => {
         const layer = document.createElement('div');
@@ -101,15 +107,23 @@ const useDocumentDragHandlers = ({
             layer.textContent = doc?.title || 'Document';
           }
         } else {
-          const folderId = item.payload;
+          const payload = item.payload;
-          const rowEl = folderId ? document.getElementById(`folder-row-${folderId}`) : null;
+          const folderId = typeof payload === 'string' ? payload : payload?.id;
-          const iconEl = rowEl?.querySelector('.thumb-icon');
+          const rowEl = folderId
+            ? document.getElementById(`folder-row-${folderId}`)
+              || document.getElementById(`folder-card-${folderId}`)
+            : null;
+          const iconEl = rowEl?.querySelector('.thumb-icon, .folder-card__icon');
           layer.style.width = `${size}px`;
           layer.style.height = `${size}px`;
+          layer.classList.add('document-drag-preview__item--folder');
 
           let content = null;
           if (iconEl instanceof HTMLElement) {
-            content = iconEl.cloneNode(true);
+            const cloneSource = iconEl.classList.contains('folder-card__icon')
+              ? iconEl.querySelector('svg') || iconEl
+              : iconEl;
+            content = cloneSource.cloneNode(true);
             content.classList.add('document-drag-preview__folder-thumb');
             const svg = content.querySelector('svg');
             if (svg) {
@@ -276,11 +290,19 @@ const useDocumentDragHandlers = ({
         console.warn('[documents] Failed to populate folder drag payload', error);
       }
 
-      const previewDocs = effectiveDocumentSelection
+      const previewNode = createDragPreview({
+        documents: effectiveDocumentSelection
           .map((id) => documentLookup.get(id) || null)
-        .filter(Boolean);
+          .filter(Boolean),
-      createDragPreview({ documents: previewDocs, folders: uniqueFolders });
+        folders: uniqueFolders,
+      });
       event.currentTarget.classList.add('dragging');
+
+      if (previewNode) {
+        const width = previewNode.offsetWidth || 96;
+        const height = previewNode.offsetHeight || 96;
+        event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
+      }
     },
     [
       selectedFolderIds,

frontend/src/hooks/documents/useDocumentsWorkspace.js

@@ -50,6 +50,11 @@ import useDocumentDragHandlers from './useDocumentDragHandlers';
 import useDocumentMutations from './useDocumentMutations';
 import useDetailWorkspace from '../../detail/useDetailWorkspace';
 
+const EntryType = Object.freeze({
+  document: 'document',
+  folder: 'folder',
+});
+
 const noop = () => {};
 
 const useDocumentsWorkspace = ({
@@ -1185,19 +1190,15 @@ const useDocumentsWorkspace = ({
   const handleEntryPointerCore = useEntryPointerCore({
     resolveDocumentRowKey,
     resolveFolderRowKey,
-    onSelectDocument: (documentId, event, { rowKey }) => {
+    onSelectEntry: (entry, event, { rowKey, modifierClick, primaryClick }) => {
-      const key = rowKey || resolveDocumentRowKey(documentId);
+      const { type, id } = entry;
+      const key = rowKey
+        || (type === EntryType.document ? resolveDocumentRowKey(id) : resolveFolderRowKey(id));
       if (key) {
         handleEntrySelection(key, event);
       }
-    },
+      if (type === EntryType.folder && !modifierClick && primaryClick) {
-    onSelectFolder: (folderId, event, { modifierClick, primaryClick, rowKey }) => {
+        selectFolder(id);
-      const key = rowKey || resolveFolderRowKey(folderId);
-      if (key) {
-        handleEntrySelection(key, event);
-      }
-      if (!modifierClick && primaryClick) {
-        selectFolder(folderId);
       }
     },
   });

frontend/src/hooks/documents/useFolderTree.js

@@ -85,9 +85,8 @@ const useFolderTree = ({
       })();
 
       setFocusedDocumentId(nextFocus);
-      selectionAnchorRef.current = nextDocKeys.length
+      const nextAnchor = mergedSelection.length ? mergedSelection[mergedSelection.length - 1] : null;
-        ? nextDocKeys[nextDocKeys.length - 1]
+      selectionAnchorRef.current = nextAnchor;
-        : null;
       selectionOrderRef.current = mergedSelection;
       setSelectionOrder(mergedSelection);
     },

frontend/src/styles/documents/drag-preview.css

@@ -0,0 +1,76 @@
+.document-drag-preview {
+  position: fixed;
+  pointer-events: none;
+  top: -9999px;
+  left: -9999px;
+  width: var(--drag-preview-size, 96px);
+  height: var(--drag-preview-size, 96px);
+  z-index: 9999;
+}
+
+.document-drag-preview__item {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  box-shadow: 0 6px 12px var(--shadow-pop);
+  overflow: hidden;
+  background-color: var(--overlay-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  transform: translate(-50%, -50%) rotate(var(--rotation-deg, 0deg));
+  transform-origin: center;
+}
+
+.document-drag-preview__item--folder {
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+.document-drag-preview__item--image {
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+
+.document-drag-preview__item .document-thumbnail,
+.document-drag-preview__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.document-drag-preview__item .thumb-placeholder,
+.document-drag-preview__item .thumb-placeholder * {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.document-drag-preview__folder-thumb {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.document-drag-preview__folder-thumb svg {
+  width: 48px;
+  height: 48px;
+  color: var(--accent-strong, var(--accent));
+}

frontend/src/styles/documents/listing.css

@@ -13,8 +13,28 @@
   min-height: 0;
 }
 
-.folder-row.is-drop-target {
+
-  outline: 2px dashed var(--accent);
+
+.documents-panel tr.folder.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
+  outline-offset: -2px;
+}
+
+.folder-row__columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 7rem 7rem;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.folder-row__meta {
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  text-align: left;
+}
+
+.documents-grid .folder-card.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
   outline-offset: 2px;
 }
 

frontend/src/styles/documents/viewer.css

@@ -63,6 +63,12 @@
   pointer-events: none;
 }
 
+.document-drag-preview__item--folder {
+  background: transparent;
+  box-shadow: none;
+  border-radius: 0;
+}
+
 .document-drag-preview__folder-thumb {
   width: 100%;
   height: 100%;

frontend/src/styles/index.css

@@ -6,6 +6,7 @@
 @import './documents/controls.css';
 @import './layout/structure.css';
 @import './documents/viewer.css';
+@import './documents/drag-preview.css';
 @import './documents/tags-correspondents.css';
 @import './documents/panel-sections.css';
 @import './sidebar/sidebar.css';

frontend/src/styles/sidebar/sidebar.css

@@ -23,6 +23,11 @@
   -webkit-user-select: none;
 }
 
+.sidebar .folder-row.is-drop-target {
+  outline: 2px dashed var(--accent-strong, var(--accent));
+  outline-offset: 2px;
+}
+
 .folder-row .name-wrap {
   display: inline-flex;
   align-items: center;