diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index 5ce84331e..0fd88fb07 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/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": {
diff --git a/frontend/src/components/tools/split/SplitMethodSelector.tsx b/frontend/src/components/tools/split/SplitMethodSelector.tsx
new file mode 100644
index 000000000..551bfb963
--- /dev/null
+++ b/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 (
+
+ {methodOptions.map((option) => (
+
+
+ handleMethodClick(option.method)}
+ >
+
+ {/* Prefix section */}
+
+
+ {t(option.prefixKey, "Split by")}
+
+
+
+ {/* Title section */}
+
+
+ {t(option.nameKey, "Method Name")}
+
+
+
+ {/* Description section - fixed height
+
+
+ {t(option.descKey, "Method description")}
+
+ */}
+
+
+
+
+ ))}
+
+ );
+};
+
+export default SplitMethodSelector;
diff --git a/frontend/src/components/tools/split/SplitSettings.tsx b/frontend/src/components/tools/split/SplitSettings.tsx
index 3df1eabd4..dc7c02480 100644
--- a/frontend/src/components/tools/split/SplitSettings.tsx
+++ b/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 = ({
);
+ // Don't render anything if no method is selected
+ if (!parameters.method) {
+ return (
+
+
+ {t("split.settings.selectMethodFirst", "Please select a split method first")}
+
+
+ );
+ }
+
return (
- {/* Method Selector */}
-