Merge branch 'V2-async-request' of git@github.com:Stirling-Tools/Stirling-PDF.git into V2-async-request

2025-08-16 13:47:28 +02:00 · 2025-07-29 12:16:33 +01:00 · 2025-07-29 12:16:33 +01:00 · 2affd1732b
commit 2affd1732b
parent 4a173ec12a 3e077c173a
31 changed files with 1858 additions and 507 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -223,69 +223,3 @@ jobs:
          chmod +x ./testing/test.sh
          chmod +x ./testing/test_disabledEndpoints.sh
          ./testing/test.sh
-
-  test-build-docker-images:
-    if: github.event_name == 'pull_request' && needs.files-changed.outputs.project == 'true'
-    needs: [files-changed, build, check-generateOpenApiDocs, check-licence]
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        docker-rev: ["Dockerfile", "Dockerfile.ultra-lite", "Dockerfile.fat"]
-    steps:
-      - name: Harden Runner
-        uses: step-security/harden-runner@6c439dc8bdf85cadbbce9ed30d1c7b959517bc49 # v2.12.2
-        with:
-          egress-policy: audit
-
-      - name: Checkout Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - name: Set up JDK 17
-        uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4.7.1
-        with:
-          java-version: "17"
-          distribution: "temurin"
-
-      - name: Set up Gradle
-        uses: gradle/actions/setup-gradle@ac638b010cf58a27ee6c972d7336334ccaf61c96 # v4.4.1
-        with:
-          gradle-version: 8.14
-
-      - name: Build application
-        run: ./gradlew clean build
-        env:
-          DISABLE_ADDITIONAL_FEATURES: true
-          STIRLING_PDF_DESKTOP_UI: false
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
-
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
-
-      - name: Build ${{ matrix.docker-rev }}
-        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
-        with:
-          builder: ${{ steps.buildx.outputs.name }}
-          context: .
-          file: ./${{ matrix.docker-rev }}
-          push: false
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          platforms: linux/amd64,linux/arm64/v8
-          provenance: true
-          sbom: true
-
-      - name: Upload Reports
-        if: always()
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
-        with:
-          name: reports-docker-${{ matrix.docker-rev }}
-          path: |
-            build/reports/tests/
-            build/test-results/
-            build/reports/problems/
-          retention-days: 3
-          if-no-files-found: warn
--- a/.github/workflows/deploy-on-v2-commit.yml
+++ b/.github/workflows/deploy-on-v2-commit.yml
@ -0,0 +1,183 @@
+name: Auto V2 Deploy on Push
+
+on:
+  push:
+    branches:
+      - V2
+      - deploy-on-v2-commit
+
+permissions:
+  contents: read
+
+jobs:
+  deploy-v2-on-push:
+    runs-on: ubuntu-latest
+    concurrency:
+      group: deploy-v2-push-V2
+      cancel-in-progress: true
+
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@002fdce3c6a235733a90a27c80493a3241e56863 # v2.12.1
+        with:
+          egress-policy: audit
+
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Get commit hashes for frontend and backend
+        id: commit-hashes
+        run: |
+          # Get last commit that touched the frontend folder, docker/frontend, or docker/compose
+          FRONTEND_HASH=$(git log -1 --format="%H" -- frontend/ docker/frontend/ docker/compose/ 2>/dev/null || echo "")
+          if [ -z "$FRONTEND_HASH" ]; then
+            FRONTEND_HASH="no-frontend-changes"
+          fi
+          
+          # Get last commit that touched backend code, docker/backend, or docker/compose
+          BACKEND_HASH=$(git log -1 --format="%H" -- app/ docker/backend/ docker/compose/ 2>/dev/null || echo "")
+          if [ -z "$BACKEND_HASH" ]; then
+            BACKEND_HASH="no-backend-changes"
+          fi
+          
+          echo "Frontend hash: $FRONTEND_HASH"
+          echo "Backend hash: $BACKEND_HASH"
+          
+          echo "frontend_hash=$FRONTEND_HASH" >> $GITHUB_OUTPUT
+          echo "backend_hash=$BACKEND_HASH" >> $GITHUB_OUTPUT
+          
+          # Short hashes for tags
+          if [ "$FRONTEND_HASH" = "no-frontend-changes" ]; then
+            echo "frontend_short=no-frontend" >> $GITHUB_OUTPUT
+          else
+            echo "frontend_short=${FRONTEND_HASH:0:8}" >> $GITHUB_OUTPUT
+          fi
+          
+          if [ "$BACKEND_HASH" = "no-backend-changes" ]; then
+            echo "backend_short=no-backend" >> $GITHUB_OUTPUT
+          else
+            echo "backend_short=${BACKEND_HASH:0:8}" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Check if frontend image exists
+        id: check-frontend
+        run: |
+          if docker manifest inspect ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-frontend-${{ steps.commit-hashes.outputs.frontend_short }} >/dev/null 2>&1; then
+            echo "exists=true" >> $GITHUB_OUTPUT
+            echo "Frontend image already exists, skipping build"
+          else
+            echo "exists=false" >> $GITHUB_OUTPUT
+            echo "Frontend image needs to be built"
+          fi
+
+      - name: Check if backend image exists
+        id: check-backend
+        run: |
+          if docker manifest inspect ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-backend-${{ steps.commit-hashes.outputs.backend_short }} >/dev/null 2>&1; then
+            echo "exists=true" >> $GITHUB_OUTPUT
+            echo "Backend image already exists, skipping build"
+          else
+            echo "exists=false" >> $GITHUB_OUTPUT
+            echo "Backend image needs to be built"
+          fi
+
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_API }}
+
+      - name: Build and push frontend image
+        if: steps.check-frontend.outputs.exists == 'false'
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./docker/frontend/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-frontend-${{ steps.commit-hashes.outputs.frontend_short }}
+          build-args: VERSION_TAG=v2-alpha
+          platforms: linux/amd64
+      
+      - name: Build and push backend image
+        if: steps.check-backend.outputs.exists == 'false'
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./docker/backend/Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-backend-${{ steps.commit-hashes.outputs.backend_short }}
+          build-args: VERSION_TAG=v2-alpha
+          platforms: linux/amd64
+
+
+      - name: Set up SSH
+        run: |
+          mkdir -p ~/.ssh/
+          echo "${{ secrets.VPS_SSH_KEY }}" > ../private.key
+          chmod 600 ../private.key
+
+
+      - name: Deploy to VPS on port 3000
+        run: |
+          export UNIQUE_NAME=docker-compose-v2-$GITHUB_RUN_ID.yml
+      
+          cat > $UNIQUE_NAME << EOF
+          version: '3.3'
+          services:
+            backend:
+              container_name: stirling-v2-backend
+              image: ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-backend-${{ steps.commit-hashes.outputs.backend_short }}
+              ports:
+                - "13000:8080"
+              volumes:
+                - /stirling/V2/data:/usr/share/tessdata:rw
+                - /stirling/V2/config:/configs:rw
+                - /stirling/V2/logs:/logs:rw
+              environment:
+                DISABLE_ADDITIONAL_FEATURES: "true"
+                SECURITY_ENABLELOGIN: "false"
+                SYSTEM_DEFAULTLOCALE: en-GB
+                UI_APPNAME: "Stirling-PDF V2"
+                UI_HOMEDESCRIPTION: "V2 Frontend/Backend Split"
+                UI_APPNAMENAVBAR: "V2 Deployment"
+                SYSTEM_MAXFILESIZE: "100"
+                METRICS_ENABLED: "true"
+                SYSTEM_GOOGLEVISIBILITY: "false"
+              restart: on-failure:5
+      
+            frontend:
+              container_name: stirling-v2-frontend
+              image: ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-frontend-${{ steps.commit-hashes.outputs.frontend_short }}
+              ports:
+                - "3000:80"
+              environment:
+                VITE_API_BASE_URL: "http://${{ secrets.VPS_HOST }}:13000"
+              depends_on:
+                - backend
+              restart: on-failure:5
+          EOF
+      
+          # Copy to remote with unique name
+          scp -i ../private.key -o StrictHostKeyChecking=no $UNIQUE_NAME ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }}:/tmp/$UNIQUE_NAME
+      
+          # SSH and rename/move atomically to avoid interference
+          ssh -i ../private.key -o StrictHostKeyChecking=no ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} << ENDSSH
+            mkdir -p /stirling/V2/{data,config,logs}
+            mv /tmp/$UNIQUE_NAME /stirling/V2/docker-compose.yml
+            cd /stirling/V2
+            docker-compose down || true
+            docker-compose pull
+            docker-compose up -d
+            docker system prune -af --volumes
+            docker image prune -af --filter "until=336h" --filter "label!=keep=true"
+          ENDSSH
+
+      - name: Cleanup temporary files
+        if: always()
+        run: |
+          rm -f ../private.key
+
--- a/frontend/index.html
+++ b/frontend/index.html
@ -7,12 +7,12 @@
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
-      content="Web site created using Vite"
+      content="The Free Adobe Acrobat alternative (10M+ Downloads)"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />

-    <title>Vite App</title>
+    <title>Stirling PDF</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -27,6 +27,7 @@
        "i18next-browser-languagedetector": "^8.1.0",
        "i18next-http-backend": "^3.0.2",
        "jszip": "^3.10.1",
+        "material-symbols": "^0.33.0",
        "pdf-lib": "^1.17.1",
        "pdfjs-dist": "^3.11.174",
        "react": "^19.1.0",
@ -4175,6 +4176,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/material-symbols": {
+      "version": "0.33.0",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.33.0.tgz",
+      "integrity": "sha512-t9/Gz+14fClRgN7oVOt5CBuwsjFLxSNP9BRDyMrI5el3IZNvoD94IDGJha0YYivyAow24rCS0WOkAv4Dp+YjNg==",
+      "license": "Apache-2.0"
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -23,6 +23,7 @@
    "i18next-browser-languagedetector": "^8.1.0",
    "i18next-http-backend": "^3.0.2",
    "jszip": "^3.10.1",
+    "material-symbols": "^0.33.0",
    "pdf-lib": "^1.17.1",
    "pdfjs-dist": "^3.11.174",
    "react": "^19.1.0",
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/logo192.png
+++ b/frontend/public/logo192.png
--- a/frontend/public/logo512.png
+++ b/frontend/public/logo512.png
--- a/frontend/src/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/components/fileEditor/FileEditor.tsx
@ -7,6 +7,7 @@ import { Dropzone } from '@mantine/dropzone';
 import { useTranslation } from 'react-i18next';
 import UploadFileIcon from '@mui/icons-material/UploadFile';
 import { useFileContext } from '../../contexts/FileContext';
+import { useFileSelection } from '../../contexts/FileSelectionContext';
 import { FileOperation } from '../../types/fileContext';
 import { fileStorage } from '../../services/fileStorage';
 import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
@ -31,20 +32,16 @@ interface FileEditorProps {
  onOpenPageEditor?: (file: File) => void;
  onMergeFiles?: (files: File[]) => void;
  toolMode?: boolean;
-  multiSelect?: boolean;
  showUpload?: boolean;
  showBulkActions?: boolean;
-  onFileSelect?: (files: File[]) => void;
 }

 const FileEditor = ({
  onOpenPageEditor,
  onMergeFiles,
  toolMode = false,
-  multiSelect = true,
  showUpload = true,
-  showBulkActions = true,
-  onFileSelect
+  showBulkActions = true
 }: FileEditorProps) => {
  const { t } = useTranslation();

@ -63,6 +60,14 @@ const FileEditor = ({
    markOperationApplied
  } = fileContext;

+  // Get file selection context
+  const { 
+    selectedFiles: toolSelectedFiles, 
+    setSelectedFiles: setToolSelectedFiles, 
+    maxFiles, 
+    isToolMode 
+  } = useFileSelection();
+
  const [files, setFiles] = useState<FileItem[]>([]);
  const [status, setStatus] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
@ -99,14 +104,14 @@ const FileEditor = ({
  const lastActiveFilesRef = useRef<string[]>([]);
  const lastProcessedFilesRef = useRef<number>(0);

-  // Map context selected file names to local file IDs
-  // Defensive programming: ensure selectedFileIds is always an array
-  const safeSelectedFileIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
+  // Get selected file IDs from context (defensive programming)
+  const contextSelectedIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
  
-  const localSelectedFiles = files
+  // Map context selections to local file IDs for UI display
+  const localSelectedIds = files
    .filter(file => {
      const fileId = (file.file as any).id || file.name;
-      return safeSelectedFileIds.includes(fileId);
+      return contextSelectedIds.includes(fileId);
    })
    .map(file => file.id);

@ -396,44 +401,41 @@ const FileEditor = ({
    if (!targetFile) return;
    
    const contextFileId = (targetFile.file as any).id || targetFile.name;
+    const isSelected = contextSelectedIds.includes(contextFileId);
    
-    if (!multiSelect) {
-      // Single select mode for tools - toggle on/off
-      const isCurrentlySelected = safeSelectedFileIds.includes(contextFileId);
-      if (isCurrentlySelected) {
-        // Deselect the file
-        setContextSelectedFiles([]);
-        if (onFileSelect) {
-          onFileSelect([]);
-        }
-      } else {
-        // Select the file
-        setContextSelectedFiles([contextFileId]);
-        if (onFileSelect) {
-          onFileSelect([targetFile.file]);
-        }
-      }
+    let newSelection: string[];
+    
+    if (isSelected) {
+      // Remove file from selection
+      newSelection = contextSelectedIds.filter(id => id !== contextFileId);
    } else {
-      // Multi select mode (default)
-      setContextSelectedFiles(prev => {
-        const safePrev = Array.isArray(prev) ? prev : [];
-        return safePrev.includes(contextFileId)
-          ? safePrev.filter(id => id !== contextFileId)
-          : [...safePrev, contextFileId];
-      });
-      
-      // Notify parent with selected files
-      if (onFileSelect) {
-        const selectedFiles = files
-          .filter(f => {
-            const fId = (f.file as any).id || f.name;
-            return safeSelectedFileIds.includes(fId) || fId === contextFileId;
-          })
-          .map(f => f.file);
-        onFileSelect(selectedFiles);
+      // Add file to selection
+      if (maxFiles === 1) {
+        newSelection = [contextFileId];
+      } else {
+        // Check if we've hit the selection limit
+        if (maxFiles > 1 && contextSelectedIds.length >= maxFiles) {
+          setStatus(`Maximum ${maxFiles} files can be selected`);
+          return;
+        }
+        newSelection = [...contextSelectedIds, contextFileId];
      }
    }
-  }, [files, setContextSelectedFiles, multiSelect, onFileSelect, safeSelectedFileIds]);
+    
+    // Update context
+    setContextSelectedFiles(newSelection);
+    
+    // Update tool selection context if in tool mode
+    if (isToolMode || toolMode) {
+      const selectedFiles = files
+        .filter(f => {
+          const fId = (f.file as any).id || f.name;
+          return newSelection.includes(fId);
+        })
+        .map(f => f.file);
+      setToolSelectedFiles(selectedFiles);
+    }
+  }, [files, setContextSelectedFiles, maxFiles, contextSelectedIds, setStatus, isToolMode, toolMode, setToolSelectedFiles]);

  const toggleSelectionMode = useCallback(() => {
    setSelectionMode(prev => {
@ -450,15 +452,15 @@ const FileEditor = ({
  const handleDragStart = useCallback((fileId: string) => {
    setDraggedFile(fileId);

-    if (selectionMode && localSelectedFiles.includes(fileId) && localSelectedFiles.length > 1) {
+    if (selectionMode && localSelectedIds.includes(fileId) && localSelectedIds.length > 1) {
      setMultiFileDrag({
-        fileIds: localSelectedFiles,
-        count: localSelectedFiles.length
+        fileIds: localSelectedIds,
+        count: localSelectedIds.length
      });
    } else {
      setMultiFileDrag(null);
    }
-  }, [selectionMode, localSelectedFiles]);
+  }, [selectionMode, localSelectedIds]);

  const handleDragEnd = useCallback(() => {
    setDraggedFile(null);
@ -519,8 +521,8 @@ const FileEditor = ({
      if (targetIndex === -1) return;
    }

-    const filesToMove = selectionMode && localSelectedFiles.includes(draggedFile)
-      ? localSelectedFiles
+    const filesToMove = selectionMode && localSelectedIds.includes(draggedFile)
+      ? localSelectedIds
      : [draggedFile];

    // Update the local files state and sync with activeFiles
@ -545,7 +547,7 @@ const FileEditor = ({
    const moveCount = multiFileDrag ? multiFileDrag.count : 1;
    setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);

-  }, [draggedFile, files, selectionMode, localSelectedFiles, multiFileDrag]);
+  }, [draggedFile, files, selectionMode, localSelectedIds, multiFileDrag]);

  const handleEndZoneDragEnter = useCallback(() => {
    if (draggedFile) {
@ -764,7 +766,7 @@ const FileEditor = ({
        ) : (
          <DragDropGrid
            items={files}
-            selectedItems={localSelectedFiles}
+            selectedItems={localSelectedIds}
            selectionMode={selectionMode}
            isAnimating={isAnimating}
          onDragStart={handleDragStart}
@ -783,7 +785,7 @@ const FileEditor = ({
              file={file}
              index={index}
              totalFiles={files.length}
-              selectedFiles={localSelectedFiles}
+              selectedFiles={localSelectedIds}
              selectionMode={selectionMode}
              draggedFile={draggedFile}
              dropTarget={dropTarget}
--- a/frontend/src/components/shared/QuickAccessBar.css
+++ b/frontend/src/components/shared/QuickAccessBar.css
@ -0,0 +1,179 @@
+.activeIconScale {
+  transform: scale(1.3);
+  transition: transform 0.2s;
+  z-index: 1;
+}
+
+.iconContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Action icon styles */
+.action-icon-style {
+  background-color: var(--icon-user-bg);
+  color: var(--icon-user-color);
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Main container styles */
+.quick-access-bar-main {
+  background-color: var(--bg-muted);
+  width: 5rem;
+  min-width: 5rem;
+  max-width: 5rem;
+  position: relative;
+  z-index: 10;
+}
+
+/* Rainbow mode container */
+.quick-access-bar-main.rainbow-mode {
+  background-color: var(--bg-muted);
+  width: 5rem;
+  min-width: 5rem;
+  max-width: 5rem;
+  position: relative;
+  z-index: 10;
+}
+
+/* Header padding */
+.quick-access-header {
+  padding: 1rem 0.5rem 0.5rem 0.5rem;
+}
+
+.nav-header { 
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+  gap: 0.5rem;
+}
+
+/* Nav header divider */
+.nav-header-divider {
+  width: 3.75rem;
+  border-color: var(--color-gray-300);
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/* All tools text styles */
+.all-tools-text {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  text-rendering: optimizeLegibility;
+  font-synthesis: none;
+}
+
+.all-tools-text.active {
+  color: var(--text-primary);
+  font-weight: bold;
+}
+
+.all-tools-text.inactive {
+  color: var(--color-gray-700);
+  font-weight: normal;
+}
+
+/* Overflow divider */
+.overflow-divider {
+  width: 3.75rem;
+  border-color: var(--color-gray-300);
+  margin: 0 0.5rem;
+}
+
+/* Scrollable content area */
+.quick-access-bar {
+  overflow-x: auto;
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+  -webkit-overflow-scrolling: touch;
+  padding: 0 0.5rem 1rem 0.5rem;
+}
+
+/* Scrollable content container */
+.scrollable-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100%;
+}
+
+/* Button text styles */
+.button-text {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  text-rendering: optimizeLegibility;
+  font-synthesis: none;
+}
+
+.button-text.active {
+  color: var(--text-primary);
+  font-weight: bold;
+}
+
+.button-text.inactive {
+  color: var(--color-gray-700);
+  font-weight: normal;
+}
+
+/* Content divider */
+.content-divider {
+  width: 3.75rem;
+  border-color: var(--color-gray-300);
+}
+
+/* Spacer */
+.spacer {
+  flex: 1;
+  margin-top: 1rem;
+}
+
+/* Config button text */
+.config-button-text {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-gray-700);
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+  font-synthesis: none;
+}
+
+/* Font size utility */
+.font-size-20 {
+  font-size: 20px;
+}
+
+/* Hide scrollbar by default, show on scroll (Webkit browsers - Chrome, Safari, Edge) */
+.quick-access-bar::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: transparent;
+}
+
+.quick-access-bar:hover::-webkit-scrollbar,
+.quick-access-bar:active::-webkit-scrollbar,
+.quick-access-bar:focus::-webkit-scrollbar {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.quick-access-bar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 0.25rem;
+}
+
+.quick-access-bar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Firefox scrollbar styling */
+.quick-access-bar {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@ -1,11 +1,17 @@
-import React, { useState } from "react";
-import { ActionIcon, Stack, Tooltip } from "@mantine/core";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import AppsIcon from "@mui/icons-material/Apps";
-import SettingsIcon from "@mui/icons-material/Settings";
+import React, { useState, useRef } from "react";
+import { ActionIcon, Stack, Tooltip, Divider } from "@mantine/core";
+import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
+import AppsIcon from "@mui/icons-material/AppsRounded";
+import SettingsIcon from "@mui/icons-material/SettingsRounded";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesomeRounded";
+import FolderIcon from "@mui/icons-material/FolderRounded";
+import PersonIcon from "@mui/icons-material/PersonRounded";
+import NotificationsIcon from "@mui/icons-material/NotificationsRounded";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import rainbowStyles from '../../styles/rainbow.module.css';
 import AppConfigModal from './AppConfigModal';
+import { useIsOverflowing } from '../../hooks/useIsOverflowing';
+import './QuickAccessBar.css';

 interface QuickAccessBarProps {
  onToolsClick: () => void;
@ -16,6 +22,86 @@ interface QuickAccessBarProps {
  readerMode: boolean;
 }

+interface ButtonConfig {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  tooltip: string;
+  isRound?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  onClick: () => void;
+}
+
+function NavHeader({ 
+  activeButton, 
+  setActiveButton, 
+  onReaderToggle, 
+  onToolsClick 
+}: {
+  activeButton: string;
+  setActiveButton: (id: string) => void;
+  onReaderToggle: () => void;
+  onToolsClick: () => void;
+}) {
+  return (
+    <>
+      <div className="nav-header">
+        <Tooltip label="User Profile" position="right">
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            className="action-icon-style"
+          >
+            <PersonIcon sx={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Notifications" position="right">
+          <ActionIcon
+            size="md"
+            variant="subtle"
+            className="action-icon-style"
+          >
+            <NotificationsIcon sx={{ fontSize: "1rem" }} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+      {/* Divider after top icons */}
+      <Divider 
+        size="xs" 
+        className="nav-header-divider"
+      />
+      {/* All Tools button below divider */}
+      <Tooltip label="View all available tools" position="right">
+        <div className="flex flex-col items-center gap-1 mt-4 mb-2">
+          <ActionIcon
+            size="lg"
+            variant="subtle"
+            onClick={() => {
+              setActiveButton('tools');
+              onReaderToggle();
+              onToolsClick();
+            }}
+            style={{
+              backgroundColor: activeButton === 'tools' ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
+              color: activeButton === 'tools' ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
+              border: 'none',
+              borderRadius: '8px',
+            }}
+            className={activeButton === 'tools' ? 'activeIconScale' : ''}
+          >
+            <span className="iconContainer">
+              <AppsIcon sx={{ fontSize: "1.75rem" }} />
+            </span>
+          </ActionIcon>
+          <span className={`all-tools-text ${activeButton === 'tools' ? 'active' : 'inactive'}`}>
+            All Tools
+          </span>
+        </div>
+      </Tooltip>
+    </>
+  );
+}
+
 const QuickAccessBar = ({
  onToolsClick,
  onReaderToggle,
@ -26,55 +112,201 @@ const QuickAccessBar = ({
 }: QuickAccessBarProps) => {
  const { isRainbowMode } = useRainbowThemeContext();
  const [configModalOpen, setConfigModalOpen] = useState(false);
+  const [activeButton, setActiveButton] = useState<string>('tools');
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const isOverflow = useIsOverflowing(scrollableRef);
+
+  const buttonConfigs: ButtonConfig[] = [
+    {
+      id: 'read',
+      name: 'Read',
+      icon: <MenuBookIcon sx={{ fontSize: "1.5rem" }} />,
+      tooltip: 'Read documents',
+      size: 'lg',
+      isRound: false,
+      onClick: () => {
+        setActiveButton('read');
+        onReaderToggle();
+      }
+    },
+    {
+      id: 'sign',
+      name: 'Sign',
+      icon: 
+      <span className="material-symbols-rounded font-size-20">
+        signature
+      </span>,
+      tooltip: 'Sign your document',
+      size: 'lg',
+      isRound: false,
+      onClick: () => setActiveButton('sign')
+    },
+    {
+      id: 'automate',
+      name: 'Automate',
+      icon: <AutoAwesomeIcon sx={{ fontSize: "1.5rem" }} />,
+      tooltip: 'Automate workflows',
+      size: 'lg',
+      isRound: false,
+      onClick: () => setActiveButton('automate')
+    },
+    {
+      id: 'files',
+      name: 'Files',
+      icon: <FolderIcon sx={{ fontSize: "1.5rem" }} />,
+      tooltip: 'Manage files',
+      isRound: true,
+      size: 'lg',
+      onClick: () => setActiveButton('files')
+    },
+    {
+      id: 'activity',
+      name: 'Activity',
+      icon: 
+      <span className="material-symbols-rounded font-size-20">
+      vital_signs
+      </span>,
+      tooltip: 'View activity and analytics',
+      isRound: true,
+      size: 'lg',
+      onClick: () => setActiveButton('activity')
+    },
+    {
+      id: 'config',
+      name: 'Config',
+      icon: <SettingsIcon sx={{ fontSize: "1rem" }} />,
+      tooltip: 'Configure settings',
+      size: 'lg',
+      onClick: () => {
+        setConfigModalOpen(true);
+      }
+    }
+  ];
+
+  const CIRCULAR_BORDER_RADIUS = '50%';
+  const ROUND_BORDER_RADIUS = '8px';
+
+  const getBorderRadius = (config: ButtonConfig): string => {
+    return config.isRound ? CIRCULAR_BORDER_RADIUS : ROUND_BORDER_RADIUS;
+  };
+
+  const getButtonStyle = (config: ButtonConfig) => {
+    const isActive = activeButton === config.id;
+    
+    if (isActive) {
+      return {
+        backgroundColor: `var(--icon-${config.id}-bg)`,
+        color: `var(--icon-${config.id}-color)`,
+        border: 'none',
+        borderRadius: getBorderRadius(config),
+      };
+    }
+    
+    // Inactive state - use consistent inactive colors
+    return {
+      backgroundColor: 'var(--icon-inactive-bg)',
+      color: 'var(--icon-inactive-color)',
+      border: 'none',
+      borderRadius: getBorderRadius(config),
+    };
+  };

  return (
    <div
-      className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
-      style={{ 
-        padding: '1rem 0.5rem',
-        backgroundColor: 'var(--bg-muted)'
-      }}
+      className={`h-screen flex flex-col w-20 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
    >
-      <Stack gap="lg" align="center" className="flex-1">
-        {/* All Tools Button */}
-        <div className="flex flex-col items-center gap-1">
-          <ActionIcon
-            size="xl"
-            variant={leftPanelView === 'toolPicker' && !readerMode ? "filled" : "subtle"}
-            onClick={onToolsClick}
-          >
-            <AppsIcon sx={{ fontSize: 28 }} />
-          </ActionIcon>
-          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Tools</span>
-        </div>
+      {/* Fixed header outside scrollable area */}
+      <div className="quick-access-header">
+        <NavHeader 
+          activeButton={activeButton} 
+          setActiveButton={setActiveButton} 
+          onReaderToggle={onReaderToggle} 
+          onToolsClick={onToolsClick} 
+        />
+      </div>

-        {/* Reader Mode Button */}
-        <div className="flex flex-col items-center gap-1">
-          <ActionIcon
-            size="xl"
-            variant={readerMode ? "filled" : "subtle"}
-            onClick={onReaderToggle}
-          >
-            <MenuBookIcon sx={{ fontSize: 28 }} />
-          </ActionIcon>
-          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Read</span>
-        </div>
+      {/* Conditional divider when overflowing */}
+      {isOverflow && (
+        <Divider 
+          size="xs" 
+          className="overflow-divider"
+        />
+      )}

-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Config Modal Button (for testing) */}
-        <div className="flex flex-col items-center gap-1">
-          <ActionIcon
-            size="lg"
-            variant="subtle"
-            onClick={() => setConfigModalOpen(true)}
-          >
-            <SettingsIcon sx={{ fontSize: 20 }} />
-          </ActionIcon>
-          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Config</span>
+      {/* Scrollable content area */}
+      <div
+        ref={scrollableRef}
+        className="quick-access-bar flex-1"
+        onWheel={(e) => {
+          // Prevent the wheel event from bubbling up to parent containers
+          e.stopPropagation();
+        }}
+      >
+        <div className="scrollable-content">
+          {/* Top section with main buttons */}
+          <Stack gap="lg" align="center">
+            {buttonConfigs.slice(0, -1).map((config, index) => (
+              <React.Fragment key={config.id}>
+                <Tooltip label={config.tooltip} position="right">
+                  <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
+                    <ActionIcon
+                      size={config.size || 'xl'}
+                      variant="subtle"
+                      onClick={config.onClick}
+                      style={getButtonStyle(config)}
+                      className={activeButton === config.id ? 'activeIconScale' : ''}
+                    >
+                      <span className="iconContainer">
+                        {config.icon}
+                      </span>
+                    </ActionIcon>
+                    <span className={`button-text ${activeButton === config.id ? 'active' : 'inactive'}`}>
+                      {config.name}
+                    </span>
+                  </div>
+                </Tooltip>
+                
+                {/* Add divider after Automate button (index 2) */}
+                {index === 2 && (
+                    <Divider 
+                      size="xs" 
+                      className="content-divider"
+                    />
+                )}
+              </React.Fragment>
+            ))}
+          </Stack>
+          
+          {/* Spacer to push Config button to bottom */}
+          <div className="spacer" />
+          
+          {/* Config button at the bottom */}
+          <Tooltip label="Configure settings" position="right">
+            <div className="flex flex-col items-center gap-1">
+              <ActionIcon
+                size="lg"
+                variant="subtle"
+                onClick={() => {
+                  setConfigModalOpen(true);
+                }}
+                style={{
+                  backgroundColor: 'var(--icon-inactive-bg)',
+                  color: 'var(--icon-inactive-color)',
+                  border: 'none',
+                  borderRadius: '8px',
+                }}
+              >
+                <span className="iconContainer">
+                  <SettingsIcon sx={{ fontSize: "1rem" }} />
+                </span>
+              </ActionIcon>
+              <span className="config-button-text">
+                Config
+              </span>
+            </div>
+          </Tooltip>
        </div>
-      </Stack>
+      </div>

      <AppConfigModal
        opened={configModalOpen}
--- a/frontend/src/components/tools/ToolLoadingFallback.tsx
+++ b/frontend/src/components/tools/ToolLoadingFallback.tsx
@ -0,0 +1,14 @@
+import { Center, Stack, Loader, Text } from "@mantine/core";
+
+export default function ToolLoadingFallback({ toolName }: { toolName?: string }) {
+  return (
+    <Center h="100%" w="100%">
+      <Stack align="center" gap="md">
+        <Loader size="lg" />
+        <Text c="dimmed" size="sm">
+          {toolName ? `Loading ${toolName}...` : "Loading tool..."}
+        </Text>
+      </Stack>
+    </Center>
+  )
+}
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@ -1,15 +1,7 @@
 import React, { useState } from "react";
 import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-
-type Tool = {
-  icon: React.ReactNode;
-  name: string;
-};
-
-type ToolRegistry = {
-  [id: string]: Tool;
-};
+import { ToolRegistry } from "../../types/tool";

 interface ToolPickerProps {
  selectedToolKey: string | null;
--- a/frontend/src/components/tools/ToolRenderer.tsx
+++ b/frontend/src/components/tools/ToolRenderer.tsx
@ -1,23 +1,18 @@
-import { FileWithUrl } from "../../types/file";
+import React, { Suspense } from "react";
 import { useToolManagement } from "../../hooks/useToolManagement";
+import { BaseToolProps } from "../../types/tool";
+import ToolLoadingFallback from "./ToolLoadingFallback";

-interface ToolRendererProps {
+interface ToolRendererProps extends BaseToolProps {
  selectedToolKey: string;
-  pdfFile: any;
-  files: FileWithUrl[];
-  toolParams: any;
-  updateParams: (params: any) => void;
-  toolSelectedFiles?: File[];
-  onPreviewFile?: (file: File | null) => void;
 }

+
 const ToolRenderer = ({
  selectedToolKey,
-files,
-  toolParams,
-  updateParams,
-  toolSelectedFiles = [],
  onPreviewFile,
+  onComplete,
+  onError,
 }: ToolRendererProps) => {
  // Get the tool from registry
  const { toolRegistry } = useToolManagement();
@ -29,41 +24,16 @@ files,

  const ToolComponent = selectedTool.component;

-  // Pass tool-specific props
-  switch (selectedToolKey) {
-    case "split":
-      return (
-        <ToolComponent
-          selectedFiles={toolSelectedFiles}
-          onPreviewFile={onPreviewFile}
-        />
-      );
-    case "compress":
-      return (
-        <ToolComponent
-          files={files}
-          setLoading={(loading: boolean) => {}}
-          params={toolParams}
-          updateParams={updateParams}
-        />
-      );
-    case "merge":
-      return (
-        <ToolComponent
-          files={files}
-          params={toolParams}
-          updateParams={updateParams}
-        />
-      );
-    default:
-      return (
-        <ToolComponent
-          files={files}
-          params={toolParams}
-          updateParams={updateParams}
-        />
-      );
-  }
+  // Wrap lazy-loaded component with Suspense
+  return (
+    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
+      <ToolComponent
+        onPreviewFile={onPreviewFile}
+        onComplete={onComplete}
+        onError={onError}
+      />
+    </Suspense>
+  );
 };

 export default ToolRenderer;
--- a/frontend/src/components/tools/compress/CompressSettings.tsx
+++ b/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;
--- a/frontend/src/contexts/FileContext.tsx
+++ b/frontend/src/contexts/FileContext.tsx
@ -22,6 +22,7 @@ import { useEnhancedProcessedFiles } from '../hooks/useEnhancedProcessedFiles';
 import { fileStorage } from '../services/fileStorage';
 import { enhancedPDFProcessingService } from '../services/enhancedPDFProcessingService';
 import { thumbnailGenerationService } from '../services/thumbnailGenerationService';
+import { getFileId } from '../utils/fileUtils';

 // Initial state
 const initialViewerConfig: ViewerConfig = {
@ -98,7 +99,7 @@ function fileContextReducer(state: FileContextState, action: FileContextAction):

    case 'REMOVE_FILES':
      const remainingFiles = state.activeFiles.filter(file => {
-        const fileId = (file as any).id || file.name;
+        const fileId = getFileId(file);
        return !action.payload.includes(fileId);
      });
      const safeSelectedFileIds = Array.isArray(state.selectedFileIds) ? state.selectedFileIds : [];
@ -347,7 +348,7 @@ export function FileContextProvider({
  // Cleanup timers and refs
  const cleanupTimers = useRef<Map<string, NodeJS.Timeout>>(new Map());
  const blobUrls = useRef<Set<string>>(new Set());
-  const pdfDocuments = useRef<Map<string, any>>(new Map());
+  const pdfDocuments = useRef<Map<string, PDFDocument>>(new Map());
  
  // Enhanced file processing hook
  const {
@ -381,7 +382,7 @@ export function FileContextProvider({
    blobUrls.current.add(url);
  }, []);

-  const trackPdfDocument = useCallback((fileId: string, pdfDoc: any) => {
+  const trackPdfDocument = useCallback((fileId: string, pdfDoc: PDFDocument) => {
    // Clean up existing document for this file if any
    const existing = pdfDocuments.current.get(fileId);
    if (existing && existing.destroy) {
@ -498,7 +499,7 @@ export function FileContextProvider({
      for (const file of files) {
        try {
          // Check if file already has an ID (already in IndexedDB)
-          const fileId = (file as any).id;
+          const fileId = getFileId(file);
          if (!fileId) {
            // File doesn't have ID, store it and get the ID
            const storedFile = await fileStorage.storeFile(file);
@ -680,7 +681,7 @@ export function FileContextProvider({
  // Utility functions
  const getFileById = useCallback((fileId: string): File | undefined => {
    return state.activeFiles.find(file => {
-      const actualFileId = (file as any).id || file.name;
+      const actualFileId = getFileId(file);
      return actualFileId === fileId;
    });
  }, [state.activeFiles]);
--- a/frontend/src/contexts/FileSelectionContext.tsx
+++ b/frontend/src/contexts/FileSelectionContext.tsx
@ -0,0 +1,86 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import {
+  MaxFiles,
+  FileSelectionContextValue
+} from '../types/tool';
+
+interface FileSelectionProviderProps {
+  children: ReactNode;
+}
+
+const FileSelectionContext = createContext<FileSelectionContextValue | undefined>(undefined);
+
+export function FileSelectionProvider({ children }: FileSelectionProviderProps) {
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [maxFiles, setMaxFiles] = useState<MaxFiles>(-1);
+  const [isToolMode, setIsToolMode] = useState<boolean>(false);
+
+  const clearSelection = useCallback(() => {
+    setSelectedFiles([]);
+  }, []);
+
+  const selectionCount = selectedFiles.length;
+  const canSelectMore = maxFiles === -1 || selectionCount < maxFiles;
+  const isAtLimit = maxFiles > 0 && selectionCount >= maxFiles;
+  const isMultiFileMode = maxFiles !== 1;
+
+  const contextValue: FileSelectionContextValue = {
+    selectedFiles,
+    maxFiles,
+    isToolMode,
+    setSelectedFiles,
+    setMaxFiles,
+    setIsToolMode,
+    clearSelection,
+    canSelectMore,
+    isAtLimit,
+    selectionCount,
+    isMultiFileMode
+  };
+
+  return (
+    <FileSelectionContext.Provider value={contextValue}>
+      {children}
+    </FileSelectionContext.Provider>
+  );
+}
+
+/**
+ * Access the file selection context.
+ * Throws if used outside a <FileSelectionProvider>.
+ */
+export function useFileSelection(): FileSelectionContextValue {
+  const context = useContext(FileSelectionContext);
+  if (!context) {
+    throw new Error('useFileSelection must be used within a FileSelectionProvider');
+  }
+  return context;
+}
+
+// Returns only the file selection values relevant for tools (e.g. merge, split, etc.)
+// Use this in tool panels/components that need to know which files are selected and selection limits.
+export function useToolFileSelection(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'canSelectMore' | 'isAtLimit' | 'selectionCount'> {
+  const { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount } = useFileSelection();
+  return { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount };
+}
+
+// Returns actions for manipulating file selection state.
+// Use this in components that need to update the selection, clear it, or change selection mode.
+export function useFileSelectionActions(): Pick<FileSelectionContextValue, 'setSelectedFiles' | 'clearSelection' | 'setMaxFiles' | 'setIsToolMode'> {
+  const { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode } = useFileSelection();
+  return { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode };
+}
+
+// Returns the raw file selection state (selected files, max files, tool mode).
+// Use this for low-level state access, e.g. in context-aware UI.
+export function useFileSelectionState(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'isToolMode'> {
+  const { selectedFiles, maxFiles, isToolMode } = useFileSelection();
+  return { selectedFiles, maxFiles, isToolMode };
+}
+
+// Returns computed values derived from file selection state.
+// Use this for file selection UI logic (e.g. disabling buttons when at limit).
+export function useFileSelectionComputed(): Pick<FileSelectionContextValue, 'canSelectMore' | 'isAtLimit' | 'selectionCount' | 'isMultiFileMode'> {
+  const { canSelectMore, isAtLimit, selectionCount, isMultiFileMode } = useFileSelection();
+  return { canSelectMore, isAtLimit, selectionCount, isMultiFileMode };
+}
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@ -4,3 +4,4 @@ declare module "../tools/Merge";
 declare module "../components/PageEditor";
 declare module "../components/Viewer";
 declare module "*.js";
+declare module '*.module.css';
--- a/frontend/src/hooks/tools/compress/useCompressOperation.ts
+++ b/frontend/src/hooks/tools/compress/useCompressOperation.ts
@ -0,0 +1,268 @@
+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);
+
+  // Track blob URLs for cleanup
+  const [blobUrls, setBlobUrls] = useState<string[]>([]);
+
+  const cleanupBlobUrls = useCallback(() => {
+    blobUrls.forEach(url => {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        console.warn('Failed to revoke blob URL:', error);
+      }
+    });
+    setBlobUrls([]);
+  }, [blobUrls]);
+
+  const buildFormData = useCallback((
+    parameters: CompressParameters,
+    file: File
+  ) => {
+    const formData = new FormData();
+
+    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.map(f => f.name).join(',');
+
+    const operation: FileOperation = {
+      id: operationId,
+      type: 'compress',
+      timestamp: Date.now(),
+      fileIds: selectedFiles.map(f => f.name),
+      status: 'pending',
+      metadata: {
+        originalFileNames: selectedFiles.map(f => f.name),
+        parameters: {
+          compressionLevel: parameters.compressionLevel,
+          grayscale: parameters.grayscale,
+          expectedSize: parameters.expectedSize,
+        },
+        totalFileSize: selectedFiles.reduce((sum, f) => sum + f.size, 0),
+        fileCount: selectedFiles.length
+      }
+    };
+
+    return { operation, operationId, fileId };
+  }, []);
+
+
+  const executeOperation = useCallback(async (
+    parameters: CompressParameters,
+    selectedFiles: File[]
+  ) => {
+    if (selectedFiles.length === 0) {
+      setStatus(t("noFileSelected"));
+      return;
+    }
+    const validFiles = selectedFiles.filter(file => file.size > 0);
+    if (validFiles.length === 0) {
+      setErrorMessage('No valid files to compress. All selected files are empty.');
+      return;
+    }
+
+    if (validFiles.length < selectedFiles.length) {
+      console.warn(`Skipping ${selectedFiles.length - validFiles.length} empty files`);
+    }
+
+    const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
+
+    recordOperation(fileId, operation);
+
+    setStatus(t("loading"));
+    setIsLoading(true);
+    setErrorMessage(null);
+    setFiles([]);
+    setThumbnails([]);
+
+    try {
+      const compressedFiles: File[] = [];
+
+      const failedFiles: string[] = [];
+
+      for (let i = 0; i < validFiles.length; i++) {
+        const file = validFiles[i];
+        setStatus(`Compressing ${file.name} (${i + 1}/${validFiles.length})`);
+
+        try {
+          const { formData, endpoint } = buildFormData(parameters, file);
+          const response = await axios.post(endpoint, formData, { responseType: "blob" });
+
+          const contentType = response.headers['content-type'] || 'application/pdf';
+          const blob = new Blob([response.data], { type: contentType });
+          const compressedFile = new File([blob], `compressed_${file.name}`, { type: contentType });
+
+          compressedFiles.push(compressedFile);
+        } catch (fileError) {
+          console.error(`Failed to compress ${file.name}:`, fileError);
+          failedFiles.push(file.name);
+        }
+      }
+
+      if (failedFiles.length > 0 && compressedFiles.length === 0) {
+        throw new Error(`Failed to compress all files: ${failedFiles.join(', ')}`);
+      }
+
+      if (failedFiles.length > 0) {
+        setStatus(`Compressed ${compressedFiles.length}/${validFiles.length} files. Failed: ${failedFiles.join(', ')}`);
+      }
+
+      setFiles(compressedFiles);
+      setIsGeneratingThumbnails(true);
+
+      await addFiles(compressedFiles);
+
+      cleanupBlobUrls();
+
+      if (compressedFiles.length === 1) {
+        const url = window.URL.createObjectURL(compressedFiles[0]);
+        setDownloadUrl(url);
+        setBlobUrls([url]);
+        setDownloadFilename(`compressed_${selectedFiles[0].name}`);
+      } else {
+        const { zipFile } = await zipFileService.createZipFromFiles(compressedFiles, 'compressed_files.zip');
+        const url = window.URL.createObjectURL(zipFile);
+        setDownloadUrl(url);
+        setBlobUrls([url]);
+        setDownloadFilename(`compressed_${validFiles.length}_files.zip`);
+      }
+
+      const thumbnails = await Promise.all(
+        compressedFiles.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);
+      setStatus(t("downloadComplete"));
+      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, addFiles]);
+
+  const resetResults = useCallback(() => {
+    cleanupBlobUrls();
+    setFiles([]);
+    setThumbnails([]);
+    setIsGeneratingThumbnails(false);
+    setDownloadUrl(null);
+    setStatus('');
+    setErrorMessage(null);
+    setIsLoading(false);
+  }, [cleanupBlobUrls]);
+
+  const clearError = useCallback(() => {
+    setErrorMessage(null);
+  }, []);
+
+  return {
+    executeOperation,
+    files,
+    thumbnails,
+    isGeneratingThumbnails,
+    downloadUrl,
+    downloadFilename,
+    status,
+    errorMessage,
+    isLoading,
+
+    // Result management functions
+    resetResults,
+    clearError,
+  };
+};
--- a/frontend/src/hooks/tools/compress/useCompressParameters.ts
+++ b/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,
+  };
+};
--- a/frontend/src/hooks/useIsOverflowing.ts
+++ b/frontend/src/hooks/useIsOverflowing.ts
@ -0,0 +1,73 @@
+import * as React from 'react';
+
+
+/**
+ Hook to detect if an element's content overflows its container
+
+
+    Parameters:
+    - ref: React ref to the element to monitor
+    - callback: Optional callback function called when overflow state changes
+
+    Returns: boolean | undefined - true if overflowing, false if not, undefined before first check
+
+    Usage example:
+
+        useEffect(() => {
+        if (isOverflow) {
+            // Do something
+        }
+        }, [isOverflow]);
+
+        const scrollableRef = useRef<HTMLDivElement>(null);
+        const isOverflow = useIsOverflowing(scrollableRef);
+
+        Fallback example (for browsers without ResizeObserver):
+
+        return (
+        <div ref={scrollableRef} className="h-64 overflow-y-auto">
+            {Content that might overflow}
+        </div>
+        );
+*/
+
+
+export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
+  // State to track overflow status
+  const [isOverflow, setIsOverflow] = React.useState<boolean | undefined>(undefined);
+
+  React.useLayoutEffect(() => {
+    const { current } = ref;
+
+    // Function to check if element is overflowing
+    const trigger = () => {
+      if (!current) return;
+      
+      // Compare scroll height (total content height) vs client height (visible height)
+      const hasOverflow = current.scrollHeight > current.clientHeight;
+      setIsOverflow(hasOverflow);
+      
+      // Call optional callback with overflow state
+      if (callback) callback(hasOverflow);
+    };
+
+    if (current) {
+      // Use ResizeObserver for modern browsers (real-time detection)
+      if ('ResizeObserver' in window) {
+        const resizeObserver = new ResizeObserver(trigger);
+        resizeObserver.observe(current);
+        
+        // Cleanup function to disconnect observer
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      
+      // Fallback for browsers without ResizeObserver support
+      // Add a small delay to ensure the element is fully rendered
+      setTimeout(trigger, 0);
+    }
+  }, [callback, ref]);
+
+  return isOverflow;
+}; 
--- a/frontend/src/hooks/useToolManagement.tsx
+++ b/frontend/src/hooks/useToolManagement.tsx
@ -1,64 +1,75 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
 import ContentCutIcon from "@mui/icons-material/ContentCut";
 import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
-import SplitPdfPanel from "../tools/Split";
-import CompressPdfPanel from "../tools/Compress";
-import MergePdfPanel from "../tools/Merge";
 import { useMultipleEndpointsEnabled } from "./useEndpointConfig";
+import { Tool, ToolDefinition, BaseToolProps, ToolRegistry } from "../types/tool";

-type ToolRegistryEntry = {
-  icon: React.ReactNode;
-  name: string;
-  component: React.ComponentType<any>;
-  view: string;
-};

-type ToolRegistry = {
-  [key: string]: ToolRegistryEntry;
-};
+// Add entry here with maxFiles, endpoints, and lazy component
+const toolDefinitions: Record<string, ToolDefinition> = {
+  split: {
+    id: "split",
+    icon: <ContentCutIcon />,
+    component: React.lazy(() => import("../tools/Split")),
+    maxFiles: 1,
+    category: "manipulation",
+    description: "Split PDF files into smaller parts",
+    endpoints: ["split-pages", "split-pdf-by-sections", "split-by-size-or-count", "split-pdf-by-chapters"]
+  },
+  compress: {
+    id: "compress",
+    icon: <ZoomInMapIcon />,
+    component: React.lazy(() => import("../tools/Compress")),
+    maxFiles: -1,
+    category: "optimization",
+    description: "Reduce PDF file size",
+    endpoints: ["compress-pdf"]
+  },

-const baseToolRegistry = {
-  split: { icon: <ContentCutIcon />, component: SplitPdfPanel, view: "split" },
-  compress: { icon: <ZoomInMapIcon />, component: CompressPdfPanel, view: "viewer" },
-  merge: { icon: <AddToPhotosIcon />, component: MergePdfPanel, view: "pageEditor" },
-};
-
-// Tool endpoint mappings
-const toolEndpoints: Record<string, string[]> = {
-  split: ["split-pages", "split-pdf-by-sections", "split-by-size-or-count", "split-pdf-by-chapters"],
-  compress: ["compress-pdf"],
-  merge: ["merge-pdfs"],
 };


-export const useToolManagement = () => {
+interface ToolManagementResult {
+  selectedToolKey: string | null;
+  selectedTool: Tool | null;
+  toolSelectedFileIds: string[];
+  toolRegistry: ToolRegistry;
+  selectTool: (toolKey: string) => void;
+  clearToolSelection: () => void;
+  setToolSelectedFileIds: (fileIds: string[]) => void;
+}
+
+export const useToolManagement = (): ToolManagementResult => {
  const { t } = useTranslation();

  const [selectedToolKey, setSelectedToolKey] = useState<string | null>(null);
  const [toolSelectedFileIds, setToolSelectedFileIds] = useState<string[]>([]);

-  const allEndpoints = Array.from(new Set(Object.values(toolEndpoints).flat()));
+  const allEndpoints = Array.from(new Set(
+    Object.values(toolDefinitions).flatMap(tool => tool.endpoints || [])
+  ));
  const { endpointStatus, loading: endpointsLoading } = useMultipleEndpointsEnabled(allEndpoints);

  const isToolAvailable = useCallback((toolKey: string): boolean => {
    if (endpointsLoading) return true;
-    const endpoints = toolEndpoints[toolKey] || [];
-    return endpoints.some(endpoint => endpointStatus[endpoint] === true);
+    const tool = toolDefinitions[toolKey];
+    if (!tool?.endpoints) return true;
+    return tool.endpoints.some(endpoint => endpointStatus[endpoint] === true);
  }, [endpointsLoading, endpointStatus]);

  const toolRegistry: ToolRegistry = useMemo(() => {
-    const availableToolRegistry: ToolRegistry = {};
-    Object.keys(baseToolRegistry).forEach(toolKey => {
+    const availableTools: ToolRegistry = {};
+    Object.keys(toolDefinitions).forEach(toolKey => {
      if (isToolAvailable(toolKey)) {
-        availableToolRegistry[toolKey] = {
-          ...baseToolRegistry[toolKey as keyof typeof baseToolRegistry],
+        const toolDef = toolDefinitions[toolKey];
+        availableTools[toolKey] = {
+          ...toolDef,
          name: t(`home.${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1))
        };
      }
    });
-    return availableToolRegistry;
+    return availableTools;
  }, [t, isToolAvailable]);

  useEffect(() => {
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -1,3 +1,9 @@
+@import 'material-symbols/rounded.css'; 
+
+.material-symbols-rounded {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@ -1,9 +1,11 @@
-import React, { useState, useCallback} from "react";
+import React, { useState, useCallback, useEffect} 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 { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
+import { PageEditorFunctions } from "../types/pageEditor";
 import rainbowStyles from '../styles/rainbow.module.css';

 import ToolPicker from "../components/tools/ToolPicker";
@ -15,45 +17,50 @@ 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 { useMultipleEndpointsEnabled } from "../hooks/useEndpointConfig";

-export default function HomePage() {
+function HomePageContent() {
  const { t } = useTranslation();
  const { isRainbowMode } = useRainbowThemeContext();

-  // Get file context
  const fileContext = useFileContext();
  const { activeFiles, currentView, currentMode, setCurrentView, addFiles } = fileContext;
+  const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();

  const {
    selectedToolKey,
    selectedTool,
-    toolParams,
    toolRegistry,
    selectTool,
    clearToolSelection,
-    updateToolParams,
  } = useToolManagement();
-
-  const [toolSelectedFiles, setToolSelectedFiles] = useState<File[]>([]);
  const [sidebarsVisible, setSidebarsVisible] = useState(true);
  const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
  const [readerMode, setReaderMode] = useState(false);
-  const [pageEditorFunctions, setPageEditorFunctions] = useState<any>(null);
+  const [pageEditorFunctions, setPageEditorFunctions] = useState<PageEditorFunctions | null>(null);
  const [previewFile, setPreviewFile] = useState<File | null>(null);

-
+  // Update file selection context when tool changes
+  useEffect(() => {
+    if (selectedTool) {
+      setMaxFiles(selectedTool.maxFiles);
+      setIsToolMode(true);
+    } else {
+      setMaxFiles(-1);
+      setIsToolMode(false);
+      setSelectedFiles([]);
+    }
+  }, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);



  const handleToolSelect = useCallback(
    (id: string) => {
      selectTool(id);
-      if (toolRegistry[id]?.view) setCurrentView(toolRegistry[id].view);
+      setCurrentView('fileEditor'); // Tools use fileEditor view for file selection
      setLeftPanelView('toolContent');
      setReaderMode(false);
    },
-    [selectTool, toolRegistry, setCurrentView]
+    [selectTool, setCurrentView]
  );

  const handleQuickAccessTools = useCallback(() => {
@ -63,7 +70,7 @@ export default function HomePage() {
  }, [clearToolSelection]);

  const handleReaderToggle = useCallback(() => {
-    setReaderMode(!readerMode);
+    setReaderMode(true);
  }, [readerMode]);

  const handleViewChange = useCallback((view: string) => {
@ -97,10 +104,10 @@ export default function HomePage() {

      {/* Left: Tool Picker or Selected Tool Panel */}
      <div
-        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 : ''}`}
+        className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] 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 +144,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>

@ -145,7 +152,6 @@ export default function HomePage() {
                <div className="flex-1 min-h-0">
                  <ToolRenderer
                    selectedToolKey={selectedToolKey}
-                    toolSelectedFiles={toolSelectedFiles}
                    onPreviewFile={setPreviewFile}
                  />
                </div>
@ -157,9 +163,11 @@ export default function HomePage() {
      {/* Main View */}
      <Box
        className="flex-1 h-screen min-w-80 relative flex flex-col"
-        style={{
-          backgroundColor: 'var(--bg-background)'
-        }}
+        style={
+          isRainbowMode
+            ? {} // No background color in rainbow mode
+            : { backgroundColor: 'var(--bg-background)' }
+        }
      >
        {/* Top Controls */}
        <TopControls
@ -196,14 +204,18 @@ export default function HomePage() {
              </Container>
            ) : currentView === "fileEditor" ? (
              <FileEditor
-                onOpenPageEditor={(file) => {
-                  handleViewChange("pageEditor");
-                }}
-                onMergeFiles={(filesToMerge) => {
-                  // Add merged files to active set
-                  filesToMerge.forEach(addToActiveFiles);
-                  handleViewChange("viewer");
-                }}
+                toolMode={!!selectedToolKey}
+                showUpload={true}
+                showBulkActions={!selectedToolKey}
+                {...(!selectedToolKey && {
+                  onOpenPageEditor: (file) => {
+                    handleViewChange("pageEditor");
+                  },
+                  onMergeFiles: (filesToMerge) => {
+                    filesToMerge.forEach(addToActiveFiles);
+                    handleViewChange("viewer");
+                  }
+                })}
              />
            ) :  currentView === "viewer" ? (
              <Viewer
@ -219,6 +231,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');
                    }
@ -248,17 +265,8 @@ export default function HomePage() {
                  />
                )}
              </>
-            ) : currentView === "split" ? (
-              <FileEditor
-                toolMode={true}
-                multiSelect={false}
-                showUpload={true}
-                showBulkActions={true}
-                onFileSelect={(files) => {
-                  setToolSelectedFiles(files);
-                }}
-              />
            ) : selectedToolKey && selectedTool ? (
+              // Fallback: if tool is selected but not in fileEditor view, show tool in main area
              <ToolRenderer
                selectedToolKey={selectedToolKey}
              />
@ -285,3 +293,12 @@ export default function HomePage() {
    </Group>
  );
 }
+
+// Main HomePage component wrapped with FileSelectionProvider
+export default function HomePage() {
+  return (
+    <FileSelectionProvider>
+      <HomePageContent />
+    </FileSelectionProvider>
+  );
+}
--- a/frontend/src/services/zipFileService.ts
+++ b/frontend/src/services/zipFileService.ts
@ -103,6 +103,37 @@ export class ZipFileService {
    }
  }

+  /**
+   * Create a ZIP file from an array of files
+   */
+  async createZipFromFiles(files: File[], zipFilename: string): Promise<{ zipFile: File; size: number }> {
+    try {
+      const zip = new JSZip();
+      
+      // Add each file to the ZIP
+      for (const file of files) {
+        const content = await file.arrayBuffer();
+        zip.file(file.name, content);
+      }
+      
+      // Generate ZIP blob
+      const zipBlob = await zip.generateAsync({ 
+        type: 'blob',
+        compression: 'DEFLATE',
+        compressionOptions: { level: 6 }
+      });
+      
+      const zipFile = new File([zipBlob], zipFilename, { 
+        type: 'application/zip',
+        lastModified: Date.now()
+      });
+      
+      return { zipFile, size: zipFile.size };
+    } catch (error) {
+      throw new Error(`Failed to create ZIP file: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
  /**
   * Extract PDF files from a ZIP archive
   */
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@ -72,6 +72,8 @@
  --bg-surface: #ffffff;
  --bg-raised: #f9fafb;
  --bg-muted: #f3f4f6;
+  --bg-background: #f9fafb;
+  --bg-toolbar: #ffffff;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
@ -80,51 +82,101 @@
  --border-strong: #9ca3af;
  --hover-bg: #f9fafb;
  --active-bg: #f3f4f6;
+
+  /* Icon colors for light mode */
+  --icon-user-bg: #9CA3AF;
+  --icon-user-color: #FFFFFF;
+  --icon-notifications-bg: #9CA3AF;
+  --icon-notifications-color: #FFFFFF;
+  --icon-tools-bg: #1E88E5;
+  --icon-tools-color: #FFFFFF;
+  --icon-read-bg: #4CAF50;
+  --icon-read-color: #FFFFFF;
+  --icon-sign-bg: #3BA99C;
+  --icon-sign-color: #FFFFFF;
+  --icon-automate-bg: #A576E3;
+  --icon-automate-color: #FFFFFF;
+  --icon-files-bg: #D3E7F7;
+  --icon-files-color: #0A8BFF;
+  --icon-activity-bg: #D3E7F7;
+  --icon-activity-color: #0A8BFF;
+  --icon-config-bg: #9CA3AF;
+  --icon-config-color: #FFFFFF;
+
+  /* Inactive icon colors for light mode */
+  --icon-inactive-bg: #9CA3AF;
+  --icon-inactive-color: #FFFFFF;
 }

 [data-mantine-color-scheme="dark"] {
  /* Dark theme gray scale (inverted) */
  --gray-50: 17 24 39;
-  --gray-100: 31 41 55;
-  --gray-200: 55 65 81;
-  --gray-300: 75 85 99;
-  --gray-400: 107 114 128;
-  --gray-500: 156 163 175;
-  --gray-600: 209 213 219;
-  --gray-700: 229 231 235;
-  --gray-800: 243 244 246;
-  --gray-900: 249 250 251;
+  --gray-100: 31 35 41;
+  --gray-200: 42 47 54;
+  --gray-300: 55 65 81;
+  --gray-400: 75 85 99;
+  --gray-500: 107 114 128;
+  --gray-600: 156 163 175;
+  --gray-700: 209 213 219;
+  --gray-800: 229 231 235;
+  --gray-900: 243 244 246;

  /* Dark semantic colors for Tailwind */
-  --surface: 31 41 55;
-  --background: 17 24 39;
-  --border: 75 85 99;
+  --surface: 31 35 41;
+  --background: 42 47 54;
+  --border: 55 65 81;

  /* Dark theme Mantine colors */
  --color-gray-50: #111827;
-  --color-gray-100: #1f2937;
-  --color-gray-200: #374151;
-  --color-gray-300: #4b5563;
-  --color-gray-400: #6b7280;
-  --color-gray-500: #9ca3af;
-  --color-gray-600: #d1d5db;
-  --color-gray-700: #e5e7eb;
-  --color-gray-800: #f3f4f6;
-  --color-gray-900: #f9fafb;
+  --color-gray-100: #1F2329;
+  --color-gray-200: #2A2F36;
+  --color-gray-300: #374151;
+  --color-gray-400: #4b5563;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #9ca3af;
+  --color-gray-700: #d1d5db;
+  --color-gray-800: #e5e7eb;
+  --color-gray-900: #f3f4f6;

  /* Dark theme semantic colors */
-  --bg-surface: #1f2937;
-  --bg-raised: #374151;
-  --bg-muted: #374151;
+  --bg-surface: #2A2F36;
+  --bg-raised: #1F2329;
+  --bg-muted: #1F2329;
+  --bg-background: #2A2F36;
+  --bg-toolbar: #272A2E;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
-  --border-subtle: #374151;
-  --border-default: #4b5563;
-  --border-strong: #6b7280;
+  --border-subtle: #2A2F36;
+  --border-default: #374151;
+  --border-strong: #4b5563;
  --hover-bg: #374151;
  --active-bg: #4b5563;

+  /* Icon colors for dark mode */
+  --icon-user-bg: #2A2F36;
+  --icon-user-color: #6E7581;
+  --icon-notifications-bg: #2A2F36;
+  --icon-notifications-color: #6E7581;
+  --icon-tools-bg: #4B525A;
+  --icon-tools-color: #EAEAEA;
+  --icon-read-bg: #4B525A;
+  --icon-read-color: #EAEAEA;
+  --icon-sign-bg: #4B525A;
+  --icon-sign-color: #EAEAEA;
+  --icon-automate-bg: #4B525A;
+  --icon-automate-color: #EAEAEA;
+  --icon-files-bg: #4B525A;
+  --icon-files-color: #EAEAEA;
+  --icon-activity-bg: #4B525A;
+  --icon-activity-color: #EAEAEA;
+  --icon-config-bg: #4B525A;
+  --icon-config-color: #EAEAEA;
+
+  /* Inactive icon colors for dark mode */
+  --icon-inactive-bg: #2A2F36;
+  --icon-inactive-color: #6E7581;
+
  /* Adjust shadows for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--- a/frontend/src/tools/Compress.tsx
+++ b/frontend/src/tools/Compress.tsx
@ -1,186 +1,168 @@
-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 { FileWithUrl } from "../types/file";
-import { fileStorage } from "../services/fileStorage";
+import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
+import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";

-export interface CompressProps {
-  files?: FileWithUrl[];
-  setDownloadUrl?: (url: string) => void;
-  setLoading?: (loading: boolean) => void;
-  params?: {
-    compressionLevel: number;
-    grayscale: boolean;
-    removeMetadata: boolean;
-    expectedSize: string;
-    aggressive: boolean;
-  };
-  updateParams?: (newParams: Partial<CompressProps["params"]>) => void;
-}
+import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
+import OperationButton from "../components/tools/shared/OperationButton";
+import ErrorNotification from "../components/tools/shared/ErrorNotification";
+import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
+import ResultsPreview from "../components/tools/shared/ResultsPreview";

-const CompressPdfPanel: React.FC<CompressProps> = ({
-  files = [],
-  setDownloadUrl,
-  setLoading,
-  params = {
-    compressionLevel: 5,
-    grayscale: false,
-    removeMetadata: false,
-    expectedSize: "",
-    aggressive: false,
-  },
-  updateParams,
-}) => {
+import CompressSettings from "../components/tools/compress/CompressSettings";
+
+import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
+import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
+import { BaseToolProps } from "../types/tool";
+
+const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
  const { t } = useTranslation();
+  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();

-  const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
-  const [localLoading, setLocalLoading] = useState<boolean>(false);
+  const compressParams = useCompressParameters();
+  const compressOperation = useCompressOperation();
+
+  // Endpoint validation
  const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");

-  const {
-    compressionLevel,
-    grayscale,
-    removeMetadata,
-    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)));
-  };
+  useEffect(() => {
+    compressOperation.resetResults();
+    onPreviewFile?.(null);
+  }, [compressParams.parameters, selectedFiles]);

  const handleCompress = async () => {
-    const selectedFiles = files.filter((_, i) => selected[i]);
-    if (selectedFiles.length === 0) return;
-    setLocalLoading(true);
-    setLoading?.(true);
-
    try {
-      const formData = new FormData();
-
-      // Handle IndexedDB files
-      for (const file of selectedFiles) {
-              if (!file.id) {
-        continue; // Skip files without an id
+      await compressOperation.executeOperation(
+        compressParams.parameters,
+        selectedFiles
+      );
+      if (compressOperation.files && onComplete) {
+        onComplete(compressOperation.files);
      }
-        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 (onError) {
+        onError(error instanceof Error ? error.message : 'Compress operation failed');
+      }
    }
  };

-  if (endpointLoading) {
-    return (
-      <Stack align="center" justify="center" h={200}>
-        <Loader size="md" />
-        <Text size="sm" c="dimmed">{t("loading", "Loading...")}</Text>
-      </Stack>
-    );
-  }
+  const handleThumbnailClick = (file: File) => {
+    onPreviewFile?.(file);
+    sessionStorage.setItem('previousMode', 'compress');
+    setCurrentMode('viewer');
+  };

-  if (endpointEnabled === false) {
-    return (
-      <Stack align="center" justify="center" h={200}>
-        <Alert color="red" title={t("error._value", "Error")} variant="light">
-          {t("endpointDisabled", "This feature is currently disabled.")}
-        </Alert>
-      </Stack>
-    );
-  }
+  const handleSettingsReset = () => {
+    compressOperation.resetResults();
+    onPreviewFile?.(null);
+    setCurrentMode('compress');
+  };
+
+  const hasFiles = selectedFiles.length > 0;
+  const hasResults = compressOperation.files.length > 0 || 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>
-        <Text fw={500} mb={4}>{t("multiPdfDropPrompt", "Select files to compress:")}</Text>
-        <Stack gap={4}>
-          {files.length === 0 && <Text c="dimmed" size="sm">{t("noFileSelected")}</Text>}
-          {files.map((file, idx) => (
-            <Checkbox
-              key={file.name + idx}
-              label={file.name}
-              checked={selected[idx] || false}
-              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"
+    <ToolStepContainer>
+      <Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
+        {/* Files Step */}
+        <ToolStep
+          title="Files"
+          isVisible={true}
+          isCollapsed={filesCollapsed}
+          isCompleted={filesCollapsed}
+          completedMessage={hasFiles ?
+            selectedFiles.length === 1
+              ? `Selected: ${selectedFiles[0].name}`
+              : `Selected: ${selectedFiles.length} files`
+            : undefined}
        >
-          {t("compress.submit", "Compress")} {t("pdfPrompt", "PDF")}{selected.filter(Boolean).length > 1 ? "s" : ""}
-        </Button>
-      </Stack>
-  );
-};
+          <FileStatusIndicator
+            selectedFiles={selectedFiles}
+            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;
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@ -4,26 +4,23 @@ import { useTranslation } from "react-i18next";
 import DownloadIcon from "@mui/icons-material/Download";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useFileContext } from "../contexts/FileContext";
+import { useToolFileSelection } from "../contexts/FileSelectionContext";

 import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
 import OperationButton from "../components/tools/shared/OperationButton";
 import ErrorNotification from "../components/tools/shared/ErrorNotification";
 import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
 import ResultsPreview from "../components/tools/shared/ResultsPreview";
-
 import SplitSettings from "../components/tools/split/SplitSettings";

 import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
 import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
+import { BaseToolProps } from "../types/tool";

-interface SplitProps {
-  selectedFiles?: File[];
-  onPreviewFile?: (file: File | null) => void;
-}
-
-const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
+const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
  const { t } = useTranslation();
  const { setCurrentMode } = useFileContext();
+  const { selectedFiles } = useToolFileSelection();

  const splitParams = useSplitParameters();
  const splitOperation = useSplitOperation();
@ -39,11 +36,20 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
  }, [splitParams.mode, splitParams.parameters, selectedFiles]);

  const handleSplit = async () => {
-    await splitOperation.executeOperation(
-      splitParams.mode,
-      splitParams.parameters,
-      selectedFiles
-    );
+    try {
+      await splitOperation.executeOperation(
+        splitParams.mode,
+        splitParams.parameters,
+        selectedFiles
+      );
+      if (splitOperation.files && onComplete) {
+        onComplete(splitOperation.files);
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error instanceof Error ? error.message : 'Split operation failed');
+      }
+    }
  };

  const handleThumbnailClick = (file: File) => {
@ -73,7 +79,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 +103,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 +129,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>
            )}
--- a/frontend/src/types/pageEditor.ts
+++ b/frontend/src/types/pageEditor.ts
@ -36,3 +36,19 @@ export interface UndoRedoState {
  operations: PageOperation[];
  currentIndex: number;
 }
+
+export interface PageEditorFunctions {
+  closePdf: () => void;
+  handleUndo: () => void;
+  handleRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  handleRotate: () => void;
+  handleDelete: () => void;
+  handleSplit: () => void;
+  onExportSelected: () => void;
+  onExportAll: () => void;
+  exportLoading: boolean;
+  selectionMode: boolean;
+  selectedPages: number[];
+}
--- a/frontend/src/types/tool.ts
+++ b/frontend/src/types/tool.ts
@ -0,0 +1,73 @@
+import React from 'react';
+
+export type MaxFiles = number; // 1=single, >1=limited, -1=unlimited
+export type ToolCategory = 'manipulation' | 'conversion' | 'analysis' | 'utility' | 'optimization' | 'security';
+export type ToolDefinition = Omit<Tool, 'name'>;
+export type ToolStepType = 'files' | 'settings' | 'results';
+
+export interface BaseToolProps {
+  onComplete?: (results: File[]) => void;
+  onError?: (error: string) => void;
+  onPreviewFile?: (file: File | null) => void;
+}
+
+export interface ToolStepConfig {
+  type: ToolStepType;
+  title: string;
+  isVisible: boolean;
+  isCompleted: boolean;
+  isCollapsed?: boolean;
+  completedMessage?: string;
+  onCollapsedClick?: () => void;
+}
+
+export interface ToolValidationResult {
+  valid: boolean;
+  errors?: string[];
+  warnings?: string[];
+}
+
+export interface ToolResult {
+  success: boolean;
+  files?: File[];
+  error?: string;
+  downloadUrl?: string;
+  metadata?: Record<string, any>;
+}
+
+export interface Tool {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  component: React.ComponentType<BaseToolProps>;
+  maxFiles: MaxFiles;
+  category?: ToolCategory;
+  description?: string;
+  endpoints?: string[];
+  supportedFormats?: string[];
+  validation?: (files: File[]) => ToolValidationResult;
+}
+
+export type ToolRegistry = Record<string, Tool>;
+
+export interface FileSelectionState {
+  selectedFiles: File[];
+  maxFiles: MaxFiles;
+  isToolMode: boolean;
+}
+
+export interface FileSelectionActions {
+  setSelectedFiles: (files: File[]) => void;
+  setMaxFiles: (maxFiles: MaxFiles) => void;
+  setIsToolMode: (isToolMode: boolean) => void;
+  clearSelection: () => void;
+}
+
+export interface FileSelectionComputed {
+  canSelectMore: boolean;
+  isAtLimit: boolean;
+  selectionCount: number;
+  isMultiFileMode: boolean;
+}
+
+export interface FileSelectionContextValue extends FileSelectionState, FileSelectionActions, FileSelectionComputed {}
--- a/frontend/src/utils/fileUtils.ts
+++ b/frontend/src/utils/fileUtils.ts
@ -1,6 +1,10 @@
 import { FileWithUrl } from "../types/file";
 import { StoredFile, fileStorage } from "../services/fileStorage";

+export function getFileId(file: File): string {
+  return (file as File & { id?: string }).id || file.name;
+}
+
 /**
 * Consolidated file size formatting utility
 */