V2: Convert Tool (#3828)

🔄 Dynamic Processing Strategies

- Adaptive routing: Same tool uses different backend endpoints based on
file analysis
- Combined vs separate processing: Intelligently chooses between merge
operations and individual file processing
- Cross-format workflows: Enable complex conversions like "mixed files →
PDF" that other tools can't handle

  ⚙️ Format-Specific Intelligence

  Each conversion type gets tailored options:
  - HTML/ZIP → PDF: Zoom controls (0.1-3.0 increments) with live preview
  - Email → PDF: Attachment handling, size limits, recipient control
  - PDF → PDF/A: Digital signature detection with warnings
  - Images → PDF: Smart combining vs individual file options

 File Architecture

  Core Implementation:
  ├── Convert.tsx                     # Main stepped workflow UI
├── ConvertSettings.tsx # Centralized settings with smart detection
├── GroupedFormatDropdown.tsx # Enhanced format selector with grouping
├── useConvertParameters.ts # Smart detection & parameter management
  ├── useConvertOperation.ts         # Multi-strategy processing logic
  └── Settings Components:
      ├── ConvertFromWebSettings.tsx      # HTML zoom controls
      ├── ConvertFromEmailSettings.tsx    # Email attachment options
├── ConvertToPdfaSettings.tsx # PDF/A with signature detection
      ├── ConvertFromImageSettings.tsx    # Image PDF options
      └── ConvertToImageSettings.tsx      # PDF to image options

 Utility Layer

  Utils & Services:
├── convertUtils.ts # Format detection & endpoint routing
  ├── fileResponseUtils.ts          # Generic API response handling
└── setupTests.ts # Enhanced test environment with crypto mocks

  Testing & Quality

  Comprehensive Test Coverage

  Test Suite:
├── useConvertParameters.test.ts # Parameter logic & smart detection
  ├── useConvertParametersAutoDetection.test.ts  # File type analysis
├── ConvertIntegration.test.tsx # End-to-end conversion workflows
  ├── ConvertSmartDetectionIntegration.test.tsx  # Mixed file scenarios
  ├── ConvertE2E.spec.ts                     # Playwright browser tests
├── convertUtils.test.ts # Utility function validation
  └── fileResponseUtils.test.ts              # API response handling

  Advanced Test Features

  - Crypto API mocking: Proper test environment for file hashing
  - File.arrayBuffer() polyfills: Complete browser API simulation
  - Multi-file scenario testing: Complex batch processing validation
- CI/CD integration: Vitest runs in GitHub Actions with proper artifacts

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

frontend/src/components/shared/FileGrid.tsx

@@ -20,6 +20,7 @@ interface FileGridProps {
   onShowAll?: () => void;
   showingAll?: boolean;
   onDeleteAll?: () => void;
+  isFileSupported?: (fileName: string) => boolean; // Function to check if file is supported
 }
 
 type SortOption = 'date' | 'name' | 'size';
@@ -37,7 +38,8 @@ const FileGrid = ({
   maxDisplay,
   onShowAll,
   showingAll = false,
-  onDeleteAll
+  onDeleteAll,
+  isFileSupported
 }: FileGridProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState("");
@@ -123,16 +125,18 @@ const FileGrid = ({
         {displayFiles.map((file, idx) => {
           const fileId = file.id || file.name;
           const originalIdx = files.findIndex(f => (f.id || f.name) === fileId);
+          const supported = isFileSupported ? isFileSupported(file.name) : true;
           return (
             <FileCard
               key={fileId + idx}
               file={file}
               onRemove={onRemove ? () => onRemove(originalIdx) : undefined}
-              onDoubleClick={onDoubleClick ? () => onDoubleClick(file) : undefined}
-              onView={onView ? () => onView(file) : undefined}
-              onEdit={onEdit ? () => onEdit(file) : undefined}
+              onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(file) : undefined}
+              onView={onView && supported ? () => onView(file) : undefined}
+              onEdit={onEdit && supported ? () => onEdit(file) : undefined}
               isSelected={selectedFiles.includes(fileId)}
-              onSelect={onSelect ? () => onSelect(fileId) : undefined}
+              onSelect={onSelect && supported ? () => onSelect(fileId) : undefined}
+              isSupported={supported}
             />
           );
         })}

frontend/src/components/shared/FileUploadSelector.tsx

@@ -5,6 +5,7 @@ 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';
@@ -20,6 +21,7 @@ interface FileUploadSelectorProps {
   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;
@@ -38,6 +40,7 @@ const FileUploadSelector = ({
   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,
@@ -51,6 +54,12 @@ const FileUploadSelector = ({
 
   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);
@@ -155,6 +164,7 @@ const FileUploadSelector = ({
               disabled={disabled || loading}
               style={{ width: '100%', height: "5rem" }}
               activateOnClick={true}
+              data-testid="file-dropzone"
             >
               <Center>
                 <Stack align="center" gap="sm">
@@ -192,6 +202,7 @@ const FileUploadSelector = ({
                 accept={accept.join(',')}
                 onChange={handleFileInputChange}
                 style={{ display: 'none' }}
+                data-testid="file-input"
               />
             </Stack>
           )}
@@ -225,6 +236,7 @@ const FileUploadSelector = ({
             selectedFiles={selectedFiles}
             showSearch={true}
             showSort={true}
+            isFileSupported={isFileSupported}
             onDeleteAll={async () => {
               await Promise.all(recentFiles.map(async (file) => {
                 await fileStorage.deleteFile(file.id || file.name);