Use stubs instead of files

frontend/src/components/tools/rotate/RotateSettings.tsx

@@ -5,7 +5,6 @@ import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import { RotateParametersHook } from "../../../hooks/tools/rotate/useRotateParameters";
 import { useSelectedFiles } from "../../../contexts/file/fileHooks";
-import { useThumbnailGeneration } from "../../../hooks/useThumbnailGeneration";
 import DocumentThumbnail from "../../shared/filePreview/DocumentThumbnail";
 
 interface RotateSettingsProps {
@@ -15,39 +14,19 @@ interface RotateSettingsProps {
 
 const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) => {
   const { t } = useTranslation();
-  const { selectedFiles } = useSelectedFiles();
-  const { getThumbnailFromCache, requestThumbnail } = useThumbnailGeneration();
+  const { selectedFileStubs } = useSelectedFiles();
 
   // Get the first selected file for preview
-  const selectedFile = useMemo(() => {
-    return selectedFiles.length > 0 ? selectedFiles[0] : null;
-  }, [selectedFiles]);
+  const selectedStub = useMemo(() => {
+    return selectedFileStubs.length > 0 ? selectedFileStubs[0] : null;
+  }, [selectedFileStubs]);
 
   // Get thumbnail for the selected file
   const [thumbnail, setThumbnail] = useState<string | null>(null);
 
   useEffect(() => {
-    if (!selectedFile) {
-      setThumbnail(null);
-      return;
-    }
-
-    const pageId = `${selectedFile.fileId}-1`;
-
-    // Try to get cached thumbnail first
-    const cached = getThumbnailFromCache(pageId);
-    if (cached) {
-      setThumbnail(cached);
-      return;
-    }
-
-    // Request thumbnail if not cached
-    requestThumbnail(pageId, selectedFile, 1).then((result) => {
-      setThumbnail(result);
-    }).catch(() => {
-      setThumbnail(null);
-    });
-  }, [selectedFile, getThumbnailFromCache, requestThumbnail]);
+    setThumbnail(selectedStub?.thumbnailUrl || null);
+  }, [selectedStub]);
 
   // Calculate current angle display
   const currentAngle = parameters.parameters.angle;
@@ -86,7 +65,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
               }}
             >
               <DocumentThumbnail
-                file={selectedFile}
+                file={selectedStub}
                 thumbnail={thumbnail}
               />
             </Box>

frontend/src/contexts/file/fileHooks.ts

@@ -123,12 +123,12 @@ export function useStirlingFileStub(fileId: FileId): { file?: File; record?: Sti
 /**
  * Hook for all files (use sparingly - causes re-renders on file list changes)
  */
-export function useAllFiles(): { files: StirlingFile[]; records: StirlingFileStub[]; fileIds: FileId[] } {
+export function useAllFiles(): { files: StirlingFile[]; fileStubs: StirlingFileStub[]; fileIds: FileId[] } {
   const { state, selectors } = useFileState();
 
   return useMemo(() => ({
     files: selectors.getFiles(),
-    records: selectors.getStirlingFileStubs(),
+    fileStubs: selectors.getStirlingFileStubs(),
     fileIds: state.files.ids
   }), [state.files.ids, selectors]);
 }
@@ -136,12 +136,12 @@ export function useAllFiles(): { files: StirlingFile[]; records: StirlingFileStu
 /**
  * Hook for selected files (optimized for selection-based UI)
  */
-export function useSelectedFiles(): { selectedFiles: StirlingFile[]; selectedRecords: StirlingFileStub[]; selectedFileIds: FileId[] } {
+export function useSelectedFiles(): { selectedFiles: StirlingFile[]; selectedFileStubs: StirlingFileStub[]; selectedFileIds: FileId[] } {
   const { state, selectors } = useFileState();
 
   return useMemo(() => ({
     selectedFiles: selectors.getSelectedFiles(),
-    selectedRecords: selectors.getSelectedStirlingFileStubs(),
+    selectedFileStubs: selectors.getSelectedStirlingFileStubs(),
     selectedFileIds: state.ui.selectedFileIds
   }), [state.ui.selectedFileIds, selectors]);
 }

frontend/src/tools/Merge.tsx

@@ -16,7 +16,7 @@ const Merge = (props: BaseToolProps) => {
 
   // File selection hooks for custom sorting
   const { fileIds } = useAllFiles();
-  const { selectedRecords } = useSelectedFiles();
+  const { selectedFileStubs } = useSelectedFiles();
   const { reorderFiles } = useFileManagement();
 
   const base = useBaseTool(
@@ -29,23 +29,23 @@ const Merge = (props: BaseToolProps) => {
 
   // Custom file sorting logic for merge tool
   const sortFiles = useCallback((sortType: 'filename' | 'dateModified', ascending: boolean = true) => {
-    const sortedRecords = [...selectedRecords].sort((recordA, recordB) => {
+    const sortedStubs = [...selectedFileStubs].sort((stubA, stubB) => {
       let comparison = 0;
       switch (sortType) {
         case 'filename':
-          comparison = recordA.name.localeCompare(recordB.name);
+          comparison = stubA.name.localeCompare(stubB.name);
           break;
         case 'dateModified':
-          comparison = recordA.lastModified - recordB.lastModified;
+          comparison = stubA.lastModified - stubB.lastModified;
           break;
       }
       return ascending ? comparison : -comparison;
     });
 
-    const selectedIds = sortedRecords.map(record => record.id);
+    const selectedIds = sortedStubs.map(record => record.id);
     const deselectedIds = fileIds.filter(id => !selectedIds.includes(id));
     reorderFiles([...selectedIds, ...deselectedIds]);
-  }, [selectedRecords, fileIds, reorderFiles]);
+  }, [selectedFileStubs, fileIds, reorderFiles]);
 
   return createToolFlow({
     files: {