add multi page layout tool (#4507)

Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>

frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Divider, Select, Stack, Switch } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { PageLayoutParameters } from '../../../hooks/tools/pageLayout/usePageLayoutParameters';
+import { getPagesPerSheetOptions } from './constants';
+
+export default function PageLayoutSettings({
+  parameters,
+  onParameterChange,
+  disabled,
+}: {
+  parameters: PageLayoutParameters;
+  onParameterChange: <K extends keyof PageLayoutParameters>(
+    key: K,
+    value: PageLayoutParameters[K]
+  ) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const options = getPagesPerSheetOptions(t);
+  const selected = options.find((o) => o.value === parameters.pagesPerSheet) || options[0];
+
+  return (
+    <Stack gap="sm">
+      <Select
+        label={t('pageLayout.pagesPerSheet', 'Pages per sheet:')}
+        data={options.map(o => ({ value: String(o.value), label: o.label }))}
+        value={String(parameters.pagesPerSheet)}
+        onChange={(v) => onParameterChange('pagesPerSheet', Number(v))}
+        disabled={disabled}
+      />
+
+      {selected && (
+        <div
+          style={{
+            backgroundColor: 'var(--information-text-bg)',
+            color: 'var(--information-text-color)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            marginTop: '4px',
+            fontSize: '0.75rem',
+            textAlign: 'center',
+          }}
+        >
+          {selected.description}
+        </div>
+      )}
+
+      <Divider />
+
+      <Switch
+        checked={parameters.addBorder}
+        onChange={(e) => onParameterChange('addBorder', e.currentTarget.checked)}
+        label={t('pageLayout.addBorder', 'Add Borders')}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+}
+
+

frontend/src/components/tools/pageLayout/constants.ts

@@ -0,0 +1,37 @@
+import { TFunction } from 'i18next';
+
+export type PagesPerSheetOption = {
+  value: number;
+  label: string;
+  description: string;
+};
+
+export const getPagesPerSheetOptions = (t: TFunction): PagesPerSheetOption[] => [
+  {
+    value: 2,
+    label: '2',
+    description: t('pageLayout.desc.2', 'Place 2 pages side-by-side on a single sheet.')
+  },
+  {
+    value: 3,
+    label: '3',
+    description: t('pageLayout.desc.3', 'Place 3 pages on a single sheet in a single row.')
+  },
+  {
+    value: 4,
+    label: '4',
+    description: t('pageLayout.desc.4', 'Place 4 pages on a single sheet (2 × 2 grid).')
+  },
+  {
+    value: 9,
+    label: '9',
+    description: t('pageLayout.desc.9', 'Place 9 pages on a single sheet (3 × 3 grid).')
+  },
+  {
+    value: 16,
+    label: '16',
+    description: t('pageLayout.desc.16', 'Place 16 pages on a single sheet (4 × 4 grid).')
+  },
+];
+
+