Grid version

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

@@ -684,6 +684,13 @@
     },
     "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."
     },
@@ -692,13 +699,45 @@
       "placeholder": "Select how to split the PDF"
     },
     "methods": {
-      "byPages": "Split at Page Numbers",
-      "bySections": "Split by Sections",
-      "bySize": "Split by File Size",
-      "byPageCount": "Split by Page Count",
-      "byDocCount": "Split by Document Count",
-      "byChapters": "Split by Chapters",
-      "byPageDivider": "Split by Page Divider"
+      "prefix": {
+        "splitAt": "Split at",
+        "splitBy": "Split by"
+      },
+      "byPages": {
+        "name": "Page Numbers",
+        "desc": "Extract specific pages (1,3,5-10)",
+        "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/tools/split/SplitMethodSelector.tsx

@@ -0,0 +1,165 @@
+import { Grid, Card, Stack, Text } from '@mantine/core';
+import { Tooltip } from '../../shared/Tooltip';
+import { useTranslation } from 'react-i18next';
+import { SPLIT_METHODS, type SplitMethod } from '../../../constants/splitConstants';
+import { useSplitSettingsTips } from '../../tooltips/useSplitSettingsTips';
+
+export interface SplitMethodSelectorProps {
+  selectedMethod: SplitMethod | '';
+  onMethodSelect: (method: SplitMethod) => void;
+  disabled?: boolean;
+}
+
+interface MethodOption {
+  method: SplitMethod;
+  icon: string;
+  prefixKey: string;
+  nameKey: string;
+  descKey: string;
+  tooltipKey: string;
+}
+
+const SplitMethodSelector = ({
+  selectedMethod,
+  onMethodSelect,
+  disabled = false
+}: SplitMethodSelectorProps) => {
+  const { t } = useTranslation();
+
+  // Get tooltip content for a specific method
+  const getMethodTooltip = (method: SplitMethod) => {
+    const tooltipContent = useSplitSettingsTips(method);
+    return tooltipContent?.tips || [];
+  };
+
+  const methodOptions: MethodOption[] = [
+    {
+      method: SPLIT_METHODS.BY_PAGES,
+      icon: "format-list-numbered-rounded",
+      prefixKey: "split.methods.prefix.splitAt",
+      nameKey: "split.methods.byPages.name",
+      descKey: "split.methods.byPages.desc",
+      tooltipKey: "split.methods.byPages.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_CHAPTERS,
+      icon: "bookmark-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.byChapters.name",
+      descKey: "split.methods.byChapters.desc",
+      tooltipKey: "split.methods.byChapters.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_SECTIONS,
+      icon: "grid-on-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.bySections.name",
+      descKey: "split.methods.bySections.desc",
+      tooltipKey: "split.methods.bySections.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_SIZE,
+      icon: "storage-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.bySize.name",
+      descKey: "split.methods.bySize.desc",
+      tooltipKey: "split.methods.bySize.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_PAGE_COUNT,
+      icon: "numbers-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.byPageCount.name",
+      descKey: "split.methods.byPageCount.desc",
+      tooltipKey: "split.methods.byPageCount.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_DOC_COUNT,
+      icon: "content-copy-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.byDocCount.name",
+      descKey: "split.methods.byDocCount.desc",
+      tooltipKey: "split.methods.byDocCount.tooltip"
+    },
+    {
+      method: SPLIT_METHODS.BY_PAGE_DIVIDER,
+      icon: "auto-awesome-rounded",
+      prefixKey: "split.methods.prefix.splitBy",
+      nameKey: "split.methods.byPageDivider.name",
+      descKey: "split.methods.byPageDivider.desc",
+      tooltipKey: "split.methods.byPageDivider.tooltip"
+    }
+  ];
+
+  const handleMethodClick = (method: SplitMethod) => {
+    if (!disabled) {
+      onMethodSelect(method);
+    }
+  };
+
+  return (
+    <Grid>
+      {methodOptions.map((option) => (
+        <Grid.Col key={option.method} span={{ base: 12, sm: 6 }}>
+          <Tooltip
+            sidebarTooltip
+            tips={getMethodTooltip(option.method)}
+          >
+            <Card
+              shadow="sm"
+              radius="md"
+              withBorder
+
+              h={120}
+              style={{
+                cursor: disabled ? 'default' : 'pointer',
+                backgroundColor: selectedMethod === option.method ? 'var(--mantine-color-blue-light)' : 'var(--mantine-color-gray-2)',
+                borderColor: selectedMethod === option.method ? 'var(--mantine-color-blue-filled)' : 'var(--mantine-color-gray-3)',
+                opacity: disabled ? 0.6 : 1,
+                display: 'flex',
+                flexDirection: 'column'
+              }}
+              onClick={() => handleMethodClick(option.method)}
+            >
+              <Stack align="center" gap={0} p="xs" h="100%" justify="Center">
+                {/* Prefix section */}
+                <Stack align="center" style={{  justifyContent: 'center' }}>
+                  <Text
+                    size="xs"
+                    c="dimmed"
+                    ta="center"
+                    fw={400}
+                  >
+                    {t(option.prefixKey, "Split by")}
+                  </Text>
+                </Stack>
+
+                {/* Title section  */}
+                <Stack align="center" style={{ justifyContent: 'center' }}>
+                  <Text
+                    fw={selectedMethod === option.method ? 600 : 500}
+                    size="sm"
+                    ta="center"
+                    c={selectedMethod === option.method ? 'blue' : undefined}
+                   style={{ lineHeight: 1.2 }}
+                  >
+                    {t(option.nameKey, "Method Name")}
+                  </Text>
+                </Stack>
+
+                {/* Description section - fixed height
+                <Stack align="center" style={{ height: '60px', justifyContent: 'flex-start' }}>
+                  <Text size="xs" c="dimmed" ta="center"  style={{ lineHeight: 1.3 }}>
+                    {t(option.descKey, "Method description")}
+                  </Text>
+                </Stack> */}
+              </Stack>
+            </Card>
+          </Tooltip>
+        </Grid.Col>
+      ))}
+    </Grid>
+  );
+};
+
+export default SplitMethodSelector;

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

@@ -1,7 +1,7 @@
-import { Stack, TextInput, Select, Checkbox, Anchor } from '@mantine/core';
+import { Stack, TextInput, Checkbox, Anchor, Text } from '@mantine/core';
 import LocalIcon from '../../shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
-import { isSplitMethod, SPLIT_METHODS } from '../../../constants/splitConstants';
+import { SPLIT_METHODS } from '../../../constants/splitConstants';
 import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters';
 
 export interface SplitSettingsProps {
@@ -135,27 +135,20 @@ 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 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 */}
+      {/* Method-Specific 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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,134 @@
+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/tools/Split.tsx

@@ -1,15 +1,16 @@
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
+import SplitMethodSelector from "../components/tools/split/SplitMethodSelector";
 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 { useSplitTips } from "../components/tooltips/useSplitTips";
+import { useSplitMethodTips } from "../components/tooltips/useSplitMethodTips";
+import { useSplitSettingsTips } from "../components/tooltips/useSplitSettingsTips";
 import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Split = (props: BaseToolProps) => {
   const { t } = useTranslation();
-  const splitTips = useSplitTips();
 
   const base = useBaseTool(
     'split',
@@ -18,6 +19,48 @@ const Split = (props: BaseToolProps) => {
     props
   );
 
+  const methodTips = useSplitMethodTips();
+  const settingsTips = useSplitSettingsTips(base.params.parameters.method);
+
+  // Get the method name for the settings step title
+  const getSettingsTitle = () => {
+    if (!base.params.parameters.method) return t("split.steps.settings", "Settings");
+
+    const methodTitleMap = {
+      'byPages': {
+        prefix: t("split.methods.prefix.splitAt", "Split at"),
+        name: t("split.methods.byPages.name", "Page Numbers")
+      },
+      'bySections': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.bySections.name", "Sections")
+      },
+      'bySize': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.bySize.name", "File Size")
+      },
+      'byPageCount': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.byPageCount.name", "Page Count")
+      },
+      'byDocCount': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.byDocCount.name", "Document Count")
+      },
+      'byChapters': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.byChapters.name", "Chapters")
+      },
+      'byPageDivider': {
+        prefix: t("split.methods.prefix.splitBy", "Split by"),
+        name: t("split.methods.byPageDivider.name", "Page Divider")
+      },
+    };
+
+    const method = methodTitleMap[base.params.parameters.method as keyof typeof methodTitleMap];
+    return method ? `${method.prefix} ${method.name}` : t("split.steps.settings", "Settings");
+  };
+
   return createToolFlow({
     files: {
       selectedFiles: base.selectedFiles,
@@ -25,10 +68,26 @@ const Split = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: "Settings",
-        isCollapsed: base.settingsCollapsed,
+        title: t("split.steps.chooseMethod", "Choose Method"),
+        isCollapsed: !!base.params.parameters.method, // Collapse when method is selected
+        onCollapsedClick: () => {
+          // Clear the selected method to expand the method selection step
+          base.params.updateParameter('method', '');
+        },
+        tooltip: methodTips,
+        content: (
+          <SplitMethodSelector
+            selectedMethod={base.params.parameters.method}
+            onMethodSelect={(method) => base.params.updateParameter('method', method)}
+            disabled={base.endpointLoading}
+          />
+        ),
+      },
+      {
+        title: getSettingsTitle(),
+        isCollapsed: !base.params.parameters.method, // Collapsed until method selected
         onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
-        tooltip: splitTips,
+        tooltip: settingsTips || undefined,
         content: (
           <SplitSettings
             parameters={base.params.parameters}