Feature/v2/filemanager (#4121)

FileManager Component Overview

Purpose: Modal component for selecting and managing PDF files with
preview capabilities

  Architecture:
- Responsive Layouts: MobileLayout.tsx (stacked) vs DesktopLayout.tsx
(3-column)
- Central State: FileManagerContext handles file operations, selection,
and modal state
  - File Storage: IndexedDB persistence with thumbnail caching

  Key Components:
  - FileSourceButtons: Switch between Recent/Local/Drive sources
  - FileListArea: Scrollable file grid with search functionality
- FilePreview: PDF thumbnails with dynamic shadow stacking (1-2 shadow
pages based on file count)
  - FileDetails: File info card with metadata
  - CompactFileDetails: Mobile-optimized file info layout

  File Flow:
1. Users select source → browse/search files → select multiple files →
preview with navigation → open in
  tools
  2. Files persist across tool switches via FileContext integration
  3. Memory management handles large PDFs (up to 100GB+)

 ```mermaid
 graph TD
      FM[FileManager] --> ML[MobileLayout]
      FM --> DL[DesktopLayout]

      ML --> FSB[FileSourceButtons<br/>Recent/Local/Drive]
      ML --> FLA[FileListArea]
      ML --> FD[FileDetails]

      DL --> FSB
      DL --> FLA
      DL --> FD

      FLA --> FLI[FileListItem]
      FD --> FP[FilePreview]
      FD --> CFD[CompactFileDetails]

  ```

---------

Co-authored-by: Connor Yoh <[email protected]>

frontend/src/components/FileManager.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Modal } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { FileWithUrl } from '../types/file';
+import { useFileManager } from '../hooks/useFileManager';
+import { useFilesModalContext } from '../contexts/FilesModalContext';
+import { Tool } from '../types/tool';
+import MobileLayout from './fileManager/MobileLayout';
+import DesktopLayout from './fileManager/DesktopLayout';
+import DragOverlay from './fileManager/DragOverlay';
+import { FileManagerProvider } from '../contexts/FileManagerContext';
+
+interface FileManagerProps {
+  selectedTool?: Tool | null;
+}
+
+const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
+  const { isFilesModalOpen, closeFilesModal, onFilesSelect } = useFilesModalContext();
+  const [recentFiles, setRecentFiles] = useState<FileWithUrl[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile } = useFileManager();
+
+  // File management handlers
+  const isFileSupported = useCallback((fileName: string) => {
+    if (!selectedTool?.supportedFormats) return true;
+    const extension = fileName.split('.').pop()?.toLowerCase();
+    return selectedTool.supportedFormats.includes(extension || '');
+  }, [selectedTool?.supportedFormats]);
+
+  const refreshRecentFiles = useCallback(async () => {
+    const files = await loadRecentFiles();
+    setRecentFiles(files);
+  }, [loadRecentFiles]);
+
+  const handleFilesSelected = useCallback(async (files: FileWithUrl[]) => {
+    try {
+      const fileObjects = await Promise.all(
+        files.map(async (fileWithUrl) => {
+          return await convertToFile(fileWithUrl);
+        })
+      );
+      onFilesSelect(fileObjects);
+    } catch (error) {
+      console.error('Failed to process selected files:', error);
+    }
+  }, [convertToFile, onFilesSelect]);
+
+  const handleNewFileUpload = useCallback(async (files: File[]) => {
+    if (files.length > 0) {
+      try {
+        // Files will get IDs assigned through onFilesSelect -> FileContext addFiles
+        onFilesSelect(files);
+        await refreshRecentFiles();
+      } catch (error) {
+        console.error('Failed to process dropped files:', error);
+      }
+    }
+  }, [onFilesSelect, refreshRecentFiles]);
+
+  const handleRemoveFileByIndex = useCallback(async (index: number) => {
+    await handleRemoveFile(index, recentFiles, setRecentFiles);
+  }, [handleRemoveFile, recentFiles]);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 1030);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (isFilesModalOpen) {
+      refreshRecentFiles();
+    } else {
+      // Reset state when modal is closed
+      setIsDragging(false);
+    }
+  }, [isFilesModalOpen, refreshRecentFiles]);
+
+  // Cleanup any blob URLs when component unmounts
+  useEffect(() => {
+    return () => {
+      // Clean up blob URLs from recent files
+      recentFiles.forEach(file => {
+        if (file.url && file.url.startsWith('blob:')) {
+          URL.revokeObjectURL(file.url);
+        }
+      });
+    };
+  }, [recentFiles]);
+
+  // Modal size constants for consistent scaling
+  const modalHeight = '80vh';
+  const modalWidth = isMobile ? '100%' : '80vw';
+  const modalMaxWidth = isMobile ? '100%' : '1200px';
+  const modalMaxHeight = '1200px';
+  const modalMinWidth = isMobile ? '320px' : '800px';
+
+  return (
+    <Modal
+      opened={isFilesModalOpen}
+      onClose={closeFilesModal}
+      size={isMobile ? "100%" : "auto"}
+      centered
+      radius={30}
+      className="overflow-hidden p-0"
+      withCloseButton={false}
+      styles={{
+        content: { 
+          position: 'relative',
+          margin: isMobile ? '1rem' : '2rem'
+        },
+        body: { padding: 0 },
+        header: { display: 'none' }
+      }}
+    >
+      <div style={{ 
+        position: 'relative', 
+        height: modalHeight, 
+        width: modalWidth, 
+        maxWidth: modalMaxWidth, 
+        maxHeight: modalMaxHeight, 
+        minWidth: modalMinWidth,
+        margin: '0 auto',
+        overflow: 'hidden'
+      }}>
+        <Dropzone
+          onDrop={handleNewFileUpload}
+          onDragEnter={() => setIsDragging(true)}
+          onDragLeave={() => setIsDragging(false)}
+          accept={["*/*"]}
+          multiple={true}
+          activateOnClick={false}
+          style={{ 
+            height: '100%', 
+            width: '100%',
+            border: 'none',
+            borderRadius: '30px',
+            backgroundColor: 'var(--bg-file-manager)'
+          }}
+          styles={{
+            inner: { pointerEvents: 'all' }
+          }}
+        >
+          <FileManagerProvider
+            recentFiles={recentFiles}
+            onFilesSelected={handleFilesSelected}
+            onClose={closeFilesModal}
+            isFileSupported={isFileSupported}
+            isOpen={isFilesModalOpen}
+            onFileRemove={handleRemoveFileByIndex}
+            modalHeight={modalHeight}
+            storeFile={storeFile}
+            refreshRecentFiles={refreshRecentFiles}
+          >
+            {isMobile ? <MobileLayout /> : <DesktopLayout />}
+          </FileManagerProvider>
+        </Dropzone>
+        
+        <DragOverlay isVisible={isDragging} />
+      </div>
+    </Modal>
+  );
+};
+
+export default FileManager;