= ({ selectedTool }) => {
- const { isFilesModalOpen, closeFilesModal, onFilesSelect, onStoredFilesSelect } = useFilesModalContext();
- const [recentFiles, setRecentFiles] = useState
([]);
+ const { isFilesModalOpen, closeFilesModal, onFileUpload, onRecentFileSelect } = useFilesModalContext();
+ const [recentFiles, setRecentFiles] = useState([]);
const [isDragging, setIsDragging] = useState(false);
const [isMobile, setIsMobile] = useState(false);
- const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile } = useFileManager();
-
- // Wrapper for storeFile that generates UUID
- const storeFileWithId = useCallback(async (file: File) => {
- const fileId = createFileId(); // Generate UUID for storage
- return await storeFile(file, fileId);
- }, [storeFile]);
+ const { loadRecentFiles, handleRemoveFile } = useFileManager();
// File management handlers
const isFileSupported = useCallback((fileName: string) => {
@@ -41,33 +34,26 @@ const FileManager: React.FC = ({ selectedTool }) => {
setRecentFiles(files);
}, [loadRecentFiles]);
- const handleFilesSelected = useCallback(async (files: FileMetadata[]) => {
+ const handleRecentFilesSelected = useCallback(async (files: StirlingFileStub[]) => {
try {
- // Use stored files flow that preserves original IDs
- const filesWithMetadata = await Promise.all(
- files.map(async (metadata) => ({
- file: await convertToFile(metadata),
- originalId: metadata.id,
- metadata
- }))
- );
- onStoredFilesSelect(filesWithMetadata);
+ // Use StirlingFileStubs directly - preserves all metadata!
+ onRecentFileSelect(files);
} catch (error) {
console.error('Failed to process selected files:', error);
}
- }, [convertToFile, onStoredFilesSelect]);
+ }, [onRecentFileSelect]);
const handleNewFileUpload = useCallback(async (files: File[]) => {
if (files.length > 0) {
try {
// Files will get IDs assigned through onFilesSelect -> FileContext addFiles
- onFilesSelect(files);
+ onFileUpload(files);
await refreshRecentFiles();
} catch (error) {
console.error('Failed to process dropped files:', error);
}
}
- }, [onFilesSelect, refreshRecentFiles]);
+ }, [onFileUpload, refreshRecentFiles]);
const handleRemoveFileByIndex = useCallback(async (index: number) => {
await handleRemoveFile(index, recentFiles, setRecentFiles);
@@ -92,7 +78,7 @@ const FileManager: React.FC = ({ selectedTool }) => {
// Cleanup any blob URLs when component unmounts
useEffect(() => {
return () => {
- // FileMetadata doesn't have blob URLs, so no cleanup needed
+ // StoredFileMetadata doesn't have blob URLs, so no cleanup needed
// Blob URLs are managed by FileContext and tool operations
console.log('FileManager unmounting - FileContext handles blob URL cleanup');
};
@@ -153,7 +139,7 @@ const FileManager: React.FC = ({ selectedTool }) => {
>
void;
- onMergeFiles?: (files: File[]) => void;
+ onOpenPageEditor?: () => void;
+ onMergeFiles?: (files: StirlingFile[]) => void;
toolMode?: boolean;
- showUpload?: boolean;
- showBulkActions?: boolean;
supportedExtensions?: string[];
}
const FileEditor = ({
- onOpenPageEditor,
- onMergeFiles,
toolMode = false,
- showUpload = true,
- showBulkActions = true,
supportedExtensions = ["pdf"]
}: FileEditorProps) => {
- const { t } = useTranslation();
// Utility function to check if a file extension is supported
const isFileSupported = useCallback((fileName: string): boolean => {
@@ -49,13 +35,10 @@ const FileEditor = ({
const { addFiles, removeFiles, reorderFiles } = useFileManagement();
// Extract needed values from state (memoized to prevent infinite loops)
- const activeFiles = useMemo(() => selectors.getFiles(), [selectors.getFilesSignature()]);
- const activeFileRecords = useMemo(() => selectors.getFileRecords(), [selectors.getFilesSignature()]);
+ const activeStirlingFileStubs = useMemo(() => selectors.getStirlingFileStubs(), [selectors.getFilesSignature()]);
const selectedFileIds = state.ui.selectedFileIds;
- const isProcessing = state.ui.isProcessing;
- // Get the real context actions
- const { actions } = useFileActions();
+ // Get navigation actions
const { actions: navActions } = useNavigationActions();
// Get file selection context
@@ -92,25 +75,9 @@ const FileEditor = ({
const contextSelectedIdsRef = useRef([]);
contextSelectedIdsRef.current = contextSelectedIds;
- // Use activeFileRecords directly - no conversion needed
+ // Use activeStirlingFileStubs directly - no conversion needed
const localSelectedIds = contextSelectedIds;
- // Helper to convert FileRecord to FileThumbnail format
- const recordToFileItem = useCallback((record: any) => {
- const file = selectors.getFile(record.id);
- if (!file) return null;
-
- return {
- id: record.id,
- name: file.name,
- pageCount: record.processedFile?.totalPages || 1,
- thumbnail: record.thumbnailUrl || '',
- size: file.size,
- file: file
- };
- }, [selectors]);
-
-
// Process uploaded files using context
const handleFileUpload = useCallback(async (uploadedFiles: File[]) => {
setError(null);
@@ -161,29 +128,9 @@ const FileEditor = ({
if (extractionResult.success) {
allExtractedFiles.push(...extractionResult.extractedFiles);
- // Record ZIP extraction operation
- const operationId = `zip-extract-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'convert',
- timestamp: Date.now(),
- fileIds: extractionResult.extractedFiles.map(f => f.name) as FileId[] /* FIX ME: This doesn't seem right */,
- status: 'pending',
- metadata: {
- originalFileName: file.name,
- outputFileNames: extractionResult.extractedFiles.map(f => f.name),
- fileSize: file.size,
- parameters: {
- extractionType: 'zip',
- extractedCount: extractionResult.extractedCount,
- totalFiles: extractionResult.totalFiles
- }
+ if (extractionResult.errors.length > 0) {
+ errors.push(...extractionResult.errors);
}
- };
-
- if (extractionResult.errors.length > 0) {
- errors.push(...extractionResult.errors);
- }
} else {
errors.push(`Failed to extract ZIP file "${file.name}": ${extractionResult.errors.join(', ')}`);
}
@@ -213,25 +160,6 @@ const FileEditor = ({
// Process all extracted files
if (allExtractedFiles.length > 0) {
- // Record upload operations for PDF files
- for (const file of allExtractedFiles) {
- const operationId = `upload-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'upload',
- timestamp: Date.now(),
- fileIds: [file.name as FileId /* This doesn't seem right */],
- status: 'pending',
- metadata: {
- originalFileName: file.name,
- fileSize: file.size,
- parameters: {
- uploadMethod: 'drag-drop'
- }
- }
- };
- }
-
// Add files to context (they will be processed automatically)
await addFiles(allExtractedFiles);
setStatus(`Added ${allExtractedFiles.length} files`);
@@ -252,27 +180,10 @@ const FileEditor = ({
}
}, [addFiles]);
- const selectAll = useCallback(() => {
- setSelectedFiles(activeFileRecords.map(r => r.id)); // Use FileRecord IDs directly
- }, [activeFileRecords, setSelectedFiles]);
-
- const deselectAll = useCallback(() => setSelectedFiles([]), [setSelectedFiles]);
-
- const closeAllFiles = useCallback(() => {
- if (activeFileRecords.length === 0) return;
-
- // Remove all files from context but keep in storage
- const allFileIds = activeFileRecords.map(record => record.id);
- removeFiles(allFileIds, false); // false = keep in storage
-
- // Clear selections
- setSelectedFiles([]);
- }, [activeFileRecords, removeFiles, setSelectedFiles]);
-
const toggleFile = useCallback((fileId: FileId) => {
const currentSelectedIds = contextSelectedIdsRef.current;
- const targetRecord = activeFileRecords.find(r => r.id === fileId);
+ const targetRecord = activeStirlingFileStubs.find(r => r.id === fileId);
if (!targetRecord) return;
const contextFileId = fileId; // No need to create a new ID
@@ -302,21 +213,12 @@ const FileEditor = ({
// Update context (this automatically updates tool selection since they use the same action)
setSelectedFiles(newSelection);
- }, [setSelectedFiles, toolMode, setStatus, activeFileRecords]);
+ }, [setSelectedFiles, toolMode, setStatus, activeStirlingFileStubs]);
- const toggleSelectionMode = useCallback(() => {
- setSelectionMode(prev => {
- const newMode = !prev;
- if (!newMode) {
- setSelectedFiles([]);
- }
- return newMode;
- });
- }, [setSelectedFiles]);
// File reordering handler for drag and drop
const handleReorderFiles = useCallback((sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => {
- const currentIds = activeFileRecords.map(r => r.id);
+ const currentIds = activeStirlingFileStubs.map(r => r.id);
// Find indices
const sourceIndex = currentIds.findIndex(id => id === sourceFileId);
@@ -368,71 +270,34 @@ const FileEditor = ({
// Update status
const moveCount = filesToMove.length;
setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
- }, [activeFileRecords, reorderFiles, setStatus]);
+ }, [activeStirlingFileStubs, reorderFiles, setStatus]);
// File operations using context
const handleDeleteFile = useCallback((fileId: FileId) => {
- const record = activeFileRecords.find(r => r.id === fileId);
+ const record = activeStirlingFileStubs.find(r => r.id === fileId);
const file = record ? selectors.getFile(record.id) : null;
if (record && file) {
- // Record close operation
- const fileName = file.name;
- const contextFileId = record.id;
- const operationId = `close-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const operation: FileOperation = {
- id: operationId,
- type: 'remove',
- timestamp: Date.now(),
- fileIds: [fileName as FileId /* FIX ME: This doesn't seem right */],
- status: 'pending',
- metadata: {
- originalFileName: fileName,
- fileSize: record.size,
- parameters: {
- action: 'close',
- reason: 'user_request'
- }
- }
- };
-
// Remove file from context but keep in storage (close, don't delete)
+ const contextFileId = record.id;
removeFiles([contextFileId], false);
// Remove from context selections
const currentSelected = selectedFileIds.filter(id => id !== contextFileId);
setSelectedFiles(currentSelected);
}
- }, [activeFileRecords, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
+ }, [activeStirlingFileStubs, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
const handleViewFile = useCallback((fileId: FileId) => {
- const record = activeFileRecords.find(r => r.id === fileId);
+ const record = activeStirlingFileStubs.find(r => r.id === fileId);
if (record) {
// Set the file as selected in context and switch to viewer for preview
setSelectedFiles([fileId]);
navActions.setWorkbench('viewer');
}
- }, [activeFileRecords, setSelectedFiles, navActions.setWorkbench]);
-
- const handleMergeFromHere = useCallback((fileId: FileId) => {
- const startIndex = activeFileRecords.findIndex(r => r.id === fileId);
- if (startIndex === -1) return;
-
- const recordsToMerge = activeFileRecords.slice(startIndex);
- const filesToMerge = recordsToMerge.map(r => selectors.getFile(r.id)).filter(Boolean) as File[];
- if (onMergeFiles) {
- onMergeFiles(filesToMerge);
- }
- }, [activeFileRecords, selectors, onMergeFiles]);
-
- const handleSplitFile = useCallback((fileId: FileId) => {
- const file = selectors.getFile(fileId);
- if (file && onOpenPageEditor) {
- onOpenPageEditor(file);
- }
- }, [selectors, onOpenPageEditor]);
+ }, [activeStirlingFileStubs, setSelectedFiles, navActions.setWorkbench]);
const handleLoadFromStorage = useCallback(async (selectedFiles: File[]) => {
if (selectedFiles.length === 0) return;
@@ -467,7 +332,7 @@ const FileEditor = ({
- {activeFileRecords.length === 0 && !zipExtractionProgress.isExtracting ? (
+ {activeStirlingFileStubs.length === 0 && !zipExtractionProgress.isExtracting ? (
📁
@@ -475,7 +340,7 @@ const FileEditor = ({
Upload PDF files, ZIP archives, or load from storage to get started
- ) : activeFileRecords.length === 0 && zipExtractionProgress.isExtracting ? (
+ ) : activeStirlingFileStubs.length === 0 && zipExtractionProgress.isExtracting ? (
@@ -522,16 +387,13 @@ const FileEditor = ({
pointerEvents: 'auto'
}}
>
- {activeFileRecords.map((record, index) => {
- const fileItem = recordToFileItem(record);
- if (!fileItem) return null;
-
+ {activeStirlingFileStubs.map((record, index) => {
return (
);
})}
diff --git a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
index e82483898..2a927d012 100644
--- a/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/components/fileEditor/FileEditorThumbnail.tsx
@@ -8,22 +8,17 @@ import PushPinIcon from '@mui/icons-material/PushPin';
import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { StirlingFileStub } from '../../types/fileContext';
import styles from './FileEditor.module.css';
import { useFileContext } from '../../contexts/FileContext';
import { FileId } from '../../types/file';
+import ToolChain from '../shared/ToolChain';
+
-interface FileItem {
- id: FileId;
- name: string;
- pageCount: number;
- thumbnail: string | null;
- size: number;
- modifiedAt?: number | string | Date;
-}
interface FileEditorThumbnailProps {
- file: FileItem;
+ file: StirlingFileStub;
index: number;
totalFiles: number;
selectedFiles: FileId[];
@@ -44,7 +39,6 @@ const FileEditorThumbnail = ({
selectedFiles,
onToggleFile,
onDeleteFile,
- onViewFile,
onSetStatus,
onReorderFiles,
onDownloadFile,
@@ -61,10 +55,12 @@ const FileEditorThumbnail = ({
// Resolve the actual File object for pin/unpin operations
const actualFile = useMemo(() => {
- return activeFiles.find((f: File) => f.name === file.name && f.size === file.size);
- }, [activeFiles, file.name, file.size]);
+ return activeFiles.find(f => f.fileId === file.id);
+ }, [activeFiles, file.id]);
const isPinned = actualFile ? isFilePinned(actualFile) : false;
+ const pageCount = file.processedFile?.totalPages || 0;
+
const downloadSelectedFile = useCallback(() => {
// Prefer parent-provided handler if available
if (typeof onDownloadFile === 'function') {
@@ -110,22 +106,21 @@ const FileEditorThumbnail = ({
const pageLabel = useMemo(
() =>
- file.pageCount > 0
- ? `${file.pageCount} ${file.pageCount === 1 ? 'Page' : 'Pages'}`
+ pageCount > 0
+ ? `${pageCount} ${pageCount === 1 ? 'Page' : 'Pages'}`
: '',
- [file.pageCount]
+ [pageCount]
);
const dateLabel = useMemo(() => {
- const d =
- file.modifiedAt != null ? new Date(file.modifiedAt) : new Date(); // fallback
+ const d = new Date(file.lastModified);
if (Number.isNaN(d.getTime())) return '';
return new Intl.DateTimeFormat(undefined, {
month: 'short',
day: '2-digit',
year: 'numeric',
}).format(d);
- }, [file.modifiedAt]);
+ }, [file.lastModified]);
// ---- Drag & drop wiring ----
const fileElementRef = useCallback((element: HTMLDivElement | null) => {
@@ -351,7 +346,8 @@ const FileEditorThumbnail = ({
lineClamp={3}
title={`${extUpper || 'FILE'} • ${prettySize}`}
>
- {/* e.g., Jan 29, 2025 - PDF file - 3 Pages */}
+ {/* e.g., v2 - Jan 29, 2025 - PDF file - 3 Pages */}
+ {`v${file.versionNumber} - `}
{dateLabel}
{extUpper ? ` - ${extUpper} file` : ''}
{pageLabel ? ` - ${pageLabel}` : ''}
@@ -361,9 +357,9 @@ const FileEditorThumbnail = ({
{/* Preview area */}
- {file.thumbnail && (
+ {file.thumbnailUrl && (
+
+ {/* Tool chain display at bottom */}
+ {file.toolHistory && (
+
+
+
+ )}
);
diff --git a/frontend/src/components/fileManager/CompactFileDetails.tsx b/frontend/src/components/fileManager/CompactFileDetails.tsx
index b1b5f0d24..fac16bb20 100644
--- a/frontend/src/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/components/fileManager/CompactFileDetails.tsx
@@ -5,12 +5,12 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { useTranslation } from 'react-i18next';
import { getFileSize } from '../../utils/fileUtils';
-import { FileMetadata } from '../../types/file';
+import { StirlingFileStub } from '../../types/fileContext';
interface CompactFileDetailsProps {
- currentFile: FileMetadata | null;
+ currentFile: StirlingFileStub | null;
thumbnail: string | null;
- selectedFiles: FileMetadata[];
+ selectedFiles: StirlingFileStub[];
currentFileIndex: number;
numberOfFiles: number;
isAnimating: boolean;
@@ -72,12 +72,19 @@ const CompactFileDetails: React.FC = ({
{currentFile ? getFileSize(currentFile) : ''}
{selectedFiles.length > 1 && ` • ${selectedFiles.length} files`}
+ {currentFile && ` • v${currentFile.versionNumber || 1}`}
{hasMultipleFiles && (
{currentFileIndex + 1} of {selectedFiles.length}
)}
+ {/* Compact tool chain for mobile */}
+ {currentFile?.toolHistory && currentFile.toolHistory.length > 0 && (
+
+ {currentFile.toolHistory.map((tool: any) => tool.toolName).join(' → ')}
+
+ )}
{/* Navigation arrows for multiple files */}
diff --git a/frontend/src/components/fileManager/FileDetails.tsx b/frontend/src/components/fileManager/FileDetails.tsx
index dcd460644..b1e7e93e3 100644
--- a/frontend/src/components/fileManager/FileDetails.tsx
+++ b/frontend/src/components/fileManager/FileDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
import { Stack, Button, Box } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
@@ -11,27 +11,26 @@ interface FileDetailsProps {
compact?: boolean;
}
-const FileDetails: React.FC = ({
+const FileDetails: React.FC = ({
compact = false
}) => {
const { selectedFiles, onOpenFiles, modalHeight } = useFileManagerContext();
const { t } = useTranslation();
const [currentFileIndex, setCurrentFileIndex] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
-
+
// Get the currently displayed file
const currentFile = selectedFiles.length > 0 ? selectedFiles[currentFileIndex] : null;
const hasSelection = selectedFiles.length > 0;
- const hasMultipleFiles = selectedFiles.length > 1;
// Use IndexedDB hook for the current file
const { thumbnail: currentThumbnail } = useIndexedDBThumbnail(currentFile);
-
+
// Get thumbnail for current file
const getCurrentThumbnail = () => {
return currentThumbnail;
};
-
+
const handlePrevious = () => {
if (isAnimating) return;
setIsAnimating(true);
@@ -40,7 +39,7 @@ const FileDetails: React.FC = ({
setIsAnimating(false);
}, 150);
};
-
+
const handleNext = () => {
if (isAnimating) return;
setIsAnimating(true);
@@ -49,14 +48,14 @@ const FileDetails: React.FC = ({
setIsAnimating(false);
}, 150);
};
-
+
// Reset index when selection changes
React.useEffect(() => {
if (currentFileIndex >= selectedFiles.length) {
setCurrentFileIndex(0);
}
}, [selectedFiles.length, currentFileIndex]);
-
+
if (compact) {
return (
= ({
onNext={handleNext}
/>
-
+
{/* Section 2: File Details */}
-
-