+ {label}
+
+ )}
+ triggerAriaLabel={`Sort by ${label}`}
+ triggerTitle={`Sort by ${label}`}
+ placeholder="Select sort field"
+ menuMinWidth={200}
+ align="start"
+ positionStrategy="absolute"
+ />
+ );
+};
+
+export default SortFieldQuickMenu;
diff --git a/frontend/src/documents/panel/createDocumentsSurface.js b/frontend/src/documents/panel/createDocumentsSurface.js
new file mode 100644
index 0000000..1124db1
--- /dev/null
+++ b/frontend/src/documents/panel/createDocumentsSurface.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import DetailPanel from '../../detail/DetailPanel';
+import SelectionFloatingActions from '../SelectionFloatingActions';
+import createWorkspaceSurfaceConfig from '../workspaceHeader';
+import DocumentsPanel from './DocumentsPanel';
+import { createDocumentsTableHeaderActions } from './DocumentsToolbar';
+
+const createDocumentsSurface = ({
+ tableProps,
+ parentBreadcrumb,
+ onNavigateParent,
+ renderSidebarToggle,
+ detailProps,
+ detailOpen = false,
+}) => {
+ const {
+ currentFolderName,
+ breadcrumbs,
+ searchResults,
+ isFilterActive,
+ viewMode,
+ onViewModeChange,
+ onRefresh,
+ sortField,
+ sortDirection,
+ onSortFieldChange,
+ onSortDirectionToggle,
+ selectedDocumentIds,
+ selectedFolderIds,
+ onDeleteSelection,
+ onClearSelection,
+ tags,
+ correspondents,
+ documentLookup,
+ tagLookupById,
+ onBulkTagAdd,
+ onBulkTagRemove,
+ onBulkCorrespondentAdd,
+ onBulkCorrespondentRemove,
+ onBulkReanalyze,
+ folderOptions,
+ onMoveDocumentsToFolder,
+ searchIncludeDescendants,
+ onToggleSearchIncludeDescendants,
+ onInspectDocument,
+ } = tableProps;
+
+ const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
+ const subtitle = Array.isArray(searchResults)
+ ? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
+ : null;
+
+ const documentSelectionCount = Array.isArray(selectedDocumentIds) ? selectedDocumentIds.length : 0;
+ const folderSelectionCount = Array.isArray(selectedFolderIds) ? selectedFolderIds.length : 0;
+ const selectionCount = documentSelectionCount + folderSelectionCount;
+
+ const actions = createDocumentsTableHeaderActions({
+ viewMode,
+ onViewModeChange,
+ onRefresh,
+ sortField,
+ onSortFieldChange,
+ sortDirection,
+ onSortDirectionToggle,
+ isFilterActive,
+ includeDescendants: searchIncludeDescendants,
+ onToggleIncludeDescendants: onToggleSearchIncludeDescendants,
+ });
+
+ const floatingActions = selectionCount > 0
+ ? (
+
+ )
+ : null;
+
+ const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+ const detail = detailOpen && detailProps ? : null;
+
+ return createWorkspaceSurfaceConfig({
+ key: 'documents',
+ variant: 'documents',
+ title,
+ subtitle,
+ sidebarToggle,
+ parentBreadcrumb,
+ onNavigateParent,
+ actions,
+ breadcrumbs,
+ selectionLabel: null,
+ floatingActions,
+ content: (
+
+ ),
+ detail,
+ });
+};
+
+export default createDocumentsSurface;
diff --git a/frontend/src/documents/useEntryPointer.js b/frontend/src/documents/useEntryPointer.js
index f2a4eea..826645f 100644
--- a/frontend/src/documents/useEntryPointer.js
+++ b/frontend/src/documents/useEntryPointer.js
@@ -14,11 +14,12 @@ export const isPrimaryPointerEvent = (event) => {
return type === 'click' || type === 'pointerdown' || type === 'pointerup';
};
-export const useEntryPointerHandler = ({
+export const useEntryPointer = ({
resolveDocumentRowKey,
resolveFolderRowKey,
onSelectDocument,
onSelectFolder,
+ onInspectDocument,
}) =>
useCallback(
(entry, event) => {
@@ -39,16 +40,20 @@ export const useEntryPointerHandler = ({
const modifierClick = isPointerModifierEvent(event);
const primaryClick = isPrimaryPointerEvent(event);
+ const metadata = { modifierClick, primaryClick, rowKey };
if (type === 'document') {
if (typeof onSelectDocument === 'function') {
- onSelectDocument(id, event, { modifierClick, primaryClick, rowKey });
+ onSelectDocument(id, event, metadata);
+ }
+ if (!modifierClick && primaryClick && typeof onInspectDocument === 'function') {
+ onInspectDocument(id, metadata);
}
return;
}
if (typeof onSelectFolder === 'function') {
- onSelectFolder(id, event, { modifierClick, primaryClick, rowKey });
+ onSelectFolder(id, event, metadata);
}
},
[
@@ -56,7 +61,8 @@ export const useEntryPointerHandler = ({
resolveFolderRowKey,
onSelectDocument,
onSelectFolder,
+ onInspectDocument,
],
);
-export default useEntryPointerHandler;
+export default useEntryPointer;
diff --git a/frontend/src/hooks/documents/useDocumentUploads.js b/frontend/src/hooks/documents/useDocumentUploads.js
index a04bd22..50b6d2d 100644
--- a/frontend/src/hooks/documents/useDocumentUploads.js
+++ b/frontend/src/hooks/documents/useDocumentUploads.js
@@ -2,6 +2,26 @@ import { useCallback, useRef, useState } from 'react';
import useFileDrop from './useFileDrop';
import { DEFAULT_FOLDER_NAME, hasFiles } from '../../app/appLayoutUtils';
+const mapFilesToEntries = (filesInput) => {
+ if (!filesInput) {
+ return [];
+ }
+ const files = Array.isArray(filesInput) ? filesInput : Array.from(filesInput);
+ return files
+ .filter(Boolean)
+ .map((file) => {
+ const relativePath =
+ typeof file.webkitRelativePath === 'string' ? file.webkitRelativePath : '';
+ const segments = relativePath
+ ? relativePath
+ .split('/')
+ .slice(0, -1)
+ .filter(Boolean)
+ : [];
+ return { file, segments };
+ });
+};
+
const useDocumentUploads = ({
apiClient,
token,
@@ -9,8 +29,6 @@ const useDocumentUploads = ({
currentFolderName,
ensureFolderData,
refreshCurrentFolder,
- notifyApiError,
- setStatusMessage,
setLoading,
shellRef,
}) => {
@@ -20,12 +38,13 @@ const useDocumentUploads = ({
});
const dragCounterRef = useRef(0);
const folderPathCacheRef = useRef(new Map());
+ const queueIdRef = useRef(0);
+ const [uploadQueue, setUploadQueue] = useState([]);
const uploadFile = useCallback(
async (file, targetFolderId) => {
if (!file || file.size === 0) {
- setStatusMessage('Skipped empty file.', 'error');
- return null;
+ return { document: null, duplicate: false, statusCode: null, conflictDocumentId: null };
}
const formData = new FormData();
@@ -37,22 +56,71 @@ const useDocumentUploads = ({
try {
const { data, status } = await apiClient.post('/documents', formData);
const duplicate = data?.reused || status === 200;
- setStatusMessage(
- duplicate
- ? `${file.name} already exists; reused existing document.`
- : `Uploaded ${file.name}`,
- duplicate ? 'info' : 'success',
- );
- return data;
+ const document = data?.document ?? data ?? null;
+ return {
+ document,
+ duplicate,
+ statusCode: status ?? (duplicate ? 200 : 201),
+ conflictDocumentId: null,
+ };
} catch (error) {
+ if (error.response?.status === 409) {
+ const conflictId = error.response?.data?.details?.conflict_document_id ?? null;
+ let conflictDocument = null;
+ if (conflictId) {
+ try {
+ const { data } = await apiClient.get(`/documents/${conflictId}`);
+ conflictDocument = data?.document ?? data ?? null;
+ } catch (fetchError) {
+ console.warn('[Uploads] failed to fetch conflict document', fetchError);
+ }
+ }
+ return {
+ document: conflictDocument,
+ duplicate: true,
+ statusCode: 409,
+ conflictDocumentId: conflictId,
+ };
+ }
const message = error.response?.data?.error || `Failed to upload ${file.name}.`;
- notifyApiError(error, message);
- throw error;
+ const wrapped = Object.assign(new Error(message), { response: error.response });
+ throw wrapped;
}
},
- [apiClient, notifyApiError, setStatusMessage],
+ [apiClient],
);
+ const appendQueueItems = useCallback((entries, targetFolderId) => {
+ const baseId = Date.now();
+ const items = entries.map(({ file }) => {
+ queueIdRef.current += 1;
+ return {
+ id: `upload-${baseId}-${queueIdRef.current}`,
+ name: file?.name || 'Unnamed file',
+ size: file?.size ?? null,
+ folderId: targetFolderId ?? selectedFolder ?? 'root',
+ status: 'pending',
+ error: null,
+ code: null,
+ document: null,
+ conflictDocumentId: null,
+ };
+ });
+ if (items.length) {
+ setUploadQueue((current) => [...current, ...items]);
+ }
+ return items;
+ }, [selectedFolder]);
+
+ const updateQueueItem = useCallback((id, patch) => {
+ if (!id) {
+ return;
+ }
+ setUploadQueue((current) =>
+ current.map((item) => (item.id === id ? { ...item, ...patch } : item)),
+ );
+ }, []);
+
const ensureFolderPathOnServer = useCallback(
async (baseFolderId, segments) => {
const trimmedSegments = segments.map((segment) => segment.trim()).filter(Boolean);
@@ -200,10 +268,25 @@ const useDocumentUploads = ({
return results;
}, []);
- const handleFileDrop = useCallback(
- async (dataTransfer, targetFolderId) => {
+ const uploadFileEntries = useCallback(
+ async (entries, targetFolderId) => {
+ if (!entries || !entries.length) {
+ console.warn('[Uploads] No files to upload.');
+ return;
+ }
+
+ const queueItems = appendQueueItems(entries, targetFolderId);
+
if (!token) {
- setStatusMessage('Please log in before uploading.', 'error');
+ queueItems.forEach((item) => {
+ const patch = {
+ status: 'error',
+ error: 'Please log in before uploading.',
+ code: null,
+ };
+ updateQueueItem(item.id, patch);
+ Object.assign(item, patch);
+ });
return;
}
@@ -212,23 +295,17 @@ const useDocumentUploads = ({
try {
folderPathCacheRef.current.clear();
- let extracted;
- try {
- extracted = await extractFilesFromDataTransfer(dataTransfer);
- } catch (error) {
- const message = error.message || 'Failed to process dropped files.';
- notifyApiError(error, message);
- return;
- }
-
- if (!extracted.length) {
- setStatusMessage('No files to upload.', 'info');
- return;
- }
const baseFolderId =
targetFolderId && targetFolderId !== 'root' ? targetFolderId : null;
- for (const { file, segments } of extracted) {
+ for (let index = 0; index < entries.length; index += 1) {
+ const { file, segments } = entries[index];
+ const queueItem = queueItems[index];
+ if (queueItem) {
+ const patch = { status: 'uploading', error: null, code: null };
+ updateQueueItem(queueItem.id, patch);
+ Object.assign(queueItem, patch);
+ }
// eslint-disable-next-line no-await-in-loop
const destinationId = segments.length
? await ensureFolderPathOnServer(baseFolderId, segments)
@@ -238,8 +315,34 @@ const useDocumentUploads = ({
destinationId ??
(targetFolderId && targetFolderId !== 'root' ? targetFolderId : 'root');
- // eslint-disable-next-line no-await-in-loop
- await uploadFile(file, uploadTarget);
+ try {
+ // eslint-disable-next-line no-await-in-loop
+ const { duplicate, statusCode, document, conflictDocumentId } = await uploadFile(
+ file,
+ uploadTarget,
+ );
+ if (queueItem) {
+ const patch = {
+ status: duplicate ? 'duplicate' : 'success',
+ code: statusCode ?? null,
+ document: document || queueItem.document,
+ conflictDocumentId: conflictDocumentId ?? queueItem.conflictDocumentId,
+ };
+ updateQueueItem(queueItem.id, patch);
+ Object.assign(queueItem, patch);
+ }
+ } catch (error) {
+ if (queueItem) {
+ const patch = {
+ status: 'error',
+ error: error.response?.data?.error || error.message || 'Upload failed.',
+ code: error.response?.status ?? null,
+ };
+ updateQueueItem(queueItem.id, patch);
+ Object.assign(queueItem, patch);
+ }
+ continue;
+ }
}
await refreshCurrentFolder();
@@ -252,25 +355,60 @@ const useDocumentUploads = ({
await ensureFolderData(targetFolderId, { force: true, prefetchDepth: 1 });
}
} catch (error) {
- notifyApiError(error, 'Failed to upload files.');
+ const message = error.message || 'Failed to upload files.';
+ queueItems.forEach((item) => {
+ if (item.status === 'success' || item.status === 'duplicate' || item.status === 'error') {
+ return;
+ }
+ const patch = {
+ status: 'error',
+ error: message,
+ code: error.response?.status ?? null,
+ };
+ updateQueueItem(item.id, patch);
+ Object.assign(item, patch);
+ });
+ console.error('[Uploads] batch failed', error);
} finally {
setLoading(false);
}
},
[
token,
- extractFilesFromDataTransfer,
ensureFolderPathOnServer,
uploadFile,
refreshCurrentFolder,
selectedFolder,
ensureFolderData,
- notifyApiError,
- setStatusMessage,
setLoading,
+ appendQueueItems,
+ updateQueueItem,
],
);
+ const handleFileDrop = useCallback(
+ async (dataTransfer, targetFolderId) => {
+ let extracted;
+ try {
+ extracted = await extractFilesFromDataTransfer(dataTransfer);
+ } catch (error) {
+ console.error('[Uploads] Failed to process dropped files.', error);
+ return;
+ }
+
+ await uploadFileEntries(extracted, targetFolderId);
+ },
+ [extractFilesFromDataTransfer, uploadFileEntries],
+ );
+
+ const handleFileSelection = useCallback(
+ async (files, targetFolderId) => {
+ const entries = mapFilesToEntries(files);
+ await uploadFileEntries(entries, targetFolderId);
+ },
+ [uploadFileEntries],
+ );
+
useFileDrop({
shellRef,
token,
@@ -287,6 +425,11 @@ const useDocumentUploads = ({
const resetUploadsState = useCallback(() => {
dragCounterRef.current = 0;
setDropOverlayState({ active: false, folderName: DEFAULT_FOLDER_NAME });
+ setUploadQueue([]);
+ }, []);
+
+ const clearUploadQueue = useCallback(() => {
+ setUploadQueue([]);
}, []);
return {
@@ -294,9 +437,12 @@ const useDocumentUploads = ({
setDropOverlayState,
dragCounterRef,
handleFileDrop,
+ handleFileSelection,
uploadFile,
extractFilesFromDataTransfer,
resetUploadsState,
+ uploadQueue,
+ clearUploadQueue,
};
};
diff --git a/frontend/src/hooks/documents/useDocumentsWorkspace.js b/frontend/src/hooks/documents/useDocumentsWorkspace.js
index 28eb0cb..f79dc09 100644
--- a/frontend/src/hooks/documents/useDocumentsWorkspace.js
+++ b/frontend/src/hooks/documents/useDocumentsWorkspace.js
@@ -12,7 +12,7 @@ import usePasskeys from '../../settings/usePasskeys';
import { useManagementModals } from '../../app/useManagementModals';
import { api, useAppDispatch, useAppState } from '../../app/appState';
import useWorkspaceSelection from '../../app/useWorkspaceSelection';
-import { useEntryPointerHandler as useEntryPointerCore } from '../../documents/useEntryPointer';
+import { useEntryPointer as useEntryPointerCore } from '../../documents/useEntryPointer';
import { isTagTransferEvent } from '../../documents/tagTransfer';
import useDocumentsSelection from '../../documents/hooks/useDocumentsSelection';
import useBulkDocumentActions from '../../documents/hooks/useBulkDocumentActions';
@@ -65,8 +65,6 @@ const useDocumentsWorkspace = ({
onToggleSearchIncludeDescendants,
onSetSearchIncludeDescendants,
sortRefreshReadyRef,
- deskHelpOpen = false,
- setDeskHelpOpen,
handleDeskExit,
} = {}) => {
const handleDocumentsViewModeChange = onDocumentsViewModeChange || noop;
@@ -74,7 +72,6 @@ const useDocumentsWorkspace = ({
const handleDocumentsSortDirectionToggle = onDocumentsSortDirectionToggle || noop;
const toggleSearchIncludeDescendants = onToggleSearchIncludeDescendants || noop;
const setSearchIncludeDescendants = onSetSearchIncludeDescendants || noop;
- const setDeskHelpOpenSafe = setDeskHelpOpen || noop;
const handleDeskExitSafe = handleDeskExit || noop;
const fallbackSortFieldRef = useRef(documentsSortField);
@@ -533,6 +530,9 @@ const useDocumentsWorkspace = ({
const {
dropOverlayState,
handleFileDrop,
+ handleFileSelection,
+ uploadQueue,
+ clearUploadQueue,
resetUploadsState,
} = useDocumentUploads({
apiClient: api,
@@ -623,6 +623,7 @@ const useDocumentsWorkspace = ({
assetManager.reset();
resetPreviewState();
resetUploadsState();
+ clearUploadQueue();
breadcrumbFetchRef.current = new Set();
detailFolderFetchRef.current = new Set();
bootstrapInitializedRef.current = false;
@@ -653,6 +654,7 @@ const useDocumentsWorkspace = ({
setActivePreviewId,
resetPreviewState,
resetUploadsState,
+ clearUploadQueue,
]);
useEffect(() => {
@@ -1022,9 +1024,27 @@ const useDocumentsWorkspace = ({
setStatusMessage,
});
+ const [settingsOpen, setSettingsOpen] = useState(false);
const openSettings = useCallback(() => {
- navigate('/settings');
- }, [navigate]);
+ setSettingsOpen(true);
+ }, []);
+ const closeSettings = useCallback(() => {
+ setSettingsOpen(false);
+ }, []);
+
+ useEffect(() => {
+ if (!settingsOpen) {
+ return undefined;
+ }
+ const handleKeyDown = (event) => {
+ if (event.key === 'Escape') {
+ event.preventDefault();
+ setSettingsOpen(false);
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [settingsOpen]);
useEffect(
() => () => {
@@ -1371,6 +1391,8 @@ const useDocumentsWorkspace = ({
currentTenantId,
handleTenantSelect,
openSettings,
+ handleFileSelection,
+ uploadQueue,
});
@@ -1421,8 +1443,6 @@ const useDocumentsWorkspace = ({
searchQuery,
activeCorrespondentFilters,
selectedFolder,
- setDeskHelpOpen: setDeskHelpOpenSafe,
- deskHelpOpen,
openDetailPanel,
});
@@ -1476,6 +1496,8 @@ const useDocumentsWorkspace = ({
openSettings,
detailPanelOpen,
openDetailPanel,
+ uploadQueue,
+ clearUploadQueue,
}),
[
token,
@@ -1526,6 +1548,8 @@ const useDocumentsWorkspace = ({
openSettings,
detailPanelOpen,
openDetailPanel,
+ uploadQueue,
+ clearUploadQueue,
],
);
@@ -1537,6 +1561,8 @@ const useDocumentsWorkspace = ({
dropOverlayState,
managementModals,
contextValue,
+ settingsOpen,
+ closeSettings,
};
};
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 78a38a0..4e334ad 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -3,7 +3,7 @@ import '@fontsource/inter/400.css';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
-import './styles.css';
+import './styles/index.css';
import { AppStateProvider } from './app/appState';
import AppRouter from './app/AppRouter';
diff --git a/frontend/src/settings/sections/ApiTokensSection.jsx b/frontend/src/settings/sections/ApiTokensSection.jsx
index fd65511..b3ea68c 100644
--- a/frontend/src/settings/sections/ApiTokensSection.jsx
+++ b/frontend/src/settings/sections/ApiTokensSection.jsx
@@ -365,9 +365,6 @@ const ApiTokensSection = ({
const selectedSet = token?.capability_set_id
? capabilitySetMap[token.capability_set_id]
: null;
- const capabilityList = Array.isArray(token?.capabilities) && token.capabilities.length
- ? token.capabilities
- : selectedSet?.capabilities || [];
const capabilitySetLabel = selectedSet?.label
|| selectedSet?.slug
|| token.capability_set_id
@@ -386,15 +383,6 @@ const ApiTokensSection = ({
{capabilitySetsLoading ? (
Loading capability sets…
) : null}
- {!capabilitySetsLoading && capabilityList.length ? (
-
- {capabilityList.map((value) => (
-
- {formatCapabilityLabel(value)}
-
- ))}
-
- ) : null}
{isRevoked ? (
diff --git a/frontend/src/sidebar/Sidebar.jsx b/frontend/src/sidebar/Sidebar.jsx
index ac576af..84b084c 100644
--- a/frontend/src/sidebar/Sidebar.jsx
+++ b/frontend/src/sidebar/Sidebar.jsx
@@ -16,6 +16,7 @@ import {
SunIcon,
MoonIcon,
DesktopIcon,
+ UploadIcon,
} from '../ui/icons';
import PanelHeader from '../ui/PanelHeader';
import useFloatingMenu from '../ui/useFloatingMenu';
@@ -187,6 +188,7 @@ const Sidebar = ({
activeTenantId = null,
onSelectTenant,
onOpenSettings,
+ onUploadFiles,
}) => {
const {
setCollapsed,
@@ -197,6 +199,7 @@ const Sidebar = ({
cycleThemeMode,
themeModes,
} = useSidebarContext();
+ const uploadInputRef = useRef(null);
const handleCollapse = useCallback(() => {
setCollapsed(true);
}, [setCollapsed]);
@@ -258,6 +261,26 @@ const Sidebar = ({
onCreateFolder?.();
}, [creatingFolder, onCreateFolder]);
+ const handleUploadButtonClick = useCallback(() => {
+ if (!onUploadFiles || !uploadInputRef.current) {
+ return;
+ }
+ uploadInputRef.current.click();
+ }, [onUploadFiles]);
+
+ const handleUploadInputChange = useCallback(
+ (event) => {
+ const files = event.target?.files;
+ if (files && files.length && onUploadFiles) {
+ onUploadFiles(files, selectedFolder);
+ }
+ if (event.target) {
+ event.target.value = '';
+ }
+ },
+ [onUploadFiles, selectedFolder],
+ );
+
const handleNeutralHueReset = useCallback(() => {
resetNeutralHue();
}, [resetNeutralHue]);
@@ -294,6 +317,50 @@ const Sidebar = ({
cycleThemeMode();
}, [cycleThemeMode]);
+ const themeMenuSection =
+ typeof neutralHue === 'number' || typeof neutralHue === 'string'
+ ? (
+
+
+ Theme
+
+
+
+
+
+
+
-
- Theme
-
-
-
-
-
-
- |