Page numbers automation fix

frontend/src/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx

@@ -0,0 +1,77 @@
+/**
+ * AddPageNumbersAppearanceSettings - Customize Appearance step
+ */
+
+import { Stack, Select, TextInput, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import { Tooltip } from "../../shared/Tooltip";
+
+interface AddPageNumbersAppearanceSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAppearanceSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAppearanceSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Tooltip content={t('marginTooltip', 'Distance between the page number and the edge of the page.')}>
+        <Select
+          label={t('addPageNumbers.selectText.2', 'Margin')}
+          value={parameters.customMargin}
+          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          data={[
+            { value: 'small', label: t('sizes.small', 'Small') },
+            { value: 'medium', label: t('sizes.medium', 'Medium') },
+            { value: 'large', label: t('sizes.large', 'Large') },
+            { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontSizeTooltip', 'Size of the page number text in points. Larger numbers create bigger text.')}>
+        <NumberInput
+          label={t('addPageNumbers.fontSize', 'Font Size')}
+          value={parameters.fontSize}
+          onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 12)}
+          min={1}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('fontTypeTooltip', 'Font family for the page numbers. Choose based on your document style.')}>
+        <Select
+          label={t('addPageNumbers.fontName', 'Font Type')}
+          value={parameters.fontType}
+          onChange={(v) => onParameterChange('fontType', (v as any) || 'Times')}
+          data={[
+            { value: 'Times', label: 'Times Roman' },
+            { value: 'Helvetica', label: 'Helvetica' },
+            { value: 'Courier', label: 'Courier New' },
+          ]}
+          disabled={disabled}
+        />
+      </Tooltip>
+
+      <Tooltip content={t('customTextTooltip', 'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.')}>
+        <TextInput
+          label={t('addPageNumbers.selectText.6', 'Custom Text Format')}
+          value={parameters.customText || ''}
+          onChange={(e) => onParameterChange('customText', e.currentTarget.value)}
+          placeholder={t('addPageNumbers.customNumberDesc', 'e.g., "Page {n}" or leave blank for just numbers')}
+          disabled={disabled}
+        />
+      </Tooltip>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAppearanceSettings;

frontend/src/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx

@@ -0,0 +1,55 @@
+/**
+ * AddPageNumbersAutomationSettings - Used for automation only
+ *
+ * Combines both position and appearance settings into a single view
+ */
+
+import { Stack, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import AddPageNumbersPositionSettings from "./AddPageNumbersPositionSettings";
+import AddPageNumbersAppearanceSettings from "./AddPageNumbersAppearanceSettings";
+
+interface AddPageNumbersAutomationSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const AddPageNumbersAutomationSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: AddPageNumbersAutomationSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position & Pages Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.positionAndPages", "Position & Pages")}</Text>
+        <AddPageNumbersPositionSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+          file={null}
+          showQuickGrid={true}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Appearance Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={600}>{t("addPageNumbers.customize", "Customize Appearance")}</Text>
+        <AddPageNumbersAppearanceSettings
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          disabled={disabled}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersAutomationSettings;

frontend/src/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx

@@ -0,0 +1,70 @@
+/**
+ * AddPageNumbersPositionSettings - Position & Pages step
+ */
+
+import { Stack, TextInput, NumberInput, Divider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "./useAddPageNumbersParameters";
+import { Tooltip } from "../../shared/Tooltip";
+import PageNumberPreview from "./PageNumberPreview";
+
+interface AddPageNumbersPositionSettingsProps {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  disabled?: boolean;
+  file?: File | null;
+  showQuickGrid?: boolean;
+}
+
+const AddPageNumbersPositionSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  file = null,
+  showQuickGrid = true
+}: AddPageNumbersPositionSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="lg">
+      {/* Position Selection */}
+      <Stack gap="md">
+        <PageNumberPreview
+          parameters={parameters}
+          onParameterChange={onParameterChange}
+          file={file}
+          showQuickGrid={showQuickGrid}
+        />
+      </Stack>
+
+      <Divider />
+
+      {/* Pages & Starting Number Section */}
+      <Stack gap="md">
+        <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
+
+        <Tooltip content={t('pageSelectionPrompt', 'Specify which pages to add numbers to. Examples: "1,3,5" for specific pages, "1-5" for ranges, "2n" for even pages, or leave blank for all pages.')}>
+          <TextInput
+            label={t('addPageNumbers.selectText.5', 'Pages to Number')}
+            value={parameters.pagesToNumber || ''}
+            onChange={(e) => onParameterChange('pagesToNumber', e.currentTarget.value)}
+            placeholder={t('addPageNumbers.numberPagesDesc', 'e.g., 1,3,5-8 or leave blank for all pages')}
+            disabled={disabled}
+          />
+        </Tooltip>
+
+        <Tooltip content={t('startingNumberTooltip', 'The first number to display. Subsequent pages will increment from this number.')}>
+          <NumberInput
+            label={t('addPageNumbers.selectText.4', 'Starting Number')}
+            value={parameters.startingNumber}
+            onChange={(v) => onParameterChange('startingNumber', typeof v === 'number' ? v : 1)}
+            min={1}
+            disabled={disabled}
+          />
+        </Tooltip>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AddPageNumbersPositionSettings;

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -101,6 +101,7 @@ import SplitAutomationSettings from "../components/tools/split/SplitAutomationSe
 import AddAttachmentsSettings from "../components/tools/addAttachments/AddAttachmentsSettings";
 import RemovePagesSettings from "../components/tools/removePages/RemovePagesSettings";
 import RemoveBlanksSettings from "../components/tools/removeBlanks/RemoveBlanksSettings";
+import AddPageNumbersAutomationSettings from "../components/tools/addPageNumbers/AddPageNumbersAutomationSettings";
 
 const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI
 
@@ -464,7 +465,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         description: t("home.addPageNumbers.desc", "Add Page numbers throughout a document in a set location"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
-        automationSettings: null,
+        automationSettings: AddPageNumbersAutomationSettings,
         maxFiles: -1,
         endpoints: ["add-page-numbers"],
         operationConfig: addPageNumbersOperationConfig,

frontend/src/tools/AddPageNumbers.tsx

@@ -6,10 +6,9 @@ import { BaseToolProps, ToolComponent } from "../types/tool";
 import { useEndpointEnabled } from "../hooks/useEndpointConfig";
 import { useAddPageNumbersParameters } from "../components/tools/addPageNumbers/useAddPageNumbersParameters";
 import { useAddPageNumbersOperation } from "../components/tools/addPageNumbers/useAddPageNumbersOperation";
-import { Select, Stack, TextInput, NumberInput, Divider, Text } from "@mantine/core";
-import { Tooltip } from "../components/shared/Tooltip";
-import PageNumberPreview from "../components/tools/addPageNumbers/PageNumberPreview";
 import { useAccordionSteps } from "../hooks/tools/shared/useAccordionSteps";
+import AddPageNumbersPositionSettings from "../components/tools/addPageNumbers/AddPageNumbersPositionSettings";
+import AddPageNumbersAppearanceSettings from "../components/tools/addPageNumbers/AddPageNumbersAppearanceSettings";
 
 const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
@@ -68,44 +67,13 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
       onCollapsedClick: () => accordion.handleStepToggle(AddPageNumbersStep.POSITION_AND_PAGES),
       isVisible: hasFiles || hasResults,
       content: (
-        <Stack gap="lg">
-          {/* Position Selection */}
-          <Stack gap="md">
-            <PageNumberPreview
-              parameters={params.parameters}
-              onParameterChange={params.updateParameter}
-              file={selectedFiles[0] || null}
-              showQuickGrid={true}
-            />
-          </Stack>
-
-          <Divider />
-
-          {/* Pages & Starting Number Section */}
-          <Stack gap="md">
-            <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
-
-            <Tooltip content={t('pageSelectionPrompt', 'Specify which pages to add numbers to. Examples: "1,3,5" for specific pages, "1-5" for ranges, "2n" for even pages, or leave blank for all pages.')}>
-              <TextInput
-                label={t('addPageNumbers.selectText.5', 'Pages to Number')}
-                value={params.parameters.pagesToNumber}
-                onChange={(e) => params.updateParameter('pagesToNumber', e.currentTarget.value)}
-                placeholder={t('addPageNumbers.numberPagesDesc', 'e.g., 1,3,5-8 or leave blank for all pages')}
-                disabled={endpointLoading}
-              />
-            </Tooltip>
-
-            <Tooltip content={t('startingNumberTooltip', 'The first number to display. Subsequent pages will increment from this number.')}>
-              <NumberInput
-                label={t('addPageNumbers.selectText.4', 'Starting Number')}
-                value={params.parameters.startingNumber}
-                onChange={(v) => params.updateParameter('startingNumber', typeof v === 'number' ? v : 1)}
-                min={1}
-                disabled={endpointLoading}
-              />
-            </Tooltip>
-          </Stack>
-        </Stack>
+        <AddPageNumbersPositionSettings
+          parameters={params.parameters}
+          onParameterChange={params.updateParameter}
+          disabled={endpointLoading}
+          file={selectedFiles[0] || null}
+          showQuickGrid={true}
+        />
       ),
     });
 
@@ -116,56 +84,11 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
       onCollapsedClick: () => accordion.handleStepToggle(AddPageNumbersStep.CUSTOMIZE),
       isVisible: hasFiles || hasResults,
       content: (
-        <Stack gap="md">
-          <Tooltip content={t('marginTooltip', 'Distance between the page number and the edge of the page.')}>
-            <Select
-              label={t('addPageNumbers.selectText.2', 'Margin')}
-              value={params.parameters.customMargin}
-              onChange={(v) => params.updateParameter('customMargin', (v as any) || 'medium')}
-              data={[
-                { value: 'small', label: t('sizes.small', 'Small') },
-                { value: 'medium', label: t('sizes.medium', 'Medium') },
-                { value: 'large', label: t('sizes.large', 'Large') },
-                { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
-              ]}
-              disabled={endpointLoading}
-            />
-          </Tooltip>
-
-          <Tooltip content={t('fontSizeTooltip', 'Size of the page number text in points. Larger numbers create bigger text.')}>
-            <NumberInput
-              label={t('addPageNumbers.fontSize', 'Font Size')}
-              value={params.parameters.fontSize}
-              onChange={(v) => params.updateParameter('fontSize', typeof v === 'number' ? v : 12)}
-              min={1}
-              disabled={endpointLoading}
-            />
-          </Tooltip>
-
-          <Tooltip content={t('fontTypeTooltip', 'Font family for the page numbers. Choose based on your document style.')}>
-            <Select
-              label={t('addPageNumbers.fontName', 'Font Type')}
-              value={params.parameters.fontType}
-              onChange={(v) => params.updateParameter('fontType', (v as any) || 'Times')}
-              data={[
-                { value: 'Times', label: 'Times Roman' },
-                { value: 'Helvetica', label: 'Helvetica' },
-                { value: 'Courier', label: 'Courier New' },
-              ]}
-              disabled={endpointLoading}
-            />
-          </Tooltip>
-
-          <Tooltip content={t('customTextTooltip', 'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.')}>
-            <TextInput
-              label={t('addPageNumbers.selectText.6', 'Custom Text Format')}
-              value={params.parameters.customText}
-              onChange={(e) => params.updateParameter('customText', e.currentTarget.value)}
-              placeholder={t('addPageNumbers.customNumberDesc', 'e.g., "Page {n}" or leave blank for just numbers')}
-              disabled={endpointLoading}
-            />
-          </Tooltip>
-        </Stack>
+        <AddPageNumbersAppearanceSettings
+          parameters={params.parameters}
+          onParameterChange={params.updateParameter}
+          disabled={endpointLoading}
+        />
       ),
     });