Homepage refactor

frontend/src/components/DeepLinks.tsx

@@ -6,17 +6,17 @@ const DeepLinks: React.FC = () => {
   const commonLinks = [
     {
       name: "Split PDF Pages 1-5",
-      url: "/?tool=split&splitMode=byPages&pages=1-5&view=viewer",
+      url: "/?t=split&mode=byPages&p=1-5&v=viewer",
       description: "Split a PDF and extract pages 1-5"
     },
     {
       name: "Compress PDF (High)",
-      url: "/?tool=compress&level=9&grayscale=true&view=viewer",
+      url: "/?t=compress&level=9&gray=true&v=viewer",
       description: "Compress a PDF with high compression level"
     },
     {
       name: "Merge PDFs",
-      url: "/?tool=merge&view=fileManager",
+      url: "/?t=merge&v=fileManager",
       description: "Combine multiple PDF files into one"
     }
   ];

frontend/src/components/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: React.FC<ToolRendererProps> = ({
+  selectedToolKey,
+  selectedTool,
+  pdfFile,
+  files,
+  downloadUrl,
+  setDownloadUrl,
+  toolParams,
+  updateParams,
+}) => {
+  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;

frontend/src/components/TopControls.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Button, SegmentedControl } from "@mantine/core";
+import { useMantineColorScheme } from "@mantine/core";
+import LanguageSelector from "./LanguageSelector";
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import { Group } from "@mantine/core";
+
+const VIEW_OPTIONS = [
+  {
+    label: (
+      <Group gap={4}>
+        <VisibilityIcon fontSize="small" />
+      </Group>
+    ),
+    value: "viewer",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <EditNoteIcon fontSize="small" />
+      </Group>
+    ),
+    value: "pageEditor",
+  },
+  {
+    label: (
+      <Group gap={4}>
+        <InsertDriveFileIcon fontSize="small" />
+      </Group>
+    ),
+    value: "fileManager",
+  },
+];
+
+interface TopControlsProps {
+  currentView: string;
+  setCurrentView: (view: string) => void;
+}
+
+const TopControls: React.FC<TopControlsProps> = ({
+  currentView,
+  setCurrentView,
+}) => {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        width: "100%",
+        top: 0,
+        zIndex: 30,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          left: 16,
+          top: "50%",
+          transform: "translateY(-50%)",
+          pointerEvents: "auto",
+          display: "flex",
+          gap: 12,
+          alignItems: "center",
+        }}
+      >
+        <Button
+          onClick={toggleColorScheme}
+          variant="subtle"
+          size="md"
+          aria-label="Toggle theme"
+        >
+          {colorScheme === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
+        </Button>
+        <LanguageSelector />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          pointerEvents: "auto",
+        }}
+      >
+        <SegmentedControl
+          data={VIEW_OPTIONS}
+          value={currentView}
+          onChange={setCurrentView}
+          color="blue"
+          radius="xl"
+          size="md"
+          fullWidth
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TopControls;