Select a document to view metadata, tags and actions.
;
- }
-
- const effectiveCardinality = singleEffectiveCardinality;
- const navCanGoPrev = Boolean(singlePreviewNavigator.canGoPrev);
- const navCanGoNext = Boolean(singlePreviewNavigator.canGoNext);
- const hasPreviewImage = Boolean(singlePreviewNavigator.currentUrl);
- const previewMissingAsset = !singlePreviewNavigator.currentUrl;
- const displayContentType = singleDoc.content_type || 'this file type';
- const displayFilename =
- singleDoc.filename || singleDoc.original_name || singleDoc.title || 'download';
- const previewFallback = previewMissingAsset ? (
-
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(
diff --git a/frontend/src/documents/panel/createDocumentsSurface.js b/frontend/src/documents/panel/createDocumentsSurface.js
index 1124db1..794e2f4 100644
--- a/frontend/src/documents/panel/createDocumentsSurface.js
+++ b/frontend/src/documents/panel/createDocumentsSurface.js
@@ -1,5 +1,5 @@
import React from 'react';
-import DetailPanel from '../../detail/DetailPanel';
+import DocumentViewerPanel from '../../preview/DocumentViewerPanel';
import SelectionFloatingActions from '../SelectionFloatingActions';
import createWorkspaceSurfaceConfig from '../workspaceHeader';
import DocumentsPanel from './DocumentsPanel';
@@ -91,7 +91,19 @@ const createDocumentsSurface = ({
: null;
const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
- const detail = detailOpen && detailProps ?
: null;
+ const detail = detailOpen && detailProps
+ ? (() => {
+ const { onClose, onOpenPreview, ...restDetailProps } = detailProps;
+ return (
+
+ );
+ })()
+ : null;
return createWorkspaceSurfaceConfig({
key: 'documents',
diff --git a/frontend/src/documents/useEntryPointer.js b/frontend/src/documents/useEntryPointer.js
index 826645f..4d5cb13 100644
--- a/frontend/src/documents/useEntryPointer.js
+++ b/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,
- onSelectFolder,
+ onSelectEntry,
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 onSelectDocument === 'function') {
- onSelectDocument(id, event, metadata);
- }
- if (!modifierClick && primaryClick && typeof onInspectDocument === 'function') {
- onInspectDocument(id, metadata);
- }
- return;
+ if (typeof onSelectEntry === 'function') {
+ onSelectEntry(entry, event, metadata);
}
- if (typeof onSelectFolder === 'function') {
- onSelectFolder(id, event, metadata);
+ if (
+ type === EntryType.document
+ && !modifierClick
+ && primaryClick
+ && typeof onInspectDocument === 'function'
+ ) {
+ onInspectDocument(id, metadata);
}
},
- [
- resolveDocumentRowKey,
- resolveFolderRowKey,
- onSelectDocument,
- onSelectFolder,
- onInspectDocument,
- ],
+ [resolveDocumentRowKey, resolveFolderRowKey, onSelectEntry, onInspectDocument],
);
export default useEntryPointer;
diff --git a/frontend/src/documents/useInlineRename.js b/frontend/src/documents/useInlineRename.js
index a2b2082..0961336 100644
--- a/frontend/src/documents/useInlineRename.js
+++ b/frontend/src/documents/useInlineRename.js
@@ -97,7 +97,7 @@ const useInlineRename = (
}
resetState();
return true;
- } catch (error) {
+ } catch {
return false;
} finally {
setSavingId((current) => (current === entityId ? null : current));
diff --git a/frontend/src/hooks/documents/useDocumentCorrespondentActions.js b/frontend/src/hooks/documents/useDocumentCorrespondentActions.js
index 8402795..b618d47 100644
--- a/frontend/src/hooks/documents/useDocumentCorrespondentActions.js
+++ b/frontend/src/hooks/documents/useDocumentCorrespondentActions.js
@@ -87,7 +87,7 @@ const useDocumentCorrespondentActions = ({
if (!target) {
try {
target = await handleCorrespondentCreate({ name: trimmed });
- } catch (error) {
+ } catch {
return;
}
}
@@ -127,4 +127,3 @@ const useDocumentCorrespondentActions = ({
};
export default useDocumentCorrespondentActions;
-
diff --git a/frontend/src/hooks/documents/useDocumentDragHandlers.js b/frontend/src/hooks/documents/useDocumentDragHandlers.js
index 3a09fee..b131e6d 100644
--- a/frontend/src/hooks/documents/useDocumentDragHandlers.js
+++ b/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;
@@ -53,24 +57,100 @@ 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 slot = document.createElement('div');
- slot.className = 'document-drag-preview__item';
- slot.style.setProperty('--index', String(index));
- slot.style.width = `${size}px`;
- slot.style.height = `${size}px`;
+ const layer = document.createElement('div');
+ layer.className = 'document-drag-preview__item';
+ layer.style.setProperty('--index', String(index));
+ const rotationMagnitude = Math.random() * 8 + 2;
+ const rotation = (index % 2 === 0 ? 1 : -1) * rotationMagnitude;
+ layer.style.setProperty('--rotation-deg', `${rotation}deg`);
if (item.type === 'document') {
- slot.textContent = item.payload?.title || 'Document';
+ const doc = item.payload;
+ const rowEl = doc?.id
+ ? document.getElementById(`document-row-${doc.id}`)
+ || document.getElementById(`document-card-${doc.id}`)
+ : null;
+ const wrapperEl = rowEl?.querySelector('.document-thumbnail-wrapper');
+ const thumbnailEl = rowEl?.querySelector('.document-thumbnail');
+ const placeholderEl = rowEl?.querySelector('.thumb-placeholder');
+ const aspectAttr = wrapperEl?.dataset?.thumbnailAspect;
+ const aspectRatio = aspectAttr ? parseFloat(aspectAttr) : null;
+
+ let thumbWidth = size;
+ let thumbHeight = size;
+ if (Number.isFinite(aspectRatio) && aspectRatio > 0) {
+ if (aspectRatio >= 1) {
+ thumbWidth = size;
+ thumbHeight = Math.max(size / aspectRatio, size * 0.5);
+ } else {
+ thumbHeight = size;
+ thumbWidth = Math.max(size * aspectRatio, size * 0.5);
+ }
+ }
+ layer.style.width = `${Math.round(thumbWidth)}px`;
+ layer.style.height = `${Math.round(thumbHeight)}px`;
+
+ const thumbSrc = thumbnailEl?.currentSrc || thumbnailEl?.src || null;
+ if (thumbSrc) {
+ layer.classList.add('document-drag-preview__item--image');
+ layer.style.backgroundImage = `url("${thumbSrc}")`;
+ } else if (placeholderEl instanceof HTMLElement) {
+ const clone = placeholderEl.cloneNode(true);
+ clone.style.pointerEvents = 'none';
+ layer.appendChild(clone);
+ } else {
+ layer.textContent = doc?.title || 'Document';
+ }
} else {
- slot.textContent = 'Folder';
+ const payload = item.payload;
+ const folderId = typeof payload === 'string' ? payload : payload?.id;
+ 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) {
+ 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) {
+ svg.setAttribute('width', '48');
+ svg.setAttribute('height', '48');
+ }
+ }
+
+ if (!content) {
+ content = document.createElement('div');
+ content.className = 'document-drag-preview__folder-placeholder';
+ content.textContent = 'Folder';
+ }
+
+ layer.appendChild(content);
}
- wrapper.appendChild(slot);
+
+ wrapper.appendChild(layer);
});
+ if (totalCount > 1) {
+ const badge = document.createElement('div');
+ badge.className = 'document-drag-preview__count';
+ badge.textContent = `${totalCount}`;
+ wrapper.appendChild(badge);
+ }
+
document.body.appendChild(wrapper);
dragPreviewRef.current = wrapper;
return wrapper;
@@ -97,7 +177,7 @@ const useDocumentDragHandlers = ({
: isGridView
? [...selectedDocumentIds, documentId]
: [documentId];
- const folderSelection = selectedFolderIds.length ? [...selectedFolderIds] : [];
+ const folderSelection = [];
if (!isAlreadySelected && !isGridView) {
applySelection([documentKey], {
@@ -143,7 +223,6 @@ const useDocumentDragHandlers = ({
},
[
selectedDocumentIds,
- selectedFolderIds,
applySelection,
documentLookup,
createDragPreview,
@@ -210,11 +289,19 @@ const useDocumentDragHandlers = ({
console.warn('[documents] Failed to populate folder drag payload', error);
}
- const previewDocs = effectiveDocumentSelection
- .map((id) => documentLookup.get(id) || null)
- .filter(Boolean);
- createDragPreview({ documents: previewDocs, folders: uniqueFolders });
+ const previewNode = createDragPreview({
+ documents: effectiveDocumentSelection
+ .map((id) => documentLookup.get(id) || null)
+ .filter(Boolean),
+ 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,
diff --git a/frontend/src/hooks/documents/useDocumentUploads.js b/frontend/src/hooks/documents/useDocumentUploads.js
index 50b6d2d..26dab19 100644
--- a/frontend/src/hooks/documents/useDocumentUploads.js
+++ b/frontend/src/hooks/documents/useDocumentUploads.js
@@ -175,7 +175,6 @@ const useDocumentUploads = ({
const entries = [];
let batch = [];
do {
- // eslint-disable-next-line no-await-in-loop
batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
if (batch.length) {
entries.push(...batch);
@@ -203,7 +202,6 @@ const useDocumentUploads = ({
const reader = entry.createReader();
const entries = await readAllEntries(reader);
for (const child of entries) {
- // eslint-disable-next-line no-await-in-loop
await walkEntry(child, nextAncestors);
}
}
@@ -306,7 +304,6 @@ const useDocumentUploads = ({
updateQueueItem(queueItem.id, patch);
Object.assign(queueItem, patch);
}
- // eslint-disable-next-line no-await-in-loop
const destinationId = segments.length
? await ensureFolderPathOnServer(baseFolderId, segments)
: baseFolderId;
@@ -316,7 +313,6 @@ const useDocumentUploads = ({
(targetFolderId && targetFolderId !== 'root' ? targetFolderId : 'root');
try {
- // eslint-disable-next-line no-await-in-loop
const { duplicate, statusCode, document, conflictDocumentId } = await uploadFile(
file,
uploadTarget,
diff --git a/frontend/src/hooks/documents/useDocumentsWorkspace.js b/frontend/src/hooks/documents/useDocumentsWorkspace.js
index f79dc09..f17a52c 100644
--- a/frontend/src/hooks/documents/useDocumentsWorkspace.js
+++ b/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 }) => {
- const key = rowKey || resolveDocumentRowKey(documentId);
+ onSelectEntry: (entry, event, { rowKey, modifierClick, primaryClick }) => {
+ const { type, id } = entry;
+ const key = rowKey
+ || (type === EntryType.document ? resolveDocumentRowKey(id) : resolveFolderRowKey(id));
if (key) {
handleEntrySelection(key, event);
}
- },
- onSelectFolder: (folderId, event, { modifierClick, primaryClick, rowKey }) => {
- const key = rowKey || resolveFolderRowKey(folderId);
- if (key) {
- handleEntrySelection(key, event);
- }
- if (!modifierClick && primaryClick) {
- selectFolder(folderId);
+ if (type === EntryType.folder && !modifierClick && primaryClick) {
+ selectFolder(id);
}
},
});
diff --git a/frontend/src/hooks/documents/useFolderTree.js b/frontend/src/hooks/documents/useFolderTree.js
index ce5f369..b0f7675 100644
--- a/frontend/src/hooks/documents/useFolderTree.js
+++ b/frontend/src/hooks/documents/useFolderTree.js
@@ -85,9 +85,8 @@ const useFolderTree = ({
})();
setFocusedDocumentId(nextFocus);
- selectionAnchorRef.current = nextDocKeys.length
- ? nextDocKeys[nextDocKeys.length - 1]
- : null;
+ const nextAnchor = mergedSelection.length ? mergedSelection[mergedSelection.length - 1] : null;
+ selectionAnchorRef.current = nextAnchor;
selectionOrderRef.current = mergedSelection;
setSelectionOrder(mergedSelection);
},
diff --git a/frontend/src/hooks/documents/useFolderTreeActions.js b/frontend/src/hooks/documents/useFolderTreeActions.js
index 8103619..29da7b1 100644
--- a/frontend/src/hooks/documents/useFolderTreeActions.js
+++ b/frontend/src/hooks/documents/useFolderTreeActions.js
@@ -96,7 +96,6 @@ const useFolderTreeActions = ({
const refreshTargets = new Set([previousParentKey, targetKey]);
for (const key of refreshTargets) {
- // eslint-disable-next-line no-await-in-loop
await ensureFolderData(key === 'root' ? 'root' : key, { force: true, prefetchDepth: 1 });
}
@@ -112,7 +111,6 @@ const useFolderTreeActions = ({
const refreshTargets = new Set([previousParentKey, targetKey]);
for (const key of refreshTargets) {
- // eslint-disable-next-line no-await-in-loop
await ensureFolderData(key === 'root' ? 'root' : key, { force: true, prefetchDepth: 1 });
}
}
@@ -516,7 +514,6 @@ const useFolderTreeActions = ({
}
for (const sourceId of folderIds) {
- // eslint-disable-next-line no-await-in-loop
await moveFolder(sourceId, folderId);
}
}
diff --git a/frontend/src/preview/DocumentViewerLayout.jsx b/frontend/src/preview/DocumentViewerLayout.jsx
new file mode 100644
index 0000000..964e5ea
--- /dev/null
+++ b/frontend/src/preview/DocumentViewerLayout.jsx
@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react';
+import DocumentInfoPanel from '../documents/DocumentInfoPanel';
+import { DownloadIcon } from '../ui/icons';
+
+const DocumentViewerLayout = ({
+ document,
+ previewEntry,
+ summaryProps,
+ metadataPayload,
+ contentTabConfig,
+ resetKey,
+ classNamePrefix = 'document-viewer',
+ defaultTabId = 'details',
+ infoPanelProps = {},
+ previewLoadingMessage = 'Preparing preview…',
+}) => {
+ const previewContent = useMemo(() => {
+ if (!document || !previewEntry?.url) {
+ return null;
+ }
+
+ const normalizedContentType = (previewEntry.contentType
+ || document.content_type
+ || '')
+ .toLowerCase();
+ const isImage = normalizedContentType.startsWith('image/');
+ const isPdf = normalizedContentType === 'application/pdf'
+ || normalizedContentType === 'application/x-pdf';
+
+ if (isImage) {
+ return (
+
+ );
+ }
+
+ if (isPdf) {
+ return (
+
+ );
+ }
+
+ const displayContentType = document.content_type || previewEntry.contentType || 'this file type';
+ const displayFilename = previewEntry.filename
+ || document.filename
+ || document.original_name
+ || 'download';
+
+ return (
+
+
+ Preview is not available for {displayContentType} files.
+
+
{displayFilename}
+
+
+ Download
+
+
+ );
+ }, [previewEntry, document]);
+
+ return (
+ <>
+
+
+ {!previewEntry?.url ? (
+
{previewLoadingMessage}
+ ) : (
+ previewContent
+ )}
+
+
+ );
+};
+
+export default DocumentViewerLayout;
diff --git a/frontend/src/preview/DocumentViewerPanel.jsx b/frontend/src/preview/DocumentViewerPanel.jsx
index 245aee6..8a5cb61 100644
--- a/frontend/src/preview/DocumentViewerPanel.jsx
+++ b/frontend/src/preview/DocumentViewerPanel.jsx
@@ -1,18 +1,81 @@
-import React, { useCallback, useMemo } from 'react';
-import { DownloadIcon, CloseIcon } from '../ui/icons';
+import React, {
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ DownloadIcon,
+ CloseIcon,
+ IconZoomInArea,
+ DetailPanelCollapseIcon,
+ WindowMaximizeIcon,
+} from '../ui/icons';
+import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
import {
buildCorrespondentOptions,
sortCorrespondents,
} from '../documents/DocumentSummarySection';
-import DocumentInfoPanel from '../documents/DocumentInfoPanel';
import { extractDocumentMetadataPayload } from '../documents/documentMetadata';
import { createDocumentActionState } from '../documents/documentActions';
import { resolveDocumentAssetUrl } from '../asset_manager';
+import PanelHeader from '../ui/PanelHeader';
+import BreadcrumbTrail from '../ui/BreadcrumbTrail';
+import { useAssetNavigator } from '../hooks/useAssetNavigator';
+import DocumentViewerLayout from './DocumentViewerLayout';
+import useViewerLayoutMode from './useViewerLayoutMode';
+
+export const createDocumentViewerHeaderActions = ({
+ document,
+ actionState,
+ previewEntry,
+ onZoom,
+ canZoom = false,
+}) => {
+ if (!document) {
+ return null;
+ }
+
+ const downloadHref = actionState?.downloadHref || previewEntry?.url;
+ if (!downloadHref && !(canZoom && onZoom)) {
+ return null;
+ }
+
+ return (
+ <>
+ {downloadHref ? (
+
+
+
+ ) : null}
+ {canZoom && onZoom ? (
+
+ ) : null}
+
+ );
+};
const DocumentViewerPanel = ({
document,
- documentId,
previewEntry,
+ hydrateDocument,
tagLookupById,
tagOptions,
onTagAdd,
@@ -22,10 +85,20 @@ const DocumentViewerPanel = ({
onCorrespondentRemove,
onUpdateTitle,
onUpdateIssued,
- hasOcr = false,
ensureAssetUrl,
getDocumentAsset,
+ ensurePreviewData,
+ resolveApiPath,
+ notifyApiError,
+ sidebarToggle = null,
+ onClosePanel,
+ resolveFolderPath,
+ variant = 'viewer',
+ onCollapsePanel,
+ onMaximizePanel,
}) => {
+ const navigate = useNavigate();
+ const isSidebarVariant = variant === 'sidebar';
const sortedCorrespondents = useMemo(
() => sortCorrespondents(document?.correspondents || []),
[document],
@@ -36,71 +109,18 @@ const DocumentViewerPanel = ({
[correspondents],
);
- const previewContent = useMemo(() => {
- if (!document || !previewEntry?.url) {
- return null;
- }
-
- const normalizedContentType = (previewEntry.contentType
- || document.content_type
- || '')
- .toLowerCase();
- const isImage = normalizedContentType.startsWith('image/');
- const isPdf = normalizedContentType === 'application/pdf'
- || normalizedContentType === 'application/x-pdf';
-
- if (isImage) {
- return (
-
- );
- }
-
- if (isPdf) {
- return (
-
- );
- }
-
- const displayContentType = document.content_type || previewEntry.contentType || 'this file type';
- const displayFilename = previewEntry.filename
- || document.filename
- || document.original_name
- || 'download';
-
- return (
-
-
- Preview is not available for {displayContentType} files.
-
-
{displayFilename}
-
-
- Download
-
-
- );
- }, [previewEntry, document]);
-
const metadataPayload = useMemo(
() => extractDocumentMetadataPayload(document),
[document],
);
+ const hasOcr = useMemo(() => {
+ if (!document || typeof getDocumentAsset !== 'function') {
+ return false;
+ }
+ return Boolean(getDocumentAsset(document, 'ocr-text'));
+ }, [document, getDocumentAsset]);
+
const summaryProps = useMemo(
() => ({
tagLookupById,
@@ -182,82 +202,296 @@ const DocumentViewerPanel = ({
[hasOcr, loadOcrContent],
);
- if (!document) {
- return (
+ const [zoomOverlayOpen, setZoomOverlayOpen] = useState(false);
+ const previewNavigator = useAssetNavigator({
+ document,
+ assetType: 'preview',
+ ensureAssetUrl,
+ getAsset: getDocumentAsset,
+ prefetch: 3,
+ });
+ const navigatorUrl = previewNavigator?.currentUrl;
+ const navigatorCanGoPrev = Boolean(previewNavigator?.canGoPrev);
+ const navigatorCanGoNext = Boolean(previewNavigator?.canGoNext);
+ const navigatorGoPrev = previewNavigator?.goPrev;
+ const navigatorGoNext = previewNavigator?.goNext;
+
+ const handleZoomOpen = useCallback(() => {
+ if (!previewEntry?.url) {
+ return;
+ }
+ setZoomOverlayOpen(true);
+ }, [previewEntry?.url]);
+
+ const handleZoomClose = useCallback(() => {
+ setZoomOverlayOpen(false);
+ }, []);
+
+ useEffect(() => {
+ setZoomOverlayOpen(false);
+ }, [previewEntry?.url, document?.id]);
+
+ useEffect(() => {
+ if (typeof hydrateDocument === 'function' && document?.id) {
+ hydrateDocument(document.id);
+ }
+ }, [hydrateDocument, document?.id]);
+
+ const panelRef = useRef(null);
+ const isStackedLayout = useViewerLayoutMode(panelRef, document?.id);
+
+ const viewerClassName = isStackedLayout
+ ? 'document-viewer document-viewer--stacked'
+ : 'document-viewer';
+
+ const actionState = useMemo(
+ () =>
+ document
+ ? createDocumentActionState({
+ document,
+ resolveApiPath,
+ ensurePreviewData,
+ ensureAssetUrl,
+ getDocumentAsset,
+ notifyApiError,
+ ocrErrorMessage: 'Unable to open OCR text.',
+ })
+ : null,
+ [
+ document,
+ resolveApiPath,
+ ensurePreviewData,
+ ensureAssetUrl,
+ getDocumentAsset,
+ notifyApiError,
+ ],
+ );
+
+ const breadcrumbs = useMemo(() => {
+ if (!document || typeof resolveFolderPath !== 'function') {
+ return [];
+ }
+ const folderSegments = resolveFolderPath(document.folder_id);
+ const normalizedSegments = Array.isArray(folderSegments)
+ ? folderSegments
+ .filter((segment) => segment && segment.id && segment.name)
+ .map((segment) => ({ id: segment.id, name: segment.name }))
+ : [];
+
+ return [
+ ...normalizedSegments,
+ { id: document.id, name: document.title },
+ ];
+ }, [document, resolveFolderPath]);
+
+ const handleBreadcrumbNavigate = useCallback(
+ (crumb) => {
+ if (!crumb?.id) {
+ return;
+ }
+ const target = crumb.id === 'root'
+ ? '/documents'
+ : `/documents/folder/${crumb.id}`;
+ navigate(target);
+ },
+ [navigate],
+ );
+
+ const breadcrumbTrailEntries = useMemo(() => {
+ if (!breadcrumbs.length) {
+ return [];
+ }
+ const lastIndex = breadcrumbs.length - 1;
+ return breadcrumbs.map((crumb, index) => ({
+ id: crumb.id,
+ label: crumb.name,
+ onClick: index < lastIndex ? () => handleBreadcrumbNavigate(crumb) : null,
+ }));
+ }, [breadcrumbs, handleBreadcrumbNavigate]);
+
+ const zoomDisplay = useMemo(() => {
+ if (navigatorUrl && document) {
+ return {
+ url: navigatorUrl,
+ alt: document.title,
+ canGoPrev: navigatorCanGoPrev,
+ canGoNext: navigatorCanGoNext,
+ goPrev: navigatorCanGoPrev ? navigatorGoPrev : undefined,
+ goNext: navigatorCanGoNext ? navigatorGoNext : undefined,
+ };
+ }
+ if (previewEntry?.url && document) {
+ return {
+ url: previewEntry.url,
+ alt: document.title,
+ canGoPrev: false,
+ canGoNext: false,
+ };
+ }
+ return null;
+ }, [
+ navigatorUrl,
+ navigatorCanGoPrev,
+ navigatorCanGoNext,
+ navigatorGoPrev,
+ navigatorGoNext,
+ previewEntry?.url,
+ document,
+ ]);
+
+ const headerActions = createDocumentViewerHeaderActions({
+ document,
+ actionState,
+ previewEntry,
+ onZoom: zoomDisplay ? handleZoomOpen : null,
+ canZoom: Boolean(zoomDisplay),
+ });
+
+ const collapseButton = isSidebarVariant && typeof onCollapsePanel === 'function'
+ ? (
+
+ )
+ : null;
+
+ const maximizeButton = isSidebarVariant && typeof onMaximizePanel === 'function'
+ ? (
+
+ )
+ : null;
+
+ const closeButton = !isSidebarVariant && onClosePanel
+ ? (
+
+ )
+ : null;
+
+ const headerLeadingButtons = isSidebarVariant
+ ? [collapseButton, maximizeButton].filter(Boolean)
+ : [sidebarToggle, closeButton].filter(Boolean);
+ const headerLeadingContent = headerLeadingButtons.length
+ ? (
+ <>
+ {headerLeadingButtons}
+
+ )
+ : null;
+
+ const loadingSection = (
+
-
- Loading document{documentId ? ` ${documentId}` : ''}…
-
+
Loading document…
+
+ );
+
+ const viewerSection = document ? (
+
+
+
+ ) : loadingSection;
+
+ const headerTitle = breadcrumbTrailEntries.length ? (
+
+ ) : (
+ document?.title || 'Document preview'
+ );
+
+ const overlay = (
+
+ );
+
+ if (isSidebarVariant) {
+ return (
+ <>
+
+ {overlay}
+
);
}
return (
-
-
-
- {!previewEntry?.url ? (
-
Loading preview…
- ) : (
- previewContent
- )}
-
+ <>
+
+ {overlay}
+
);
};
export default DocumentViewerPanel;
-export const createDocumentViewerHeaderActions = ({
- document,
- actionState,
-}) => {
- if (!document || !actionState) {
- return null;
- }
-
- const { downloadHref } = actionState;
-
- return (
- <>
- {downloadHref ? (
-
-
-
- ) : null}
-
- );
-};
-
export const createDocumentViewerSurface = ({
- documentId,
document,
previewEntry,
ensureAssetUrl,
@@ -278,80 +512,23 @@ export const createDocumentViewerSurface = ({
onUpdateIssued,
resolveFolderPath,
}) => {
- if (!documentId && !document) {
+ if (!document) {
return null;
}
- const title = document?.title || 'Document preview';
- const closeButton = onClose
- ? (
-
- )
+ const sidebarToggle = typeof renderSidebarToggle === 'function'
+ ? renderSidebarToggle()
: null;
- const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
- const leading = closeButton || sidebarToggle
- ? (
- <>
- {sidebarToggle}
- {closeButton}
-
- )
- : null;
- let breadcrumbs = null;
- if (document && typeof resolveFolderPath === 'function') {
- const folderSegments = resolveFolderPath(document.folder_id);
- const normalizedSegments = Array.isArray(folderSegments)
- ? folderSegments
- .filter((segment) => segment && segment.id && segment.name)
- .map((segment) => ({ id: segment.id, name: segment.name }))
- : [];
-
- breadcrumbs = [
- ...normalizedSegments,
- { id: document.id, name: document.title },
- ];
- }
-
- const actionState = document
- ? createDocumentActionState({
- document,
- resolveApiPath,
- ensurePreviewData,
- ensureAssetUrl,
- getDocumentAsset,
- notifyApiError,
- ocrErrorMessage: 'Unable to open OCR text.',
- })
- : null;
-
- const header = {
- title,
- subtitle: null,
- leading,
- actions: createDocumentViewerHeaderActions({
- document,
- actionState,
- }),
- breadcrumbs,
- };
return {
key: 'preview',
variant: 'preview',
- header,
+ header: null,
content: (
),
supportsDetail: false,
diff --git a/frontend/src/preview/useViewerLayoutMode.js b/frontend/src/preview/useViewerLayoutMode.js
new file mode 100644
index 0000000..054a410
--- /dev/null
+++ b/frontend/src/preview/useViewerLayoutMode.js
@@ -0,0 +1,99 @@
+import { useLayoutEffect, useState } from 'react';
+
+const PORTRAIT_WIDTH_TO_HEIGHT = 1 / Math.sqrt(2); // ≈0.707 (A-series aspect ratio)
+export const DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO = 0.4;
+const PORTRAIT_RATIO_STYLE_ID = 'document-viewer-portrait-ratio-style';
+
+const ensurePortraitRatioStyle = () => {
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ const cssValue = String(DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO);
+ const cssText = `:root { --document-viewer-portrait-height-ratio: ${cssValue}; }`;
+
+ let styleEl = document.getElementById(PORTRAIT_RATIO_STYLE_ID);
+ if (!styleEl) {
+ styleEl = document.createElement('style');
+ styleEl.id = PORTRAIT_RATIO_STYLE_ID;
+ document.head.appendChild(styleEl);
+ }
+
+ if (styleEl.textContent !== cssText) {
+ styleEl.textContent = cssText;
+ }
+};
+
+const computeStackedLayoutBreakpoint = () => {
+ const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 900;
+ const portraitViewportWidth = viewportHeight
+ * DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO
+ * PORTRAIT_WIDTH_TO_HEIGHT;
+ const detailsColumnWidth = 320; // px ~ 20rem for metadata & tabs
+ const gutterAllowance = 48; // padding + grid gap
+
+ return portraitViewportWidth + detailsColumnWidth + gutterAllowance;
+};
+
+export const useViewerLayoutMode = (ref, dependency) => {
+ const [isStacked, setIsStacked] = useState(false);
+
+ useLayoutEffect(() => {
+ ensurePortraitRatioStyle();
+ }, []);
+
+ useLayoutEffect(() => {
+ const node = ref?.current;
+ if (!node) {
+ setIsStacked(false);
+ return undefined;
+ }
+
+ let frame = null;
+ const commitMeasure = (width) => {
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ frame = requestAnimationFrame(() => {
+ const breakpoint = computeStackedLayoutBreakpoint();
+ setIsStacked(width < breakpoint);
+ });
+ };
+
+ const measure = () => {
+ commitMeasure(node.getBoundingClientRect().width);
+ };
+
+ measure();
+
+ if (typeof ResizeObserver === 'undefined') {
+ window.addEventListener('resize', measure);
+ return () => {
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ window.removeEventListener('resize', measure);
+ };
+ }
+
+ const observer = new ResizeObserver((entries) => {
+ if (!entries.length) {
+ return;
+ }
+ commitMeasure(entries[0].contentRect.width);
+ });
+
+ observer.observe(node);
+
+ return () => {
+ observer.disconnect();
+ if (frame) {
+ cancelAnimationFrame(frame);
+ }
+ };
+ }, [ref, dependency]);
+
+ return isStacked;
+};
+
+export default useViewerLayoutMode;
diff --git a/frontend/src/settings/components/CapabilityDropdown.jsx b/frontend/src/settings/components/CapabilityDropdown.jsx
index 30e6e14..c3784b0 100644
--- a/frontend/src/settings/components/CapabilityDropdown.jsx
+++ b/frontend/src/settings/components/CapabilityDropdown.jsx
@@ -111,6 +111,7 @@ const CapabilityDropdown = ({
role="menu"
ref={menuRef}
className="menu menu--floating capability-dropdown__menu"
+ data-floating-position
>
{total ? (
options.map((option) => {
diff --git a/frontend/src/settings/sections/ApiTokensSection.jsx b/frontend/src/settings/sections/ApiTokensSection.jsx
index b3ea68c..afe743a 100644
--- a/frontend/src/settings/sections/ApiTokensSection.jsx
+++ b/frontend/src/settings/sections/ApiTokensSection.jsx
@@ -132,7 +132,7 @@ const ApiTokensSection = ({
await navigator.clipboard.writeText(createdToken);
showSuccess();
return;
- } catch (error) {
+ } catch {
// Some browsers expose writeText but still reject outside secure context
setCanCopyToken(false);
}
diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index 84b084c..96e68bb 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/frontend/src/sidebar/Sidebar.jsx
@@ -512,9 +512,9 @@ const Sidebar = ({
style={tenantMenuStyle}
>
{showTenantList ? (
- <>
+
Switch tenant
-
+
{tenants.map((tenant) => {
const tenantId = tenant?.id || null;
const isActive = tenantId === activeTenantId;
@@ -523,7 +523,7 @@ const Sidebar = ({
-
+
) : null}
-
-
-
+
+
+
+
+
{themeMenuSection}
,
diff --git a/frontend/src/styles/base/theme.css b/frontend/src/styles/base/theme.css
index 6b7db9f..44bbe35 100644
--- a/frontend/src/styles/base/theme.css
+++ b/frontend/src/styles/base/theme.css
@@ -14,6 +14,7 @@
--surface-subtle: oklch(0.96 0.002 calc(var(--neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(0.32 0.005 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted: oklch(0.54 0.008 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+ --muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border));
--sidebar-fg: oklch(0.56 0.007 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--border: oklch(0.92 0.002 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
@@ -112,6 +113,7 @@
--surface-subtle: oklch(0.23 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(0.89 0.015 var(--dark-foreground-hue));
--muted: oklch(0.72 0.02 var(--dark-foreground-hue));
+ --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
--border: oklch(0.33 0.01 var(--dark-foreground-hue));
@@ -189,6 +191,7 @@
--surface-subtle: oklch(0.23 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
--fg: oklch(0.89 0.015 var(--dark-foreground-hue));
--muted: oklch(0.72 0.02 var(--dark-foreground-hue));
+ --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
--sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
--border: oklch(0.33 0.01 var(--dark-foreground-hue));
diff --git a/frontend/src/styles/detail/detail-panels.css b/frontend/src/styles/detail/detail-panels.css
index d559895..c30b43a 100644
--- a/frontend/src/styles/detail/detail-panels.css
+++ b/frontend/src/styles/detail/detail-panels.css
@@ -60,11 +60,24 @@
flex: 1;
display: flex;
flex-direction: column;
- overflow-y: auto;
min-height: 0;
padding: 0;
}
+.detail-panel__content {
+ flex: 1;
+ min-height: 0;
+ overflow: auto;
+}
+
+.detail-panel__content .document-viewer-panel {
+ flex: 1;
+}
+
+.detail-panel__content .document-viewer-panel__body {
+ padding: 0.5rem 0.5rem 0;
+}
+
.detail-section__header {
display: flex;
align-items: center;
@@ -80,6 +93,8 @@
}
.quick-add {
+ --quick-add-menu-offset: 0.35rem;
+ --quick-add-menu-min-width: 220px;
display: inline-flex;
align-items: center;
position: relative;
@@ -128,10 +143,6 @@
gap: 0.25rem;
}
-.quick-add__menu {
- padding: 0.25rem 0;
-}
-
.quick-add__form {
display: flex;
align-items: center;
@@ -172,12 +183,15 @@
.selection-assignment__menu {
font-size: 0.95rem;
font-weight: 400;
- padding: 0.4rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ padding: 0;
max-width: min(22rem, 90vw);
}
.selection-assignment__header {
- padding: 0.4rem 0.75rem 0.3rem;
+ padding: 0.5rem;
border-bottom: 1px solid var(--border-subtle);
}
@@ -193,14 +207,14 @@
.selection-assignment__header input:focus-visible {
outline: none;
- border-color: var(--selection-border);
- box-shadow: 0 0 0 2px color-mix(in oklch, var(--selection) 25%, transparent);
+ border-color: color-mix(in oklch, var(--accent) 60%, transparent);
+ box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent);
}
.selection-assignment__list {
- max-height: 240px;
+ max-height: max(240px, 50vh);
overflow-y: auto;
- padding: 0 0.75rem;
+ padding: 0 0.25rem 0.25rem;
}
.selection-assignment__item {
diff --git a/frontend/src/styles/documents/controls.css b/frontend/src/styles/documents/controls.css
index 8c5c8ac..24642cd 100644
--- a/frontend/src/styles/documents/controls.css
+++ b/frontend/src/styles/documents/controls.css
@@ -44,6 +44,10 @@
position: relative;
}
+.documents-sort__quickmenu {
+ --quick-add-menu-min-width: 200px;
+}
+
.documents-sort__trigger {
display: inline-flex;
align-items: center;
@@ -105,4 +109,3 @@
width: 1.1rem;
height: 1.1rem;
}
-
diff --git a/frontend/src/styles/documents/drag-preview.css b/frontend/src/styles/documents/drag-preview.css
new file mode 100644
index 0000000..ada971f
--- /dev/null
+++ b/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));
+}
diff --git a/frontend/src/styles/documents/listing.css b/frontend/src/styles/documents/listing.css
index 751336e..c7a0fc1 100644
--- a/frontend/src/styles/documents/listing.css
+++ b/frontend/src/styles/documents/listing.css
@@ -13,8 +13,15 @@
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;
+}
+
+.documents-grid .folder-card.is-drop-target {
+ outline: 2px dashed var(--accent-strong, var(--accent));
outline-offset: 2px;
}
diff --git a/frontend/src/styles/documents/panel-sections.css b/frontend/src/styles/documents/panel-sections.css
index de07a4f..3899f0c 100644
--- a/frontend/src/styles/documents/panel-sections.css
+++ b/frontend/src/styles/documents/panel-sections.css
@@ -84,19 +84,36 @@
cursor: default;
}
+.breadcrumb-trail--measure .breadcrumb-trail__link,
+.breadcrumb-trail--measure .breadcrumb-trail__ellipsis-button {
+ max-width: none;
+ overflow: visible;
+}
+
+button.breadcrumb-trail__link,
+.breadcrumb-trail__ellipsis-button {
+ padding: 0.25rem;
+ background: none;
+ border-radius: 0.25rem;
+}
+
.breadcrumb-trail__link:not(.is-current) {
cursor: pointer;
color: var(--accent);
}
.breadcrumb-trail__link:not(.is-current):hover,
-.breadcrumb-trail__link:not(.is-current):focus-visible {
+.breadcrumb-trail__link:not(.is-current):focus-visible,
+.panel-header .breadcrumb-trail__link:not(.is-current):hover,
+.panel-header .breadcrumb-trail__link:not(.is-current):focus-visible {
text-decoration: underline;
+ background: var(--accent-soft);
+ color: var(--accent);
}
.breadcrumb-trail__separator {
- color: var(--muted);
- margin: 0 0.2rem;
+ color: var(--muted-subtle);
+ margin: 0;
}
.breadcrumb-trail__ellipsis {
@@ -130,4 +147,3 @@
.panel-section__body.scrollable {
overflow-y: auto;
}
-
diff --git a/frontend/src/styles/documents/viewer.css b/frontend/src/styles/documents/viewer.css
index 74af8df..8623424 100644
--- a/frontend/src/styles/documents/viewer.css
+++ b/frontend/src/styles/documents/viewer.css
@@ -1,10 +1,67 @@
+.document-viewer-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ background: var(--bg);
+}
+
+.document-viewer-panel__body {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ padding: 0;
+ overflow: auto;
+}
+
+.document-viewer-panel__body--stacked {
+ flex-direction: column;
+}
+
+.document-viewer-panel__body--stacked .document-viewer,
+.document-viewer-panel__body--stacked .document-viewer--stacked {
+ min-height: auto;
+}
+
+.document-viewer-panel__body > .document-viewer,
+.document-viewer-panel__body > .document-viewer--loading {
+ flex: 1;
+}
+
.document-viewer {
flex: 1;
display: grid;
- grid-template-columns: minmax(0, 30em) minmax(0, 1fr);
+ grid-template-columns: minmax(0, clamp(18rem, 30vw, 26rem)) minmax(0, 1fr);
+ grid-template-areas: 'details viewport';
+ align-items: stretch;
gap: 1rem;
min-height: 0;
- padding: 1rem 1rem;
+ padding: 0.25rem 1rem 1rem;
+}
+
+.document-viewer--stacked {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem 1rem;
+ overflow: auto;
+}
+
+.document-viewer--stacked .document-viewer__viewport {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 2 2 auto;
+ max-height: calc(var(--document-viewer-portrait-height-ratio) * 100vh);
+ order: -1;
+}
+
+.document-viewer--stacked .document-viewer__details-pane {
+ flex: 1 1 auto;
+ overflow: visible;
+ order: 0;
}
.document-drag-preview {
@@ -17,7 +74,7 @@
z-index: 9999;
}
-.document-drag-preview__thumb {
+.document-drag-preview__item {
position: absolute;
top: 50%;
left: 50%;
@@ -38,23 +95,23 @@
transform-origin: center;
}
-.document-drag-preview__thumb--image {
+.document-drag-preview__item--image {
background-color: #000;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
-.document-drag-preview__thumb .document-thumbnail,
-.document-drag-preview__thumb img {
+.document-drag-preview__item .document-thumbnail,
+.document-drag-preview__item img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
-.document-drag-preview__thumb .thumb-placeholder,
-.document-drag-preview__thumb .thumb-placeholder * {
+.document-drag-preview__item .thumb-placeholder,
+.document-drag-preview__item .thumb-placeholder * {
width: 100%;
height: 100%;
display: flex;
@@ -63,6 +120,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%;
@@ -119,6 +182,7 @@
min-height: 0;
overflow: auto;
flex: 1;
+ grid-area: details;
}
.document-viewer__tabs-wrapper {
display: flex;
@@ -284,21 +348,35 @@
position: relative;
overflow: hidden;
align-items: flex-start;
+ justify-content: flex-start;
+ max-height: 100%;
+ grid-area: viewport;
}
.document-viewer__object {
width: 100%;
- height: 100%;
border: none;
}
+.document-viewer__object:not(.document-viewer__object--image) {
+ height: 100%;
+}
+
.document-viewer__object--image {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
- align-self: flex-start;
+}
+
+.document-viewer--stacked .document-viewer__object:not(.document-viewer__object--image) {
+ height: calc(var(--document-viewer-portrait-height-ratio) * 100vh);
+ max-height: 100%;
+}
+
+.document-viewer--stacked .document-viewer__object--image {
+ height: auto;
}
.document-viewer__unsupported {
@@ -332,4 +410,3 @@
width: 1rem;
height: 1rem;
}
-
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 884e2fd..e313188 100644
--- a/frontend/src/styles/index.css
+++ b/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';
diff --git a/frontend/src/styles/layout/structure.css b/frontend/src/styles/layout/structure.css
index 4f07e1e..e2712c6 100644
--- a/frontend/src/styles/layout/structure.css
+++ b/frontend/src/styles/layout/structure.css
@@ -98,7 +98,7 @@
.main-content__actions-divider {
display: inline-flex;
align-items: center;
- color: var(--muted);
+ color: var(--muted-subtle);
}
.main-content__title {
diff --git a/frontend/src/styles/sidebar/sidebar.css b/frontend/src/styles/sidebar/sidebar.css
index 2adf0bd..a1a8479 100644
--- a/frontend/src/styles/sidebar/sidebar.css
+++ b/frontend/src/styles/sidebar/sidebar.css
@@ -13,7 +13,7 @@
align-items: center;
gap: 0.22rem;
padding: 0.32rem 0.48rem;
- border-radius: 8px;
+ border-radius: 0.5rem;
cursor: pointer;
color: inherit;
transition: background 0.12s ease, color 0.12s ease;
@@ -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;
@@ -83,12 +88,12 @@
transform: translateY(-50%);
display: flex;
gap: 0;
+ margin-right: 0.3rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
background-color: var(--surface-overlay);
- border-radius: 8px;
- padding: 0 0.18rem;
+ border-radius: 0.2rem;
}
.folder-row__actions .icon-button {
@@ -99,6 +104,7 @@
.folder-row:focus-within .folder-row__actions {
opacity: 1;
pointer-events: auto;
+ background-color: var(--surface-overlay);
}
.folder-children {
@@ -229,14 +235,19 @@
border-radius: 0.5rem;
box-shadow: 0 12px 28px var(--shadow-strong);
min-width: 220px;
- z-index: 20;
+ z-index: 2500000;
overflow: hidden;
}
+.menu[data-floating-position] {
+ top: auto;
+ left: auto;
+ min-width: var(--floating-min-width, 220px);
+}
+
.menu__list {
- max-height: 260px;
overflow-y: auto;
- padding: 0.35rem 0.5rem;
+ padding: 0.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
@@ -263,9 +274,9 @@
justify-content: flex-start;
gap: 0.5rem;
width: 100%;
- padding: 0.45rem 0.75rem;
+ padding: 0.5rem 0.75rem;
border: none;
- border-radius: 0.4rem;
+ border-radius: 0.25rem;
background: none;
color: var(--sidebar-fg);
font: inherit;
@@ -299,6 +310,7 @@
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
+ text-align: left;
}
.menu__check-slot {
@@ -321,15 +333,18 @@
font-size: 0.85rem;
}
-.menu__footer {
- border-top: 1px solid var(--border-muted, var(--border));
+.menu__wrapper {
padding: 0.35rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
-.menu--simple .menu__footer {
+.menu__section {
+ border-top: 1px solid var(--border-muted, var(--border));
+}
+
+.menu__section:first-of-type {
border-top: none;
}
@@ -391,6 +406,20 @@
transition: background 0.15s ease, color 0.15s ease;
}
+.menu__button .menu__check-slot {
+ width: 1rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--accent);
+}
+
+.menu__button.active {
+ font-weight: 600;
+ color: var(--accent);
+ background: var(--accent-soft);
+}
+
.menu__button:hover,
.menu__button:focus-visible {
background: var(--sidebar-hover-bg);
diff --git a/frontend/src/ui/BreadcrumbTrail.jsx b/frontend/src/ui/BreadcrumbTrail.jsx
index ea21983..a6fed37 100644
--- a/frontend/src/ui/BreadcrumbTrail.jsx
+++ b/frontend/src/ui/BreadcrumbTrail.jsx
@@ -24,7 +24,8 @@ const normalizeEntries = (entries) =>
const ELLIPSIS = { id: '__breadcrumbs_ellipsis__', label: '…', onClick: null, raw: null };
const WIDTH_TOLERANCE = 1;
-const WIDTH_BUFFER_RATIO = 0.99;
+const WIDTH_BUFFER_RATIO = 0.95;
+const WIDTH_CHANGE_TOLERANCE = 0.25;
const BreadcrumbTrail = ({
entries = [],
@@ -43,6 +44,7 @@ const BreadcrumbTrail = ({
const ellipsisButtonRef = useRef(null);
const [availableWidth, setAvailableWidth] = useState(null);
const [startIndex, setStartIndex] = useState(0);
+ const measureRafRef = useRef(null);
const {
isOpen: ellipsisMenuOpen,
@@ -58,18 +60,13 @@ const BreadcrumbTrail = ({
});
useEffect(() => {
- setStartIndex(0);
closeEllipsisMenu();
}, [normalized, shouldTruncateFromStart, closeEllipsisMenu]);
useEffect(() => {
- const container = containerRef.current;
- if (!container || typeof ResizeObserver === 'undefined') {
- return undefined;
- }
-
- const updateWidth = () => {
- const host = containerRef.current;
+ const resolveHost = () => containerRef.current?.parentElement || containerRef.current;
+ const measure = () => {
+ const host = resolveHost();
if (!host) {
return;
}
@@ -77,14 +74,56 @@ const BreadcrumbTrail = ({
if (!nextWidth) {
return;
}
- setAvailableWidth((prev) => (prev && Math.abs(prev - nextWidth) < 0.5 ? prev : nextWidth));
+ setAvailableWidth((prev) => (
+ prev && Math.abs(prev - nextWidth) < WIDTH_CHANGE_TOLERANCE ? prev : nextWidth
+ ));
};
- updateWidth();
+ const scheduleMeasure = () => {
+ if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
+ measure();
+ return;
+ }
+ if (measureRafRef.current) {
+ cancelAnimationFrame(measureRafRef.current);
+ }
+ measureRafRef.current = window.requestAnimationFrame(() => {
+ measureRafRef.current = null;
+ measure();
+ });
+ };
- const observer = new ResizeObserver(updateWidth);
- observer.observe(container.parentElement || container);
- return () => observer.disconnect();
+ scheduleMeasure();
+
+ if (typeof ResizeObserver === 'undefined') {
+ return () => {
+ if (measureRafRef.current) {
+ cancelAnimationFrame(measureRafRef.current);
+ measureRafRef.current = null;
+ }
+ };
+ }
+
+ const host = resolveHost();
+ if (!host) {
+ return () => {
+ if (measureRafRef.current) {
+ cancelAnimationFrame(measureRafRef.current);
+ measureRafRef.current = null;
+ }
+ };
+ }
+
+ const observer = new ResizeObserver(scheduleMeasure);
+ observer.observe(host);
+
+ return () => {
+ observer.disconnect();
+ if (measureRafRef.current) {
+ cancelAnimationFrame(measureRafRef.current);
+ measureRafRef.current = null;
+ }
+ };
}, []);
useLayoutEffect(() => {
@@ -94,7 +133,8 @@ const BreadcrumbTrail = ({
const container = containerRef.current;
const measurement = measurementRef.current;
- if (!container || !measurement) {
+ const host = container?.parentElement || container;
+ if (!container || !measurement || !host) {
return;
}
@@ -115,18 +155,15 @@ const BreadcrumbTrail = ({
for (let start = 0; start < entryNodes.length; start += 1) {
entryNodes.forEach((node, index) => {
// Hide entries that fall before the visible window.
- // eslint-disable-next-line no-param-reassign
node.style.display = index < start ? 'none' : '';
});
separatorNodes.forEach((node) => {
const targetIndex = Number(node.getAttribute('data-target-index'));
- // eslint-disable-next-line no-param-reassign
node.style.display = targetIndex < Math.max(start, 1) ? 'none' : '';
});
if (ellipsisNode) {
- // eslint-disable-next-line no-param-reassign
ellipsisNode.style.display = start > 0 ? '' : 'none';
}
@@ -134,21 +171,18 @@ const BreadcrumbTrail = ({
}
entryNodes.forEach((node, index) => {
- // eslint-disable-next-line no-param-reassign
node.style.display = originalEntryDisplay[index] ?? '';
});
separatorNodes.forEach((node, index) => {
- // eslint-disable-next-line no-param-reassign
node.style.display = originalSeparatorDisplay[index] ?? '';
});
if (ellipsisNode) {
- // eslint-disable-next-line no-param-reassign
ellipsisNode.style.display = originalEllipsisDisplay ?? 'none';
}
- const available = availableWidth ?? container.getBoundingClientRect().width;
+ const available = availableWidth ?? host.getBoundingClientRect().width;
if (!available || !widths.length) {
return;
}
@@ -289,33 +323,43 @@ const BreadcrumbTrail = ({
className="breadcrumb-trail breadcrumb-trail--measure"
aria-hidden="true"
>
-
{ELLIPSIS.label}
-
- {measurementEntries.map((entry, index) => (
-
- {index > 0 ? (
-
+ {measurementEntries.map((entry, index) => {
+ const isLast = index === measurementEntries.length - 1;
+ const isInteractive = Boolean(entry.onClick) && !isLast;
+ const MeasurementTag = isInteractive ? 'button' : 'span';
+
+ return (
+
+ {index > 0 ? (
+
+ {separator}
+
+ ) : null}
+
- {separator}
-
- ) : null}
-
- {entry.label}
-
-
- ))}
+ {entry.label}
+
+
+ );
+ })}
{ellipsisMenuOpen
&& hasHiddenEntries
@@ -327,6 +371,7 @@ const BreadcrumbTrail = ({
role="menu"
ref={ellipsisMenuRef}
style={ellipsisMenuStyle}
+ data-floating-position
>
{hiddenEntries.map((hiddenEntry) => (
diff --git a/frontend/src/ui/QuickAddMenu.jsx b/frontend/src/ui/QuickAddMenu.jsx
index f239735..2def0e2 100644
--- a/frontend/src/ui/QuickAddMenu.jsx
+++ b/frontend/src/ui/QuickAddMenu.jsx
@@ -144,6 +144,23 @@ const QuickAddMenu = ({
);
const canCreate = Boolean(onCreate);
+ const isAnchoredMenu = positionStrategy === 'absolute' && align === 'start';
+ const menuClassName = 'menu menu--floating';
+ const anchoredMenuStyle = isAnchoredMenu && menuStyle
+ ? {
+ top: menuStyle.top,
+ left: menuStyle.left,
+ ...(menuStyle.width ? { width: menuStyle.width } : null),
+ }
+ : undefined;
+ const menuInlineStyle = isAnchoredMenu ? anchoredMenuStyle : menuStyle || undefined;
+ const hasFloatingWidthVar = Boolean(menuInlineStyle && Object.prototype.hasOwnProperty.call(menuInlineStyle, '--floating-min-width'));
+ const menuStyleWithVar = hasFloatingWidthVar
+ ? menuInlineStyle
+ : {
+ ...(menuInlineStyle || {}),
+ '--floating-min-width': `${Math.max(menuMinWidth, 0)}px`,
+ };
return (
@@ -162,10 +179,11 @@ const QuickAddMenu = ({
{isOpen ? (
{canCreate ? (
) : null}
-
+
{filteredOptions.length ? (
filteredOptions.map((option) => {
const key = option.id ?? option.index;
diff --git a/frontend/src/ui/icons.js b/frontend/src/ui/icons.js
index d8a8dfc..f839a7b 100644
--- a/frontend/src/ui/icons.js
+++ b/frontend/src/ui/icons.js
@@ -1,6 +1,7 @@
import {
IconChevronRight as TablerChevronRight,
IconDownload as TablerDownload,
+ IconZoomInArea as TablerZoomInArea,
IconPencil,
IconTagFilled,
IconUserFilled,
@@ -118,6 +119,15 @@ export const DownloadIcon = ({ className, size = '1em', stroke = 1.6, ...rest })
/>
);
+export const IconZoomInArea = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
+
+);
+
export const ViewListIcon = ({ className, size = '1em', stroke = 1.6, ...rest }) => (
{
position: metrics.strategy === 'absolute' ? 'absolute' : 'fixed',
top: metrics.top,
left: metrics.left,
- minWidth: metrics.minWidth,
};
+ if (typeof metrics.minWidth === 'number') {
+ style['--floating-min-width'] = `${Math.max(metrics.minWidth, 0)}px`;
+ }
if (metrics.width) {
style.width = metrics.width;
}
diff --git a/frontend/src/utils/ocr.js b/frontend/src/utils/ocr.js
index 3acbb2c..b2b8177 100644
--- a/frontend/src/utils/ocr.js
+++ b/frontend/src/utils/ocr.js
@@ -66,7 +66,7 @@ export async function openOcrTextInNewTab(options) {
if (popupAvailable) {
try {
popup.opener = null;
- } catch (error) {
+ } catch {
/* ignore */
}
}
@@ -83,7 +83,7 @@ export async function openOcrTextInNewTab(options) {
if (popupAvailable) {
try {
popup.location.replace(url);
- } catch (navigationError) {
+ } catch {
try {
popup.location.href = url;
} catch (secondError) {
@@ -96,7 +96,7 @@ export async function openOcrTextInNewTab(options) {
if (finalWindow) {
try {
finalWindow.opener = null;
- } catch (error) {
+ } catch {
/* ignore */
}
}