+
+
+
+
+ {surface.content}
+ {surfaceDetail}
+
Drop files to upload to {folderName || 'this location'}
diff --git a/frontend/src/app/LoginRoute.jsx b/frontend/src/app/LoginRoute.tsx
similarity index 87%
rename from frontend/src/app/LoginRoute.jsx
rename to frontend/src/app/LoginRoute.tsx
index fcf7370..df75310 100644
--- a/frontend/src/app/LoginRoute.jsx
+++ b/frontend/src/app/LoginRoute.tsx
@@ -11,11 +11,31 @@ import {
} from '../utils/webauthn';
import { api, useAppDispatch, useAppState } from './appState';
-const LoginRoute = () => {
- const { status: appStatus, tenantSelection } = useAppState();
+type StatusVariant = 'info' | 'success' | 'error';
+
+interface StatusMessage {
+ message: string;
+ variant: StatusVariant;
+}
+
+interface TenantOption {
+ id?: string | number | null;
+ name?: string | null;
+}
+
+interface TenantSelectionState {
+ selectionToken?: string | null;
+ tenants?: TenantOption[];
+}
+
+
+const LoginRoute: React.FC = () => {
+ const appState = useAppState();
+ const { status: appStatus } = appState;
+ const tenantSelection = (appState.tenantSelection ?? null) as TenantSelectionState | null;
const appDispatch = useAppDispatch();
const location = useLocation();
- const [status, setStatus] = useState(null);
+ const [status, setStatus] = useState(null);
const [selectingTenantId, setSelectingTenantId] = useState(null);
const passkeySupported = isWebAuthnAvailable();
const [passkeyLoading, setPasskeyLoading] = useState(false);
@@ -37,26 +57,24 @@ const LoginRoute = () => {
let combined = extract(location.search);
- if (typeof window !== 'undefined') {
- const hash = window.location.hash || '';
- const queryIndex = hash.indexOf('?');
- if (queryIndex !== -1) {
- const hashQuery = hash.slice(queryIndex + 1);
- const hashParams = extract(`?${hashQuery}`);
- combined = {
- token: combined.token || hashParams.token,
- username: combined.username || hashParams.username,
- preferredTenantId: combined.preferredTenantId || hashParams.preferredTenantId,
- };
- }
- if (!combined.token) {
- const searchParams = extract(window.location.search);
- combined = {
- token: combined.token || searchParams.token,
- username: combined.username || searchParams.username,
- preferredTenantId: combined.preferredTenantId || searchParams.preferredTenantId,
- };
- }
+ const hash = window.location.hash || '';
+ const queryIndex = hash.indexOf('?');
+ if (queryIndex !== -1) {
+ const hashQuery = hash.slice(queryIndex + 1);
+ const hashParams = extract(`?${hashQuery}`);
+ combined = {
+ token: combined.token || hashParams.token,
+ username: combined.username || hashParams.username,
+ preferredTenantId: combined.preferredTenantId || hashParams.preferredTenantId,
+ };
+ }
+ if (!combined.token) {
+ const searchParams = extract(window.location.search);
+ combined = {
+ token: combined.token || searchParams.token,
+ username: combined.username || searchParams.username,
+ preferredTenantId: combined.preferredTenantId || searchParams.preferredTenantId,
+ };
}
return combined;
@@ -96,10 +114,6 @@ const LoginRoute = () => {
);
const clearMagicParamsFromUrl = useCallback(() => {
- if (typeof window === 'undefined') {
- return;
- }
-
const removableKeys = ['magic_token', 'username', 'preferred_tenant_id'];
const currentSearch = new URLSearchParams(window.location.search);
let searchChanged = false;
@@ -184,7 +198,7 @@ const LoginRoute = () => {
const handlePasskeyLogin = useCallback(
async (rawUsername) => {
- const username = typeof rawUsername === 'string' ? rawUsername.trim() : '';
+ const username = rawUsername?.trim?.() || '';
if (!username) {
setStatusMessage('Enter your username before using a passkey.', 'error');
return;
@@ -207,13 +221,18 @@ const LoginRoute = () => {
const publicKey = preparePublicKeyRequestOptions({ publicKey: publicKeyOptions });
setStatusMessage('Confirm the passkey prompt to continue.', 'info');
- const assertion = await navigator.credentials.get({ publicKey });
+ const assertion = await navigator.credentials.get({ publicKey }) as PublicKeyCredential | null;
if (!assertion) {
setStatusMessage('Passkey login cancelled.', 'info');
return;
}
+ if (!(assertion instanceof PublicKeyCredential)) {
+ setStatusMessage('Unexpected credential response.', 'error');
+ return;
+ }
+
const serialized = serializeAuthenticationCredential(assertion);
const finishPayload = {
challengeId,
@@ -289,7 +308,11 @@ const LoginRoute = () => {
setStatusMessage('Signing you in…', 'info');
try {
- const payload = {
+ const payload: {
+ magic_token: string;
+ username?: string;
+ preferred_tenant_id?: string | number;
+ } = {
magic_token: magicToken,
};
if (magicUsername) {
@@ -381,7 +404,7 @@ const LoginRoute = () => {
const handleSignup = useCallback(
async (rawUsername) => {
- const username = typeof rawUsername === 'string' ? rawUsername.trim() : '';
+ const username = rawUsername?.trim?.() || '';
if (!username) {
setStatusMessage('Choose a username to create your account.', 'error');
return;
@@ -405,13 +428,18 @@ const LoginRoute = () => {
const publicKey = preparePublicKeyCreationOptions({ publicKey: publicKeyOptions });
setStatusMessage('Confirm the passkey prompt to finish creating your account.', 'info');
- const credential = await navigator.credentials.create({ publicKey });
+ const credential = await navigator.credentials.create({ publicKey }) as PublicKeyCredential | null;
if (!credential) {
setStatusMessage('Signup cancelled.', 'info');
return;
}
+ if (!(credential instanceof PublicKeyCredential)) {
+ setStatusMessage('Unexpected credential response.', 'error');
+ return;
+ }
+
const serialized = serializeRegistrationCredential(credential);
const finishPayload = {
signup_token: signupToken,
@@ -459,8 +487,8 @@ const LoginRoute = () => {
);
const redirectTarget = useMemo(() => {
- const target = location.state?.from;
- if (typeof target === 'string' && target.startsWith('/')) {
+ const target = String(location.state?.from ?? '');
+ if (target.startsWith('/')) {
return target;
}
return '/documents';
diff --git a/frontend/src/app/PanelManagerContext.js b/frontend/src/app/PanelManagerContext.tsx
similarity index 52%
rename from frontend/src/app/PanelManagerContext.js
rename to frontend/src/app/PanelManagerContext.tsx
index 91fa6da..714a640 100644
--- a/frontend/src/app/PanelManagerContext.js
+++ b/frontend/src/app/PanelManagerContext.tsx
@@ -1,4 +1,5 @@
import React, {
+ ReactNode,
createContext,
useCallback,
useContext,
@@ -7,38 +8,85 @@ import React, {
useRef,
useState,
} from 'react';
+import type { CSSProperties, PointerEvent as ReactPointerEvent, RefObject } from 'react';
import { useSidebarContext } from '../sidebar/SidebarContext';
-const PanelManagerContext = createContext(null);
+type PanelKey = 'sidebar' | 'detail';
-const PANEL_LIMITS = {
- sidebar: { minRatio: 1 / 6, maxRatio: 1 / 4 },
- detail: { minRatio: 1 / 4, maxRatio: 3 / 4 },
+interface PanelLimits {
+ maxRatio: number;
+ minPx: number;
+}
+
+interface SetPanelWidthOptions {
+ commit?: boolean;
+ log?: boolean;
+}
+
+interface PanelManagerContextValue {
+ sidebarWidth: number;
+ detailWidth: number;
+ sidebarSuppressed: boolean;
+ resizingPanel: PanelKey | null;
+ setPanelWidth: (panel: PanelKey, width: number, options?: SetPanelWidthOptions) => number;
+ startPanelResize: (panel: PanelKey) => void;
+ stopPanelResize: () => void;
+ getPanelWidth: (panel: PanelKey) => number;
+ setDetailActive: (isOpen: boolean) => void;
+ closeDetailPanel: () => void;
+ collapseSidebar: () => void;
+ expandSidebar: () => void;
+ registerDetailCloseHandler: (handler?: (() => void) | null) => void;
+ detailPanelOpen: boolean;
+}
+
+type PanelResizeBindings = {
+ panelStyle?: CSSProperties;
+ handleProps: {
+ onPointerDown?: (event: ReactPointerEvent) => void;
+ };
+ isPanelResizing: boolean;
};
-const STORAGE_KEYS = {
+const PanelManagerContext = createContext(null);
+
+const PANEL_LIMITS: Record = {
+ sidebar: {
+ maxRatio: 1 / 3,
+ minPx: 280,
+ },
+ detail: {
+ maxRatio: 2 / 3,
+ minPx: 320,
+ },
+};
+
+const STORAGE_KEYS: Record = {
sidebar: 'papercrate_sidebar_width',
detail: 'papercrate_detail_width',
};
-const MINIMAL_FREE_RATIO = 1 / 3;
+const DEFAULT_SIDEBAR_WIDTH = 320;
+const DEFAULT_DETAIL_WIDTH = 420;
-const clampPanelWidth = (panel, value) => {
+const MINIMAL_FREE_RATIO = 1 / 3;
+const SIDEBAR_SOLO_THRESHOLD = 1 / 2;
+const MINIMUM_MAIN_CONTENT_WIDTH = 160;
+
+const clampPanelWidth = (panel: PanelKey, value: number): number => {
const numeric = Number(value);
const limits = PANEL_LIMITS[panel];
- if (!limits) {
- return numeric;
- }
const viewport = window.innerWidth;
- const minLimit = Math.max(0, Math.round(viewport * limits.minRatio));
- const rawMax = Math.max(minLimit, Math.round(viewport * limits.maxRatio));
- const maxAllowed = Math.min(rawMax, viewport - 160);
- const targetMax = Math.max(minLimit, maxAllowed);
- return Math.min(Math.max(numeric, minLimit), targetMax);
+ const minLimit = Math.max(0, limits.minPx);
+ const ratioMax = Math.round(viewport * limits.maxRatio);
+ const rawMax = Math.max(ratioMax, minLimit);
+ const maxAllowed = Math.min(rawMax, viewport - MINIMUM_MAIN_CONTENT_WIDTH);
+ const targetMax = Math.min(viewport, Math.max(minLimit, maxAllowed));
+ return Math.min(Math.max(numeric, minLimit), Math.max(0, targetMax));
};
-const readStoredWidth = (panel, fallback) => {
- const raw = window?.localStorage?.getItem(STORAGE_KEYS[panel]);
+const readStoredWidth = (panel: PanelKey, fallback: number): number => {
+ const raw = window.localStorage.getItem(STORAGE_KEYS[panel]);
if (!raw) {
return fallback;
}
@@ -46,22 +94,27 @@ const readStoredWidth = (panel, fallback) => {
return Number.isFinite(parsed) ? parsed : fallback;
};
-const persistWidth = (panel, value) => {
- window?.localStorage?.setItem(STORAGE_KEYS[panel], String(Math.round(value)));
+const persistWidth = (panel: PanelKey, value: number): void => {
+ window.localStorage.setItem(STORAGE_KEYS[panel], String(Math.round(value)));
};
-const applyPanelWidthToRoot = (panel, width) => {
+const applyPanelWidthToRoot = (panel: PanelKey, width: number, active: boolean): void => {
if (!Number.isFinite(width)) {
return;
}
const varName = panel === 'sidebar' ? '--sidebar-width' : '--detail-panel-width';
- document?.documentElement?.style.setProperty(varName, `${width}px`);
+ const resolvedValue = panel === 'detail' && !active ? '0px' : `${width}px`;
+ document.documentElement.style.setProperty(varName, resolvedValue);
};
-export const PanelManagerProvider = ({ children }) => {
+interface PanelManagerProviderProps {
+ children: ReactNode;
+}
+
+export const PanelManagerProvider: React.FC = ({ children }) => {
const { collapsed, setCollapsed } = useSidebarContext();
- const initialSidebarWidth = readStoredWidth('sidebar', 320);
- const initialDetailWidth = readStoredWidth('detail', 420);
+ const initialSidebarWidth = readStoredWidth('sidebar', DEFAULT_SIDEBAR_WIDTH);
+ const initialDetailWidth = readStoredWidth('detail', DEFAULT_DETAIL_WIDTH);
const [sidebarWidth, setSidebarWidthState] = useState(() => clampPanelWidth('sidebar', initialSidebarWidth));
const [detailWidth, setDetailWidthState] = useState(() => clampPanelWidth('detail', initialDetailWidth));
@@ -71,6 +124,7 @@ export const PanelManagerProvider = ({ children }) => {
const detailCloseHandlerRef = useRef(null);
const panelWidthsRef = useRef({ sidebar: sidebarWidth, detail: detailWidth });
+ const preferredPanelWidthsRef = useRef({ sidebar: sidebarWidth, detail: detailWidth });
const closeDetailPanel = useCallback(() => {
const handler = detailCloseHandlerRef.current;
@@ -79,23 +133,20 @@ export const PanelManagerProvider = ({ children }) => {
useEffect(() => {
panelWidthsRef.current.sidebar = sidebarWidth;
- applyPanelWidthToRoot('sidebar', sidebarWidth);
+ applyPanelWidthToRoot('sidebar', sidebarWidth, true);
}, [sidebarWidth]);
useEffect(() => {
panelWidthsRef.current.detail = detailWidth;
- applyPanelWidthToRoot('detail', detailWidth);
- }, [detailWidth]);
+ applyPanelWidthToRoot('detail', detailWidth, detailPanelOpen);
+ }, [detailWidth, detailPanelOpen]);
- useEffect(() => {
- persistWidth('sidebar', sidebarWidth);
- }, [sidebarWidth]);
-
- useEffect(() => {
- persistWidth('detail', detailWidth);
- }, [detailWidth]);
-
- const logPanelState = useCallback((panel, action, value) => {
+ const handlePanelLayoutChange = useCallback((
+ panel: PanelKey,
+ action: 'opened' | 'closed' | 'resized',
+ value?: number,
+ { detailOpen }: { detailOpen?: boolean } = {},
+ ) => {
const viewportWidth = window.innerWidth;
const sidebarWidth = panelWidthsRef.current.sidebar;
const detailWidth = panelWidthsRef.current.detail;
@@ -103,6 +154,7 @@ export const PanelManagerProvider = ({ children }) => {
const freeRatio = viewportWidth > 0 ? freeSpace / viewportWidth : 0;
const meetsThreshold = freeRatio >= MINIMAL_FREE_RATIO;
+ const effectiveDetailOpen = detailOpen ?? detailPanelOpen;
if (panel === 'detail' && !collapsed) {
if (action === 'opened' || action === 'resized') {
@@ -112,34 +164,20 @@ export const PanelManagerProvider = ({ children }) => {
}
}
- if (panel === 'sidebar' && (action === 'opened' || action === 'resized') && !meetsThreshold && detailPanelOpen) {
+ if (panel === 'sidebar' && (action === 'opened' || action === 'resized') && !meetsThreshold && effectiveDetailOpen) {
closeDetailPanel();
}
-
- const normalizedAction = action === 'resized'
- ? `${panel} resized to ${value}px`
- : `${panel} ${action}`;
- console.log(normalizedAction, {
- sidebar: sidebarWidth > 0 ? `${sidebarWidth}px` : 'closed',
- detail: `${detailWidth}px`,
- freeSpace,
- viewportWidth,
- freeRatio,
- minimalFreeRatio: MINIMAL_FREE_RATIO,
- meetsThreshold,
- });
- }, [collapsed, sidebarSuppressed, closeDetailPanel, detailPanelOpen]);
+ }, [collapsed, closeDetailPanel, detailPanelOpen]);
const collapseSidebar = useCallback(() => {
if (!collapsed) {
setCollapsed(true);
- setSidebarSuppressed(false);
- logPanelState('sidebar', 'closed');
+ handlePanelLayoutChange('sidebar', 'closed');
}
- }, [collapsed, setCollapsed, logPanelState]);
+ }, [collapsed, setCollapsed, handlePanelLayoutChange]);
const setPanelWidth = useCallback(
- (panel, width, commit = true) => {
+ (panel: PanelKey, width: number, { commit = true, log = true }: SetPanelWidthOptions = {}) => {
const clamped = clampPanelWidth(panel, width);
if (!Number.isFinite(clamped)) {
return panelWidthsRef.current[panel];
@@ -150,36 +188,79 @@ export const PanelManagerProvider = ({ children }) => {
setDetailWidthState((prev) => (prev === clamped ? prev : clamped));
}
panelWidthsRef.current[panel] = clamped;
- applyPanelWidthToRoot(panel, clamped);
if (commit) {
+ preferredPanelWidthsRef.current[panel] = clamped;
persistWidth(panel, clamped);
}
- logPanelState(panel, 'resized', clamped);
+ if (log) {
+ handlePanelLayoutChange(panel, 'resized', clamped);
+ }
return clamped;
},
- [collapsed, logPanelState, sidebarSuppressed],
+ [handlePanelLayoutChange],
);
- const registerDetailCloseHandler = useCallback((handler = null) => {
- detailCloseHandlerRef.current = typeof handler === 'function' ? handler : null;
+ const resetSidebarPreferredWidth = useCallback(() => {
+ if (preferredPanelWidthsRef.current.sidebar === DEFAULT_SIDEBAR_WIDTH) {
+ return;
+ }
+ preferredPanelWidthsRef.current.sidebar = DEFAULT_SIDEBAR_WIDTH;
+ persistWidth('sidebar', DEFAULT_SIDEBAR_WIDTH);
+ }, []);
+
+ const clampPanelsWithinViewport = useCallback(() => {
+ const viewportWidth = Math.max(0, Number(window.innerWidth) || 0);
+ if (viewportWidth === 0) {
+ return;
+ }
+
+ const desiredSidebarWidth = preferredPanelWidthsRef.current.sidebar;
+ const desiredDetailWidth = preferredPanelWidthsRef.current.detail;
+
+ let sidebarDisplayWidth = Math.min(desiredSidebarWidth, viewportWidth);
+ let remainingWidth = Math.max(0, viewportWidth - sidebarDisplayWidth);
+ let detailDisplayWidth = Math.min(desiredDetailWidth, remainingWidth);
+ if (detailPanelOpen && sidebarDisplayWidth > viewportWidth * SIDEBAR_SOLO_THRESHOLD) {
+ sidebarDisplayWidth = 0;
+ detailDisplayWidth = Math.min(desiredDetailWidth || viewportWidth, viewportWidth);
+ } else if (sidebarDisplayWidth > viewportWidth * SIDEBAR_SOLO_THRESHOLD) {
+ sidebarDisplayWidth = viewportWidth;
+ detailDisplayWidth = 0;
+ resetSidebarPreferredWidth();
+ }
+
+ panelWidthsRef.current.sidebar = sidebarDisplayWidth;
+ panelWidthsRef.current.detail = detailDisplayWidth;
+
+ setSidebarWidthState((prev) => (prev === sidebarDisplayWidth ? prev : sidebarDisplayWidth));
+ setDetailWidthState((prev) => (prev === detailDisplayWidth ? prev : detailDisplayWidth));
+ }, [detailPanelOpen, resetSidebarPreferredWidth]);
+
+ useEffect(() => {
+ clampPanelsWithinViewport();
+ window.addEventListener('resize', clampPanelsWithinViewport);
+ return () => window.removeEventListener('resize', clampPanelsWithinViewport);
+ }, [clampPanelsWithinViewport]);
+
+ const registerDetailCloseHandler = useCallback((handler: (() => void) | null = null) => {
+ detailCloseHandlerRef.current = handler ?? null;
}, []);
const setDetailActive = useCallback(
(isOpen) => {
setDetailPanelOpen(Boolean(isOpen));
- logPanelState('detail', isOpen ? 'opened' : 'closed');
+ handlePanelLayoutChange('detail', isOpen ? 'opened' : 'closed');
},
- [logPanelState],
+ [handlePanelLayoutChange],
);
const expandSidebar = useCallback(() => {
if (collapsed) {
setCollapsed(false);
}
- setSidebarSuppressed(false);
- logPanelState('sidebar', 'opened');
- }, [collapsed, setCollapsed, logPanelState]);
+ handlePanelLayoutChange('sidebar', 'opened');
+ }, [collapsed, setCollapsed, handlePanelLayoutChange]);
const startPanelResize = useCallback((panel) => {
setResizingPanel(panel);
@@ -237,7 +318,10 @@ export const usePanelManager = () => {
return context;
};
-export const usePanelResizeBindings = (panel, { panelRef = null, enabled = true } = {}) => {
+export const usePanelResizeBindings = (
+ panel: PanelKey,
+ { panelRef = null, enabled = true }: { panelRef?: RefObject | null; enabled?: boolean } = {},
+): PanelResizeBindings => {
const {
sidebarWidth,
detailWidth,
@@ -267,7 +351,7 @@ export const usePanelResizeBindings = (panel, { panelRef = null, enabled = true
useEffect(() => () => teardownListeners(), [teardownListeners]);
const handlePointerDown = useCallback(
- (event) => {
+ (event: ReactPointerEvent) => {
if (!enabled || !panelRef?.current) {
return;
}
@@ -284,18 +368,18 @@ export const usePanelResizeBindings = (panel, { panelRef = null, enabled = true
event.currentTarget?.setPointerCapture?.(pointerId);
let lastWidth = startWidth;
- const handlePointerMove = (moveEvent) => {
+ const handlePointerMove = (moveEvent: PointerEvent) => {
if (moveEvent.pointerId !== pointerId) {
return;
}
const delta = panel === 'sidebar'
? moveEvent.clientX - startX
: startX - moveEvent.clientX;
- lastWidth = setPanelWidth(panel, startWidth + delta, false);
+ lastWidth = setPanelWidth(panel, startWidth + delta, { commit: false });
latestWidthRef.current = lastWidth;
};
- const handlePointerUp = (upEvent) => {
+ const handlePointerUp = (upEvent: PointerEvent) => {
if (upEvent.pointerId !== pointerId) {
return;
}
diff --git a/frontend/src/app/SettingsRoute.jsx b/frontend/src/app/SettingsRoute.tsx
similarity index 94%
rename from frontend/src/app/SettingsRoute.jsx
rename to frontend/src/app/SettingsRoute.tsx
index ce7cc6c..00a16ee 100644
--- a/frontend/src/app/SettingsRoute.jsx
+++ b/frontend/src/app/SettingsRoute.tsx
@@ -6,7 +6,12 @@ import useCapabilitySets from '../settings/useCapabilitySets';
import useCapabilities from '../settings/useCapabilities';
import { api } from './appState';
-const SettingsRoute = ({ open = true, onClose }) => {
+interface SettingsRouteProps {
+ open?: boolean;
+ onClose?: () => void;
+}
+
+const SettingsRoute: React.FC = ({ open = true, onClose }) => {
const {
token,
notifyApiError,
@@ -19,7 +24,7 @@ const SettingsRoute = ({ open = true, onClose }) => {
refreshPasskeys,
registerPasskey,
revokePasskey,
- } = useAppShell();
+ } = useAppShell() as Record;
const {
tokens,
diff --git a/frontend/src/app/UploadQueueOverlay.jsx b/frontend/src/app/UploadQueueOverlay.jsx
deleted file mode 100644
index 40af83c..0000000
--- a/frontend/src/app/UploadQueueOverlay.jsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
- CloseIcon,
- LoaderIcon,
- CheckIcon,
- InfoIcon,
- WarningIcon,
- BottombarCollapseIcon,
- BottombarExpandIcon,
- ClearAllIcon,
-} from '../ui/icons';
-import PanelHeader from '../ui/PanelHeader';
-
-const STATUS_META = {
- pending: {
- label: 'Queued',
- tone: 'muted',
- icon: = {
+ pending: {
+ label: 'Queued',
+ tone: 'muted',
+ icon: ;
+
+const WorkspaceSelectionContext = createContext(null);
+
+interface WorkspaceSelectionProviderProps {
+ value: WorkspaceSelectionValue;
+ children: React.ReactNode;
+}
+
+export const WorkspaceSelectionProvider: React.FC = ({ value, children }) => (
+
+ {children}
+
+);
+
+export const useWorkspaceSelectionContext = () => {
+ const context = useContext(WorkspaceSelectionContext);
+ if (!context) {
+ throw new Error('useWorkspaceSelectionContext must be used within a WorkspaceSelectionProvider');
+ }
+ return context;
+};
+
+export default WorkspaceSelectionContext;
diff --git a/frontend/src/app/appLayoutUtils.js b/frontend/src/app/appLayoutUtils.ts
similarity index 74%
rename from frontend/src/app/appLayoutUtils.js
rename to frontend/src/app/appLayoutUtils.ts
index 1896b6a..784b107 100644
--- a/frontend/src/app/appLayoutUtils.js
+++ b/frontend/src/app/appLayoutUtils.ts
@@ -1,4 +1,4 @@
-import { createAssetView } from '../asset_manager';
+import { createAssetView, resolveAssetExpiresAt } from '../asset_manager';
export const ASSET_PRESIGN_TTL_MS = 240 * 1000; // backend issues 5 min tokens; refresh slightly early
export const DEFAULT_FOLDER_NAME = 'Documents';
@@ -16,13 +16,15 @@ export const resolveApiPath = (path = '') => path;
const makeRowKey = (type, id) =>
id ? `${type}${ROW_KEY_SEPARATOR}${id}` : `${type}${ROW_KEY_SEPARATOR}`;
-const getRowType = (key) => (typeof key === 'string' ? key.split(ROW_KEY_SEPARATOR, 1)[0] : '');
+const normalizeRowKey = (key: string | number | null) => String(key ?? '');
+
+const getRowType = (key) => normalizeRowKey(key).split(ROW_KEY_SEPARATOR, 1)[0] ?? '';
export const getRowId = (key) => {
- if (typeof key !== 'string') return '';
- const separatorIndex = key.indexOf(ROW_KEY_SEPARATOR);
- if (separatorIndex === -1) return key;
- return key.slice(separatorIndex + 1);
+ const normalized = normalizeRowKey(key);
+ const separatorIndex = normalized.indexOf(ROW_KEY_SEPARATOR);
+ if (separatorIndex === -1) return normalized;
+ return normalized.slice(separatorIndex + 1);
};
export const isDocumentRowKey = (key) => getRowType(key) === DOCUMENT_ROW_PREFIX;
@@ -43,34 +45,17 @@ const isAssetEquivalent = (lhs, rhs) => {
const rhsView = createAssetView(rhs);
const lhsPrimaryMetadata = lhsView.getPrimaryMetadata() || lhs?.metadata;
const rhsPrimaryMetadata = rhsView.getPrimaryMetadata() || rhs?.metadata;
- const lhsCardinality = lhsView.getCardinality() || lhs?.cardinality || null;
- const rhsCardinality = rhsView.getCardinality() || rhs?.cardinality || null;
- const lhsObjects = lhsView.getObjects();
- const rhsObjects = rhsView.getObjects();
- const objectsComparable =
- lhsObjects.length === rhsObjects.length
- && lhsObjects.every((entry, index) => {
- const other = rhsObjects[index];
- if (!other) return false;
- if (entry.ordinal !== other.ordinal) return false;
- if (entry.url && other.url && entry.url === other.url) {
- return true;
- }
- if (!entry.url && !other.url) {
- return JSON.stringify(entry.metadata || null) === JSON.stringify(other.metadata || null);
- }
- return entry.url === other.url;
- });
+ const lhsExpiresAt = resolveAssetExpiresAt(lhs);
+ const rhsExpiresAt = resolveAssetExpiresAt(rhs);
return (
lhs.id === rhs.id
&& lhs.url === rhs.url
+ && lhsExpiresAt === rhsExpiresAt
&& lhsPrimaryMetadata?.width === rhsPrimaryMetadata?.width
&& lhsPrimaryMetadata?.height === rhsPrimaryMetadata?.height
&& lhs.mime_type === rhs.mime_type
&& lhs.asset_type === rhs.asset_type
&& lhs.updated_at === rhs.updated_at
- && lhsCardinality === rhsCardinality
- && objectsComparable
);
};
diff --git a/frontend/src/app/appState.js b/frontend/src/app/appState.tsx
similarity index 74%
rename from frontend/src/app/appState.js
rename to frontend/src/app/appState.tsx
index 8a63e46..e728128 100644
--- a/frontend/src/app/appState.js
+++ b/frontend/src/app/appState.tsx
@@ -1,10 +1,52 @@
import React, { useContext, useEffect, useMemo, useReducer } from 'react';
import api from '../lib/api';
-const storage = typeof window !== 'undefined' ? window.sessionStorage : undefined;
+type Tenant = Record | null;
+
+interface TenantSelection {
+ selectionToken: string;
+ tenants: Tenant[];
+}
+
+type AppStatus =
+ | 'logged-out'
+ | 'authenticating'
+ | 'authenticated'
+ | 'selecting-tenant'
+ | 'bootstrapping'
+ | 'ready';
+
+interface AppState {
+ status: AppStatus;
+ token: string;
+ error: string | null;
+ isRefreshing: boolean;
+ tenantSelection: TenantSelection | null;
+ tenant: Tenant;
+ tenants: Tenant[];
+}
+
+type AppAction =
+ | { type: 'LOGIN_REQUEST' }
+ | { type: 'LOGIN_SUCCESS'; token: string; tenant?: Tenant }
+ | { type: 'LOGIN_FAILURE'; error?: string | null }
+ | { type: 'TENANT_SELECTION_REQUIRED'; selectionToken: string; tenants: Tenant[] }
+ | { type: 'CLEAR_TENANT_SELECTION' }
+ | { type: 'LOGOUT_SUCCESS' }
+ | { type: 'BOOTSTRAP_START' }
+ | { type: 'BOOTSTRAP_SUCCESS' }
+ | { type: 'BOOTSTRAP_FAILURE'; error?: string | null }
+ | { type: 'TOKEN_REFRESH_START' }
+ | { type: 'TOKEN_REFRESH_SUCCESS'; token: string; tenant?: Tenant }
+ | { type: 'TOKEN_REFRESH_FAILURE'; error?: string | null }
+ | { type: 'LOGOUT' }
+ | { type: 'RESET_ERROR' }
+ | { type: 'SET_TENANTS'; tenants: Tenant[] };
+
+const storage = window.sessionStorage;
const STORED_TOKEN = storage?.getItem('papercrate_token') ?? '';
-let STORED_TENANT = null;
+let STORED_TENANT: Tenant = null;
if (storage) {
try {
@@ -21,7 +63,7 @@ if (STORED_TOKEN) {
api.defaults.headers.common.Authorization = `Bearer ${STORED_TOKEN}`;
}
-const initialAppState = {
+const initialAppState: AppState = {
status: STORED_TOKEN ? 'authenticated' : 'logged-out',
token: STORED_TOKEN,
error: null,
@@ -31,10 +73,10 @@ const initialAppState = {
tenants: [],
};
-const AppStateContext = React.createContext(null);
-const AppDispatchContext = React.createContext(null);
+const AppStateContext = React.createContext(null);
+const AppDispatchContext = React.createContext | null>(null);
-const appStateReducer = (state, action) => {
+const appStateReducer = (state: AppState, action: AppAction): AppState => {
switch (action.type) {
case 'LOGIN_REQUEST':
return {
@@ -52,14 +94,14 @@ const appStateReducer = (state, action) => {
token: action.token,
error: null,
tenantSelection: null,
- tenant: action.tenant || null,
+ tenant: action.tenant ?? null,
tenants: state.tenants,
};
case 'LOGIN_FAILURE':
return {
status: 'logged-out',
token: '',
- error: action.error || null,
+ error: action.error ?? null,
isRefreshing: false,
tenantSelection: null,
tenant: null,
@@ -89,6 +131,7 @@ const appStateReducer = (state, action) => {
tenants: [],
};
case 'LOGOUT_SUCCESS':
+ case 'LOGOUT':
return {
status: 'logged-out',
token: '',
@@ -103,7 +146,7 @@ const appStateReducer = (state, action) => {
case 'BOOTSTRAP_SUCCESS':
return { ...state, status: 'ready', error: null };
case 'BOOTSTRAP_FAILURE':
- return { ...state, status: 'authenticated', error: action.error || null };
+ return { ...state, status: 'authenticated', error: action.error ?? null };
case 'TOKEN_REFRESH_START':
return { ...state, isRefreshing: true, error: null };
case 'TOKEN_REFRESH_SUCCESS':
@@ -113,24 +156,14 @@ const appStateReducer = (state, action) => {
isRefreshing: false,
status: state.status === 'logged-out' ? 'authenticated' : state.status,
tenantSelection: null,
- tenant: action.tenant || state.tenant || null,
+ tenant: action.tenant ?? state.tenant ?? null,
tenants: state.tenants,
};
case 'TOKEN_REFRESH_FAILURE':
return {
status: 'logged-out',
token: '',
- error: action.error || null,
- isRefreshing: false,
- tenantSelection: null,
- tenant: null,
- tenants: [],
- };
- case 'LOGOUT':
- return {
- status: 'logged-out',
- token: '',
- error: null,
+ error: action.error ?? null,
isRefreshing: false,
tenantSelection: null,
tenant: null,
@@ -148,7 +181,7 @@ const appStateReducer = (state, action) => {
}
};
-const AppStateProvider = ({ children }) => {
+const AppStateProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
const [state, dispatch] = useReducer(appStateReducer, initialAppState);
useEffect(() => {
@@ -216,7 +249,7 @@ const AppStateProvider = ({ children }) => {
);
};
-const useAppState = () => {
+const useAppState = (): AppState => {
const context = useContext(AppStateContext);
if (!context) {
throw new Error('useAppState must be used within an AppStateProvider.');
@@ -224,7 +257,7 @@ const useAppState = () => {
return context;
};
-const useAppDispatch = () => {
+const useAppDispatch = (): React.Dispatch => {
const context = useContext(AppDispatchContext);
if (!context) {
throw new Error('useAppDispatch must be used within an AppStateProvider.');
diff --git a/frontend/src/app/useDetailPanel.js b/frontend/src/app/useDetailPanel.ts
similarity index 76%
rename from frontend/src/app/useDetailPanel.js
rename to frontend/src/app/useDetailPanel.ts
index 9df6fee..7ad3840 100644
--- a/frontend/src/app/useDetailPanel.js
+++ b/frontend/src/app/useDetailPanel.ts
@@ -1,13 +1,30 @@
import { useCallback, useEffect, useRef, useState } from 'react';
+export interface DetailDocument {
+ id?: string | number;
+ [key: string]: unknown;
+}
+
+interface UseDetailPanelOptions {
+ documentLookup: Map;
+ orderedSelectedDocuments: DetailDocument[];
+}
+
+interface OpenDetailPanelArgs {
+ documentId?: string | number;
+ document?: DetailDocument | null;
+ documentIds?: Array;
+ documents?: DetailDocument[];
+}
+
export const useDetailPanel = ({
documentLookup,
orderedSelectedDocuments,
-}) => {
+}: UseDetailPanelOptions) => {
const [detailPanelOpen, setDetailPanelOpen] = useState(false);
- const [detailPanelDocId, setDetailPanelDocId] = useState(null);
- const [detailPanelDocument, setDetailPanelDocument] = useState(null);
- const latestOrderedDocsRef = useRef([]);
+ const [detailPanelDocId, setDetailPanelDocId] = useState(null);
+ const [detailPanelDocument, setDetailPanelDocument] = useState(null);
+ const latestOrderedDocsRef = useRef([]);
useEffect(() => {
latestOrderedDocsRef.current = orderedSelectedDocuments;
@@ -34,7 +51,7 @@ export const useDetailPanel = ({
}, [detailPanelDocId, documentLookup, detailPanelDocument, detailPanelOpen]);
const openDetailPanel = useCallback(
- ({ documentId, document, documentIds, documents } = {}) => {
+ ({ documentId, document, documentIds, documents }: OpenDetailPanelArgs = {}) => {
let targetDoc = document || null;
let targetId = documentId ?? document?.id ?? null;
@@ -66,7 +83,7 @@ export const useDetailPanel = ({
return;
}
- setDetailPanelDocId(targetDoc?.id || targetId || null);
+ setDetailPanelDocId(targetDoc?.id ?? targetId ?? null);
setDetailPanelDocument(targetDoc || null);
setDetailPanelOpen(Boolean(targetDoc || targetId));
},
diff --git a/frontend/src/app/useDocumentPreview.js b/frontend/src/app/useDocumentPreview.ts
similarity index 51%
rename from frontend/src/app/useDocumentPreview.js
rename to frontend/src/app/useDocumentPreview.ts
index 36f0671..aa09d21 100644
--- a/frontend/src/app/useDocumentPreview.js
+++ b/frontend/src/app/useDocumentPreview.ts
@@ -1,11 +1,71 @@
import { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+ Dispatch,
+ MutableRefObject,
+ SetStateAction,
+} from 'react';
+
+type DocumentId = string | number;
+type FolderId = DocumentId | 'root';
+
+type DocumentLike = {
+ id?: DocumentId;
+ folder_id?: FolderId | null;
+ filename?: string | null;
+ current_version?: Record;
+ [key: string]: unknown;
+};
+
+type DocumentLink = {
+ url?: string;
+ contentType?: string | null;
+ filename?: string | null;
+ expiresAt?: number;
+};
+
+interface ApiClient {
+ get: (path: string) => Promise<{ data: T }>;
+}
+
+type NavigateHandler = (path: string, options?: { replace?: boolean }) => void;
+
+interface UseDocumentPreviewArgs {
+ routeDocumentId?: DocumentId | null;
+ documentsManager: {
+ getById: (id: DocumentId) => DocumentLike | null;
+ ensure: (id: DocumentId) => Promise;
+ getMany: (ids: DocumentId[]) => DocumentLike[];
+ subscribe: (listener: () => void) => () => void;
+ ingest: (docs: unknown[]) => { canonical: DocumentLike[]; changed: boolean };
+ };
+ selectedFolder?: FolderId | null;
+ api: ApiClient;
+ resolveApiPath?: (path: string) => string;
+ notifyApiError: (error: unknown, message: string) => void;
+ navigate: NavigateHandler;
+ locationPathname: string;
+ locationSearch: string;
+ detailPanelControlRef: MutableRefObject<{
+ open?: (args?: { documentIds?: DocumentId[] }) => void;
+ close?: () => void;
+ } | null>;
+ setActivePreviewId: Dispatch>;
+}
+
+interface UseDocumentPreviewResult {
+ documentLinks: Map;
+ ensureDownloadUrl: (documentId: DocumentId, options?: { force?: boolean }) => Promise;
+ ensurePreviewData: (documentId: DocumentId) => Promise;
+ openDocumentPreview: (documentId: DocumentId, options?: { replace?: boolean }) => void;
+ closeDocumentPreview: (folderId?: FolderId) => void;
+ resetPreviewState: () => void;
+ removeDocumentLinks: (ids: DocumentId[]) => void;
+}
const useDocumentPreview = ({
routeDocumentId,
- documents,
- searchResults,
+ documentsManager,
selectedFolder,
- assetManager,
api,
resolveApiPath,
notifyApiError,
@@ -14,23 +74,22 @@ const useDocumentPreview = ({
locationSearch,
detailPanelControlRef,
setActivePreviewId,
-}) => {
- const [previewEntries, setPreviewEntries] = useState(() => new Map());
- const [previewDocuments, setPreviewDocuments] = useState(() => new Map());
- const previewInflightRef = useRef(new Map());
- const previewReturnPathRef = useRef(null);
+}: UseDocumentPreviewArgs): UseDocumentPreviewResult => {
+ const [documentLinks, setDocumentLinks] = useState>(() => new Map());
+ const previewInflightRef = useRef>>(new Map());
+ const previewReturnPathRef = useRef(null);
const resetPreviewState = useCallback(() => {
- setPreviewEntries(() => new Map());
+ setDocumentLinks(() => new Map());
previewInflightRef.current = new Map();
previewReturnPathRef.current = null;
}, []);
- const removePreviewEntries = useCallback((ids) => {
+ const removeDocumentLinks = useCallback((ids: DocumentId[]) => {
if (!Array.isArray(ids) || ids.length === 0) {
return;
}
- setPreviewEntries((prev) => {
+ setDocumentLinks((prev) => {
if (!prev.size) {
return prev;
}
@@ -46,66 +105,37 @@ const useDocumentPreview = ({
});
}, []);
- const cachePreviewDocument = useCallback((doc) => {
- if (!doc?.id) {
- return;
- }
- setPreviewDocuments((prev) => {
- const existing = prev.get(doc.id);
- if (existing === doc) {
- return prev;
- }
- const next = new Map(prev);
- next.set(doc.id, doc);
- return next;
- });
- }, []);
-
- const removeCachedPreviewDocument = useCallback((documentId) => {
- if (!documentId) {
- return;
- }
- setPreviewDocuments((prev) => {
- if (!prev.has(documentId)) {
- return prev;
- }
- const next = new Map(prev);
- next.delete(documentId);
- return next;
- });
- }, []);
-
- const ensurePreviewUrl = useCallback(
- async (documentId, { force = false } = {}) => {
+ const ensureDownloadUrl = useCallback(
+ async (documentId: DocumentId, { force = false }: { force?: boolean } = {}): Promise => {
if (!documentId) return null;
- const existing = previewEntries.get(documentId) || null;
+ const existing = documentLinks.get(documentId) || null;
const now = Date.now();
- const expiresAt = typeof existing?.expiresAt === 'number' ? existing.expiresAt : null;
+ const expiresAt = Number.isFinite(existing?.expiresAt) ? Number(existing?.expiresAt) : null;
if (!force && existing && (!expiresAt || expiresAt > now)) {
return existing;
}
if (!force && previewInflightRef.current.has(documentId)) {
- return previewInflightRef.current.get(documentId);
+ return previewInflightRef.current.get(documentId) || null;
}
- const request = (async () => {
+ const request: Promise = (async () => {
try {
- const docResponse = await api.get(`/documents/${documentId}`);
+ const docResponse = await api.get<{ document?: Record }>(`/documents/${documentId}`);
const downloadPath = docResponse.data?.document?.current_version?.download_path;
if (!downloadPath || !resolveApiPath) {
throw new Error('Document missing download path');
}
const href = resolveApiPath(downloadPath);
- const entry = {
+ const entry: DocumentLink = {
url: href,
contentType: docResponse.data?.document?.current_version?.version?.content_type || null,
filename: docResponse.data?.document?.filename,
expiresAt: Date.now() + 5 * 60 * 1000,
};
- setPreviewEntries((prev) => {
+ setDocumentLinks((prev) => {
const next = new Map(prev);
next.set(documentId, entry);
return next;
@@ -122,39 +152,29 @@ const useDocumentPreview = ({
previewInflightRef.current.set(documentId, request);
return request;
},
- [previewEntries, api, resolveApiPath, notifyApiError, setPreviewEntries],
+ [documentLinks, api, resolveApiPath, notifyApiError],
);
const ensurePreviewData = useCallback(
- async (documentId) => {
+ async (documentId: DocumentId): Promise => {
if (!documentId) return null;
- const findInCache = () => {
- const pool = searchResults ?? documents;
- return pool.find((item) => item.id === documentId) || null;
- };
+ const findInCache = () => documentsManager.getById(documentId);
let doc = findInCache();
+ if (!doc) {
+ doc = await documentsManager.ensure(documentId);
+ }
+
if (!doc) {
const { data } = await api.get(`/documents/${documentId}`);
- const hydratedDetail = assetManager.hydrateDetail(data);
- const fetched = hydratedDetail?.document || data.document || data;
- doc = fetched ? assetManager.hydrateDocument(fetched) : null;
+ const fetched = (data as { document?: DocumentLike })?.document || data;
+ const { canonical } = documentsManager.ingest([fetched as unknown]);
+ doc = (canonical[0] as DocumentLike | undefined) || null;
if (!doc) {
throw new Error('Document metadata unavailable.');
}
-
- const existsInDocuments = documents.some((item) => item.id === doc.id);
- const existsInSearch = Array.isArray(searchResults)
- ? searchResults.some((item) => item.id === doc.id)
- : false;
-
- if (existsInDocuments || existsInSearch) {
- removeCachedPreviewDocument(doc.id);
- } else {
- cachePreviewDocument(doc);
- }
}
if (!previewReturnPathRef.current) {
@@ -163,26 +183,22 @@ const useDocumentPreview = ({
fallbackFolderId === 'root' ? '/documents' : `/documents/folder/${fallbackFolderId}`;
}
- await ensurePreviewUrl(documentId, { force: false });
+ await ensureDownloadUrl(documentId, { force: false });
setActivePreviewId(documentId);
return doc;
},
[
- searchResults,
- documents,
- assetManager,
- ensurePreviewUrl,
+ documentsManager,
+ ensureDownloadUrl,
setActivePreviewId,
api,
- cachePreviewDocument,
- removeCachedPreviewDocument,
],
);
const openDocumentPreview = useCallback(
- (documentId, { replace = false } = {}) => {
+ (documentId: DocumentId, { replace = false }: { replace?: boolean } = {}) => {
if (!documentId) return;
- detailPanelControlRef.current.close();
+ detailPanelControlRef.current?.close?.();
previewReturnPathRef.current = `${locationPathname}${locationSearch}`;
navigate(`/documents/${documentId}`, { replace });
},
@@ -190,7 +206,7 @@ const useDocumentPreview = ({
);
const closeDocumentPreview = useCallback(
- (folderId = null) => {
+ (folderId?: FolderId) => {
const fallbackPath = previewReturnPathRef.current;
previewReturnPathRef.current = null;
@@ -206,21 +222,6 @@ const useDocumentPreview = ({
[navigate, selectedFolder],
);
- useEffect(() => {
- if (!routeDocumentId) {
- return undefined;
- }
-
- const handleKeyDown = (event) => {
- if (event.key === 'Escape') {
- closeDocumentPreview();
- }
- };
-
- window.addEventListener('keydown', handleKeyDown);
- return () => window.removeEventListener('keydown', handleKeyDown);
- }, [routeDocumentId, closeDocumentPreview]);
-
useEffect(() => {
if (!routeDocumentId) {
return undefined;
@@ -241,39 +242,14 @@ const useDocumentPreview = ({
};
}, [routeDocumentId, ensurePreviewData, notifyApiError, closeDocumentPreview]);
- useEffect(() => {
- setPreviewDocuments((prev) => {
- if (!prev.size) {
- return prev;
- }
- const next = new Map(prev);
- let changed = false;
- const prune = (list) => {
- if (!Array.isArray(list)) {
- return;
- }
- list.forEach((doc) => {
- if (doc?.id && next.has(doc.id)) {
- next.delete(doc.id);
- changed = true;
- }
- });
- };
- prune(documents);
- prune(searchResults);
- return changed ? next : prev;
- });
- }, [documents, searchResults]);
-
return {
- previewEntries,
- previewDocuments,
- ensurePreviewUrl,
+ documentLinks,
+ ensureDownloadUrl,
ensurePreviewData,
openDocumentPreview,
closeDocumentPreview,
resetPreviewState,
- removePreviewEntries,
+ removeDocumentLinks,
};
};
diff --git a/frontend/src/app/useDocumentSelection.js b/frontend/src/app/useDocumentSelection.ts
similarity index 74%
rename from frontend/src/app/useDocumentSelection.js
rename to frontend/src/app/useDocumentSelection.ts
index 16f3b83..36a4077 100644
--- a/frontend/src/app/useDocumentSelection.js
+++ b/frontend/src/app/useDocumentSelection.ts
@@ -1,6 +1,30 @@
import { useCallback, useRef, useState } from 'react';
-const DEFAULT_INITIAL_ENTRIES = [];
+type RowKey = string;
+type DocumentId = string | number;
+
+interface SelectionEventLike {
+ shiftKey?: boolean;
+ metaKey?: boolean;
+ ctrlKey?: boolean;
+ preventDefault?: () => void;
+}
+
+interface UseDocumentSelectionOptions {
+ resolveDocumentRowKey: (id: DocumentId | null) => RowKey | null;
+ resolveFolderRowKey: (id: DocumentId | null) => RowKey | null;
+ isDocumentRowKey: (key?: RowKey | null) => boolean;
+ isFolderRowKey: (key?: RowKey | null) => boolean;
+ getRowId: (key?: RowKey | null) => DocumentId | null;
+ initialEntries?: RowKey[];
+}
+
+interface ApplySelectionOptions {
+ anchor?: RowKey | null;
+ interactedKeys?: RowKey[];
+}
+
+const DEFAULT_INITIAL_ENTRIES: RowKey[] = [];
export const useDocumentSelection = ({
resolveDocumentRowKey,
@@ -9,21 +33,24 @@ export const useDocumentSelection = ({
isFolderRowKey,
getRowId,
initialEntries = DEFAULT_INITIAL_ENTRIES,
-}) => {
- const [selectedEntries, setSelectedEntries] = useState(initialEntries);
- const [selectionOrder, setSelectionOrder] = useState(initialEntries);
- const selectionOrderRef = useRef(initialEntries);
- const selectionAnchorRef = useRef(null);
+}: UseDocumentSelectionOptions) => {
+ const [selectedEntries, setSelectedEntries] = useState(initialEntries);
+ const [selectionOrder, setSelectionOrder] = useState(initialEntries);
+ const selectionOrderRef = useRef(initialEntries);
+ const selectionAnchorRef = useRef(null);
const selectionInitializedRef = useRef(false);
- const [focusedDocumentId, setFocusedDocumentId] = useState(null);
- const [focusedRowKey, setFocusedRowKey] = useState(null);
+ const [focusedDocumentId, setFocusedDocumentId] = useState(null);
+ const [focusedRowKey, setFocusedRowKey] = useState(null);
- const visibleRowKeySetRef = useRef(new Set());
- const navigableRowKeysRef = useRef([]);
+ const visibleRowKeySetRef = useRef>(new Set());
+ const navigableRowKeysRef = useRef([]);
const configureSelectionEnvironment = useCallback(({
visibleRowKeySet,
navigableRowKeys,
+ }: {
+ visibleRowKeySet?: Set;
+ navigableRowKeys?: RowKey[];
}) => {
if (visibleRowKeySet) {
visibleRowKeySetRef.current = visibleRowKeySet;
@@ -33,7 +60,7 @@ export const useDocumentSelection = ({
}
}, []);
- const updateSelectionOrder = useCallback((nextSelection, interactedKeys = []) => {
+ const updateSelectionOrder = useCallback((nextSelection: RowKey[], interactedKeys: RowKey[] = []) => {
const nextSet = new Set(nextSelection);
const previousOrder = selectionOrderRef.current.filter((id) => nextSet.has(id));
const interacted = (interactedKeys || []).filter((id, index, array) => array.indexOf(id) === index);
@@ -65,13 +92,16 @@ export const useDocumentSelection = ({
}, []);
const applySelection = useCallback(
- (rowKeys, { anchor, interactedKeys = [] } = {}) => {
+ (
+ rowKeys: Array,
+ { anchor, interactedKeys = [] }: ApplySelectionOptions = {},
+ ) => {
const visibleRowKeySet = visibleRowKeySetRef.current;
- const unique = [];
+ const unique: RowKey[] = [];
- (rowKeys || []).forEach((key) => {
+ (rowKeys || []).forEach((key) => {
if (!key) return;
- let canonicalKey = null;
+ let canonicalKey: RowKey | null = null;
if (visibleRowKeySet.has(key)) {
canonicalKey = key;
} else if (isDocumentRowKey(key)) {
@@ -99,7 +129,7 @@ export const useDocumentSelection = ({
setSelectedEntries(unique);
updateSelectionOrder(unique, interactedKeys);
- const nextFocusedDocumentId = (() => {
+ const nextFocusedDocumentId: DocumentId | null = (() => {
if (focusedDocumentId) {
const focusKey = resolveDocumentRowKey(focusedDocumentId);
if (focusKey && unique.includes(focusKey)) {
@@ -108,11 +138,11 @@ export const useDocumentSelection = ({
}
if (resolvedAnchor && isDocumentRowKey(resolvedAnchor)) {
- return getRowId(resolvedAnchor) || null;
+ return getRowId(resolvedAnchor) ?? null;
}
- const lastDocKey = [...unique].reverse().find(isDocumentRowKey);
- return lastDocKey ? getRowId(lastDocKey) || null : null;
+ const lastDocKey = [...unique].reverse().find((key) => isDocumentRowKey(key)) ?? null;
+ return lastDocKey ? getRowId(lastDocKey) ?? null : null;
})();
setFocusedDocumentId(nextFocusedDocumentId);
@@ -144,7 +174,7 @@ export const useDocumentSelection = ({
}, [applySelection]);
const handleEntrySelection = useCallback(
- (rowKey, event) => {
+ (rowKey: RowKey | null, event?: SelectionEventLike) => {
const visibleRowKeySet = visibleRowKeySetRef.current;
const navigableRowKeys = navigableRowKeysRef.current;
if (!rowKey || !visibleRowKeySet.has(rowKey)) {
@@ -170,8 +200,8 @@ export const useDocumentSelection = ({
anchorKey = rowKey;
}
- let nextKeys = [];
- let interactedKeys = [];
+ let nextKeys: RowKey[] = [];
+ let interactedKeys: RowKey[] = [];
if (shiftKey && anchorKey) {
const anchorIndex = navigableRowKeys.indexOf(anchorKey);
@@ -213,7 +243,7 @@ export const useDocumentSelection = ({
);
const promoteSelectionOrder = useCallback(
- (docId) => {
+ (docId?: DocumentId | null) => {
if (!docId) return;
const rowKey = resolveDocumentRowKey(docId);
if (!rowKey) return;
diff --git a/frontend/src/app/useDocumentsPreferences.js b/frontend/src/app/useDocumentsPreferences.ts
similarity index 89%
rename from frontend/src/app/useDocumentsPreferences.js
rename to frontend/src/app/useDocumentsPreferences.ts
index c02468f..76fcf13 100644
--- a/frontend/src/app/useDocumentsPreferences.js
+++ b/frontend/src/app/useDocumentsPreferences.ts
@@ -10,10 +10,7 @@ const SORT_FIELD_STORAGE_KEY = 'papercrate_sort_field';
const SORT_DIRECTION_STORAGE_KEY = 'papercrate_sort_direction';
const INCLUDE_DESCENDANTS_STORAGE_KEY = 'papercrate_include_descendants';
-const readSessionStorage = (key) => {
- if (typeof window === 'undefined') {
- return null;
- }
+const readSessionStorage = (key: string): string | null => {
try {
return window.sessionStorage.getItem(key);
} catch (error) {
@@ -22,10 +19,7 @@ const readSessionStorage = (key) => {
}
};
-const writeSessionStorage = (key, value) => {
- if (typeof window === 'undefined') {
- return;
- }
+const writeSessionStorage = (key: string, value: string): void => {
try {
window.sessionStorage.setItem(key, value);
} catch (error) {
@@ -34,7 +28,7 @@ const writeSessionStorage = (key, value) => {
};
export const useDocumentsPreferences = () => {
- const [documentsViewMode, setDocumentsViewModeState] = useState(() => {
+ const [documentsViewMode, setDocumentsViewModeState] = useState<'list' | 'grid' | 'desk'>(() => {
const stored = readSessionStorage(VIEW_MODE_STORAGE_KEY);
if (stored === 'grid' || stored === 'desk') {
return stored;
@@ -42,9 +36,9 @@ export const useDocumentsPreferences = () => {
return 'list';
});
- const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
+ const lastNonDeskViewRef = useRef<'list' | 'grid'>((documentsViewMode === 'desk' ? 'list' : documentsViewMode) as 'list' | 'grid');
- const setDocumentsViewMode = useCallback((mode) => {
+ const setDocumentsViewMode = useCallback((mode: string) => {
const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
setDocumentsViewModeState((previous) => {
if (next !== previous) {
@@ -81,7 +75,7 @@ export const useDocumentsPreferences = () => {
writeSessionStorage(SORT_DIRECTION_STORAGE_KEY, documentsSortDirection);
}, [documentsSortDirection]);
- const handleDocumentsSortFieldChange = useCallback((field) => {
+ const handleDocumentsSortFieldChange = useCallback((field: string) => {
const nextField = SORT_FIELD_VALUES.includes(field) ? field : DEFAULT_SORT_FIELD;
setDocumentsSortField((previous) => (previous === nextField ? previous : nextField));
}, []);
diff --git a/frontend/src/app/useDocumentsSearch.js b/frontend/src/app/useDocumentsSearch.ts
similarity index 50%
rename from frontend/src/app/useDocumentsSearch.js
rename to frontend/src/app/useDocumentsSearch.ts
index e5e0447..9329b99 100644
--- a/frontend/src/app/useDocumentsSearch.js
+++ b/frontend/src/app/useDocumentsSearch.ts
@@ -1,33 +1,91 @@
import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
- TAG_FILTER_UNTAGGED,
- resolveDocumentRowKey,
- isDocumentRowKey,
-} from './appLayoutUtils';
+import type { Dispatch, SetStateAction } from 'react';
+import { TAG_FILTER_UNTAGGED } from './appLayoutUtils';
+
+type Identifier = string | number;
+
+type DocumentLike = { id?: Identifier } & Record;
+
+type ApiClient = {
+ get: (url: string, config?: { params?: Record }) => Promise<{ data: T }>;
+};
+
+interface UseDocumentsSearchArgs {
+ api: ApiClient;
+ token?: string | null;
+ selectedFolder?: Identifier | 'root' | null;
+ navigate?: (path: string, options?: { replace?: boolean }) => void;
+ locationPathname?: string;
+ isDocumentsRoute?: boolean;
+ searchIncludeDescendants?: boolean;
+ documentsSortField?: string;
+ documentsSortDirection?: string;
+ notifyApiError: (error: unknown, message: string) => void;
+ setLoading: (state: boolean) => void;
+ setSearchIncludeDescendants: (value: boolean) => void;
+ documentsManager: {
+ ingest: (docs: unknown[]) => { canonical: DocumentLike[]; changed: boolean };
+ };
+}
+
+interface UseDocumentsSearchResult {
+ searchQuery: string;
+ setSearchQuery: Dispatch>;
+ searchResultIds: Identifier[] | null;
+ setSearchResultIds: Dispatch>;
+ searchLoading: boolean;
+ setSearchLoading: Dispatch>;
+ activeTagFilters: Identifier[];
+ setActiveTagFilters: Dispatch>;
+ activeCorrespondentFilters: Identifier[];
+ setActiveCorrespondentFilters: Dispatch>;
+ toggleTagFilter: (tagId: Identifier) => void;
+ toggleCorrespondentFilter: (correspondentId?: Identifier | null) => void;
+ isFilterActive: boolean;
+ clearFilters: () => void;
+ handleSearchChange: (value: string) => void;
+ handleSearchSubmit: () => void;
+ refetchSearchResults: () => void;
+ documentsFilterValue: {
+ query: string;
+ searchResultIds: Identifier[] | null;
+ searchLoading: boolean;
+ includeDescendants: boolean;
+ activeTagIds: Identifier[];
+ activeCorrespondentIds: Identifier[];
+ isActive: boolean;
+ setQuery: (value: string) => void;
+ submit: () => void;
+ clear: () => void;
+ toggleTag: (tagId: Identifier) => void;
+ toggleCorrespondent: (correspondentId?: Identifier | null) => void;
+ toggleIncludeDescendants: () => void;
+ };
+}
const useDocumentsSearch = ({
api,
- assetManager,
token,
selectedFolder,
navigate,
locationPathname,
isDocumentsRoute,
- selectionHelpers,
searchIncludeDescendants,
documentsSortField,
documentsSortDirection,
notifyApiError,
setLoading,
setSearchIncludeDescendants,
-}) => {
- const [searchQuery, setSearchQuery] = useState('');
- const [activeTagFilters, setActiveTagFilters] = useState([]);
- const [activeCorrespondentFilters, setActiveCorrespondentFilters] = useState([]);
- const [searchResults, setSearchResults] = useState(null);
- const [searchLoading, setSearchLoading] = useState(false);
+ documentsManager,
+}: UseDocumentsSearchArgs): UseDocumentsSearchResult => {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [activeTagFilters, setActiveTagFilters] = useState([]);
+ const [activeCorrespondentFilters, setActiveCorrespondentFilters] = useState([]);
+ const [searchResultIds, setSearchResultIds] = useState(null);
+ const [searchLoading, setSearchLoading] = useState(false);
+ const [searchTrigger, setSearchTrigger] = useState(0);
- const toggleTagFilter = useCallback((tagId) => {
+ const toggleTagFilter = useCallback((tagId: Identifier) => {
if (!tagId) return;
setActiveTagFilters((previous) => {
if (tagId === TAG_FILTER_UNTAGGED) {
@@ -41,7 +99,7 @@ const useDocumentsSearch = ({
});
}, []);
- const toggleCorrespondentFilter = useCallback((correspondentId) => {
+ const toggleCorrespondentFilter = useCallback((correspondentId?: Identifier | null) => {
setActiveCorrespondentFilters((previous) => {
if (!correspondentId) {
return [];
@@ -64,11 +122,12 @@ const useDocumentsSearch = ({
setActiveCorrespondentFilters([]);
setSearchLoading(false);
setSearchIncludeDescendants(true);
+ setSearchResultIds(null);
}, [
setSearchIncludeDescendants,
]);
- const handleSearchChange = useCallback((value) => {
+ const handleSearchChange = useCallback((value: string) => {
setSearchQuery(value);
}, []);
@@ -81,11 +140,48 @@ const useDocumentsSearch = ({
}
}, [navigate, selectedFolder, isDocumentsRoute, locationPathname]);
+ const documentsFilterValue = useMemo(
+ () => ({
+ query: searchQuery,
+ searchResultIds,
+ searchLoading,
+ includeDescendants: Boolean(searchIncludeDescendants),
+ activeTagIds: activeTagFilters,
+ activeCorrespondentIds: activeCorrespondentFilters,
+ isActive: isFilterActive,
+ setQuery: handleSearchChange,
+ submit: handleSearchSubmit,
+ clear: clearFilters,
+ toggleTag: toggleTagFilter,
+ toggleCorrespondent: toggleCorrespondentFilter,
+ toggleIncludeDescendants: () => setSearchIncludeDescendants(!searchIncludeDescendants),
+ }),
+ [
+ searchQuery,
+ searchResultIds,
+ searchLoading,
+ searchIncludeDescendants,
+ activeTagFilters,
+ activeCorrespondentFilters,
+ isFilterActive,
+ handleSearchChange,
+ handleSearchSubmit,
+ clearFilters,
+ toggleTagFilter,
+ toggleCorrespondentFilter,
+ setSearchIncludeDescendants,
+ ],
+ );
+
+ const refetchSearchResults = useCallback(() => {
+ setSearchTrigger(Date.now());
+ }, []);
+
useEffect(() => {
if (!token) return undefined;
if (!isFilterActive) {
- setSearchResults(null);
+ setSearchResultIds(null);
setSearchLoading(false);
return undefined;
}
@@ -98,7 +194,7 @@ const useDocumentsSearch = ({
started = true;
setLoading(true);
try {
- const params = {};
+ const params: Record = {};
const trimmedQuery = searchQuery.trim();
if (trimmedQuery.length) {
params.query = trimmedQuery;
@@ -131,57 +227,24 @@ const useDocumentsSearch = ({
if (documentsSortDirection) {
params.dir = documentsSortDirection;
}
- const { data } = await api.get('/documents', { params });
+ const { data } = await api.get('/documents', { params });
if (cancelled) return;
- const results = assetManager.hydrateDocuments(data || []);
- setSearchResults(results);
+ const results = Array.isArray(data) ? data : [];
+ const { canonical } = documentsManager.ingest(results);
+ const ids = canonical
+ .map((doc) => (doc?.id ?? null) as Identifier | null)
+ .filter((id): id is Identifier => id != null);
+ setSearchResultIds(ids);
- if (!results.length) {
+ if (!ids.length) {
setSearchLoading(false);
- selectionHelpers.setSelectedEntries([]);
- selectionHelpers.setFocusedDocumentId(null);
- selectionHelpers.selectionOrderRef.current = [];
- selectionHelpers.setSelectionOrder([]);
- selectionHelpers.selectionAnchorRef.current = null;
return;
}
-
- const resultKeys = results
- .map((doc) => resolveDocumentRowKey(doc.id))
- .filter(Boolean);
-
- let targetKey = null;
- let nextSelectionKeys = [];
-
- selectionHelpers.setSelectedEntries((previous) => {
- const previousDocKeys = previous.filter(isDocumentRowKey);
- const filtered = previousDocKeys.filter((key) => resultKeys.includes(key));
- if (filtered.length) {
- targetKey = filtered[filtered.length - 1];
- nextSelectionKeys = filtered;
- return filtered;
- }
- targetKey = null;
- nextSelectionKeys = [];
- return [];
- });
-
- selectionHelpers.selectionOrderRef.current = nextSelectionKeys;
- selectionHelpers.setSelectionOrder(nextSelectionKeys);
-
- selectionHelpers.setFocusedDocumentId((previous) => {
- if (previous && resultKeys.includes(resolveDocumentRowKey(previous))) {
- return previous;
- }
- return null;
- });
-
- selectionHelpers.selectionAnchorRef.current = targetKey;
} catch (error) {
if (cancelled) return;
notifyApiError(error, 'Search failed. Please try again.');
- setSearchResults(null);
+ setSearchResultIds(null);
} finally {
if (!cancelled && started) {
setLoading(false);
@@ -210,16 +273,16 @@ const useDocumentsSearch = ({
documentsSortDirection,
selectedFolder,
notifyApiError,
- assetManager,
- selectionHelpers,
setLoading,
+ documentsManager,
+ searchTrigger,
]);
return {
searchQuery,
setSearchQuery,
- searchResults,
- setSearchResults,
+ searchResultIds,
+ setSearchResultIds,
searchLoading,
setSearchLoading,
activeTagFilters,
@@ -232,6 +295,8 @@ const useDocumentsSearch = ({
clearFilters,
handleSearchChange,
handleSearchSubmit,
+ refetchSearchResults,
+ documentsFilterValue,
};
};
diff --git a/frontend/src/app/useManagementModals.js b/frontend/src/app/useManagementModals.tsx
similarity index 55%
rename from frontend/src/app/useManagementModals.js
rename to frontend/src/app/useManagementModals.tsx
index 76a26ad..159dfda 100644
--- a/frontend/src/app/useManagementModals.js
+++ b/frontend/src/app/useManagementModals.tsx
@@ -1,26 +1,63 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
import TagsPanel from '../tags/TagsPanel';
-import CorrespondentsPanel from '../correspondents/CorrespondentsPanel';
+import CorrespondentsPanel, { CorrespondentsPanelProps } from '../correspondents/CorrespondentsPanel';
import PanelHeader from '../ui/PanelHeader';
+import { CloseIcon } from '../ui/icons';
const TAGS_MODAL = 'tags';
const CORRESPONDENTS_MODAL = 'correspondents';
+interface TagRecord {
+ id?: string | number;
+ label?: string;
+ [key: string]: unknown;
+}
+
+interface CorrespondentRecord {
+ id?: string | number;
+ name?: string;
+ [key: string]: unknown;
+}
+
+interface UseManagementModalsArgs {
+ locationPathname?: string;
+ tags?: TagRecord[];
+ refreshTags?: () => void | Promise;
+ onTagCreate?: (...args: any[]) => void | Promise;
+ onTagUpdate?: (...args: any[]) => void | Promise;
+ onTagDelete?: (...args: any[]) => void | Promise;
+ correspondents?: CorrespondentRecord[];
+ refreshCorrespondents?: () => void | Promise;
+ onCorrespondentCreate?: (...args: any[]) => void | Promise;
+ onCorrespondentUpdate?: (...args: any[]) => void | Promise;
+ onCorrespondentDelete?: (...args: any[]) => void | Promise;
+ setStatusMessage?: (message: string, variant?: string) => void;
+}
+
+interface UseManagementModalsResult {
+ managementModals: ReactNode;
+ openTagsModal: () => void;
+ openCorrespondentsModal: () => void;
+ closeActiveModal: () => void;
+ activeModal: string | null;
+}
+
export const useManagementModals = ({
locationPathname,
- tags,
+ tags = [],
refreshTags,
onTagCreate,
onTagUpdate,
onTagDelete,
- correspondents,
+ correspondents = [],
refreshCorrespondents,
onCorrespondentCreate,
onCorrespondentUpdate,
onCorrespondentDelete,
setStatusMessage,
-}) => {
- const [activeModal, setActiveModal] = useState(null);
+}: UseManagementModalsArgs): UseManagementModalsResult => {
+ const [activeModal, setActiveModal] = useState(null);
const openTagsModal = useCallback(() => setActiveModal(TAGS_MODAL), []);
const openCorrespondentsModal = useCallback(
@@ -37,7 +74,7 @@ export const useManagementModals = ({
if (!activeModal) {
return undefined;
}
- const handleKeyDown = (event) => {
+ const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault();
setActiveModal(null);
@@ -70,8 +107,8 @@ export const useManagementModals = ({
titleTag="h3"
titleProps={{ id: 'tags-modal-title' }}
actions={(
-
@@ -144,9 +211,9 @@ export const useManagementModals = ({
activeModal,
closeActiveModal,
correspondents,
- onCorrespondentCreate,
- onCorrespondentDelete,
- onCorrespondentUpdate,
+ handleCorrespondentCreateSafe,
+ handleCorrespondentDeleteSafe,
+ handleCorrespondentUpdateSafe,
refreshCorrespondents,
setStatusMessage,
]);
diff --git a/frontend/src/app/useWorkspaceSelection.js b/frontend/src/app/useWorkspaceSelection.ts
similarity index 68%
rename from frontend/src/app/useWorkspaceSelection.js
rename to frontend/src/app/useWorkspaceSelection.ts
index db31f4b..c2b13a1 100644
--- a/frontend/src/app/useWorkspaceSelection.js
+++ b/frontend/src/app/useWorkspaceSelection.ts
@@ -1,17 +1,34 @@
import { useCallback, useMemo } from 'react';
import { useDocumentSelection } from './useDocumentSelection';
-const identity = (value) => value;
+type RowKey = string;
+
+interface SelectionEntry {
+ rowKey?: RowKey;
+ [key: string]: unknown;
+}
+
+interface WorkspaceSelectionOptions {
+ resolveDocumentRowKey?: (id: string | number) => RowKey | null;
+ resolveFolderRowKey?: (id: string | number) => RowKey | null;
+ isDocumentRowKey?: (key: RowKey | SelectionEntry) => boolean;
+ isFolderRowKey?: (key: RowKey | SelectionEntry) => boolean;
+ getRowId?: (key: RowKey | SelectionEntry) => string | number | null;
+ onInspectDocument?: (id: string | number) => void;
+ onInspectFolder?: (id: string | number) => void;
+}
+
+const identity =
-
- Uploads
- {summary}
-
- )}
- actions={(
-
- );
-};
-
-export default UploadQueueOverlay;
diff --git a/frontend/src/app/UploadQueueOverlay.tsx b/frontend/src/app/UploadQueueOverlay.tsx
new file mode 100644
index 0000000..98052e1
--- /dev/null
+++ b/frontend/src/app/UploadQueueOverlay.tsx
@@ -0,0 +1,208 @@
+import { useMemo, useState, useEffect } from 'react';
+import type { JSX } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+ CloseIcon,
+ LoaderIcon,
+ CheckIcon,
+ InfoIcon,
+ WarningIcon,
+ BottombarCollapseIcon,
+ BottombarExpandIcon,
+} from '../ui/icons';
+import PanelHeader from '../ui/PanelHeader';
+
+type UploadStatus = 'pending' | 'uploading' | 'success' | 'duplicate' | 'error' | (string & {});
+
+interface UploadQueueItem {
+ id: string | number;
+ name: string;
+ status: UploadStatus;
+ error?: string | null;
+ document?: { id?: string | number; title?: string };
+ conflictDocumentId?: string | number;
+}
+
+interface UploadQueueOverlayProps {
+ queue?: UploadQueueItem[];
+ onClearQueue?: () => void;
+}
+
+const STATUS_META: Record
-
-
-
-
- )}
- />
- {!collapsed ? (
- -
- {[...queue]
- .slice()
- .reverse()
- .map((item) => {
- const meta = STATUS_META[item.status] || STATUS_META.pending;
- const fileLabel = item.name;
- const duplicateLabel = item.status === 'duplicate' ? item.document?.title || null : null;
- const documentId = item.document?.id || item.conflictDocumentId || null;
- const hasLink = Boolean(documentId);
- const handleNavigate = () => {
- if (!documentId) {
- return;
- }
- navigate(`/documents/${documentId}`);
- };
- return (
-
-
-
- {meta.icon}
-
- - {item.status === 'success' && hasLink ? ( - - ) : ( --- {fileLabel} -- )} -- {item.status === 'duplicate' && duplicateLabel ? ( - - Duplicate of{' '} - - - ) : item.status === 'error' && item.error ? ( - - {item.error} - - ) : ( - <> - {meta.label} - {documentId ? ( - - ( - - ) - - ) : null} - - )} --
- );
- })}
-
+
+ Uploads
+ {summary}
+
+ )}
+ actions={(
+
+ );
+};
+
+export default UploadQueueOverlay;
diff --git a/frontend/src/app/WorkspaceSelectionContext.tsx b/frontend/src/app/WorkspaceSelectionContext.tsx
new file mode 100644
index 0000000..47fc5ad
--- /dev/null
+++ b/frontend/src/app/WorkspaceSelectionContext.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import type useWorkspaceSelection from './useWorkspaceSelection';
+
+export type WorkspaceSelectionValue = ReturnType
+
+
+
+ )}
+ />
+ {!collapsed ? (
+
+
+ ) : null}
+ -
+ {[...queue]
+ .slice()
+ .reverse()
+ .map((item) => {
+ const meta = STATUS_META[item.status] || STATUS_META.pending;
+ const fileLabel = item.name;
+ const documentTitle = item.document?.title || null;
+ const duplicateLabel = item.status === 'duplicate' ? documentTitle : null;
+ const documentId = item.document?.id || item.conflictDocumentId || null;
+ const hasLink = Boolean(documentId);
+ const handleNavigate = () => {
+ if (!documentId) {
+ return;
+ }
+ navigate(`/documents/${documentId}`);
+ };
+ return (
+
-
+
+ {meta.icon}
+
+ + {item.status === 'success' && hasLink ? ( + + ) : ( +++ {fileLabel} ++ )} ++ {item.status === 'duplicate' && duplicateLabel ? ( + + Duplicate of{' '} + + + ) : item.status === 'error' && item.error ? ( + + {item.error} + + ) : ( + {meta.label} + )} ++
+ );
+ })}
+
{
- if (event instanceof DragEvent) {
- event.preventDefault();
- }
- }}
- >
- {hasPreview ? (
- 
event.preventDefault()}
- />
- ) : (
-
- );
-};
-
-export default DesktopPreviewCard;
-
diff --git a/frontend/src/desktop/DesktopPreviewCard.tsx b/frontend/src/desktop/DesktopPreviewCard.tsx
new file mode 100644
index 0000000..12c1501
--- /dev/null
+++ b/frontend/src/desktop/DesktopPreviewCard.tsx
@@ -0,0 +1,122 @@
+import { useEffect } from 'react';
+import type { JSX } from 'react';
+import { useAssetNavigator } from '../hooks/useAssetNavigator';
+
+type Identifier = string | number;
+
+interface DocumentLike {
+ id?: Identifier;
+ title?: string;
+ [key: string]: unknown;
+}
+
+interface AssetLike {
+ id?: Identifier;
+ url?: string | null;
+ expires_at?: number | null;
+ metadata?: Record
-
- )}
- {showNav ? (
- DOC
-
- {title}
-
-
-
-
-
- ) : null}
- {
+ if (event instanceof DragEvent) {
+ event.preventDefault();
+ }
+ }}
+ >
+ {hasPreview ? (
+ event.preventDefault()}
+ />
+ ) : (
+
+ );
+};
+
+export default DesktopPreviewCard;
diff --git a/frontend/src/desktop/DesktopWorkspace.jsx b/frontend/src/desktop/DesktopWorkspace.tsx
similarity index 64%
rename from frontend/src/desktop/DesktopWorkspace.jsx
rename to frontend/src/desktop/DesktopWorkspace.tsx
index 7b94936..fe0337b 100644
--- a/frontend/src/desktop/DesktopWorkspace.jsx
+++ b/frontend/src/desktop/DesktopWorkspace.tsx
@@ -8,6 +8,7 @@ import React, {
useSyncExternalStore,
} from 'react';
import { resolveDocumentAssetUrl } from '../asset_manager';
+import type { EnsureAssetUrl, GetAsset } from '../asset_manager';
import { formatTransform } from './math';
import useDocumentDrag from './useDocumentDrag';
import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
@@ -28,50 +29,212 @@ import '../styles/workspace/workspace-layout.css';
import '../styles/workspace/workspace-items.css';
import '../styles/workspace/workspace-cards.css';
+type Identifier = string | number;
+
+type TagLike = { id?: Identifier | null; label?: string; color?: string | null } | null;
+type DocumentLinkLike = { url?: string | null; contentType?: string | null };
+type OverlaySource = { url: string; alt?: string | null; contentType?: string | null };
+
+export interface DeskDocument {
+ id?: Identifier | null;
+ title?: string;
+ tags?: TagLike[] | null;
+ documentLink?: OverlaySource | null;
+ [key: string]: unknown;
+}
+
+interface NavigatorSnapshot {
+ url: string | null;
+ alt?: string | null;
+ width?: number | null;
+ height?: number | null;
+}
+
+type OverlayOriginHint = {
+ rotation?: number;
+ scale?: number;
+ width?: number;
+ height?: number;
+};
+
+interface OverlayOriginTransform {
+ rotation: number;
+ scaleX: number;
+ scaleY: number;
+ baseWidth: number;
+ baseHeight: number;
+}
+
+interface OverlayDisplay {
+ url: string;
+ alt?: string | null;
+ contentType?: string | null;
+}
+
+interface DocumentSizeInfo {
+ width: number;
+ height: number;
+ source?: 'snapshot' | 'metadata' | 'fallback';
+}
+
+interface PreviewMetadataEntry {
+ docId: string;
+ width: number;
+ height: number;
+}
+
+interface DragTransformOverride {
+ centerX?: number;
+ centerY?: number;
+ rotation?: number;
+ scale?: number;
+}
+
+interface DragSettings {
+ canvasPadding: number;
+ defaultCanvasWidth: number;
+ defaultCanvasHeight: number;
+ debugDrag?: boolean;
+}
+
+interface LayoutEntry {
+ centerX: number;
+ centerY: number;
+ rotation: number;
+ z: number;
+ width?: number;
+ height?: number;
+}
+
+type WorkspaceSnapshotState = {
+ layout: Map
+
+ )}
+ DOC
+
+ {title}
+
+ {
- if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
- onClearSelection();
+ if (event.target === event.currentTarget) {
+ onClearSelection?.();
}
focusShell();
}}
@@ -771,8 +970,8 @@ const DesktopWorkspaceView = ({
onDragLeave={handleCanvasDragLeave}
onDrop={handleCanvasDrop}
onPointerDown={(event) => {
- if (event.target === event.currentTarget && typeof onClearSelection === 'function') {
- onClearSelection();
+ if (event.target === event.currentTarget) {
+ onClearSelection?.();
}
focusShell();
}}
@@ -786,7 +985,7 @@ const DesktopWorkspaceView = ({
) : (
- items.map((doc) => {
+ items.map((doc, index) => {
const sizeInfo = ensureDocumentSize(doc);
if (!sizeInfo) {
return null;
@@ -803,10 +1002,12 @@ const DesktopWorkspaceView = ({
if (!Number.isFinite(centerX) || !Number.isFinite(centerY)) {
return null;
}
+ const resolvedCenterX = centerX as number;
+ const resolvedCenterY = centerY as number;
const rotation = dragOverride?.rotation ?? layout?.rotation ?? 0;
const scale = dragOverride?.scale ?? 1;
- const originX = centerX - cardWidth / 2;
- const originY = centerY - cardHeight / 2;
+ const originX = resolvedCenterX - cardWidth / 2;
+ const originY = resolvedCenterY - cardHeight / 2;
const transform = formatTransform(
Math.round(originX),
Math.round(originY),
@@ -822,16 +1023,19 @@ const DesktopWorkspaceView = ({
const shouldLoad = docKey ? visibleDocIds.has(docKey) : false;
const dragging = docKey ? draggingId === docKey : false;
const docTagKeys = Array.isArray(doc?.tags)
- ? doc.tags.map((tag) => (tag ? tag.id : null)).filter(Boolean)
+ ? doc.tags
+ .map((tag) => (tag?.id != null ? String(tag.id) : null))
+ .filter((id): id is string => Boolean(id))
: [];
const matchesFilter =
activeTagSet.size === 0 || docTagKeys.some((key) => activeTagSet.has(key));
const dropActive = docKey ? tagDropTargetId === docKey : false;
const dropPending = docKey ? pendingTagDocId === docKey : false;
- const isSelected = selectedDocumentIds.includes(doc.id);
+ const docId = doc?.id ?? null;
+ const isSelected = docId != null ? selectedDocumentIds.includes(docId) : false;
const docTagTokens = docTagKeys.join(' ');
- const cardPointerHandlers = getCardPointerHandlers(doc);
- const registerNode = (node) => {
+ const cardPointerHandlers = getCardPointerHandlers(doc) as React.HTMLAttributesNo documents to show here yet. Drop files to make this space come alive.
-
),
diff --git a/frontend/src/detail/useDetailWorkspace.js b/frontend/src/detail/useDetailWorkspace.ts
similarity index 67%
rename from frontend/src/detail/useDetailWorkspace.js
rename to frontend/src/detail/useDetailWorkspace.ts
index 2c0478e..115684c 100644
--- a/frontend/src/detail/useDetailWorkspace.js
+++ b/frontend/src/detail/useDetailWorkspace.ts
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useMemo } from 'react';
+import type { MutableRefObject } from 'react';
import { resolveDocumentAssetUrl } from '../asset_manager';
import { useDetailPanel } from '../app/useDetailPanel';
import {
@@ -6,11 +7,73 @@ import {
getRowId,
isDocumentRowKey,
} from '../app/appLayoutUtils';
+import type { DocumentInfoPanelProps } from '../documents/DocumentInfoPanel';
+import type { EnsureAssetUrl, GetDocumentAsset } from '../utils/ocr';
+
+type Identifier = string | number;
+
+interface DocumentLike {
+ id?: Identifier;
+ folder_id?: Identifier | 'root';
+ title?: string;
+ [key: string]: unknown;
+}
+
+interface FolderNode {
+ id: Identifier | 'root';
+ name?: string;
+ parentId?: Identifier | 'root';
+}
+
+type DocumentLink = {
+ url?: string;
+ contentType?: string | null;
+} | null;
+
+interface UseDetailWorkspaceArgs {
+ documents: DocumentLike[];
+ selectionOrder: string[];
+ selectedDocumentIds: Identifier[];
+ documentLookup: Map event.stopPropagation()}
+ className={stageClassName}
+ onClick={(event) => {
+ if (event.target === event.currentTarget) {
+ onClose();
+ }
+ }}
>
- 
{
- setNaturalSize({
- width: event.currentTarget.naturalWidth || null,
- height: event.currentTarget.naturalHeight || null,
- });
- }}
- onClick={handleImageClick}
- style={imageStyle}
- />
-
- {navVisible ? (
-
-