setShowHoverMenu(true)}
- onMouseLeave={() => setShowHoverMenu(false)}
onDoubleClick={handleCardDoubleClick}
>
- {/* Header bar */}
-
- {/* Logo/checkbox area */}
-
- {hasError ? (
-
- {t("error._value", "Error")}
+
{t("confirmCloseUnsaved", "This file has unsaved changes.")}
- {file.name}
+ {file.name}
+
+ {/* Shared edit notice modal */}
setShowSharedEditNotice(false)}
diff --git a/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx b/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
index 95de665902..db39d48d6a 100644
--- a/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
+++ b/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
@@ -5,58 +5,27 @@ import LocalIcon from "@app/components/shared/LocalIcon";
interface FileEditorRightRailButtonsParams {
totalItems: number;
- selectedCount: number;
- onSelectAll: () => void;
- onDeselectAll: () => void;
- onCloseSelected: () => void;
+ onCloseAll: () => void;
}
-export function useFileEditorRightRailButtons({
- totalItems,
- selectedCount,
- onSelectAll,
- onDeselectAll,
- onCloseSelected,
-}: FileEditorRightRailButtonsParams) {
+export function useFileEditorRightRailButtons({ totalItems, onCloseAll }: FileEditorRightRailButtonsParams) {
const { t, i18n } = useTranslation();
const buttons = useMemo(
() => [
{
- id: "file-select-all",
- icon: = ({
{/* File info */}
- {currentFile ? currentFile.name : "No file selected"}
+ {currentFile ? currentFile.name : "No file loaded"}
{currentFile ? getFileSize(currentFile) : ""}
diff --git a/frontend/src/core/components/fileManager/FileListItem.tsx b/frontend/src/core/components/fileManager/FileListItem.tsx
index 02c3c07f7d..1254d56131 100644
--- a/frontend/src/core/components/fileManager/FileListItem.tsx
+++ b/frontend/src/core/components/fileManager/FileListItem.tsx
@@ -148,14 +148,8 @@ const FileListItem: React.FC = ({
= ({
paddingLeft: isHistoryFile ? "2rem" : "0.75rem", // Indent history files
borderLeft: isHistoryFile ? "3px solid var(--mantine-color-blue-4)" : "none", // Visual indicator for history
}}
- onClick={isHistoryFile || isActive ? undefined : (e) => onSelect(e.shiftKey)}
+ onClick={isHistoryFile ? undefined : (e) => onSelect(e.shiftKey)}
onDoubleClick={onDoubleClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
@@ -175,16 +169,14 @@ const FileListItem: React.FC = ({
{/* Checkbox for regular files only */}
{}} // Handled by parent onClick
size="sm"
pl="sm"
pr="xs"
- disabled={isActive}
- color={isActive ? "green" : undefined}
styles={{
input: {
- cursor: isActive ? "not-allowed" : "pointer",
+ cursor: "pointer",
},
}}
/>
diff --git a/frontend/src/core/components/shared/BulkShareModal.tsx b/frontend/src/core/components/shared/BulkShareModal.tsx
index 346dddb8df..b8bcd2e8ed 100644
--- a/frontend/src/core/components/shared/BulkShareModal.tsx
+++ b/frontend/src/core/components/shared/BulkShareModal.tsx
@@ -162,7 +162,7 @@ const BulkShareModal: React.FC = ({ opened, onClose, files,
{t("storageShare.bulkDescription", "Create one link to share all selected files with signed-in users.")}
- {t("storageShare.fileCount", "{{count}} files selected", {
+ {t("storageShare.fileCount", "{{count}} files", {
count: files.length,
})}
diff --git a/frontend/src/core/components/shared/BulkUploadToServerModal.tsx b/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
index e9fb4650c1..77b1301391 100644
--- a/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
+++ b/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
@@ -89,7 +89,7 @@ const BulkUploadToServerModal: React.FC = ({ opene
{t("storageUpload.bulkDescription", "This uploads the selected files to your server storage.")}
- {t("storageUpload.fileCount", "{{count}} files selected", {
+ {t("storageUpload.fileCount", "{{count}} files", {
count: files.length,
})}
diff --git a/frontend/src/core/components/shared/FilePickerModal.tsx b/frontend/src/core/components/shared/FilePickerModal.tsx
index 3ed3cca0fb..be11fc2290 100644
--- a/frontend/src/core/components/shared/FilePickerModal.tsx
+++ b/frontend/src/core/components/shared/FilePickerModal.tsx
@@ -214,7 +214,7 @@ const FilePickerModal = ({ opened, onClose, storedFiles, onSelectFiles }: FilePi
{/* Selection summary */}
{selectedFileIds.length > 0 && (
- {selectedFileIds.length} {t("fileManager.filesSelected", "files selected")}
+ {selectedFileIds.length} {t("fileManager.filesSelected", "files")}
)}
diff --git a/frontend/src/core/components/shared/FileSelectorPicker.module.css b/frontend/src/core/components/shared/FileSelectorPicker.module.css
new file mode 100644
index 0000000000..2a6fc3edf5
--- /dev/null
+++ b/frontend/src/core/components/shared/FileSelectorPicker.module.css
@@ -0,0 +1,244 @@
+/* ── Trigger ─────────────────────────────────────── */
+.trigger {
+ border: 1px solid var(--border-default);
+ border-radius: var(--radius-md);
+ padding: 0.5rem 0.75rem;
+ background: var(--bg-surface);
+ cursor: pointer;
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ user-select: none;
+ transition:
+ border-color 0.12s ease,
+ box-shadow 0.12s ease;
+}
+
+.trigger:hover:not(.triggerDisabled) {
+ border-color: var(--mantine-color-blue-5);
+}
+
+.triggerDisabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.triggerOpen {
+ border-color: var(--mantine-color-blue-5);
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--mantine-color-blue-5) 20%, transparent);
+}
+
+/* ── Popover dropdown ────────────────────────────── */
+.dropdown {
+ padding: 0;
+ overflow: hidden;
+ border-radius: var(--radius-md) !important;
+ min-width: 340px;
+}
+
+/* ── Header area (tabs + sort) ───────────────────── */
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.3rem 0.45rem;
+ gap: 0.4rem;
+ border-bottom: 1px solid var(--border-default);
+ background: var(--bg-surface);
+}
+
+.tabGroup {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ min-width: 0;
+}
+
+/* One slim row: Saved files | Workbench | Upload (text only, no icon) */
+.slimTabBar {
+ display: flex;
+ align-items: stretch;
+ flex: 1;
+ min-width: 0;
+ min-height: 24px;
+ max-height: 26px;
+ border: 1px solid var(--border-default);
+ border-radius: var(--radius-sm);
+ background: color-mix(in srgb, var(--mantine-color-default-hover) 85%, transparent);
+ padding: 1px;
+ gap: 1px;
+ box-sizing: border-box;
+}
+
+.slimTab,
+.slimTabActive {
+ flex: 1 1 0;
+ min-width: 0;
+ margin: 0;
+ border: none;
+ cursor: pointer;
+ font-size: 0.6875rem;
+ font-weight: 500;
+ line-height: 1.15;
+ letter-spacing: 0.01em;
+ padding: 1px 0.35rem;
+ border-radius: calc(var(--radius-sm) - 2px);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition:
+ background 0.1s ease,
+ color 0.1s ease;
+}
+
+.slimTab {
+ background: transparent;
+ color: var(--mantine-color-dimmed);
+}
+
+.slimTab:hover {
+ color: var(--mantine-color-text);
+ background: color-mix(in srgb, var(--mantine-color-body) 60%, transparent);
+}
+
+.slimTabActive {
+ background: var(--mantine-color-blue-filled);
+ color: #fff;
+}
+
+.slimTabUpload {
+ flex: 0 0 auto;
+ margin: 0;
+ border: none;
+ cursor: pointer;
+ font-size: 0.6875rem;
+ font-weight: 500;
+ line-height: 1.15;
+ padding: 1px 0.45rem;
+ border-radius: calc(var(--radius-sm) - 2px);
+ white-space: nowrap;
+ background: transparent;
+ color: var(--mantine-color-dimmed);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.75rem;
+}
+
+.slimTabUpload:hover:not(:disabled) {
+ color: var(--mantine-color-blue-filled);
+ background: color-mix(in srgb, var(--mantine-color-blue-1) 35%, transparent);
+}
+
+.slimTabUpload:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* ── Sort button group ───────────────────────────── */
+.sortGroup {
+ display: flex;
+ gap: 2px;
+ background: var(--mantine-color-default-hover);
+ border-radius: var(--radius-sm);
+ padding: 2px;
+}
+
+.sortBtn {
+ padding: 2px 8px;
+ font-size: 0.7rem;
+ border-radius: calc(var(--radius-sm) - 2px);
+ cursor: pointer;
+ border: none;
+ background: transparent;
+ color: var(--mantine-color-dimmed);
+ line-height: 1.6;
+ transition:
+ background 0.1s,
+ color 0.1s;
+ white-space: nowrap;
+}
+
+.sortBtn:hover {
+ color: var(--mantine-color-text);
+}
+
+.sortBtnActive {
+ background: var(--mantine-color-blue-filled);
+ color: white;
+}
+
+.sortArrow {
+ opacity: 0.85;
+ font-size: 0.65rem;
+ vertical-align: middle;
+}
+
+/* ── Scrollable file list ────────────────────────── */
+.list {
+ padding: 0;
+}
+
+/* ── Individual file row ─────────────────────────── */
+.fileItem {
+ width: 100%;
+ padding: 0.625rem 0.875rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ border-top: 1px solid var(--border-default);
+ text-align: left;
+ transition: background 0.08s ease;
+}
+
+.fileItem:first-child {
+ border-top: none;
+}
+
+.fileItem:hover:not(:disabled) {
+ background: var(--mantine-color-default-hover);
+}
+
+.fileItem:disabled {
+ cursor: wait;
+}
+
+.fileItemContent {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+}
+
+.fileName {
+ font-size: 0.8125rem;
+ font-weight: 500;
+ color: var(--mantine-color-text);
+}
+
+.fileMeta {
+ font-size: 0.6875rem;
+ color: var(--mantine-color-dimmed);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* ── Empty / loading states ──────────────────────── */
+.emptyState {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2.5rem 1rem;
+ flex-direction: column;
+ gap: 0.5rem;
+ color: var(--mantine-color-dimmed);
+}
diff --git a/frontend/src/core/components/shared/FileSelectorPicker.tsx b/frontend/src/core/components/shared/FileSelectorPicker.tsx
new file mode 100644
index 0000000000..4450764311
--- /dev/null
+++ b/frontend/src/core/components/shared/FileSelectorPicker.tsx
@@ -0,0 +1,408 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { Box, Popover, ScrollArea, Text, Loader, FileButton } from "@mantine/core";
+import AddIcon from "@mui/icons-material/Add";
+import { useTranslation } from "react-i18next";
+import { createStirlingFile, createFileId, createNewStirlingFileStub } from "@app/types/fileContext";
+import type { StirlingFile, StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+import { useAllFiles } from "@app/contexts/FileContext";
+import { useFileContext } from "@app/contexts/file/fileHooks";
+import { useFileManager } from "@app/hooks/useFileManager";
+import { fileStorage } from "@app/services/fileStorage";
+import apiClient from "@app/services/apiClient";
+import { parseContentDispositionFilename, extractLatestFilesFromBundle } from "@app/services/shareBundleUtils";
+import { truncateCenter } from "@app/utils/textUtils";
+import { generateThumbnailForFile } from "@app/utils/thumbnailUtils";
+import styles from "@app/components/shared/FileSelectorPicker.module.css";
+
+const LS_TAB = "filePicker.tab";
+const LS_SORT = "filePicker.sort";
+const LS_SORT_DIR = "filePicker.sortDir";
+
+function lsGet(key: string, fallback: T[number], valid: T): T[number] {
+ try {
+ const v = localStorage.getItem(key);
+ const allowed = valid as readonly string[];
+ if (v && allowed.includes(v)) return v as T[number];
+ } catch {
+ /* ignore */
+ }
+ return fallback;
+}
+
+function lsSet(key: string, value: string) {
+ try {
+ localStorage.setItem(key, value);
+ } catch {
+ /* ignore */
+ }
+}
+
+function formatBytes(bytes: number): string {
+ if (!bytes) return "";
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatDate(ms: number | undefined): string {
+ if (!ms) return "";
+ return new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+}
+
+function buildMeta(stub: StirlingFileStub): string {
+ const parts: string[] = [];
+ const pages = stub.processedFile?.totalPages;
+ if (pages) parts.push(`${pages} ${pages === 1 ? "page" : "pages"}`);
+ const size = formatBytes(stub.size ?? 0);
+ if (size) parts.push(size);
+ const date = formatDate(stub.lastModified || stub.createdAt);
+ if (date) parts.push(date);
+ return parts.join(" · ");
+}
+
+export interface FileSelectorResult {
+ stub: StirlingFileStub;
+ stirlingFile: StirlingFile;
+}
+
+export interface FileSelectorPickerProps {
+ placeholder?: string;
+ /** FileIds to hide from both lists (e.g. the other slot's current selection) */
+ excludeIds?: string[];
+ disabled?: boolean;
+ /**
+ * Called with the stub (for display) and the ready-to-use StirlingFile (for processing).
+ * Files are NOT added to the workbench — data is loaded inline.
+ */
+ onSelect: (result: FileSelectorResult) => void;
+}
+
+export function FileSelectorPicker({ placeholder, excludeIds = [], disabled = false, onSelect }: FileSelectorPickerProps) {
+ const { t } = useTranslation();
+ const [isOpen, setIsOpen] = useState(false);
+ const [activeTab, setActiveTab] = useState<"workbench" | "saved">(() => lsGet(LS_TAB, "saved", ["workbench", "saved"]));
+ const [sortBy, setSortBy] = useState<"date" | "name">(() => lsGet(LS_SORT, "date", ["date", "name"]));
+ const [sortDir, setSortDir] = useState<"asc" | "desc">(() => lsGet(LS_SORT_DIR, "desc", ["asc", "desc"]));
+ const [savedStubs, setSavedStubs] = useState([]);
+ const [savedLoading, setSavedLoading] = useState(false);
+ const [loadingId, setLoadingId] = useState(null);
+ const [uploadBusy, setUploadBusy] = useState(false);
+
+ const { fileStubs: workbenchStubs } = useAllFiles();
+ const { selectors } = useFileContext();
+ const { loadRecentFiles } = useFileManager();
+
+ const handleTabChange = useCallback((tab: "workbench" | "saved") => {
+ lsSet(LS_TAB, tab);
+ setActiveTab(tab);
+ }, []);
+
+ const handleSortChange = useCallback(
+ (sort: "date" | "name") => {
+ if (sort === sortBy) {
+ const newDir = sortDir === "asc" ? "desc" : "asc";
+ lsSet(LS_SORT_DIR, newDir);
+ setSortDir(newDir);
+ } else {
+ const defaultDir: "asc" | "desc" = sort === "name" ? "asc" : "desc";
+ lsSet(LS_SORT, sort);
+ lsSet(LS_SORT_DIR, defaultDir);
+ setSortBy(sort);
+ setSortDir(defaultDir);
+ }
+ },
+ [sortBy, sortDir],
+ );
+
+ // Sync tab/sort from localStorage whenever this picker opens.
+ // Both slot pickers mount simultaneously so their useState initialisers run at
+ // the same time — a tab change in one picker writes to localStorage but the
+ // other picker's React state is stale. Re-reading on open fixes that.
+ useEffect(() => {
+ if (!isOpen) return;
+ setActiveTab(lsGet(LS_TAB, "saved", ["workbench", "saved"]));
+ setSortBy(lsGet(LS_SORT, "date", ["date", "name"]));
+ setSortDir(lsGet(LS_SORT_DIR, "desc", ["asc", "desc"]));
+ }, [isOpen]);
+
+ // Load saved files when the saved tab is active and the picker is open
+ useEffect(() => {
+ if (activeTab !== "saved" || !isOpen) return;
+ setSavedLoading(true);
+ loadRecentFiles()
+ .then(setSavedStubs)
+ .finally(() => setSavedLoading(false));
+ }, [activeTab, isOpen, loadRecentFiles]);
+
+ const workbenchIdSet = useMemo(() => new Set(workbenchStubs.map((s) => s.id)), [workbenchStubs]);
+
+ const displayStubs = useMemo(() => {
+ const base = activeTab === "workbench" ? workbenchStubs : savedStubs;
+ const filtered = base.filter((s) => !excludeIds.includes(s.id));
+ const dir = sortDir === "asc" ? 1 : -1;
+ return [...filtered].sort((a, b) =>
+ sortBy === "name"
+ ? dir * a.name.localeCompare(b.name)
+ : dir * ((a.lastModified || a.createdAt || 0) - (b.lastModified || b.createdAt || 0)),
+ );
+ }, [activeTab, workbenchStubs, savedStubs, excludeIds, sortBy, sortDir]);
+
+ const loadAndSelect = useCallback(
+ async (stub: StirlingFileStub) => {
+ if (loadingId) return;
+
+ // Workbench file — get StirlingFile directly from FileContext (no loading needed)
+ if (workbenchIdSet.has(stub.id)) {
+ const sf = selectors.getFile(stub.id as FileId);
+ if (sf) {
+ // Prefer the workbench stub (has thumbnail) over the saved stub (may not)
+ const workbenchStub = selectors.getStirlingFileStub(stub.id as FileId) ?? stub;
+ onSelect({ stub: workbenchStub, stirlingFile: sf });
+ setIsOpen(false);
+ }
+ return;
+ }
+
+ // Saved file — load bytes without touching the workbench
+ setLoadingId(stub.id);
+ try {
+ let stirlingFile: StirlingFile | null = null;
+
+ if (stub.remoteShareToken) {
+ const res = await apiClient.get(`/api/v1/storage/share-links/${stub.remoteShareToken}`, {
+ responseType: "blob",
+ suppressErrorToast: true,
+ skipAuthRedirect: true,
+ } as any);
+ const ct = res.headers?.["content-type"] || res.headers?.["Content-Type"] || "";
+ const disp = res.headers?.["content-disposition"] || res.headers?.["Content-Disposition"] || "";
+ const files = await extractLatestFilesFromBundle(
+ res.data as Blob,
+ parseContentDispositionFilename(disp) || "shared-file",
+ ct,
+ );
+ if (files[0]) stirlingFile = createStirlingFile(files[0], createFileId());
+ } else if (stub.remoteStorageId) {
+ const res = await apiClient.get(`/api/v1/storage/files/${stub.remoteStorageId}/download`, {
+ responseType: "blob",
+ suppressErrorToast: true,
+ skipAuthRedirect: true,
+ } as any);
+ const ct = res.headers?.["content-type"] || res.headers?.["Content-Type"] || "";
+ const disp = res.headers?.["content-disposition"] || res.headers?.["Content-Disposition"] || "";
+ const files = await extractLatestFilesFromBundle(
+ res.data as Blob,
+ parseContentDispositionFilename(disp) || stub.name,
+ ct,
+ );
+ if (files[0]) stirlingFile = createStirlingFile(files[0], stub.id as FileId);
+ } else {
+ // Local IndexedDB file
+ const localFile = await fileStorage.getStirlingFile(stub.id);
+ if (localFile) stirlingFile = localFile;
+ }
+
+ if (stirlingFile) {
+ // Generate thumbnail on-the-fly if the stub doesn't already have one
+ let resolvedStub = stub;
+ if (!resolvedStub.thumbnailUrl) {
+ try {
+ const thumbnail = await generateThumbnailForFile(stirlingFile);
+ if (thumbnail) {
+ resolvedStub = { ...stub, thumbnailUrl: thumbnail };
+ // Persist so subsequent opens don't regenerate
+ void fileStorage.updateThumbnail(stirlingFile.fileId as FileId, thumbnail);
+ }
+ } catch {
+ // Non-fatal — thumbnail simply won't show
+ }
+ }
+ onSelect({ stub: resolvedStub, stirlingFile });
+ setIsOpen(false);
+ }
+ } catch (err) {
+ console.error("FileSelectorPicker: failed to load file", err);
+ } finally {
+ setLoadingId(null);
+ }
+ },
+ [loadingId, workbenchIdSet, selectors, onSelect],
+ );
+
+ const handleUpload = useCallback(
+ async (file: File | null) => {
+ if (!file || uploadBusy || disabled) return;
+ setUploadBusy(true);
+ try {
+ const id = createFileId();
+ let stub = createNewStirlingFileStub(file, id);
+ const stirlingFile = createStirlingFile(file, id);
+ // Generate a first-page thumbnail for the uploaded file
+ try {
+ const thumbnail = await generateThumbnailForFile(file);
+ if (thumbnail) stub = { ...stub, thumbnailUrl: thumbnail };
+ } catch {
+ // Non-fatal — thumbnail simply won't show
+ }
+ await fileStorage.storeStirlingFile(stirlingFile, stub);
+ lsSet(LS_TAB, "saved");
+ setActiveTab("saved");
+ const refreshed = await loadRecentFiles();
+ setSavedStubs(refreshed);
+ onSelect({ stub, stirlingFile });
+ setIsOpen(false);
+ } catch (err) {
+ console.error("FileSelectorPicker: upload failed", err);
+ } finally {
+ setUploadBusy(false);
+ }
+ },
+ [disabled, loadRecentFiles, onSelect, uploadBusy],
+ );
+
+ const triggerClass = [styles.trigger, disabled ? styles.triggerDisabled : "", isOpen ? styles.triggerOpen : ""]
+ .filter(Boolean)
+ .join(" ");
+
+ return (
+ setIsOpen(false)}
+ position="bottom-start"
+ withinPortal
+ shadow="md"
+ closeOnClickOutside
+ clickOutsideEvents={["mousedown", "touchstart"]}
+ >
+
+ {
+ if (!disabled) setIsOpen((o) => !o);
+ }}
+ role="button"
+ tabIndex={disabled ? -1 : 0}
+ onKeyDown={(e) => {
+ if (!disabled && (e.key === "Enter" || e.key === " ")) setIsOpen((o) => !o);
+ }}
+ aria-expanded={isOpen}
+ aria-haspopup="listbox"
+ >
+
+ {placeholder || t("fileSelectorPicker.placeholder", "Select file")}
+
+
+
+
+
+
+ {savedLoading ? (
+
+
+
+ );
+}
diff --git a/frontend/src/core/components/shared/HoverActionMenu.tsx b/frontend/src/core/components/shared/HoverActionMenu.tsx
index 3fc257716a..e617d3c792 100644
--- a/frontend/src/core/components/shared/HoverActionMenu.tsx
+++ b/frontend/src/core/components/shared/HoverActionMenu.tsx
@@ -18,19 +18,39 @@ interface HoverActionMenuProps {
actions: HoverAction[];
position?: "inside" | "outside";
className?: string;
+ visibility?: "state" | "cssHover";
}
-const HoverActionMenu: React.FC = ({ show, actions, position = "inside", className = "" }) => {
+const HoverActionMenu: React.FC = ({
+ show,
+ actions,
+ position = "inside",
+ className = "",
+ visibility = "state",
+}) => {
const visibleActions = actions.filter((action) => !action.hidden);
if (visibleActions.length === 0) {
return null;
}
+ const style: React.CSSProperties = { zIndex: Z_INDEX_HOVER_ACTION_MENU };
+ if (visibility === "state") {
+ style.opacity = show ? 1 : 0;
+ style.pointerEvents = show ? "auto" : "none";
+ } else if (show) {
+ // Force visible (e.g. mobile) even when CSS-hover mode is active.
+ style.opacity = 1;
+ style.pointerEvents = "auto";
+ }
+
return (
+ {/* Thumbnail area */}
+
- {/* Hover Menu */}
-
+ {/* thumbUnit groups toolchain + card so they center together, keeping text tight above the card */}
+
+ 
{
+ e.currentTarget.style.display = "none";
+ }}
+ />
+
+ ) : file.type?.startsWith("application/pdf") ? (
+
+
+ Loading thumbnail...
+
+
+ ) : null}
- {/* Preview area */}
-
+
+ {/* Hover action menu — visibility driven by CSS on desktop, always shown on mobile */}
+
+ {/* Tool chain bar — always rendered for consistent height, content only when history exists */}
+ onToggleFile(file.id)}
- color="var(--checkbox-checked-bg)"
- />
- ) : (
-
- {/* Centered index */}
-
+ {file.toolHistory && file.toolHistory.length > 0 && (
+
- ) : isSupported ? (
-
- {t("unsupported", "Unsupported")}
-
- )}
-
- {index + 1}
-
-
- {/* Action buttons group */}
-
- {isEncrypted && (
-
- {
- e.stopPropagation();
- openEncryptedUnlockPrompt(file.id);
- }}
- >
-
-
- )}
- {/* Pin/Unpin icon */}
-
- {
- e.stopPropagation();
- if (actualFile) {
- if (isPinned) {
- unpinFile(actualFile);
- alert({ alertType: "neutral", title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
- } else {
- pinFile(actualFile);
- alert({ alertType: "success", title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
- }
- }
- }}
+
+ {/* Error overlay */}
+ {hasError && (
+
- {isPinned ?
-
+ {t("error._value", "Error")}
+
+ )}
- {/* Title + meta line */}
-
-
- {truncateCenter(file.name, 40)}
-
-
- {/* e.g., v2 - Jan 29, 2025 - PDF file - 3 Pages */}
- {`v${file.versionNumber} - `}
- {dateLabel}
- {extUpper ? ` - ${extUpper} file` : ""}
- {pageLabel ? ` - ${pageLabel}` : ""}
-
-
+ {/* Thumbnail image or loading state */}
+ {file.thumbnailUrl ? (
+
-
- )}
+ {/* end thumbUnit */}
+
+ {/* Drag handle */}
+
+
- {file.thumbnailUrl ? (
-
- {
- const img = e.currentTarget;
- img.style.display = "none";
- img.parentElement?.setAttribute("data-thumb-missing", "true");
- }}
- style={{
- maxWidth: "80%",
- maxHeight: "80%",
- objectFit: "contain",
- borderRadius: 0,
- background: "#ffffff",
- border: "1px solid var(--border-default)",
- display: "block",
- marginLeft: "auto",
- marginRight: "auto",
- alignSelf: "start",
- }}
- />
-
- ) : file.type?.startsWith("application/pdf") ? (
-
-
- Loading thumbnail...
-
-
- ) : null}
-
-
- {/* Drag handle (span wrapper so we can attach a ref reliably) */}
-
-
-
+ v{file.versionNumber}
+ {isPinned && (
+
+
+ {
+ e.stopPropagation();
+ openEncryptedUnlockPrompt(file.id);
+ }}
+ style={{ pointerEvents: "auto" }}
+ >
+
+
+ )}
+
+
+
{/* Close Confirmation Modal */}
+
{metaLine}
+
+
+
+
+
+
+
+
+
+
+ {(fbProps) => (
+
+ )}
+
+
+
+
+
+
+
+
+ ) : displayStubs.length === 0 ? (
+
+ {t("fileSelectorPicker.empty", "No files available")}
+
+ ) : (
+ displayStubs.map((stub) => {
+ const meta = buildMeta(stub);
+ const isItemLoading = loadingId === stub.id;
+ return (
+
+ );
+ })
+ )}
+ e.stopPropagation()}
onMouseUp={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
diff --git a/frontend/src/core/components/shared/MultiSelectControls.tsx b/frontend/src/core/components/shared/MultiSelectControls.tsx
index 856c971130..a35d72bf8f 100644
--- a/frontend/src/core/components/shared/MultiSelectControls.tsx
+++ b/frontend/src/core/components/shared/MultiSelectControls.tsx
@@ -26,11 +26,11 @@ const MultiSelectControls = ({
- {selectedCount} {t("fileManager.filesSelected", "files selected")}
+ {selectedCount} {t("fileManager.filesSelected", "files")}
{onAddToUpload && (
diff --git a/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx b/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
index ba7c171c83..cc377cce58 100644
--- a/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
+++ b/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
@@ -39,9 +39,9 @@ const CreateSessionPanel = ({
) : (
<>
-
diff --git a/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx b/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
index 7a1e7c21c8..bfd9e1385c 100644
--- a/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
+++ b/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
@@ -10,6 +10,9 @@ import {
} from "@app/components/tools/compare/compare";
import CompareNavigationDropdown from "@app/components/tools/compare/CompareNavigationDropdown";
import { useIsMobile } from "@app/hooks/useIsMobile";
+import { truncateCenter } from "@app/utils/textUtils";
+
+const COMPARE_PANE_TITLE_MAX_LEN = 48;
// utilities moved to compare.ts
@@ -91,9 +94,9 @@ const CompareDocumentPane = ({
return (
{t("quickAccess.selectedFile", "Selected file")}
+ {t("quickAccess.selectedFile", "File")}
- {selectedFiles[0]?.name || t("quickAccess.noFile", "No file selected")}
+ {selectedFiles[0]?.name || t("quickAccess.noFile", "No file loaded")}
-
-
- {title}
+
+
+ {title ? truncateCenter(title, COMPARE_PANE_TITLE_MAX_LEN) : title}
{(changes.length > 0 || Boolean(dropdownPlaceholder)) && (
diff --git a/frontend/src/core/components/tools/compare/compareView.css b/frontend/src/core/components/tools/compare/compareView.css
index d249a7a088..fdb1d6870a 100644
--- a/frontend/src/core/components/tools/compare/compareView.css
+++ b/frontend/src/core/components/tools/compare/compareView.css
@@ -516,3 +516,95 @@
margin-right: 0 !important;
}
}
+
+/* Compare tool — file selection step (Original / Edited + swap column) */
+.compare-step-selection {
+ width: 100%;
+}
+
+.compare-step-selection__clear-row {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+}
+
+/* Thumbnails + swap only — swap top aligns with first thumbnail, not “Original PDF” heading */
+.compare-step-selection__thumbs-row {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ gap: 0.75rem;
+ width: 100%;
+ min-width: 0;
+}
+
+.compare-step-selection__thumbs-col {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+/* Full-height light bar to the right of both cards (reference UI) */
+.compare-step-selection__swap {
+ flex-shrink: 0;
+ width: 36px;
+ min-width: 36px;
+ align-self: stretch;
+ margin: 0;
+ padding: 0.5rem 0.2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+ border-radius: var(--radius-md);
+ border: 1px solid color-mix(in srgb, var(--mantine-color-blue-4) 28%, var(--border-default));
+ background: color-mix(in srgb, var(--mantine-color-blue-0) 92%, var(--mantine-color-body));
+ color: var(--mantine-color-blue-filled);
+ cursor: pointer;
+ font: inherit;
+ transition:
+ background 0.12s ease,
+ border-color 0.12s ease;
+}
+
+.compare-step-selection__swap:hover:not(:disabled) {
+ background: color-mix(in srgb, var(--mantine-color-blue-1) 75%, var(--mantine-color-body));
+ border-color: color-mix(in srgb, var(--mantine-color-blue-5) 35%, var(--border-default));
+}
+
+.compare-step-selection__swap:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+.compare-step-selection__swap-icon {
+ font-size: 1.35rem !important;
+ color: var(--mantine-color-blue-filled);
+}
+
+.compare-step-selection__swap-label {
+ font-size: 0.7rem;
+ font-weight: 600;
+ line-height: 1.15;
+ text-align: center;
+ color: var(--mantine-color-blue-filled);
+ writing-mode: horizontal-tb;
+}
+
+[data-mantine-color-scheme="dark"] .compare-step-selection__swap {
+ background: color-mix(in srgb, var(--mantine-color-blue-9) 22%, var(--mantine-color-dark-6));
+ border-color: color-mix(in srgb, var(--mantine-color-blue-4) 40%, var(--border-default));
+ color: var(--mantine-color-blue-3);
+}
+
+[data-mantine-color-scheme="dark"] .compare-step-selection__swap:hover:not(:disabled) {
+ background: color-mix(in srgb, var(--mantine-color-blue-9) 32%, var(--mantine-color-dark-6));
+}
+
+[data-mantine-color-scheme="dark"] .compare-step-selection__swap-icon,
+[data-mantine-color-scheme="dark"] .compare-step-selection__swap-label {
+ color: var(--mantine-color-blue-3);
+}
diff --git a/frontend/src/core/components/tools/crop/CropSettings.tsx b/frontend/src/core/components/tools/crop/CropSettings.tsx
index c461cf3688..355fc3047c 100644
--- a/frontend/src/core/components/tools/crop/CropSettings.tsx
+++ b/frontend/src/core/components/tools/crop/CropSettings.tsx
@@ -3,7 +3,7 @@ import { Stack, Text, Box, Group, ActionIcon, Center, Alert, Checkbox } from "@m
import { useTranslation } from "react-i18next";
import RestartAltIcon from "@mui/icons-material/RestartAlt";
import { CropParametersHook } from "@app/hooks/tools/crop/useCropParameters";
-import { useSelectedFiles } from "@app/contexts/file/fileHooks";
+import { useAllFiles } from "@app/contexts/FileContext";
import CropAreaSelector from "@app/components/tools/crop/CropAreaSelector";
import CropCoordinateInputs from "@app/components/tools/crop/CropCoordinateInputs";
import { DEFAULT_CROP_AREA } from "@app/constants/cropConstants";
@@ -21,17 +21,17 @@ const CONTAINER_SIZE = 250; // Fit within actual pane width
const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
const { t } = useTranslation();
- const { selectedFiles, selectedFileStubs } = useSelectedFiles();
+ const { files, fileStubs } = useAllFiles();
- // Get the first selected file for preview
+ // Get the first file for preview
const selectedStub = useMemo(() => {
- return selectedFileStubs.length > 0 ? selectedFileStubs[0] : null;
- }, [selectedFileStubs]);
+ return fileStubs.length > 0 ? fileStubs[0] : null;
+ }, [fileStubs]);
- // Get the first selected file for PDF processing
+ // Get the first file for PDF processing
const selectedFile = useMemo(() => {
- return selectedFiles.length > 0 ? selectedFiles[0] : null;
- }, [selectedFiles]);
+ return files.length > 0 ? files[0] : null;
+ }, [files]);
// Get thumbnail for the selected file
const [thumbnail, setThumbnail] = useState(null);
diff --git a/frontend/src/core/components/tools/rotate/RotateSettings.tsx b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
index e7197feec3..51c803aec0 100644
--- a/frontend/src/core/components/tools/rotate/RotateSettings.tsx
+++ b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
import RotateLeftIcon from "@mui/icons-material/RotateLeft";
import RotateRightIcon from "@mui/icons-material/RotateRight";
import { RotateParametersHook } from "@app/hooks/tools/rotate/useRotateParameters";
-import { useSelectedFiles } from "@app/contexts/file/fileHooks";
+import { useAllFiles } from "@app/contexts/FileContext";
import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
interface RotateSettingsProps {
@@ -14,12 +14,12 @@ interface RotateSettingsProps {
const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) => {
const { t } = useTranslation();
- const { selectedFileStubs } = useSelectedFiles();
+ const { fileStubs } = useAllFiles();
- // Get the first selected file for preview
+ // Get the first file for preview
const selectedStub = useMemo(() => {
- return selectedFileStubs.length > 0 ? selectedFileStubs[0] : null;
- }, [selectedFileStubs]);
+ return fileStubs.length > 0 ? fileStubs[0] : null;
+ }, [fileStubs]);
// Get thumbnail for the selected file
const [thumbnail, setThumbnail] = useState(null);
diff --git a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
index 4570418ed6..05cac5da5a 100644
--- a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
@@ -56,9 +56,9 @@ const FileStatusIndicator = ({ selectedFiles = [], minFiles = 1 }: FileStatusInd
const getPlaceholder = () => {
if (minFiles === undefined || minFiles === 1) {
- return t("files.selectFromWorkbench", "Select files from the workbench or ");
+ return t("files.selectFromWorkbench", "Add files to the workbench or ");
} else {
- return t("files.selectMultipleFromWorkbench", "Select at least {{count}} files from the workbench or ", {
+ return t("files.selectMultipleFromWorkbench", "Add at least {{count}} files to the workbench or ", {
count: minFiles,
});
}
@@ -136,9 +136,9 @@ const FileStatusIndicator = ({ selectedFiles = [], minFiles = 1 }: FileStatusInd
✓{" "}
{selectedFiles.length === 1 ? (
- {t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name })}
+ {t("fileSelected", "{{filename}}", { filename: selectedFiles[0]?.name })}
) : (
- t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })
+ t("filesSelected", "{{count}} files", { count: selectedFiles.length })
)}
);
diff --git a/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx b/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
index 55f083e571..ca3d0a96b1 100644
--- a/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
+++ b/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
@@ -16,8 +16,7 @@ export interface ScopedOperationButtonProps extends OperationButtonProps {
*
* - Viewer mode (multiple files loaded): appends "(this file)" to button text and
* shows a note naming the exact file that will be processed.
- * - File-editor mode with N>1 selected files: appends "(N files)" to button text.
- * - File-editor mode with 0 selected files: shows a hint to select files.
+ * - N>1 files loaded: appends "(N files)" to button text.
* - All other cases: no change to button text or layout.
*/
export function ScopedOperationButton({ selectedFiles, disableScopeHints, ...props }: ScopedOperationButtonProps) {
@@ -27,7 +26,6 @@ export function ScopedOperationButton({ selectedFiles, disableScopeHints, ...pro
const { files: allFiles } = useAllFiles();
const isViewerMode = workbench === "viewer";
- const isFileEditorMode = workbench === "fileEditor";
const hasMultipleFilesLoaded = allFiles.length > 1;
const baseText = props.submitText ?? t("submit", "Submit");
@@ -47,8 +45,6 @@ export function ScopedOperationButton({ selectedFiles, disableScopeHints, ...pro
? allFiles[activeFileIndex]?.name
: null;
- const showSelectFilesHint = !disableScopeHints && isFileEditorMode && allFiles.length > 0 && selectedFiles.length === 0;
-
return (
<>
)}
- {showSelectFilesHint && (
-
- {t("tool.selectFilesHint", "Select files in Active Files to run this tool")}
-
- )}
);
}
diff --git a/frontend/src/core/components/viewer/NonPdfViewer.tsx b/frontend/src/core/components/viewer/NonPdfViewer.tsx
index 214ac3fc03..8c4fc17160 100644
--- a/frontend/src/core/components/viewer/NonPdfViewer.tsx
+++ b/frontend/src/core/components/viewer/NonPdfViewer.tsx
@@ -99,7 +99,7 @@ export function NonPdfViewerWrapper(props: ViewerProps) {
return (
- No file selected
+ No file loaded
);
diff --git a/frontend/src/core/contexts/FileManagerContext.tsx b/frontend/src/core/contexts/FileManagerContext.tsx
index 5f7cc98baf..e42558d86d 100644
--- a/frontend/src/core/contexts/FileManagerContext.tsx
+++ b/frontend/src/core/contexts/FileManagerContext.tsx
@@ -1,7 +1,7 @@
import React, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
import { Button, Group, Modal, Stack, Text } from "@mantine/core";
import { fileStorage } from "@app/services/fileStorage";
-import { useFileActions } from "@app/contexts/FileContext";
+import { useFileActions, useFileManagement } from "@app/contexts/FileContext";
import { zipFileService } from "@app/services/zipFileService";
import { StirlingFileStub } from "@app/types/fileContext";
import { downloadFiles } from "@app/utils/downloadUtils";
@@ -78,6 +78,7 @@ interface FileManagerProviderProps {
refreshRecentFiles: () => Promise;
isLoading: boolean;
activeFileIds: FileId[];
+ maxSelectable?: number | null;
}
type RemoteDeleteChoice = "local" | "server" | "both" | "leave" | "cancel";
@@ -95,10 +96,11 @@ export const FileManagerProvider: React.FC = ({
refreshRecentFiles,
isLoading,
activeFileIds,
+ maxSelectable = null,
}) => {
const [activeSource, setActiveSource] = useState<"recent" | "local" | "drive">("recent");
const [storageFilter, setStorageFilter] = useState<"all" | "local" | "sharedWithMe" | "sharedByMe">("all");
- const [selectedFileIds, setSelectedFileIds] = useState([]);
+ const [selectedFileIds, setSelectedFileIds] = useState(() => activeFileIds);
const [searchTerm, setSearchTerm] = useState("");
const [lastClickedIndex, setLastClickedIndex] = useState(null);
const [expandedFileIds, setExpandedFileIds] = useState>(new Set());
@@ -108,6 +110,14 @@ export const FileManagerProvider: React.FC = ({
const deletePromptResolveRef = useRef<((choice: RemoteDeleteChoice) => void) | null>(null);
const { t } = useTranslation();
const { actions } = useFileActions();
+ const { removeFiles } = useFileManagement();
+
+ // Re-seed selection with active file IDs each time the modal opens
+ useEffect(() => {
+ if (isOpen) {
+ setSelectedFileIds(activeFileIds);
+ }
+ }, [isOpen]);
// Track blob URLs for cleanup
const createdBlobUrls = useRef>(new Set());
@@ -234,6 +244,11 @@ export const FileManagerProvider: React.FC = ({
selectedSet.delete(fileId);
} else {
selectedSet.add(fileId);
+ // Enforce maxSelectable: drop the oldest selection if over the limit
+ if (maxSelectable != null && selectedSet.size > maxSelectable) {
+ const [oldest] = selectedSet;
+ selectedSet.delete(oldest);
+ }
}
return Array.from(selectedSet);
@@ -243,7 +258,7 @@ export const FileManagerProvider: React.FC = ({
setLastClickedIndex(currentIndex);
}
},
- [filteredFiles, lastClickedIndex],
+ [filteredFiles, lastClickedIndex, maxSelectable],
);
// Helper function to safely determine which files can be deleted
@@ -551,11 +566,20 @@ export const FileManagerProvider: React.FC = ({
);
const handleOpenFiles = useCallback(() => {
- if (selectedFiles.length > 0) {
- onRecentFilesSelected(selectedFiles);
- onClose();
+ // Remove active files that were unchecked
+ const uncheckedActiveIds = activeFileIds.filter((id) => !selectedFilesSet.has(id));
+ if (uncheckedActiveIds.length > 0) {
+ removeFiles(uncheckedActiveIds, false);
}
- }, [selectedFiles, onRecentFilesSelected, onClose]);
+
+ // Add newly checked files (not already active)
+ const newlySelected = selectedFiles.filter((f) => !activeFileIds.includes(f.id));
+ if (newlySelected.length > 0) {
+ onRecentFilesSelected(newlySelected);
+ }
+
+ onClose();
+ }, [selectedFiles, selectedFilesSet, activeFileIds, removeFiles, onRecentFilesSelected, onClose]);
const handleSearchChange = useCallback((value: string) => {
setSearchTerm(value);
@@ -586,11 +610,12 @@ export const FileManagerProvider: React.FC = ({
setSelectedFileIds([]);
setLastClickedIndex(null);
} else {
- // Select all filtered files
- setSelectedFileIds(filteredFiles.map((file) => file.id).filter(Boolean));
+ // Select all filtered files, capped at maxSelectable
+ const allIds = filteredFiles.map((file) => file.id).filter(Boolean) as FileId[];
+ setSelectedFileIds(maxSelectable != null ? allIds.slice(0, maxSelectable) : allIds);
setLastClickedIndex(null);
}
- }, [filteredFiles, selectedFileIds]);
+ }, [filteredFiles, selectedFileIds, maxSelectable]);
const handleDeleteSelected = useCallback(async () => {
if (selectedFileIds.length === 0) return;
diff --git a/frontend/src/core/contexts/FilesModalContext.tsx b/frontend/src/core/contexts/FilesModalContext.tsx
index c0bc729977..ec9d42b5c7 100644
--- a/frontend/src/core/contexts/FilesModalContext.tsx
+++ b/frontend/src/core/contexts/FilesModalContext.tsx
@@ -20,8 +20,10 @@ interface FilesModalContextType {
openFilesModal: (options?: {
insertAfterPage?: number;
customHandler?: (files: File[], insertAfterPage?: number) => void;
+ maxSelectable?: number | null;
}) => void;
closeFilesModal: () => void;
+ maxSelectable: number | null;
onFileUpload: (files: File[]) => void;
onRecentFileSelect: (stirlingFileStubs: StirlingFileStub[]) => void;
onModalClose?: () => void;
@@ -38,6 +40,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
const [insertAfterPage, setInsertAfterPage] = useState();
const [customHandler, setCustomHandler] = useState<((files: File[], insertAfterPage?: number) => void) | undefined>();
+ const [maxSelectable, setMaxSelectable] = useState(null);
const importBundleToWorkbench = useCallback(
async (
@@ -172,9 +175,14 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
}, []);
const openFilesModal = useCallback(
- (options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => {
+ (options?: {
+ insertAfterPage?: number;
+ customHandler?: (files: File[], insertAfterPage?: number) => void;
+ maxSelectable?: number | null;
+ }) => {
setInsertAfterPage(options?.insertAfterPage);
setCustomHandler(() => options?.customHandler);
+ setMaxSelectable(options?.maxSelectable ?? null);
setIsFilesModalOpen(true);
},
[],
@@ -336,6 +344,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
onRecentFileSelect: handleRecentFileSelect,
onModalClose,
setOnModalClose: setModalCloseCallback,
+ maxSelectable,
}),
[
isFilesModalOpen,
@@ -345,6 +354,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
handleRecentFileSelect,
onModalClose,
setModalCloseCallback,
+ maxSelectable,
],
);
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts b/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
index e0d6e78131..f3b9706e1e 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from "react";
import { extractPDFMetadata } from "@app/services/pdfMetadataService";
-import { useSelectedFiles } from "@app/contexts/file/fileHooks";
+import { useViewScopedFiles } from "@app/hooks/tools/shared/useViewScopedFiles";
import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
interface MetadataExtractionParams {
@@ -8,7 +8,7 @@ interface MetadataExtractionParams {
}
export const useMetadataExtraction = (params: MetadataExtractionParams) => {
- const { selectedFiles } = useSelectedFiles();
+ const selectedFiles = useViewScopedFiles();
const [isExtractingMetadata, setIsExtractingMetadata] = useState(false);
const [hasExtractedMetadata, setHasExtractedMetadata] = useState(false);
const previousFileCountRef = useRef(0);
diff --git a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
index ad16126ca2..674c2ac111 100644
--- a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
+++ b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
@@ -51,7 +51,7 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
const executeOperation = useCallback(
async (_params: GetPdfInfoParameters, selectedFiles: StirlingFile[]) => {
if (selectedFiles.length === 0) {
- setErrorMessage(t("noFileSelected", "No files selected"));
+ setErrorMessage(t("noFileSelected", "No file loaded"));
return;
}
diff --git a/frontend/src/core/hooks/tools/shared/useToolOperation.ts b/frontend/src/core/hooks/tools/shared/useToolOperation.ts
index e92dd874f1..ee3e7f2c7a 100644
--- a/frontend/src/core/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/core/hooks/tools/shared/useToolOperation.ts
@@ -95,7 +95,7 @@ export const useToolOperation = (config: ToolOperationConfig):
async (params: TParams, selectedFiles: StirlingFile[]): Promise => {
// Validation
if (selectedFiles.length === 0) {
- actions.setError(t("noFileSelected", "No files selected"));
+ actions.setError(t("noFileSelected", "No file loaded"));
return;
}
diff --git a/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts b/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
index 87f5fd93e6..070e854700 100644
--- a/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
+++ b/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
@@ -1,21 +1,13 @@
import { useMemo } from "react";
-import { useAllFiles, useSelectedFiles } from "@app/contexts/FileContext";
+import { useAllFiles } from "@app/contexts/FileContext";
import { useViewer } from "@app/contexts/ViewerContext";
import { useNavigationState } from "@app/contexts/NavigationContext";
import { StirlingFile } from "@app/types/fileContext";
-/**
- * Returns the effective file set for tool operations.
- *
- * - Viewer: scopes to the single file currently shown, unless ignoreViewerScope is true.
- * - FileEditor: scopes to the selected subset (empty selection → empty → button disabled).
- * - PageEditor / custom workbenches: returns all loaded files (selection tracks pages, not files).
- */
export function useViewScopedFiles(ignoreViewerScope = false): StirlingFile[] {
const { activeFileIndex } = useViewer();
const { files: allFiles } = useAllFiles();
const { workbench } = useNavigationState();
- const { selectedFiles } = useSelectedFiles();
return useMemo(() => {
if (workbench === "viewer" && !ignoreViewerScope) {
@@ -23,10 +15,6 @@ export function useViewScopedFiles(ignoreViewerScope = false): StirlingFile[] {
return viewerFile ? [viewerFile] : allFiles;
}
- if (workbench === "fileEditor") {
- return selectedFiles;
- }
-
return allFiles;
- }, [workbench, allFiles, activeFileIndex, selectedFiles, ignoreViewerScope]);
+ }, [workbench, allFiles, activeFileIndex, ignoreViewerScope]);
}
diff --git a/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts b/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
index e43ffb3f97..9c62ccd389 100644
--- a/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
+++ b/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
@@ -49,7 +49,7 @@ export const useShowJSOperation = (): ShowJSOperationHook => {
const executeOperation = useCallback(
async (_params: ShowJSParameters, selectedFiles: StirlingFile[]) => {
if (selectedFiles.length === 0) {
- setErrorMessage(t("noFileSelected", "No files selected"));
+ setErrorMessage(t("noFileSelected", "No file loaded"));
return;
}
diff --git a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
index c20d762eca..6832e6d767 100644
--- a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
@@ -59,7 +59,7 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
const executeOperation = useCallback(
async (params: ValidateSignatureParameters, selectedFiles: StirlingFile[]) => {
if (selectedFiles.length === 0) {
- setErrorMessage(t("noFileSelected", "No files selected"));
+ setErrorMessage(t("noFileSelected", "No file loaded"));
return;
}
diff --git a/frontend/src/core/tools/Compare.tsx b/frontend/src/core/tools/Compare.tsx
index 89ebd2218e..b0d0307087 100644
--- a/frontend/src/core/tools/Compare.tsx
+++ b/frontend/src/core/tools/Compare.tsx
@@ -1,9 +1,9 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import CompareRoundedIcon from "@mui/icons-material/CompareRounded";
+import CloseIcon from "@mui/icons-material/Close";
import { Box, Group, Stack, Text, Button, Modal, ActionIcon } from "@mantine/core";
import SwapVertRoundedIcon from "@mui/icons-material/SwapVertRounded";
-import AddIcon from "@mui/icons-material/Add";
import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
import { BaseToolProps, ToolComponent } from "@app/types/tool";
@@ -15,14 +15,14 @@ import { useCompareOperation, CompareOperationHook } from "@app/hooks/tools/comp
import CompareWorkbenchView from "@app/components/tools/compare/CompareWorkbenchView";
import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
import { useNavigationActions } from "@app/contexts/NavigationContext";
-import { useFileContext, useFileState } from "@app/contexts/file/fileHooks";
import type { FileId } from "@app/types/file";
import type { StirlingFile } from "@app/types/fileContext";
import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
import type { CompareWorkbenchData } from "@app/types/compare";
import { getDefaultWorkbench } from "@app/types/workbench";
-import { useFilesModalContext } from "@app/contexts/FilesModalContext";
import { truncateCenter } from "@app/utils/textUtils";
+import { FileSelectorPicker, FileSelectorResult } from "@app/components/shared/FileSelectorPicker";
+import "@app/components/tools/compare/compareView.css";
const CUSTOM_VIEW_ID = "compareWorkbenchView";
const CUSTOM_WORKBENCH_ID = "custom:compareWorkbenchView" as const;
@@ -36,12 +36,9 @@ const Compare = (props: BaseToolProps) => {
setCustomWorkbenchViewData,
clearCustomWorkbenchViewData,
} = useToolWorkflow();
- const { selectors, actions: fileActions } = useFileContext();
- const { state: fileState } = useFileState();
- const { openFilesModal } = useFilesModalContext();
const base = useBaseTool("compare", useCompareParameters, useCompareOperation, props, {
- minFiles: 2,
+ minFiles: 0,
ignoreViewerScope: true,
});
@@ -51,6 +48,20 @@ const Compare = (props: BaseToolProps) => {
const compareIcon = useMemo(() => (null);
+ const [compSlot, setCompSlot] = useState(null);
+
+ // Sync params fileIds from slots (needed for operation result matching)
+ useEffect(() => {
+ base.params.setParameters((prev) => ({
+ ...prev,
+ baseFileId: baseSlot?.stirlingFile.fileId ?? null,
+ comparisonFileId: compSlot?.stirlingFile.fileId ?? null,
+ }));
+ }, [baseSlot?.stirlingFile.fileId, compSlot?.stirlingFile.fileId]);
+
const performClearSelected = useCallback(() => {
try {
base.operation.cancelOperation();
@@ -62,15 +73,11 @@ const Compare = (props: BaseToolProps) => {
} catch {
console.error("Failed to reset results");
}
- base.params.setParameters((prev) => ({ ...prev, baseFileId: null, comparisonFileId: null }));
- try {
- fileActions.clearSelections();
- } catch {
- console.error("Failed to clear selections");
- }
+ setBaseSlot(null);
+ setCompSlot(null);
clearCustomWorkbenchViewData(CUSTOM_VIEW_ID);
navigationActions.setWorkbench(getDefaultWorkbench());
- }, [base.operation, base.params, clearCustomWorkbenchViewData, fileActions, navigationActions]);
+ }, [base.operation, clearCustomWorkbenchViewData, navigationActions]);
useEffect(() => {
const handler = () => {
@@ -86,7 +93,6 @@ const Compare = (props: BaseToolProps) => {
registerCustomWorkbenchView({
id: CUSTOM_VIEW_ID,
workbenchId: CUSTOM_WORKBENCH_ID,
- // Use a static label at registration time to avoid re-registering on i18n changes
label: "Compare view",
icon: compareIcon,
component: CompareWorkbenchView,
@@ -95,61 +101,9 @@ const Compare = (props: BaseToolProps) => {
return () => {
unregisterCustomWorkbenchView(CUSTOM_VIEW_ID);
};
- // Register once; avoid re-registering on translation/prop changes which clears data mid-flight
+ // Register once only
}, []);
- // On mount: clear selections unless exactly 2 files are loaded.
- useEffect(() => {
- if ((fileState.files.ids as FileId[]).length !== 2) {
- fileActions.clearSelections();
- }
- }, []);
-
- // Track previous file count to detect the transition to exactly 2 files.
- const prevAllIdsLengthRef = useRef(null);
-
- // Auto-fill slots when the file count first reaches 2; respect manual picker changes after that.
- useEffect(() => {
- const selectedIds = fileState.ui.selectedFileIds as FileId[];
- const allIds = fileState.files.ids as FileId[];
- const prevLength = prevAllIdsLengthRef.current;
- prevAllIdsLengthRef.current = allIds.length;
-
- if (allIds.length === 2 && prevLength !== 2) {
- // Transitioned to exactly 2 files — auto-fill both slots.
- const [firstId, secondId] = allIds as [FileId, FileId];
- fileActions.setSelectedFiles([firstId, secondId]);
- base.params.setParameters((prev) => {
- if (prev.baseFileId === firstId && prev.comparisonFileId === secondId) return prev;
- return { ...prev, baseFileId: firstId, comparisonFileId: secondId };
- });
- return;
- }
-
- if (selectedIds.length > 2) {
- fileActions.setSelectedFiles(selectedIds.slice(0, 2) as FileId[]);
- return;
- }
-
- const nextBase = (selectedIds[0] ?? null) as FileId | null;
- const nextComp = (selectedIds[1] ?? null) as FileId | null;
- base.params.setParameters((prev) => {
- if (prev.baseFileId === nextBase && prev.comparisonFileId === nextComp) return prev;
- return { ...prev, baseFileId: nextBase, comparisonFileId: nextComp };
- });
- }, [fileState.ui.selectedFileIds, fileState.files.ids]);
-
- // Clear a slot if its file is removed from the workbench.
- useEffect(() => {
- const allIds = fileState.files.ids as FileId[];
- if (params.baseFileId && !allIds.includes(params.baseFileId as FileId)) {
- base.params.setParameters((prev) => ({ ...prev, baseFileId: null }));
- }
- if (params.comparisonFileId && !allIds.includes(params.comparisonFileId as FileId)) {
- base.params.setParameters((prev) => ({ ...prev, comparisonFileId: null }));
- }
- }, [fileState.files.ids]);
-
// Track workbench data and drive loading/result state transitions
const lastProcessedAtRef = useRef(null);
const lastWorkbenchDataRef = useRef(null);
@@ -175,33 +129,21 @@ const Compare = (props: BaseToolProps) => {
);
const prepareWorkbenchForRun = useCallback(
- (
- baseId: FileId | null,
- compId: FileId | null,
- options?: { baseFile?: StirlingFile | null; comparisonFile?: StirlingFile | null },
- ) => {
- if (!baseId || !compId) {
- return;
- }
-
- const previous = lastWorkbenchDataRef.current;
- const resolvedBaseFile =
- options?.baseFile ?? (baseId ? selectors.getFile(baseId) : null) ?? previous?.baseLocalFile ?? null;
- const resolvedComparisonFile =
- options?.comparisonFile ?? (compId ? selectors.getFile(compId) : null) ?? previous?.comparisonLocalFile ?? null;
+ (baseId: FileId | null, compId: FileId | null, baseFile: StirlingFile | null, comparisonFile: StirlingFile | null) => {
+ if (!baseId || !compId) return;
updateWorkbenchData({
result: null,
baseFileId: baseId,
comparisonFileId: compId,
- baseLocalFile: resolvedBaseFile,
- comparisonLocalFile: resolvedComparisonFile,
+ baseLocalFile: baseFile,
+ comparisonLocalFile: comparisonFile,
isLoading: true,
});
lastProcessedAtRef.current = null;
},
- [selectors, updateWorkbenchData],
+ [updateWorkbenchData],
);
useEffect(() => {
@@ -226,15 +168,12 @@ const Compare = (props: BaseToolProps) => {
result.comparison.fileId === comparisonFileId
) {
const previous = lastWorkbenchDataRef.current;
- const baseLocalFile = (baseFileId ? selectors.getFile(baseFileId) : null) ?? previous?.baseLocalFile ?? null;
- const comparisonLocalFile =
- (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ?? previous?.comparisonLocalFile ?? null;
updateWorkbenchData({
result,
baseFileId,
comparisonFileId,
- baseLocalFile,
- comparisonLocalFile,
+ baseLocalFile: baseSlot?.stirlingFile ?? previous?.baseLocalFile ?? null,
+ comparisonLocalFile: compSlot?.stirlingFile ?? previous?.comparisonLocalFile ?? null,
isLoading: false,
});
lastProcessedAtRef.current = processedAt;
@@ -243,149 +182,87 @@ const Compare = (props: BaseToolProps) => {
if (base.operation.isLoading) {
const previous = lastWorkbenchDataRef.current;
- const baseLocalFile = (baseFileId ? selectors.getFile(baseFileId) : null) ?? previous?.baseLocalFile ?? null;
- const comparisonLocalFile =
- (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ?? previous?.comparisonLocalFile ?? null;
updateWorkbenchData({
result: null,
baseFileId,
comparisonFileId,
- baseLocalFile,
- comparisonLocalFile,
+ baseLocalFile: baseSlot?.stirlingFile ?? previous?.baseLocalFile ?? null,
+ comparisonLocalFile: compSlot?.stirlingFile ?? previous?.comparisonLocalFile ?? null,
isLoading: true,
});
return;
}
}, [
base.operation.isLoading,
+ baseSlot,
clearCustomWorkbenchViewData,
+ compSlot,
operation.result,
params.baseFileId,
params.comparisonFileId,
- selectors,
updateWorkbenchData,
]);
const handleExecuteCompare = useCallback(async () => {
- const baseId = params.baseFileId as FileId | null;
- const compId = params.comparisonFileId as FileId | null;
- const baseSel = base.selectedFiles.find((file) => file.fileId === baseId) ?? (baseId ? selectors.getFile(baseId) : null);
- const compSel = base.selectedFiles.find((file) => file.fileId === compId) ?? (compId ? selectors.getFile(compId) : null);
- const selected: StirlingFile[] = [];
- if (baseSel) selected.push(baseSel);
- if (compSel) selected.push(compSel);
+ if (!baseSlot || !compSlot) return;
+ const baseId = baseSlot.stirlingFile.fileId;
+ const compId = compSlot.stirlingFile.fileId;
+ const selected: StirlingFile[] = [baseSlot.stirlingFile, compSlot.stirlingFile];
- prepareWorkbenchForRun(baseId, compId, { baseFile: baseSel ?? null, comparisonFile: compSel ?? null });
- if (baseId && compId) {
+ prepareWorkbenchForRun(baseId, compId, baseSlot.stirlingFile, compSlot.stirlingFile);
+ requestAnimationFrame(() => {
+ navigationActions.setWorkbench(CUSTOM_WORKBENCH_ID);
+ });
+
+ await operation.executeOperation({ ...params, baseFileId: baseId, comparisonFileId: compId }, selected);
+ }, [baseSlot, compSlot, navigationActions, operation, params, prepareWorkbenchForRun]);
+
+ const performSwap = useCallback(() => {
+ if (!baseSlot || !compSlot) return;
+ const newBase = compSlot;
+ const newComp = baseSlot;
+ setBaseSlot(newBase);
+ setCompSlot(newComp);
+ if (operation.result) {
+ const baseId = newBase.stirlingFile.fileId;
+ const compId = newComp.stirlingFile.fileId;
+ const selected: StirlingFile[] = [newBase.stirlingFile, newComp.stirlingFile];
+ prepareWorkbenchForRun(baseId, compId, newBase.stirlingFile, newComp.stirlingFile);
requestAnimationFrame(() => {
navigationActions.setWorkbench(CUSTOM_WORKBENCH_ID);
});
+ void operation.executeOperation({ ...params, baseFileId: baseId, comparisonFileId: compId }, selected);
}
-
- await operation.executeOperation({ ...params }, selected);
- }, [base.selectedFiles, navigationActions, operation, params, prepareWorkbenchForRun, selectors]);
-
- // Run compare with explicit ids (used after swap so we don't depend on async state propagation)
- const runCompareWithIds = useCallback(
- async (baseId: FileId | null, compId: FileId | null) => {
- const nextParams = { ...params, baseFileId: baseId, comparisonFileId: compId };
- const selected: StirlingFile[] = [];
- const baseSel = base.selectedFiles.find((file) => file.fileId === baseId) ?? (baseId ? selectors.getFile(baseId) : null);
- const compSel = base.selectedFiles.find((file) => file.fileId === compId) ?? (compId ? selectors.getFile(compId) : null);
- if (baseSel) selected.push(baseSel);
- if (compSel) selected.push(compSel);
- prepareWorkbenchForRun(baseId, compId, { baseFile: baseSel ?? null, comparisonFile: compSel ?? null });
- await operation.executeOperation(nextParams, selected);
- },
- [base.selectedFiles, operation, params, prepareWorkbenchForRun, selectors],
- );
-
- const performSwap = useCallback(() => {
- const baseId = params.baseFileId as FileId | null;
- const compId = params.comparisonFileId as FileId | null;
- if (!baseId || !compId) return;
- base.params.setParameters((prev) => ({
- ...prev,
- baseFileId: compId,
- comparisonFileId: baseId,
- }));
- if (operation.result) {
- runCompareWithIds(compId, baseId);
- }
- }, [base.params, operation.result, params.baseFileId, params.comparisonFileId, runCompareWithIds]);
-
- // No custom handler; rely on global add flow which auto-selects added files
+ }, [baseSlot, compSlot, navigationActions, operation, params, prepareWorkbenchForRun]);
const handleSwap = useCallback(() => {
- const baseId = params.baseFileId as FileId | null;
- const compId = params.comparisonFileId as FileId | null;
- if (!baseId || !compId) return;
+ if (!baseSlot || !compSlot) return;
if (operation.result) {
setSwapConfirmOpen(true);
return;
}
performSwap();
- }, [operation.result, params.baseFileId, params.comparisonFileId, performSwap]);
+ }, [baseSlot, compSlot, operation.result, performSwap]);
- const renderSelectedFile = useCallback(
+ const clearSlot = useCallback((role: "base" | "comparison") => {
+ if (role === "base") setBaseSlot(null);
+ else setCompSlot(null);
+ }, []);
+
+ const renderSlot = useCallback(
(role: "base" | "comparison") => {
- const fileId = role === "base" ? params.baseFileId : params.comparisonFileId;
- const stub = fileId ? selectors.getStirlingFileStub(fileId) : undefined;
+ const slot = role === "base" ? baseSlot : compSlot;
+ const otherSlot = role === "base" ? compSlot : baseSlot;
+ const stub = slot?.stub;
- // Show add button in base if no base file, or in comparison if base exists but no comparison
- const shouldShowAddButton =
- (role === "base" && !params.baseFileId) || (role === "comparison" && params.baseFileId && !params.comparisonFileId);
+ if (stub) {
+ const dateMs = (stub.lastModified || stub.createdAt) ?? null;
+ const dateText = dateMs
+ ? new Date(dateMs).toLocaleDateString(undefined, { month: "short", day: "2-digit", year: "numeric" })
+ : "";
+ const pageCount = stub.processedFile?.totalPages || null;
- if (!stub) {
return (
-
- openFilesModal({}) : undefined}
- >
-
- {t(
- role === "base" ? "compare.original.placeholder" : "compare.edited.placeholder",
- role === "base" ? "Select the original PDF" : "Select the edited PDF",
- )}
-
- {shouldShowAddButton && (
- {
- e.stopPropagation();
- openFilesModal({});
- }}
- style={{ flexShrink: 0 }}
- >
-
- )}
-
-
- );
- }
- // Build compact meta line for pages and date
- const dateMs = (stub?.lastModified || stub?.createdAt) ?? null;
- const dateText = dateMs
- ? new Date(dateMs).toLocaleDateString(undefined, { month: "short", day: "2-digit", year: "numeric" })
- : "";
- const pageCount = stub?.processedFile?.totalPages || null;
-
- return (
-
{
background: "var(--bg-surface)",
width: "100%",
minHeight: "9rem",
+ position: "relative",
}}
>
+ clearSlot(role)}
+ aria-label={t("compare.clearSlot", "Remove file")}
+ >
+
-
-
+
-
-
- {truncateCenter(stub?.name || "", 50)}
+
+
+ {truncateCenter(stub.name || "", 50)}
{pageCount && dateText && (
- <>
-
- {pageCount} {t("compare.pages", "pages")}
-
- {dateText} -
-
+
+ {pageCount} {t("compare.pages", "pages")}
+
+ {dateText} +
)}
-
+ );
+ }
+
+ const isDisabled = role === "comparison" && !baseSlot;
+
+ return (
+ {
+ if (role === "base") setBaseSlot(result);
+ else setCompSlot(result);
+ }}
+ />
);
},
- [params.baseFileId, params.comparisonFileId, selectors, t, openFilesModal],
+ [baseSlot, compSlot, clearSlot, t],
);
- const baseStub = params.baseFileId ? selectors.getStirlingFileStub(params.baseFileId) : undefined;
- const compStub = params.comparisonFileId ? selectors.getStirlingFileStub(params.comparisonFileId) : undefined;
const canExecute = Boolean(
- params.baseFileId &&
- params.comparisonFileId &&
- params.baseFileId !== params.comparisonFileId &&
- baseStub &&
- compStub &&
+ baseSlot &&
+ compSlot &&
+ baseSlot.stirlingFile.fileId !== compSlot.stirlingFile.fileId &&
!base.operation.isLoading &&
base.endpointEnabled !== false,
);
- const hasBothSelected = Boolean(params.baseFileId && params.comparisonFileId);
- const hasAnyFiles = selectors.getFiles().length > 0;
+ const hasBothSelected = Boolean(baseSlot && compSlot);
+ const hasAnySelected = Boolean(baseSlot || compSlot);
return createToolFlow({
files: {
@@ -447,87 +349,50 @@ const Compare = (props: BaseToolProps) => {
title: t("compare.selection.originalEditedTitle", "Select Original and Edited PDFs"),
isVisible: true,
content: (
-
- {/* Header row: Original PDF + Clear selected aligned to swap column */}
-
-
- {t("compare.original.label", "Original PDF")}
-
+
+
- {dateText} -
+ {dateText} +
-
-
- {renderSelectedFile("base")}
-
- {/* Edited PDF section header */}
-
- {t("compare.edited.label", "Edited PDF")}
-
- {renderSelectedFile("comparison")}
-
- {hasBothSelected && (
-
-
+
),
},
],
@@ -594,6 +458,8 @@ const Compare = (props: BaseToolProps) => {
loadingText: t("compare.loading", "Comparing..."),
onClick: handleExecuteCompare,
disabled: !canExecute,
+ // Explicitly null so the noFiles gate is bypassed — Compare manages its own slot state
+ disabledReason: base.endpointEnabled === false ? "endpointUnavailable" : null,
testId: "compare-execute",
disableScopeHints: true,
},
diff --git a/frontend/src/core/tools/Merge.tsx b/frontend/src/core/tools/Merge.tsx
index a99d1bfe78..d4a93792d1 100644
--- a/frontend/src/core/tools/Merge.tsx
+++ b/frontend/src/core/tools/Merge.tsx
@@ -9,7 +9,7 @@ import { useMergeOperation } from "@app/hooks/tools/merge/useMergeOperation";
import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
import { BaseToolProps, ToolComponent } from "@app/types/tool";
import { useMergeTips } from "@app/components/tooltips/useMergeTips";
-import { useFileManagement, useSelectedFiles, useAllFiles } from "@app/contexts/FileContext";
+import { useFileManagement, useAllFiles } from "@app/contexts/FileContext";
import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
const Merge = (props: BaseToolProps) => {
@@ -17,8 +17,7 @@ const Merge = (props: BaseToolProps) => {
const mergeTips = useMergeTips();
// File selection hooks for custom sorting
- const { fileIds } = useAllFiles();
- const { selectedFileStubs } = useSelectedFiles();
+ const { fileIds, fileStubs } = useAllFiles();
const { reorderFiles } = useFileManagement();
const base = useBaseTool("merge", useMergeParameters, useMergeOperation, props, { minFiles: 2, ignoreViewerScope: true });
@@ -89,7 +88,7 @@ const Merge = (props: BaseToolProps) => {
// Custom file sorting logic for merge tool
const sortFiles = useCallback(
(sortType: "filename" | "dateModified", ascending: boolean = true) => {
- const sortedStubs = [...selectedFileStubs].sort((stubA, stubB) => {
+ const sortedStubs = [...fileStubs].sort((stubA, stubB) => {
let comparison = 0;
switch (sortType) {
case "filename":
@@ -106,7 +105,7 @@ const Merge = (props: BaseToolProps) => {
const deselectedIds = fileIds.filter((id) => !selectedIds.includes(id));
reorderFiles([...selectedIds, ...deselectedIds]);
},
- [selectedFileStubs, fileIds, reorderFiles, naturalCompare],
+ [fileStubs, fileIds, reorderFiles, naturalCompare],
);
return createToolFlow({