From 91821f805f03fc8b1a8878ed4d0a55320b2809f7 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Tue, 16 Sep 2025 11:35:00 +0100
Subject: [PATCH] Stack options

---
 .../tools/split/SplitMethodSelector.tsx       | 187 ++++++------------
 frontend/src/constants/splitConstants.ts      |  68 +++++++
 frontend/src/tools/Split.tsx                  |   1 -
 3 files changed, 126 insertions(+), 130 deletions(-)

diff --git a/frontend/src/components/tools/split/SplitMethodSelector.tsx b/frontend/src/components/tools/split/SplitMethodSelector.tsx
index 551bfb963..b5d21a6f3 100644
--- a/frontend/src/components/tools/split/SplitMethodSelector.tsx
+++ b/frontend/src/components/tools/split/SplitMethodSelector.tsx
@@ -1,26 +1,15 @@
-import { Grid, Card, Stack, Text } from '@mantine/core';
+import { Stack, Card, Text } from '@mantine/core';
 import { Tooltip } from '../../shared/Tooltip';
 import { useTranslation } from 'react-i18next';
-import { SPLIT_METHODS, type SplitMethod } from '../../../constants/splitConstants';
+import { type SplitMethod, METHOD_OPTIONS } 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) => {
@@ -32,65 +21,6 @@ const SplitMethodSelector = ({
     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);
@@ -98,67 +28,66 @@ const SplitMethodSelector = ({
   };
 
   return (
-    <Grid>
-      {methodOptions.map((option) => (
-        <Grid.Col key={option.method} span={{ base: 12, sm: 6 }}>
-          <Tooltip
-            sidebarTooltip
-            tips={getMethodTooltip(option.method)}
+    <Stack gap="sm">
+      {METHOD_OPTIONS.map((option) => (
+        <Tooltip
+          key={option.method}
+          sidebarTooltip
+          tips={getMethodTooltip(option.method)}
+        >
+          <Card
+            radius="md"
+            w="100%"
+            h={'3.5rem'}
+            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={() => handleMethodClick(option.method)}
           >
-            <Card
-              shadow="sm"
-              radius="md"
-              withBorder
+            <div style={{  width: '100%', position: 'relative', display: 'flex', flexDirection: 'row'  }}>
+              {/* Prefix in top left corner */}
+              <Text size="xs" c="dimmed" ta="center" fw={400} style={{
 
-              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>
+              }}>
+                {t(option.prefixKey, "Split by")}
+              </Text>
 
-                {/* 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>
+              <div style={{  }}>
+                <Text
+                  fw={500}
+                  size="sm"
+                  c={undefined}
+                  ta="center"
+                  style={{ marginLeft: '0.25rem' }}
+                >
+                  {t(option.nameKey, "Method Name")}
+                </Text>
+              </div>
+            </div>
+          </Card>
+        </Tooltip>
       ))}
-    </Grid>
+    </Stack>
   );
 };
 
diff --git a/frontend/src/constants/splitConstants.ts b/frontend/src/constants/splitConstants.ts
index 31f09794e..e04cfe119 100644
--- a/frontend/src/constants/splitConstants.ts
+++ b/frontend/src/constants/splitConstants.ts
@@ -24,4 +24,72 @@ export const isSplitMethod = (value: string | null): value is SplitMethod => {
   return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
 }
 
+export interface MethodOption {
+  method: SplitMethod;
+  icon: string;
+  prefixKey: string;
+  nameKey: string;
+  descKey: string;
+  tooltipKey: string;
+}
+
+export const METHOD_OPTIONS: 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"
+  }
+];
+
 
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index eda5c8b1c..bd358b132 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -77,7 +77,6 @@ const Split = (props: BaseToolProps) => {
         tooltip: methodTips,
         content: (
           <SplitMethodSelector
-            selectedMethod={base.params.parameters.method}
             onMethodSelect={(method) => base.params.updateParameter('method', method)}
             disabled={base.endpointLoading}
           />