V2 Tool - Auto split (#4446)

integrated auto split, with flattened split tool --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
2026-03-19 02:22:11 +01:00 · 2025-09-16 13:08:54 +01:00
parent a57373b968
commit 8e8b417f5e
10 changed files with 447 additions and 92 deletions
--- a/frontend/src/components/shared/CardSelector.tsx
+++ b/frontend/src/components/shared/CardSelector.tsx
@@ -0,0 +1,99 @@
+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;
--- a/frontend/src/components/tools/split/SplitSettings.tsx
+++ b/frontend/src/components/tools/split/SplitSettings.tsx
@@ -1,6 +1,7 @@
-import { Stack, TextInput, Select, Checkbox } 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 {
@@ -113,32 +114,48 @@ const SplitSettings = ({
    </Stack>
  );

+  const renderByPageDividerForm = () => (
+    <Stack gap="sm">
+      <Anchor
+        href="https://stirlingpdf.io/files/Auto%20Splitter%20Divider%20(with%20instructions).pdf"
+        target="_blank"
+        size="sm"
+        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <LocalIcon icon="download-rounded" width="2rem" height="2rem" />
+        {t("autoSplitPDF.dividerDownload2", "Download 'Auto Splitter Divider (with instructions).pdf'")}
+      </Anchor>
+
+      <Checkbox
+        label={t("autoSplitPDF.duplexMode", "Duplex Mode (Front and back scanning)")}
+        checked={parameters.duplexMode}
+        onChange={(e) => onParameterChange('duplexMode', e.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </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") },
-        ]}
-      />
-
-      {/* 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 ||
        parameters.method === SPLIT_METHODS.BY_PAGE_COUNT ||
        parameters.method === SPLIT_METHODS.BY_DOC_COUNT) && renderSplitValueForm()}
      {parameters.method === SPLIT_METHODS.BY_CHAPTERS && renderByChaptersForm()}
+      {parameters.method === SPLIT_METHODS.BY_PAGE_DIVIDER && renderByPageDividerForm()}
    </Stack>
  );
 }
--- a/frontend/src/components/tooltips/useSplitMethodTips.ts
+++ b/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")
+        ]
+      }
+    ]
+  };
+};
--- a/frontend/src/components/tooltips/useSplitSettingsTips.ts
+++ b/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];
+};
--- a/frontend/src/components/tooltips/useSplitTips.ts
+++ b/frontend/src/components/tooltips/useSplitTips.ts
@@ -1,59 +0,0 @@
-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")
-        ]
-      }
-    ]
-  };
-};