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 <[email protected]>
Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/components/pageEditor/FileThumbnail.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Text, Checkbox, Tooltip, ActionIcon, Badge, Modal } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import CloseIcon from '@mui/icons-material/Close';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import HistoryIcon from '@mui/icons-material/History';
@@ -37,6 +38,7 @@ interface FileThumbnailProps {
   onViewFile: (fileId: string) => void;
   onSetStatus: (status: string) => void;
   toolMode?: boolean;
+  isSupported?: boolean;
 }
 
 const FileThumbnail = ({
@@ -60,7 +62,9 @@ const FileThumbnail = ({
   onViewFile,
   onSetStatus,
   toolMode = false,
+  isSupported = true,
 }: FileThumbnailProps) => {
+  const { t } = useTranslation();
   const [showHistory, setShowHistory] = useState(false);
 
   const formatFileSize = (bytes: number) => {
@@ -81,6 +85,7 @@ const FileThumbnail = ({
         }
       }}
       data-file-id={file.id}
+      data-testid="file-thumbnail"
       className={`
         ${styles.pageContainer}
         !rounded-lg
@@ -106,7 +111,9 @@ const FileThumbnail = ({
           }
           return 'translateX(0)';
         })(),
-        transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out'
+        transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out',
+        opacity: isSupported ? 1 : 0.5,
+        filter: isSupported ? 'none' : 'grayscale(50%)'
       }}
       draggable
       onDragStart={() => onDragStart(file.id)}
@@ -119,6 +126,7 @@ const FileThumbnail = ({
       {selectionMode && (
         <div
           className={styles.checkboxContainer}
+          data-testid="file-thumbnail-checkbox"
           style={{
             position: 'absolute',
             top: 8,
@@ -140,9 +148,12 @@ const FileThumbnail = ({
             checked={selectedFiles.includes(file.id)}
             onChange={(event) => {
               event.stopPropagation();
-              onToggleFile(file.id);
+              if (isSupported) {
+                onToggleFile(file.id);
+              }
             }}
             onClick={(e) => e.stopPropagation()}
+            disabled={!isSupported}
             size="sm"
           />
         </div>
@@ -193,6 +204,23 @@ const FileThumbnail = ({
           {file.pageCount} pages
         </Badge>
 
+        {/* Unsupported badge */}
+        {!isSupported && (
+          <Badge
+            size="sm"
+            variant="filled"
+            color="orange"
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: selectionMode ? 48 : 8, // Avoid overlap with checkbox
+              zIndex: 3,
+            }}
+          >
+{t("fileManager.unsupported", "Unsupported")}
+          </Badge>
+        )}
+
         {/* File name overlay */}
         <Text
           className={styles.pageNumber}
@@ -238,7 +266,7 @@ const FileThumbnail = ({
             whiteSpace: 'nowrap'
           }}
         >
-          {!toolMode && (
+          {!toolMode && isSupported && (
             <>
               <Tooltip label="View File">
                 <ActionIcon