Feature/v2/file handling improvements (#4222)

# Description of Changes

A new universal file context rather than the splintered ones for the
main views, tools and manager we had before (manager still has its own
but its better integreated with the core context)
File context has been split it into a handful of different files
managing various file related issues separately to reduce the monolith -
FileReducer.ts - State management
  fileActions.ts - File operations
  fileSelectors.ts - Data access patterns
  lifecycle.ts - Resource cleanup and memory management
  fileHooks.ts - React hooks interface
  contexts.ts - Context providers
Improved thumbnail generation
Improved indexxedb handling
Stopped handling files as blobs were not necessary to improve
performance
A new library handling drag and drop
https://github.com/atlassian/pragmatic-drag-and-drop (Out of scope yes
but I broke the old one with the new filecontext and it needed doing so
it was a might as well)
A new library handling virtualisation on page editor
@tanstack/react-virtual, as above.
Quickly ripped out the last remnants of the old URL params stuff and
replaced with the beginnings of what will later become the new URL
navigation system (for now it just restores the tool name in url
behavior)
Fixed selected file not regestered when opening a tool
Fixed png thumbnails
Closes #(issue_number)

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Reece Browne <[email protected]>

frontend/src/hooks/tools/shared/useToolOperation.ts

@@ -104,7 +104,7 @@ export const useToolOperation = <TParams = void>(
   config: ToolOperationConfig<TParams>
 ): ToolOperationHook<TParams> => {
   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 = <TParams = void>(
         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 = <TParams = void>(
       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();

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<string[]>([]);
+  
+  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<string[]> => {
+    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<ThumbnailWithMetadata[]> => {
+    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<File[]> => {
     try {
       const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
@@ -108,6 +137,7 @@ export const useToolResources = () => {
 
   return {
     generateThumbnails,
+    generateThumbnailsWithMetadata,
     createDownloadInfo,
     extractZipFiles,
     extractAllZipFiles,

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 });
   }, []);