Fix url params and fix vite

frontend/src/pages/HomePage.tsx

@@ -72,8 +72,8 @@ function getToolParams(toolKey: string, searchParams: URLSearchParams) {
       return {
         mode: searchParams.get("splitMode") || "byPages",
         pages: searchParams.get("pages") || "",
-        hDiv: searchParams.get("hDiv") || "0",
+        hDiv: searchParams.get("hDiv") || "",
-        vDiv: searchParams.get("vDiv") || "1",
+        vDiv: searchParams.get("vDiv") || "",
         merge: searchParams.get("merge") === "true",
         splitType: searchParams.get("splitType") || "size",
         splitValue: searchParams.get("splitValue") || "",
@@ -83,8 +83,11 @@ function getToolParams(toolKey: string, searchParams: URLSearchParams) {
       };
     case "compress":
       return {
-        level: searchParams.get("compressLevel") || "medium",
+        compressionLevel: parseInt(searchParams.get("compressionLevel") || "5"),
-        keepQuality: searchParams.get("keepQuality") === "true",
+        grayscale: searchParams.get("grayscale") === "true",
+        removeMetadata: searchParams.get("removeMetadata") === "true",
+        expectedSize: searchParams.get("expectedSize") || "",
+        aggressive: searchParams.get("aggressive") === "true",
       };
     case "merge":
       return {
@@ -124,10 +127,13 @@ function updateToolParams(toolKey: string, searchParams: URLSearchParams, setSea
       params.set("allowDuplicates", String(merged.allowDuplicates));
     }
   } else if (toolKey === "compress") {
-    ["compressLevel", "keepQuality"].forEach((k) => params.delete(k));
+    ["compressionLevel", "grayscale", "removeMetadata", "expectedSize", "aggressive"].forEach((k) => params.delete(k));
     const merged = { ...getToolParams("compress", searchParams), ...newParams };
-    params.set("compressLevel", merged.level);
+    params.set("compressionLevel", String(merged.compressionLevel));
-    params.set("keepQuality", String(merged.keepQuality));
+    params.set("grayscale", String(merged.grayscale));
+    params.set("removeMetadata", String(merged.removeMetadata));
+    if (merged.expectedSize) params.set("expectedSize", merged.expectedSize);
+    params.set("aggressive", String(merged.aggressive));
   } else if (toolKey === "merge") {
     ["mergeOrder", "removeDuplicates"].forEach((k) => params.delete(k));
     const merged = { ...getToolParams("merge", searchParams), ...newParams };
@@ -146,7 +152,7 @@ const TOOL_PARAMS = {
     "splitType", "splitValue", "bookmarkLevel", "includeMetadata", "allowDuplicates"
   ],
   compress: [
-    "compressLevel", "keepQuality"
+    "compressionLevel", "grayscale", "removeMetadata", "expectedSize", "aggressive"
   ],
   merge: [
     "mergeOrder", "removeDuplicates"
@@ -222,13 +228,39 @@ export default function HomePage() {
       return <div>Tool not found</div>;
     }
 
-    // Pass only the necessary props
+    // Pass tool-specific props
+    switch (selectedToolKey) {
+      case "split":
+        return React.createElement(selectedTool.component, {
+          file: pdfFile,
+          downloadUrl,
+          setDownloadUrl,
+          params: toolParams,
+          updateParams,
+        });
+      case "compress":
+        return React.createElement(selectedTool.component, {
+          files,
+          setDownloadUrl,
+          setLoading: (loading: boolean) => {}, // TODO: Add loading state
+          params: toolParams,
+          updateParams,
+        });
+      case "merge":
         return React.createElement(selectedTool.component, {
           files,
           setDownloadUrl,
           params: toolParams,
           updateParams,
         });
+      default:
+        return React.createElement(selectedTool.component, {
+          files,
+          setDownloadUrl,
+          params: toolParams,
+          updateParams,
+        });
+    }
   };
 
   return (

frontend/src/tools/Compress.tsx

@@ -9,25 +9,42 @@ 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;
 }
 
 const CompressPdfPanel: React.FC<CompressProps> = ({
   files = [],
   setDownloadUrl,
   setLoading,
+  params = {
+    compressionLevel: 5,
+    grayscale: false,
+    removeMetadata: false,
+    expectedSize: "",
+    aggressive: false,
+  },
+  updateParams,
 }) => {
   const { t } = useTranslation();
-  const [searchParams] = useSearchParams();
-
 
   const [selected, setSelected] = useState<boolean[]>(files.map(() => false));
-  const [compressionLevel, setCompressionLevel] = useState<number>(5);
-  const [grayscale, setGrayscale] = useState<boolean>(false);
-  const [removeMetadata, setRemoveMetadata] = useState<boolean>(false);
-  const [expectedSize, setExpectedSize] = useState<string>("");
-  const [aggressive, setAggressive] = useState<boolean>(false);
   const [localLoading, setLocalLoading] = useState<boolean>(false);
 
+  const {
+    compressionLevel,
+    grayscale,
+    removeMetadata,
+    expectedSize,
+    aggressive,
+  } = params;
+
   // Update selection state if files prop changes
   React.useEffect(() => {
     setSelected(files.map(() => false));
@@ -104,7 +121,7 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
             max={9}
             step={1}
             value={compressionLevel}
-            onChange={setCompressionLevel}
+            onChange={(value) => updateParams?.({ compressionLevel: value })}
             marks={[
               { value: 1, label: "1" },
               { value: 5, label: "5" },
@@ -116,23 +133,23 @@ const CompressPdfPanel: React.FC<CompressProps> = ({
         <Checkbox
           label={t("compress.grayscale.label", "Convert images to grayscale")}
           checked={grayscale}
-          onChange={e => setGrayscale(e.currentTarget.checked)}
+          onChange={e => updateParams?.({ grayscale: e.currentTarget.checked })}
         />
         <Checkbox
           label={t("removeMetadata.submit", "Remove PDF metadata")}
           checked={removeMetadata}
-          onChange={e => setRemoveMetadata(e.currentTarget.checked)}
+          onChange={e => updateParams?.({ removeMetadata: e.currentTarget.checked })}
         />
         <Checkbox
           label={t("compress.selectText.1.1", "Aggressive compression (may reduce quality)")}
           checked={aggressive}
-          onChange={e => setAggressive(e.currentTarget.checked)}
+          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 => setExpectedSize(e.currentTarget.value)}
+          onChange={e => updateParams?.({ expectedSize: e.currentTarget.value })}
         />
         <Button
           onClick={handleCompress}

frontend/src/tools/Split.tsx

@@ -129,9 +129,13 @@ const SplitPdfPanel: React.FC<SplitPdfPanelProps> = ({
       setStatus(t("downloadComplete"));
     } catch (error: any) {
       console.error(error);
-      setErrorMessage(
+      let errorMsg = t("error.pdfPassword", "An error occurred while splitting the PDF.");
-        error.response?.data || t("error.pdfPassword", "An error occurred while splitting 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", "Split failed."));
     } finally {
       setIsLoading(false);

frontend/src/vite.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-});

frontend/tsconfig.json

@@ -113,5 +113,5 @@
   "include": [
     "src",
     "src/global.d.ts"
-  ]
+, "vite.config.ts"  ]
 }

frontend/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+});