Big refactor

frontend/src/components/tools/ToolPicker.tsx

@@ -0,0 +1,63 @@
+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;
+};
+
+interface ToolPickerProps {
+  selectedToolKey: string;
+  onSelect: (id: string) => void;
+  toolRegistry: ToolRegistry;
+}
+
+const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps) => {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+
+  const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
+    name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <Box >
+      <TextInput
+        placeholder={t("toolPicker.searchPlaceholder", "Search tools...")}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+        mb="md"
+        autoComplete="off"
+      />
+      <Stack  align="flex-start">
+        {filteredTools.length === 0 ? (
+          <Text c="dimmed" size="sm">
+            {t("toolPicker.noToolsFound", "No tools found")}
+          </Text>
+        ) : (
+          filteredTools.map(([id, { icon, name }]) => (
+            <Button
+              key={id}
+              variant={selectedToolKey === id ? "filled" : "subtle"}
+              onClick={() => onSelect(id)}
+              size="md"
+              radius="md"
+              leftSection={icon}
+              fullWidth
+              justify="flex-start"
+            >
+              {name}
+            </Button>
+          ))
+        )}
+      </Stack>
+    </Box>
+  );
+};
+
+export default ToolPicker;

frontend/src/components/tools/ToolRenderer.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { FileWithUrl } from "../../types/file";
+
+interface ToolRendererProps {
+  selectedToolKey: string;
+  selectedTool: any;
+  pdfFile: any;
+  files: FileWithUrl[];
+  downloadUrl: string | null;
+  setDownloadUrl: (url: string | null) => void;
+  toolParams: any;
+  updateParams: (params: any) => void;
+}
+
+const ToolRenderer = ({
+  selectedToolKey,
+  selectedTool,
+  pdfFile,
+  files,
+  downloadUrl,
+  setDownloadUrl,
+  toolParams,
+  updateParams,
+}: ToolRendererProps) => {
+  if (!selectedTool || !selectedTool.component) {
+    return <div>Tool not found</div>;
+  }
+
+  const ToolComponent = selectedTool.component;
+
+  // Pass tool-specific props
+  switch (selectedToolKey) {
+    case "split":
+      return (
+        <ToolComponent
+          file={pdfFile}
+          downloadUrl={downloadUrl}
+          setDownloadUrl={setDownloadUrl}
+          params={toolParams}
+          updateParams={updateParams}
+        />
+      );
+    case "compress":
+      return (
+        <ToolComponent
+          files={files}
+          setDownloadUrl={setDownloadUrl}
+          setLoading={(loading: boolean) => {}} // TODO: Add loading state
+          params={toolParams}
+          updateParams={updateParams}
+        />
+      );
+    case "merge":
+      return (
+        <ToolComponent
+          files={files}
+          setDownloadUrl={setDownloadUrl}
+          params={toolParams}
+          updateParams={updateParams}
+        />
+      );
+    default:
+      return (
+        <ToolComponent
+          files={files}
+          setDownloadUrl={setDownloadUrl}
+          params={toolParams}
+          updateParams={updateParams}
+        />
+      );
+  }
+};
+
+export default ToolRenderer;