Added structure for filemanager (#4078)

Overview

Replaced scattered file inputs with a unified modal-based upload system.
Users now upload files via a global Files button with intelligent
tool-aware filtering.

  Key Changes

  🔄 New Upload Flow

  - Before: Direct file inputs throughout the UI
- After: Single Files button → Modal → Tool filters files automatically

  🎯 Smart File Filtering

  - Modal shows only supported file types based on selected tool
  - Visual indicators for unsupported files (grayed out + badges)
  - Automatic duplicate detection

  ✨ Enhanced UX

  - Files button shows active state when modal is open
  - Consistent upload experience across all tools
  - Professional modal workflow

  Architecture

  New Components

  FilesModalProvider → FileUploadModal → Tool-aware filtering

  Button System Redesign

  type: 'navigation' | 'modal' | 'action'
  // Only navigation buttons stay active
  // Modal buttons show active when modal open

  Files Changed

  - ✅ QuickAccessBar.tsx - Added Files button
  - ✅ FileUploadModal.tsx - New tool-aware modal
  - ✅ HomePage.tsx - Integrated modal system
  - ✅ ConvertE2E.spec.ts - Updated tests for modal workflow

  Benefits

  - Unified UX: One place to upload files
  - Smart Filtering: Only see relevant file types
  - Better Architecture: Clean separation of concerns
  - Improved Testing: Reliable test automation

Migration: File uploads now go through Files button → modal instead of
direct inputs. All existing functionality preserved.

---------

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

frontend/src/pages/HomePage.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useCallback, useEffect} from "react";
+import React, { useState, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from 'react-i18next';
 import { useFileContext } from "../contexts/FileContext";
 import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
 import { useToolManagement } from "../hooks/useToolManagement";
-import { Group, Box, Button, Container } from "@mantine/core";
+import { useFileHandler } from "../hooks/useFileHandler";
+import { Group, Box, Button } from "@mantine/core";
 import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
 import { PageEditorFunctions } from "../types/pageEditor";
 import rainbowStyles from '../styles/rainbow.module.css';
@@ -14,17 +15,19 @@ import FileEditor from "../components/fileEditor/FileEditor";
 import PageEditor from "../components/pageEditor/PageEditor";
 import PageEditorControls from "../components/pageEditor/PageEditorControls";
 import Viewer from "../components/viewer/Viewer";
-import FileUploadSelector from "../components/shared/FileUploadSelector";
 import ToolRenderer from "../components/tools/ToolRenderer";
 import QuickAccessBar from "../components/shared/QuickAccessBar";
+import LandingPage from "../components/shared/LandingPage";
+import FileUploadModal from "../components/shared/FileUploadModal";
 
 function HomePageContent() {
   const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
 
   const fileContext = useFileContext();
-  const { activeFiles, currentView, currentMode, setCurrentView, addFiles } = fileContext;
+  const { activeFiles, currentView, setCurrentView } = fileContext;
   const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
+  const { addToActiveFiles } = useFileHandler();
 
   const {
     selectedToolKey,
@@ -33,6 +36,7 @@ function HomePageContent() {
     selectTool,
     clearToolSelection,
   } = useToolManagement();
+
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
   const [readerMode, setReaderMode] = useState(false);
@@ -77,12 +81,6 @@ function HomePageContent() {
     setCurrentView(view as any);
   }, [setCurrentView]);
 
-  const addToActiveFiles = useCallback(async (file: File) => {
-    const exists = activeFiles.some(f => f.name === file.name && f.size === file.size);
-    if (!exists) {
-      await addFiles([file]);
-    }
-  }, [activeFiles, addFiles]);
 
 
 
@@ -183,26 +181,12 @@ function HomePageContent() {
             }}
           >
             {!activeFiles[0] ? (
-              <Container size="lg" p="xl" h="100%" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <FileUploadSelector
-                  title={currentView === "viewer"
-                    ? t("fileUpload.selectPdfToView", "Select a PDF to view")
-                    : t("fileUpload.selectPdfToEdit", "Select a PDF to edit")
-                  }
-                  subtitle={t("fileUpload.chooseFromStorage", "Choose a file from storage or upload a new PDF")}
-                  onFileSelect={(file) => {
-                    addToActiveFiles(file);
-                  }}
-                  onFilesSelect={(files) => {
-                    files.forEach(addToActiveFiles);
-                  }}
-                  accept={["*/*"]}
-                  supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
-                  loading={false}
-                  showRecentFiles={true}
-                  maxRecentFiles={8}
-                />
-              </Container>
+              <LandingPage
+                title={currentView === "viewer"
+                  ? t("fileUpload.selectPdfToView", "Select a PDF to view")
+                  : t("fileUpload.selectPdfToEdit", "Select a PDF to edit")
+                }
+              />
             ) : currentView === "fileEditor" ? (
               <FileEditor
                 toolMode={!!selectedToolKey}
@@ -278,26 +262,15 @@ function HomePageContent() {
                 selectedToolKey={selectedToolKey}
               />
             ) : (
-              <Container size="lg" p="xl" h="100%" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <FileUploadSelector
-                  title="File Management"
-                  subtitle="Choose files from storage or upload new PDFs"
-                  onFileSelect={(file) => {
-                    addToActiveFiles(file);
-                  }}
-                  onFilesSelect={(files) => {
-                    files.forEach(addToActiveFiles);
-                  }}
-                  accept={["*/*"]}
-                  supportedExtensions={selectedTool?.supportedFormats || ["pdf"]}
-                  loading={false}
-                  showRecentFiles={true}
-                  maxRecentFiles={8}
-                />
-              </Container>
+              <LandingPage 
+                title="File Management" 
+              />
             )}
           </Box>
       </Box>
+
+      {/* Global Modals */}
+      <FileUploadModal selectedTool={selectedTool} />
     </Group>
   );
 }