{
- if (!isAnimating && draggedPage && page.pageNumber !== draggedPage && dropTarget === page.pageNumber) {
- return 'translateX(20px)';
- }
- return 'translateX(0)';
- })(),
transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out'
}}
- draggable
- onDragStart={() => onDragStart(page.pageNumber)}
- onDragEnd={onDragEnd}
- onDragOver={onDragOver}
- onDragEnter={() => onDragEnter(page.pageNumber)}
- onDragLeave={onDragLeave}
- onDrop={(e) => onDrop(e, page.pageNumber)}
+ draggable={false}
>
{selectionMode && (
{
- console.log('πΈ Checkbox clicked for page', page.pageNumber);
e.stopPropagation();
onTogglePage(page.pageNumber);
}}
@@ -204,7 +241,7 @@ const PageThumbnail = React.memo(({
)}
-
+
- ) : isLoadingThumbnail ? (
-
-
- Loading...
-
) : (
π
@@ -408,30 +441,25 @@ const PageThumbnail = React.memo(({
)}
-
);
}, (prevProps, nextProps) => {
+ // Helper for shallow array comparison
+ const arraysEqual = (a: number[], b: number[]) => {
+ return a.length === b.length && a.every((val, i) => val === b[i]);
+ };
+
// Only re-render if essential props change
return (
prevProps.page.id === nextProps.page.id &&
prevProps.page.pageNumber === nextProps.page.pageNumber &&
prevProps.page.rotation === nextProps.page.rotation &&
prevProps.page.thumbnail === nextProps.page.thumbnail &&
- prevProps.selectedPages === nextProps.selectedPages && // Compare array reference - will re-render when selection changes
+ // Shallow compare selectedPages array for better stability
+ (prevProps.selectedPages === nextProps.selectedPages ||
+ arraysEqual(prevProps.selectedPages, nextProps.selectedPages)) &&
prevProps.selectionMode === nextProps.selectionMode &&
- prevProps.draggedPage === nextProps.draggedPage &&
- prevProps.dropTarget === nextProps.dropTarget &&
prevProps.movingPage === nextProps.movingPage &&
prevProps.isAnimating === nextProps.isAnimating
);
diff --git a/frontend/src/components/shared/FileCard.tsx b/frontend/src/components/shared/FileCard.tsx
index e4ff60eea..73ae01dba 100644
--- a/frontend/src/components/shared/FileCard.tsx
+++ b/frontend/src/components/shared/FileCard.tsx
@@ -6,12 +6,13 @@ import StorageIcon from "@mui/icons-material/Storage";
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditIcon from "@mui/icons-material/Edit";
-import { FileWithUrl } from "../../types/file";
+import { FileRecord } from "../../types/fileContext";
import { getFileSize, getFileDate } from "../../utils/fileUtils";
import { useIndexedDBThumbnail } from "../../hooks/useIndexedDBThumbnail";
interface FileCardProps {
- file: FileWithUrl;
+ file: File;
+ record?: FileRecord;
onRemove: () => void;
onDoubleClick?: () => void;
onView?: () => void;
@@ -21,9 +22,12 @@ interface FileCardProps {
isSupported?: boolean; // Whether the file format is supported by the current tool
}
-const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
+const FileCard = ({ file, record, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
const { t } = useTranslation();
- const { thumbnail: thumb, isGenerating } = useIndexedDBThumbnail(file);
+ // Use record thumbnail if available, otherwise fall back to IndexedDB lookup
+ const fileMetadata = record ? { id: record.id, name: file.name, type: file.type, size: file.size, lastModified: file.lastModified } : null;
+ const { thumbnail: indexedDBThumb, isGenerating } = useIndexedDBThumbnail(fileMetadata);
+ const thumb = record?.thumbnailUrl || indexedDBThumb;
const [isHovered, setIsHovered] = useState(false);
return (
@@ -173,7 +177,7 @@ const FileCard = ({ file, onRemove, onDoubleClick, onView, onEdit, isSelected, o
{getFileDate(file)}
- {file.storedInIndexedDB && (
+ {record?.id && (
;
onRemove?: (index: number) => void;
- onDoubleClick?: (file: FileWithUrl) => void;
- onView?: (file: FileWithUrl) => void;
- onEdit?: (file: FileWithUrl) => void;
+ onDoubleClick?: (item: { file: File; record?: FileRecord }) => void;
+ onView?: (item: { file: File; record?: FileRecord }) => void;
+ onEdit?: (item: { file: File; record?: FileRecord }) => void;
onSelect?: (fileId: string) => void;
selectedFiles?: string[];
showSearch?: boolean;
@@ -46,19 +46,19 @@ const FileGrid = ({
const [sortBy, setSortBy] = useState('date');
// Filter files based on search term
- const filteredFiles = files.filter(file =>
- file.name.toLowerCase().includes(searchTerm.toLowerCase())
+ const filteredFiles = files.filter(item =>
+ item.file.name.toLowerCase().includes(searchTerm.toLowerCase())
);
// Sort files
const sortedFiles = [...filteredFiles].sort((a, b) => {
switch (sortBy) {
case 'date':
- return (b.lastModified || 0) - (a.lastModified || 0);
+ return (b.file.lastModified || 0) - (a.file.lastModified || 0);
case 'name':
- return a.name.localeCompare(b.name);
+ return a.file.name.localeCompare(b.file.name);
case 'size':
- return (b.size || 0) - (a.size || 0);
+ return (b.file.size || 0) - (a.file.size || 0);
default:
return 0;
}
@@ -122,18 +122,19 @@ const FileGrid = ({
h="30rem"
style={{ overflowY: "auto", width: "100%" }}
>
- {displayFiles.map((file, idx) => {
- const fileId = file.id || file.name;
- const originalIdx = files.findIndex(f => (f.id || f.name) === fileId);
- const supported = isFileSupported ? isFileSupported(file.name) : true;
+ {displayFiles.map((item, idx) => {
+ const fileId = item.record?.id || item.file.name;
+ const originalIdx = files.findIndex(f => (f.record?.id || f.file.name) === fileId);
+ const supported = isFileSupported ? isFileSupported(item.file.name) : true;
return (
onRemove(originalIdx) : () => {}}
- onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(file) : undefined}
- onView={onView && supported ? () => onView(file) : undefined}
- onEdit={onEdit && supported ? () => onEdit(file) : undefined}
+ onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(item) : undefined}
+ onView={onView && supported ? () => onView(item) : undefined}
+ onEdit={onEdit && supported ? () => onEdit(item) : undefined}
isSelected={selectedFiles.includes(fileId)}
onSelect={onSelect && supported ? () => onSelect(fileId) : undefined}
isSupported={supported}
diff --git a/frontend/src/components/shared/FilePickerModal.tsx b/frontend/src/components/shared/FilePickerModal.tsx
index f489c5a11..8aa054f25 100644
--- a/frontend/src/components/shared/FilePickerModal.tsx
+++ b/frontend/src/components/shared/FilePickerModal.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
interface FilePickerModalProps {
opened: boolean;
onClose: () => void;
- storedFiles: any[]; // Files from storage (FileWithUrl format)
+ storedFiles: any[]; // Files from storage (various formats supported)
onSelectFiles: (selectedFiles: File[]) => void;
}
@@ -48,7 +48,7 @@ const FilePickerModal = ({
};
const selectAll = () => {
- setSelectedFileIds(storedFiles.map(f => f.id || f.name));
+ setSelectedFileIds(storedFiles.map(f => f.id).filter(Boolean));
};
const selectNone = () => {
@@ -57,7 +57,7 @@ const FilePickerModal = ({
const handleConfirm = async () => {
const selectedFiles = storedFiles.filter(f =>
- selectedFileIds.includes(f.id || f.name)
+ selectedFileIds.includes(f.id)
);
// Convert stored files to File objects
@@ -154,7 +154,7 @@ const FilePickerModal = ({
{storedFiles.map((file) => {
- const fileId = file.id || file.name;
+ const fileId = file.id;
const isSelected = selectedFileIds.includes(fileId);
return (
diff --git a/frontend/src/components/shared/FilePreview.tsx b/frontend/src/components/shared/FilePreview.tsx
index 4a58d4671..a13894040 100644
--- a/frontend/src/components/shared/FilePreview.tsx
+++ b/frontend/src/components/shared/FilePreview.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Box } from '@mantine/core';
-import { FileWithUrl } from '../../types/file';
+import { FileMetadata } from '../../types/file';
import DocumentThumbnail from './filePreview/DocumentThumbnail';
import DocumentStack from './filePreview/DocumentStack';
import HoverOverlay from './filePreview/HoverOverlay';
@@ -8,7 +8,7 @@ import NavigationArrows from './filePreview/NavigationArrows';
export interface FilePreviewProps {
// Core file data
- file: File | FileWithUrl | null;
+ file: File | FileMetadata | null;
thumbnail?: string | null;
// Optional features
@@ -21,7 +21,7 @@ export interface FilePreviewProps {
isAnimating?: boolean;
// Event handlers
- onFileClick?: (file: File | FileWithUrl | null) => void;
+ onFileClick?: (file: File | FileMetadata | null) => void;
onPrevious?: () => void;
onNext?: () => void;
}
diff --git a/frontend/src/components/shared/LandingPage.tsx b/frontend/src/components/shared/LandingPage.tsx
index 4af3d1202..6c1668a43 100644
--- a/frontend/src/components/shared/LandingPage.tsx
+++ b/frontend/src/components/shared/LandingPage.tsx
@@ -33,7 +33,7 @@ const LandingPage = () => {
{/* White PDF Page Background */}
{
ref={fileInputRef}
type="file"
multiple
- accept="*/*"
+ accept=".pdf,.zip"
onChange={handleFileSelect}
style={{ display: 'none' }}
/>
diff --git a/frontend/src/components/shared/NavigationWarningModal.tsx b/frontend/src/components/shared/NavigationWarningModal.tsx
index a3d3983d2..c7f591c71 100644
--- a/frontend/src/components/shared/NavigationWarningModal.tsx
+++ b/frontend/src/components/shared/NavigationWarningModal.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Modal, Text, Button, Group, Stack } from '@mantine/core';
-import { useFileContext } from '../../contexts/FileContext';
+import { useNavigationGuard } from '../../contexts/NavigationContext';
interface NavigationWarningModalProps {
onApplyAndContinue?: () => Promise;
@@ -11,13 +11,13 @@ const NavigationWarningModal = ({
onApplyAndContinue,
onExportAndContinue
}: NavigationWarningModalProps) => {
- const {
- showNavigationWarning,
+ const {
+ showNavigationWarning,
hasUnsavedChanges,
- confirmNavigation,
cancelNavigation,
+ confirmNavigation,
setHasUnsavedChanges
- } = useFileContext();
+ } = useNavigationGuard();
const handleKeepWorking = () => {
cancelNavigation();
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index 98f8d0115..ee5591694 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
import { Button, SegmentedControl, Loader } from "@mantine/core";
import { useRainbowThemeContext } from "./RainbowThemeProvider";
import LanguageSelector from "./LanguageSelector";
@@ -10,50 +10,18 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
import EditNoteIcon from "@mui/icons-material/EditNote";
import FolderIcon from "@mui/icons-material/Folder";
import { Group } from "@mantine/core";
+import { ModeType } from '../../contexts/NavigationContext';
-// This will be created inside the component to access switchingTo
-const createViewOptions = (switchingTo: string | null) => [
- {
- label: (
-
- {switchingTo === "viewer" ? (
-
- ) : (
-
- )}
-
- ),
- value: "viewer",
- },
- {
- label: (
-
- {switchingTo === "pageEditor" ? (
-
- ) : (
-
- )}
-
- ),
- value: "pageEditor",
- },
- {
- label: (
-
- {switchingTo === "fileEditor" ? (
-
- ) : (
-
- )}
-
- ),
- value: "fileEditor",
- },
-];
+// Stable view option objects that don't recreate on every render
+const VIEW_OPTIONS_BASE = [
+ { value: "viewer", icon: VisibilityIcon },
+ { value: "pageEditor", icon: EditNoteIcon },
+ { value: "fileEditor", icon: FolderIcon },
+] as const;
interface TopControlsProps {
- currentView: string;
- setCurrentView: (view: string) => void;
+ currentView: ModeType;
+ setCurrentView: (view: ModeType) => void;
selectedToolKey?: string | null;
}
@@ -68,6 +36,9 @@ const TopControls = ({
const isToolSelected = selectedToolKey !== null;
const handleViewChange = useCallback((view: string) => {
+ // Guard against redundant changes
+ if (view === currentView) return;
+
// Show immediate feedback
setSwitchingTo(view);
@@ -75,13 +46,28 @@ const TopControls = ({
requestAnimationFrame(() => {
// Give the spinner one more frame to show
requestAnimationFrame(() => {
- setCurrentView(view);
-
+ setCurrentView(view as ModeType);
+
// Clear the loading state after view change completes
setTimeout(() => setSwitchingTo(null), 300);
});
});
- }, [setCurrentView]);
+ }, [setCurrentView, currentView]);
+
+ // Memoize the SegmentedControl data with stable references
+ const viewOptions = useMemo(() =>
+ VIEW_OPTIONS_BASE.map(option => ({
+ value: option.value,
+ label: (
+
+ {switchingTo === option.value ? (
+
+ ) : (
+
+ )}
+
+ )
+ })), [switchingTo]);
const getThemeIcon = () => {
if (isRainbowMode) return ;
@@ -117,7 +103,7 @@ const TopControls = ({
{!isToolSelected && (
void;
diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 03fce1e7e..bec6b272f 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -5,8 +5,8 @@ import { useTranslation } from "react-i18next";
import { useMultipleEndpointsEnabled } from "../../../hooks/useEndpointConfig";
import { isImageFormat, isWebFormat } from "../../../utils/convertUtils";
import { getConversionEndpoints } from "../../../data/toolsTaxonomy";
-import { useFileSelectionActions } from "../../../contexts/FileSelectionContext";
-import { useFileContext } from "../../../contexts/FileContext";
+import { useFileSelection } from "../../../contexts/FileContext";
+import { useFileState } from "../../../contexts/FileContext";
import { detectFileExtension } from "../../../utils/fileUtils";
import GroupedFormatDropdown from "./GroupedFormatDropdown";
import ConvertToImageSettings from "./ConvertToImageSettings";
@@ -41,8 +41,9 @@ const ConvertSettings = ({
const { t } = useTranslation();
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme();
- const { setSelectedFiles } = useFileSelectionActions();
- const { activeFiles, setSelectedFiles: setContextSelectedFiles } = useFileContext();
+ const { setSelectedFiles } = useFileSelection();
+ const { state, selectors } = useFileState();
+ const activeFiles = state.files.ids;
const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
@@ -85,9 +86,9 @@ const ConvertSettings = ({
}
return baseOptions;
- }, [getAvailableToExtensions, endpointStatus, parameters.fromExtension]);
+ }, [parameters.fromExtension, endpointStatus]);
- // Enhanced TO options with endpoint availability
+ // Enhanced TO options with endpoint availability
const enhancedToOptions = useMemo(() => {
if (!parameters.fromExtension) return [];
@@ -96,7 +97,7 @@ const ConvertSettings = ({
...option,
enabled: isConversionAvailable(parameters.fromExtension, option.value)
}));
- }, [parameters.fromExtension, getAvailableToExtensions, endpointStatus]);
+ }, [parameters.fromExtension, endpointStatus]);
const resetParametersToDefaults = () => {
onParameterChange('imageOptions', {
@@ -127,7 +128,8 @@ const ConvertSettings = ({
};
const filterFilesByExtension = (extension: string) => {
- return activeFiles.filter(file => {
+ const files = activeFiles.map(fileId => selectors.getFile(fileId)).filter(Boolean) as File[];
+ return files.filter(file => {
const fileExtension = detectFileExtension(file.name);
if (extension === 'any') {
@@ -141,9 +143,21 @@ const ConvertSettings = ({
};
const updateFileSelection = (files: File[]) => {
- setSelectedFiles(files);
- const fileIds = files.map(file => (file as any).id || file.name);
- setContextSelectedFiles(fileIds);
+ // Map File objects to their actual IDs in FileContext
+ const fileIds = files.map(file => {
+ // Find the file ID by matching file properties
+ const fileRecord = state.files.ids
+ .map(id => selectors.getFileRecord(id))
+ .find(record =>
+ record &&
+ record.name === file.name &&
+ record.size === file.size &&
+ record.lastModified === file.lastModified
+ );
+ return fileRecord?.id;
+ }).filter((id): id is string => id !== undefined); // Type guard to ensure only strings
+
+ setSelectedFiles(fileIds);
};
const handleFromExtensionChange = (value: string) => {
diff --git a/frontend/src/components/viewer/Viewer.tsx b/frontend/src/components/viewer/Viewer.tsx
index 6e08962b1..c1a2b440a 100644
--- a/frontend/src/components/viewer/Viewer.tsx
+++ b/frontend/src/components/viewer/Viewer.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef, useCallback } from "react";
import { Paper, Stack, Text, ScrollArea, Loader, Center, Button, Group, NumberInput, useMantineTheme, ActionIcon, Box, Tabs } from "@mantine/core";
-import { getDocument, GlobalWorkerOptions } from "pdfjs-dist";
import { useTranslation } from "react-i18next";
+import { pdfWorkerManager } from "../../services/pdfWorkerManager";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import FirstPageIcon from "@mui/icons-material/FirstPage";
@@ -13,10 +13,9 @@ import CloseIcon from "@mui/icons-material/Close";
import { useLocalStorage } from "@mantine/hooks";
import { fileStorage } from "../../services/fileStorage";
import SkeletonLoader from '../shared/SkeletonLoader';
-import { useFileContext } from "../../contexts/FileContext";
+import { useFileState, useFileActions, useCurrentFile } from "../../contexts/FileContext";
import { useFileWithUrl } from "../../hooks/useFileWithUrl";
-GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
// Lazy loading page image component
interface LazyPageImageProps {
@@ -150,7 +149,15 @@ const Viewer = ({
const theme = useMantineTheme();
// Get current file from FileContext
- const { getCurrentFile, getCurrentProcessedFile, clearAllFiles, addFiles, activeFiles } = useFileContext();
+ const { selectors } = useFileState();
+ const { actions } = useFileActions();
+ const currentFile = useCurrentFile();
+
+ const getCurrentFile = () => currentFile.file;
+ const getCurrentProcessedFile = () => currentFile.record?.processedFile || undefined;
+ const clearAllFiles = actions.clearAllFiles;
+ const addFiles = actions.addFiles;
+ const activeFiles = selectors.getFiles();
// Tab management for multiple files
const [activeTab, setActiveTab] = useState("0");
@@ -171,6 +178,10 @@ const Viewer = ({
const [zoom, setZoom] = useState(1); // 1 = 100%
const pageRefs = useRef<(HTMLImageElement | null)[]>([]);
+ // Memoize setPageRef to prevent infinite re-renders
+ const setPageRef = useCallback((index: number, ref: HTMLImageElement | null) => {
+ pageRefs.current[index] = ref;
+ }, []);
// Get files with URLs for tabs - we'll need to create these individually
const file0WithUrl = useFileWithUrl(activeFiles[0]);
@@ -385,7 +396,7 @@ const Viewer = ({
throw new Error('No valid PDF source available');
}
- const pdf = await getDocument(pdfData).promise;
+ const pdf = await pdfWorkerManager.createDocument(pdfData);
pdfDocRef.current = pdf;
setNumPages(pdf.numPages);
if (!cancelled) {
@@ -406,6 +417,11 @@ const Viewer = ({
cancelled = true;
// Stop any ongoing preloading
preloadingRef.current = false;
+ // Cleanup PDF document using worker manager
+ if (pdfDocRef.current) {
+ pdfWorkerManager.destroyDocument(pdfDocRef.current);
+ pdfDocRef.current = null;
+ }
// Cleanup ArrayBuffer reference to help garbage collection
currentArrayBufferRef.current = null;
};
@@ -461,7 +477,7 @@ const Viewer = ({
>
handleTabChange(value || "0")}>
- {activeFiles.map((file, index) => (
+ {activeFiles.map((file: any, index: number) => (
{file.name.length > 20 ? `${file.name.substring(0, 20)}...` : file.name}
@@ -494,7 +510,7 @@ const Viewer = ({
isFirst={i === 0}
renderPage={renderPage}
pageImages={pageImages}
- setPageRef={(index, ref) => { pageRefs.current[index] = ref; }}
+ setPageRef={setPageRef}
/>
{i * 2 + 1 < numPages && (
{ pageRefs.current[index] = ref; }}
+ setPageRef={setPageRef}
/>
)}
@@ -518,7 +534,7 @@ const Viewer = ({
isFirst={idx === 0}
renderPage={renderPage}
pageImages={pageImages}
- setPageRef={(index, ref) => { pageRefs.current[index] = ref; }}
+ setPageRef={setPageRef}
/>
))}
diff --git a/frontend/src/contexts/FileContext.tsx b/frontend/src/contexts/FileContext.tsx
index 13b1a77be..44adf6b28 100644
--- a/frontend/src/contexts/FileContext.tsx
+++ b/frontend/src/contexts/FileContext.tsx
@@ -1,961 +1,279 @@
/**
- * Global file context for managing files, edits, and navigation across all views and tools
+ * FileContext - Manages PDF files for Stirling PDF multi-tool workflow
+ *
+ * Handles file state, memory management, and resource cleanup for large PDFs (up to 100GB+).
+ * Users upload PDFs once and chain tools (split β merge β compress β view) without reloading.
+ *
+ * Key hooks:
+ * - useFileState() - access file state and UI state
+ * - useFileActions() - file operations (add/remove/update)
+ * - useFileSelection() - for file selection state and actions
+ *
+ * Memory management handled by FileLifecycleManager (PDF.js cleanup, blob URL revocation).
*/
-import React, { createContext, useContext, useReducer, useCallback, useEffect, useRef } from 'react';
+import React, { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
import {
- FileContextValue,
- FileContextState,
FileContextProviderProps,
- ModeType,
- ViewType,
- ToolType,
- FileOperation,
- FileEditHistory,
- FileOperationHistory,
- ViewerConfig,
- FileContextUrlParams
+ FileContextSelectors,
+ FileContextStateValue,
+ FileContextActionsValue,
+ FileContextActions,
+ FileId,
+ FileRecord
} from '../types/fileContext';
-import { ProcessedFile } from '../types/processing';
-import { PageOperation, PDFDocument } from '../types/pageEditor';
-import { useEnhancedProcessedFiles } from '../hooks/useEnhancedProcessedFiles';
-import { fileStorage } from '../services/fileStorage';
-import { enhancedPDFProcessingService } from '../services/enhancedPDFProcessingService';
-import { thumbnailGenerationService } from '../services/thumbnailGenerationService';
-import { getFileId } from '../utils/fileUtils';
-// Initial state
-const initialViewerConfig: ViewerConfig = {
- zoom: 1.0,
- currentPage: 1,
- viewMode: 'single',
- sidebarOpen: false
-};
+// Import modular components
+import { fileContextReducer, initialFileContextState } from './file/FileReducer';
+import { createFileSelectors } from './file/fileSelectors';
+import { addFiles, consumeFiles, createFileActions } from './file/fileActions';
+import { FileLifecycleManager } from './file/lifecycle';
+import { FileStateContext, FileActionsContext } from './file/contexts';
+import { IndexedDBProvider, useIndexedDB } from './IndexedDBContext';
-const initialState: FileContextState = {
- activeFiles: [],
- processedFiles: new Map(),
- pinnedFiles: new Set(),
- currentMode: 'pageEditor',
- currentView: 'fileEditor', // Legacy field
- currentTool: null, // Legacy field
- fileEditHistory: new Map(),
- globalFileOperations: [],
- fileOperationHistory: new Map(),
- selectedFileIds: [],
- selectedPageNumbers: [],
- viewerConfig: initialViewerConfig,
- isProcessing: false,
- processingProgress: 0,
- lastExportConfig: undefined,
- hasUnsavedChanges: false,
- pendingNavigation: null,
- showNavigationWarning: false
-};
+const DEBUG = process.env.NODE_ENV === 'development';
-// Action types
-type FileContextAction =
- | { type: 'SET_ACTIVE_FILES'; payload: File[] }
- | { type: 'ADD_FILES'; payload: File[] }
- | { type: 'REMOVE_FILES'; payload: string[] }
- | { type: 'SET_PROCESSED_FILES'; payload: Map }
- | { type: 'UPDATE_PROCESSED_FILE'; payload: { file: File; processedFile: ProcessedFile } }
- | { type: 'SET_CURRENT_MODE'; payload: ModeType }
- | { type: 'SET_CURRENT_VIEW'; payload: ViewType }
- | { type: 'SET_CURRENT_TOOL'; payload: ToolType }
- | { type: 'SET_SELECTED_FILES'; payload: string[] }
- | { type: 'SET_SELECTED_PAGES'; payload: number[] }
- | { type: 'CLEAR_SELECTIONS' }
- | { type: 'SET_PROCESSING'; payload: { isProcessing: boolean; progress: number } }
- | { type: 'UPDATE_VIEWER_CONFIG'; payload: Partial }
- | { type: 'ADD_PAGE_OPERATIONS'; payload: { fileId: string; operations: PageOperation[] } }
- | { type: 'ADD_FILE_OPERATION'; payload: FileOperation }
- | { type: 'RECORD_OPERATION'; payload: { fileId: string; operation: FileOperation | PageOperation } }
- | { type: 'MARK_OPERATION_APPLIED'; payload: { fileId: string; operationId: string } }
- | { type: 'MARK_OPERATION_FAILED'; payload: { fileId: string; operationId: string; error: string } }
- | { type: 'CLEAR_FILE_HISTORY'; payload: string }
- | { type: 'SET_EXPORT_CONFIG'; payload: FileContextState['lastExportConfig'] }
- | { type: 'SET_UNSAVED_CHANGES'; payload: boolean }
- | { type: 'SET_PENDING_NAVIGATION'; payload: (() => void) | null }
- | { type: 'SHOW_NAVIGATION_WARNING'; payload: boolean }
- | { type: 'PIN_FILE'; payload: File }
- | { type: 'UNPIN_FILE'; payload: File }
- | { type: 'CONSUME_FILES'; payload: { inputFiles: File[]; outputFiles: File[] } }
- | { type: 'RESET_CONTEXT' }
- | { type: 'LOAD_STATE'; payload: Partial };
-// Reducer
-function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
- switch (action.type) {
- case 'SET_ACTIVE_FILES':
- return {
- ...state,
- activeFiles: action.payload,
- selectedFileIds: [], // Clear selections when files change
- selectedPageNumbers: []
- };
-
- case 'ADD_FILES':
- return {
- ...state,
- activeFiles: [...state.activeFiles, ...action.payload]
- };
-
- case 'REMOVE_FILES':
- const remainingFiles = state.activeFiles.filter(file => {
- const fileId = getFileId(file);
- return !fileId || !action.payload.includes(fileId);
- });
- const safeSelectedFileIds = Array.isArray(state.selectedFileIds) ? state.selectedFileIds : [];
- return {
- ...state,
- activeFiles: remainingFiles,
- selectedFileIds: safeSelectedFileIds.filter(id => !action.payload.includes(id))
- };
-
- case 'SET_PROCESSED_FILES':
- return {
- ...state,
- processedFiles: action.payload
- };
-
- case 'UPDATE_PROCESSED_FILE':
- const updatedProcessedFiles = new Map(state.processedFiles);
- updatedProcessedFiles.set(action.payload.file, action.payload.processedFile);
- return {
- ...state,
- processedFiles: updatedProcessedFiles
- };
-
- case 'SET_CURRENT_MODE':
- const coreViews = ['viewer', 'pageEditor', 'fileEditor'];
- const isToolMode = !coreViews.includes(action.payload);
-
- return {
- ...state,
- currentMode: action.payload,
- // Update legacy fields for backward compatibility
- currentView: isToolMode ? 'fileEditor' : action.payload as ViewType,
- currentTool: isToolMode ? action.payload as ToolType : null
- };
-
- case 'SET_CURRENT_VIEW':
- // Legacy action - just update currentMode
- return {
- ...state,
- currentMode: action.payload as ModeType,
- currentView: action.payload,
- currentTool: null
- };
-
- case 'SET_CURRENT_TOOL':
- // Legacy action - just update currentMode
- return {
- ...state,
- currentMode: action.payload ? action.payload as ModeType : 'pageEditor',
- currentView: action.payload ? 'fileEditor' : 'pageEditor',
- currentTool: action.payload
- };
-
- case 'SET_SELECTED_FILES':
- return {
- ...state,
- selectedFileIds: action.payload
- };
-
- case 'SET_SELECTED_PAGES':
- return {
- ...state,
- selectedPageNumbers: action.payload
- };
-
- case 'CLEAR_SELECTIONS':
- return {
- ...state,
- selectedFileIds: [],
- selectedPageNumbers: []
- };
-
- case 'SET_PROCESSING':
- return {
- ...state,
- isProcessing: action.payload.isProcessing,
- processingProgress: action.payload.progress
- };
-
- case 'UPDATE_VIEWER_CONFIG':
- return {
- ...state,
- viewerConfig: {
- ...state.viewerConfig,
- ...action.payload
- }
- };
-
- case 'ADD_PAGE_OPERATIONS':
- const newHistory = new Map(state.fileEditHistory);
- const existing = newHistory.get(action.payload.fileId);
- newHistory.set(action.payload.fileId, {
- fileId: action.payload.fileId,
- pageOperations: existing ?
- [...existing.pageOperations, ...action.payload.operations] :
- action.payload.operations,
- lastModified: Date.now()
- });
- return {
- ...state,
- fileEditHistory: newHistory
- };
-
- case 'ADD_FILE_OPERATION':
- return {
- ...state,
- globalFileOperations: [...state.globalFileOperations, action.payload]
- };
-
- case 'RECORD_OPERATION':
- const { fileId, operation } = action.payload;
- const newOperationHistory = new Map(state.fileOperationHistory);
- const existingHistory = newOperationHistory.get(fileId);
-
- if (existingHistory) {
- // Add operation to existing history
- newOperationHistory.set(fileId, {
- ...existingHistory,
- operations: [...existingHistory.operations, operation],
- lastModified: Date.now()
- });
- } else {
- // Create new history for this file
- newOperationHistory.set(fileId, {
- fileId,
- fileName: fileId, // Will be updated with actual filename when available
- operations: [operation],
- createdAt: Date.now(),
- lastModified: Date.now()
- });
- }
-
- return {
- ...state,
- fileOperationHistory: newOperationHistory
- };
-
- case 'MARK_OPERATION_APPLIED':
- const appliedHistory = new Map(state.fileOperationHistory);
- const appliedFileHistory = appliedHistory.get(action.payload.fileId);
-
- if (appliedFileHistory) {
- const updatedOperations = appliedFileHistory.operations.map(op =>
- op.id === action.payload.operationId
- ? { ...op, status: 'applied' as const }
- : op
- );
- appliedHistory.set(action.payload.fileId, {
- ...appliedFileHistory,
- operations: updatedOperations,
- lastModified: Date.now()
- });
- }
-
- return {
- ...state,
- fileOperationHistory: appliedHistory
- };
-
- case 'MARK_OPERATION_FAILED':
- const failedHistory = new Map(state.fileOperationHistory);
- const failedFileHistory = failedHistory.get(action.payload.fileId);
-
- if (failedFileHistory) {
- const updatedOperations = failedFileHistory.operations.map(op =>
- op.id === action.payload.operationId
- ? {
- ...op,
- status: 'failed' as const,
- metadata: { ...op.metadata, error: action.payload.error }
- }
- : op
- );
- failedHistory.set(action.payload.fileId, {
- ...failedFileHistory,
- operations: updatedOperations,
- lastModified: Date.now()
- });
- }
-
- return {
- ...state,
- fileOperationHistory: failedHistory
- };
-
- case 'CLEAR_FILE_HISTORY':
- const clearedHistory = new Map(state.fileOperationHistory);
- clearedHistory.delete(action.payload);
- return {
- ...state,
- fileOperationHistory: clearedHistory
- };
-
- case 'SET_EXPORT_CONFIG':
- return {
- ...state,
- lastExportConfig: action.payload
- };
-
- case 'SET_UNSAVED_CHANGES':
- return {
- ...state,
- hasUnsavedChanges: action.payload
- };
-
- case 'SET_PENDING_NAVIGATION':
- return {
- ...state,
- pendingNavigation: action.payload
- };
-
- case 'SHOW_NAVIGATION_WARNING':
- return {
- ...state,
- showNavigationWarning: action.payload
- };
-
- case 'PIN_FILE':
- return {
- ...state,
- pinnedFiles: new Set([...state.pinnedFiles, action.payload])
- };
-
- case 'UNPIN_FILE':
- const newPinnedFiles = new Set(state.pinnedFiles);
- newPinnedFiles.delete(action.payload);
- return {
- ...state,
- pinnedFiles: newPinnedFiles
- };
-
- case 'CONSUME_FILES': {
- const { inputFiles, outputFiles } = action.payload;
- const unpinnedInputFiles = inputFiles.filter(file => !state.pinnedFiles.has(file));
-
- // Remove unpinned input files and add output files
- const newActiveFiles = [
- ...state.activeFiles.filter(file => !unpinnedInputFiles.includes(file)),
- ...outputFiles
- ];
-
- // Update processed files map - remove consumed files, keep pinned ones
- const newProcessedFiles = new Map(state.processedFiles);
- unpinnedInputFiles.forEach(file => {
- newProcessedFiles.delete(file);
- });
-
- return {
- ...state,
- activeFiles: newActiveFiles,
- processedFiles: newProcessedFiles
- };
- }
-
- case 'RESET_CONTEXT':
- return {
- ...initialState
- };
-
- case 'LOAD_STATE':
- return {
- ...state,
- ...action.payload
- };
-
- default:
- return state;
- }
-}
-
-// Context
-const FileContext = createContext(undefined);
-
-// Provider component
-export function FileContextProvider({
+// Inner provider component that has access to IndexedDB
+function FileContextInner({
children,
enableUrlSync = true,
- enablePersistence = true,
- maxCacheSize = 1024 * 1024 * 1024 // 1GB
+ enablePersistence = true
}: FileContextProviderProps) {
- const [state, dispatch] = useReducer(fileContextReducer, initialState);
+ const [state, dispatch] = useReducer(fileContextReducer, initialFileContextState);
+
+ // IndexedDB context for persistence
+ const indexedDB = enablePersistence ? useIndexedDB() : null;
- // Cleanup timers and refs
- const cleanupTimers = useRef>(new Map());
- const blobUrls = useRef>(new Set());
- const pdfDocuments = useRef>(new Map());
+ // File ref map - stores File objects outside React state
+ const filesRef = useRef>(new Map());
+
+ // Stable state reference for selectors
+ const stateRef = useRef(state);
+ stateRef.current = state;
- // Enhanced file processing hook
- const {
- processedFiles,
- processingStates,
- isProcessing: globalProcessing,
- processingProgress,
- actions: processingActions
- } = useEnhancedProcessedFiles(state.activeFiles, {
- strategy: 'progressive_chunked',
- thumbnailQuality: 'medium',
- chunkSize: 5, // Process 5 pages at a time for smooth progress
- priorityPageCount: 0 // No special priority pages
- });
+ // Create lifecycle manager
+ const lifecycleManagerRef = useRef(null);
+ if (!lifecycleManagerRef.current) {
+ lifecycleManagerRef.current = new FileLifecycleManager(filesRef, dispatch);
+ }
+ const lifecycleManager = lifecycleManagerRef.current;
- // Update processed files when they change
- useEffect(() => {
- dispatch({ type: 'SET_PROCESSED_FILES', payload: processedFiles });
- dispatch({
- type: 'SET_PROCESSING',
- payload: {
- isProcessing: globalProcessing,
- progress: processingProgress.overall
- }
- });
- }, [processedFiles, globalProcessing, processingProgress.overall]);
+ // Create stable selectors (memoized once to avoid re-renders)
+ const selectors = useMemo(() =>
+ createFileSelectors(stateRef, filesRef),
+ [] // Empty deps - selectors are stable
+ );
-
- // Centralized memory management
- const trackBlobUrl = useCallback((url: string) => {
- blobUrls.current.add(url);
- }, []);
-
- const trackPdfDocument = useCallback((fileId: string, pdfDoc: PDFDocument) => {
- // Clean up existing document for this file if any
- const existing = pdfDocuments.current.get(fileId);
- if (existing && existing.destroy) {
- try {
- existing.destroy();
- } catch (error) {
- console.warn('Error destroying existing PDF document:', error);
- }
- }
- pdfDocuments.current.set(fileId, pdfDoc);
- }, []);
-
- const cleanupFile = useCallback(async (fileId: string) => {
- console.log('Cleaning up file:', fileId);
-
- try {
- // Cancel any pending cleanup timer
- const timer = cleanupTimers.current.get(fileId);
- if (timer) {
- clearTimeout(timer);
- cleanupTimers.current.delete(fileId);
- }
-
- // Cleanup PDF document instances (but preserve processed file cache)
- const pdfDoc = pdfDocuments.current.get(fileId);
- if (pdfDoc && pdfDoc.destroy) {
- pdfDoc.destroy();
- pdfDocuments.current.delete(fileId);
- }
-
- // IMPORTANT: Don't cancel processing or clear cache during normal view switches
- // Only do this when file is actually being removed
- // enhancedPDFProcessingService.cancelProcessing(fileId);
- // thumbnailGenerationService.stopGeneration();
-
- } catch (error) {
- console.warn('Error during file cleanup:', error);
- }
- }, []);
-
- const cleanupAllFiles = useCallback(() => {
- console.log('Cleaning up all files');
-
- try {
- // Clear all timers
- cleanupTimers.current.forEach(timer => clearTimeout(timer));
- cleanupTimers.current.clear();
-
- // Destroy all PDF documents
- pdfDocuments.current.forEach((pdfDoc, fileId) => {
- if (pdfDoc && pdfDoc.destroy) {
- try {
- pdfDoc.destroy();
- } catch (error) {
- console.warn(`Error destroying PDF document for ${fileId}:`, error);
- }
- }
- });
- pdfDocuments.current.clear();
-
- // Revoke all blob URLs
- blobUrls.current.forEach(url => {
- try {
- URL.revokeObjectURL(url);
- } catch (error) {
- console.warn('Error revoking blob URL:', error);
- }
- });
- blobUrls.current.clear();
-
- // Clear all processing
- enhancedPDFProcessingService.clearAllProcessing();
-
- // Destroy thumbnails
- thumbnailGenerationService.destroy();
-
- // Force garbage collection hint
- setTimeout(() => window?.gc?.(), 100);
-
- } catch (error) {
- console.warn('Error during cleanup all files:', error);
- }
- }, []);
-
- const scheduleCleanup = useCallback((fileId: string, delay: number = 30000) => {
- // Cancel existing timer
- const existingTimer = cleanupTimers.current.get(fileId);
- if (existingTimer) {
- clearTimeout(existingTimer);
- cleanupTimers.current.delete(fileId);
- }
-
- // If delay is negative, just cancel (don't reschedule)
- if (delay < 0) {
- return;
- }
-
- // Schedule new cleanup
- const timer = setTimeout(() => {
- cleanupFile(fileId);
- }, delay);
-
- cleanupTimers.current.set(fileId, timer);
- }, [cleanupFile]);
-
- // Action implementations
- const addFiles = useCallback(async (files: File[]): Promise => {
- dispatch({ type: 'ADD_FILES', payload: files });
-
- // Auto-save to IndexedDB if persistence enabled
- if (enablePersistence) {
- for (const file of files) {
- try {
- // Check if file already has an explicit ID property (already in IndexedDB)
- const fileId = getFileId(file);
- if (!fileId) {
- // File doesn't have explicit ID, store it with thumbnail
- try {
- // Generate thumbnail for better recent files experience
- const thumbnail = await (thumbnailGenerationService as any /* FIX ME */).generateThumbnail(file);
- const storedFile = await fileStorage.storeFile(file, thumbnail);
- // Add the ID to the file object
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- } catch (thumbnailError) {
- // If thumbnail generation fails, store without thumbnail
- console.warn('Failed to generate thumbnail, storing without:', thumbnailError);
- const storedFile = await fileStorage.storeFile(file);
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- }
- }
- } catch (error) {
- console.error('Failed to store file:', error);
- }
- }
- }
-
- // Return files with their IDs assigned
- return files;
- }, [enablePersistence]);
-
- const removeFiles = useCallback((fileIds: string[], deleteFromStorage: boolean = true) => {
- // FULL cleanup for actually removed files (including cache)
- fileIds.forEach(fileId => {
- // Cancel processing and clear caches when file is actually removed
- enhancedPDFProcessingService.cancelProcessing(fileId);
- cleanupFile(fileId);
- });
-
- dispatch({ type: 'REMOVE_FILES', payload: fileIds });
-
- // Remove from IndexedDB only if requested
- if (enablePersistence && deleteFromStorage) {
- fileIds.forEach(async (fileId) => {
- try {
- await fileStorage.deleteFile(fileId);
- } catch (error) {
- console.error('Failed to remove file from storage:', error);
- }
- });
- }
- }, [enablePersistence, cleanupFile]);
-
-
- const replaceFile = useCallback(async (oldFileId: string, newFile: File) => {
- // Remove old file and add new one
- removeFiles([oldFileId]);
- await addFiles([newFile]);
- }, [removeFiles, addFiles]);
-
- const clearAllFiles = useCallback(() => {
- // Cleanup all memory before clearing files
- cleanupAllFiles();
-
- dispatch({ type: 'SET_ACTIVE_FILES', payload: [] });
- dispatch({ type: 'CLEAR_SELECTIONS' });
- }, [cleanupAllFiles]);
-
- // File pinning functions
- const pinFile = useCallback((file: File) => {
- dispatch({ type: 'PIN_FILE', payload: file });
- }, []);
-
- const unpinFile = useCallback((file: File) => {
- dispatch({ type: 'UNPIN_FILE', payload: file });
- }, []);
-
- const isFilePinned = useCallback((file: File): boolean => {
- return state.pinnedFiles.has(file);
- }, [state.pinnedFiles]);
-
- // File consumption function
- const consumeFiles = useCallback(async (inputFiles: File[], outputFiles: File[]): Promise => {
- dispatch({ type: 'CONSUME_FILES', payload: { inputFiles, outputFiles } });
-
- // Store new output files if persistence is enabled
- if (enablePersistence) {
- for (const file of outputFiles) {
- try {
- const fileId = getFileId(file);
- if (!fileId) {
- try {
- const thumbnail = await (thumbnailGenerationService as any /* FIX ME */).generateThumbnail(file);
- const storedFile = await fileStorage.storeFile(file, thumbnail);
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- } catch (thumbnailError) {
- console.warn('Failed to generate thumbnail, storing without:', thumbnailError);
- const storedFile = await fileStorage.storeFile(file);
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- }
- }
- } catch (error) {
- console.error('Failed to store output file:', error);
- }
- }
- }
- }, [enablePersistence, state.pinnedFiles]);
+ // Navigation management removed - moved to NavigationContext
// Navigation guard system functions
const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
- dispatch({ type: 'SET_UNSAVED_CHANGES', payload: hasChanges });
+ dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
}, []);
- const requestNavigation = useCallback((navigationFn: () => void): boolean => {
- if (state.hasUnsavedChanges) {
- dispatch({ type: 'SET_PENDING_NAVIGATION', payload: navigationFn });
- dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: true });
- return false;
+ // File operations using unified addFiles helper with persistence
+ const addRawFiles = useCallback(async (files: File[]): Promise => {
+ const addedFilesWithIds = await addFiles('raw', { files }, stateRef, filesRef, dispatch, lifecycleManager);
+
+ // Persist to IndexedDB if enabled
+ if (indexedDB && enablePersistence && addedFilesWithIds.length > 0) {
+ await Promise.all(addedFilesWithIds.map(async ({ file, id, thumbnail }) => {
+ try {
+ await indexedDB.saveFile(file, id, thumbnail);
+ } catch (error) {
+ console.error('Failed to persist file to IndexedDB:', file.name, error);
+ }
+ }));
+ }
+
+ return addedFilesWithIds.map(({ file }) => file);
+ }, [indexedDB, enablePersistence]);
+
+ const addProcessedFiles = useCallback(async (filesWithThumbnails: Array<{ file: File; thumbnail?: string; pageCount?: number }>): Promise => {
+ const result = await addFiles('processed', { filesWithThumbnails }, stateRef, filesRef, dispatch, lifecycleManager);
+ return result.map(({ file }) => file);
+ }, []);
+
+ const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: FileId; metadata: any }>): Promise => {
+ const result = await addFiles('stored', { filesWithMetadata }, stateRef, filesRef, dispatch, lifecycleManager);
+ return result.map(({ file }) => file);
+ }, []);
+
+ // Action creators
+ const baseActions = useMemo(() => createFileActions(dispatch), []);
+
+ // Helper functions for pinned files
+ const consumeFilesWrapper = useCallback(async (inputFileIds: FileId[], outputFiles: File[]): Promise => {
+ return consumeFiles(inputFileIds, outputFiles, stateRef, filesRef, dispatch);
+ }, []);
+
+ // Helper to find FileId from File object
+ const findFileId = useCallback((file: File): FileId | undefined => {
+ return Object.keys(stateRef.current.files.byId).find(id => {
+ const storedFile = filesRef.current.get(id);
+ return storedFile &&
+ storedFile.name === file.name &&
+ storedFile.size === file.size &&
+ storedFile.lastModified === file.lastModified;
+ });
+ }, []);
+
+ // File-to-ID wrapper functions for pinning
+ const pinFileWrapper = useCallback((file: File) => {
+ const fileId = findFileId(file);
+ if (fileId) {
+ baseActions.pinFile(fileId);
} else {
- navigationFn();
- return true;
+ console.warn('File not found for pinning:', file.name);
}
- }, [state.hasUnsavedChanges]);
+ }, [baseActions, findFileId]);
- const confirmNavigation = useCallback(() => {
- if (state.pendingNavigation) {
- state.pendingNavigation();
- dispatch({ type: 'SET_PENDING_NAVIGATION', payload: null });
+ const unpinFileWrapper = useCallback((file: File) => {
+ const fileId = findFileId(file);
+ if (fileId) {
+ baseActions.unpinFile(fileId);
+ } else {
+ console.warn('File not found for unpinning:', file.name);
}
- dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: false });
- }, [state.pendingNavigation]);
+ }, [baseActions, findFileId]);
- const cancelNavigation = useCallback(() => {
- dispatch({ type: 'SET_PENDING_NAVIGATION', payload: null });
- dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: false });
- }, []);
-
- const setCurrentMode = useCallback((mode: ModeType) => {
- requestNavigation(() => {
- dispatch({ type: 'SET_CURRENT_MODE', payload: mode });
-
- if (state.currentMode !== mode && state.activeFiles.length > 0) {
- if (window.requestIdleCallback) {
- window.requestIdleCallback(() => {
- window.gc?.();
- }, { timeout: 5000 });
+ // Complete actions object
+ const actions = useMemo(() => ({
+ ...baseActions,
+ addFiles: addRawFiles,
+ addProcessedFiles,
+ addStoredFiles,
+ removeFiles: async (fileIds: FileId[], deleteFromStorage?: boolean) => {
+ // Remove from memory and cleanup resources
+ lifecycleManager.removeFiles(fileIds, stateRef);
+
+ // Remove from IndexedDB if enabled
+ if (indexedDB && enablePersistence && deleteFromStorage !== false) {
+ try {
+ await indexedDB.deleteMultiple(fileIds);
+ } catch (error) {
+ console.error('Failed to delete files from IndexedDB:', error);
}
}
- });
- }, [requestNavigation, state.currentMode, state.activeFiles]);
-
- const setCurrentView = useCallback((view: ViewType) => {
- requestNavigation(() => {
- dispatch({ type: 'SET_CURRENT_VIEW', payload: view });
-
- if (state.currentView !== view && state.activeFiles.length > 0) {
- if (window.requestIdleCallback) {
- window.requestIdleCallback(() => {
- window.gc?.();
- }, { timeout: 5000 });
+ },
+ updateFileRecord: (fileId: FileId, updates: Partial) =>
+ lifecycleManager.updateFileRecord(fileId, updates, stateRef),
+ reorderFiles: (orderedFileIds: FileId[]) => {
+ dispatch({ type: 'REORDER_FILES', payload: { orderedFileIds } });
+ },
+ clearAllFiles: async () => {
+ lifecycleManager.cleanupAllFiles();
+ filesRef.current.clear();
+ dispatch({ type: 'RESET_CONTEXT' });
+
+ // Clear IndexedDB if enabled
+ if (indexedDB && enablePersistence) {
+ try {
+ await indexedDB.clearAll();
+ } catch (error) {
+ console.error('Failed to clear IndexedDB:', error);
}
}
- });
- }, [requestNavigation, state.currentView, state.activeFiles]);
+ },
+ // Pinned files functionality with File object wrappers
+ pinFile: pinFileWrapper,
+ unpinFile: unpinFileWrapper,
+ consumeFiles: consumeFilesWrapper,
+ setHasUnsavedChanges,
+ trackBlobUrl: lifecycleManager.trackBlobUrl,
+ cleanupFile: (fileId: string) => lifecycleManager.cleanupFile(fileId, stateRef),
+ scheduleCleanup: (fileId: string, delay?: number) =>
+ lifecycleManager.scheduleCleanup(fileId, delay, stateRef)
+ }), [
+ baseActions,
+ addRawFiles,
+ addProcessedFiles,
+ addStoredFiles,
+ lifecycleManager,
+ setHasUnsavedChanges,
+ consumeFilesWrapper,
+ pinFileWrapper,
+ unpinFileWrapper,
+ indexedDB,
+ enablePersistence
+ ]);
- const setCurrentTool = useCallback((tool: ToolType) => {
- requestNavigation(() => {
- dispatch({ type: 'SET_CURRENT_TOOL', payload: tool });
- });
- }, [requestNavigation]);
+ // Split context values to minimize re-renders
+ const stateValue = useMemo(() => ({
+ state,
+ selectors
+ }), [state, selectors]);
- const setSelectedFiles = useCallback((fileIds: string[]) => {
- dispatch({ type: 'SET_SELECTED_FILES', payload: fileIds });
- }, []);
+ const actionsValue = useMemo(() => ({
+ actions,
+ dispatch
+ }), [actions]);
- const setSelectedPages = useCallback((pageNumbers: number[]) => {
- dispatch({ type: 'SET_SELECTED_PAGES', payload: pageNumbers });
- }, []);
-
- const updateProcessedFile = useCallback((file: File, processedFile: ProcessedFile) => {
- dispatch({ type: 'UPDATE_PROCESSED_FILE', payload: { file, processedFile } });
- }, []);
-
- const clearSelections = useCallback(() => {
- dispatch({ type: 'CLEAR_SELECTIONS' });
- }, []);
-
- const applyPageOperations = useCallback((fileId: string, operations: PageOperation[]) => {
- dispatch({
- type: 'ADD_PAGE_OPERATIONS',
- payload: { fileId, operations }
- });
- }, []);
-
- const applyFileOperation = useCallback((operation: FileOperation) => {
- dispatch({ type: 'ADD_FILE_OPERATION', payload: operation });
- }, []);
-
- const undoLastOperation = useCallback((fileId?: string) => {
- console.warn('Undo not yet implemented');
- }, []);
-
- const updateViewerConfig = useCallback((config: Partial) => {
- dispatch({ type: 'UPDATE_VIEWER_CONFIG', payload: config });
- }, []);
-
- const setExportConfig = useCallback((config: FileContextState['lastExportConfig']) => {
- dispatch({ type: 'SET_EXPORT_CONFIG', payload: config });
- }, []);
-
- // Operation history management functions
- const recordOperation = useCallback((fileId: string, operation: FileOperation | PageOperation) => {
- dispatch({ type: 'RECORD_OPERATION', payload: { fileId, operation } });
- }, []);
-
- const markOperationApplied = useCallback((fileId: string, operationId: string) => {
- dispatch({ type: 'MARK_OPERATION_APPLIED', payload: { fileId, operationId } });
- }, []);
-
- const markOperationFailed = useCallback((fileId: string, operationId: string, error: string) => {
- dispatch({ type: 'MARK_OPERATION_FAILED', payload: { fileId, operationId, error } });
- }, []);
-
- const getFileHistory = useCallback((fileId: string): FileOperationHistory | undefined => {
- return state.fileOperationHistory.get(fileId);
- }, [state.fileOperationHistory]);
-
- const getAppliedOperations = useCallback((fileId: string): (FileOperation | PageOperation)[] => {
- const history = state.fileOperationHistory.get(fileId);
- return history ? history.operations.filter(op => op.status === 'applied') : [];
- }, [state.fileOperationHistory]);
-
- const clearFileHistory = useCallback((fileId: string) => {
- dispatch({ type: 'CLEAR_FILE_HISTORY', payload: fileId });
- }, []);
-
- // Utility functions
- const getFileById = useCallback((fileId: string): File | undefined => {
- return state.activeFiles.find(file => {
- const actualFileId = getFileId(file);
- return actualFileId && actualFileId === fileId;
- });
- }, [state.activeFiles]);
-
- const getProcessedFileById = useCallback((fileId: string): ProcessedFile | undefined => {
- const file = getFileById(fileId);
- return file ? state.processedFiles.get(file) : undefined;
- }, [getFileById, state.processedFiles]);
-
- const getCurrentFile = useCallback((): File | undefined => {
- if (state.selectedFileIds.length > 0) {
- return getFileById(state.selectedFileIds[0]);
- }
- return state.activeFiles[0]; // Default to first file
- }, [state.selectedFileIds, state.activeFiles, getFileById]);
-
- const getCurrentProcessedFile = useCallback((): ProcessedFile | undefined => {
- const file = getCurrentFile();
- return file ? state.processedFiles.get(file) : undefined;
- }, [getCurrentFile, state.processedFiles]);
-
- // Context persistence
- const saveContext = useCallback(async () => {
- if (!enablePersistence) return;
-
- try {
- const contextData = {
- currentView: state.currentView,
- currentTool: state.currentTool,
- selectedFileIds: state.selectedFileIds,
- selectedPageNumbers: state.selectedPageNumbers,
- viewerConfig: state.viewerConfig,
- lastExportConfig: state.lastExportConfig,
- timestamp: Date.now()
- };
-
- localStorage.setItem('fileContext', JSON.stringify(contextData));
- } catch (error) {
- console.error('Failed to save context:', error);
- }
- }, [state, enablePersistence]);
-
- const loadContext = useCallback(async () => {
- if (!enablePersistence) return;
-
- try {
- const saved = localStorage.getItem('fileContext');
- if (saved) {
- const contextData = JSON.parse(saved);
- dispatch({ type: 'LOAD_STATE', payload: contextData });
- }
- } catch (error) {
- console.error('Failed to load context:', error);
- }
- }, [enablePersistence]);
-
- const resetContext = useCallback(() => {
- dispatch({ type: 'RESET_CONTEXT' });
- if (enablePersistence) {
- localStorage.removeItem('fileContext');
- }
- }, [enablePersistence]);
-
-
- // Auto-save context when it changes
- useEffect(() => {
- saveContext();
- }, [saveContext]);
-
- // Load context on mount
- useEffect(() => {
- loadContext();
- }, [loadContext]);
+ // Persistence loading disabled - files only loaded on explicit user action
+ // useEffect(() => {
+ // if (!enablePersistence || !indexedDB) return;
+ // const loadFromPersistence = async () => { /* loading logic removed */ };
+ // loadFromPersistence();
+ // }, [enablePersistence, indexedDB]);
// Cleanup on unmount
useEffect(() => {
return () => {
- console.log('FileContext unmounting - cleaning up all resources');
- cleanupAllFiles();
+ if (DEBUG) console.log('FileContext unmounting - cleaning up all resources');
+ lifecycleManager.destroy();
};
- }, [cleanupAllFiles]);
-
- const contextValue: FileContextValue = {
- // State
- ...state,
-
- // Actions
- addFiles,
- removeFiles,
- replaceFile,
- clearAllFiles,
- pinFile,
- unpinFile,
- isFilePinned,
- consumeFiles,
- setCurrentMode,
- setCurrentView,
- setCurrentTool,
- setSelectedFiles,
- setSelectedPages,
- updateProcessedFile,
- clearSelections,
- applyPageOperations,
- applyFileOperation,
- undoLastOperation,
- updateViewerConfig,
- setExportConfig,
- getFileById,
- getProcessedFileById,
- getCurrentFile,
- getCurrentProcessedFile,
- saveContext,
- loadContext,
- resetContext,
-
- // Operation history management
- recordOperation,
- markOperationApplied,
- markOperationFailed,
- getFileHistory,
- getAppliedOperations,
- clearFileHistory,
-
- // Navigation guard system
- setHasUnsavedChanges,
- requestNavigation,
- confirmNavigation,
- cancelNavigation,
-
- // Memory management
- trackBlobUrl,
- trackPdfDocument,
- cleanupFile,
- scheduleCleanup
- };
+ }, [lifecycleManager]);
return (
-
- {children}
-
+
+
+ {children}
+
+
);
}
-// Custom hook to use the context
-export function useFileContext(): FileContextValue {
- const context = useContext(FileContext);
- if (!context) {
- throw new Error('useFileContext must be used within a FileContextProvider');
+// Outer provider component that wraps with IndexedDBProvider
+export function FileContextProvider({
+ children,
+ enableUrlSync = true,
+ enablePersistence = true
+}: FileContextProviderProps) {
+ if (enablePersistence) {
+ return (
+
+
+ {children}
+
+
+ );
+ } else {
+ return (
+
+ {children}
+
+ );
}
- return context;
}
-// Helper hooks for specific aspects
-export function useCurrentFile() {
- const { getCurrentFile, getCurrentProcessedFile } = useFileContext();
- return {
- file: getCurrentFile(),
- processedFile: getCurrentProcessedFile()
- };
-}
-
-export function useFileSelection() {
- const {
- selectedFileIds,
- selectedPageNumbers,
- setSelectedFiles,
- setSelectedPages,
- clearSelections
- } = useFileContext();
-
- return {
- selectedFileIds,
- selectedPageNumbers,
- setSelectedFiles,
- setSelectedPages,
- clearSelections
- };
-}
-
-export function useViewerState() {
- const { viewerConfig, updateViewerConfig } = useFileContext();
- return {
- config: viewerConfig,
- updateConfig: updateViewerConfig
- };
-}
+// Export all hooks from the fileHooks module
+export {
+ useFileState,
+ useFileActions,
+ useCurrentFile,
+ useFileSelection,
+ useFileManagement,
+ useFileUI,
+ useFileRecord,
+ useAllFiles,
+ useSelectedFiles,
+ // Primary API hooks for tools
+ useFileContext
+} from './file/fileHooks';
\ No newline at end of file
diff --git a/frontend/src/contexts/FileManagerContext.tsx b/frontend/src/contexts/FileManagerContext.tsx
index 4115e873d..28b3d52df 100644
--- a/frontend/src/contexts/FileManagerContext.tsx
+++ b/frontend/src/contexts/FileManagerContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
-import { FileWithUrl } from '../types/file';
+import React, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { FileMetadata } from '../types/file';
import { StoredFile, fileStorage } from '../services/fileStorage';
import { downloadFiles } from '../utils/downloadUtils';
@@ -9,27 +9,27 @@ interface FileManagerContextValue {
activeSource: 'recent' | 'local' | 'drive';
selectedFileIds: string[];
searchTerm: string;
- selectedFiles: FileWithUrl[];
- filteredFiles: FileWithUrl[];
+ selectedFiles: FileMetadata[];
+ filteredFiles: FileMetadata[];
fileInputRef: React.RefObject;
selectedFilesSet: Set;
// Handlers
onSourceChange: (source: 'recent' | 'local' | 'drive') => void;
onLocalFileClick: () => void;
- onFileSelect: (file: FileWithUrl, index: number, shiftKey?: boolean) => void;
+ onFileSelect: (file: FileMetadata, index: number, shiftKey?: boolean) => void;
onFileRemove: (index: number) => void;
- onFileDoubleClick: (file: FileWithUrl) => void;
+ onFileDoubleClick: (file: FileMetadata) => void;
onOpenFiles: () => void;
onSearchChange: (value: string) => void;
onFileInputChange: (event: React.ChangeEvent) => void;
onSelectAll: () => void;
onDeleteSelected: () => void;
onDownloadSelected: () => void;
- onDownloadSingle: (file: FileWithUrl) => void;
+ onDownloadSingle: (file: FileMetadata) => void;
// External props
- recentFiles: FileWithUrl[];
+ recentFiles: FileMetadata[];
isFileSupported: (fileName: string) => boolean;
modalHeight: string;
}
@@ -40,14 +40,14 @@ const FileManagerContext = createContext(null);
// Provider component props
interface FileManagerProviderProps {
children: React.ReactNode;
- recentFiles: FileWithUrl[];
- onFilesSelected: (files: FileWithUrl[]) => void;
+ recentFiles: FileMetadata[];
+ onFilesSelected: (files: FileMetadata[]) => void; // For selecting stored files
+ onNewFilesSelect: (files: File[]) => void; // For uploading new local files
onClose: () => void;
isFileSupported: (fileName: string) => boolean;
isOpen: boolean;
onFileRemove: (index: number) => void;
modalHeight: string;
- storeFile: (file: File) => Promise;
refreshRecentFiles: () => Promise;
}
@@ -55,12 +55,12 @@ export const FileManagerProvider: React.FC = ({
children,
recentFiles,
onFilesSelected,
+ onNewFilesSelect,
onClose,
isFileSupported,
isOpen,
onFileRemove,
modalHeight,
- storeFile,
refreshRecentFiles,
}) => {
const [activeSource, setActiveSource] = useState<'recent' | 'local' | 'drive'>('recent');
@@ -76,7 +76,7 @@ export const FileManagerProvider: React.FC = ({
const selectedFilesSet = new Set(selectedFileIds);
const selectedFiles = selectedFileIds.length === 0 ? [] :
- (recentFiles || []).filter(file => selectedFilesSet.has(file.id || file.name));
+ (recentFiles || []).filter(file => selectedFilesSet.has(file.id));
const filteredFiles = !searchTerm ? recentFiles || [] :
(recentFiles || []).filter(file =>
@@ -96,8 +96,8 @@ export const FileManagerProvider: React.FC = ({
fileInputRef.current?.click();
}, []);
- const handleFileSelect = useCallback((file: FileWithUrl, currentIndex: number, shiftKey?: boolean) => {
- const fileId = file.id || file.name;
+ const handleFileSelect = useCallback((file: FileMetadata, currentIndex: number, shiftKey?: boolean) => {
+ const fileId = file.id;
if (!fileId) return;
if (shiftKey && lastClickedIndex !== null) {
@@ -110,7 +110,7 @@ export const FileManagerProvider: React.FC = ({
// Add all files in the range to selection
for (let i = startIndex; i <= endIndex; i++) {
- const rangeFileId = filteredFiles[i]?.id || filteredFiles[i]?.name;
+ const rangeFileId = filteredFiles[i]?.id;
if (rangeFileId) {
selectedSet.add(rangeFileId);
}
@@ -145,7 +145,7 @@ export const FileManagerProvider: React.FC = ({
onFileRemove(index);
}, [filteredFiles, onFileRemove]);
- const handleFileDoubleClick = useCallback((file: FileWithUrl) => {
+ const handleFileDoubleClick = useCallback((file: FileMetadata) => {
if (isFileSupported(file.name)) {
onFilesSelected([file]);
onClose();
@@ -167,22 +167,8 @@ export const FileManagerProvider: React.FC = ({
const files = Array.from(event.target.files || []);
if (files.length > 0) {
try {
- // Create FileWithUrl objects - FileContext will handle storage and ID assignment
- const fileWithUrls = files.map(file => {
- const url = URL.createObjectURL(file);
- createdBlobUrls.current.add(url);
-
- return {
- // No ID assigned here - FileContext will handle storage and ID assignment
- name: file.name,
- file,
- url,
- size: file.size,
- lastModified: file.lastModified,
- };
- });
-
- onFilesSelected(fileWithUrls as any /* FIX ME */);
+ // For local file uploads, pass File objects directly to FileContext
+ onNewFilesSelect(files);
await refreshRecentFiles();
onClose();
} catch (error) {
@@ -190,7 +176,7 @@ export const FileManagerProvider: React.FC = ({
}
}
event.target.value = '';
- }, [storeFile, onFilesSelected, refreshRecentFiles, onClose]);
+ }, [onNewFilesSelect, refreshRecentFiles, onClose]);
const handleSelectAll = useCallback(() => {
const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
@@ -200,7 +186,7 @@ export const FileManagerProvider: React.FC = ({
setLastClickedIndex(null);
} else {
// Select all filtered files
- setSelectedFileIds(filteredFiles.map(file => file.id || file.name));
+ setSelectedFileIds(filteredFiles.map(file => file.id).filter(Boolean));
setLastClickedIndex(null);
}
}, [filteredFiles, selectedFileIds]);
@@ -211,13 +197,12 @@ export const FileManagerProvider: React.FC = ({
try {
// Get files to delete based on current filtered view
const filesToDelete = filteredFiles.filter(file =>
- selectedFileIds.includes(file.id || file.name)
+ selectedFileIds.includes(file.id)
);
// Delete files from storage
for (const file of filesToDelete) {
- const lookupKey = file.id || file.name;
- await fileStorage.deleteFile(lookupKey);
+ await fileStorage.deleteFile(file.id);
}
// Clear selection
@@ -237,7 +222,7 @@ export const FileManagerProvider: React.FC = ({
try {
// Get selected files
const selectedFilesToDownload = filteredFiles.filter(file =>
- selectedFileIds.includes(file.id || file.name)
+ selectedFileIds.includes(file.id)
);
// Use generic download utility
@@ -249,7 +234,7 @@ export const FileManagerProvider: React.FC = ({
}
}, [selectedFileIds, filteredFiles]);
- const handleDownloadSingle = useCallback(async (file: FileWithUrl) => {
+ const handleDownloadSingle = useCallback(async (file: FileMetadata) => {
try {
await downloadFiles([file]);
} catch (error) {
@@ -279,7 +264,7 @@ export const FileManagerProvider: React.FC = ({
}
}, [isOpen]);
- const contextValue: FileManagerContextValue = {
+ const contextValue: FileManagerContextValue = useMemo(() => ({
// State
activeSource,
selectedFileIds,
@@ -307,7 +292,28 @@ export const FileManagerProvider: React.FC = ({
recentFiles,
isFileSupported,
modalHeight,
- };
+ }), [
+ activeSource,
+ selectedFileIds,
+ searchTerm,
+ selectedFiles,
+ filteredFiles,
+ fileInputRef,
+ handleSourceChange,
+ handleLocalFileClick,
+ handleFileSelect,
+ handleFileRemove,
+ handleFileDoubleClick,
+ handleOpenFiles,
+ handleSearchChange,
+ handleFileInputChange,
+ handleSelectAll,
+ handleDeleteSelected,
+ handleDownloadSelected,
+ recentFiles,
+ isFileSupported,
+ modalHeight,
+ ]);
return (
diff --git a/frontend/src/contexts/FileSelectionContext.tsx b/frontend/src/contexts/FileSelectionContext.tsx
deleted file mode 100644
index a0169b7ab..000000000
--- a/frontend/src/contexts/FileSelectionContext.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react';
-import {
- MaxFiles,
- FileSelectionContextValue
-} from '../types/tool';
-import { useFileContext } from './FileContext';
-
-interface FileSelectionProviderProps {
- children: ReactNode;
-}
-
-const FileSelectionContext = createContext(undefined);
-
-export function FileSelectionProvider({ children }: FileSelectionProviderProps) {
- const { activeFiles } = useFileContext();
- const [selectedFiles, setSelectedFiles] = useState([]);
- const [maxFiles, setMaxFiles] = useState(-1);
- const [isToolMode, setIsToolMode] = useState(false);
-
- // Sync selected files with active files - remove any selected files that are no longer active
- useEffect(() => {
- if (selectedFiles.length > 0) {
- const activeFileSet = new Set(activeFiles);
- const validSelectedFiles = selectedFiles.filter(file => activeFileSet.has(file));
-
- if (validSelectedFiles.length !== selectedFiles.length) {
- setSelectedFiles(validSelectedFiles);
- }
- }
- }, [activeFiles, selectedFiles]);
-
- const clearSelection = useCallback(() => {
- setSelectedFiles([]);
- }, []);
-
- const selectionCount = selectedFiles.length;
- const canSelectMore = maxFiles === -1 || selectionCount < maxFiles;
- const isAtLimit = maxFiles > 0 && selectionCount >= maxFiles;
- const isMultiFileMode = maxFiles !== 1;
-
- const contextValue: FileSelectionContextValue = {
- selectedFiles,
- maxFiles,
- isToolMode,
- setSelectedFiles,
- setMaxFiles,
- setIsToolMode,
- clearSelection,
- canSelectMore,
- isAtLimit,
- selectionCount,
- isMultiFileMode
- };
-
- return (
-
- {children}
-
- );
-}
-
-/**
- * Access the file selection context.
- * Throws if used outside a .
- */
-export function useFileSelection(): FileSelectionContextValue {
- const context = useContext(FileSelectionContext);
- if (!context) {
- throw new Error('useFileSelection must be used within a FileSelectionProvider');
- }
- return context;
-}
-
-// Returns only the file selection values relevant for tools (e.g. merge, split, etc.)
-// Use this in tool panels/components that need to know which files are selected and selection limits.
-export function useToolFileSelection(): Pick {
- const { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount } = useFileSelection();
- return { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount };
-}
-
-// Returns actions for manipulating file selection state.
-// Use this in components that need to update the selection, clear it, or change selection mode.
-export function useFileSelectionActions(): Pick {
- const { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode } = useFileSelection();
- return { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode };
-}
-
-// Returns the raw file selection state (selected files, max files, tool mode).
-// Use this for low-level state access, e.g. in context-aware UI.
-export function useFileSelectionState(): Pick {
- const { selectedFiles, maxFiles, isToolMode } = useFileSelection();
- return { selectedFiles, maxFiles, isToolMode };
-}
-
-// Returns computed values derived from file selection state.
-// Use this for file selection UI logic (e.g. disabling buttons when at limit).
-export function useFileSelectionComputed(): Pick {
- const { canSelectMore, isAtLimit, selectionCount, isMultiFileMode } = useFileSelection();
- return { canSelectMore, isAtLimit, selectionCount, isMultiFileMode };
-}
diff --git a/frontend/src/contexts/FilesModalContext.tsx b/frontend/src/contexts/FilesModalContext.tsx
index 25e6800a0..d7183eabf 100644
--- a/frontend/src/contexts/FilesModalContext.tsx
+++ b/frontend/src/contexts/FilesModalContext.tsx
@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
import { useFileHandler } from '../hooks/useFileHandler';
+import { FileMetadata } from '../types/file';
interface FilesModalContextType {
isFilesModalOpen: boolean;
@@ -7,6 +8,7 @@ interface FilesModalContextType {
closeFilesModal: () => void;
onFileSelect: (file: File) => void;
onFilesSelect: (files: File[]) => void;
+ onStoredFilesSelect: (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => void;
onModalClose?: () => void;
setOnModalClose: (callback: () => void) => void;
}
@@ -14,7 +16,7 @@ interface FilesModalContextType {
const FilesModalContext = createContext(null);
export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
- const { addToActiveFiles, addMultipleFiles } = useFileHandler();
+ const { addToActiveFiles, addMultipleFiles, addStoredFiles } = useFileHandler();
const [isFilesModalOpen, setIsFilesModalOpen] = useState(false);
const [onModalClose, setOnModalClose] = useState<(() => void) | undefined>();
@@ -37,19 +39,34 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
closeFilesModal();
}, [addMultipleFiles, closeFilesModal]);
+ const handleStoredFilesSelect = useCallback((filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => {
+ addStoredFiles(filesWithMetadata);
+ closeFilesModal();
+ }, [addStoredFiles, closeFilesModal]);
+
const setModalCloseCallback = useCallback((callback: () => void) => {
setOnModalClose(() => callback);
}, []);
- const contextValue: FilesModalContextType = {
+ const contextValue: FilesModalContextType = useMemo(() => ({
isFilesModalOpen,
openFilesModal,
closeFilesModal,
onFileSelect: handleFileSelect,
onFilesSelect: handleFilesSelect,
+ onStoredFilesSelect: handleStoredFilesSelect,
onModalClose,
setOnModalClose: setModalCloseCallback,
- };
+ }), [
+ isFilesModalOpen,
+ openFilesModal,
+ closeFilesModal,
+ handleFileSelect,
+ handleFilesSelect,
+ handleStoredFilesSelect,
+ onModalClose,
+ setModalCloseCallback,
+ ]);
return (
diff --git a/frontend/src/contexts/IndexedDBContext.tsx b/frontend/src/contexts/IndexedDBContext.tsx
new file mode 100644
index 000000000..a09070403
--- /dev/null
+++ b/frontend/src/contexts/IndexedDBContext.tsx
@@ -0,0 +1,207 @@
+/**
+ * IndexedDBContext - Clean persistence layer for file storage
+ * Integrates with FileContext to provide transparent file persistence
+ */
+
+import React, { createContext, useContext, useCallback, useRef } from 'react';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+import { fileStorage, StoredFile } from '../services/fileStorage';
+import { FileId } from '../types/fileContext';
+import { FileMetadata } from '../types/file';
+import { generateThumbnailForFile } from '../utils/thumbnailUtils';
+
+interface IndexedDBContextValue {
+ // Core CRUD operations
+ saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise;
+ loadFile: (fileId: FileId) => Promise;
+ loadMetadata: (fileId: FileId) => Promise;
+ deleteFile: (fileId: FileId) => Promise;
+
+ // Batch operations
+ loadAllMetadata: () => Promise;
+ deleteMultiple: (fileIds: FileId[]) => Promise;
+ clearAll: () => Promise;
+
+ // Utilities
+ getStorageStats: () => Promise<{ used: number; available: number; fileCount: number }>;
+ updateThumbnail: (fileId: FileId, thumbnail: string) => Promise;
+}
+
+const IndexedDBContext = createContext(null);
+
+interface IndexedDBProviderProps {
+ children: React.ReactNode;
+}
+
+export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
+ // LRU File cache to avoid repeated ArrayBufferβFile conversions
+ const fileCache = useRef(new Map());
+ const MAX_CACHE_SIZE = 50; // Maximum number of files to cache
+
+ // LRU cache management
+ const evictLRUEntries = useCallback(() => {
+ if (fileCache.current.size <= MAX_CACHE_SIZE) return;
+
+ // Convert to array and sort by last accessed time (oldest first)
+ const entries = Array.from(fileCache.current.entries())
+ .sort(([, a], [, b]) => a.lastAccessed - b.lastAccessed);
+
+ // Remove the least recently used entries
+ const toRemove = entries.slice(0, fileCache.current.size - MAX_CACHE_SIZE);
+ toRemove.forEach(([fileId]) => {
+ fileCache.current.delete(fileId);
+ });
+
+ if (DEBUG) console.log(`ποΈ Evicted ${toRemove.length} LRU cache entries`);
+ }, []);
+
+ const saveFile = useCallback(async (file: File, fileId: FileId, existingThumbnail?: string): Promise => {
+ // Use existing thumbnail or generate new one if none provided
+ const thumbnail = existingThumbnail || await generateThumbnailForFile(file);
+
+ // Store in IndexedDB
+ const storedFile = await fileStorage.storeFile(file, fileId, thumbnail);
+
+ // Cache the file object for immediate reuse
+ fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
+ evictLRUEntries();
+
+ // Return metadata
+ return {
+ id: fileId,
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ lastModified: file.lastModified,
+ thumbnail
+ };
+ }, []);
+
+ const loadFile = useCallback(async (fileId: FileId): Promise => {
+ // Check cache first
+ const cached = fileCache.current.get(fileId);
+ if (cached) {
+ // Update last accessed time for LRU
+ cached.lastAccessed = Date.now();
+ return cached.file;
+ }
+
+ // Load from IndexedDB
+ const storedFile = await fileStorage.getFile(fileId);
+ if (!storedFile) return null;
+
+ // Reconstruct File object
+ const file = new File([storedFile.data], storedFile.name, {
+ type: storedFile.type,
+ lastModified: storedFile.lastModified
+ });
+
+ // Cache for future use with LRU eviction
+ fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
+ evictLRUEntries();
+
+ return file;
+ }, [evictLRUEntries]);
+
+ const loadMetadata = useCallback(async (fileId: FileId): Promise => {
+ // Try to get from cache first (no IndexedDB hit)
+ const cached = fileCache.current.get(fileId);
+ if (cached) {
+ const file = cached.file;
+ return {
+ id: fileId,
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ lastModified: file.lastModified
+ };
+ }
+
+ // Load metadata from IndexedDB (efficient - no data field)
+ const metadata = await fileStorage.getAllFileMetadata();
+ const fileMetadata = metadata.find(m => m.id === fileId);
+
+ if (!fileMetadata) return null;
+
+ return {
+ id: fileMetadata.id,
+ name: fileMetadata.name,
+ type: fileMetadata.type,
+ size: fileMetadata.size,
+ lastModified: fileMetadata.lastModified,
+ thumbnail: fileMetadata.thumbnail
+ };
+ }, []);
+
+ const deleteFile = useCallback(async (fileId: FileId): Promise => {
+ // Remove from cache
+ fileCache.current.delete(fileId);
+
+ // Remove from IndexedDB
+ await fileStorage.deleteFile(fileId);
+ }, []);
+
+ const loadAllMetadata = useCallback(async (): Promise => {
+ const metadata = await fileStorage.getAllFileMetadata();
+
+ return metadata.map(m => ({
+ id: m.id,
+ name: m.name,
+ type: m.type,
+ size: m.size,
+ lastModified: m.lastModified,
+ thumbnail: m.thumbnail
+ }));
+ }, []);
+
+ const deleteMultiple = useCallback(async (fileIds: FileId[]): Promise => {
+ // Remove from cache
+ fileIds.forEach(id => fileCache.current.delete(id));
+
+ // Remove from IndexedDB in parallel
+ await Promise.all(fileIds.map(id => fileStorage.deleteFile(id)));
+ }, []);
+
+ const clearAll = useCallback(async (): Promise => {
+ // Clear cache
+ fileCache.current.clear();
+
+ // Clear IndexedDB
+ await fileStorage.clearAll();
+ }, []);
+
+ const getStorageStats = useCallback(async () => {
+ return await fileStorage.getStorageStats();
+ }, []);
+
+ const updateThumbnail = useCallback(async (fileId: FileId, thumbnail: string): Promise => {
+ return await fileStorage.updateThumbnail(fileId, thumbnail);
+ }, []);
+
+ const value: IndexedDBContextValue = {
+ saveFile,
+ loadFile,
+ loadMetadata,
+ deleteFile,
+ loadAllMetadata,
+ deleteMultiple,
+ clearAll,
+ getStorageStats,
+ updateThumbnail
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export function useIndexedDB() {
+ const context = useContext(IndexedDBContext);
+ if (!context) {
+ throw new Error('useIndexedDB must be used within an IndexedDBProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/NavigationContext.tsx b/frontend/src/contexts/NavigationContext.tsx
new file mode 100644
index 000000000..c85eef158
--- /dev/null
+++ b/frontend/src/contexts/NavigationContext.tsx
@@ -0,0 +1,231 @@
+import React, { createContext, useContext, useReducer, useCallback } from 'react';
+import { useNavigationUrlSync } from '../hooks/useUrlSync';
+
+/**
+ * NavigationContext - Complete navigation management system
+ *
+ * Handles navigation modes, navigation guards for unsaved changes,
+ * and breadcrumb/history navigation. Separated from FileContext to
+ * maintain clear separation of concerns.
+ */
+
+// Navigation mode types - complete list to match fileContext.ts
+export type ModeType =
+ | 'viewer'
+ | 'pageEditor'
+ | 'fileEditor'
+ | 'merge'
+ | 'split'
+ | 'compress'
+ | 'ocr'
+ | 'convert'
+ | 'sanitize'
+ | 'addPassword'
+ | 'changePermissions'
+ | 'addWatermark'
+ | 'removePassword'
+ | 'single-large-page'
+ | 'repair'
+ | 'unlockPdfForms'
+ | 'removeCertificateSign';
+
+// Navigation state
+interface NavigationState {
+ currentMode: ModeType;
+ hasUnsavedChanges: boolean;
+ pendingNavigation: (() => void) | null;
+ showNavigationWarning: boolean;
+}
+
+// Navigation actions
+type NavigationAction =
+ | { type: 'SET_MODE'; payload: { mode: ModeType } }
+ | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
+ | { type: 'SET_PENDING_NAVIGATION'; payload: { navigationFn: (() => void) | null } }
+ | { type: 'SHOW_NAVIGATION_WARNING'; payload: { show: boolean } };
+
+// Navigation reducer
+const navigationReducer = (state: NavigationState, action: NavigationAction): NavigationState => {
+ switch (action.type) {
+ case 'SET_MODE':
+ return { ...state, currentMode: action.payload.mode };
+
+ case 'SET_UNSAVED_CHANGES':
+ return { ...state, hasUnsavedChanges: action.payload.hasChanges };
+
+ case 'SET_PENDING_NAVIGATION':
+ return { ...state, pendingNavigation: action.payload.navigationFn };
+
+ case 'SHOW_NAVIGATION_WARNING':
+ return { ...state, showNavigationWarning: action.payload.show };
+
+ default:
+ return state;
+ }
+};
+
+// Initial state
+const initialState: NavigationState = {
+ currentMode: 'pageEditor',
+ hasUnsavedChanges: false,
+ pendingNavigation: null,
+ showNavigationWarning: false
+};
+
+// Navigation context actions interface
+export interface NavigationContextActions {
+ setMode: (mode: ModeType) => void;
+ setHasUnsavedChanges: (hasChanges: boolean) => void;
+ showNavigationWarning: (show: boolean) => void;
+ requestNavigation: (navigationFn: () => void) => void;
+ confirmNavigation: () => void;
+ cancelNavigation: () => void;
+}
+
+// Split context values
+export interface NavigationContextStateValue {
+ currentMode: ModeType;
+ hasUnsavedChanges: boolean;
+ pendingNavigation: (() => void) | null;
+ showNavigationWarning: boolean;
+}
+
+export interface NavigationContextActionsValue {
+ actions: NavigationContextActions;
+}
+
+// Create contexts
+const NavigationStateContext = createContext(undefined);
+const NavigationActionsContext = createContext(undefined);
+
+// Provider component
+export const NavigationProvider: React.FC<{
+ children: React.ReactNode;
+ enableUrlSync?: boolean;
+}> = ({ children, enableUrlSync = true }) => {
+ const [state, dispatch] = useReducer(navigationReducer, initialState);
+
+ const actions: NavigationContextActions = {
+ setMode: useCallback((mode: ModeType) => {
+ dispatch({ type: 'SET_MODE', payload: { mode } });
+ }, []),
+
+ setHasUnsavedChanges: useCallback((hasChanges: boolean) => {
+ dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
+ }, []),
+
+ showNavigationWarning: useCallback((show: boolean) => {
+ dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show } });
+ }, []),
+
+ requestNavigation: useCallback((navigationFn: () => void) => {
+ // If no unsaved changes, navigate immediately
+ if (!state.hasUnsavedChanges) {
+ navigationFn();
+ return;
+ }
+
+ // Otherwise, store the navigation and show warning
+ dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn } });
+ dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+ }, [state.hasUnsavedChanges]),
+
+ confirmNavigation: useCallback(() => {
+ // Execute pending navigation
+ if (state.pendingNavigation) {
+ state.pendingNavigation();
+ }
+
+ // Clear navigation state
+ dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
+ dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
+ }, [state.pendingNavigation]),
+
+ cancelNavigation: useCallback(() => {
+ // Clear navigation without executing
+ dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
+ dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
+ }, [])
+ };
+
+ const stateValue: NavigationContextStateValue = {
+ currentMode: state.currentMode,
+ hasUnsavedChanges: state.hasUnsavedChanges,
+ pendingNavigation: state.pendingNavigation,
+ showNavigationWarning: state.showNavigationWarning
+ };
+
+ const actionsValue: NavigationContextActionsValue = {
+ actions
+ };
+
+ // Enable URL synchronization
+ useNavigationUrlSync(state.currentMode, actions.setMode, enableUrlSync);
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+// Navigation hooks
+export const useNavigationState = () => {
+ const context = useContext(NavigationStateContext);
+ if (context === undefined) {
+ throw new Error('useNavigationState must be used within NavigationProvider');
+ }
+ return context;
+};
+
+export const useNavigationActions = () => {
+ const context = useContext(NavigationActionsContext);
+ if (context === undefined) {
+ throw new Error('useNavigationActions must be used within NavigationProvider');
+ }
+ return context;
+};
+
+// Combined hook for convenience
+export const useNavigation = () => {
+ const state = useNavigationState();
+ const { actions } = useNavigationActions();
+ return { ...state, ...actions };
+};
+
+// Navigation guard hook (equivalent to old useFileNavigation)
+export const useNavigationGuard = () => {
+ const state = useNavigationState();
+ const { actions } = useNavigationActions();
+
+ return {
+ pendingNavigation: state.pendingNavigation,
+ showNavigationWarning: state.showNavigationWarning,
+ hasUnsavedChanges: state.hasUnsavedChanges,
+ requestNavigation: actions.requestNavigation,
+ confirmNavigation: actions.confirmNavigation,
+ cancelNavigation: actions.cancelNavigation,
+ setHasUnsavedChanges: actions.setHasUnsavedChanges,
+ setShowNavigationWarning: actions.showNavigationWarning
+ };
+};
+
+// Utility functions for mode handling
+export const isValidMode = (mode: string): mode is ModeType => {
+ const validModes: ModeType[] = [
+ 'viewer', 'pageEditor', 'fileEditor', 'merge', 'split',
+ 'compress', 'ocr', 'convert', 'addPassword', 'changePermissions', 'sanitize'
+ ];
+ return validModes.includes(mode as ModeType);
+};
+
+export const getDefaultMode = (): ModeType => 'pageEditor';
+
+// TODO: This will be expanded for URL-based routing system
+// - URL parsing utilities
+// - Route definitions
+// - Navigation hooks with URL sync
+// - History management
+// - Breadcrumb restoration from URL params
\ No newline at end of file
diff --git a/frontend/src/contexts/SidebarContext.tsx b/frontend/src/contexts/SidebarContext.tsx
index f09815c5c..64315fd45 100644
--- a/frontend/src/contexts/SidebarContext.tsx
+++ b/frontend/src/contexts/SidebarContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef } from 'react';
+import React, { createContext, useContext, useState, useRef, useMemo } from 'react';
import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from '../types/sidebar';
const SidebarContext = createContext(undefined);
@@ -12,24 +12,24 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
const [readerMode, setReaderMode] = useState(false);
- const sidebarState: SidebarState = {
+ const sidebarState: SidebarState = useMemo(() => ({
sidebarsVisible,
leftPanelView,
readerMode,
- };
+ }), [sidebarsVisible, leftPanelView, readerMode]);
- const sidebarRefs: SidebarRefs = {
+ const sidebarRefs: SidebarRefs = useMemo(() => ({
quickAccessRef,
toolPanelRef,
- };
+ }), [quickAccessRef, toolPanelRef]);
- const contextValue: SidebarContextValue = {
+ const contextValue: SidebarContextValue = useMemo(() => ({
sidebarState,
sidebarRefs,
setSidebarsVisible,
setLeftPanelView,
setReaderMode,
- };
+ }), [sidebarState, sidebarRefs, setSidebarsVisible, setLeftPanelView, setReaderMode]);
return (
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
index 637906a22..4ca66e61c 100644
--- a/frontend/src/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -7,6 +7,7 @@ import React, { createContext, useContext, useReducer, useCallback, useMemo } fr
import { useToolManagement } from '../hooks/useToolManagement';
import { PageEditorFunctions } from '../types/pageEditor';
import { ToolRegistryEntry } from '../data/toolsTaxonomy';
+import { useToolWorkflowUrlSync } from '../hooks/useUrlSync';
// State interface
interface ToolWorkflowState {
@@ -101,9 +102,11 @@ interface ToolWorkflowProviderProps {
children: React.ReactNode;
/** Handler for view changes (passed from parent) */
onViewChange?: (view: string) => void;
+ /** Enable URL synchronization for tool selection */
+ enableUrlSync?: boolean;
}
-export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowProviderProps) {
+export function ToolWorkflowProvider({ children, onViewChange, enableUrlSync = true }: ToolWorkflowProviderProps) {
const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
// Tool management hook
@@ -182,6 +185,9 @@ export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowPro
[state.sidebarsVisible, state.readerMode]
);
+ // Enable URL synchronization for tool selection
+ useToolWorkflowUrlSync(selectedToolKey, selectTool, clearToolSelection, enableUrlSync);
+
// Simple context value with basic memoization
const contextValue = useMemo((): ToolWorkflowContextValue => ({
// State
diff --git a/frontend/src/contexts/file/FileReducer.ts b/frontend/src/contexts/file/FileReducer.ts
new file mode 100644
index 000000000..0fbec6da0
--- /dev/null
+++ b/frontend/src/contexts/file/FileReducer.ts
@@ -0,0 +1,240 @@
+/**
+ * FileContext reducer - Pure state management for file operations
+ */
+
+import {
+ FileContextState,
+ FileContextAction,
+ FileId,
+ FileRecord
+} from '../../types/fileContext';
+
+// Initial state
+export const initialFileContextState: FileContextState = {
+ files: {
+ ids: [],
+ byId: {}
+ },
+ pinnedFiles: new Set(),
+ ui: {
+ selectedFileIds: [],
+ selectedPageNumbers: [],
+ isProcessing: false,
+ processingProgress: 0,
+ hasUnsavedChanges: false
+ }
+};
+
+// Pure reducer function
+export function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
+ switch (action.type) {
+ case 'ADD_FILES': {
+ const { fileRecords } = action.payload;
+ const newIds: FileId[] = [];
+ const newById: Record = { ...state.files.byId };
+
+ fileRecords.forEach(record => {
+ // Only add if not already present (dedupe by stable ID)
+ if (!newById[record.id]) {
+ newIds.push(record.id);
+ newById[record.id] = record;
+ }
+ });
+
+ return {
+ ...state,
+ files: {
+ ids: [...state.files.ids, ...newIds],
+ byId: newById
+ }
+ };
+ }
+
+ case 'REMOVE_FILES': {
+ const { fileIds } = action.payload;
+ const remainingIds = state.files.ids.filter(id => !fileIds.includes(id));
+ const newById = { ...state.files.byId };
+
+ // Remove files from state (resource cleanup handled by lifecycle manager)
+ fileIds.forEach(id => {
+ delete newById[id];
+ });
+
+ // Clear selections that reference removed files
+ const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !fileIds.includes(id));
+
+ return {
+ ...state,
+ files: {
+ ids: remainingIds,
+ byId: newById
+ },
+ ui: {
+ ...state.ui,
+ selectedFileIds: validSelectedFileIds
+ }
+ };
+ }
+
+ case 'UPDATE_FILE_RECORD': {
+ const { id, updates } = action.payload;
+ const existingRecord = state.files.byId[id];
+
+ if (!existingRecord) {
+ return state; // File doesn't exist, no-op
+ }
+
+ return {
+ ...state,
+ files: {
+ ...state.files,
+ byId: {
+ ...state.files.byId,
+ [id]: {
+ ...existingRecord,
+ ...updates
+ }
+ }
+ }
+ };
+ }
+
+ case 'REORDER_FILES': {
+ const { orderedFileIds } = action.payload;
+
+ // Validate that all IDs exist in current state
+ const validIds = orderedFileIds.filter(id => state.files.byId[id]);
+
+ return {
+ ...state,
+ files: {
+ ...state.files,
+ ids: validIds
+ }
+ };
+ }
+
+ case 'SET_SELECTED_FILES': {
+ const { fileIds } = action.payload;
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ selectedFileIds: fileIds
+ }
+ };
+ }
+
+ case 'SET_SELECTED_PAGES': {
+ const { pageNumbers } = action.payload;
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ selectedPageNumbers: pageNumbers
+ }
+ };
+ }
+
+ case 'CLEAR_SELECTIONS': {
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ selectedFileIds: [],
+ selectedPageNumbers: []
+ }
+ };
+ }
+
+ case 'SET_PROCESSING': {
+ const { isProcessing, progress } = action.payload;
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ isProcessing,
+ processingProgress: progress
+ }
+ };
+ }
+
+ case 'SET_UNSAVED_CHANGES': {
+ return {
+ ...state,
+ ui: {
+ ...state.ui,
+ hasUnsavedChanges: action.payload.hasChanges
+ }
+ };
+ }
+
+ case 'PIN_FILE': {
+ const { fileId } = action.payload;
+ const newPinnedFiles = new Set(state.pinnedFiles);
+ newPinnedFiles.add(fileId);
+
+ return {
+ ...state,
+ pinnedFiles: newPinnedFiles
+ };
+ }
+
+ case 'UNPIN_FILE': {
+ const { fileId } = action.payload;
+ const newPinnedFiles = new Set(state.pinnedFiles);
+ newPinnedFiles.delete(fileId);
+
+ return {
+ ...state,
+ pinnedFiles: newPinnedFiles
+ };
+ }
+
+ case 'CONSUME_FILES': {
+ const { inputFileIds, outputFileRecords } = action.payload;
+
+ // Only remove unpinned input files
+ const unpinnedInputIds = inputFileIds.filter(id => !state.pinnedFiles.has(id));
+ const remainingIds = state.files.ids.filter(id => !unpinnedInputIds.includes(id));
+
+ // Remove unpinned files from state
+ const newById = { ...state.files.byId };
+ unpinnedInputIds.forEach(id => {
+ delete newById[id];
+ });
+
+ // Add output files
+ const outputIds: FileId[] = [];
+ outputFileRecords.forEach(record => {
+ if (!newById[record.id]) {
+ outputIds.push(record.id);
+ newById[record.id] = record;
+ }
+ });
+
+ // Clear selections that reference removed files
+ const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !unpinnedInputIds.includes(id));
+
+ return {
+ ...state,
+ files: {
+ ids: [...remainingIds, ...outputIds],
+ byId: newById
+ },
+ ui: {
+ ...state.ui,
+ selectedFileIds: validSelectedFileIds
+ }
+ };
+ }
+
+ case 'RESET_CONTEXT': {
+ // Reset UI state to clean slate (resource cleanup handled by lifecycle manager)
+ return { ...initialFileContextState };
+ }
+
+ default:
+ return state;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/file/contexts.ts b/frontend/src/contexts/file/contexts.ts
new file mode 100644
index 000000000..2474f1094
--- /dev/null
+++ b/frontend/src/contexts/file/contexts.ts
@@ -0,0 +1,13 @@
+/**
+ * React contexts for file state and actions
+ */
+
+import { createContext } from 'react';
+import { FileContextStateValue, FileContextActionsValue } from '../../types/fileContext';
+
+// Split contexts for performance
+export const FileStateContext = createContext(undefined);
+export const FileActionsContext = createContext(undefined);
+
+// Export types for use in hooks
+export type { FileContextStateValue, FileContextActionsValue };
\ No newline at end of file
diff --git a/frontend/src/contexts/file/fileActions.ts b/frontend/src/contexts/file/fileActions.ts
new file mode 100644
index 000000000..948b4f011
--- /dev/null
+++ b/frontend/src/contexts/file/fileActions.ts
@@ -0,0 +1,370 @@
+/**
+ * File actions - Unified file operations with single addFiles helper
+ */
+
+import {
+ FileId,
+ FileRecord,
+ FileContextAction,
+ FileContextState,
+ toFileRecord,
+ createFileId,
+ createQuickKey
+} from '../../types/fileContext';
+import { FileMetadata } from '../../types/file';
+import { generateThumbnailWithMetadata } from '../../utils/thumbnailUtils';
+import { FileLifecycleManager } from './lifecycle';
+import { fileProcessingService } from '../../services/fileProcessingService';
+import { buildQuickKeySet, buildQuickKeySetFromMetadata } from './fileSelectors';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+
+/**
+ * Simple mutex to prevent race conditions in addFiles
+ */
+class SimpleMutex {
+ private locked = false;
+ private queue: Array<() => void> = [];
+
+ async lock(): Promise {
+ if (!this.locked) {
+ this.locked = true;
+ return Promise.resolve();
+ }
+
+ return new Promise((resolve) => {
+ this.queue.push(() => {
+ this.locked = true;
+ resolve();
+ });
+ });
+ }
+
+ unlock(): void {
+ if (this.queue.length > 0) {
+ const next = this.queue.shift()!;
+ next();
+ } else {
+ this.locked = false;
+ }
+ }
+}
+
+// Global mutex for addFiles operations
+const addFilesMutex = new SimpleMutex();
+
+/**
+ * Helper to create ProcessedFile metadata structure
+ */
+export function createProcessedFile(pageCount: number, thumbnail?: string) {
+ return {
+ totalPages: pageCount,
+ pages: Array.from({ length: pageCount }, (_, index) => ({
+ pageNumber: index + 1,
+ thumbnail: index === 0 ? thumbnail : undefined, // Only first page gets thumbnail initially
+ rotation: 0,
+ splitBefore: false
+ })),
+ thumbnailUrl: thumbnail,
+ lastProcessed: Date.now()
+ };
+}
+
+/**
+ * File addition types
+ */
+type AddFileKind = 'raw' | 'processed' | 'stored';
+
+interface AddFileOptions {
+ // For 'raw' files
+ files?: File[];
+
+ // For 'processed' files
+ filesWithThumbnails?: Array<{ file: File; thumbnail?: string; pageCount?: number }>;
+
+ // For 'stored' files
+ filesWithMetadata?: Array<{ file: File; originalId: FileId; metadata: FileMetadata }>;
+}
+
+/**
+ * Unified file addition helper - replaces addFiles/addProcessedFiles/addStoredFiles
+ */
+export async function addFiles(
+ kind: AddFileKind,
+ options: AddFileOptions,
+ stateRef: React.MutableRefObject,
+ filesRef: React.MutableRefObject>,
+ dispatch: React.Dispatch,
+ lifecycleManager: FileLifecycleManager
+): Promise> {
+ // Acquire mutex to prevent race conditions
+ await addFilesMutex.lock();
+
+ try {
+ const fileRecords: FileRecord[] = [];
+ const addedFiles: Array<{ file: File; id: FileId; thumbnail?: string }> = [];
+
+ // Build quickKey lookup from existing files for deduplication
+ const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
+ if (DEBUG) console.log(`π addFiles(${kind}): Existing quickKeys for deduplication:`, Array.from(existingQuickKeys));
+
+ switch (kind) {
+ case 'raw': {
+ const { files = [] } = options;
+ if (DEBUG) console.log(`π addFiles(raw): Adding ${files.length} files with immediate thumbnail generation`);
+
+ for (const file of files) {
+ const quickKey = createQuickKey(file);
+
+ // Soft deduplication: Check if file already exists by metadata
+ if (existingQuickKeys.has(quickKey)) {
+ if (DEBUG) console.log(`π Skipping duplicate file: ${file.name} (quickKey: ${quickKey})`);
+ continue;
+ }
+ if (DEBUG) console.log(`π Adding new file: ${file.name} (quickKey: ${quickKey})`);
+
+ const fileId = createFileId();
+ filesRef.current.set(fileId, file);
+
+ // Generate thumbnail and page count immediately
+ let thumbnail: string | undefined;
+ let pageCount: number = 1;
+
+ // Route based on file type - PDFs through full metadata pipeline, non-PDFs through simple path
+ if (file.type.startsWith('application/pdf')) {
+ try {
+ if (DEBUG) console.log(`π Generating PDF metadata for ${file.name}`);
+ const result = await generateThumbnailWithMetadata(file);
+ thumbnail = result.thumbnail;
+ pageCount = result.pageCount;
+ if (DEBUG) console.log(`π Generated PDF metadata for ${file.name}: ${pageCount} pages, thumbnail: SUCCESS`);
+ } catch (error) {
+ if (DEBUG) console.warn(`π Failed to generate PDF metadata for ${file.name}:`, error);
+ }
+ } else {
+ // Non-PDF files: simple thumbnail generation, no page count
+ try {
+ if (DEBUG) console.log(`π Generating simple thumbnail for non-PDF file ${file.name}`);
+ const { generateThumbnailForFile } = await import('../../utils/thumbnailUtils');
+ thumbnail = await generateThumbnailForFile(file);
+ pageCount = 0; // Non-PDFs have no page count
+ if (DEBUG) console.log(`π Generated simple thumbnail for ${file.name}: no page count, thumbnail: SUCCESS`);
+ } catch (error) {
+ if (DEBUG) console.warn(`π Failed to generate simple thumbnail for ${file.name}:`, error);
+ }
+ }
+
+ // Create record with immediate thumbnail and page metadata
+ const record = toFileRecord(file, fileId);
+ if (thumbnail) {
+ record.thumbnailUrl = thumbnail;
+ // Track blob URLs for cleanup (images return blob URLs that need revocation)
+ if (thumbnail.startsWith('blob:')) {
+ lifecycleManager.trackBlobUrl(thumbnail);
+ }
+ }
+
+ // Create initial processedFile metadata with page count
+ if (pageCount > 0) {
+ record.processedFile = createProcessedFile(pageCount, thumbnail);
+ if (DEBUG) console.log(`π addFiles(raw): Created initial processedFile metadata for ${file.name} with ${pageCount} pages`);
+ }
+
+ existingQuickKeys.add(quickKey);
+ fileRecords.push(record);
+ addedFiles.push({ file, id: fileId, thumbnail });
+ }
+ break;
+ }
+
+ case 'processed': {
+ const { filesWithThumbnails = [] } = options;
+ if (DEBUG) console.log(`π addFiles(processed): Adding ${filesWithThumbnails.length} processed files with pre-existing thumbnails`);
+
+ for (const { file, thumbnail, pageCount = 1 } of filesWithThumbnails) {
+ const quickKey = createQuickKey(file);
+
+ if (existingQuickKeys.has(quickKey)) {
+ if (DEBUG) console.log(`π Skipping duplicate processed file: ${file.name}`);
+ continue;
+ }
+
+ const fileId = createFileId();
+ filesRef.current.set(fileId, file);
+
+ const record = toFileRecord(file, fileId);
+ if (thumbnail) {
+ record.thumbnailUrl = thumbnail;
+ // Track blob URLs for cleanup (images return blob URLs that need revocation)
+ if (thumbnail.startsWith('blob:')) {
+ lifecycleManager.trackBlobUrl(thumbnail);
+ }
+ }
+
+ // Create processedFile with provided metadata
+ if (pageCount > 0) {
+ record.processedFile = createProcessedFile(pageCount, thumbnail);
+ if (DEBUG) console.log(`π addFiles(processed): Created initial processedFile metadata for ${file.name} with ${pageCount} pages`);
+ }
+
+ existingQuickKeys.add(quickKey);
+ fileRecords.push(record);
+ addedFiles.push({ file, id: fileId, thumbnail });
+ }
+ break;
+ }
+
+ case 'stored': {
+ const { filesWithMetadata = [] } = options;
+ if (DEBUG) console.log(`π addFiles(stored): Restoring ${filesWithMetadata.length} files from storage with existing metadata`);
+
+ for (const { file, originalId, metadata } of filesWithMetadata) {
+ const quickKey = createQuickKey(file);
+
+ if (existingQuickKeys.has(quickKey)) {
+ if (DEBUG) console.log(`π Skipping duplicate stored file: ${file.name} (quickKey: ${quickKey})`);
+ continue;
+ }
+ if (DEBUG) console.log(`π Adding stored file: ${file.name} (quickKey: ${quickKey})`);
+
+ // Try to preserve original ID, but generate new if it conflicts
+ let fileId = originalId;
+ if (filesRef.current.has(originalId)) {
+ fileId = createFileId();
+ if (DEBUG) console.log(`π ID conflict for stored file ${file.name}, using new ID: ${fileId}`);
+ }
+
+ filesRef.current.set(fileId, file);
+
+ const record = toFileRecord(file, fileId);
+
+ // Generate processedFile metadata for stored files
+ let pageCount: number = 1;
+
+ // Only process PDFs through PDF worker manager, non-PDFs have no page count
+ if (file.type.startsWith('application/pdf')) {
+ try {
+ if (DEBUG) console.log(`π addFiles(stored): Generating PDF metadata for stored file ${file.name}`);
+
+ // Get page count from PDF
+ const arrayBuffer = await file.arrayBuffer();
+ const { pdfWorkerManager } = await import('../../services/pdfWorkerManager');
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+ pageCount = pdf.numPages;
+ pdfWorkerManager.destroyDocument(pdf);
+
+ if (DEBUG) console.log(`π addFiles(stored): Found ${pageCount} pages in PDF ${file.name}`);
+ } catch (error) {
+ if (DEBUG) console.warn(`π addFiles(stored): Failed to generate PDF metadata for ${file.name}:`, error);
+ }
+ } else {
+ pageCount = 0; // Non-PDFs have no page count
+ if (DEBUG) console.log(`π addFiles(stored): Non-PDF file ${file.name}, no page count`);
+ }
+
+ // Restore metadata from storage
+ if (metadata.thumbnail) {
+ record.thumbnailUrl = metadata.thumbnail;
+ // Track blob URLs for cleanup (images return blob URLs that need revocation)
+ if (metadata.thumbnail.startsWith('blob:')) {
+ lifecycleManager.trackBlobUrl(metadata.thumbnail);
+ }
+ }
+
+ // Create processedFile metadata with correct page count
+ if (pageCount > 0) {
+ record.processedFile = createProcessedFile(pageCount, metadata.thumbnail);
+ if (DEBUG) console.log(`π addFiles(stored): Created processedFile metadata for ${file.name} with ${pageCount} pages`);
+ }
+
+ existingQuickKeys.add(quickKey);
+ fileRecords.push(record);
+ addedFiles.push({ file, id: fileId, thumbnail: metadata.thumbnail });
+
+ }
+ break;
+ }
+ }
+
+ // Dispatch ADD_FILES action if we have new files
+ if (fileRecords.length > 0) {
+ dispatch({ type: 'ADD_FILES', payload: { fileRecords } });
+ if (DEBUG) console.log(`π addFiles(${kind}): Successfully added ${fileRecords.length} files`);
+ }
+
+ return addedFiles;
+ } finally {
+ // Always release mutex even if error occurs
+ addFilesMutex.unlock();
+ }
+}
+
+/**
+ * Consume files helper - replace unpinned input files with output files
+ */
+export async function consumeFiles(
+ inputFileIds: FileId[],
+ outputFiles: File[],
+ stateRef: React.MutableRefObject,
+ filesRef: React.MutableRefObject>,
+ dispatch: React.Dispatch
+): Promise {
+ if (DEBUG) console.log(`π consumeFiles: Processing ${inputFileIds.length} input files, ${outputFiles.length} output files`);
+
+ // Process output files through the 'processed' path to generate thumbnails
+ const outputFileRecords = await Promise.all(
+ outputFiles.map(async (file) => {
+ const fileId = createFileId();
+ filesRef.current.set(fileId, file);
+
+ // Generate thumbnail and page count for output file
+ let thumbnail: string | undefined;
+ let pageCount: number = 1;
+
+ try {
+ if (DEBUG) console.log(`π consumeFiles: Generating thumbnail for output file ${file.name}`);
+ const result = await generateThumbnailWithMetadata(file);
+ thumbnail = result.thumbnail;
+ pageCount = result.pageCount;
+ } catch (error) {
+ if (DEBUG) console.warn(`π consumeFiles: Failed to generate thumbnail for output file ${file.name}:`, error);
+ }
+
+ const record = toFileRecord(file, fileId);
+ if (thumbnail) {
+ record.thumbnailUrl = thumbnail;
+ }
+
+ if (pageCount > 0) {
+ record.processedFile = createProcessedFile(pageCount, thumbnail);
+ }
+
+ return record;
+ })
+ );
+
+ // Dispatch the consume action
+ dispatch({
+ type: 'CONSUME_FILES',
+ payload: {
+ inputFileIds,
+ outputFileRecords
+ }
+ });
+
+ if (DEBUG) console.log(`π consumeFiles: Successfully consumed files - removed ${inputFileIds.length} inputs, added ${outputFileRecords.length} outputs`);
+}
+
+/**
+ * Action factory functions
+ */
+export const createFileActions = (dispatch: React.Dispatch) => ({
+ setSelectedFiles: (fileIds: FileId[]) => dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds } }),
+ setSelectedPages: (pageNumbers: number[]) => dispatch({ type: 'SET_SELECTED_PAGES', payload: { pageNumbers } }),
+ clearSelections: () => dispatch({ type: 'CLEAR_SELECTIONS' }),
+ setProcessing: (isProcessing: boolean, progress = 0) => dispatch({ type: 'SET_PROCESSING', payload: { isProcessing, progress } }),
+ setHasUnsavedChanges: (hasChanges: boolean) => dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } }),
+ pinFile: (fileId: FileId) => dispatch({ type: 'PIN_FILE', payload: { fileId } }),
+ unpinFile: (fileId: FileId) => dispatch({ type: 'UNPIN_FILE', payload: { fileId } }),
+ resetContext: () => dispatch({ type: 'RESET_CONTEXT' })
+});
diff --git a/frontend/src/contexts/file/fileHooks.ts b/frontend/src/contexts/file/fileHooks.ts
new file mode 100644
index 000000000..19452958f
--- /dev/null
+++ b/frontend/src/contexts/file/fileHooks.ts
@@ -0,0 +1,193 @@
+/**
+ * Performant file hooks - Clean API using FileContext
+ */
+
+import { useContext, useMemo } from 'react';
+import {
+ FileStateContext,
+ FileActionsContext,
+ FileContextStateValue,
+ FileContextActionsValue
+} from './contexts';
+import { FileId, FileRecord } from '../../types/fileContext';
+
+/**
+ * Hook for accessing file state (will re-render on any state change)
+ * Use individual selector hooks below for better performance
+ */
+export function useFileState(): FileContextStateValue {
+ const context = useContext(FileStateContext);
+ if (!context) {
+ throw new Error('useFileState must be used within a FileContextProvider');
+ }
+ return context;
+}
+
+/**
+ * Hook for accessing file actions (stable - won't cause re-renders)
+ */
+export function useFileActions(): FileContextActionsValue {
+ const context = useContext(FileActionsContext);
+ if (!context) {
+ throw new Error('useFileActions must be used within a FileContextProvider');
+ }
+ return context;
+}
+
+/**
+ * Hook for current/primary file (first in list)
+ */
+export function useCurrentFile(): { file?: File; record?: FileRecord } {
+ const { state, selectors } = useFileState();
+
+ const primaryFileId = state.files.ids[0];
+ return useMemo(() => ({
+ file: primaryFileId ? selectors.getFile(primaryFileId) : undefined,
+ record: primaryFileId ? selectors.getFileRecord(primaryFileId) : undefined
+ }), [primaryFileId, selectors]);
+}
+
+/**
+ * Hook for file selection state and actions
+ */
+export function useFileSelection() {
+ const { state, selectors } = useFileState();
+ const { actions } = useFileActions();
+
+ // Memoize selected files to avoid recreating arrays
+ const selectedFiles = useMemo(() => {
+ return selectors.getSelectedFiles();
+ }, [state.ui.selectedFileIds, selectors]);
+
+ return useMemo(() => ({
+ selectedFiles,
+ selectedFileIds: state.ui.selectedFileIds,
+ selectedPageNumbers: state.ui.selectedPageNumbers,
+ setSelectedFiles: actions.setSelectedFiles,
+ setSelectedPages: actions.setSelectedPages,
+ clearSelections: actions.clearSelections
+ }), [
+ selectedFiles,
+ state.ui.selectedFileIds,
+ state.ui.selectedPageNumbers,
+ actions.setSelectedFiles,
+ actions.setSelectedPages,
+ actions.clearSelections
+ ]);
+}
+
+/**
+ * Hook for file management operations
+ */
+export function useFileManagement() {
+ const { actions } = useFileActions();
+
+ return useMemo(() => ({
+ addFiles: actions.addFiles,
+ removeFiles: actions.removeFiles,
+ clearAllFiles: actions.clearAllFiles,
+ updateFileRecord: actions.updateFileRecord,
+ reorderFiles: actions.reorderFiles
+ }), [actions]);
+}
+
+/**
+ * Hook for UI state
+ */
+export function useFileUI() {
+ const { state } = useFileState();
+ const { actions } = useFileActions();
+
+ return useMemo(() => ({
+ isProcessing: state.ui.isProcessing,
+ processingProgress: state.ui.processingProgress,
+ hasUnsavedChanges: state.ui.hasUnsavedChanges,
+ setProcessing: actions.setProcessing,
+ setUnsavedChanges: actions.setHasUnsavedChanges
+ }), [state.ui, actions]);
+}
+
+/**
+ * Hook for specific file by ID (optimized for individual file access)
+ */
+export function useFileRecord(fileId: FileId): { file?: File; record?: FileRecord } {
+ const { selectors } = useFileState();
+
+ return useMemo(() => ({
+ file: selectors.getFile(fileId),
+ record: selectors.getFileRecord(fileId)
+ }), [fileId, selectors]);
+}
+
+/**
+ * Hook for all files (use sparingly - causes re-renders on file list changes)
+ */
+export function useAllFiles(): { files: File[]; records: FileRecord[]; fileIds: FileId[] } {
+ const { state, selectors } = useFileState();
+
+ return useMemo(() => ({
+ files: selectors.getFiles(),
+ records: selectors.getFileRecords(),
+ fileIds: state.files.ids
+ }), [state.files.ids, selectors]);
+}
+
+/**
+ * Hook for selected files (optimized for selection-based UI)
+ */
+export function useSelectedFiles(): { files: File[]; records: FileRecord[]; fileIds: FileId[] } {
+ const { state, selectors } = useFileState();
+
+ return useMemo(() => ({
+ files: selectors.getSelectedFiles(),
+ records: selectors.getSelectedFileRecords(),
+ fileIds: state.ui.selectedFileIds
+ }), [state.ui.selectedFileIds, selectors]);
+}
+
+// Navigation management removed - moved to NavigationContext
+
+/**
+ * Primary API hook for file context operations
+ * Used by tools for core file context functionality
+ */
+export function useFileContext() {
+ const { state, selectors } = useFileState();
+ const { actions } = useFileActions();
+
+ return useMemo(() => ({
+ // Lifecycle management
+ trackBlobUrl: actions.trackBlobUrl,
+ scheduleCleanup: actions.scheduleCleanup,
+ setUnsavedChanges: actions.setHasUnsavedChanges,
+
+ // File management
+ addFiles: actions.addFiles,
+ consumeFiles: actions.consumeFiles,
+ recordOperation: (fileId: string, operation: any) => {}, // Operation tracking not implemented
+ markOperationApplied: (fileId: string, operationId: string) => {}, // Operation tracking not implemented
+ markOperationFailed: (fileId: string, operationId: string, error: string) => {}, // Operation tracking not implemented
+
+ // File ID lookup
+ findFileId: (file: File) => {
+ return state.files.ids.find(id => {
+ const record = state.files.byId[id];
+ return record &&
+ record.name === file.name &&
+ record.size === file.size &&
+ record.lastModified === file.lastModified;
+ });
+ },
+
+ // Pinned files
+ pinnedFiles: state.pinnedFiles,
+ pinFile: actions.pinFile,
+ unpinFile: actions.unpinFile,
+ isFilePinned: selectors.isFilePinned,
+
+ // Active files
+ activeFiles: selectors.getFiles()
+ }), [state, selectors, actions]);
+}
+
+
diff --git a/frontend/src/contexts/file/fileSelectors.ts b/frontend/src/contexts/file/fileSelectors.ts
new file mode 100644
index 000000000..5579aa3c7
--- /dev/null
+++ b/frontend/src/contexts/file/fileSelectors.ts
@@ -0,0 +1,130 @@
+/**
+ * File selectors - Pure functions for accessing file state
+ */
+
+import {
+ FileId,
+ FileRecord,
+ FileContextState,
+ FileContextSelectors
+} from '../../types/fileContext';
+
+/**
+ * Create stable selectors using stateRef and filesRef
+ */
+export function createFileSelectors(
+ stateRef: React.MutableRefObject,
+ filesRef: React.MutableRefObject>
+): FileContextSelectors {
+ return {
+ getFile: (id: FileId) => filesRef.current.get(id),
+
+ getFiles: (ids?: FileId[]) => {
+ const currentIds = ids || stateRef.current.files.ids;
+ return currentIds.map(id => filesRef.current.get(id)).filter(Boolean) as File[];
+ },
+
+ getFileRecord: (id: FileId) => stateRef.current.files.byId[id],
+
+ getFileRecords: (ids?: FileId[]) => {
+ const currentIds = ids || stateRef.current.files.ids;
+ return currentIds.map(id => stateRef.current.files.byId[id]).filter(Boolean);
+ },
+
+ getAllFileIds: () => stateRef.current.files.ids,
+
+ getSelectedFiles: () => {
+ return stateRef.current.ui.selectedFileIds
+ .map(id => filesRef.current.get(id))
+ .filter(Boolean) as File[];
+ },
+
+ getSelectedFileRecords: () => {
+ return stateRef.current.ui.selectedFileIds
+ .map(id => stateRef.current.files.byId[id])
+ .filter(Boolean);
+ },
+
+ // Pinned files selectors
+ getPinnedFileIds: () => {
+ return Array.from(stateRef.current.pinnedFiles);
+ },
+
+ getPinnedFiles: () => {
+ return Array.from(stateRef.current.pinnedFiles)
+ .map(id => filesRef.current.get(id))
+ .filter(Boolean) as File[];
+ },
+
+ getPinnedFileRecords: () => {
+ return Array.from(stateRef.current.pinnedFiles)
+ .map(id => stateRef.current.files.byId[id])
+ .filter(Boolean);
+ },
+
+ isFilePinned: (file: File) => {
+ // Find FileId by matching File object properties
+ const fileId = Object.keys(stateRef.current.files.byId).find(id => {
+ const storedFile = filesRef.current.get(id);
+ return storedFile &&
+ storedFile.name === file.name &&
+ storedFile.size === file.size &&
+ storedFile.lastModified === file.lastModified;
+ });
+ return fileId ? stateRef.current.pinnedFiles.has(fileId) : false;
+ },
+
+ // Stable signature for effects - prevents unnecessary re-renders
+ getFilesSignature: () => {
+ return stateRef.current.files.ids
+ .map(id => {
+ const record = stateRef.current.files.byId[id];
+ return record ? `${id}:${record.size}:${record.lastModified}` : '';
+ })
+ .join('|');
+ },
+
+ };
+}
+
+/**
+ * Helper for building quickKey sets for deduplication
+ */
+export function buildQuickKeySet(fileRecords: Record): Set {
+ const quickKeys = new Set();
+ Object.values(fileRecords).forEach(record => {
+ if (record.quickKey) {
+ quickKeys.add(record.quickKey);
+ }
+ });
+ return quickKeys;
+}
+
+/**
+ * Helper for building quickKey sets from IndexedDB metadata
+ */
+export function buildQuickKeySetFromMetadata(metadata: Array<{ name: string; size: number; lastModified: number }>): Set {
+ const quickKeys = new Set();
+ metadata.forEach(meta => {
+ // Format: name|size|lastModified (same as createQuickKey)
+ const quickKey = `${meta.name}|${meta.size}|${meta.lastModified}`;
+ quickKeys.add(quickKey);
+ });
+ return quickKeys;
+}
+
+/**
+ * Get primary file (first in list) - commonly used pattern
+ */
+export function getPrimaryFile(
+ stateRef: React.MutableRefObject,
+ filesRef: React.MutableRefObject>
+): { file?: File; record?: FileRecord } {
+ const primaryFileId = stateRef.current.files.ids[0];
+ if (!primaryFileId) return {};
+
+ return {
+ file: filesRef.current.get(primaryFileId),
+ record: stateRef.current.files.byId[primaryFileId]
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/contexts/file/lifecycle.ts b/frontend/src/contexts/file/lifecycle.ts
new file mode 100644
index 000000000..99b46495f
--- /dev/null
+++ b/frontend/src/contexts/file/lifecycle.ts
@@ -0,0 +1,190 @@
+/**
+ * File lifecycle management - Resource cleanup and memory management
+ */
+
+import { FileId, FileContextAction, FileRecord, ProcessedFilePage } from '../../types/fileContext';
+
+const DEBUG = process.env.NODE_ENV === 'development';
+
+/**
+ * Resource tracking and cleanup utilities
+ */
+export class FileLifecycleManager {
+ private cleanupTimers = new Map();
+ private blobUrls = new Set();
+ private fileGenerations = new Map(); // Generation tokens to prevent stale cleanup
+
+ constructor(
+ private filesRef: React.MutableRefObject>,
+ private dispatch: React.Dispatch
+ ) {}
+
+ /**
+ * Track blob URLs for cleanup
+ */
+ trackBlobUrl = (url: string): void => {
+ // Only track actual blob URLs to avoid trying to revoke other schemes
+ if (url.startsWith('blob:')) {
+ this.blobUrls.add(url);
+ }
+ };
+
+
+ /**
+ * Clean up resources for a specific file (with stateRef access for complete cleanup)
+ */
+ cleanupFile = (fileId: string, stateRef?: React.MutableRefObject): void => {
+ // Use comprehensive cleanup (same as removeFiles)
+ this.cleanupAllResourcesForFile(fileId, stateRef);
+
+ // Remove file from state
+ this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds: [fileId] } });
+ };
+
+ /**
+ * Clean up all files and resources
+ */
+ cleanupAllFiles = (): void => {
+ // Revoke all blob URLs
+ this.blobUrls.forEach(url => {
+ try {
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ // Ignore revocation errors
+ }
+ });
+ this.blobUrls.clear();
+
+ // Clear all cleanup timers and generations
+ this.cleanupTimers.forEach(timer => clearTimeout(timer));
+ this.cleanupTimers.clear();
+ this.fileGenerations.clear();
+
+ // Clear files ref
+ this.filesRef.current.clear();
+ };
+
+ /**
+ * Schedule delayed cleanup for a file with generation token to prevent stale cleanup
+ */
+ scheduleCleanup = (fileId: string, delay: number = 30000, stateRef?: React.MutableRefObject): void => {
+ // Cancel existing timer
+ const existingTimer = this.cleanupTimers.get(fileId);
+ if (existingTimer) {
+ clearTimeout(existingTimer);
+ this.cleanupTimers.delete(fileId);
+ }
+
+ // If delay is negative, just cancel (don't reschedule)
+ if (delay < 0) {
+ return;
+ }
+
+ // Increment generation for this file to invalidate any pending cleanup
+ const currentGen = (this.fileGenerations.get(fileId) || 0) + 1;
+ this.fileGenerations.set(fileId, currentGen);
+
+ // Schedule new cleanup with generation token
+ const timer = window.setTimeout(() => {
+ // Check if this cleanup is still valid (file hasn't been re-added)
+ if (this.fileGenerations.get(fileId) === currentGen) {
+ this.cleanupFile(fileId, stateRef);
+ } else {
+ if (DEBUG) console.log(`ποΈ Skipped stale cleanup for file ${fileId} (generation mismatch)`);
+ }
+ }, delay);
+
+ this.cleanupTimers.set(fileId, timer);
+ };
+
+ /**
+ * Remove a file immediately with complete resource cleanup
+ */
+ removeFiles = (fileIds: FileId[], stateRef?: React.MutableRefObject): void => {
+ fileIds.forEach(fileId => {
+ // Clean up all resources for this file
+ this.cleanupAllResourcesForFile(fileId, stateRef);
+ });
+
+ // Dispatch removal action once for all files (reducer only updates state)
+ this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds } });
+ };
+
+ /**
+ * Complete resource cleanup for a single file
+ */
+ private cleanupAllResourcesForFile = (fileId: FileId, stateRef?: React.MutableRefObject): void => {
+ // Remove from files ref
+ this.filesRef.current.delete(fileId);
+
+ // Cancel cleanup timer and generation
+ const timer = this.cleanupTimers.get(fileId);
+ if (timer) {
+ clearTimeout(timer);
+ this.cleanupTimers.delete(fileId);
+ }
+ this.fileGenerations.delete(fileId);
+
+ // Clean up blob URLs from file record if we have access to state
+ if (stateRef) {
+ const record = stateRef.current.files.byId[fileId];
+ if (record) {
+ // Clean up thumbnail blob URLs
+ if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
+ try {
+ URL.revokeObjectURL(record.thumbnailUrl);
+ } catch (error) {
+ // Ignore revocation errors
+ }
+ }
+
+ if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
+ try {
+ URL.revokeObjectURL(record.blobUrl);
+ } catch (error) {
+ // Ignore revocation errors
+ }
+ }
+
+ // Clean up processed file thumbnails
+ if (record.processedFile?.pages) {
+ record.processedFile.pages.forEach((page: ProcessedFilePage, index: number) => {
+ if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
+ try {
+ URL.revokeObjectURL(page.thumbnail);
+ } catch (error) {
+ // Ignore revocation errors
+ }
+ }
+ });
+ }
+ }
+ }
+ };
+
+ /**
+ * Update file record with race condition guards
+ */
+ updateFileRecord = (fileId: FileId, updates: Partial, stateRef?: React.MutableRefObject): void => {
+ // Guard against updating removed files (race condition protection)
+ if (!this.filesRef.current.has(fileId)) {
+ if (DEBUG) console.warn(`ποΈ Attempted to update removed file (filesRef): ${fileId}`);
+ return;
+ }
+
+ // Additional state guard for rare race conditions
+ if (stateRef && !stateRef.current.files.byId[fileId]) {
+ if (DEBUG) console.warn(`ποΈ Attempted to update removed file (state): ${fileId}`);
+ return;
+ }
+
+ this.dispatch({ type: 'UPDATE_FILE_RECORD', payload: { id: fileId, updates } });
+ };
+
+ /**
+ * Cleanup on unmount
+ */
+ destroy = (): void => {
+ this.cleanupAllFiles();
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index 718bc9370..eb4b5d6c2 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -1,6 +1,5 @@
declare module "../tools/Split";
declare module "../tools/Compress";
-declare module "../tools/Merge";
declare module "../components/PageEditor";
declare module "../components/Viewer";
declare module "*.js";
diff --git a/frontend/src/hooks/tools/convert/useConvertParameters.ts b/frontend/src/hooks/tools/convert/useConvertParameters.ts
index 64ba7a38e..4d04dd8f0 100644
--- a/frontend/src/hooks/tools/convert/useConvertParameters.ts
+++ b/frontend/src/hooks/tools/convert/useConvertParameters.ts
@@ -12,6 +12,7 @@ import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat,
import { detectFileExtension as detectFileExtensionUtil } from '../../../utils/fileUtils';
import { BaseParameters } from '../../../types/parameters';
import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
+import { useCallback, useMemo } from 'react';
export interface ConvertParameters extends BaseParameters {
fromExtension: string;
@@ -121,11 +122,13 @@ const getEndpointName = (params: ConvertParameters): string => {
};
export const useConvertParameters = (): ConvertParametersHook => {
- const baseHook = useBaseParameters({
+ const config = useMemo(() => ({
defaultParameters,
endpointName: getEndpointName,
validateFn: validateParameters,
- });
+ }), []);
+
+ const baseHook = useBaseParameters(config);
const getEndpoint = () => {
const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = baseHook.parameters;
@@ -178,15 +181,22 @@ export const useConvertParameters = (): ConvertParametersHook => {
};
- const analyzeFileTypes = (files: Array<{name: string}>) => {
+ const analyzeFileTypes = useCallback((files: Array<{name: string}>) => {
if (files.length === 0) {
// No files - only reset smart detection, keep user's format choices
- baseHook.setParameters(prev => ({
- ...prev,
- isSmartDetection: false,
- smartDetectionType: 'none'
- // Don't reset fromExtension and toExtension - let user keep their choices
- }));
+ baseHook.setParameters(prev => {
+ // Only update if something actually changed
+ if (prev.isSmartDetection === false && prev.smartDetectionType === 'none') {
+ return prev; // No change needed
+ }
+
+ return {
+ ...prev,
+ isSmartDetection: false,
+ smartDetectionType: 'none'
+ // Don't reset fromExtension and toExtension - let user keep their choices
+ };
+ });
return;
}
@@ -221,13 +231,25 @@ export const useConvertParameters = (): ConvertParametersHook => {
newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
}
- return {
+ const newState = {
...prev,
isSmartDetection: false,
- smartDetectionType: 'none',
+ smartDetectionType: 'none' as const,
fromExtension: fromExt,
toExtension: newToExtension
};
+
+ // Only update if something actually changed
+ if (
+ prev.isSmartDetection === newState.isSmartDetection &&
+ prev.smartDetectionType === newState.smartDetectionType &&
+ prev.fromExtension === newState.fromExtension &&
+ prev.toExtension === newState.toExtension
+ ) {
+ return prev; // Return the same object to prevent re-render
+ }
+
+ return newState;
});
return;
}
@@ -262,13 +284,25 @@ export const useConvertParameters = (): ConvertParametersHook => {
newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
}
- return {
+ const newState = {
...prev,
isSmartDetection: false,
- smartDetectionType: 'none',
+ smartDetectionType: 'none' as const,
fromExtension: fromExt,
toExtension: newToExtension
};
+
+ // Only update if something actually changed
+ if (
+ prev.isSmartDetection === newState.isSmartDetection &&
+ prev.smartDetectionType === newState.smartDetectionType &&
+ prev.fromExtension === newState.fromExtension &&
+ prev.toExtension === newState.toExtension
+ ) {
+ return prev; // Return the same object to prevent re-render
+ }
+
+ return newState;
});
} else {
// Mixed file types
@@ -277,34 +311,64 @@ export const useConvertParameters = (): ConvertParametersHook => {
if (allImages) {
// All files are images - use image-to-pdf conversion
- baseHook.setParameters(prev => ({
- ...prev,
- isSmartDetection: true,
- smartDetectionType: 'images',
- fromExtension: 'image',
- toExtension: 'pdf'
- }));
+ baseHook.setParameters(prev => {
+ // Only update if something actually changed
+ if (prev.isSmartDetection === true &&
+ prev.smartDetectionType === 'images' &&
+ prev.fromExtension === 'image' &&
+ prev.toExtension === 'pdf') {
+ return prev; // No change needed
+ }
+
+ return {
+ ...prev,
+ isSmartDetection: true,
+ smartDetectionType: 'images',
+ fromExtension: 'image',
+ toExtension: 'pdf'
+ };
+ });
} else if (allWeb) {
// All files are web files - use html-to-pdf conversion
- baseHook.setParameters(prev => ({
- ...prev,
- isSmartDetection: true,
- smartDetectionType: 'web',
- fromExtension: 'html',
- toExtension: 'pdf'
- }));
+ baseHook.setParameters(prev => {
+ // Only update if something actually changed
+ if (prev.isSmartDetection === true &&
+ prev.smartDetectionType === 'web' &&
+ prev.fromExtension === 'html' &&
+ prev.toExtension === 'pdf') {
+ return prev; // No change needed
+ }
+
+ return {
+ ...prev,
+ isSmartDetection: true,
+ smartDetectionType: 'web',
+ fromExtension: 'html',
+ toExtension: 'pdf'
+ };
+ });
} else {
// Mixed non-image types - use file-to-pdf conversion
- baseHook.setParameters(prev => ({
- ...prev,
- isSmartDetection: true,
- smartDetectionType: 'mixed',
- fromExtension: 'any',
- toExtension: 'pdf'
- }));
+ baseHook.setParameters(prev => {
+ // Only update if something actually changed
+ if (prev.isSmartDetection === true &&
+ prev.smartDetectionType === 'mixed' &&
+ prev.fromExtension === 'any' &&
+ prev.toExtension === 'pdf') {
+ return prev; // No change needed
+ }
+
+ return {
+ ...prev,
+ isSmartDetection: true,
+ smartDetectionType: 'mixed',
+ fromExtension: 'any',
+ toExtension: 'pdf'
+ };
+ });
}
}
- };
+ }, [baseHook.setParameters]);
return {
...baseHook,
diff --git a/frontend/src/hooks/tools/shared/useToolOperation.ts b/frontend/src/hooks/tools/shared/useToolOperation.ts
index 623b93d84..4e76e6e7d 100644
--- a/frontend/src/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@@ -104,7 +104,7 @@ export const useToolOperation = (
config: ToolOperationConfig
): ToolOperationHook => {
const { t } = useTranslation();
- const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles } = useFileContext();
+ const { recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, findFileId } = useFileContext();
// Composed hooks
const { state, actions } = useToolState();
@@ -198,8 +198,9 @@ export const useToolOperation = (
actions.setThumbnails(thumbnails);
actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename);
- // Consume input files and add output files (will replace unpinned inputs)
- await consumeFiles(validFiles, processedFiles);
+ // Replace input files with processed files (consumeFiles handles pinning)
+ const inputFileIds = validFiles.map(file => findFileId(file)).filter(Boolean) as string[];
+ await consumeFiles(inputFileIds, processedFiles);
markOperationApplied(fileId, operationId);
}
@@ -213,7 +214,7 @@ export const useToolOperation = (
actions.setLoading(false);
actions.setProgress(null);
}
- }, [t, config, actions, recordOperation, markOperationApplied, markOperationFailed, addFiles, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
+ }, [t, config, actions, recordOperation, markOperationApplied, markOperationFailed, addFiles, consumeFiles, findFileId, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
const cancelOperation = useCallback(() => {
cancelApiCalls();
diff --git a/frontend/src/hooks/tools/shared/useToolResources.ts b/frontend/src/hooks/tools/shared/useToolResources.ts
index 8d0b75285..68e142128 100644
--- a/frontend/src/hooks/tools/shared/useToolResources.ts
+++ b/frontend/src/hooks/tools/shared/useToolResources.ts
@@ -1,5 +1,5 @@
-import { useState, useCallback, useEffect } from 'react';
-import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { generateThumbnailForFile, generateThumbnailWithMetadata, ThumbnailWithMetadata } from '../../../utils/thumbnailUtils';
import { zipFileService } from '../../../services/zipFileService';
@@ -11,20 +11,28 @@ export const useToolResources = () => {
}, []);
const cleanupBlobUrls = useCallback(() => {
- blobUrls.forEach(url => {
- try {
- URL.revokeObjectURL(url);
- } catch (error) {
- console.warn('Failed to revoke blob URL:', error);
- }
+ setBlobUrls(prev => {
+ prev.forEach(url => {
+ try {
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ console.warn('Failed to revoke blob URL:', error);
+ }
+ });
+ return [];
});
- setBlobUrls([]);
- }, [blobUrls]);
+ }, []); // No dependencies - use functional update pattern
- // Cleanup on unmount
+ // Cleanup on unmount - use ref to avoid dependency on blobUrls state
+ const blobUrlsRef = useRef([]);
+
+ useEffect(() => {
+ blobUrlsRef.current = blobUrls;
+ }, [blobUrls]);
+
useEffect(() => {
return () => {
- blobUrls.forEach(url => {
+ blobUrlsRef.current.forEach(url => {
try {
URL.revokeObjectURL(url);
} catch (error) {
@@ -32,19 +40,20 @@ export const useToolResources = () => {
}
});
};
- }, [blobUrls]);
+ }, []); // No dependencies - use ref to access current URLs
const generateThumbnails = useCallback(async (files: File[]): Promise => {
+ console.log(`πΌοΈ useToolResources.generateThumbnails: Starting for ${files.length} files`);
const thumbnails: string[] = [];
for (const file of files) {
try {
+ console.log(`πΌοΈ Generating thumbnail for: ${file.name} (${file.type}, ${file.size} bytes)`);
const thumbnail = await generateThumbnailForFile(file);
- if (thumbnail) {
- thumbnails.push(thumbnail);
- }
+ console.log(`πΌοΈ Generated thumbnail for ${file.name}: SUCCESS`);
+ thumbnails.push(thumbnail);
} catch (error) {
- console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
+ console.warn(`πΌοΈ Failed to generate thumbnail for ${file.name}:`, error);
thumbnails.push('');
}
}
@@ -52,6 +61,26 @@ export const useToolResources = () => {
return thumbnails;
}, []);
+ const generateThumbnailsWithMetadata = useCallback(async (files: File[]): Promise => {
+ console.log(`πΌοΈ useToolResources.generateThumbnailsWithMetadata: Starting for ${files.length} files`);
+ const results: ThumbnailWithMetadata[] = [];
+
+ for (const file of files) {
+ try {
+ console.log(`πΌοΈ Generating thumbnail with metadata for: ${file.name} (${file.type}, ${file.size} bytes)`);
+ const result = await generateThumbnailWithMetadata(file);
+ console.log(`πΌοΈ Generated thumbnail with metadata for ${file.name}: SUCCESS, ${result.pageCount} pages`);
+ results.push(result);
+ } catch (error) {
+ console.warn(`πΌοΈ Failed to generate thumbnail with metadata for ${file.name}:`, error);
+ results.push({ thumbnail: '', pageCount: 1 });
+ }
+ }
+
+ console.log(`πΌοΈ useToolResources.generateThumbnailsWithMetadata: Complete. Generated ${results.length}/${files.length} thumbnails with metadata`);
+ return results;
+ }, []);
+
const extractZipFiles = useCallback(async (zipBlob: Blob): Promise => {
try {
const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
@@ -108,6 +137,7 @@ export const useToolResources = () => {
return {
generateThumbnails,
+ generateThumbnailsWithMetadata,
createDownloadInfo,
extractZipFiles,
extractAllZipFiles,
diff --git a/frontend/src/hooks/tools/shared/useToolState.ts b/frontend/src/hooks/tools/shared/useToolState.ts
index 196a05e72..883a1555f 100644
--- a/frontend/src/hooks/tools/shared/useToolState.ts
+++ b/frontend/src/hooks/tools/shared/useToolState.ts
@@ -88,6 +88,8 @@ export const useToolState = () => {
}, []);
const setThumbnails = useCallback((thumbnails: string[]) => {
+ console.log(`π§ useToolState.setThumbnails: Setting ${thumbnails.length} thumbnails:`,
+ thumbnails.map((t, i) => `[${i}]: ${t ? 'PRESENT' : 'MISSING'}`));
dispatch({ type: 'SET_THUMBNAILS', payload: thumbnails });
}, []);
diff --git a/frontend/src/hooks/useFileHandler.ts b/frontend/src/hooks/useFileHandler.ts
index efd988906..b42b4e94c 100644
--- a/frontend/src/hooks/useFileHandler.ts
+++ b/frontend/src/hooks/useFileHandler.ts
@@ -1,27 +1,38 @@
import { useCallback } from 'react';
-import { useFileContext } from '../contexts/FileContext';
+import { useFileState, useFileActions } from '../contexts/FileContext';
+import { FileMetadata } from '../types/file';
export const useFileHandler = () => {
- const { activeFiles, addFiles } = useFileContext();
+ const { state } = useFileState(); // Still needed for addStoredFiles
+ const { actions } = useFileActions();
const addToActiveFiles = useCallback(async (file: File) => {
- const exists = activeFiles.some(f => f.name === file.name && f.size === file.size);
- if (!exists) {
- await addFiles([file]);
- }
- }, [activeFiles, addFiles]);
+ // Let FileContext handle deduplication with quickKey logic
+ await actions.addFiles([file]);
+ }, [actions.addFiles]);
const addMultipleFiles = useCallback(async (files: File[]) => {
- const newFiles = files.filter(file =>
- !activeFiles.some(f => f.name === file.name && f.size === file.size)
- );
+ // Let FileContext handle deduplication with quickKey logic
+ await actions.addFiles(files);
+ }, [actions.addFiles]);
+
+ // Add stored files preserving their original IDs to prevent session duplicates
+ const addStoredFiles = useCallback(async (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => {
+ // Filter out files that already exist with the same ID (exact match)
+ const newFiles = filesWithMetadata.filter(({ originalId }) => {
+ return state.files.byId[originalId] === undefined;
+ });
+
if (newFiles.length > 0) {
- await addFiles(newFiles);
+ await actions.addStoredFiles(newFiles);
}
- }, [activeFiles, addFiles]);
+
+ console.log(`π Added ${newFiles.length} stored files (${filesWithMetadata.length - newFiles.length} skipped as duplicates)`);
+ }, [state.files.byId, actions.addStoredFiles]);
return {
addToActiveFiles,
addMultipleFiles,
+ addStoredFiles,
};
};
\ No newline at end of file
diff --git a/frontend/src/hooks/useFileManager.ts b/frontend/src/hooks/useFileManager.ts
index dfa2d1dec..59e8c1cdb 100644
--- a/frontend/src/hooks/useFileManager.ts
+++ b/frontend/src/hooks/useFileManager.ts
@@ -1,84 +1,125 @@
import { useState, useCallback } from 'react';
-import { fileStorage } from '../services/fileStorage';
-import { FileWithUrl } from '../types/file';
-import { createEnhancedFileFromStored } from '../utils/fileUtils';
+import { useIndexedDB } from '../contexts/IndexedDBContext';
+import { FileMetadata } from '../types/file';
import { generateThumbnailForFile } from '../utils/thumbnailUtils';
export const useFileManager = () => {
const [loading, setLoading] = useState(false);
+ const indexedDB = useIndexedDB();
- const convertToFile = useCallback(async (fileWithUrl: FileWithUrl): Promise => {
- if (fileWithUrl.url && fileWithUrl.url.startsWith('blob:')) {
- const response = await fetch(fileWithUrl.url);
- const data = await response.arrayBuffer();
- const file = new File([data], fileWithUrl.name, {
- type: fileWithUrl.type || 'application/pdf',
- lastModified: fileWithUrl.lastModified || Date.now()
- });
- // Preserve the ID if it exists
- if (fileWithUrl.id) {
- Object.defineProperty(file, 'id', { value: fileWithUrl.id, writable: false });
+ const convertToFile = useCallback(async (fileMetadata: FileMetadata): Promise => {
+ if (!indexedDB) {
+ throw new Error('IndexedDB context not available');
+ }
+
+ // Handle drafts differently from regular files
+ if (fileMetadata.isDraft) {
+ // Load draft from the drafts database
+ try {
+ const { indexedDBManager, DATABASE_CONFIGS } = await import('../services/indexedDBManager');
+ const db = await indexedDBManager.openDatabase(DATABASE_CONFIGS.DRAFTS);
+
+ return new Promise((resolve, reject) => {
+ const transaction = db.transaction(['drafts'], 'readonly');
+ const store = transaction.objectStore('drafts');
+ const request = store.get(fileMetadata.id);
+
+ request.onsuccess = () => {
+ const draft = request.result;
+ if (draft && draft.pdfData) {
+ const file = new File([draft.pdfData], fileMetadata.name, {
+ type: 'application/pdf',
+ lastModified: fileMetadata.lastModified
+ });
+ resolve(file);
+ } else {
+ reject(new Error('Draft data not found'));
+ }
+ };
+
+ request.onerror = () => reject(request.error);
+ });
+ } catch (error) {
+ throw new Error(`Failed to load draft: ${fileMetadata.name} (${error})`);
}
- return file;
}
-
- // Always use ID first, fallback to name only if ID doesn't exist
- const lookupKey = fileWithUrl.id || fileWithUrl.name;
- const storedFile = await fileStorage.getFile(lookupKey);
- if (storedFile) {
- const file = new File([storedFile.data], storedFile.name, {
- type: storedFile.type,
- lastModified: storedFile.lastModified
- });
- // Add the ID to the file object
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- return file;
+
+ // Regular file loading
+ if (fileMetadata.id) {
+ const file = await indexedDB.loadFile(fileMetadata.id);
+ if (file) {
+ return file;
+ }
}
+ throw new Error(`File not found in storage: ${fileMetadata.name} (ID: ${fileMetadata.id})`);
+ }, [indexedDB]);
- throw new Error('File not found in storage');
- }, []);
-
- const loadRecentFiles = useCallback(async (): Promise => {
+ const loadRecentFiles = useCallback(async (): Promise => {
setLoading(true);
try {
- const files = await fileStorage.getAllFiles();
- const sortedFiles = files.sort((a, b) => (b.lastModified || 0) - (a.lastModified || 0));
- return sortedFiles.map(file => createEnhancedFileFromStored(file));
+ if (!indexedDB) {
+ return [];
+ }
+
+ // Load regular files metadata only
+ const storedFileMetadata = await indexedDB.loadAllMetadata();
+
+ // For now, only regular files - drafts will be handled separately in the future
+ const allFiles = storedFileMetadata;
+ const sortedFiles = allFiles.sort((a, b) => (b.lastModified || 0) - (a.lastModified || 0));
+
+ return sortedFiles;
} catch (error) {
console.error('Failed to load recent files:', error);
return [];
} finally {
setLoading(false);
}
- }, []);
+ }, [indexedDB]);
- const handleRemoveFile = useCallback(async (index: number, files: FileWithUrl[], setFiles: (files: FileWithUrl[]) => void) => {
+ const handleRemoveFile = useCallback(async (index: number, files: FileMetadata[], setFiles: (files: FileMetadata[]) => void) => {
const file = files[index];
+ if (!file.id) {
+ throw new Error('File ID is required for removal');
+ }
+ if (!indexedDB) {
+ throw new Error('IndexedDB context not available');
+ }
try {
- await fileStorage.deleteFile(file.id || file.name);
+ await indexedDB.deleteFile(file.id);
setFiles(files.filter((_, i) => i !== index));
} catch (error) {
console.error('Failed to remove file:', error);
throw error;
}
- }, []);
+ }, [indexedDB]);
- const storeFile = useCallback(async (file: File) => {
+ const storeFile = useCallback(async (file: File, fileId: string) => {
+ if (!indexedDB) {
+ throw new Error('IndexedDB context not available');
+ }
try {
- // Generate thumbnail for the file
- const thumbnail = await generateThumbnailForFile(file);
+ // Store file with provided UUID from FileContext (thumbnail generated internally)
+ const metadata = await indexedDB.saveFile(file, fileId);
- // Store file with thumbnail
- const storedFile = await fileStorage.storeFile(file, thumbnail);
-
- // Add the ID to the file object
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- return storedFile;
+ // Convert file to ArrayBuffer for StoredFile interface compatibility
+ const arrayBuffer = await file.arrayBuffer();
+
+ // Return StoredFile format for compatibility with old API
+ return {
+ id: fileId,
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ lastModified: file.lastModified,
+ data: arrayBuffer,
+ thumbnail: metadata.thumbnail
+ };
} catch (error) {
console.error('Failed to store file:', error);
throw error;
}
- }, []);
+ }, [indexedDB]);
const createFileSelectionHandlers = useCallback((
selectedFiles: string[],
@@ -96,14 +137,23 @@ export const useFileManager = () => {
setSelectedFiles([]);
};
- const selectMultipleFiles = async (files: FileWithUrl[], onFilesSelect: (files: File[]) => void) => {
+ const selectMultipleFiles = async (files: FileMetadata[], onStoredFilesSelect: (filesWithMetadata: Array<{ file: File; originalId: string; metadata: FileMetadata }>) => void) => {
if (selectedFiles.length === 0) return;
try {
- const selectedFileObjects = files.filter(f => selectedFiles.includes(f.id || f.name));
- const filePromises = selectedFileObjects.map(convertToFile);
- const convertedFiles = await Promise.all(filePromises);
- onFilesSelect(convertedFiles);
+ // Filter by UUID and convert to File objects
+ const selectedFileObjects = files.filter(f => selectedFiles.includes(f.id));
+
+ // Use stored files flow that preserves IDs
+ const filesWithMetadata = await Promise.all(
+ selectedFileObjects.map(async (metadata) => ({
+ file: await convertToFile(metadata),
+ originalId: metadata.id,
+ metadata
+ }))
+ );
+ onStoredFilesSelect(filesWithMetadata);
+
clearSelection();
} catch (error) {
console.error('Failed to load selected files:', error);
@@ -119,12 +169,18 @@ export const useFileManager = () => {
}, [convertToFile]);
const touchFile = useCallback(async (id: string) => {
+ if (!indexedDB) {
+ console.warn('IndexedDB context not available for touch operation');
+ return;
+ }
try {
- await fileStorage.touchFile(id);
+ // Update access time - this will be handled by the cache in IndexedDBContext
+ // when the file is loaded, so we can just load it briefly to "touch" it
+ await indexedDB.loadFile(id);
} catch (error) {
console.error('Failed to touch file:', error);
}
- }, []);
+ }, [indexedDB]);
return {
loading,
diff --git a/frontend/src/hooks/useIndexedDBThumbnail.ts b/frontend/src/hooks/useIndexedDBThumbnail.ts
index 03a9e92e9..4f0d77c0e 100644
--- a/frontend/src/hooks/useIndexedDBThumbnail.ts
+++ b/frontend/src/hooks/useIndexedDBThumbnail.ts
@@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
-import { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
+import { FileMetadata } from "../types/file";
+import { useIndexedDB } from "../contexts/IndexedDBContext";
import { generateThumbnailForFile } from "../utils/thumbnailUtils";
/**
@@ -22,12 +22,13 @@ function calculateThumbnailScale(pageViewport: { width: number; height: number }
* Hook for IndexedDB-aware thumbnail loading
* Handles thumbnail generation for files not in IndexedDB
*/
-export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
+export function useIndexedDBThumbnail(file: FileMetadata | undefined | null): {
thumbnail: string | null;
isGenerating: boolean
} {
const [thumb, setThumb] = useState(null);
const [generating, setGenerating] = useState(false);
+ const indexedDB = useIndexedDB();
useEffect(() => {
let cancelled = false;
@@ -44,46 +45,36 @@ export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
return;
}
- // Second priority: generate thumbnail for any file type
+ // Second priority: generate thumbnail for files under 100MB
if (file.size < 100 * 1024 * 1024 && !generating) {
setGenerating(true);
try {
let fileObject: File;
- // Handle IndexedDB files vs regular File objects
- if (file.storedInIndexedDB && file.id) {
- // For IndexedDB files, recreate File object from stored data
- const storedFile = await fileStorage.getFile(file.id);
- if (!storedFile) {
+ // Try to load file from IndexedDB using new context
+ if (file.id && indexedDB) {
+ const loadedFile = await indexedDB.loadFile(file.id);
+ if (!loadedFile) {
throw new Error('File not found in IndexedDB');
}
- fileObject = new File([storedFile.data], storedFile.name, {
- type: storedFile.type,
- lastModified: storedFile.lastModified
- });
- } else if ((file as any /* Fix me */).file) {
- // For FileWithUrl objects that have a File object
- fileObject = (file as any /* Fix me */).file;
- } else if (file.id) {
- // Fallback: try to get from IndexedDB even if storedInIndexedDB flag is missing
- const storedFile = await fileStorage.getFile(file.id);
- if (!storedFile) {
- throw new Error('File not found in IndexedDB and no File object available');
- }
- fileObject = new File([storedFile.data], storedFile.name, {
- type: storedFile.type,
- lastModified: storedFile.lastModified
- });
+ fileObject = loadedFile;
} else {
- throw new Error('File object not available and no ID for IndexedDB lookup');
+ throw new Error('File ID not available or IndexedDB context not available');
}
// Use the universal thumbnail generator
const thumbnail = await generateThumbnailForFile(fileObject);
- if (!cancelled && thumbnail) {
+ if (!cancelled) {
setThumb(thumbnail);
- } else if (!cancelled) {
- setThumb(null);
+
+ // Save thumbnail to IndexedDB for persistence
+ if (file.id && indexedDB && thumbnail) {
+ try {
+ await indexedDB.updateThumbnail(file.id, thumbnail);
+ } catch (error) {
+ console.warn('Failed to save thumbnail to IndexedDB:', error);
+ }
+ }
}
} catch (error) {
console.warn('Failed to generate thumbnail for file', file.name, error);
@@ -92,14 +83,14 @@ export function useIndexedDBThumbnail(file: FileWithUrl | undefined | null): {
if (!cancelled) setGenerating(false);
}
} else {
- // Large files - generate placeholder
+ // Large files - no thumbnail
setThumb(null);
}
}
loadThumbnail();
return () => { cancelled = true; };
- }, [file, file?.thumbnail, file?.id]);
+ }, [file, file?.thumbnail, file?.id, indexedDB, generating]);
return { thumbnail: thumb, isGenerating: generating };
}
diff --git a/frontend/src/hooks/useMemoryManagement.ts b/frontend/src/hooks/useMemoryManagement.ts
deleted file mode 100644
index d27e5ed56..000000000
--- a/frontend/src/hooks/useMemoryManagement.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useCallback } from 'react';
-import { useFileContext } from '../contexts/FileContext';
-
-/**
- * Hook for components that need to register resources with centralized memory management
- */
-export function useMemoryManagement() {
- const { trackBlobUrl, trackPdfDocument, scheduleCleanup } = useFileContext();
-
- const registerBlobUrl = useCallback((url: string) => {
- trackBlobUrl(url);
- return url;
- }, [trackBlobUrl]);
-
- const registerPdfDocument = useCallback((fileId: string, pdfDoc: any) => {
- trackPdfDocument(fileId, pdfDoc);
- return pdfDoc;
- }, [trackPdfDocument]);
-
- const cancelCleanup = useCallback((fileId: string) => {
- // Cancel scheduled cleanup (user is actively using the file)
- scheduleCleanup(fileId, -1); // -1 cancels the timer
- }, [scheduleCleanup]);
-
- return {
- registerBlobUrl,
- registerPdfDocument,
- cancelCleanup
- };
-}
\ No newline at end of file
diff --git a/frontend/src/hooks/usePDFProcessor.ts b/frontend/src/hooks/usePDFProcessor.ts
index 0a717a3a9..a35b777ca 100644
--- a/frontend/src/hooks/usePDFProcessor.ts
+++ b/frontend/src/hooks/usePDFProcessor.ts
@@ -1,6 +1,6 @@
import { useState, useCallback } from 'react';
-import { getDocument } from 'pdfjs-dist';
import { PDFDocument, PDFPage } from '../types/pageEditor';
+import { pdfWorkerManager } from '../services/pdfWorkerManager';
export function usePDFProcessor() {
const [loading, setLoading] = useState(false);
@@ -13,7 +13,7 @@ export function usePDFProcessor() {
): Promise => {
try {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const page = await pdf.getPage(pageNumber);
const viewport = page.getViewport({ scale });
@@ -29,8 +29,8 @@ export function usePDFProcessor() {
await page.render({ canvasContext: context, viewport }).promise;
const thumbnail = canvas.toDataURL();
- // Clean up
- pdf.destroy();
+ // Clean up using worker manager
+ pdfWorkerManager.destroyDocument(pdf);
return thumbnail;
} catch (error) {
@@ -39,13 +39,35 @@ export function usePDFProcessor() {
}
}, []);
+ // Internal function to generate thumbnail from already-opened PDF
+ const generateThumbnailFromPDF = useCallback(async (
+ pdf: any,
+ pageNumber: number,
+ scale: number = 0.5
+ ): Promise => {
+ const page = await pdf.getPage(pageNumber);
+
+ const viewport = page.getViewport({ scale });
+ const canvas = document.createElement('canvas');
+ canvas.width = viewport.width;
+ canvas.height = viewport.height;
+
+ const context = canvas.getContext('2d');
+ if (!context) {
+ throw new Error('Could not get canvas context');
+ }
+
+ await page.render({ canvasContext: context, viewport }).promise;
+ return canvas.toDataURL();
+ }, []);
+
const processPDFFile = useCallback(async (file: File): Promise => {
setLoading(true);
setError(null);
try {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const totalPages = pdf.numPages;
const pages: PDFPage[] = [];
@@ -61,19 +83,19 @@ export function usePDFProcessor() {
});
}
- // Generate thumbnails for first 10 pages immediately for better UX
+ // Generate thumbnails for first 10 pages immediately using the same PDF instance
const priorityPages = Math.min(10, totalPages);
for (let i = 1; i <= priorityPages; i++) {
try {
- const thumbnail = await generatePageThumbnail(file, i);
+ const thumbnail = await generateThumbnailFromPDF(pdf, i);
pages[i - 1].thumbnail = thumbnail;
} catch (error) {
console.warn(`Failed to generate thumbnail for page ${i}:`, error);
}
}
- // Clean up
- pdf.destroy();
+ // Clean up using worker manager
+ pdfWorkerManager.destroyDocument(pdf);
const document: PDFDocument = {
id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
@@ -91,7 +113,7 @@ export function usePDFProcessor() {
} finally {
setLoading(false);
}
- }, [generatePageThumbnail]);
+ }, [generateThumbnailFromPDF]);
return {
processPDFFile,
diff --git a/frontend/src/hooks/usePdfSignatureDetection.ts b/frontend/src/hooks/usePdfSignatureDetection.ts
index ea7d0bdf0..17f90f2d9 100644
--- a/frontend/src/hooks/usePdfSignatureDetection.ts
+++ b/frontend/src/hooks/usePdfSignatureDetection.ts
@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
+import { pdfWorkerManager } from '../services/pdfWorkerManager';
export interface PdfSignatureDetectionResult {
hasDigitalSignatures: boolean;
@@ -21,14 +22,12 @@ export const usePdfSignatureDetection = (files: File[]): PdfSignatureDetectionRe
let foundSignature = false;
try {
- // Set up PDF.js worker
- pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs-legacy/pdf.worker.mjs';
for (const file of files) {
const arrayBuffer = await file.arrayBuffer();
try {
- const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
@@ -42,6 +41,9 @@ export const usePdfSignatureDetection = (files: File[]): PdfSignatureDetectionRe
if (foundSignature) break;
}
+
+ // Clean up PDF document using worker manager
+ pdfWorkerManager.destroyDocument(pdf);
} catch (error) {
console.warn('Error analyzing PDF for signatures:', error);
}
diff --git a/frontend/src/hooks/useThumbnailGeneration.ts b/frontend/src/hooks/useThumbnailGeneration.ts
index 2d1138401..09bec7c9c 100644
--- a/frontend/src/hooks/useThumbnailGeneration.ts
+++ b/frontend/src/hooks/useThumbnailGeneration.ts
@@ -1,12 +1,121 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
import { thumbnailGenerationService } from '../services/thumbnailGenerationService';
+// Request queue to handle concurrent thumbnail requests
+interface ThumbnailRequest {
+ pageId: string;
+ file: File;
+ pageNumber: number;
+ resolve: (thumbnail: string | null) => void;
+ reject: (error: Error) => void;
+}
+
+// Global request queue (shared across all hook instances)
+const requestQueue: ThumbnailRequest[] = [];
+let isProcessingQueue = false;
+let batchTimer: number | null = null;
+
+// Track active thumbnail requests to prevent duplicates across components
+const activeRequests = new Map>();
+
+// Batch processing configuration
+const BATCH_SIZE = 20; // Process thumbnails in batches of 20 for better UI responsiveness
+const BATCH_DELAY = 100; // Wait 100ms to collect requests before processing
+const PRIORITY_BATCH_DELAY = 50; // Faster processing for the first batch (visible pages)
+
+// Process the queue in batches for better performance
+async function processRequestQueue() {
+ if (isProcessingQueue || requestQueue.length === 0) {
+ return;
+ }
+
+ isProcessingQueue = true;
+
+ try {
+ while (requestQueue.length > 0) {
+ // Sort queue by page number to prioritize visible pages first
+ requestQueue.sort((a, b) => a.pageNumber - b.pageNumber);
+
+ // Take a batch of requests (same file only for efficiency)
+ const batchSize = Math.min(BATCH_SIZE, requestQueue.length);
+ const batch = requestQueue.splice(0, batchSize);
+
+ // Group by file to process efficiently
+ const fileGroups = new Map();
+
+ // First, resolve any cached thumbnails immediately
+ const uncachedRequests: ThumbnailRequest[] = [];
+
+ for (const request of batch) {
+ const cached = thumbnailGenerationService.getThumbnailFromCache(request.pageId);
+ if (cached) {
+ request.resolve(cached);
+ } else {
+ uncachedRequests.push(request);
+
+ if (!fileGroups.has(request.file)) {
+ fileGroups.set(request.file, []);
+ }
+ fileGroups.get(request.file)!.push(request);
+ }
+ }
+
+ // Process each file group with batch thumbnail generation
+ for (const [file, requests] of fileGroups) {
+ if (requests.length === 0) continue;
+
+ try {
+ const pageNumbers = requests.map(req => req.pageNumber);
+ const arrayBuffer = await file.arrayBuffer();
+
+ console.log(`πΈ Batch generating ${requests.length} thumbnails for pages: ${pageNumbers.slice(0, 5).join(', ')}${pageNumbers.length > 5 ? '...' : ''}`);
+
+ // Use file name as fileId for PDF document caching
+ const fileId = file.name + '_' + file.size + '_' + file.lastModified;
+
+ const results = await thumbnailGenerationService.generateThumbnails(
+ fileId,
+ arrayBuffer,
+ pageNumbers,
+ { scale: 1.0, quality: 0.8, batchSize: BATCH_SIZE },
+ (progress) => {
+ // Optional: Could emit progress events here for UI feedback
+ console.log(`πΈ Batch progress: ${progress.completed}/${progress.total} thumbnails generated`);
+ }
+ );
+
+ // Match results back to requests and resolve
+ for (const request of requests) {
+ const result = results.find(r => r.pageNumber === request.pageNumber);
+
+ if (result && result.success && result.thumbnail) {
+ thumbnailGenerationService.addThumbnailToCache(request.pageId, result.thumbnail);
+ request.resolve(result.thumbnail);
+ } else {
+ console.warn(`No result for page ${request.pageNumber}`);
+ request.resolve(null);
+ }
+ }
+
+ } catch (error) {
+ console.warn(`Batch thumbnail generation failed for ${requests.length} pages:`, error);
+ // Reject all requests in this batch
+ requests.forEach(request => request.reject(error as Error));
+ }
+ }
+ }
+ } finally {
+ isProcessingQueue = false;
+ }
+}
+
/**
* Hook for tools that want to use thumbnail generation
* Tools can choose whether to include visual features
*/
export function useThumbnailGeneration() {
const generateThumbnails = useCallback(async (
+ fileId: string,
pdfArrayBuffer: ArrayBuffer,
pageNumbers: number[],
options: {
@@ -18,6 +127,7 @@ export function useThumbnailGeneration() {
onProgress?: (progress: { completed: number; total: number; thumbnails: any[] }) => void
) => {
return thumbnailGenerationService.generateThumbnails(
+ fileId,
pdfArrayBuffer,
pageNumbers,
options,
@@ -42,15 +152,88 @@ export function useThumbnailGeneration() {
}, []);
const destroyThumbnails = useCallback(() => {
+ // Clear any pending batch timer
+ if (batchTimer) {
+ clearTimeout(batchTimer);
+ batchTimer = null;
+ }
+
+ // Clear the queue and active requests
+ requestQueue.length = 0;
+ activeRequests.clear();
+ isProcessingQueue = false;
+
thumbnailGenerationService.destroy();
}, []);
+ const clearPDFCacheForFile = useCallback((fileId: string) => {
+ thumbnailGenerationService.clearPDFCacheForFile(fileId);
+ }, []);
+
+ const requestThumbnail = useCallback(async (
+ pageId: string,
+ file: File,
+ pageNumber: number
+ ): Promise => {
+ // Check cache first for immediate return
+ const cached = thumbnailGenerationService.getThumbnailFromCache(pageId);
+ if (cached) {
+ return cached;
+ }
+
+ // Check if this request is already being processed globally
+ const activeRequest = activeRequests.get(pageId);
+ if (activeRequest) {
+ return activeRequest;
+ }
+
+ // Create new request promise and track it globally
+ const requestPromise = new Promise((resolve, reject) => {
+ requestQueue.push({
+ pageId,
+ file,
+ pageNumber,
+ resolve: (result: string | null) => {
+ activeRequests.delete(pageId);
+ resolve(result);
+ },
+ reject: (error: Error) => {
+ activeRequests.delete(pageId);
+ reject(error);
+ }
+ });
+
+ // Schedule batch processing with a small delay to collect more requests
+ if (batchTimer) {
+ clearTimeout(batchTimer);
+ }
+
+ // Use shorter delay for the first batch (pages 1-50) to show visible content faster
+ const isFirstBatch = requestQueue.length <= BATCH_SIZE && requestQueue.every(req => req.pageNumber <= BATCH_SIZE);
+ const delay = isFirstBatch ? PRIORITY_BATCH_DELAY : BATCH_DELAY;
+
+ batchTimer = window.setTimeout(() => {
+ processRequestQueue().catch(error => {
+ console.error('Error processing thumbnail request queue:', error);
+ });
+ batchTimer = null;
+ }, delay);
+ });
+
+ // Track this request to prevent duplicates
+ activeRequests.set(pageId, requestPromise);
+
+ return requestPromise;
+ }, []);
+
return {
generateThumbnails,
addThumbnailToCache,
getThumbnailFromCache,
getCacheStats,
stopGeneration,
- destroyThumbnails
+ destroyThumbnails,
+ clearPDFCacheForFile,
+ requestThumbnail
};
}
\ No newline at end of file
diff --git a/frontend/src/hooks/useUrlSync.ts b/frontend/src/hooks/useUrlSync.ts
new file mode 100644
index 000000000..ef181c04b
--- /dev/null
+++ b/frontend/src/hooks/useUrlSync.ts
@@ -0,0 +1,125 @@
+/**
+ * URL synchronization hooks for tool routing
+ */
+
+import { useEffect, useCallback } from 'react';
+import { ModeType } from '../contexts/NavigationContext';
+import { parseToolRoute, updateToolRoute, clearToolRoute } from '../utils/urlRouting';
+
+/**
+ * Hook to sync navigation mode with URL
+ */
+export function useNavigationUrlSync(
+ currentMode: ModeType,
+ setMode: (mode: ModeType) => void,
+ enableSync: boolean = true
+) {
+ // Initialize mode from URL on mount
+ useEffect(() => {
+ if (!enableSync) return;
+
+ const route = parseToolRoute();
+ if (route.mode !== currentMode) {
+ setMode(route.mode);
+ }
+ }, []); // Only run on mount
+
+ // Update URL when mode changes
+ useEffect(() => {
+ if (!enableSync) return;
+
+ if (currentMode === 'pageEditor') {
+ clearToolRoute();
+ } else {
+ updateToolRoute(currentMode, currentMode);
+ }
+ }, [currentMode, enableSync]);
+
+ // Handle browser back/forward navigation
+ useEffect(() => {
+ if (!enableSync) return;
+
+ const handlePopState = () => {
+ const route = parseToolRoute();
+ if (route.mode !== currentMode) {
+ setMode(route.mode);
+ }
+ };
+
+ window.addEventListener('popstate', handlePopState);
+ return () => window.removeEventListener('popstate', handlePopState);
+ }, [currentMode, setMode, enableSync]);
+}
+
+/**
+ * Hook to sync tool workflow with URL
+ */
+export function useToolWorkflowUrlSync(
+ selectedToolKey: string | null,
+ selectTool: (toolKey: string) => void,
+ clearTool: () => void,
+ enableSync: boolean = true
+) {
+ // Initialize tool from URL on mount
+ useEffect(() => {
+ if (!enableSync) return;
+
+ const route = parseToolRoute();
+ if (route.toolKey && route.toolKey !== selectedToolKey) {
+ selectTool(route.toolKey);
+ } else if (!route.toolKey && selectedToolKey) {
+ clearTool();
+ }
+ }, []); // Only run on mount
+
+ // Update URL when tool changes
+ useEffect(() => {
+ if (!enableSync) return;
+
+ if (selectedToolKey) {
+ const route = parseToolRoute();
+ if (route.toolKey !== selectedToolKey) {
+ updateToolRoute(selectedToolKey as ModeType, selectedToolKey);
+ }
+ }
+ }, [selectedToolKey, enableSync]);
+}
+
+/**
+ * Hook to get current URL route information
+ */
+export function useCurrentRoute() {
+ const getCurrentRoute = useCallback(() => {
+ return parseToolRoute();
+ }, []);
+
+ return getCurrentRoute;
+}
+
+/**
+ * Hook to programmatically navigate to tools
+ */
+export function useToolNavigation() {
+ const navigateToTool = useCallback((toolKey: string) => {
+ updateToolRoute(toolKey as ModeType, toolKey);
+
+ // Dispatch a custom event to notify other components
+ window.dispatchEvent(new CustomEvent('toolNavigation', {
+ detail: { toolKey }
+ }));
+ }, []);
+
+ const navigateToHome = useCallback(() => {
+ clearToolRoute();
+
+ // Dispatch a custom event to notify other components
+ window.dispatchEvent(new CustomEvent('toolNavigation', {
+ detail: { toolKey: null }
+ }));
+ }, []);
+
+ return {
+ navigateToTool,
+ navigateToHome
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index d26a40caa..022789f6c 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,7 +1,7 @@
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
-import { useFileContext } from "../contexts/FileContext";
-import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
+import { useFileActions, useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { ToolWorkflowProvider, useToolWorkflow } from "../contexts/ToolWorkflowContext";
import { Group } from "@mantine/core";
import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
@@ -22,7 +22,7 @@ function HomePageContent() {
const { quickAccessRef } = sidebarRefs;
- const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
+ const { setSelectedFiles } = useFileSelection();
const { selectedTool, selectedToolKey } = useToolWorkflow();
@@ -38,17 +38,7 @@ function HomePageContent() {
ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl
});
- // Update file selection context when tool changes
- useEffect(() => {
- if (selectedTool) {
- setMaxFiles(selectedTool.maxFiles ?? -1);
- setIsToolMode(true);
- } else {
- setMaxFiles(-1);
- setIsToolMode(false);
- setSelectedFiles([]);
- }
- }, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
+ // Note: File selection limits are now handled directly by individual tools
return (
{
+ actions.setMode(view as any); // ToolWorkflowContext should validate this
+ };
+
return (
-
-
-
-
-
-
-
+
+
+
+
+
);
-}
\ No newline at end of file
+}
+
+export default function HomePage() {
+ return ;
+}
diff --git a/frontend/src/services/enhancedPDFProcessingService.ts b/frontend/src/services/enhancedPDFProcessingService.ts
index 086846515..f9f067c30 100644
--- a/frontend/src/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/services/enhancedPDFProcessingService.ts
@@ -1,12 +1,10 @@
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
+import * as pdfjsLib from 'pdfjs-dist';
import { ProcessedFile, ProcessingState, PDFPage, ProcessingStrategy, ProcessingConfig, ProcessingMetrics } from '../types/processing';
import { ProcessingCache } from './processingCache';
import { FileHasher } from '../utils/fileHash';
import { FileAnalyzer } from './fileAnalyzer';
import { ProcessingErrorHandler } from './processingErrorHandler';
-
-// Set up PDF.js worker
-GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+import { pdfWorkerManager } from './pdfWorkerManager';
export class EnhancedPDFProcessingService {
private static instance: EnhancedPDFProcessingService;
@@ -183,43 +181,45 @@ export class EnhancedPDFProcessingService {
state: ProcessingState
): Promise {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
- const totalPages = pdf.numPages;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+
+ try {
+ const totalPages = pdf.numPages;
- state.progress = 10;
- this.notifyListeners();
+ state.progress = 10;
+ this.notifyListeners();
- const pages: PDFPage[] = [];
+ const pages: PDFPage[] = [];
- for (let i = 1; i <= totalPages; i++) {
- // Check for cancellation
- if (state.cancellationToken?.signal.aborted) {
- pdf.destroy();
- throw new Error('Processing cancelled');
+ for (let i = 1; i <= totalPages; i++) {
+ // Check for cancellation
+ if (state.cancellationToken?.signal.aborted) {
+ throw new Error('Processing cancelled');
+ }
+
+ const page = await pdf.getPage(i);
+ const thumbnail = await this.renderPageThumbnail(page, config.thumbnailQuality);
+
+ pages.push({
+ id: `${file.name}-page-${i}`,
+ pageNumber: i,
+ thumbnail,
+ rotation: 0,
+ selected: false
+ });
+
+ // Update progress
+ state.progress = 10 + (i / totalPages) * 85;
+ state.currentPage = i;
+ this.notifyListeners();
}
- const page = await pdf.getPage(i);
- const thumbnail = await this.renderPageThumbnail(page, config.thumbnailQuality);
-
- pages.push({
- id: `${file.name}-page-${i}`,
- pageNumber: i,
- thumbnail,
- rotation: 0,
- selected: false
- });
-
- // Update progress
- state.progress = 10 + (i / totalPages) * 85;
- state.currentPage = i;
+ return this.createProcessedFile(file, pages, totalPages);
+ } finally {
+ pdfWorkerManager.destroyDocument(pdf);
+ state.progress = 100;
this.notifyListeners();
}
-
- pdf.destroy();
- state.progress = 100;
- this.notifyListeners();
-
- return this.createProcessedFile(file, pages, totalPages);
}
/**
@@ -231,7 +231,7 @@ export class EnhancedPDFProcessingService {
state: ProcessingState
): Promise {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const totalPages = pdf.numPages;
state.progress = 10;
@@ -243,7 +243,7 @@ export class EnhancedPDFProcessingService {
// Process priority pages first
for (let i = 1; i <= priorityCount; i++) {
if (state.cancellationToken?.signal.aborted) {
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
throw new Error('Processing cancelled');
}
@@ -274,7 +274,7 @@ export class EnhancedPDFProcessingService {
});
}
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
state.progress = 100;
this.notifyListeners();
@@ -290,7 +290,7 @@ export class EnhancedPDFProcessingService {
state: ProcessingState
): Promise {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const totalPages = pdf.numPages;
state.progress = 10;
@@ -305,7 +305,7 @@ export class EnhancedPDFProcessingService {
for (let i = 1; i <= firstChunkEnd; i++) {
if (state.cancellationToken?.signal.aborted) {
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
throw new Error('Processing cancelled');
}
@@ -342,7 +342,7 @@ export class EnhancedPDFProcessingService {
});
}
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
state.progress = 100;
this.notifyListeners();
@@ -358,7 +358,7 @@ export class EnhancedPDFProcessingService {
state: ProcessingState
): Promise {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const totalPages = pdf.numPages;
state.progress = 50;
@@ -376,7 +376,7 @@ export class EnhancedPDFProcessingService {
});
}
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
state.progress = 100;
this.notifyListeners();
@@ -519,7 +519,10 @@ export class EnhancedPDFProcessingService {
this.notifyListeners();
// Force memory cleanup hint
- setTimeout(() => window?.gc?.(), 100);
+ if (typeof window !== 'undefined' && window.gc) {
+ let gc = window.gc;
+ setTimeout(() => gc(), 100);
+ }
}
/**
@@ -537,6 +540,15 @@ export class EnhancedPDFProcessingService {
this.processing.clear();
this.notifyListeners();
}
+
+ /**
+ * Emergency cleanup - destroy all PDF workers
+ */
+ emergencyCleanup(): void {
+ this.clearAllProcessing();
+ this.clearAll();
+ pdfWorkerManager.destroyAllDocuments();
+ }
}
// Export singleton instance
diff --git a/frontend/src/services/fileAnalyzer.ts b/frontend/src/services/fileAnalyzer.ts
index 6c5f3ec1f..537692600 100644
--- a/frontend/src/services/fileAnalyzer.ts
+++ b/frontend/src/services/fileAnalyzer.ts
@@ -1,5 +1,5 @@
-import { getDocument } from 'pdfjs-dist';
import { FileAnalysis, ProcessingStrategy } from '../types/processing';
+import { pdfWorkerManager } from './pdfWorkerManager';
export class FileAnalyzer {
private static readonly SIZE_THRESHOLDS = {
@@ -66,17 +66,16 @@ export class FileAnalyzer {
// For large files, try the whole file first (PDF.js needs the complete structure)
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({
- data: arrayBuffer,
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
stopAtErrors: false, // Don't stop at minor errors
verbosity: 0 // Suppress PDF.js warnings
- }).promise;
+ });
const pageCount = pdf.numPages;
const isEncrypted = (pdf as any).isEncrypted;
- // Clean up
- pdf.destroy();
+ // Clean up using worker manager
+ pdfWorkerManager.destroyDocument(pdf);
return {
pageCount,
diff --git a/frontend/src/services/fileOperationsService.ts b/frontend/src/services/fileOperationsService.ts
deleted file mode 100644
index d13965837..000000000
--- a/frontend/src/services/fileOperationsService.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-import { FileWithUrl } from "../types/file";
-import { fileStorage, StorageStats } from "./fileStorage";
-import { loadFilesFromIndexedDB, createEnhancedFileFromStored, cleanupFileUrls } from "../utils/fileUtils";
-import { generateThumbnailForFile } from "../utils/thumbnailUtils";
-import { updateStorageStatsIncremental } from "../utils/storageUtils";
-
-/**
- * Service for file storage operations
- * Contains all IndexedDB operations and file management logic
- */
-export const fileOperationsService = {
-
- /**
- * Load storage statistics
- */
- async loadStorageStats(): Promise {
- try {
- return await fileStorage.getStorageStats();
- } catch (error) {
- console.error('Failed to load storage stats:', error);
- return null;
- }
- },
-
- /**
- * Force reload files from IndexedDB
- */
- async forceReloadFiles(): Promise {
- try {
- return await loadFilesFromIndexedDB();
- } catch (error) {
- console.error('Failed to force reload files:', error);
- return [];
- }
- },
-
- /**
- * Load existing files from IndexedDB if not already loaded
- */
- async loadExistingFiles(
- filesLoaded: boolean,
- currentFiles: FileWithUrl[]
- ): Promise {
- if (filesLoaded && currentFiles.length > 0) {
- return currentFiles;
- }
-
- try {
- await fileStorage.init();
- const storedFiles = await fileStorage.getAllFileMetadata();
-
- // Detect if IndexedDB was purged by comparing with current UI state
- if (currentFiles.length > 0 && storedFiles.length === 0) {
- console.warn('IndexedDB appears to have been purged - clearing UI state');
- return [];
- }
-
- return await loadFilesFromIndexedDB();
- } catch (error) {
- console.error('Failed to load existing files:', error);
- return [];
- }
- },
-
- /**
- * Upload files to IndexedDB with thumbnail generation
- */
- async uploadFiles(
- uploadedFiles: File[],
- useIndexedDB: boolean
- ): Promise {
- const newFiles: FileWithUrl[] = [];
-
- for (const file of uploadedFiles) {
- if (useIndexedDB) {
- try {
- console.log('Storing file in IndexedDB:', file.name);
-
- // Generate thumbnail only during upload
- const thumbnail = await generateThumbnailForFile(file);
-
- const storedFile = await fileStorage.storeFile(file, thumbnail);
- console.log('File stored with ID:', storedFile.id);
-
- const baseFile = fileStorage.createFileFromStored(storedFile);
- const enhancedFile = createEnhancedFileFromStored(storedFile, thumbnail);
-
- // Copy File interface methods from baseFile
- enhancedFile.arrayBuffer = baseFile.arrayBuffer.bind(baseFile);
- enhancedFile.slice = baseFile.slice.bind(baseFile);
- enhancedFile.stream = baseFile.stream.bind(baseFile);
- enhancedFile.text = baseFile.text.bind(baseFile);
-
- newFiles.push(enhancedFile);
- } catch (error) {
- console.error('Failed to store file in IndexedDB:', error);
- // Fallback to RAM storage
- const enhancedFile: FileWithUrl = Object.assign(file, {
- url: URL.createObjectURL(file),
- storedInIndexedDB: false
- });
- newFiles.push(enhancedFile);
- }
- } else {
- // IndexedDB disabled - use RAM
- const enhancedFile: FileWithUrl = Object.assign(file, {
- url: URL.createObjectURL(file),
- storedInIndexedDB: false
- });
- newFiles.push(enhancedFile);
- }
- }
-
- return newFiles;
- },
-
- /**
- * Remove a file from storage
- */
- async removeFile(file: FileWithUrl): Promise {
- // Clean up blob URL
- if (file.url && !file.url.startsWith('indexeddb:')) {
- URL.revokeObjectURL(file.url);
- }
-
- // Remove from IndexedDB if stored there
- if (file.storedInIndexedDB && file.id) {
- try {
- await fileStorage.deleteFile(file.id);
- } catch (error) {
- console.error('Failed to delete file from IndexedDB:', error);
- }
- }
- },
-
- /**
- * Clear all files from storage
- */
- async clearAllFiles(files: FileWithUrl[]): Promise {
- // Clean up all blob URLs
- cleanupFileUrls(files);
-
- // Clear IndexedDB
- try {
- await fileStorage.clearAll();
- } catch (error) {
- console.error('Failed to clear IndexedDB:', error);
- }
- },
-
- /**
- * Create blob URL for file viewing
- */
- async createBlobUrlForFile(file: FileWithUrl): Promise {
- // For large files, use IndexedDB direct access to avoid memory issues
- const FILE_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
- if (file.size > FILE_SIZE_LIMIT) {
- console.warn(`File ${file.name} is too large for blob URL. Use direct IndexedDB access.`);
- return `indexeddb:${file.id}`;
- }
-
- // For all files, avoid persistent blob URLs
- if (file.storedInIndexedDB && file.id) {
- const storedFile = await fileStorage.getFile(file.id);
- if (storedFile) {
- return fileStorage.createBlobUrl(storedFile);
- }
- }
-
- // Fallback for files not in IndexedDB
- return URL.createObjectURL(file);
- },
-
- /**
- * Check for IndexedDB purge
- */
- async checkForPurge(currentFiles: FileWithUrl[]): Promise {
- if (currentFiles.length === 0) return false;
-
- try {
- await fileStorage.init();
- const storedFiles = await fileStorage.getAllFileMetadata();
- return storedFiles.length === 0; // Purge detected if no files in storage but UI shows files
- } catch (error) {
- console.error('Error checking for purge:', error);
- return true; // Assume purged if can't access IndexedDB
- }
- },
-
- /**
- * Update storage stats incrementally (re-export utility for convenience)
- */
- updateStorageStatsIncremental
-};
\ No newline at end of file
diff --git a/frontend/src/services/fileProcessingService.ts b/frontend/src/services/fileProcessingService.ts
new file mode 100644
index 000000000..cb7682c8b
--- /dev/null
+++ b/frontend/src/services/fileProcessingService.ts
@@ -0,0 +1,209 @@
+/**
+ * Centralized file processing service
+ * Handles metadata discovery, page counting, and thumbnail generation
+ * Called when files are added to FileContext, before any view sees them
+ */
+
+import * as pdfjsLib from 'pdfjs-dist';
+import { generateThumbnailForFile } from '../utils/thumbnailUtils';
+import { pdfWorkerManager } from './pdfWorkerManager';
+
+export interface ProcessedFileMetadata {
+ totalPages: number;
+ pages: Array<{
+ pageNumber: number;
+ thumbnail?: string;
+ rotation: number;
+ splitBefore: boolean;
+ }>;
+ thumbnailUrl?: string; // Page 1 thumbnail for FileEditor
+ lastProcessed: number;
+}
+
+export interface FileProcessingResult {
+ success: boolean;
+ metadata?: ProcessedFileMetadata;
+ error?: string;
+}
+
+interface ProcessingOperation {
+ promise: Promise;
+ abortController: AbortController;
+}
+
+class FileProcessingService {
+ private processingCache = new Map();
+
+ /**
+ * Process a file to extract metadata, page count, and generate thumbnails
+ * This is the single source of truth for file processing
+ */
+ async processFile(file: File, fileId: string): Promise {
+ // Check if we're already processing this file
+ const existingOperation = this.processingCache.get(fileId);
+ if (existingOperation) {
+ console.log(`π FileProcessingService: Using cached processing for ${file.name}`);
+ return existingOperation.promise;
+ }
+
+ // Create abort controller for this operation
+ const abortController = new AbortController();
+
+ // Create processing promise
+ const processingPromise = this.performProcessing(file, fileId, abortController);
+
+ // Store operation with abort controller
+ const operation: ProcessingOperation = {
+ promise: processingPromise,
+ abortController
+ };
+ this.processingCache.set(fileId, operation);
+
+ // Clean up cache after completion
+ processingPromise.finally(() => {
+ this.processingCache.delete(fileId);
+ });
+
+ return processingPromise;
+ }
+
+ private async performProcessing(file: File, fileId: string, abortController: AbortController): Promise {
+ console.log(`π FileProcessingService: Starting processing for ${file.name} (${fileId})`);
+
+ try {
+ // Check for cancellation at start
+ if (abortController.signal.aborted) {
+ throw new Error('Processing cancelled');
+ }
+
+ let totalPages = 1;
+ let thumbnailUrl: string | undefined;
+
+ // Handle PDF files
+ if (file.type === 'application/pdf') {
+ // Read arrayBuffer once and reuse for both PDF.js and fallback
+ const arrayBuffer = await file.arrayBuffer();
+
+ // Check for cancellation after async operation
+ if (abortController.signal.aborted) {
+ throw new Error('Processing cancelled');
+ }
+
+ // Discover page count using PDF.js (most accurate)
+ try {
+ const pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
+ disableAutoFetch: true,
+ disableStream: true
+ });
+
+ totalPages = pdfDoc.numPages;
+ console.log(`π FileProcessingService: PDF.js discovered ${totalPages} pages for ${file.name}`);
+
+ // Clean up immediately
+ pdfWorkerManager.destroyDocument(pdfDoc);
+
+ // Check for cancellation after PDF.js processing
+ if (abortController.signal.aborted) {
+ throw new Error('Processing cancelled');
+ }
+ } catch (pdfError) {
+ console.warn(`π FileProcessingService: PDF.js failed for ${file.name}, setting pages to 0:`, pdfError);
+ totalPages = 0; // Unknown page count - UI will hide page count display
+ }
+ }
+
+ // Generate page 1 thumbnail
+ try {
+ thumbnailUrl = await generateThumbnailForFile(file);
+ console.log(`π FileProcessingService: Generated thumbnail for ${file.name}`);
+
+ // Check for cancellation after thumbnail generation
+ if (abortController.signal.aborted) {
+ throw new Error('Processing cancelled');
+ }
+ } catch (thumbError) {
+ console.warn(`π FileProcessingService: Thumbnail generation failed for ${file.name}:`, thumbError);
+ }
+
+ // Create page structure
+ const pages = Array.from({ length: totalPages }, (_, index) => ({
+ pageNumber: index + 1,
+ thumbnail: index === 0 ? thumbnailUrl : undefined, // Only page 1 gets thumbnail initially
+ rotation: 0,
+ splitBefore: false
+ }));
+
+ const metadata: ProcessedFileMetadata = {
+ totalPages,
+ pages,
+ thumbnailUrl, // For FileEditor display
+ lastProcessed: Date.now()
+ };
+
+ console.log(`π FileProcessingService: Processing complete for ${file.name} - ${totalPages} pages`);
+
+ return {
+ success: true,
+ metadata
+ };
+
+ } catch (error) {
+ console.error(`π FileProcessingService: Processing failed for ${file.name}:`, error);
+
+ return {
+ success: false,
+ error: error instanceof Error ? error.message : 'Unknown processing error'
+ };
+ }
+ }
+
+ /**
+ * Clear all processing caches
+ */
+ clearCache(): void {
+ this.processingCache.clear();
+ }
+
+ /**
+ * Check if a file is currently being processed
+ */
+ isProcessing(fileId: string): boolean {
+ return this.processingCache.has(fileId);
+ }
+
+ /**
+ * Cancel processing for a specific file
+ */
+ cancelProcessing(fileId: string): boolean {
+ const operation = this.processingCache.get(fileId);
+ if (operation) {
+ operation.abortController.abort();
+ console.log(`π FileProcessingService: Cancelled processing for ${fileId}`);
+ return true;
+ }
+ return false;
+ }
+
+ /**
+ * Cancel all ongoing processing operations
+ */
+ cancelAllProcessing(): void {
+ this.processingCache.forEach((operation, fileId) => {
+ operation.abortController.abort();
+ console.log(`π FileProcessingService: Cancelled processing for ${fileId}`);
+ });
+ console.log(`π FileProcessingService: Cancelled ${this.processingCache.size} processing operations`);
+ }
+
+ /**
+ * Emergency cleanup - cancel all processing and destroy workers
+ */
+ emergencyCleanup(): void {
+ this.cancelAllProcessing();
+ this.clearCache();
+ pdfWorkerManager.destroyAllDocuments();
+ }
+}
+
+// Export singleton instance
+export const fileProcessingService = new FileProcessingService();
\ No newline at end of file
diff --git a/frontend/src/services/fileStorage.ts b/frontend/src/services/fileStorage.ts
index 1e7a73ee5..cdbe183a5 100644
--- a/frontend/src/services/fileStorage.ts
+++ b/frontend/src/services/fileStorage.ts
@@ -1,8 +1,11 @@
/**
* IndexedDB File Storage Service
* Provides high-capacity file storage for PDF processing
+ * Now uses centralized IndexedDB manager
*/
+import { indexedDBManager, DATABASE_CONFIGS } from './indexedDBManager';
+
export interface StoredFile {
id: string;
name: string;
@@ -22,75 +25,26 @@ export interface StorageStats {
}
class FileStorageService {
- private dbName = 'stirling-pdf-files';
- private dbVersion = 2; // Increment version to force schema update
- private storeName = 'files';
- private db: IDBDatabase | null = null;
- private initPromise: Promise | null = null;
+ private readonly dbConfig = DATABASE_CONFIGS.FILES;
+ private readonly storeName = 'files';
/**
- * Initialize the IndexedDB database (singleton pattern)
+ * Get database connection using centralized manager
*/
- async init(): Promise {
- if (this.db) {
- return Promise.resolve();
- }
-
- if (this.initPromise) {
- return this.initPromise;
- }
-
- this.initPromise = new Promise((resolve, reject) => {
- const request = indexedDB.open(this.dbName, this.dbVersion);
-
- request.onerror = () => {
- this.initPromise = null;
- reject(request.error);
- };
-
- request.onsuccess = () => {
- this.db = request.result;
- console.log('IndexedDB connection established');
- resolve();
- };
-
- request.onupgradeneeded = (event) => {
- const db = (event.target as IDBOpenDBRequest).result;
- const oldVersion = (event as any).oldVersion;
-
- console.log('IndexedDB upgrade needed from version', oldVersion, 'to', this.dbVersion);
-
- // Only recreate object store if it doesn't exist or if upgrading from version < 2
- if (!db.objectStoreNames.contains(this.storeName)) {
- const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
- store.createIndex('name', 'name', { unique: false });
- store.createIndex('lastModified', 'lastModified', { unique: false });
- console.log('IndexedDB object store created with keyPath: id');
- } else if (oldVersion < 2) {
- // Only delete and recreate if upgrading from version 1 to 2
- db.deleteObjectStore(this.storeName);
- const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
- store.createIndex('name', 'name', { unique: false });
- store.createIndex('lastModified', 'lastModified', { unique: false });
- console.log('IndexedDB object store recreated with keyPath: id (version upgrade)');
- }
- };
- });
-
- return this.initPromise;
+ private async getDatabase(): Promise {
+ return indexedDBManager.openDatabase(this.dbConfig);
}
/**
- * Store a file in IndexedDB
+ * Store a file in IndexedDB with external UUID
*/
- async storeFile(file: File, thumbnail?: string): Promise {
- if (!this.db) await this.init();
+ async storeFile(file: File, fileId: string, thumbnail?: string): Promise {
+ const db = await this.getDatabase();
- const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
const arrayBuffer = await file.arrayBuffer();
const storedFile: StoredFile = {
- id,
+ id: fileId, // Use provided UUID
name: file.name,
type: file.type,
size: file.size,
@@ -101,13 +55,13 @@ class FileStorageService {
return new Promise((resolve, reject) => {
try {
- const transaction = this.db!.transaction([this.storeName], 'readwrite');
+ const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
// Debug logging
console.log('Object store keyPath:', store.keyPath);
- console.log('Storing file:', {
- id: storedFile.id,
+ console.log('Storing file with UUID:', {
+ id: storedFile.id, // Now a UUID from FileContext
name: storedFile.name,
hasData: !!storedFile.data,
dataSize: storedFile.data.byteLength
@@ -135,10 +89,10 @@ class FileStorageService {
* Retrieve a file from IndexedDB
*/
async getFile(id: string): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readonly');
+ const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.get(id);
@@ -151,10 +105,10 @@ class FileStorageService {
* Get all stored files (WARNING: loads all data into memory)
*/
async getAllFiles(): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readonly');
+ const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.getAll();
@@ -176,10 +130,10 @@ class FileStorageService {
* Get metadata of all stored files (without loading data into memory)
*/
async getAllFileMetadata(): Promise[]> {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readonly');
+ const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.openCursor();
const files: Omit[] = [];
@@ -202,7 +156,7 @@ class FileStorageService {
}
cursor.continue();
} else {
- console.log('Loaded metadata for', files.length, 'files without loading data');
+ // Metadata loaded efficiently without file data
resolve(files);
}
};
@@ -213,10 +167,10 @@ class FileStorageService {
* Delete a file from IndexedDB
*/
async deleteFile(id: string): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readwrite');
+ const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const request = store.delete(id);
@@ -229,9 +183,9 @@ class FileStorageService {
* Update the lastModified timestamp of a file (for most recently used sorting)
*/
async touchFile(id: string): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readwrite');
+ const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const getRequest = store.get(id);
@@ -255,10 +209,10 @@ class FileStorageService {
* Clear all stored files
*/
async clearAll(): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readwrite');
+ const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const request = store.clear();
@@ -271,8 +225,6 @@ class FileStorageService {
* Get storage statistics (only our IndexedDB usage)
*/
async getStorageStats(): Promise {
- if (!this.db) await this.init();
-
let used = 0;
let available = 0;
let quota: number | undefined;
@@ -315,10 +267,10 @@ class FileStorageService {
* Get file count quickly without loading metadata
*/
async getFileCount(): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readonly');
+ const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
const request = store.count();
@@ -365,9 +317,9 @@ class FileStorageService {
// Also check our specific database with different versions
for (let version = 1; version <= 3; version++) {
try {
- console.log(`Trying to open ${this.dbName} version ${version}...`);
+ console.log(`Trying to open ${this.dbConfig.name} version ${version}...`);
const db = await new Promise((resolve, reject) => {
- const request = indexedDB.open(this.dbName, version);
+ const request = indexedDB.open(this.dbConfig.name, version);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
request.onupgradeneeded = () => {
@@ -400,10 +352,10 @@ class FileStorageService {
* Debug method to check what's actually in the database
*/
async debugDatabaseContents(): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
- const transaction = this.db!.transaction([this.storeName], 'readonly');
+ const transaction = db.transaction([this.storeName], 'readonly');
const store = transaction.objectStore(this.storeName);
// First try getAll to see if there's anything
@@ -460,7 +412,8 @@ class FileStorageService {
}
/**
- * Convert StoredFile back to File object for compatibility
+ * Convert StoredFile back to pure File object without mutations
+ * Returns a clean File object - use FileContext.addStoredFiles() for proper metadata handling
*/
createFileFromStored(storedFile: StoredFile): File {
if (!storedFile || !storedFile.data) {
@@ -477,13 +430,26 @@ class FileStorageService {
lastModified: storedFile.lastModified
});
- // Add custom properties for compatibility
- Object.defineProperty(file, 'id', { value: storedFile.id, writable: false });
- Object.defineProperty(file, 'thumbnail', { value: storedFile.thumbnail, writable: false });
-
+ // Use FileContext.addStoredFiles() to properly associate with metadata
return file;
}
+ /**
+ * Convert StoredFile to the format expected by FileContext.addStoredFiles()
+ * This is the recommended way to load stored files into FileContext
+ */
+ createFileWithMetadata(storedFile: StoredFile): { file: File; originalId: string; metadata: { thumbnail?: string } } {
+ const file = this.createFileFromStored(storedFile);
+
+ return {
+ file,
+ originalId: storedFile.id,
+ metadata: {
+ thumbnail: storedFile.thumbnail
+ }
+ };
+ }
+
/**
* Create blob URL for stored file
*/
@@ -527,11 +493,11 @@ class FileStorageService {
* Update thumbnail for an existing file
*/
async updateThumbnail(id: string, thumbnail: string): Promise {
- if (!this.db) await this.init();
+ const db = await this.getDatabase();
return new Promise((resolve, reject) => {
try {
- const transaction = this.db!.transaction([this.storeName], 'readwrite');
+ const transaction = db.transaction([this.storeName], 'readwrite');
const store = transaction.objectStore(this.storeName);
const getRequest = store.get(id);
diff --git a/frontend/src/services/indexedDBManager.ts b/frontend/src/services/indexedDBManager.ts
new file mode 100644
index 000000000..2048c021f
--- /dev/null
+++ b/frontend/src/services/indexedDBManager.ts
@@ -0,0 +1,227 @@
+/**
+ * Centralized IndexedDB Manager
+ * Handles all database initialization, schema management, and migrations
+ * Prevents race conditions and duplicate schema upgrades
+ */
+
+export interface DatabaseConfig {
+ name: string;
+ version: number;
+ stores: {
+ name: string;
+ keyPath?: string | string[];
+ autoIncrement?: boolean;
+ indexes?: {
+ name: string;
+ keyPath: string | string[];
+ unique: boolean;
+ }[];
+ }[];
+}
+
+class IndexedDBManager {
+ private static instance: IndexedDBManager;
+ private databases = new Map();
+ private initPromises = new Map>();
+
+ private constructor() {}
+
+ static getInstance(): IndexedDBManager {
+ if (!IndexedDBManager.instance) {
+ IndexedDBManager.instance = new IndexedDBManager();
+ }
+ return IndexedDBManager.instance;
+ }
+
+ /**
+ * Open or get existing database connection
+ */
+ async openDatabase(config: DatabaseConfig): Promise {
+ const existingDb = this.databases.get(config.name);
+ if (existingDb) {
+ return existingDb;
+ }
+
+ const existingPromise = this.initPromises.get(config.name);
+ if (existingPromise) {
+ return existingPromise;
+ }
+
+ const initPromise = this.performDatabaseInit(config);
+ this.initPromises.set(config.name, initPromise);
+
+ try {
+ const db = await initPromise;
+ this.databases.set(config.name, db);
+ return db;
+ } catch (error) {
+ this.initPromises.delete(config.name);
+ throw error;
+ }
+ }
+
+ private performDatabaseInit(config: DatabaseConfig): Promise {
+ return new Promise((resolve, reject) => {
+ console.log(`Opening IndexedDB: ${config.name} v${config.version}`);
+ const request = indexedDB.open(config.name, config.version);
+
+ request.onerror = () => {
+ console.error(`Failed to open ${config.name}:`, request.error);
+ reject(request.error);
+ };
+
+ request.onsuccess = () => {
+ const db = request.result;
+ console.log(`Successfully opened ${config.name}`);
+
+ // Set up close handler to clean up our references
+ db.onclose = () => {
+ console.log(`Database ${config.name} closed`);
+ this.databases.delete(config.name);
+ this.initPromises.delete(config.name);
+ };
+
+ resolve(db);
+ };
+
+ request.onupgradeneeded = (event) => {
+ const db = request.result;
+ const oldVersion = event.oldVersion;
+
+ console.log(`Upgrading ${config.name} from v${oldVersion} to v${config.version}`);
+
+ // Create or update object stores
+ config.stores.forEach(storeConfig => {
+ let store: IDBObjectStore;
+
+ if (db.objectStoreNames.contains(storeConfig.name)) {
+ // Store exists - for now, just continue (could add migration logic here)
+ console.log(`Object store '${storeConfig.name}' already exists`);
+ return;
+ }
+
+ // Create new object store
+ const options: IDBObjectStoreParameters = {};
+ if (storeConfig.keyPath) {
+ options.keyPath = storeConfig.keyPath;
+ }
+ if (storeConfig.autoIncrement) {
+ options.autoIncrement = storeConfig.autoIncrement;
+ }
+
+ store = db.createObjectStore(storeConfig.name, options);
+ console.log(`Created object store '${storeConfig.name}'`);
+
+ // Create indexes
+ if (storeConfig.indexes) {
+ storeConfig.indexes.forEach(indexConfig => {
+ store.createIndex(
+ indexConfig.name,
+ indexConfig.keyPath,
+ { unique: indexConfig.unique }
+ );
+ console.log(`Created index '${indexConfig.name}' on '${storeConfig.name}'`);
+ });
+ }
+ });
+ };
+ });
+ }
+
+ /**
+ * Get database connection (must be already opened)
+ */
+ getDatabase(name: string): IDBDatabase | null {
+ return this.databases.get(name) || null;
+ }
+
+ /**
+ * Close database connection
+ */
+ closeDatabase(name: string): void {
+ const db = this.databases.get(name);
+ if (db) {
+ db.close();
+ this.databases.delete(name);
+ this.initPromises.delete(name);
+ }
+ }
+
+ /**
+ * Close all database connections
+ */
+ closeAllDatabases(): void {
+ this.databases.forEach((db, name) => {
+ console.log(`Closing database: ${name}`);
+ db.close();
+ });
+ this.databases.clear();
+ this.initPromises.clear();
+ }
+
+ /**
+ * Delete database completely
+ */
+ async deleteDatabase(name: string): Promise {
+ // Close connection if open
+ this.closeDatabase(name);
+
+ return new Promise((resolve, reject) => {
+ const deleteRequest = indexedDB.deleteDatabase(name);
+
+ deleteRequest.onerror = () => reject(deleteRequest.error);
+ deleteRequest.onsuccess = () => {
+ console.log(`Deleted database: ${name}`);
+ resolve();
+ };
+ });
+ }
+
+ /**
+ * Check if a database exists and what version it is
+ */
+ async getDatabaseVersion(name: string): Promise {
+ return new Promise((resolve) => {
+ const request = indexedDB.open(name);
+ request.onsuccess = () => {
+ const db = request.result;
+ const version = db.version;
+ db.close();
+ resolve(version);
+ };
+ request.onerror = () => resolve(null);
+ request.onupgradeneeded = () => {
+ // Cancel the upgrade
+ request.transaction?.abort();
+ resolve(null);
+ };
+ });
+ }
+}
+
+// Pre-defined database configurations
+export const DATABASE_CONFIGS = {
+ FILES: {
+ name: 'stirling-pdf-files',
+ version: 2,
+ stores: [{
+ name: 'files',
+ keyPath: 'id',
+ indexes: [
+ { name: 'name', keyPath: 'name', unique: false },
+ { name: 'lastModified', keyPath: 'lastModified', unique: false }
+ ]
+ }]
+ } as DatabaseConfig,
+
+ DRAFTS: {
+ name: 'stirling-pdf-drafts',
+ version: 1,
+ stores: [{
+ name: 'drafts',
+ keyPath: 'id'
+ }]
+ } as DatabaseConfig
+} as const;
+
+export const indexedDBManager = IndexedDBManager.getInstance();
\ No newline at end of file
diff --git a/frontend/src/services/pdfProcessingService.ts b/frontend/src/services/pdfProcessingService.ts
index 2b0dae0f0..065f53210 100644
--- a/frontend/src/services/pdfProcessingService.ts
+++ b/frontend/src/services/pdfProcessingService.ts
@@ -1,9 +1,6 @@
-import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist';
import { ProcessedFile, ProcessingState, PDFPage } from '../types/processing';
import { ProcessingCache } from './processingCache';
-
-// Set up PDF.js worker
-GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+import { pdfWorkerManager } from './pdfWorkerManager';
export class PDFProcessingService {
private static instance: PDFProcessingService;
@@ -96,7 +93,7 @@ export class PDFProcessingService {
onProgress: (progress: number) => void
): Promise {
const arrayBuffer = await file.arrayBuffer();
- const pdf = await getDocument({ data: arrayBuffer }).promise;
+ const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
const totalPages = pdf.numPages;
onProgress(10); // PDF loaded
@@ -129,7 +126,7 @@ export class PDFProcessingService {
onProgress(progress);
}
- pdf.destroy();
+ pdfWorkerManager.destroyDocument(pdf);
onProgress(100);
return {
diff --git a/frontend/src/services/pdfWorkerManager.ts b/frontend/src/services/pdfWorkerManager.ts
new file mode 100644
index 000000000..c31bc5f88
--- /dev/null
+++ b/frontend/src/services/pdfWorkerManager.ts
@@ -0,0 +1,203 @@
+/**
+ * PDF.js Worker Manager - Centralized worker lifecycle management
+ *
+ * Prevents infinite worker creation by managing PDF.js workers globally
+ * and ensuring proper cleanup when operations complete.
+ */
+
+import * as pdfjsLib from 'pdfjs-dist';
+const { getDocument, GlobalWorkerOptions } = pdfjsLib;
+
+class PDFWorkerManager {
+ private static instance: PDFWorkerManager;
+ private activeDocuments = new Set();
+ private workerCount = 0;
+ private maxWorkers = 3; // Limit concurrent workers
+ private isInitialized = false;
+
+ private constructor() {
+ this.initializeWorker();
+ }
+
+ static getInstance(): PDFWorkerManager {
+ if (!PDFWorkerManager.instance) {
+ PDFWorkerManager.instance = new PDFWorkerManager();
+ }
+ return PDFWorkerManager.instance;
+ }
+
+ /**
+ * Initialize PDF.js worker once globally
+ */
+ private initializeWorker(): void {
+ if (!this.isInitialized) {
+ GlobalWorkerOptions.workerSrc = '/pdf.worker.js';
+ this.isInitialized = true;
+ console.log('π PDF.js worker initialized');
+ }
+ }
+
+ /**
+ * Create a PDF document with proper lifecycle management
+ * Supports ArrayBuffer, Uint8Array, URL string, or {data: ArrayBuffer} object
+ */
+ async createDocument(
+ data: ArrayBuffer | Uint8Array | string | { data: ArrayBuffer },
+ options: {
+ disableAutoFetch?: boolean;
+ disableStream?: boolean;
+ stopAtErrors?: boolean;
+ verbosity?: number;
+ } = {}
+ ): Promise {
+ // Wait if we've hit the worker limit
+ if (this.activeDocuments.size >= this.maxWorkers) {
+ console.warn(`π PDF Worker limit reached (${this.maxWorkers}), waiting for available worker...`);
+ await this.waitForAvailableWorker();
+ }
+
+ // Normalize input data to PDF.js format
+ let pdfData: any;
+ if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
+ pdfData = { data };
+ } else if (typeof data === 'string') {
+ pdfData = data; // URL string
+ } else if (data && typeof data === 'object' && 'data' in data) {
+ pdfData = data; // Already in {data: ArrayBuffer} format
+ } else {
+ pdfData = data; // Pass through as-is
+ }
+
+ const loadingTask = getDocument(
+ typeof pdfData === 'string' ? {
+ url: pdfData,
+ disableAutoFetch: options.disableAutoFetch ?? true,
+ disableStream: options.disableStream ?? true,
+ stopAtErrors: options.stopAtErrors ?? false,
+ verbosity: options.verbosity ?? 0
+ } : {
+ ...pdfData,
+ disableAutoFetch: options.disableAutoFetch ?? true,
+ disableStream: options.disableStream ?? true,
+ stopAtErrors: options.stopAtErrors ?? false,
+ verbosity: options.verbosity ?? 0
+ }
+ );
+
+ try {
+ const pdf = await loadingTask.promise;
+ this.activeDocuments.add(pdf);
+ this.workerCount++;
+
+ console.log(`π PDF document created (active: ${this.activeDocuments.size}/${this.maxWorkers})`);
+
+ return pdf;
+ } catch (error) {
+ // If document creation fails, make sure to clean up the loading task
+ if (loadingTask) {
+ try {
+ loadingTask.destroy();
+ } catch (destroyError) {
+ console.warn('π Error destroying failed loading task:', destroyError);
+ }
+ }
+ throw error;
+ }
+ }
+
+ /**
+ * Properly destroy a PDF document and clean up resources
+ */
+ destroyDocument(pdf: any): void {
+ if (this.activeDocuments.has(pdf)) {
+ try {
+ pdf.destroy();
+ this.activeDocuments.delete(pdf);
+ this.workerCount = Math.max(0, this.workerCount - 1);
+
+ console.log(`π PDF document destroyed (active: ${this.activeDocuments.size}/${this.maxWorkers})`);
+ } catch (error) {
+ console.warn('π Error destroying PDF document:', error);
+ // Still remove from tracking even if destroy failed
+ this.activeDocuments.delete(pdf);
+ this.workerCount = Math.max(0, this.workerCount - 1);
+ }
+ }
+ }
+
+ /**
+ * Destroy all active PDF documents
+ */
+ destroyAllDocuments(): void {
+ console.log(`π Destroying all PDF documents (${this.activeDocuments.size} active)`);
+
+ const documentsToDestroy = Array.from(this.activeDocuments);
+ documentsToDestroy.forEach(pdf => {
+ this.destroyDocument(pdf);
+ });
+
+ this.activeDocuments.clear();
+ this.workerCount = 0;
+
+ console.log('π All PDF documents destroyed');
+ }
+
+ /**
+ * Wait for a worker to become available
+ */
+ private async waitForAvailableWorker(): Promise {
+ return new Promise((resolve) => {
+ const checkAvailability = () => {
+ if (this.activeDocuments.size < this.maxWorkers) {
+ resolve();
+ } else {
+ setTimeout(checkAvailability, 100);
+ }
+ };
+ checkAvailability();
+ });
+ }
+
+ /**
+ * Get current worker statistics
+ */
+ getWorkerStats() {
+ return {
+ active: this.activeDocuments.size,
+ max: this.maxWorkers,
+ total: this.workerCount
+ };
+ }
+
+ /**
+ * Force cleanup of all workers (emergency cleanup)
+ */
+ emergencyCleanup(): void {
+ console.warn('π Emergency PDF worker cleanup initiated');
+
+ // Force destroy all documents
+ this.activeDocuments.forEach(pdf => {
+ try {
+ pdf.destroy();
+ } catch (error) {
+ console.warn('π Emergency cleanup - error destroying document:', error);
+ }
+ });
+
+ this.activeDocuments.clear();
+ this.workerCount = 0;
+
+ console.warn('π Emergency cleanup completed');
+ }
+
+ /**
+ * Set maximum concurrent workers
+ */
+ setMaxWorkers(max: number): void {
+ this.maxWorkers = Math.max(1, Math.min(max, 10)); // Between 1-10 workers
+ console.log(`π Max workers set to ${this.maxWorkers}`);
+ }
+}
+
+// Export singleton instance
+export const pdfWorkerManager = PDFWorkerManager.getInstance();
\ No newline at end of file
diff --git a/frontend/src/services/thumbnailGenerationService.ts b/frontend/src/services/thumbnailGenerationService.ts
index 3f16a23ea..a1c221269 100644
--- a/frontend/src/services/thumbnailGenerationService.ts
+++ b/frontend/src/services/thumbnailGenerationService.ts
@@ -1,7 +1,9 @@
/**
- * High-performance thumbnail generation service using Web Workers
+ * High-performance thumbnail generation service using main thread processing
*/
+import { pdfWorkerManager } from './pdfWorkerManager';
+
interface ThumbnailResult {
pageNumber: number;
thumbnail: string;
@@ -22,245 +24,136 @@ interface CachedThumbnail {
sizeBytes: number;
}
+interface CachedPDFDocument {
+ pdf: any; // PDFDocumentProxy from pdfjs-dist
+ lastUsed: number;
+ refCount: number;
+}
+
export class ThumbnailGenerationService {
- private workers: Worker[] = [];
- private activeJobs = new Map();
- private jobCounter = 0;
- private isGenerating = false;
-
// Session-based thumbnail cache
private thumbnailCache = new Map();
private maxCacheSizeBytes = 1024 * 1024 * 1024; // 1GB cache limit
private currentCacheSize = 0;
- constructor(private maxWorkers: number = 3) {
- this.initializeWorkers();
- }
+ // PDF document cache to reuse PDF instances and avoid creating multiple workers
+ private pdfDocumentCache = new Map();
+ private maxPdfCacheSize = 10; // Keep up to 10 PDF documents cached
- private initializeWorkers(): void {
- const workerPromises: Promise[] = [];
-
- for (let i = 0; i < this.maxWorkers; i++) {
- const workerPromise = new Promise((resolve) => {
- try {
- console.log(`Attempting to create worker ${i}...`);
- const worker = new Worker('/thumbnailWorker.js');
- let workerReady = false;
- let pingTimeout: NodeJS.Timeout;
-
- worker.onmessage = (e) => {
- const { type, data, jobId } = e.data;
-
- // Handle PONG response to confirm worker is ready
- if (type === 'PONG') {
- workerReady = true;
- clearTimeout(pingTimeout);
- console.log(`β Worker ${i} is ready and responsive`);
- resolve(worker);
- return;
- }
-
- const job = this.activeJobs.get(jobId);
- if (!job) return;
-
- switch (type) {
- case 'PROGRESS':
- if (job.onProgress) {
- job.onProgress(data);
- }
- break;
-
- case 'COMPLETE':
- job.resolve(data.thumbnails);
- this.activeJobs.delete(jobId);
- break;
-
- case 'ERROR':
- job.reject(new Error(data.error));
- this.activeJobs.delete(jobId);
- break;
- }
- };
-
- worker.onerror = (error) => {
- console.error(`β Worker ${i} failed with error:`, error);
- clearTimeout(pingTimeout);
- worker.terminate();
- resolve(null);
- };
-
- // Test worker with timeout
- pingTimeout = setTimeout(() => {
- if (!workerReady) {
- console.warn(`β Worker ${i} timed out (no PONG response)`);
- worker.terminate();
- resolve(null);
- }
- }, 3000); // Reduced timeout for faster feedback
-
- // Send PING to test worker
- try {
- worker.postMessage({ type: 'PING' });
- } catch (pingError) {
- console.error(`β Failed to send PING to worker ${i}:`, pingError);
- clearTimeout(pingTimeout);
- worker.terminate();
- resolve(null);
- }
-
- } catch (error) {
- console.error(`β Failed to create worker ${i}:`, error);
- resolve(null);
- }
- });
-
- workerPromises.push(workerPromise);
- }
-
- // Wait for all workers to initialize or fail
- Promise.all(workerPromises).then((workers) => {
- this.workers = workers.filter((w): w is Worker => w !== null);
- const successCount = this.workers.length;
- const failCount = this.maxWorkers - successCount;
-
- console.log(`π§ Worker initialization complete: ${successCount}/${this.maxWorkers} workers ready`);
-
- if (failCount > 0) {
- console.warn(`β οΈ ${failCount} workers failed to initialize - will use main thread fallback`);
- }
-
- if (successCount === 0) {
- console.warn('π¨ No Web Workers available - all thumbnail generation will use main thread');
- }
- });
+ constructor(private maxWorkers: number = 3) {
+ // PDF rendering requires DOM access, so we use optimized main thread processing
}
/**
- * Generate thumbnails for multiple pages using Web Workers
+ * Get or create a cached PDF document
+ */
+ private async getCachedPDFDocument(fileId: string, pdfArrayBuffer: ArrayBuffer): Promise {
+ const cached = this.pdfDocumentCache.get(fileId);
+ if (cached) {
+ cached.lastUsed = Date.now();
+ cached.refCount++;
+ return cached.pdf;
+ }
+
+ // Evict old PDFs if cache is full
+ while (this.pdfDocumentCache.size >= this.maxPdfCacheSize) {
+ this.evictLeastRecentlyUsedPDF();
+ }
+
+ // Use centralized worker manager instead of direct getDocument
+ const pdf = await pdfWorkerManager.createDocument(pdfArrayBuffer, {
+ disableAutoFetch: true,
+ disableStream: true,
+ stopAtErrors: false
+ });
+
+ this.pdfDocumentCache.set(fileId, {
+ pdf,
+ lastUsed: Date.now(),
+ refCount: 1
+ });
+
+ return pdf;
+ }
+
+ /**
+ * Release a reference to a cached PDF document
+ */
+ private releasePDFDocument(fileId: string): void {
+ const cached = this.pdfDocumentCache.get(fileId);
+ if (cached) {
+ cached.refCount--;
+ // Don't destroy immediately - keep in cache for potential reuse
+ }
+ }
+
+ /**
+ * Evict the least recently used PDF document
+ */
+ private evictLeastRecentlyUsedPDF(): void {
+ let oldestEntry: [string, CachedPDFDocument] | null = null;
+ let oldestTime = Date.now();
+
+ for (const [key, value] of this.pdfDocumentCache.entries()) {
+ if (value.lastUsed < oldestTime && value.refCount === 0) {
+ oldestTime = value.lastUsed;
+ oldestEntry = [key, value];
+ }
+ }
+
+ if (oldestEntry) {
+ pdfWorkerManager.destroyDocument(oldestEntry[1].pdf); // Use worker manager for cleanup
+ this.pdfDocumentCache.delete(oldestEntry[0]);
+ }
+ }
+
+ /**
+ * Generate thumbnails for multiple pages using main thread processing
*/
async generateThumbnails(
+ fileId: string,
pdfArrayBuffer: ArrayBuffer,
pageNumbers: number[],
options: ThumbnailGenerationOptions = {},
onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
): Promise {
- if (this.isGenerating) {
- console.warn('π¨ ThumbnailService: Thumbnail generation already in progress, rejecting new request');
- throw new Error('Thumbnail generation already in progress');
+ // Input validation
+ if (!fileId || typeof fileId !== 'string' || fileId.trim() === '') {
+ throw new Error('generateThumbnails: fileId must be a non-empty string');
+ }
+
+ if (!pdfArrayBuffer || pdfArrayBuffer.byteLength === 0) {
+ throw new Error('generateThumbnails: pdfArrayBuffer must not be empty');
+ }
+
+ if (!pageNumbers || pageNumbers.length === 0) {
+ throw new Error('generateThumbnails: pageNumbers must not be empty');
}
- console.log(`π¬ ThumbnailService: Starting thumbnail generation for ${pageNumbers.length} pages`);
- this.isGenerating = true;
-
const {
scale = 0.2,
- quality = 0.8,
- batchSize = 20, // Pages per worker
- parallelBatches = this.maxWorkers
+ quality = 0.8
} = options;
- try {
- // Check if workers are available, fallback to main thread if not
- if (this.workers.length === 0) {
- console.warn('No Web Workers available, falling back to main thread processing');
- return await this.generateThumbnailsMainThread(pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
- }
-
- // Split pages across workers
- const workerBatches = this.distributeWork(pageNumbers, this.workers.length);
- console.log(`π§ ThumbnailService: Distributing ${pageNumbers.length} pages across ${this.workers.length} workers:`, workerBatches.map(batch => batch.length));
- const jobPromises: Promise[] = [];
-
- for (let i = 0; i < workerBatches.length; i++) {
- const batch = workerBatches[i];
- if (batch.length === 0) continue;
-
- const worker = this.workers[i % this.workers.length];
- const jobId = `job-${++this.jobCounter}`;
- console.log(`π§ ThumbnailService: Sending job ${jobId} with ${batch.length} pages to worker ${i}:`, batch);
-
- const promise = new Promise((resolve, reject) => {
- // Add timeout for worker jobs
- const timeout = setTimeout(() => {
- console.error(`β° ThumbnailService: Worker job ${jobId} timed out`);
- this.activeJobs.delete(jobId);
- reject(new Error(`Worker job ${jobId} timed out`));
- }, 60000); // 1 minute timeout
-
- // Create job with timeout handling
- this.activeJobs.set(jobId, {
- resolve: (result: any) => {
- console.log(`β
ThumbnailService: Job ${jobId} completed with ${result.length} thumbnails`);
- clearTimeout(timeout);
- resolve(result);
- },
- reject: (error: any) => {
- console.error(`β ThumbnailService: Job ${jobId} failed:`, error);
- clearTimeout(timeout);
- reject(error);
- },
- onProgress: onProgress ? (progressData: any) => {
- console.log(`π ThumbnailService: Job ${jobId} progress - ${progressData.completed}/${progressData.total} (${progressData.thumbnails.length} new)`);
- onProgress(progressData);
- } : undefined
- });
-
- worker.postMessage({
- type: 'GENERATE_THUMBNAILS',
- jobId,
- data: {
- pdfArrayBuffer,
- pageNumbers: batch,
- scale,
- quality
- }
- });
- });
-
- jobPromises.push(promise);
- }
-
- // Wait for all workers to complete
- const results = await Promise.all(jobPromises);
-
- // Flatten and sort results by page number
- const allThumbnails = results.flat().sort((a, b) => a.pageNumber - b.pageNumber);
- console.log(`π― ThumbnailService: All workers completed, returning ${allThumbnails.length} thumbnails`);
-
- return allThumbnails;
-
- } catch (error) {
- console.error('Web Worker thumbnail generation failed, falling back to main thread:', error);
- return await this.generateThumbnailsMainThread(pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
- } finally {
- console.log('π ThumbnailService: Resetting isGenerating flag');
- this.isGenerating = false;
- }
+ return await this.generateThumbnailsMainThread(fileId, pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
}
/**
- * Fallback thumbnail generation on main thread
+ * Main thread thumbnail generation with batching for UI responsiveness
*/
private async generateThumbnailsMainThread(
+ fileId: string,
pdfArrayBuffer: ArrayBuffer,
pageNumbers: number[],
scale: number,
quality: number,
onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
): Promise {
- console.log(`π§ ThumbnailService: Fallback to main thread for ${pageNumbers.length} pages`);
-
- // Import PDF.js dynamically for main thread
- const { getDocument } = await import('pdfjs-dist');
-
- // Load PDF once
- const pdf = await getDocument({ data: pdfArrayBuffer }).promise;
- console.log(`β ThumbnailService: PDF loaded on main thread`);
-
+ const pdf = await this.getCachedPDFDocument(fileId, pdfArrayBuffer);
const allResults: ThumbnailResult[] = [];
let completed = 0;
- const batchSize = 5; // Small batches for UI responsiveness
+ const batchSize = 3; // Smaller batches for better UI responsiveness
// Process pages in small batches
for (let i = 0; i < pageNumbers.length; i += batchSize) {
@@ -308,143 +201,99 @@ export class ThumbnailGenerationService {
});
}
- // Small delay to keep UI responsive
- if (i + batchSize < pageNumbers.length) {
- await new Promise(resolve => setTimeout(resolve, 10));
- }
+ // Yield control to prevent UI blocking
+ await new Promise(resolve => setTimeout(resolve, 1));
}
- // Clean up
- pdf.destroy();
-
- return allResults.filter(r => r.success);
+ // Release reference to PDF document (don't destroy - keep in cache)
+ this.releasePDFDocument(fileId);
+ return allResults;
}
/**
- * Distribute work evenly across workers
- */
- private distributeWork(pageNumbers: number[], numWorkers: number): number[][] {
- const batches: number[][] = Array(numWorkers).fill(null).map(() => []);
-
- pageNumbers.forEach((pageNum, index) => {
- const workerIndex = index % numWorkers;
- batches[workerIndex].push(pageNum);
- });
-
- return batches;
- }
-
- /**
- * Generate a single thumbnail (fallback for individual pages)
- */
- async generateSingleThumbnail(
- pdfArrayBuffer: ArrayBuffer,
- pageNumber: number,
- options: ThumbnailGenerationOptions = {}
- ): Promise {
- const results = await this.generateThumbnails(pdfArrayBuffer, [pageNumber], options);
-
- if (results.length === 0 || !results[0].success) {
- throw new Error(`Failed to generate thumbnail for page ${pageNumber}`);
- }
-
- return results[0].thumbnail;
- }
-
- /**
- * Add thumbnail to cache with size management
- */
- addThumbnailToCache(pageId: string, thumbnail: string): void {
- const thumbnailSizeBytes = thumbnail.length * 0.75; // Rough base64 size estimate
- const now = Date.now();
-
- // Add new thumbnail
- this.thumbnailCache.set(pageId, {
- thumbnail,
- lastUsed: now,
- sizeBytes: thumbnailSizeBytes
- });
-
- this.currentCacheSize += thumbnailSizeBytes;
-
- // If we exceed 1GB, trigger cleanup
- if (this.currentCacheSize > this.maxCacheSizeBytes) {
- this.cleanupThumbnailCache();
- }
- }
-
- /**
- * Get thumbnail from cache and update last used timestamp
+ * Cache management
*/
getThumbnailFromCache(pageId: string): string | null {
const cached = this.thumbnailCache.get(pageId);
- if (!cached) return null;
-
- // Update last used timestamp
- cached.lastUsed = Date.now();
-
- return cached.thumbnail;
+ if (cached) {
+ cached.lastUsed = Date.now();
+ return cached.thumbnail;
+ }
+ return null;
}
- /**
- * Clean up cache using LRU eviction
- */
- private cleanupThumbnailCache(): void {
- const entries = Array.from(this.thumbnailCache.entries());
+ addThumbnailToCache(pageId: string, thumbnail: string): void {
+ const sizeBytes = thumbnail.length * 2; // Rough estimate for base64 string
- // Sort by last used (oldest first)
- entries.sort(([, a], [, b]) => a.lastUsed - b.lastUsed);
+ // Enforce cache size limits
+ while (this.currentCacheSize + sizeBytes > this.maxCacheSizeBytes && this.thumbnailCache.size > 0) {
+ this.evictLeastRecentlyUsed();
+ }
+
+ this.thumbnailCache.set(pageId, {
+ thumbnail,
+ lastUsed: Date.now(),
+ sizeBytes
+ });
- this.thumbnailCache.clear();
- this.currentCacheSize = 0;
- const targetSize = this.maxCacheSizeBytes * 0.8; // Clean to 80% of limit
-
- // Keep most recently used entries until we hit target size
- for (let i = entries.length - 1; i >= 0 && this.currentCacheSize < targetSize; i--) {
- const [key, value] = entries[i];
- this.thumbnailCache.set(key, value);
- this.currentCacheSize += value.sizeBytes;
+ this.currentCacheSize += sizeBytes;
+ }
+
+ private evictLeastRecentlyUsed(): void {
+ let oldestEntry: [string, CachedThumbnail] | null = null;
+ let oldestTime = Date.now();
+
+ for (const [key, value] of this.thumbnailCache.entries()) {
+ if (value.lastUsed < oldestTime) {
+ oldestTime = value.lastUsed;
+ oldestEntry = [key, value];
+ }
+ }
+
+ if (oldestEntry) {
+ this.thumbnailCache.delete(oldestEntry[0]);
+ this.currentCacheSize -= oldestEntry[1].sizeBytes;
}
}
- /**
- * Clear all cached thumbnails
- */
- clearThumbnailCache(): void {
- this.thumbnailCache.clear();
- this.currentCacheSize = 0;
- }
-
- /**
- * Get cache statistics
- */
getCacheStats() {
return {
- entries: this.thumbnailCache.size,
- totalSizeBytes: this.currentCacheSize,
+ size: this.thumbnailCache.size,
+ sizeBytes: this.currentCacheSize,
maxSizeBytes: this.maxCacheSizeBytes
};
}
- /**
- * Stop generation but keep cache and workers alive
- */
stopGeneration(): void {
- this.activeJobs.clear();
- this.isGenerating = false;
+ // No-op since we removed workers
+ }
+
+ clearCache(): void {
+ this.thumbnailCache.clear();
+ this.currentCacheSize = 0;
+ }
+
+ clearPDFCache(): void {
+ // Destroy all cached PDF documents using worker manager
+ for (const [, cached] of this.pdfDocumentCache) {
+ pdfWorkerManager.destroyDocument(cached.pdf);
+ }
+ this.pdfDocumentCache.clear();
+ }
+
+ clearPDFCacheForFile(fileId: string): void {
+ const cached = this.pdfDocumentCache.get(fileId);
+ if (cached) {
+ pdfWorkerManager.destroyDocument(cached.pdf);
+ this.pdfDocumentCache.delete(fileId);
+ }
}
- /**
- * Terminate all workers and clear cache (only on explicit cleanup)
- */
destroy(): void {
- this.workers.forEach(worker => worker.terminate());
- this.workers = [];
- this.activeJobs.clear();
- this.isGenerating = false;
- this.clearThumbnailCache();
+ this.clearCache();
+ this.clearPDFCache();
}
}
-// Export singleton instance
+// Global singleton instance
export const thumbnailGenerationService = new ThumbnailGenerationService();
\ No newline at end of file
diff --git a/frontend/src/theme/mantineTheme.ts b/frontend/src/theme/mantineTheme.ts
index a8552b2bb..561e456f7 100644
--- a/frontend/src/theme/mantineTheme.ts
+++ b/frontend/src/theme/mantineTheme.ts
@@ -283,7 +283,7 @@ export const mantineTheme = createTheme({
},
control: {
color: 'var(--text-secondary)',
- '[dataActive]': {
+ '[data-active]': {
backgroundColor: 'var(--bg-surface)',
color: 'var(--text-primary)',
boxShadow: 'var(--shadow-sm)',
diff --git a/frontend/src/tools/AddPassword.tsx b/frontend/src/tools/AddPassword.tsx
index 20b603044..5b8b33adc 100644
--- a/frontend/src/tools/AddPassword.tsx
+++ b/frontend/src/tools/AddPassword.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@@ -17,8 +17,8 @@ import { BaseToolProps } from "../types/tool";
const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
- const { setCurrentMode } = useFileContext();
- const { selectedFiles } = useToolFileSelection();
+ const { actions } = useNavigationActions();
+ const { selectedFiles } = useFileSelection();
const [collapsedPermissions, setCollapsedPermissions] = useState(true);
@@ -30,6 +30,8 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
// Endpoint validation
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
+
+
useEffect(() => {
addPasswordOperation.resetResults();
onPreviewFile?.(null);
@@ -51,13 +53,11 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "addPassword");
- setCurrentMode("viewer");
};
const handleSettingsReset = () => {
addPasswordOperation.resetResults();
onPreviewFile?.(null);
- setCurrentMode("addPassword");
};
const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/AddWatermark.tsx b/frontend/src/tools/AddWatermark.tsx
index 01306e6f0..1e36a3820 100644
--- a/frontend/src/tools/AddWatermark.tsx
+++ b/frontend/src/tools/AddWatermark.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@@ -25,8 +25,8 @@ import { BaseToolProps } from "../types/tool";
const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
- const { setCurrentMode } = useFileContext();
- const { selectedFiles } = useToolFileSelection();
+ const { actions } = useNavigationActions();
+ const { selectedFiles } = useFileSelection();
const [collapsedType, setCollapsedType] = useState(false);
const [collapsedStyle, setCollapsedStyle] = useState(true);
@@ -43,6 +43,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
// Endpoint validation
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("add-watermark");
+
useEffect(() => {
watermarkOperation.resetResults();
onPreviewFile?.(null);
@@ -71,13 +72,11 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "watermark");
- setCurrentMode("viewer");
};
const handleSettingsReset = () => {
watermarkOperation.resetResults();
onPreviewFile?.(null);
- setCurrentMode("watermark");
};
const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/ChangePermissions.tsx b/frontend/src/tools/ChangePermissions.tsx
index 928422059..254dd4d2f 100644
--- a/frontend/src/tools/ChangePermissions.tsx
+++ b/frontend/src/tools/ChangePermissions.tsx
@@ -1,8 +1,8 @@
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@@ -15,8 +15,8 @@ import { BaseToolProps } from "../types/tool";
const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
- const { setCurrentMode } = useFileContext();
- const { selectedFiles } = useToolFileSelection();
+ const { actions } = useNavigationActions();
+ const { selectedFiles } = useFileSelection();
const changePermissionsParams = useChangePermissionsParameters();
const changePermissionsOperation = useChangePermissionsOperation();
@@ -48,13 +48,11 @@ const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "changePermissions");
- setCurrentMode("viewer");
};
const handleSettingsReset = () => {
changePermissionsOperation.resetResults();
onPreviewFile?.(null);
- setCurrentMode("changePermissions");
};
const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Compress.tsx b/frontend/src/tools/Compress.tsx
index d7e0ebc2c..ea3fdf977 100644
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@@ -1,8 +1,8 @@
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@@ -15,8 +15,8 @@ import { useCompressTips } from "../components/tooltips/useCompressTips";
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
- const { setCurrentMode } = useFileContext();
- const { selectedFiles } = useToolFileSelection();
+ const { actions } = useNavigationActions();
+ const { selectedFiles } = useFileSelection();
const compressParams = useCompressParameters();
const compressOperation = useCompressOperation();
@@ -46,13 +46,12 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "compress");
- setCurrentMode("viewer");
};
const handleSettingsReset = () => {
compressOperation.resetResults();
onPreviewFile?.(null);
- setCurrentMode("compress");
+ actions.setMode("compress");
};
const hasFiles = selectedFiles.length > 0;
diff --git a/frontend/src/tools/Convert.tsx b/frontend/src/tools/Convert.tsx
index e2616f4a4..e2220f9ce 100644
--- a/frontend/src/tools/Convert.tsx
+++ b/frontend/src/tools/Convert.tsx
@@ -1,8 +1,8 @@
import React, { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-import { useFileContext } from "../contexts/FileContext";
-import { useToolFileSelection } from "../contexts/FileSelectionContext";
+import { useFileState, useFileSelection } from "../contexts/FileContext";
+import { useNavigationActions } from "../contexts/NavigationContext";
import { createToolFlow } from "../components/tools/shared/createToolFlow";
@@ -14,8 +14,10 @@ import { BaseToolProps } from "../types/tool";
const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation();
- const { setCurrentMode, activeFiles } = useFileContext();
- const { selectedFiles } = useToolFileSelection();
+ const { selectors } = useFileState();
+ const { actions } = useNavigationActions();
+ const activeFiles = selectors.getFiles();
+ const { selectedFiles } = useFileSelection();
const scrollContainerRef = useRef(null);
const convertParams = useConvertParameters();
@@ -46,7 +48,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
convertParams.resetParameters();
}
}
- }, [selectedFiles, activeFiles]);
+ }, [selectedFiles, activeFiles, convertParams.analyzeFileTypes, convertParams.resetParameters]);
useEffect(() => {
// Only clear results if we're not currently processing and parameters changed
@@ -84,13 +86,11 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const handleThumbnailClick = (file: File) => {
onPreviewFile?.(file);
sessionStorage.setItem("previousMode", "convert");
- setCurrentMode("viewer");
};
const handleSettingsReset = () => {
convertOperation.resetResults();
onPreviewFile?.(null);
- setCurrentMode("convert");
};
return createToolFlow({
diff --git a/frontend/src/tools/Merge.tsx b/frontend/src/tools/Merge.tsx
deleted file mode 100644
index c28b2287c..000000000
--- a/frontend/src/tools/Merge.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Paper, Button, Checkbox, Stack, Text, Group, Loader, Alert } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
-import { useEndpointEnabled } from "../hooks/useEndpointConfig";
-
-export interface MergePdfPanelProps {
- files: FileWithUrl[];
- setDownloadUrl: (url: string) => void;
- params: {
- order: string;
- removeDuplicates: boolean;
- };
- updateParams: (newParams: Partial) => void;
-}
-
-const MergePdfPanel: React.FC = ({ files, setDownloadUrl, params, updateParams }) => {
- const { t } = useTranslation();
- const [selectedFiles, setSelectedFiles] = useState