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/hooks/useFileHandler.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { useFileContext } from '../contexts/FileContext';
+
+export const useFileHandler = () => {
+  const { activeFiles, addFiles } = useFileContext();
+
+  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]);
+
+  const addMultipleFiles = useCallback(async (files: File[]) => {
+    const newFiles = files.filter(file => 
+      !activeFiles.some(f => f.name === file.name && f.size === file.size)
+    );
+    if (newFiles.length > 0) {
+      await addFiles(newFiles);
+    }
+  }, [activeFiles, addFiles]);
+
+  return {
+    addToActiveFiles,
+    addMultipleFiles,
+  };
+};