Feature/V2/Compress (#3982)

# Description of Changes

- Added the compression tool
- Slightly adjusted the padding on split, compress and the parent
sidebar component so things aren't so smushed
- Future work will be to allow multi-select on files and to add further
styling to the toolstep / sidebar component

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Ethan <ethan@MacBook-Pro.local>
Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

frontend/src/components/tools/ToolRenderer.tsx

@@ -41,10 +41,8 @@ files,
     case "compress":
       return (
         <ToolComponent
-          files={files}
+          selectedFiles={toolSelectedFiles}
-          setLoading={(loading: boolean) => {}}
+          onPreviewFile={onPreviewFile}
-          params={toolParams}
-          updateParams={updateParams}
         />
       );
     case "merge":

frontend/src/components/tools/compress/CompressSettings.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from "react";
+import { Button, Stack, Text, NumberInput, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+interface CompressParameters {
+  compressionMethod: 'quality' | 'filesize';
+  compressionLevel: number;
+  fileSizeValue: string;
+  fileSizeUnit: 'KB' | 'MB';
+  grayscale: boolean;
+}
+
+interface CompressSettingsProps {
+  parameters: CompressParameters;
+  onParameterChange: (key: keyof CompressParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const CompressSettings = ({ parameters, onParameterChange, disabled = false }: CompressSettingsProps) => {
+  const { t } = useTranslation();
+  const [isSliding, setIsSliding] = useState(false);
+
+  return (
+    <Stack gap="md">
+      {/* Compression Method */}
+      <Stack gap="sm">
+        <Text size="sm" fw={500}>Compression Method</Text>
+        <div style={{ display: 'flex', gap: '4px' }}>
+          <Button
+            variant={parameters.compressionMethod === 'quality' ? 'filled' : 'outline'}
+            color={parameters.compressionMethod === 'quality' ? 'blue' : 'gray'}
+            onClick={() => onParameterChange('compressionMethod', 'quality')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              Quality
+            </div>
+          </Button>
+          <Button
+            variant={parameters.compressionMethod === 'filesize' ? 'filled' : 'outline'}
+            color={parameters.compressionMethod === 'filesize' ? 'blue' : 'gray'}
+            onClick={() => onParameterChange('compressionMethod', 'filesize')}
+            disabled={disabled}
+            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          >
+            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
+              File Size
+            </div>
+          </Button>
+        </div>
+      </Stack>
+
+      {/* Quality Adjustment */}
+      {parameters.compressionMethod === 'quality' && (
+        <Stack gap="sm">
+          <Text size="sm" fw={500}>Compression Level</Text>
+          <div style={{ position: 'relative' }}>
+            <input
+              type="range"
+              min="1"
+              max="9"
+              step="1"
+              value={parameters.compressionLevel}
+              onChange={(e) => onParameterChange('compressionLevel', parseInt(e.target.value))}
+              onMouseDown={() => setIsSliding(true)}
+              onMouseUp={() => setIsSliding(false)}
+              onTouchStart={() => setIsSliding(true)}
+              onTouchEnd={() => setIsSliding(false)}
+              disabled={disabled}
+              style={{ 
+                width: '100%',
+                height: '6px',
+                borderRadius: '3px',
+                background: `linear-gradient(to right, #228be6 0%, #228be6 ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef ${(parameters.compressionLevel - 1) / 8 * 100}%, #e9ecef 100%)`,
+                outline: 'none',
+                WebkitAppearance: 'none'
+              }}
+            />
+            {isSliding && (
+              <div style={{
+                position: 'absolute',
+                top: '-25px',
+                left: `${(parameters.compressionLevel - 1) / 8 * 100}%`,
+                transform: 'translateX(-50%)',
+                background: '#f8f9fa',
+                border: '1px solid #dee2e6',
+                borderRadius: '4px',
+                padding: '2px 6px',
+                fontSize: '12px',
+                color: '#228be6',
+                whiteSpace: 'nowrap'
+              }}>
+                {parameters.compressionLevel}
+              </div>
+            )}
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#6c757d' }}>
+            <span>Min 1</span>
+            <span>Max 9</span>
+          </div>
+          <Text size="xs" c="dimmed" style={{ marginTop: '8px' }}>
+            {parameters.compressionLevel <= 3 && "1-3 PDF compression"}
+            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && "4-6 lite image compression"}
+            {parameters.compressionLevel >= 7 && "7-9 intense image compression Will dramatically reduce image quality"}
+          </Text>
+        </Stack>
+      )}
+
+      {/* File Size Input */}
+      {parameters.compressionMethod === 'filesize' && (
+        <Stack gap="sm">
+          <Text size="sm" fw={500}>Desired File Size</Text>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
+            <NumberInput
+              placeholder="Enter size"
+              value={parameters.fileSizeValue}
+              onChange={(value) => onParameterChange('fileSizeValue', value?.toString() || '')}
+              min={0}
+              disabled={disabled}
+              style={{ flex: 1 }}
+            />
+            <Select
+              value={parameters.fileSizeUnit}
+              onChange={(value) => {
+                // Prevent deselection - if value is null/undefined, keep the current value
+                if (value) {
+                  onParameterChange('fileSizeUnit', value as 'KB' | 'MB');
+                }
+              }}
+              disabled={disabled}
+              data={[
+                { value: 'KB', label: 'KB' },
+                { value: 'MB', label: 'MB' }
+              ]}
+              style={{ width: '80px' }}
+            />
+          </div>
+        </Stack>
+      )}
+
+      {/* Compression Options */}
+      <Stack gap="sm">
+        <label 
+          style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+          title="Converts all images in the PDF to grayscale, which can significantly reduce file size while maintaining readability"
+        >
+          <input
+            type="checkbox"
+            checked={parameters.grayscale}
+            onChange={(e) => onParameterChange('grayscale', e.target.checked)}
+            disabled={disabled}
+          />
+          <Text size="sm">{t("compress.grayscale.label", "Apply Grayscale for compression")}</Text>
+        </label>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default CompressSettings;

frontend/src/hooks/tools/compress/useCompressOperation.ts

@@ -0,0 +1,250 @@
+import { useCallback, useState } from 'react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import { useFileContext } from '../../../contexts/FileContext';
+import { FileOperation } from '../../../types/fileContext';
+import { zipFileService } from '../../../services/zipFileService';
+import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+
+export interface CompressParameters {
+  compressionLevel: number;
+  grayscale: boolean;
+  expectedSize: string;
+  compressionMethod: 'quality' | 'filesize';
+  fileSizeValue: string;
+  fileSizeUnit: 'KB' | 'MB';
+}
+
+export interface CompressOperationHook {
+  executeOperation: (
+    parameters: CompressParameters,
+    selectedFiles: File[]
+  ) => Promise<void>;
+  
+  // Flattened result properties for cleaner access
+  files: File[];
+  thumbnails: string[];
+  isGeneratingThumbnails: boolean;
+  downloadUrl: string | null;
+  downloadFilename: string;
+  status: string;
+  errorMessage: string | null;
+  isLoading: boolean;
+  
+  // Result management functions
+  resetResults: () => void;
+  clearError: () => void;
+}
+
+export const useCompressOperation = (): CompressOperationHook => {
+  const { t } = useTranslation();
+  const { 
+    recordOperation, 
+    markOperationApplied, 
+    markOperationFailed,
+    addFiles
+  } = useFileContext();
+  
+  // Internal state management
+  const [files, setFiles] = useState<File[]>([]);
+  const [thumbnails, setThumbnails] = useState<string[]>([]);
+  const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [downloadFilename, setDownloadFilename] = useState<string>('');
+  const [status, setStatus] = useState('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const buildFormData = useCallback((
+    parameters: CompressParameters,
+    selectedFiles: File[]
+  ) => {
+    const formData = new FormData();
+    
+    selectedFiles.forEach(file => {
+      formData.append("fileInput", file);
+    });
+
+    if (parameters.compressionMethod === 'quality') {
+      formData.append("optimizeLevel", parameters.compressionLevel.toString());
+    } else {
+      // File size method
+      const fileSize = parameters.fileSizeValue ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` : '';
+      if (fileSize) {
+        formData.append("expectedOutputSize", fileSize);
+      }
+    }
+    
+    formData.append("grayscale", parameters.grayscale.toString());
+
+    const endpoint = "/api/v1/misc/compress-pdf";
+
+    return { formData, endpoint };
+  }, []);
+
+  const createOperation = useCallback((
+    parameters: CompressParameters,
+    selectedFiles: File[]
+  ): { operation: FileOperation; operationId: string; fileId: string } => {
+    const operationId = `compress-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fileId = selectedFiles[0].name;
+
+    const operation: FileOperation = {
+      id: operationId,
+      type: 'compress',
+      timestamp: Date.now(),
+      fileIds: selectedFiles.map(f => f.name),
+      status: 'pending',
+      metadata: {
+        originalFileName: selectedFiles[0].name,
+        parameters: {
+          compressionLevel: parameters.compressionLevel,
+          grayscale: parameters.grayscale,
+          expectedSize: parameters.expectedSize,
+        },
+        fileSize: selectedFiles[0].size
+      }
+    };
+
+    return { operation, operationId, fileId };
+  }, []);
+
+  const processResults = useCallback(async (blob: Blob, selectedFiles: File[]) => {
+    try {
+      // Check if the response is a PDF file directly or a ZIP file
+      const contentType = blob.type;
+      console.log('Response content type:', contentType);
+      
+      if (contentType === 'application/pdf') {
+        // Direct PDF response
+        const originalFileName = selectedFiles[0].name;
+        const pdfFile = new File([blob], `compressed_${originalFileName}`, { type: "application/pdf" });
+        setFiles([pdfFile]);
+        setThumbnails([]);
+        setIsGeneratingThumbnails(true);
+        
+        // Add file to FileContext
+        await addFiles([pdfFile]);
+        
+        // Generate thumbnail
+        const thumbnail = await generateThumbnailForFile(pdfFile);
+        setThumbnails([thumbnail || '']);
+        setIsGeneratingThumbnails(false);
+      } else {
+        // ZIP file response (like split operation)
+        const zipFile = new File([blob], "compress_result.zip", { type: "application/zip" });
+        const extractionResult = await zipFileService.extractPdfFiles(zipFile);
+
+        if (extractionResult.success && extractionResult.extractedFiles.length > 0) {
+          // Set local state for preview
+          setFiles(extractionResult.extractedFiles);
+          setThumbnails([]);
+          setIsGeneratingThumbnails(true);
+
+          // Add extracted files to FileContext for future use
+          await addFiles(extractionResult.extractedFiles);
+
+          const thumbnails = await Promise.all(
+            extractionResult.extractedFiles.map(async (file) => {
+              try {
+                const thumbnail = await generateThumbnailForFile(file);
+                return thumbnail || '';
+              } catch (error) {
+                console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
+                return '';
+              }
+            })
+          );
+
+          setThumbnails(thumbnails);
+          setIsGeneratingThumbnails(false);
+        }
+      }
+    } catch (extractError) {
+      console.warn('Failed to process results:', extractError);
+    }
+  }, [addFiles]);
+
+  const executeOperation = useCallback(async (
+    parameters: CompressParameters,
+    selectedFiles: File[]
+  ) => {
+    if (selectedFiles.length === 0) {
+      setStatus(t("noFileSelected"));
+      return;
+    }
+
+    const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
+    const { formData, endpoint } = buildFormData(parameters, selectedFiles);
+
+    recordOperation(fileId, operation);
+
+    setStatus(t("loading"));
+    setIsLoading(true);
+    setErrorMessage(null);
+
+    try {
+      const response = await axios.post(endpoint, formData, { responseType: "blob" });
+      
+      // Determine the correct content type from the response
+      const contentType = response.headers['content-type'] || 'application/zip';
+      const blob = new Blob([response.data], { type: contentType });
+      const url = window.URL.createObjectURL(blob);
+      
+      // Generate dynamic filename based on original file and content type
+      const originalFileName = selectedFiles[0].name;
+      const filename = `compressed_${originalFileName}`;
+      setDownloadFilename(filename);
+      setDownloadUrl(url);
+      setStatus(t("downloadComplete"));
+
+      await processResults(blob, selectedFiles);
+      markOperationApplied(fileId, operationId);
+    } catch (error: any) {
+      console.error(error);
+      let errorMsg = t("error.pdfPassword", "An error occurred while compressing the PDF.");
+      if (error.response?.data && typeof error.response.data === 'string') {
+        errorMsg = error.response.data;
+      } else if (error.message) {
+        errorMsg = error.message;
+      }
+      setErrorMessage(errorMsg);
+      setStatus(t("error._value", "Compression failed."));
+      markOperationFailed(fileId, operationId, errorMsg);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [t, createOperation, buildFormData, recordOperation, markOperationApplied, markOperationFailed, processResults]);
+
+  const resetResults = useCallback(() => {
+    setFiles([]);
+    setThumbnails([]);
+    setIsGeneratingThumbnails(false);
+    setDownloadUrl(null);
+    setStatus('');
+    setErrorMessage(null);
+    setIsLoading(false);
+  }, []);
+
+  const clearError = useCallback(() => {
+    setErrorMessage(null);
+  }, []);
+
+  return {
+    executeOperation,
+    
+    // Flattened result properties for cleaner access
+    files,
+    thumbnails,
+    isGeneratingThumbnails,
+    downloadUrl,
+    downloadFilename,
+    status,
+    errorMessage,
+    isLoading,
+    
+    // Result management functions
+    resetResults,
+    clearError,
+  };
+};

frontend/src/hooks/tools/compress/useCompressParameters.ts

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { CompressParameters } from './useCompressOperation';
+
+export interface CompressParametersHook {
+  parameters: CompressParameters;
+  updateParameter: (parameter: keyof CompressParameters, value: string | boolean | number) => void;
+  resetParameters: () => void;
+  validateParameters: () => boolean;
+  getEndpointName: () => string;
+}
+
+const initialParameters: CompressParameters = {
+  compressionLevel: 5,
+  grayscale: false,
+  expectedSize: '',
+  compressionMethod: 'quality',
+  fileSizeValue: '',
+  fileSizeUnit: 'MB',
+};
+
+export const useCompressParameters = (): CompressParametersHook => {
+  const [parameters, setParameters] = useState<CompressParameters>(initialParameters);
+
+  const updateParameter = (parameter: keyof CompressParameters, value: string | boolean | number) => {
+    setParameters(prev => ({ ...prev, [parameter]: value }));
+  };
+
+  const resetParameters = () => {
+    setParameters(initialParameters);
+  };
+
+  const validateParameters = () => {
+    // For compression, we only need to validate that compression level is within range
+    // and that at least one file is selected (at least, I think that's all we need to do here)
+    return parameters.compressionLevel >= 1 && parameters.compressionLevel <= 9;
+  };
+
+  const getEndpointName = () => {
+    return 'compress-pdf';
+  };
+
+  return {
+    parameters,
+    updateParameter,
+    resetParameters,
+    validateParameters,
+    getEndpointName,
+  };
+};

frontend/src/hooks/useToolManagement.tsx

@@ -21,7 +21,7 @@ type ToolRegistry = {
 
 const baseToolRegistry = {
   split: { icon: <ContentCutIcon />, component: SplitPdfPanel, view: "split" },
-  compress: { icon: <ZoomInMapIcon />, component: CompressPdfPanel, view: "viewer" },
+  compress: { icon: <ZoomInMapIcon />, component: CompressPdfPanel, view: "compress" },
   merge: { icon: <AddToPhotosIcon />, component: MergePdfPanel, view: "pageEditor" },
 };
 

frontend/src/pages/HomePage.tsx

@@ -100,7 +100,7 @@ export default function HomePage() {
         className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-surface)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
         style={{
           width: sidebarsVisible && !readerMode ? '14vw' : '0',
-          padding: sidebarsVisible && !readerMode ? '1rem' : '0'
+          padding: sidebarsVisible && !readerMode ? '0.5rem' : '0'
         }}
       >
           <div
@@ -137,7 +137,7 @@ export default function HomePage() {
                 </div>
 
                 {/* Tool title */}
-                <div className="mb-4">
+                <div className="mb-4" style={{ marginLeft: '0.5rem' }}>
                   <h2 className="text-lg font-semibold">{selectedTool?.name}</h2>
                 </div>
 
@@ -219,6 +219,11 @@ export default function HomePage() {
                       setCurrentView('split');
                       setLeftPanelView('toolContent');
                       sessionStorage.removeItem('previousMode');
+                    } else if (previousMode === 'compress') {
+                      selectTool('compress');
+                      setCurrentView('compress');
+                      setLeftPanelView('toolContent');
+                      sessionStorage.removeItem('previousMode');
                     } else {
                       setCurrentView('fileEditor');
                     }
@@ -258,6 +263,16 @@ export default function HomePage() {
                   setToolSelectedFiles(files);
                 }}
               />
+            ) : currentView === "compress" ? (
+              <FileEditor
+                toolMode={true}
+                multiSelect={false} // TODO: make this work with multiple files
+                showUpload={true}
+                showBulkActions={true}
+                onFileSelect={(files) => {
+                  setToolSelectedFiles(files);
+                }}
+              />
             ) : selectedToolKey && selectedTool ? (
               <ToolRenderer
                 selectedToolKey={selectedToolKey}

frontend/src/tools/Compress.tsx

@@ -1,186 +1,157 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo } from "react";
+import { Button, Stack, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { Stack, Slider, Group, Text, Button, Checkbox, TextInput, Loader, Alert } from "@mantine/core";
+import DownloadIcon from "@mui/icons-material/Download";
-import { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
 
-export interface CompressProps {
+import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
-  files?: FileWithUrl[];
+import OperationButton from "../components/tools/shared/OperationButton";
-  setDownloadUrl?: (url: string) => void;
+import ErrorNotification from "../components/tools/shared/ErrorNotification";
-  setLoading?: (loading: boolean) => void;
+import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
-  params?: {
+import ResultsPreview from "../components/tools/shared/ResultsPreview";
-    compressionLevel: number;
+
-    grayscale: boolean;
+import CompressSettings from "../components/tools/compress/CompressSettings";
-    removeMetadata: boolean;
+
-    expectedSize: string;
+import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
-    aggressive: boolean;
+import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
-  };
+
-  updateParams?: (newParams: Partial<CompressProps["params"]>) => void;
+interface CompressProps {
+  selectedFiles?: File[];
+  onPreviewFile?: (file: File | null) => void;
 }
 
-const CompressPdfPanel: React.FC<CompressProps> = ({
+const Compress = ({ selectedFiles = [], onPreviewFile }: CompressProps) => {
-  files = [],
-  setDownloadUrl,
-  setLoading,
-  params = {
-    compressionLevel: 5,
-    grayscale: false,
-    removeMetadata: false,
-    expectedSize: "",
-    aggressive: false,
-  },
-  updateParams,
-}) => {
   const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
 
-  const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
+  const compressParams = useCompressParameters();
-  const [localLoading, setLocalLoading] = useState<boolean>(false);
+  const compressOperation = useCompressOperation();
+
+  // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
 
-  const {
+  useEffect(() => {
-    compressionLevel,
+    compressOperation.resetResults();
-    grayscale,
+    onPreviewFile?.(null);
-    removeMetadata,
+  }, [compressParams.parameters, selectedFiles]);
-    expectedSize,
-    aggressive,
-  } = params;
-
-  // Update selection state if files prop changes
-  React.useEffect(() => {
-    setSelected(files.map(() => false));
-  }, [files]);
-
-  const handleCheckbox = (idx: number) => {
-    setSelected(sel => sel.map((v, i) => (i === idx ? !v : v)));
-  };
 
   const handleCompress = async () => {
-    const selectedFiles = files.filter((_, i) => selected[i]);
+    await compressOperation.executeOperation(
-    if (selectedFiles.length === 0) return;
+      compressParams.parameters,
-    setLocalLoading(true);
+      selectedFiles
-    setLoading?.(true);
+    );
-
-    try {
-      const formData = new FormData();
-
-      // Handle IndexedDB files
-      for (const file of selectedFiles) {
-              if (!file.id) {
-        continue; // Skip files without an id
-      }
-        const storedFile = await fileStorage.getFile(file.id);
-        if (storedFile) {
-          const blob = new Blob([storedFile.data], { type: storedFile.type });
-          const actualFile = new File([blob], storedFile.name, {
-            type: storedFile.type,
-            lastModified: storedFile.lastModified
-          });
-          formData.append("fileInput", actualFile);
-        }
-      }
-
-      formData.append("compressionLevel", compressionLevel.toString());
-      formData.append("grayscale", grayscale.toString());
-      formData.append("removeMetadata", removeMetadata.toString());
-      formData.append("aggressive", aggressive.toString());
-      if (expectedSize) formData.append("expectedSize", expectedSize);
-
-      const res = await fetch("/api/v1/general/compress-pdf", {
-        method: "POST",
-        body: formData,
-      });
-      const blob = await res.blob();
-      setDownloadUrl?.(URL.createObjectURL(blob));
-    } catch (error) {
-      console.error('Compression failed:', error);
-    } finally {
-      setLocalLoading(false);
-      setLoading?.(false);
-    }
   };
 
-  if (endpointLoading) {
+  const handleThumbnailClick = (file: File) => {
-    return (
+    onPreviewFile?.(file);
-      <Stack align="center" justify="center" h={200}>
+    sessionStorage.setItem('previousMode', 'compress');
-        <Loader size="md" />
+    setCurrentMode('viewer');
-        <Text size="sm" c="dimmed">{t("loading", "Loading...")}</Text>
+  };
-      </Stack>
-    );
-  }
 
-  if (endpointEnabled === false) {
+  const handleSettingsReset = () => {
-    return (
+    compressOperation.resetResults();
-      <Stack align="center" justify="center" h={200}>
+    onPreviewFile?.(null);
-        <Alert color="red" title={t("error._value", "Error")} variant="light">
+    setCurrentMode('compress');
-          {t("endpointDisabled", "This feature is currently disabled.")}
+  };
-        </Alert>
+
-      </Stack>
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = compressOperation.downloadUrl !== null;
+  const filesCollapsed = hasFiles;
+  const settingsCollapsed = hasResults;
+
+  const previewResults = useMemo(() =>
+    compressOperation.files?.map((file, index) => ({
+      file,
+      thumbnail: compressOperation.thumbnails[index]
+    })) || [],
+    [compressOperation.files, compressOperation.thumbnails]
   );
-  }
 
   return (
-      <Stack>
+    <ToolStepContainer>
-        <Text fw={500} mb={4}>{t("multiPdfDropPrompt", "Select files to compress:")}</Text>
+      <Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
-        <Stack gap={4}>
+        {/* Files Step */}
-          {files.length === 0 && <Text c="dimmed" size="sm">{t("noFileSelected")}</Text>}
+        <ToolStep
-          {files.map((file, idx) => (
+          title="Files"
-            <Checkbox
+          isVisible={true}
-              key={file.name + idx}
+          isCollapsed={filesCollapsed}
-              label={file.name}
+          isCompleted={filesCollapsed}
-              checked={selected[idx] || false}
+          completedMessage={hasFiles ? `Selected: ${selectedFiles[0]?.name}` : undefined}
-              onChange={() => handleCheckbox(idx)}
-            />
-          ))}
-        </Stack>
-        <Stack gap={4} mb={14}>
-          <Text size="sm" style={{ minWidth: 140 }}>{t("compress.selectText.2", "Compression Level")}</Text>
-          <Slider
-            min={1}
-            max={9}
-            step={1}
-            value={compressionLevel}
-            onChange={(value) => updateParams?.({ compressionLevel: value })}
-            marks={[
-              { value: 1, label: "1" },
-              { value: 5, label: "5" },
-              { value: 9, label: "9" },
-            ]}
-            style={{ flex: 1 }}
-          />
-        </Stack>
-        <Checkbox
-          label={t("compress.grayscale.label", "Convert images to grayscale")}
-          checked={grayscale}
-          onChange={e => updateParams?.({ grayscale: e.currentTarget.checked })}
-        />
-        <Checkbox
-          label={t("removeMetadata.submit", "Remove PDF metadata")}
-          checked={removeMetadata}
-          onChange={e => updateParams?.({ removeMetadata: e.currentTarget.checked })}
-        />
-        <Checkbox
-          label={t("compress.selectText.1.1", "Aggressive compression (may reduce quality)")}
-          checked={aggressive}
-          onChange={e => updateParams?.({ aggressive: e.currentTarget.checked })}
-        />
-        <TextInput
-          label={t("compress.selectText.5", "Expected output size")}
-          placeholder={t("compress.selectText.5", "e.g. 25MB, 10.8MB, 25KB")}
-          value={expectedSize}
-          onChange={e => updateParams?.({ expectedSize: e.currentTarget.value })}
-        />
-        <Button
-          onClick={handleCompress}
-          loading={localLoading}
-          disabled={selected.every(v => !v)}
-          fullWidth
-          mt="md"
         >
-          {t("compress.submit", "Compress")} {t("pdfPrompt", "PDF")}{selected.filter(Boolean).length > 1 ? "s" : ""}
+          <FileStatusIndicator
-        </Button>
+            selectedFiles={selectedFiles}
-      </Stack>
+            placeholder="Select a PDF file in the main view to get started"
-  );
+          />
-};
+        </ToolStep>
 
-export default CompressPdfPanel;
+        {/* Settings Step */}
+        <ToolStep
+          title="Settings"
+          isVisible={hasFiles}
+          isCollapsed={settingsCollapsed}
+          isCompleted={settingsCollapsed}
+          onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
+          completedMessage={settingsCollapsed ? "Compression completed" : undefined}
+        >
+          <Stack gap="sm">
+            <CompressSettings
+              parameters={compressParams.parameters}
+              onParameterChange={compressParams.updateParameter}
+              disabled={endpointLoading}
+            />
+
+            <OperationButton
+              onClick={handleCompress}
+              isLoading={compressOperation.isLoading}
+              disabled={!compressParams.validateParameters() || !hasFiles || !endpointEnabled}
+              loadingText={t("loading")}
+              submitText="Compress and Review"
+            />
+          </Stack>
+        </ToolStep>
+
+        {/* Results Step */}
+        <ToolStep
+          title="Results"
+          isVisible={hasResults}
+        >
+          <Stack gap="sm">
+            {compressOperation.status && (
+              <Text size="sm" c="dimmed">{compressOperation.status}</Text>
+            )}
+
+            <ErrorNotification
+              error={compressOperation.errorMessage}
+              onClose={compressOperation.clearError}
+            />
+
+            {compressOperation.downloadUrl && (
+              <Button
+                component="a"
+                href={compressOperation.downloadUrl}
+                download={compressOperation.downloadFilename}
+                leftSection={<DownloadIcon />}
+                color="green"
+                fullWidth
+                mb="md"
+              >
+                {t("download", "Download")}
+              </Button>
+            )}
+
+            <ResultsPreview
+              files={previewResults}
+              onFileClick={handleThumbnailClick}
+              isGeneratingThumbnails={compressOperation.isGeneratingThumbnails}
+              title="Compression Results"
+            />
+          </Stack>
+        </ToolStep>
+      </Stack>
+    </ToolStepContainer>
+  );
+}
+
+
+export default Compress;

frontend/src/tools/Split.tsx

@@ -73,7 +73,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
 
   return (
     <ToolStepContainer>
-      <Stack gap="md" h="100%" p="md" style={{ overflow: 'auto' }}>
+      <Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
         {/* Files Step */}
         <ToolStep
           title="Files"
@@ -97,7 +97,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
           onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
           completedMessage={settingsCollapsed ? "Split completed" : undefined}
         >
-          <Stack gap="md">
+          <Stack gap="sm">
             <SplitSettings
               mode={splitParams.mode}
               onModeChange={splitParams.setMode}
@@ -123,7 +123,7 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
           title="Results"
           isVisible={hasResults}
         >
-          <Stack gap="md">
+          <Stack gap="sm">
             {splitOperation.status && (
               <Text size="sm" c="dimmed">{splitOperation.status}</Text>
             )}