Stirling 2.0 (#3645)

# Description of Changes

Please provide a summary of the changes, including:

Vite fixes
Indexxdb

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/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/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/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/DeveloperGuide.md#6-testing)
for more details.

frontend/src/utils/fileUtils.ts

@@ -0,0 +1,124 @@
+import { FileWithUrl } from "../types/file";
+import { StoredFile, fileStorage } from "../services/fileStorage";
+
+/**
+ * Consolidated file size formatting utility
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Get file date as string
+ */
+export function getFileDate(file: File): string {
+  if (file.lastModified) {
+    return new Date(file.lastModified).toLocaleString();
+  }
+  return "Unknown";
+}
+
+/**
+ * Get file size as string (legacy method for backward compatibility)
+ */
+export function getFileSize(file: File): string {
+  if (!file.size) return "Unknown";
+  return formatFileSize(file.size);
+}
+
+/**
+ * Create enhanced file object from stored file metadata
+ * This eliminates the repeated pattern in FileManager
+ */
+export function createEnhancedFileFromStored(storedFile: StoredFile, thumbnail?: string): FileWithUrl {
+  const enhancedFile: FileWithUrl = {
+    id: storedFile.id,
+    storedInIndexedDB: true,
+    url: undefined, // Don't create blob URL immediately to save memory
+    thumbnail: thumbnail || storedFile.thumbnail,
+    // File metadata
+    name: storedFile.name,
+    size: storedFile.size,
+    type: storedFile.type,
+    lastModified: storedFile.lastModified,
+    // Lazy-loading File interface methods
+    arrayBuffer: async () => {
+      const data = await fileStorage.getFileData(storedFile.id);
+      if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
+      return data;
+    },
+    slice: (start?: number, end?: number, contentType?: string) => {
+      // Return a promise-based slice that loads from IndexedDB
+      return new Blob([], { type: contentType || storedFile.type });
+    },
+    stream: () => {
+      throw new Error('Stream not implemented for IndexedDB files');
+    },
+    text: async () => {
+      const data = await fileStorage.getFileData(storedFile.id);
+      if (!data) throw new Error(`File ${storedFile.name} not found in IndexedDB - may have been purged`);
+      return new TextDecoder().decode(data);
+    }
+  } as FileWithUrl;
+  
+  return enhancedFile;
+}
+
+/**
+ * Load files from IndexedDB and convert to enhanced file objects
+ */
+export async function loadFilesFromIndexedDB(): Promise<FileWithUrl[]> {
+  try {
+    await fileStorage.init();
+    const storedFiles = await fileStorage.getAllFileMetadata();
+    
+    if (storedFiles.length === 0) {
+      return [];
+    }
+    
+    const restoredFiles: FileWithUrl[] = storedFiles
+      .filter(storedFile => {
+        // Filter out corrupted entries
+        return storedFile && 
+               storedFile.name && 
+               typeof storedFile.size === 'number';
+      })
+      .map(storedFile => {
+        try {
+          return createEnhancedFileFromStored(storedFile);
+        } catch (error) {
+          console.error('Failed to restore file:', storedFile?.name || 'unknown', error);
+          return null;
+        }
+      })
+      .filter((file): file is FileWithUrl => file !== null);
+      
+    return restoredFiles;
+  } catch (error) {
+    console.error('Failed to load files from IndexedDB:', error);
+    return [];
+  }
+}
+
+/**
+ * Clean up blob URLs from file objects
+ */
+export function cleanupFileUrls(files: FileWithUrl[]): void {
+  files.forEach(file => {
+    if (file.url && !file.url.startsWith('indexeddb:')) {
+      URL.revokeObjectURL(file.url);
+    }
+  });
+}
+
+/**
+ * Check if file should use blob URL or IndexedDB direct access
+ */
+export function shouldUseDirectIndexedDBAccess(file: FileWithUrl): boolean {
+  const FILE_SIZE_LIMIT = 100 * 1024 * 1024; // 100MB
+  return file.size > FILE_SIZE_LIMIT;
+}

frontend/src/utils/storageUtils.ts

@@ -0,0 +1,71 @@
+import { StorageStats } from "../services/fileStorage";
+import { FileWithUrl } from "../types/file";
+
+/**
+ * Storage operation types for incremental updates
+ */
+export type StorageOperation = 'add' | 'remove' | 'clear';
+
+/**
+ * Update storage stats incrementally based on operation
+ */
+export function updateStorageStatsIncremental(
+  currentStats: StorageStats,
+  operation: StorageOperation,
+  files: FileWithUrl[] = []
+): StorageStats {
+  const filesSizeTotal = files.reduce((total, file) => total + file.size, 0);
+  
+  switch (operation) {
+    case 'add':
+      return {
+        ...currentStats,
+        used: currentStats.used + filesSizeTotal,
+        available: currentStats.available - filesSizeTotal,
+        fileCount: currentStats.fileCount + files.length
+      };
+      
+    case 'remove':
+      return {
+        ...currentStats,
+        used: Math.max(0, currentStats.used - filesSizeTotal),
+        available: currentStats.available + filesSizeTotal,
+        fileCount: Math.max(0, currentStats.fileCount - files.length)
+      };
+      
+    case 'clear':
+      return {
+        ...currentStats,
+        used: 0,
+        available: currentStats.quota || currentStats.available,
+        fileCount: 0
+      };
+      
+    default:
+      return currentStats;
+  }
+}
+
+/**
+ * Check storage usage and return warning message if needed
+ */
+export function checkStorageWarnings(stats: StorageStats): string | null {
+  if (!stats.quota || stats.used === 0) return null;
+  
+  const usagePercent = (stats.used / stats.quota) * 100;
+  
+  if (usagePercent > 90) {
+    return 'Warning: Storage is nearly full (>90%). Browser may start clearing data.';
+  } else if (usagePercent > 80) {
+    return 'Storage is getting full (>80%). Consider removing old files.';
+  }
+  
+  return null;
+}
+
+/**
+ * Calculate storage usage percentage
+ */
+export function getStorageUsagePercent(stats: StorageStats): number {
+  return stats.quota ? (stats.used / stats.quota) * 100 : 0;
+}

frontend/src/utils/thumbnailUtils.ts

@@ -0,0 +1,51 @@
+import { getDocument } from "pdfjs-dist";
+
+/**
+ * Generate thumbnail for a PDF file during upload
+ * Returns base64 data URL or undefined if generation fails
+ */
+export async function generateThumbnailForFile(file: File): Promise<string | undefined> {
+  // Skip thumbnail generation for large files to avoid memory issues
+  if (file.size >= 50 * 1024 * 1024) { // 50MB limit
+    console.log('Skipping thumbnail generation for large file:', file.name);
+    return undefined;
+  }
+  
+  try {
+    console.log('Generating thumbnail for', file.name);
+    
+    // Only read first 2MB for thumbnail generation to save memory
+    const chunkSize = 2 * 1024 * 1024; // 2MB
+    const chunk = file.slice(0, Math.min(chunkSize, file.size));
+    const arrayBuffer = await chunk.arrayBuffer();
+    
+    const pdf = await getDocument({ 
+      data: arrayBuffer,
+      disableAutoFetch: true,
+      disableStream: true
+    }).promise;
+    
+    const page = await pdf.getPage(1);
+    const viewport = page.getViewport({ scale: 0.2 }); // Smaller scale for memory efficiency
+    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;
+    const thumbnail = canvas.toDataURL();
+    
+    // Immediately clean up memory after thumbnail generation
+    pdf.destroy();
+    console.log('Thumbnail generated and PDF destroyed for', file.name);
+    
+    return thumbnail;
+  } catch (error) {
+    console.warn('Failed to generate thumbnail for', file.name, error);
+    return undefined;
+  }
+}