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 <connor@stirlingpdf.com>

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;

frontend/src/components/fileManagement/StorageStatsCard.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Card, Group, Text, Button, Progress, Alert, Stack } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import StorageIcon from "@mui/icons-material/Storage";
-import DeleteIcon from "@mui/icons-material/Delete";
-import WarningIcon from "@mui/icons-material/Warning";
-import { StorageStats } from "../../services/fileStorage";
-import { formatFileSize } from "../../utils/fileUtils";
-import { getStorageUsagePercent } from "../../utils/storageUtils";
-import { StorageConfig } from "../../types/file";
-
-interface StorageStatsCardProps {
-  storageStats: StorageStats | null;
-  filesCount: number;
-  onClearAll: () => void;
-  onReloadFiles: () => void;
-  storageConfig: StorageConfig;
-}
-
-const StorageStatsCard = ({
-  storageStats,
-  filesCount,
-  onClearAll,
-  onReloadFiles,
-  storageConfig,
-}: StorageStatsCardProps) => {
-  const { t } = useTranslation();
-
-  if (!storageStats) return null;
-
-  const storageUsagePercent = getStorageUsagePercent(storageStats);
-  const totalUsed = storageStats.totalSize || storageStats.used;
-  const hardLimitPercent = (totalUsed / storageConfig.maxTotalStorage) * 100;
-  const isNearLimit = hardLimitPercent >= storageConfig.warningThreshold * 100;
-
-  return (
-    <Stack gap="sm" style={{ width: "90%", maxWidth: 600 }}>
-      <Card withBorder p="sm">
-        <Group align="center" gap="md">
-          <StorageIcon />
-          <div style={{ flex: 1 }}>
-            <Text size="sm" fw={500}>
-              {t("storage.storageUsed", "Storage used")}: {formatFileSize(totalUsed)} / {formatFileSize(storageConfig.maxTotalStorage)}
-            </Text>
-            <Progress
-              value={hardLimitPercent}
-              color={isNearLimit ? "red" : hardLimitPercent > 60 ? "yellow" : "blue"}
-              size="sm"
-              mt={4}
-            />
-            <Group justify="space-between" mt={2}>
-              <Text size="xs" c="dimmed">
-                {storageStats.fileCount} files • {t("storage.approximateSize", "Approximate size")}
-              </Text>
-              <Text size="xs" c={isNearLimit ? "red" : "dimmed"}>
-                {Math.round(hardLimitPercent)}% used
-              </Text>
-            </Group>
-            {isNearLimit && (
-              <Text size="xs" c="red" mt={4}>
-                {t("storage.storageFull", "Storage is nearly full. Consider removing some files.")}
-              </Text>
-            )}
-          </div>
-          <Group gap="xs">
-            {filesCount > 0 && (
-              <Button
-                variant="light"
-                color="red"
-                size="xs"
-                onClick={onClearAll}
-                leftSection={<DeleteIcon style={{ fontSize: 16 }} />}
-              >
-                {t("fileManager.clearAll", "Clear All")}
-              </Button>
-            )}
-            <Button
-              variant="light"
-              color="blue"
-              size="xs"
-              onClick={onReloadFiles}
-            >
-              {t("fileManager.reloadFiles", "Reload Files")}
-            </Button>
-          </Group>
-        </Group>
-      </Card>
-    </Stack>
-  );
-};
-
-export default StorageStatsCard;

frontend/src/components/fileManager/CompactFileDetails.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Stack, Box, Text, Button, ActionIcon, Center } from '@mantine/core';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+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 { FileWithUrl } from '../../types/file';
+
+interface CompactFileDetailsProps {
+  currentFile: FileWithUrl | null;
+  thumbnail: string | null;
+  selectedFiles: FileWithUrl[];
+  currentFileIndex: number;
+  numberOfFiles: number;
+  isAnimating: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  onOpenFiles: () => void;
+}
+
+const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
+  currentFile,
+  thumbnail,
+  selectedFiles,
+  currentFileIndex,
+  numberOfFiles,
+  isAnimating,
+  onPrevious,
+  onNext,
+  onOpenFiles
+}) => {
+  const { t } = useTranslation();
+  const hasSelection = selectedFiles.length > 0;
+  const hasMultipleFiles = numberOfFiles > 1;
+
+  return (
+    <Stack gap="xs" style={{ height: '100%' }}>
+      {/* Compact mobile layout */}
+      <Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+        {/* Small preview */}
+        <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {currentFile && thumbnail ? (
+            <img 
+              src={thumbnail} 
+              alt={currentFile.name}
+              style={{ 
+                maxWidth: '100%', 
+                maxHeight: '100%', 
+                objectFit: 'contain',
+                borderRadius: '0.25rem',
+                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+              }}
+            />
+          ) : currentFile ? (
+            <Center style={{ 
+              width: '100%', 
+              height: '100%', 
+              backgroundColor: 'var(--mantine-color-gray-1)', 
+              borderRadius: 4
+            }}>
+              <PictureAsPdfIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+            </Center>
+          ) : null}
+        </Box>
+        
+        {/* File info */}
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" fw={500} truncate>
+            {currentFile ? currentFile.name : 'No file selected'}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {currentFile ? getFileSize(currentFile) : ''}
+            {selectedFiles.length > 1 && ` • ${selectedFiles.length} files`}
+          </Text>
+          {hasMultipleFiles && (
+            <Text size="xs" c="blue">
+              {currentFileIndex + 1} of {selectedFiles.length}
+            </Text>
+          )}
+        </Box>
+        
+        {/* Navigation arrows for multiple files */}
+        {hasMultipleFiles && (
+          <Box style={{ display: 'flex', gap: '0.25rem' }}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              onClick={onPrevious}
+              disabled={isAnimating}
+            >
+              <ChevronLeftIcon style={{ fontSize: 16 }} />
+            </ActionIcon>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              onClick={onNext}
+              disabled={isAnimating}
+            >
+              <ChevronRightIcon style={{ fontSize: 16 }} />
+            </ActionIcon>
+          </Box>
+        )}
+      </Box>
+      
+      {/* Action Button */}
+      <Button 
+        size="sm" 
+        onClick={onOpenFiles}
+        disabled={!hasSelection}
+        fullWidth
+        style={{ 
+          backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)', 
+          color: 'white' 
+        }}
+      >
+        {selectedFiles.length > 1 
+          ? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
+          : t('fileManager.openFile', 'Open File')
+        }
+      </Button>
+    </Stack>
+  );
+};
+
+export default CompactFileDetails;

frontend/src/components/fileManager/DesktopLayout.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Grid } from '@mantine/core';
+import FileSourceButtons from './FileSourceButtons';
+import FileDetails from './FileDetails';
+import SearchInput from './SearchInput';
+import FileListArea from './FileListArea';
+import HiddenFileInput from './HiddenFileInput';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+const DesktopLayout: React.FC = () => {
+  const {
+    activeSource,
+    recentFiles,
+    modalHeight,
+  } = useFileManagerContext();
+
+  return (
+    <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
+      {/* Column 1: File Sources */}
+      <Grid.Col span="content" p="lg" style={{ 
+        minWidth: '13.625rem', 
+        width: '13.625rem', 
+        flexShrink: 0, 
+        height: '100%',
+      }}>
+        <FileSourceButtons />
+      </Grid.Col>
+      
+      {/* Column 2: File List */}
+      <Grid.Col span="auto" style={{ 
+        display: 'flex', 
+        flexDirection: 'column', 
+        height: '100%', 
+        minHeight: 0,
+        minWidth: 0,
+        flex: '1 1 0px'
+      }}>
+        <div style={{ 
+          flex: 1, 
+          display: 'flex', 
+          flexDirection: 'column',
+          backgroundColor: 'var(--bg-file-list)',
+          border: '1px solid var(--mantine-color-gray-2)',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+          overflow: 'hidden'
+        }}>
+          {activeSource === 'recent' && (
+            <div style={{ 
+              flexShrink: 0,
+              borderBottom: '1px solid var(--mantine-color-gray-3)'
+            }}>
+              <SearchInput />
+            </div>
+          )}
+          
+          <div style={{ flex: 1, minHeight: 0 }}>
+            <FileListArea
+              scrollAreaHeight={`calc(${modalHeight} )`}
+              scrollAreaStyle={{ 
+                height: activeSource === 'recent' && recentFiles.length > 0 ? modalHeight : '100%',
+                backgroundColor: 'transparent',
+                border: 'none',
+                borderRadius: 0
+              }}
+            />
+          </div>
+        </div>
+      </Grid.Col>
+      
+      {/* Column 3: File Details */}
+      <Grid.Col p="xl" span="content" style={{ 
+        minWidth: '25rem', 
+        width: '25rem', 
+        flexShrink: 0, 
+        height: '100%',
+        maxWidth: '18rem'
+      }}>
+        <div style={{ height: '100%', overflow: 'hidden' }}>
+          <FileDetails />
+        </div>
+      </Grid.Col>
+      
+      {/* Hidden file input for local file selection */}
+      <HiddenFileInput />
+    </Grid>
+  );
+};
+
+export default DesktopLayout;

frontend/src/components/fileManager/DragOverlay.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { useTranslation } from 'react-i18next';
+
+interface DragOverlayProps {
+  isVisible: boolean;
+}
+
+const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
+  const { t } = useTranslation();
+  const theme = useMantineTheme();
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: alpha(theme.colors.blue[6], 0.1),
+        border: `0.125rem dashed ${theme.colors.blue[6]}`,
+        borderRadius: '1.875rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+        pointerEvents: 'none'
+      }}
+    >
+      <Stack align="center" gap="md">
+        <UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
+        <Text size="xl" fw={500} c="blue.6">
+          {t('fileManager.dropFilesHere', 'Drop files here to upload')}
+        </Text>
+      </Stack>
+    </div>
+  );
+};
+
+export default DragOverlay;

frontend/src/components/fileManager/FileDetails.tsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import { Stack, Button } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import FilePreview from './FilePreview';
+import FileInfoCard from './FileInfoCard';
+import CompactFileDetails from './CompactFileDetails';
+
+interface FileDetailsProps {
+  compact?: boolean;
+}
+
+const FileDetails: React.FC<FileDetailsProps> = ({ 
+  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);
+    setTimeout(() => {
+      setCurrentFileIndex(prev => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+      setIsAnimating(false);
+    }, 150);
+  };
+  
+  const handleNext = () => {
+    if (isAnimating) return;
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentFileIndex(prev => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+      setIsAnimating(false);
+    }, 150);
+  };
+  
+  // Reset index when selection changes
+  React.useEffect(() => {
+    if (currentFileIndex >= selectedFiles.length) {
+      setCurrentFileIndex(0);
+    }
+  }, [selectedFiles.length, currentFileIndex]);
+  
+  if (compact) {
+    return (
+      <CompactFileDetails
+        currentFile={currentFile}
+        thumbnail={getCurrentThumbnail()}
+        selectedFiles={selectedFiles}
+        currentFileIndex={currentFileIndex}
+        numberOfFiles={selectedFiles.length}
+        isAnimating={isAnimating}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        onOpenFiles={onOpenFiles}
+      />
+    );
+  }
+
+  return (
+    <Stack gap="lg" h={`calc(${modalHeight} - 2rem)`}>
+      {/* Section 1: Thumbnail Preview */}
+      <FilePreview
+        currentFile={currentFile}
+        thumbnail={getCurrentThumbnail()}
+        numberOfFiles={selectedFiles.length}
+        isAnimating={isAnimating}
+        modalHeight={modalHeight}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+      />
+      
+      {/* Section 2: File Details */}
+      <FileInfoCard
+        currentFile={currentFile}
+        modalHeight={modalHeight}
+      />
+      
+      <Button 
+        size="md" 
+        mb="xl"
+        onClick={onOpenFiles}
+        disabled={!hasSelection}
+        fullWidth
+        style={{ 
+          flexShrink: 0, 
+          backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)', 
+          color: 'white' 
+        }}
+      >
+        {selectedFiles.length > 1 
+          ? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
+          : t('fileManager.openFile', 'Open File')
+        }
+      </Button>
+    </Stack>
+  );
+};
+
+export default FileDetails;

frontend/src/components/fileManager/FileInfoCard.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Stack, Card, Box, Text, Badge, Group, Divider, ScrollArea } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { detectFileExtension, getFileSize } from '../../utils/fileUtils';
+import { FileWithUrl } from '../../types/file';
+
+interface FileInfoCardProps {
+  currentFile: FileWithUrl | null;
+  modalHeight: string;
+}
+
+const FileInfoCard: React.FC<FileInfoCardProps> = ({
+  currentFile,
+  modalHeight
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Card withBorder p={0} h={`calc(${modalHeight} * 0.32 - 1rem)`} style={{ flex: 1, overflow: 'hidden' }}>
+      <Box bg="blue.6" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)' }}>
+        <Text size="sm" fw={500} ta="center" c="white">
+          {t('fileManager.details', 'File Details')}
+        </Text>
+      </Box>
+      <ScrollArea style={{ flex: 1 }} p="md">
+        <Stack gap="sm">
+          <Group justify="space-between" py="xs">
+            <Text size="sm" c="dimmed">{t('fileManager.fileName', 'Name')}</Text>
+            <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
+              {currentFile ? currentFile.name : ''}
+            </Text>
+          </Group>
+          <Divider />
+          
+          <Group justify="space-between" py="xs">
+            <Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
+            {currentFile ? (
+              <Badge size="sm" variant="light">
+                {detectFileExtension(currentFile.name).toUpperCase()}
+              </Badge>
+            ) : (
+              <Text size="sm" fw={500}></Text>
+            )}
+          </Group>
+          <Divider />
+          
+          <Group justify="space-between" py="xs">
+            <Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
+            <Text size="sm" fw={500}>
+              {currentFile ? getFileSize(currentFile) : ''}
+            </Text>
+          </Group>
+          <Divider />
+          
+          <Group justify="space-between" py="xs">
+            <Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
+            <Text size="sm" fw={500}>
+              {currentFile ? '1.0' : ''}
+            </Text>
+          </Group>
+        </Stack>
+      </ScrollArea>
+    </Card>
+  );
+};
+
+export default FileInfoCard;

frontend/src/components/fileManager/FileListArea.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Center, ScrollArea, Text, Stack } from '@mantine/core';
+import CloudIcon from '@mui/icons-material/Cloud';
+import HistoryIcon from '@mui/icons-material/History';
+import { useTranslation } from 'react-i18next';
+import FileListItem from './FileListItem';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+interface FileListAreaProps {
+  scrollAreaHeight: string;
+  scrollAreaStyle?: React.CSSProperties;
+}
+
+const FileListArea: React.FC<FileListAreaProps> = ({
+  scrollAreaHeight,
+  scrollAreaStyle = {},
+}) => {
+  const {
+    activeSource,
+    recentFiles,
+    filteredFiles,
+    selectedFileIds,
+    onFileSelect,
+    onFileRemove,
+    onFileDoubleClick,
+    isFileSupported,
+  } = useFileManagerContext();
+  const { t } = useTranslation();
+
+  if (activeSource === 'recent') {
+    return (
+      <ScrollArea 
+        h={scrollAreaHeight}
+        style={{ 
+          ...scrollAreaStyle
+        }}
+        type="always" 
+        scrollbarSize={8}
+      >
+        <Stack gap={0}>
+          {recentFiles.length === 0 ? (
+            <Center style={{ height: '12.5rem' }}>
+              <Stack align="center" gap="sm">
+                <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+                <Text c="dimmed" ta="center">{t('fileManager.noRecentFiles', 'No recent files')}</Text>
+                <Text size="xs" c="dimmed" ta="center" style={{ opacity: 0.7 }}>
+                  {t('fileManager.dropFilesHint', 'Drop files anywhere to upload')}
+                </Text>
+              </Stack>
+            </Center>
+          ) : (
+            filteredFiles.map((file, index) => (
+              <FileListItem
+                key={file.id || file.name}
+                file={file}
+                isSelected={selectedFileIds.includes(file.id || file.name)}
+                isSupported={isFileSupported(file.name)}
+                onSelect={() => onFileSelect(file)}
+                onRemove={() => onFileRemove(index)}
+                onDoubleClick={() => onFileDoubleClick(file)}
+              />
+            ))
+          )}
+        </Stack>
+      </ScrollArea>
+    );
+  }
+
+  // Google Drive placeholder
+  return (
+    <Center style={{ height: '12.5rem' }}>
+      <Stack align="center" gap="sm">
+        <CloudIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+        <Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
+      </Stack>
+    </Center>
+  );
+};
+
+export default FileListArea;

frontend/src/components/fileManager/FileListItem.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Group, Box, Text, ActionIcon, Checkbox, Divider } from '@mantine/core';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { getFileSize, getFileDate } from '../../utils/fileUtils';
+import { FileWithUrl } from '../../types/file';
+
+interface FileListItemProps {
+  file: FileWithUrl;
+  isSelected: boolean;
+  isSupported: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+  onDoubleClick?: () => void;
+  isLast?: boolean;
+}
+
+const FileListItem: React.FC<FileListItemProps> = ({ 
+  file, 
+  isSelected, 
+  isSupported, 
+  onSelect, 
+  onRemove, 
+  onDoubleClick
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <>
+      <Box 
+        p="sm" 
+        style={{ 
+          cursor: 'pointer',
+          backgroundColor: isSelected ? 'var(--mantine-color-gray-0)' : (isHovered ? 'var(--mantine-color-gray-0)' : 'var(--bg-file-list)'),
+          opacity: isSupported ? 1 : 0.5,
+          transition: 'background-color 0.15s ease'
+        }}
+        onClick={onSelect}
+        onDoubleClick={onDoubleClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Group gap="sm">
+          <Box>
+            <Checkbox
+              checked={isSelected}
+              onChange={() => {}} // Handled by parent onClick
+              size="sm"
+              pl="sm"
+              pr="xs"
+              styles={{
+                input: {
+                  cursor: 'pointer'
+                }
+              }}
+            />
+          </Box>
+       
+          <Box style={{ flex: 1, minWidth: 0 }}>
+            <Text size="sm" fw={500} truncate>{file.name}</Text>
+            <Text size="xs" c="dimmed">{getFileSize(file)} • {getFileDate(file)}</Text>
+          </Box>
+          {/* Delete button - fades in/out on hover */}
+          <ActionIcon 
+            variant="subtle" 
+            c="dimmed"
+            size="md"
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            style={{
+              opacity: isHovered ? 1 : 0,
+              transform: isHovered ? 'scale(1)' : 'scale(0.8)',
+              transition: 'opacity 0.3s ease, transform 0.3s ease',
+              pointerEvents: isHovered ? 'auto' : 'none'
+            }}
+          >
+            <DeleteIcon style={{ fontSize: 20 }} />
+          </ActionIcon>
+        </Group>
+      </Box>
+      { <Divider color="var(--mantine-color-gray-3)" />}
+    </>
+  );
+};
+
+export default FileListItem;

frontend/src/components/fileManager/FilePreview.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Box, Center, ActionIcon, Image } from '@mantine/core';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { FileWithUrl } from '../../types/file';
+
+interface FilePreviewProps {
+  currentFile: FileWithUrl | null;
+  thumbnail: string | null;
+  numberOfFiles: number;
+  isAnimating: boolean;
+  modalHeight: string;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+
+const FilePreview: React.FC<FilePreviewProps> = ({
+  currentFile,
+  thumbnail,
+  numberOfFiles,
+  isAnimating,
+  modalHeight,
+  onPrevious,
+  onNext
+}) => {
+  const hasMultipleFiles = numberOfFiles > 1;
+  // Common style objects
+  const navigationArrowStyle = {
+    position: 'absolute' as const,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 10
+  };
+
+  const stackDocumentBaseStyle = {
+    position: 'absolute' as const,
+    width: '100%',
+    height: '100%'
+  };
+
+  const animationStyle = {
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+    transform: isAnimating ? 'scale(0.95) translateX(1.25rem)' : 'scale(1) translateX(0)',
+    opacity: isAnimating ? 0.7 : 1
+  };
+
+  const mainDocumentShadow = '0 6px 16px rgba(0, 0, 0, 0.2)';
+  const stackDocumentShadows = {
+    back: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    middle: '0 3px 10px rgba(0, 0, 0, 0.12)'
+  };
+
+  return (
+    <Box p="xs" style={{ textAlign: 'center', flexShrink: 0 }}>
+      <Box style={{ position: 'relative', width: "100%", height: `calc(${modalHeight} * 0.5 - 2rem)`, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        {/* Left Navigation Arrow */}
+        {hasMultipleFiles && (
+          <ActionIcon
+            variant="light"
+            size="sm"
+            onClick={onPrevious}
+            color="blue"
+            disabled={isAnimating}
+            style={{
+              ...navigationArrowStyle,
+              left: '0'
+            }}
+          >
+            <ChevronLeftIcon />
+          </ActionIcon>
+        )}
+        
+        {/* Document Stack Container */}
+        <Box style={{ position: 'relative', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {/* Background documents (stack effect) */}
+          {/* Show 2 shadow pages for 3+ files */}
+          {numberOfFiles >= 3 && (
+            <Box
+              style={{
+                ...stackDocumentBaseStyle,
+                backgroundColor: 'var(--mantine-color-gray-3)',
+                boxShadow: stackDocumentShadows.back,
+                transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
+                zIndex: 1
+              }}
+            />
+          )}
+          
+          {/* Show 1 shadow page for 2+ files */}
+          {numberOfFiles >= 2 && (
+            <Box
+              style={{
+                ...stackDocumentBaseStyle,
+                backgroundColor: 'var(--mantine-color-gray-2)',
+                boxShadow: stackDocumentShadows.middle,
+                transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
+                zIndex: 2
+              }}
+            />
+          )}
+          
+          {/* Main document */}
+          {currentFile && thumbnail ? (
+            <Image 
+              src={thumbnail} 
+              alt={currentFile.name} 
+              fit="contain" 
+              style={{ 
+                maxWidth: '100%', 
+                maxHeight: '100%', 
+                width: 'auto', 
+                height: 'auto',
+                boxShadow: mainDocumentShadow,
+                position: 'relative',
+                zIndex: 3,
+                ...animationStyle
+              }}
+            />
+          ) : currentFile ? (
+            <Center style={{ 
+              width: '80%', 
+              height: '80%', 
+              backgroundColor: 'var(--mantine-color-gray-1)', 
+              boxShadow: mainDocumentShadow,
+              position: 'relative',
+              zIndex: 3,
+              ...animationStyle
+            }}>
+              <PictureAsPdfIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-6)' }} />
+            </Center>
+          ) : null}
+        </Box>
+        
+        {/* Right Navigation Arrow */}
+        {hasMultipleFiles && (
+          <ActionIcon
+            variant="light"
+            size="sm"
+            onClick={onNext}
+            color="blue"
+            disabled={isAnimating}
+            style={{
+              ...navigationArrowStyle,
+              right: '0'
+            }}
+          >
+            <ChevronRightIcon />
+          </ActionIcon>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default FilePreview;

frontend/src/components/fileManager/FileSourceButtons.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Stack, Text, Button, Group } from '@mantine/core';
+import HistoryIcon from '@mui/icons-material/History';
+import FolderIcon from '@mui/icons-material/Folder';
+import CloudIcon from '@mui/icons-material/Cloud';
+import { useTranslation } from 'react-i18next';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+interface FileSourceButtonsProps {
+  horizontal?: boolean;
+}
+
+const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({ 
+  horizontal = false
+}) => {
+  const { activeSource, onSourceChange, onLocalFileClick } = useFileManagerContext();
+  const { t } = useTranslation();
+
+  const buttonProps = {
+    variant: (source: string) => activeSource === source ? 'filled' : 'subtle',
+    getColor: (source: string) => activeSource === source ? 'var(--mantine-color-gray-2)' : undefined,
+    getStyles: (source: string) => ({
+      root: {
+        backgroundColor: activeSource === source ? undefined : 'transparent',
+        color: activeSource === source ? 'var(--mantine-color-gray-9)' : 'var(--mantine-color-gray-6)',
+        border: 'none',
+        '&:hover': {
+          backgroundColor: activeSource === source ? undefined : 'var(--mantine-color-gray-0)'
+        }
+      }
+    })
+  };
+
+  const buttons = (
+    <>
+      <Button
+        leftSection={<HistoryIcon />}
+        justify={horizontal ? "center" : "flex-start"}
+        onClick={() => onSourceChange('recent')}
+        fullWidth={!horizontal}
+        size={horizontal ? "xs" : "sm"}
+        color={buttonProps.getColor('recent')}
+        styles={buttonProps.getStyles('recent')}
+      >
+        {horizontal ? t('fileManager.recent', 'Recent') : t('fileManager.recent', 'Recent')}
+      </Button>
+      
+      <Button
+        variant="subtle"
+        color='var(--mantine-color-gray-6)'
+        leftSection={<FolderIcon />}
+        justify={horizontal ? "center" : "flex-start"}
+        onClick={onLocalFileClick}
+        fullWidth={!horizontal}
+        size={horizontal ? "xs" : "sm"}
+        styles={{
+          root: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            '&:hover': {
+              backgroundColor: 'var(--mantine-color-gray-0)'
+            }
+          }
+        }}
+      >
+        {horizontal ? t('fileManager.localFiles', 'Local') : t('fileManager.localFiles', 'Local Files')}
+      </Button>
+      
+      <Button
+        variant={buttonProps.variant('drive')}
+        leftSection={<CloudIcon />}
+        justify={horizontal ? "center" : "flex-start"}
+        onClick={() => onSourceChange('drive')}
+        fullWidth={!horizontal}
+        size={horizontal ? "xs" : "sm"}
+        disabled
+        color={activeSource === 'drive' ? 'gray' : undefined}
+        styles={buttonProps.getStyles('drive')}
+      >
+        {horizontal ? t('fileManager.googleDriveShort', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
+      </Button>
+    </>
+  );
+
+  if (horizontal) {
+    return (
+      <Group gap="xs" justify="center" style={{ width: '100%' }}>
+        {buttons}
+      </Group>
+    );
+  }
+
+  return (
+    <Stack gap="xs" style={{ height: '100%' }}>
+      <Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: '1rem' }}>
+        {t('fileManager.myFiles', 'My Files')}
+      </Text>
+      {buttons}
+    </Stack>
+  );
+};
+
+export default FileSourceButtons;

frontend/src/components/fileManager/HiddenFileInput.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+const HiddenFileInput: React.FC = () => {
+  const { fileInputRef, onFileInputChange } = useFileManagerContext();
+
+  return (
+    <input
+      ref={fileInputRef}
+      type="file"
+      multiple={true}
+      accept="*/*"
+      onChange={onFileInputChange}
+      style={{ display: 'none' }}
+      data-testid="file-input"
+    />
+  );
+};
+
+export default HiddenFileInput;

frontend/src/components/fileManager/MobileLayout.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Stack, Box } from '@mantine/core';
+import FileSourceButtons from './FileSourceButtons';
+import FileDetails from './FileDetails';
+import SearchInput from './SearchInput';
+import FileListArea from './FileListArea';
+import HiddenFileInput from './HiddenFileInput';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+const MobileLayout: React.FC = () => {
+  const {
+    activeSource,
+    selectedFiles,
+    modalHeight,
+  } = useFileManagerContext();
+
+  // Calculate the height more accurately based on actual content
+  const calculateFileListHeight = () => {
+    // Base modal height minus padding and gaps
+    const baseHeight = `calc(${modalHeight} - 2rem)`; // Account for Stack padding
+    
+    // Estimate heights of fixed components
+    const fileSourceHeight = '3rem'; // FileSourceButtons height
+    const fileDetailsHeight = selectedFiles.length > 0 ? '10rem' : '8rem'; // FileDetails compact height
+    const searchHeight = activeSource === 'recent' ? '3rem' : '0rem'; // SearchInput height
+    const gapHeight = activeSource === 'recent' ? '3rem' : '2rem'; // Stack gaps
+    
+    return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${searchHeight} - ${gapHeight})`;
+  };
+
+  return (
+    <Box h="100%" p="sm" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      {/* Section 1: File Sources - Fixed at top */}
+      <Box style={{ flexShrink: 0 }}>
+        <FileSourceButtons horizontal={true} />
+      </Box>
+      
+      <Box style={{ flexShrink: 0 }}>
+        <FileDetails compact={true} />
+      </Box>
+      
+      {/* Section 3 & 4: Search Bar + File List - Unified background extending to modal edge */}
+      <Box style={{ 
+        flex: 1,
+        display: 'flex', 
+        flexDirection: 'column',
+        backgroundColor: 'var(--bg-file-list)',
+        borderRadius: '0.5rem',
+        border: '1px solid var(--mantine-color-gray-2)',
+        overflow: 'hidden',
+        minHeight: 0
+      }}>
+        {activeSource === 'recent' && (
+          <Box style={{ 
+            flexShrink: 0,
+            borderBottom: '1px solid var(--mantine-color-gray-2)'
+          }}>
+            <SearchInput />
+          </Box>
+        )}
+        
+        <Box style={{ flex: 1, minHeight: 0 }}>
+          <FileListArea
+            scrollAreaHeight={calculateFileListHeight()}
+            scrollAreaStyle={{ 
+              height: calculateFileListHeight(),
+              maxHeight: '60vh',
+              minHeight: '9.375rem',
+              backgroundColor: 'transparent',
+              border: 'none',
+              borderRadius: 0
+            }}
+          />
+        </Box>
+      </Box>
+      
+      {/* Hidden file input for local file selection */}
+      <HiddenFileInput />
+    </Box>
+  );
+};
+
+export default MobileLayout;

frontend/src/components/fileManager/SearchInput.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TextInput } from '@mantine/core';
+import SearchIcon from '@mui/icons-material/Search';
+import { useTranslation } from 'react-i18next';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+
+interface SearchInputProps {
+  style?: React.CSSProperties;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
+  const { t } = useTranslation();
+  const { searchTerm, onSearchChange } = useFileManagerContext();
+
+  return (
+    <TextInput
+      placeholder={t('fileManager.searchFiles', 'Search files...')}
+      leftSection={<SearchIcon />}
+      value={searchTerm}
+      onChange={(e) => onSearchChange(e.target.value)}
+      
+      style={{ padding: '0.5rem', ...style }}
+      styles={{
+        input: {
+          border: 'none',
+          backgroundColor: 'transparent'
+        }
+      }}
+    />
+  );
+};
+
+export default SearchInput;

frontend/src/components/shared/FileCard.tsx

@@ -6,6 +6,7 @@ import StorageIcon from "@mui/icons-material/Storage";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditIcon from "@mui/icons-material/Edit";
 
+import { FileWithUrl } from "../../types/file";
 import { getFileSize, getFileDate } from "../../utils/fileUtils";
 import { useIndexedDBThumbnail } from "../../hooks/useIndexedDBThumbnail";
 import { fileStorage } from "../../services/fileStorage";

frontend/src/components/shared/FileGrid.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Group, Text, Button, TextInput, Select, Badge } from "@manti
 import { useTranslation } from "react-i18next";
 import SearchIcon from "@mui/icons-material/Search";
 import SortIcon from "@mui/icons-material/Sort";
-import FileCard from "../fileManagement/FileCard";
+import FileCard from "./FileCard";
 import { FileWithUrl } from "../../types/file";
 
 interface FileGridProps {

frontend/src/components/shared/FileUploadModal.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Modal } from '@mantine/core';
-import FileUploadSelector from './FileUploadSelector';
-import { useFilesModalContext } from '../../contexts/FilesModalContext';
-import { Tool } from '../../types/tool';
-
-interface FileUploadModalProps {
-  selectedTool?: Tool | null;
-}
-
-const FileUploadModal: React.FC<FileUploadModalProps> = ({ selectedTool }) => {
-  const { isFilesModalOpen, closeFilesModal, onFileSelect, onFilesSelect } = useFilesModalContext();
-
-
-  return (
-    <Modal
-      opened={isFilesModalOpen}
-      onClose={closeFilesModal}
-      title="Upload Files"
-      size="xl"
-      centered
-    >
-      <FileUploadSelector
-        title="Upload Files"
-        subtitle="Choose files from storage or upload new files"
-        onFileSelect={onFileSelect}
-        onFilesSelect={onFilesSelect}         
-        accept={["*/*"]}
-        supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
-        data-testid="file-upload-modal"
-      />
-    </Modal>
-  );
-};
-
-export default FileUploadModal;

frontend/src/components/shared/FileUploadSelector.tsx

@@ -1,255 +0,0 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Stack, Button, Text, Center, Box, Divider } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import { useTranslation } from 'react-i18next';
-import { fileStorage } from '../../services/fileStorage';
-import { FileWithUrl } from '../../types/file';
-import { detectFileExtension } from '../../utils/fileUtils';
-import FileGrid from './FileGrid';
-import MultiSelectControls from './MultiSelectControls';
-import { useFileManager } from '../../hooks/useFileManager';
-
-interface FileUploadSelectorProps {
-  // Appearance
-  title?: string;
-  subtitle?: string;
-  showDropzone?: boolean;
-
-  // File handling
-  sharedFiles?: any[];
-  onFileSelect?: (file: File) => void;
-  onFilesSelect: (files: File[]) => void;
-  accept?: string[];
-  supportedExtensions?: string[]; // Extensions this tool supports (e.g., ['pdf', 'jpg', 'png'])
-
-  // Loading state
-  loading?: boolean;
-  disabled?: boolean;
-
-  // Recent files
-  showRecentFiles?: boolean;
-  maxRecentFiles?: number;
-}
-
-const FileUploadSelector = ({
-  title,
-  subtitle,
-  showDropzone = true,
-  sharedFiles = [],
-  onFileSelect,
-  onFilesSelect,
-  accept = ["application/pdf", "application/zip", "application/x-zip-compressed"],
-  supportedExtensions = ["pdf"], // Default to PDF only for most tools
-  loading = false,
-  disabled = false,
-  showRecentFiles = true,
-  maxRecentFiles = 8,
-}: FileUploadSelectorProps) => {
-  const { t } = useTranslation();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const [recentFiles, setRecentFiles] = useState<FileWithUrl[]>([]);
-  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
-
-  const { loadRecentFiles, handleRemoveFile, storeFile, convertToFile, createFileSelectionHandlers } = useFileManager();
-
-  // Utility function to check if a file extension is supported
-  const isFileSupported = useCallback((fileName: string): boolean => {
-    const extension = detectFileExtension(fileName);
-    return extension ? supportedExtensions.includes(extension) : false;
-  }, [supportedExtensions]);
-
-  const refreshRecentFiles = useCallback(async () => {
-    const files = await loadRecentFiles();
-    setRecentFiles(files);
-  }, [loadRecentFiles]);
-
-  const handleNewFileUpload = useCallback(async (uploadedFiles: File[]) => {
-    if (uploadedFiles.length === 0) return;
-
-    if (showRecentFiles) {
-      try {
-        for (const file of uploadedFiles) {
-          await storeFile(file);
-        }
-        refreshRecentFiles();
-      } catch (error) {
-        console.error('Failed to save files to recent:', error);
-      }
-    }
-
-    if (onFilesSelect) {
-      onFilesSelect(uploadedFiles);
-    } else if (onFileSelect) {
-      onFileSelect(uploadedFiles[0]);
-    }
-  }, [onFileSelect, onFilesSelect, showRecentFiles, storeFile, refreshRecentFiles]);
-
-  const handleFileInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (files && files.length > 0) {
-      const fileArray = Array.from(files);
-      console.log('File input change:', fileArray.length, 'files');
-      handleNewFileUpload(fileArray);
-    }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  }, [handleNewFileUpload]);
-
-  const openFileDialog = useCallback(() => {
-    fileInputRef.current?.click();
-  }, []);
-
-  const handleRecentFileSelection = useCallback(async (file: FileWithUrl) => {
-    try {
-      const fileObj = await convertToFile(file);
-      if (onFilesSelect) {
-        onFilesSelect([fileObj]);
-      } else if (onFileSelect) {
-        onFileSelect(fileObj);
-      }
-    } catch (error) {
-      console.error('Failed to load file from recent:', error);
-    }
-  }, [onFileSelect, onFilesSelect, convertToFile]);
-
-  const selectionHandlers = createFileSelectionHandlers(selectedFiles, setSelectedFiles);
-
-  const handleSelectedRecentFiles = useCallback(async () => {
-    if (onFilesSelect) {
-      await selectionHandlers.selectMultipleFiles(recentFiles, onFilesSelect);
-    }
-  }, [recentFiles, onFilesSelect, selectionHandlers]);
-
-  const handleRemoveFileByIndex = useCallback(async (index: number) => {
-    await handleRemoveFile(index, recentFiles, setRecentFiles);
-    const file = recentFiles[index];
-    setSelectedFiles(prev => prev.filter(id => id !== (file.id || file.name)));
-  }, [handleRemoveFile, recentFiles]);
-
-  useEffect(() => {
-    if (showRecentFiles) {
-      refreshRecentFiles();
-    }
-  }, [showRecentFiles, refreshRecentFiles]);
-
-  // Get default title and subtitle from translations if not provided
-  const displayTitle = title || t("fileUpload.selectFiles", "Select files");
-  const displaySubtitle = subtitle || t("fileUpload.chooseFromStorageMultiple", "Choose files from storage or upload new PDFs");
-
-  return (
-    <>
-      <Stack align="center" gap="sm">
-        {/* Title and description */}
-        <Stack align="center" gap="md">
-          <UploadFileIcon style={{ fontSize: 64 }} />
-          <Text size="xl" fw={500}>
-            {displayTitle}
-          </Text>
-          <Text size="md" c="dimmed">
-            {displaySubtitle}
-          </Text>
-        </Stack>
-
-        {/* Action buttons */}
-        <Stack align="center" gap="md" w="100%">
-
-          {showDropzone ? (
-            <Dropzone
-              onDrop={handleNewFileUpload}
-              accept={accept}
-              multiple={true}
-              disabled={disabled || loading}
-              style={{ width: '100%', height: "5rem" }}
-              activateOnClick={true}
-              data-testid="file-dropzone"
-            >
-              <Center>
-                <Stack align="center" gap="sm">
-                  <Text size="md" fw={500}>
-                    {t("fileUpload.dropFilesHere", "Drop files here or click to upload")}
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    {accept.includes('application/pdf') && accept.includes('application/zip')
-                      ? t("fileUpload.pdfAndZipFiles", "PDF and ZIP files")
-                      : accept.includes('application/pdf')
-                      ? t("fileUpload.pdfFilesOnly", "PDF files only")
-                      : t("fileUpload.supportedFileTypes", "Supported file types")
-                    }
-                  </Text>
-                </Stack>
-              </Center>
-            </Dropzone>
-          ) : (
-            <Stack align="center" gap="sm">
-              <Button
-                variant="outline"
-                size="lg"
-                disabled={disabled}
-                loading={loading}
-                onClick={openFileDialog}
-              >
-                {t("fileUpload.uploadFiles", "Upload Files")}
-              </Button>
-
-              {/* Manual file input as backup */}
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple={true}
-                accept={accept.join(',')}
-                onChange={handleFileInputChange}
-                style={{ display: 'none' }}
-                data-testid="file-input"
-              />
-            </Stack>
-          )}
-        </Stack>
-
-      {/* Recent Files Section */}
-      {showRecentFiles && recentFiles.length > 0 && (
-        <Box w="100%" >
-          <Divider my="md" />
-          <Text size="lg" fw={500} mb="md">
-            {t("fileUpload.recentFiles", "Recent Files")}
-          </Text>
-          <MultiSelectControls
-            selectedCount={selectedFiles.length}
-            onClearSelection={selectionHandlers.clearSelection}
-            onAddToUpload={handleSelectedRecentFiles}
-            onDeleteAll={async () => {
-              await Promise.all(recentFiles.map(async (file) => {
-                await fileStorage.deleteFile(file.id || file.name);
-              }));
-              setRecentFiles([]);
-              setSelectedFiles([]);
-            }}
-          />
-
-          <FileGrid
-            files={recentFiles}
-            onDoubleClick={handleRecentFileSelection}
-            onSelect={selectionHandlers.toggleSelection}
-            onRemove={handleRemoveFileByIndex}
-            selectedFiles={selectedFiles}
-            showSearch={true}
-            showSort={true}
-            isFileSupported={isFileSupported}
-            onDeleteAll={async () => {
-              await Promise.all(recentFiles.map(async (file) => {
-                await fileStorage.deleteFile(file.id || file.name);
-              }));
-              setRecentFiles([]);
-              setSelectedFiles([]);
-            }}
-          />
-        </Box>
-      )}
-            </Stack>
-    </>
-  );
-};
-
-export default FileUploadSelector;