frontend/public/locales/en-GB/translation.json

@@ -684,13 +684,6 @@
     },
     "splitPages": "Enter pages to split on:",
     "submit": "Split",
-    "steps": {
-      "chooseMethod": "Choose Method",
-      "settings": "Settings"
-    },
-    "settings": {
-      "selectMethodFirst": "Please select a split method first"
-    },
     "error": {
       "failed": "An error occurred while splitting the PDF."
     },
@@ -699,45 +692,13 @@
       "placeholder": "Select how to split the PDF"
     },
     "methods": {
-      "prefix": {
+      "byPages": "Split at Page Numbers",
-        "splitAt": "Split at",
+      "bySections": "Split by Sections",
-        "splitBy": "Split by"
+      "bySize": "Split by File Size",
-      },
+      "byPageCount": "Split by Page Count",
-      "byPages": {
+      "byDocCount": "Split by Document Count",
-        "name": "Page Numbers",
+      "byChapters": "Split by Chapters",
-        "desc": "Extract specific pages (1,3,5-10)",
+      "byPageDivider": "Split by Page Divider"
-        "tooltip": "Enter page numbers separated by commas or ranges with hyphens"
-      },
-      "bySections": {
-        "name": "Sections",
-        "desc": "Divide pages into grid sections",
-        "tooltip": "Split each page into horizontal and vertical sections"
-      },
-      "bySize": {
-        "name": "File Size",
-        "desc": "Limit maximum file size",
-        "tooltip": "Specify maximum file size (e.g. 10MB, 500KB)"
-      },
-      "byPageCount": {
-        "name": "Page Count",
-        "desc": "Fixed pages per file",
-        "tooltip": "Enter the number of pages for each split file"
-      },
-      "byDocCount": {
-        "name": "Document Count",
-        "desc": "Create specific number of files",
-        "tooltip": "Enter how many files you want to create"
-      },
-      "byChapters": {
-        "name": "Chapters",
-        "desc": "Split at bookmark boundaries",
-        "tooltip": "Uses PDF bookmarks to determine split points"
-      },
-      "byPageDivider": {
-        "name": "Page Divider",
-        "desc": "Auto-split with divider sheets",
-        "tooltip": "Use QR code divider sheets between documents when scanning"
-      }
     },
     "value": {
       "fileSize": {

frontend/src/components/shared/CardSelector.tsx

@@ -1,99 +0,0 @@
-import { Stack, Card, Text, Flex } from '@mantine/core';
-import { Tooltip } from './Tooltip';
-import { useTranslation } from 'react-i18next';
-
-export interface CardOption<T = string> {
-  value: T;
-  prefixKey: string;
-  nameKey: string;
-  tooltipKey?: string;
-  tooltipContent?: any[];
-}
-
-export interface CardSelectorProps<T, K extends CardOption<T>> {
-  options: K[];
-  onSelect: (value: T) => void;
-  disabled?: boolean;
-  getTooltipContent?: (option: K) => any[];
-}
-
-const CardSelector = <T, K extends CardOption<T>>({
-  options,
-  onSelect,
-  disabled = false,
-  getTooltipContent
-}: CardSelectorProps<T, K>) => {
-  const { t } = useTranslation();
-
-  const handleOptionClick = (value: T) => {
-    if (!disabled) {
-      onSelect(value);
-    }
-  };
-
-  const getTooltips = (option: K) => {
-    if (getTooltipContent) {
-      return getTooltipContent(option);
-    }
-    return [];
-  };
-
-  return (
-    <Stack gap="sm">
-      {options.map((option) => (
-        <Tooltip
-          key={option.value as string}
-          sidebarTooltip
-          tips={getTooltips(option)}
-        >
-          <Card
-            radius="md"
-            w="100%"
-            h={'2.8rem'}
-            style={{
-              cursor: disabled ? 'default' : 'pointer',
-              backgroundColor: 'var(--mantine-color-gray-2)',
-              borderColor: 'var(--mantine-color-gray-3)',
-              opacity: disabled ? 0.6 : 1,
-              display: 'flex',
-              flexDirection: 'row',
-              transition: 'all 0.2s ease',
-            }}
-            onMouseEnter={(e) => {
-              if (!disabled) {
-                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-3)';
-                e.currentTarget.style.transform = 'translateY(-1px)';
-                e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (!disabled) {
-                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-2)';
-                e.currentTarget.style.transform = 'translateY(0px)';
-                e.currentTarget.style.boxShadow = 'none';
-              }
-            }}
-            onClick={() => handleOptionClick(option.value)}
-          >
-            <Flex align={'center'} pl="sm" w="100%">
-              <Text size="sm" c="dimmed" ta="center" fw={350}>
-                {t(option.prefixKey, "Prefix")}
-              </Text>
-              <Text
-                fw={600}
-                size="sm"
-                c={undefined}
-                ta="center"
-                style={{ marginLeft: '0.25rem' }}
-              >
-                {t(option.nameKey, "Option Name")}
-              </Text>
-            </Flex>
-          </Card>
-        </Tooltip>
-      ))}
-    </Stack>
-  );
-};
-
-export default CardSelector;

frontend/src/components/tools/split/SplitSettings.tsx

@@ -1,7 +1,7 @@
-import { Stack, TextInput, Checkbox, Anchor, Text } from '@mantine/core';
+import { Stack, TextInput, Select, Checkbox, Anchor } from '@mantine/core';
 import LocalIcon from '../../shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
-import { SPLIT_METHODS } from '../../../constants/splitConstants';
+import { isSplitMethod, SPLIT_METHODS } from '../../../constants/splitConstants';
 import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters';
 
 export interface SplitSettingsProps {
@@ -135,20 +135,27 @@ const SplitSettings = ({
     </Stack>
   );
 
-  // Don't render anything if no method is selected
-  if (!parameters.method) {
-    return (
-      <Stack gap="sm">
-        <Text c="dimmed" ta="center">
-          {t("split.settings.selectMethodFirst", "Please select a split method first")}
-        </Text>
-      </Stack>
-    );
-  }
-
   return (
     <Stack gap="md">
-      {/* Method-Specific Form */}
+      {/* Method Selector */}
+      <Select
+        label={t("split.method.label", "Choose split method")}
+        placeholder={t("split.method.placeholder", "Select how to split the PDF")}
+        value={parameters.method}
+        onChange={(v) => isSplitMethod(v) && onParameterChange('method', v)}
+        disabled={disabled}
+        data={[
+          { value: SPLIT_METHODS.BY_PAGES, label: t("split.methods.byPages", "Split at Pages Numbers") },
+          { value: SPLIT_METHODS.BY_SECTIONS, label: t("split.methods.bySections", "Split by Sections") },
+          { value: SPLIT_METHODS.BY_SIZE, label: t("split.methods.bySize", "Split by Size") },
+          { value: SPLIT_METHODS.BY_PAGE_COUNT, label: t("split.methods.byPageCount", "Split by Page Count") },
+          { value: SPLIT_METHODS.BY_DOC_COUNT, label: t("split.methods.byDocCount", "Split by Document Count") },
+          { value: SPLIT_METHODS.BY_CHAPTERS, label: t("split.methods.byChapters", "Split by Chapters") },
+          { value: SPLIT_METHODS.BY_PAGE_DIVIDER, label: t("split.methods.byPageDivider", "Split by Page Divider") },
+        ]}
+      />
+
+      {/* Parameter Form */}
       {parameters.method === SPLIT_METHODS.BY_PAGES && renderByPagesForm()}
       {parameters.method === SPLIT_METHODS.BY_SECTIONS && renderBySectionsForm()}
       {(parameters.method === SPLIT_METHODS.BY_SIZE ||

frontend/src/components/tooltips/useSplitMethodTips.ts

@@ -1,24 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '../../types/tips';
-
-export const useSplitMethodTips = (): TooltipContent => {
-  const { t } = useTranslation();
-
-  return {
-    header: {
-      title: t("split.methodSelection.tooltip.title", "Choose Your Split Method")
-    },
-    tips: [
-      {
-        title: t("split.methodSelection.tooltip.header.title", "Split Method Selection"),
-        description: t("split.methodSelection.tooltip.header.text", "Choose how you want to split your PDF document. Each method is optimized for different use cases and document types."),
-        bullets: [
-          t("split.methodSelection.tooltip.bullet1", "Click on a method card to select it"),
-          t("split.methodSelection.tooltip.bullet2", "Hover over each card to see a quick description"),
-          t("split.methodSelection.tooltip.bullet3", "The settings step will appear after you select a method"),
-          t("split.methodSelection.tooltip.bullet4", "You can change methods at any time before processing")
-        ]
-      }
-    ]
-  };
-};

frontend/src/components/tooltips/useSplitSettingsTips.ts

@@ -1,134 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '../../types/tips';
-import { SPLIT_METHODS, type SplitMethod } from '../../constants/splitConstants';
-
-export const useSplitSettingsTips = (method: SplitMethod | ''): TooltipContent | null => {
-  const { t } = useTranslation();
-
-  if (!method) return null;
-
-  const tooltipMap: Record<SplitMethod, TooltipContent> = {
-    [SPLIT_METHODS.BY_PAGES]: {
-      header: {
-        title: t("split.tooltip.byPages.title", "Split at Page Numbers")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
-          description: t("split.tooltip.byPages.text", "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges."),
-          bullets: [
-            t("split.tooltip.byPages.bullet1", "Single pages: 1,3,5"),
-            t("split.tooltip.byPages.bullet2", "Page ranges: 1-5,10-15"),
-            t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_SECTIONS]: {
-      header: {
-        title: t("split.tooltip.bySections.title", "Split by Grid Sections")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
-          description: t("split.tooltip.bySections.text", "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas."),
-          bullets: [
-            t("split.tooltip.bySections.bullet1", "Horizontal: Number of rows to create"),
-            t("split.tooltip.bySections.bullet2", "Vertical: Number of columns to create"),
-            t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_SIZE]: {
-      header: {
-        title: t("split.tooltip.bySize.title", "Split by File Size")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.bySize.title", "Split by File Size"),
-          description: t("split.tooltip.bySize.text", "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments."),
-          bullets: [
-            t("split.tooltip.bySize.bullet1", "Use MB for larger files (e.g., 10MB)"),
-            t("split.tooltip.bySize.bullet2", "Use KB for smaller files (e.g., 500KB)"),
-            t("split.tooltip.bySize.bullet3", "System will split at page boundaries")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_PAGE_COUNT]: {
-      header: {
-        title: t("split.tooltip.byPageCount.title", "Split by Page Count")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.byPageCount.title", "Split by Page Count"),
-          description: t("split.tooltip.byPageCount.text", "Create multiple PDFs with a specific number of pages each. Perfect for creating uniform document chunks."),
-          bullets: [
-            t("split.tooltip.byPageCount.bullet1", "Enter the number of pages per output file"),
-            t("split.tooltip.byPageCount.bullet2", "Last file may have fewer pages if not evenly divisible"),
-            t("split.tooltip.byPageCount.bullet3", "Useful for batch processing workflows")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_DOC_COUNT]: {
-      header: {
-        title: t("split.tooltip.byDocCount.title", "Split by Document Count")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.byDocCount.title", "Split by Document Count"),
-          description: t("split.tooltip.byDocCount.text", "Create a specific number of output files by evenly distributing pages across them."),
-          bullets: [
-            t("split.tooltip.byDocCount.bullet1", "Enter the number of output files you want"),
-            t("split.tooltip.byDocCount.bullet2", "Pages are distributed as evenly as possible"),
-            t("split.tooltip.byDocCount.bullet3", "Useful when you need a specific number of files")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_CHAPTERS]: {
-      header: {
-        title: t("split.tooltip.byChapters.title", "Split by Chapters")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.byChapters.title", "Split by Chapters"),
-          description: t("split.tooltip.byChapters.text", "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure."),
-          bullets: [
-            t("split.tooltip.byChapters.bullet1", "Bookmark Level: Which level to split on (1=top level)"),
-            t("split.tooltip.byChapters.bullet2", "Include Metadata: Preserve document properties"),
-            t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names")
-          ]
-        }
-      ]
-    },
-
-    [SPLIT_METHODS.BY_PAGE_DIVIDER]: {
-      header: {
-        title: t("split.tooltip.byPageDivider.title", "Split by Page Divider")
-      },
-      tips: [
-        {
-          title: t("split.tooltip.byPageDivider.title", "Split by Page Divider"),
-          description: t("split.tooltip.byPageDivider.text", "Automatically split scanned documents using physical divider sheets with QR codes. Perfect for processing multiple documents scanned together."),
-          bullets: [
-            t("split.tooltip.byPageDivider.bullet1", "Print divider sheets from the download link"),
-            t("split.tooltip.byPageDivider.bullet2", "Insert divider sheets between your documents"),
-            t("split.tooltip.byPageDivider.bullet3", "Scan all documents together as one PDF"),
-            t("split.tooltip.byPageDivider.bullet4", "Upload - divider pages are automatically detected and removed"),
-            t("split.tooltip.byPageDivider.bullet5", "Enable Duplex Mode if scanning both sides of divider sheets")
-          ]
-        }
-      ]
-    }
-  };
-
-  return tooltipMap[method];
-};

frontend/src/components/tooltips/useSplitTips.ts

@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useSplitTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("split.tooltip.header.title", "Split Methods Overview")
+    },
+    tips: [
+      {
+        title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
+        description: t("split.tooltip.byPages.text", "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges."),
+        bullets: [
+          t("split.tooltip.byPages.bullet1", "Single pages: 1,3,5"),
+          t("split.tooltip.byPages.bullet2", "Page ranges: 1-5,10-15"),
+          t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20")
+        ]
+      },
+      {
+        title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
+        description: t("split.tooltip.bySections.text", "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas."),
+        bullets: [
+          t("split.tooltip.bySections.bullet1", "Horizontal: Number of rows to create"),
+          t("split.tooltip.bySections.bullet2", "Vertical: Number of columns to create"),
+          t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF")
+        ]
+      },
+      {
+        title: t("split.tooltip.bySize.title", "Split by File Size"),
+        description: t("split.tooltip.bySize.text", "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments."),
+        bullets: [
+          t("split.tooltip.bySize.bullet1", "Use MB for larger files (e.g., 10MB)"),
+          t("split.tooltip.bySize.bullet2", "Use KB for smaller files (e.g., 500KB)"),
+          t("split.tooltip.bySize.bullet3", "System will split at page boundaries")
+        ]
+      },
+      {
+        title: t("split.tooltip.byCount.title", "Split by Count"),
+        description: t("split.tooltip.byCount.text", "Create multiple PDFs with a specific number of pages or documents each."),
+        bullets: [
+          t("split.tooltip.byCount.bullet1", "Page Count: Fixed number of pages per file"),
+          t("split.tooltip.byCount.bullet2", "Document Count: Fixed number of output files"),
+          t("split.tooltip.byCount.bullet3", "Useful for batch processing workflows")
+        ]
+      },
+      {
+        title: t("split.tooltip.byChapters.title", "Split by Chapters"),
+        description: t("split.tooltip.byChapters.text", "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure."),
+        bullets: [
+          t("split.tooltip.byChapters.bullet1", "Bookmark Level: Which level to split on (1=top level)"),
+          t("split.tooltip.byChapters.bullet2", "Include Metadata: Preserve document properties"),
+          t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names")
+        ]
+      },
+      {
+        title: t("split.tooltip.byPageDivider.title", "Split by Page Divider"),
+        description: t("split.tooltip.byPageDivider.text", "Automatically split scanned documents using physical divider sheets with QR codes. Perfect for processing multiple documents scanned together."),
+        bullets: [
+          t("split.tooltip.byPageDivider.bullet1", "Print divider sheets from the download link"),
+          t("split.tooltip.byPageDivider.bullet2", "Insert divider sheets between your documents"),
+          t("split.tooltip.byPageDivider.bullet3", "Scan all documents together as one PDF"),
+          t("split.tooltip.byPageDivider.bullet4", "Upload - divider pages are automatically detected and removed"),
+          t("split.tooltip.byPageDivider.bullet5", "Enable Duplex Mode if scanning both sides of divider sheets")
+        ]
+      }
+    ]
+  };
+};

frontend/src/constants/splitConstants.ts

@@ -24,55 +24,4 @@ export const isSplitMethod = (value: string | null): value is SplitMethod => {
   return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
 }
 
-import { CardOption } from '../components/shared/CardSelector';
-
-export interface MethodOption extends CardOption<SplitMethod> {
-  tooltipKey: string;
-}
-
-export const METHOD_OPTIONS: MethodOption[] = [
-  {
-    value: SPLIT_METHODS.BY_PAGES,
-    prefixKey: "split.methods.prefix.splitAt",
-    nameKey: "split.methods.byPages.name",
-    tooltipKey: "split.methods.byPages.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_CHAPTERS,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.byChapters.name",
-    tooltipKey: "split.methods.byChapters.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_SECTIONS,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.bySections.name",
-    tooltipKey: "split.methods.bySections.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_SIZE,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.bySize.name",
-    tooltipKey: "split.methods.bySize.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_PAGE_COUNT,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.byPageCount.name",
-    tooltipKey: "split.methods.byPageCount.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_DOC_COUNT,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.byDocCount.name",
-    tooltipKey: "split.methods.byDocCount.tooltip"
-  },
-  {
-    value: SPLIT_METHODS.BY_PAGE_DIVIDER,
-    prefixKey: "split.methods.prefix.splitBy",
-    nameKey: "split.methods.byPageDivider.name",
-    tooltipKey: "split.methods.byPageDivider.tooltip"
-  }
-];
-
 

frontend/src/tools/Split.tsx

@@ -1,17 +1,15 @@
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
-import CardSelector from "../components/shared/CardSelector";
 import SplitSettings from "../components/tools/split/SplitSettings";
 import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
 import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
 import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
-import { useSplitMethodTips } from "../components/tooltips/useSplitMethodTips";
+import { useSplitTips } from "../components/tooltips/useSplitTips";
-import { useSplitSettingsTips } from "../components/tooltips/useSplitSettingsTips";
 import { BaseToolProps, ToolComponent } from "../types/tool";
-import { type SplitMethod, METHOD_OPTIONS, type MethodOption } from "../constants/splitConstants";
 
 const Split = (props: BaseToolProps) => {
   const { t } = useTranslation();
+  const splitTips = useSplitTips();
 
   const base = useBaseTool(
     'split',
@@ -20,27 +18,6 @@ const Split = (props: BaseToolProps) => {
     props
   );
 
-  const methodTips = useSplitMethodTips();
-  const settingsTips = useSplitSettingsTips(base.params.parameters.method);
-
-  // Get tooltip content for a specific method
-  const getMethodTooltip = (option: MethodOption) => {
-    const tooltipContent = useSplitSettingsTips(option.value);
-    return tooltipContent?.tips || [];
-  };
-
-  // Get the method name for the settings step title
-  const getSettingsTitle = () => {
-    if (!base.params.parameters.method) return t("split.steps.settings", "Settings");
-
-    const methodOption = METHOD_OPTIONS.find(option => option.value === base.params.parameters.method);
-    if (!methodOption) return t("split.steps.settings", "Settings");
-
-    const prefix = t(methodOption.prefixKey, "Split by");
-    const name = t(methodOption.nameKey, "Method Name");
-    return `${prefix} ${name}`;
-  };
-
   return createToolFlow({
     files: {
       selectedFiles: base.selectedFiles,
@@ -48,25 +25,10 @@ const Split = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t("split.steps.chooseMethod", "Choose Method"),
+        title: "Settings",
-        isCollapsed: !!base.params.parameters.method, // Collapse when method is selected
+        isCollapsed: base.settingsCollapsed,
-        onCollapsedClick: () => base.params.updateParameter('method', '')
-        ,
-        tooltip: methodTips,
-        content: (
-          <CardSelector<SplitMethod, MethodOption>
-            options={METHOD_OPTIONS}
-            onSelect={(method) => base.params.updateParameter('method', method)}
-            disabled={base.endpointLoading}
-            getTooltipContent={getMethodTooltip}
-          />
-        ),
-      },
-      {
-        title: getSettingsTitle(),
-        isCollapsed: !base.params.parameters.method, // Collapsed until method selected
         onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
-        tooltip: settingsTips || undefined,
+        tooltip: splitTips,
         content: (
           <SplitSettings
             parameters={base.params.parameters}