= ({
+ type,
+ count = 8,
+ animated = true
+}) => {
+ const animationStyle = animated ? { animation: 'pulse 2s infinite' } : {};
+
+ const renderPageGridSkeleton = () => (
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ );
+
+ const renderFileGridSkeleton = () => (
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ );
+
+ const renderControlsSkeleton = () => (
+
+
+
+
+
+ );
+
+ const renderViewerSkeleton = () => (
+
+ {/* Toolbar skeleton */}
+
+
+
+
+
+
+ {/* Main content skeleton */}
+
+
+ );
+
+ switch (type) {
+ case 'pageGrid':
+ return renderPageGridSkeleton();
+ case 'fileGrid':
+ return renderFileGridSkeleton();
+ case 'controls':
+ return renderControlsSkeleton();
+ case 'viewer':
+ return renderViewerSkeleton();
+ default:
+ return null;
+ }
+};
+
+export default SkeletonLoader;
\ No newline at end of file
diff --git a/frontend/src/components/shared/TopControls.tsx b/frontend/src/components/shared/TopControls.tsx
index cab50337a..41b261673 100644
--- a/frontend/src/components/shared/TopControls.tsx
+++ b/frontend/src/components/shared/TopControls.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { Button, SegmentedControl } from "@mantine/core";
+import React, { useState, useCallback } from "react";
+import { Button, SegmentedControl, Loader } from "@mantine/core";
import { useRainbowThemeContext } from "./RainbowThemeProvider";
import LanguageSelector from "./LanguageSelector";
import rainbowStyles from '../../styles/rainbow.module.css';
@@ -11,11 +11,16 @@ import EditNoteIcon from "@mui/icons-material/EditNote";
import FolderIcon from "@mui/icons-material/Folder";
import { Group } from "@mantine/core";
-const VIEW_OPTIONS = [
+// This will be created inside the component to access switchingTo
+const createViewOptions = (switchingTo: string | null) => [
{
label: (
-
+ {switchingTo === "viewer" ? (
+
+ ) : (
+
+ )}
),
value: "viewer",
@@ -23,7 +28,11 @@ const VIEW_OPTIONS = [
{
label: (
-
+ {switchingTo === "pageEditor" ? (
+
+ ) : (
+
+ )}
),
value: "pageEditor",
@@ -31,7 +40,11 @@ const VIEW_OPTIONS = [
{
label: (
-
+ {switchingTo === "fileEditor" ? (
+
+ ) : (
+
+ )}
),
value: "fileEditor",
@@ -48,6 +61,23 @@ const TopControls = ({
setCurrentView,
}: TopControlsProps) => {
const { themeMode, isRainbowMode, isToggleDisabled, toggleTheme } = useRainbowThemeContext();
+ const [switchingTo, setSwitchingTo] = useState(null);
+
+ const handleViewChange = useCallback((view: string) => {
+ // Show immediate feedback
+ setSwitchingTo(view);
+
+ // Defer the heavy view change to next frame so spinner can render
+ requestAnimationFrame(() => {
+ // Give the spinner one more frame to show
+ requestAnimationFrame(() => {
+ setCurrentView(view);
+
+ // Clear the loading state after view change completes
+ setTimeout(() => setSwitchingTo(null), 300);
+ });
+ });
+ }, [setCurrentView]);
const getThemeIcon = () => {
if (isRainbowMode) return ;
@@ -80,14 +110,18 @@ const TopControls = ({
diff --git a/frontend/src/components/viewer/Viewer.tsx b/frontend/src/components/viewer/Viewer.tsx
index bbf218016..91d7bacf3 100644
--- a/frontend/src/components/viewer/Viewer.tsx
+++ b/frontend/src/components/viewer/Viewer.tsx
@@ -11,6 +11,7 @@ import ViewWeekIcon from "@mui/icons-material/ViewWeek"; // for dual page (book)
import DescriptionIcon from "@mui/icons-material/Description"; // for single page
import { useLocalStorage } from "@mantine/hooks";
import { fileStorage } from "../../services/fileStorage";
+import SkeletonLoader from '../shared/SkeletonLoader';
GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
@@ -414,9 +415,9 @@ const Viewer = ({
) : loading ? (
-
-
-
+
+
+
) : (
}
+ | { type: 'SET_MERGED_DOCUMENT'; payload: { key: string; document: PDFDocument } }
+ | { type: 'CLEAR_MERGED_DOCUMENTS' }
+ | { type: 'SET_CURRENT_VIEW'; payload: ViewType }
+ | { type: 'SET_CURRENT_TOOL'; payload: ToolType }
+ | { type: 'SET_SELECTED_FILES'; payload: string[] }
+ | { type: 'SET_SELECTED_PAGES'; payload: string[] }
+ | { 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: 'SET_EXPORT_CONFIG'; payload: FileContextState['lastExportConfig'] }
+ | { 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
+ selectedPageIds: []
+ };
+
+ case 'ADD_FILES':
+ return {
+ ...state,
+ activeFiles: [...state.activeFiles, ...action.payload]
+ };
+
+ case 'REMOVE_FILES':
+ const remainingFiles = state.activeFiles.filter(file =>
+ !action.payload.includes(file.name) // Simple ID for now, could use file.name or generate IDs
+ );
+ return {
+ ...state,
+ activeFiles: remainingFiles,
+ selectedFileIds: state.selectedFileIds.filter(id => !action.payload.includes(id))
+ };
+
+ case 'SET_PROCESSED_FILES':
+ return {
+ ...state,
+ processedFiles: action.payload
+ };
+
+ case 'SET_MERGED_DOCUMENT':
+ const newMergedDocuments = new Map(state.mergedDocuments);
+ newMergedDocuments.set(action.payload.key, action.payload.document);
+ return {
+ ...state,
+ mergedDocuments: newMergedDocuments
+ };
+
+ case 'CLEAR_MERGED_DOCUMENTS':
+ return {
+ ...state,
+ mergedDocuments: new Map()
+ };
+
+ case 'SET_CURRENT_VIEW':
+ return {
+ ...state,
+ currentView: action.payload,
+ // Clear tool when switching views
+ currentTool: null
+ };
+
+ case 'SET_CURRENT_TOOL':
+ return {
+ ...state,
+ currentTool: action.payload
+ };
+
+ case 'SET_SELECTED_FILES':
+ return {
+ ...state,
+ selectedFileIds: action.payload
+ };
+
+ case 'SET_SELECTED_PAGES':
+ return {
+ ...state,
+ selectedPageIds: action.payload
+ };
+
+ case 'CLEAR_SELECTIONS':
+ return {
+ ...state,
+ selectedFileIds: [],
+ selectedPageIds: []
+ };
+
+ 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 'SET_EXPORT_CONFIG':
+ return {
+ ...state,
+ lastExportConfig: action.payload
+ };
+
+ case 'RESET_CONTEXT':
+ return {
+ ...initialState,
+ mergedDocuments: new Map() // Ensure clean state
+ };
+
+ case 'LOAD_STATE':
+ return {
+ ...state,
+ ...action.payload
+ };
+
+ default:
+ return state;
+ }
+}
+
+// Context
+const FileContext = createContext(undefined);
+
+// Provider component
+export function FileContextProvider({
+ children,
+ enableUrlSync = true,
+ enablePersistence = true,
+ maxCacheSize = 1024 * 1024 * 1024 // 1GB
+}: FileContextProviderProps) {
+ const [state, dispatch] = useReducer(fileContextReducer, initialState);
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ // Cleanup timers and refs
+ const cleanupTimers = useRef>(new Map());
+ const blobUrls = useRef>(new Set());
+ const pdfDocuments = useRef>(new Map());
+
+ // 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
+ });
+
+ // 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]);
+
+ // URL synchronization
+ const syncUrlParams = useCallback(() => {
+ if (!enableUrlSync) return;
+
+ const params: FileContextUrlParams = {};
+
+ if (state.currentView !== 'fileEditor') params.view = state.currentView;
+ if (state.currentTool) params.tool = state.currentTool;
+ if (state.selectedFileIds.length > 0) params.fileIds = state.selectedFileIds;
+ if (state.selectedPageIds.length > 0) params.pageIds = state.selectedPageIds;
+ if (state.viewerConfig.zoom !== 1.0) params.zoom = state.viewerConfig.zoom;
+ if (state.viewerConfig.currentPage !== 1) params.page = state.viewerConfig.currentPage;
+
+ // Update URL params without causing navigation
+ const newParams = new URLSearchParams(searchParams);
+ Object.entries(params).forEach(([key, value]) => {
+ if (Array.isArray(value)) {
+ newParams.set(key, value.join(','));
+ } else if (value !== undefined) {
+ newParams.set(key, value.toString());
+ }
+ });
+
+ // Remove empty params
+ Object.keys(params).forEach(key => {
+ if (!params[key as keyof FileContextUrlParams]) {
+ newParams.delete(key);
+ }
+ });
+
+ setSearchParams(newParams, { replace: true });
+ }, [state, searchParams, setSearchParams, enableUrlSync]);
+
+ // Load from URL params on mount
+ useEffect(() => {
+ if (!enableUrlSync) return;
+
+ const view = searchParams.get('view') as ViewType;
+ const tool = searchParams.get('tool') as ToolType;
+ const zoom = searchParams.get('zoom');
+ const page = searchParams.get('page');
+
+ if (view && view !== state.currentView) {
+ dispatch({ type: 'SET_CURRENT_VIEW', payload: view });
+ }
+ if (tool && tool !== state.currentTool) {
+ dispatch({ type: 'SET_CURRENT_TOOL', payload: tool });
+ }
+ if (zoom || page) {
+ dispatch({
+ type: 'UPDATE_VIEWER_CONFIG',
+ payload: {
+ ...(zoom && { zoom: parseFloat(zoom) }),
+ ...(page && { currentPage: parseInt(page) })
+ }
+ });
+ }
+ }, []);
+
+ // Sync URL when state changes
+ useEffect(() => {
+ syncUrlParams();
+ }, [syncUrlParams]);
+
+ // Centralized memory management
+ const trackBlobUrl = useCallback((url: string) => {
+ blobUrls.current.add(url);
+ }, []);
+
+ const trackPdfDocument = useCallback((fileId: string, pdfDoc: any) => {
+ // 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
+ if (typeof window !== 'undefined' && window.gc) {
+ 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[]) => {
+ dispatch({ type: 'ADD_FILES', payload: files });
+
+ // Auto-save to IndexedDB if persistence enabled
+ if (enablePersistence) {
+ for (const file of files) {
+ try {
+ await fileStorage.storeFile(file);
+ } catch (error) {
+ console.error('Failed to store file:', error);
+ }
+ }
+ }
+ }, [enablePersistence]);
+
+ const removeFiles = useCallback((fileIds: string[]) => {
+ // 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 });
+
+ // Clear merged documents that included removed files
+ // This is a simple approach - clear all merged docs when any file is removed
+ // Could be optimized to only clear affected merged documents
+ dispatch({ type: 'CLEAR_MERGED_DOCUMENTS' });
+
+ // Remove from IndexedDB
+ if (enablePersistence) {
+ fileIds.forEach(async (fileId) => {
+ try {
+ await fileStorage.removeFile(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' });
+ dispatch({ type: 'CLEAR_MERGED_DOCUMENTS' });
+ }, [cleanupAllFiles]);
+
+ const setCurrentView = useCallback((view: ViewType) => {
+ // Update view immediately for instant UI response
+ dispatch({ type: 'SET_CURRENT_VIEW', payload: view });
+
+ // REMOVED: Aggressive cleanup on view switch
+ // This was destroying cached processed files and causing re-processing
+ // We should only cleanup when files are actually removed or app closes
+
+ // Optional: Light memory pressure relief only for very large docs
+ if (state.currentView !== view && state.activeFiles.length > 0) {
+ // Only hint at garbage collection, don't destroy caches
+ if (window.requestIdleCallback && typeof window !== 'undefined' && window.gc) {
+ window.requestIdleCallback(() => {
+ // Very light cleanup - just GC hint, no cache destruction
+ window.gc();
+ }, { timeout: 5000 });
+ }
+ }
+ }, [state.currentView, state.activeFiles]);
+
+ const setCurrentTool = useCallback((tool: ToolType) => {
+ dispatch({ type: 'SET_CURRENT_TOOL', payload: tool });
+ }, []);
+
+ const setSelectedFiles = useCallback((fileIds: string[]) => {
+ dispatch({ type: 'SET_SELECTED_FILES', payload: fileIds });
+ }, []);
+
+ const setSelectedPages = useCallback((pageIds: string[]) => {
+ dispatch({ type: 'SET_SELECTED_PAGES', payload: pageIds });
+ }, []);
+
+ 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) => {
+ // TODO: Implement undo logic
+ 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 });
+ }, []);
+
+ // Utility functions
+ const getFileById = useCallback((fileId: string): File | undefined => {
+ return state.activeFiles.find(file => file.name === fileId); // Simple ID matching
+ }, [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,
+ selectedPageIds: state.selectedPageIds,
+ 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]);
+
+ // Merged document management functions
+ const generateMergedDocumentKey = useCallback((files: File[]): string => {
+ // Create stable key from file names and sizes
+ const fileDescriptors = files
+ .map(file => `${file.name}-${file.size}-${file.lastModified}`)
+ .sort() // Sort for consistent key regardless of order
+ .join('|');
+ return `merged:${fileDescriptors}`;
+ }, []);
+
+ const getMergedDocument = useCallback((fileIds: string[]): PDFDocument | undefined => {
+ // Convert fileIds to actual files to generate proper key
+ const files = fileIds.map(id => getFileById(id)).filter((f): f is File => f !== undefined);
+ if (files.length === 0) return undefined;
+
+ const key = generateMergedDocumentKey(files);
+ return state.mergedDocuments.get(key);
+ }, [state.mergedDocuments, getFileById, generateMergedDocumentKey]);
+
+ const setMergedDocument = useCallback((fileIds: string[], document: PDFDocument) => {
+ const files = fileIds.map(id => getFileById(id)).filter((f): f is File => f !== undefined);
+ if (files.length === 0) return;
+
+ const key = generateMergedDocumentKey(files);
+ dispatch({ type: 'SET_MERGED_DOCUMENT', payload: { key, document } });
+ }, [getFileById, generateMergedDocumentKey]);
+
+ const clearMergedDocuments = useCallback(() => {
+ dispatch({ type: 'CLEAR_MERGED_DOCUMENTS' });
+ }, []);
+
+ // Helper to get merged document from current active files
+ const getCurrentMergedDocument = useCallback((): PDFDocument | undefined => {
+ if (state.activeFiles.length === 0) return undefined;
+ const key = generateMergedDocumentKey(state.activeFiles);
+ return state.mergedDocuments.get(key);
+ }, [state.activeFiles, state.mergedDocuments, generateMergedDocumentKey]);
+
+ // Helper to set merged document for current active files
+ const setCurrentMergedDocument = useCallback((document: PDFDocument) => {
+ if (state.activeFiles.length === 0) return;
+ const key = generateMergedDocumentKey(state.activeFiles);
+ dispatch({ type: 'SET_MERGED_DOCUMENT', payload: { key, document } });
+ }, [state.activeFiles, generateMergedDocumentKey]);
+
+ // Auto-save context when it changes
+ useEffect(() => {
+ saveContext();
+ }, [saveContext]);
+
+ // Load context on mount
+ useEffect(() => {
+ loadContext();
+ }, [loadContext]);
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ console.log('FileContext unmounting - cleaning up all resources');
+ cleanupAllFiles();
+ };
+ }, [cleanupAllFiles]);
+
+ const contextValue: FileContextValue = {
+ // State
+ ...state,
+
+ // Actions
+ addFiles,
+ removeFiles,
+ replaceFile,
+ clearAllFiles,
+ setCurrentView,
+ setCurrentTool,
+ setSelectedFiles,
+ setSelectedPages,
+ clearSelections,
+ applyPageOperations,
+ applyFileOperation,
+ undoLastOperation,
+ updateViewerConfig,
+ setExportConfig,
+ getFileById,
+ getProcessedFileById,
+ getCurrentFile,
+ getCurrentProcessedFile,
+ saveContext,
+ loadContext,
+ resetContext,
+
+ // Merged document management
+ getMergedDocument,
+ setMergedDocument,
+ clearMergedDocuments,
+ getCurrentMergedDocument,
+ setCurrentMergedDocument,
+
+ // Memory management
+ trackBlobUrl,
+ trackPdfDocument,
+ cleanupFile,
+ scheduleCleanup
+ };
+
+ return (
+
+ {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');
+ }
+ return context;
+}
+
+// Helper hooks for specific aspects
+export function useCurrentFile() {
+ const { getCurrentFile, getCurrentProcessedFile } = useFileContext();
+ return {
+ file: getCurrentFile(),
+ processedFile: getCurrentProcessedFile()
+ };
+}
+
+export function useFileSelection() {
+ const {
+ selectedFileIds,
+ selectedPageIds,
+ setSelectedFiles,
+ setSelectedPages,
+ clearSelections
+ } = useFileContext();
+
+ return {
+ selectedFileIds,
+ selectedPageIds,
+ setSelectedFiles,
+ setSelectedPages,
+ clearSelections
+ };
+}
+
+export function useViewerState() {
+ const { viewerConfig, updateViewerConfig } = useFileContext();
+ return {
+ config: viewerConfig,
+ updateConfig: updateViewerConfig
+ };
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/useEnhancedProcessedFiles.ts b/frontend/src/hooks/useEnhancedProcessedFiles.ts
index ac122500e..69b7788ee 100644
--- a/frontend/src/hooks/useEnhancedProcessedFiles.ts
+++ b/frontend/src/hooks/useEnhancedProcessedFiles.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { ProcessedFile, ProcessingState, ProcessingConfig } from '../types/processing';
import { enhancedPDFProcessingService } from '../services/enhancedPDFProcessingService';
import { FileHasher } from '../utils/fileHash';
@@ -37,6 +37,7 @@ export function useEnhancedProcessedFiles(
config?: Partial
): UseEnhancedProcessedFilesResult {
const [processedFiles, setProcessedFiles] = useState>(new Map());
+ const fileHashMapRef = useRef>(new Map()); // Use ref to avoid state update loops
const [processingStates, setProcessingStates] = useState>(new Map());
// Subscribe to processing state changes once
@@ -47,8 +48,13 @@ export function useEnhancedProcessedFiles(
// Process files when activeFiles changes
useEffect(() => {
+ console.log('useEnhancedProcessedFiles: activeFiles changed', activeFiles.length, 'files');
+
if (activeFiles.length === 0) {
+ console.log('useEnhancedProcessedFiles: No active files, clearing processed cache');
setProcessedFiles(new Map());
+ // Clear any ongoing processing when no files
+ enhancedPDFProcessingService.clearAllProcessing();
return;
}
@@ -56,38 +62,47 @@ export function useEnhancedProcessedFiles(
const newProcessedFiles = new Map();
for (const file of activeFiles) {
- // Check if we already have this file processed
- const existing = processedFiles.get(file);
+ // Generate hash for this file
+ const fileHash = await FileHasher.generateHybridHash(file);
+ fileHashMapRef.current.set(file, fileHash);
+
+ // First, check if we have this exact File object cached
+ let existing = processedFiles.get(file);
+
+ // If not found by File object, try to find by hash in case File was recreated
+ if (!existing) {
+ for (const [cachedFile, processed] of processedFiles.entries()) {
+ const cachedHash = fileHashMapRef.current.get(cachedFile);
+ if (cachedHash === fileHash) {
+ existing = processed;
+ break;
+ }
+ }
+ }
+
if (existing) {
newProcessedFiles.set(file, existing);
continue;
}
try {
- // Generate proper file key matching the service
- const fileKey = await FileHasher.generateHybridHash(file);
- console.log('Processing file:', file.name);
-
const processed = await enhancedPDFProcessingService.processFile(file, config);
if (processed) {
- console.log('Got processed file for:', file.name);
newProcessedFiles.set(file, processed);
- } else {
- console.log('Processing started for:', file.name, '- waiting for completion');
}
} catch (error) {
console.error(`Failed to start processing for ${file.name}:`, error);
}
}
- // Update processed files if we have any
- if (newProcessedFiles.size > 0) {
+ // Update processed files (hash mapping is updated via ref)
+ if (newProcessedFiles.size > 0 || processedFiles.size > 0) {
setProcessedFiles(newProcessedFiles);
}
};
processFiles();
- }, [activeFiles]);
+ }, [activeFiles]); // Only depend on activeFiles to avoid infinite loops
// Listen for processing completion
useEffect(() => {
@@ -114,7 +129,6 @@ export function useEnhancedProcessedFiles(
try {
const processed = await enhancedPDFProcessingService.processFile(file, config);
if (processed) {
- console.log('Processing completed for:', file.name);
updatedFiles.set(file, processed);
hasNewFiles = true;
}
@@ -189,6 +203,13 @@ export function useEnhancedProcessedFiles(
}
};
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ enhancedPDFProcessingService.clearAllProcessing();
+ };
+ }, []);
+
return {
processedFiles,
processingStates,
diff --git a/frontend/src/hooks/useMemoryManagement.ts b/frontend/src/hooks/useMemoryManagement.ts
new file mode 100644
index 000000000..d27e5ed56
--- /dev/null
+++ b/frontend/src/hooks/useMemoryManagement.ts
@@ -0,0 +1,30 @@
+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/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 1660b6544..d33d81a83 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { useSearchParams } from "react-router-dom";
import { useToolParams } from "../hooks/useToolParams";
import { useFileWithUrl } from "../hooks/useFileWithUrl";
+import { useFileContext } from "../contexts/FileContext";
import { fileStorage } from "../services/fileStorage";
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
import ContentCutIcon from "@mui/icons-material/ContentCut";
@@ -13,7 +14,7 @@ import rainbowStyles from '../styles/rainbow.module.css';
import ToolPicker from "../components/tools/ToolPicker";
import TopControls from "../components/shared/TopControls";
-import FileEditor from "../components/pageEditor/FileEditor";
+import FileEditor from "../components/fileEditor/FileEditor";
import PageEditor from "../components/pageEditor/PageEditor";
import PageEditorControls from "../components/pageEditor/PageEditorControls";
import Viewer from "../components/viewer/Viewer";
@@ -47,14 +48,16 @@ export default function HomePage() {
const [searchParams] = useSearchParams();
const theme = useMantineTheme();
const { isRainbowMode } = useRainbowThemeContext();
+
+ // Get file context
+ const fileContext = useFileContext();
+ const { activeFiles, currentView, setCurrentView, addFiles } = fileContext;
// Core app state
const [selectedToolKey, setSelectedToolKey] = useState(searchParams.get("t") || "split");
- const [currentView, setCurrentView] = useState(searchParams.get("v") || "viewer");
// File state separation
const [storedFiles, setStoredFiles] = useState([]); // IndexedDB files (FileManager)
- const [activeFiles, setActiveFiles] = useState([]); // Active working set (persisted)
const [preSelectedFiles, setPreSelectedFiles] = useState([]);
const [downloadUrl, setDownloadUrl] = useState(null);
@@ -123,7 +126,7 @@ export default function HomePage() {
setLeftPanelView('toolContent'); // Switch to tool content view when a tool is selected
setReaderMode(false); // Exit reader mode when selecting a tool
},
- [toolRegistry]
+ [toolRegistry, setCurrentView]
);
// Handle quick access actions
@@ -138,33 +141,31 @@ export default function HomePage() {
// Update URL when view changes
const handleViewChange = useCallback((view: string) => {
- setCurrentView(view);
+ setCurrentView(view as any);
const params = new URLSearchParams(window.location.search);
params.set('view', view);
const newUrl = `${window.location.pathname}?${params.toString()}`;
window.history.replaceState({}, '', newUrl);
- }, []);
+ }, [setCurrentView]);
- // Active file management
- const addToActiveFiles = useCallback((file: File) => {
- setActiveFiles(prev => {
- // Avoid duplicates based on name and size
- const exists = prev.some(f => f.name === file.name && f.size === file.size);
- if (exists) return prev;
- return [file, ...prev];
- });
- }, []);
+ // Active file management using context
+ const addToActiveFiles = useCallback(async (file: File) => {
+ // Check if file already exists
+ const exists = activeFiles.some(f => f.name === file.name && f.size === file.size);
+ if (!exists) {
+ await addFiles([file]);
+ }
+ }, [activeFiles, addFiles]);
const removeFromActiveFiles = useCallback((file: File) => {
- setActiveFiles(prev => prev.filter(f => !(f.name === file.name && f.size === file.size)));
- }, []);
+ fileContext.removeFiles([file.name]);
+ }, [fileContext]);
- const setCurrentActiveFile = useCallback((file: File) => {
- setActiveFiles(prev => {
- const filtered = prev.filter(f => !(f.name === file.name && f.size === file.size));
- return [file, ...filtered];
- });
- }, []);
+ const setCurrentActiveFile = useCallback(async (file: File) => {
+ // Remove if exists, then add to front
+ const filtered = activeFiles.filter(f => !(f.name === file.name && f.size === file.size));
+ await addFiles([file, ...filtered]);
+ }, [activeFiles, addFiles]);
// Handle file selection from upload (adds to active files)
const handleFileSelect = useCallback((file: File) => {
@@ -213,13 +214,13 @@ export default function HomePage() {
// Filter out nulls and add to activeFiles
const validFiles = convertedFiles.filter((f): f is File => f !== null);
- setActiveFiles(validFiles);
+ await addFiles(validFiles);
setPreSelectedFiles([]); // Clear preselected since we're using activeFiles now
handleViewChange("fileEditor");
} catch (error) {
console.error('Error converting selected files:', error);
}
- }, [handleViewChange, setActiveFiles]);
+ }, [handleViewChange, addFiles]);
// Handle opening page editor with selected files
const handleOpenPageEditor = useCallback(async (selectedFiles) => {
@@ -262,12 +263,12 @@ export default function HomePage() {
// Filter out nulls and add to activeFiles
const validFiles = convertedFiles.filter((f): f is File => f !== null);
- setActiveFiles(validFiles);
+ await addFiles(validFiles);
handleViewChange("pageEditor");
} catch (error) {
console.error('Error converting selected files for page editor:', error);
}
- }, [handleViewChange, setActiveFiles]);
+ }, [handleViewChange, addFiles]);
const selectedTool = toolRegistry[selectedToolKey];
@@ -374,7 +375,12 @@ export default function HomePage() {
setCurrentView={handleViewChange}
/>
{/* Main content area */}
-
+
{!activeFiles[0] ? (
) : currentView === "fileEditor" ? (
setPreSelectedFiles([])}
onOpenPageEditor={(file) => {
setCurrentActiveFile(file);
handleViewChange("pageEditor");
@@ -419,7 +421,7 @@ export default function HomePage() {
if (fileObj) {
setCurrentActiveFile(fileObj.file);
} else {
- setActiveFiles([]);
+ fileContext.clearAllFiles();
}
}}
sidebarsVisible={sidebarsVisible}
@@ -428,14 +430,9 @@ export default function HomePage() {
) : currentView === "pageEditor" ? (
<>
- {activeFiles[0] && pageEditorFunctions && (
+ {pageEditorFunctions && (
) : (
-
+
+ {
+ addToActiveFiles(file);
+ }}
+ onFilesSelect={(files) => {
+ files.forEach(addToActiveFiles);
+ }}
+ accept={["application/pdf"]}
+ loading={false}
+ showRecentFiles={true}
+ maxRecentFiles={8}
+ />
+
)}
diff --git a/frontend/src/services/enhancedPDFProcessingService.ts b/frontend/src/services/enhancedPDFProcessingService.ts
index d630acdeb..ea825e353 100644
--- a/frontend/src/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/services/enhancedPDFProcessingService.ts
@@ -504,6 +504,27 @@ export class EnhancedPDFProcessingService {
this.notifyListeners();
}
+ /**
+ * Clear all processing for view switches
+ */
+ clearAllProcessing(): void {
+ // Cancel all ongoing processing
+ this.processing.forEach((state, key) => {
+ if (state.cancellationToken) {
+ state.cancellationToken.abort();
+ }
+ });
+
+ // Clear processing states
+ this.processing.clear();
+ this.notifyListeners();
+
+ // Force memory cleanup hint
+ if (typeof window !== 'undefined' && window.gc) {
+ setTimeout(() => window.gc(), 100);
+ }
+ }
+
/**
* Get cache statistics
*/
diff --git a/frontend/src/styles/skeleton.css b/frontend/src/styles/skeleton.css
new file mode 100644
index 000000000..ad3e7091b
--- /dev/null
+++ b/frontend/src/styles/skeleton.css
@@ -0,0 +1,30 @@
+/* Pulse animation for skeleton loaders */
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.4;
+ }
+}
+
+/* Shimmer animation for premium feel */
+@keyframes shimmer {
+ 0% {
+ background-position: -200px 0;
+ }
+ 100% {
+ background-position: calc(200px + 100%) 0;
+ }
+}
+
+.skeleton-shimmer {
+ background: linear-gradient(
+ 90deg,
+ var(--mantine-color-gray-1) 25%,
+ var(--mantine-color-gray-0) 50%,
+ var(--mantine-color-gray-1) 75%
+ );
+ background-size: 200px 100%;
+ animation: shimmer 2s infinite linear;
+}
\ No newline at end of file
diff --git a/frontend/src/types/fileContext.ts b/frontend/src/types/fileContext.ts
new file mode 100644
index 000000000..72c319b57
--- /dev/null
+++ b/frontend/src/types/fileContext.ts
@@ -0,0 +1,138 @@
+/**
+ * Types for global file context management across views and tools
+ */
+
+import { ProcessedFile } from './processing';
+import { PDFDocument, PDFPage, PageOperation } from './pageEditor';
+
+export type ViewType = 'viewer' | 'pageEditor' | 'fileEditor';
+
+export type ToolType = 'merge' | 'split' | 'compress' | null;
+
+export interface FileOperation {
+ id: string;
+ type: 'merge' | 'add' | 'remove' | 'replace';
+ timestamp: number;
+ fileIds: string[];
+ data?: any;
+}
+
+export interface ViewerConfig {
+ zoom: number;
+ currentPage: number;
+ viewMode: 'single' | 'continuous' | 'facing';
+ sidebarOpen: boolean;
+}
+
+export interface FileEditHistory {
+ fileId: string;
+ pageOperations: PageOperation[];
+ lastModified: number;
+}
+
+export interface FileContextState {
+ // Core file management
+ activeFiles: File[];
+ processedFiles: Map;
+
+ // Cached merged documents (for PageEditor performance)
+ mergedDocuments: Map;
+
+ // Current navigation state
+ currentView: ViewType;
+ currentTool: ToolType;
+
+ // Edit history and state
+ fileEditHistory: Map;
+ globalFileOperations: FileOperation[];
+
+ // UI state that persists across views
+ selectedFileIds: string[];
+ selectedPageIds: string[];
+ viewerConfig: ViewerConfig;
+
+ // Processing state
+ isProcessing: boolean;
+ processingProgress: number;
+
+ // Export state
+ lastExportConfig?: {
+ filename: string;
+ selectedOnly: boolean;
+ splitDocuments: boolean;
+ };
+}
+
+export interface FileContextActions {
+ // File management
+ addFiles: (files: File[]) => Promise;
+ removeFiles: (fileIds: string[]) => void;
+ replaceFile: (oldFileId: string, newFile: File) => Promise;
+ clearAllFiles: () => void;
+
+ // Navigation
+ setCurrentView: (view: ViewType) => void;
+ setCurrentTool: (tool: ToolType) => void;
+
+ // Selection management
+ setSelectedFiles: (fileIds: string[]) => void;
+ setSelectedPages: (pageIds: string[]) => void;
+ clearSelections: () => void;
+
+ // Edit operations
+ applyPageOperations: (fileId: string, operations: PageOperation[]) => void;
+ applyFileOperation: (operation: FileOperation) => void;
+ undoLastOperation: (fileId?: string) => void;
+
+ // Viewer state
+ updateViewerConfig: (config: Partial) => void;
+
+ // Export configuration
+ setExportConfig: (config: FileContextState['lastExportConfig']) => void;
+
+ // Merged document management
+ getMergedDocument: (fileIds: string[]) => PDFDocument | undefined;
+ setMergedDocument: (fileIds: string[], document: PDFDocument) => void;
+ clearMergedDocuments: () => void;
+
+ // Utility
+ getFileById: (fileId: string) => File | undefined;
+ getProcessedFileById: (fileId: string) => ProcessedFile | undefined;
+ getCurrentFile: () => File | undefined;
+ getCurrentProcessedFile: () => ProcessedFile | undefined;
+
+ // Context persistence
+ saveContext: () => Promise;
+ loadContext: () => Promise;
+ resetContext: () => void;
+
+ // Memory management
+ trackBlobUrl: (url: string) => void;
+ trackPdfDocument: (fileId: string, pdfDoc: any) => void;
+ cleanupFile: (fileId: string) => Promise;
+ scheduleCleanup: (fileId: string, delay?: number) => void;
+}
+
+export interface FileContextValue extends FileContextState, FileContextActions {}
+
+export interface FileContextProviderProps {
+ children: React.ReactNode;
+ enableUrlSync?: boolean;
+ enablePersistence?: boolean;
+ maxCacheSize?: number;
+}
+
+// Helper types for component props
+export interface WithFileContext {
+ fileContext: FileContextValue;
+}
+
+// URL parameter types for deep linking
+export interface FileContextUrlParams {
+ view?: ViewType;
+ tool?: ToolType;
+ fileIds?: string[];
+ pageIds?: string[];
+ zoom?: number;
+ page?: number;
+}
\ No newline at end of file
diff --git a/frontend/src/utils/thumbnailUtils.ts b/frontend/src/utils/thumbnailUtils.ts
index 1bc9bf069..f0c28631a 100644
--- a/frontend/src/utils/thumbnailUtils.ts
+++ b/frontend/src/utils/thumbnailUtils.ts
@@ -1,5 +1,19 @@
import { getDocument } from "pdfjs-dist";
+/**
+ * Calculate thumbnail scale based on file size
+ * Smaller files get higher quality, larger files get lower quality
+ */
+export function calculateScaleFromFileSize(fileSize: number): number {
+ const MB = 1024 * 1024;
+
+ if (fileSize < 1 * MB) return 0.6; // < 1MB: High quality
+ if (fileSize < 5 * MB) return 0.4; // 1-5MB: Medium-high quality
+ if (fileSize < 15 * MB) return 0.3; // 5-15MB: Medium quality
+ if (fileSize < 30 * MB) return 0.2; // 15-30MB: Low-medium quality
+ return 0.15; // 30MB+: Low quality
+}
+
/**
* Generate thumbnail for a PDF file during upload
* Returns base64 data URL or undefined if generation fails
@@ -14,6 +28,10 @@ export async function generateThumbnailForFile(file: File): Promise