Add toggle

frontend/src/components/shared/ProcessingModeToggle.tsx

@@ -0,0 +1,62 @@
+import { Stack, Text, SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ProcessingMode } from '../../types/parameters';
+
+export interface ProcessingModeToggleProps {
+  value: ProcessingMode;
+  onChange: (mode: ProcessingMode) => void;
+  disabled?: boolean;
+  frontendDescriptionKey?: string;
+  backendDescriptionKey?: string;
+}
+
+/**
+ * Reusable processing mode toggle component for tools that support both
+ * frontend (browser-based) and backend (server-based) processing.
+ */
+const ProcessingModeToggle = ({
+  value,
+  onChange,
+  disabled = false,
+  frontendDescriptionKey,
+  backendDescriptionKey
+}: ProcessingModeToggleProps) => {
+  const { t } = useTranslation();
+
+  const frontendDesc = frontendDescriptionKey
+    ? t(frontendDescriptionKey, 'Process locally in your browser without uploading files.')
+    : t('common.processingMode.defaultFrontendDesc', 'Process locally in your browser without uploading files.');
+
+  const backendDesc = backendDescriptionKey
+    ? t(backendDescriptionKey, 'Use the server to process files.')
+    : t('common.processingMode.defaultBackendDesc', 'Use the server to process files.');
+
+  return (
+    <Stack gap="xs">
+      <Text size="sm" fw={500}>
+        {t('common.processingMode.label', 'Processing mode')}
+      </Text>
+      <SegmentedControl
+        value={value}
+        onChange={(s => {onChange(s as ProcessingMode)})}
+        data={[
+          {
+            label: t('common.processingMode.backend', 'Backend'),
+            value: 'backend'
+          },
+          {
+            label: t('common.processingMode.frontend', 'Browser'),
+            value: 'frontend'
+          }
+        ]}
+        fullWidth
+        disabled={disabled}
+      />
+      <Text size="xs" c="dimmed">
+        {value === 'frontend' ? frontendDesc : backendDesc}
+      </Text>
+    </Stack>
+  );
+};
+
+export default ProcessingModeToggle;

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

@@ -2,11 +2,12 @@
  * AddPageNumbersPositionSettings - Position & Pages step
  */
 
-import { Stack, TextInput, NumberInput, Divider, Text, SegmentedControl } from "@mantine/core";
+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";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface AddPageNumbersPositionSettingsProps {
   parameters: AddPageNumbersParameters;
@@ -27,26 +28,11 @@ const AddPageNumbersPositionSettings = ({
 
   return (
     <Stack gap="lg">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('addPageNumbers.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as AddPageNumbersParameters['processingMode'])}
-          data={[
-            { label: t('addPageNumbers.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('addPageNumbers.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('addPageNumbers.processingMode.frontendDescription', 'Stamp page numbers locally (page lists only).')
-            : t('addPageNumbers.processingMode.backendDescription', 'Use the server for formula-based selection and heavy PDFs.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       {/* Position Selection */}
       <Stack gap="md">

frontend/src/components/tools/addStamp/StampSetupSettings.tsx

@@ -1,9 +1,10 @@
 import { useTranslation } from "react-i18next";
-import { Stack, Textarea, TextInput, Select, Button, Text, Divider, SegmentedControl } from "@mantine/core";
+import { Stack, Textarea, TextInput, Select, Button, Text, Divider } from "@mantine/core";
 import { AddStampParameters } from "./useAddStampParameters";
 import ButtonSelector from "../../shared/ButtonSelector";
 import styles from "./StampPreview.module.css";
 import { getDefaultFontSizeForAlphabet } from "./StampPreviewUtils";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface StampSetupSettingsProps {
   parameters: AddStampParameters;
@@ -22,23 +23,11 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false }:
         onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
         disabled={disabled}
       />
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('addStamp.processingMode.label', 'Processing mode')}</Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as 'backend' | 'frontend')}
-          data={[
-            { label: t('addStamp.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('addStamp.processingMode.frontend', 'Browser'), value: 'frontend' },
-          ]}
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('addStamp.processingMode.frontendDescription', 'Stamp selected pages directly in your browser.')
-            : t('addStamp.processingMode.backendDescription', 'Use the server to stamp pages (required for custom page formulas).')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
       <Divider/>
       <div>
         <Text size="sm" fw={500} mb="xs">{t('AddStampRequest.stampType', 'Stamp Type')}</Text>

frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx

@@ -1,7 +1,8 @@
-import { Stack, Checkbox, Group, SegmentedControl, Text } from "@mantine/core";
+import { Stack, Checkbox, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
 import NumberInputWithUnit from "../shared/NumberInputWithUnit";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface WatermarkFormattingProps {
   parameters: AddWatermarkParameters;
@@ -14,25 +15,11 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t("watermark.processingMode.label", "Processing mode")}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as 'backend' | 'frontend')}
-          data={[
-            { label: t('watermark.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('watermark.processingMode.frontend', 'Browser'), value: 'frontend' },
-          ]}
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('watermark.processingMode.frontendDescription', 'Process the watermark directly in your browser without uploading files.')
-            : t('watermark.processingMode.backendDescription', 'Use the server to apply the watermark (recommended for large files or flattening).')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       {/* Size - single row */}
       <NumberInputWithUnit

frontend/src/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx

@@ -1,6 +1,7 @@
-import { Stack, NumberInput, Select, SegmentedControl, Text } from "@mantine/core";
+import { Stack, NumberInput, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AdjustPageScaleParameters, PageSize } from "../../../hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface AdjustPageScaleSettingsProps {
   parameters: AdjustPageScaleParameters;
@@ -26,26 +27,11 @@ const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = fal
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('adjustPageScale.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as AdjustPageScaleParameters['processingMode'])}
-          data={[
-            { label: t('adjustPageScale.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('adjustPageScale.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('adjustPageScale.processingMode.frontendDescription', 'Resize pages locally using pdf-lib.')
-            : t('adjustPageScale.processingMode.backendDescription', 'Use the server for complex scaling workflows.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       <NumberInput
         label={t('adjustPageScale.scaleFactor.label', 'Scale Factor')}

frontend/src/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx

@@ -1,7 +1,8 @@
-import { Stack, Divider, Text, SegmentedControl } from "@mantine/core";
+import { Stack, Divider, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters, createCustomMetadataFunctions } from "../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { useMetadataExtraction } from "../../../hooks/tools/changeMetadata/useMetadataExtraction";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 import DeleteAllStep from "./steps/DeleteAllStep";
 import StandardMetadataStep from "./steps/StandardMetadataStep";
 import DocumentDatesStep from "./steps/DocumentDatesStep";
@@ -36,26 +37,11 @@ const ChangeMetadataSingleStep = ({
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('changeMetadata.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as ChangeMetadataParameters['processingMode'])}
-          data={[
-            { label: t('changeMetadata.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('changeMetadata.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('changeMetadata.processingMode.frontendDescription', 'Update standard and custom metadata without uploading the document.')
-            : t('changeMetadata.processingMode.backendDescription', 'Use the server for metadata changes and legacy XMP cleanup.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       {/* Delete All */}
       <Stack gap="md">

frontend/src/components/tools/crop/CropSettings.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, useEffect } from "react";
-import { Stack, Text, Box, Group, ActionIcon, Center, Alert, SegmentedControl } from "@mantine/core";
+import { Stack, Text, Box, Group, ActionIcon, Center, Alert } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import { CropParametersHook } from "../../../hooks/tools/crop/useCropParameters";
@@ -15,6 +15,7 @@ import {
 } from "../../../utils/cropCoordinates";
 import { pdfWorkerManager } from "../../../services/pdfWorkerManager";
 import DocumentThumbnail from "../../shared/filePreview/DocumentThumbnail";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface CropSettingsProps {
   parameters: CropParametersHook;
@@ -151,23 +152,11 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
 
   return (
     <Stack gap="md" data-tour="crop-settings">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('crop.processingMode.label', 'Processing mode')}</Text>
-        <SegmentedControl
-          value={parameters.parameters.processingMode}
-          onChange={(value) => parameters.updateParameter('processingMode', value as 'backend' | 'frontend')}
-          data={[
-            { label: t('crop.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('crop.processingMode.frontend', 'Browser'), value: 'frontend' },
-          ]}
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.parameters.processingMode === 'frontend'
-            ? t('crop.processingMode.frontendDescription', 'Crop each page locally without uploading the PDF.')
-            : t('crop.processingMode.backendDescription', 'Use the server to crop pages (recommended for very large files).')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.parameters.processingMode}
+        onChange={(mode) => parameters.updateParameter('processingMode', mode)}
+        disabled={disabled}
+      />
       {/* PDF Preview with Crop Selector */}
       <Stack gap="xs">
         <Group justify="space-between" align="center">

frontend/src/components/tools/flatten/FlattenSettings.tsx

@@ -1,6 +1,7 @@
-import { Stack, Text, Checkbox, SegmentedControl } from "@mantine/core";
+import { Stack, Text, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { FlattenParameters } from "../../../hooks/tools/flatten/useFlattenParameters";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface FlattenSettingsProps {
   parameters: FlattenParameters;
@@ -13,26 +14,13 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('flatten.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as FlattenParameters['processingMode'])}
-          data={[
-            { label: t('flatten.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('flatten.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('flatten.processingMode.frontendDescription', 'Flatten form fields directly in your browser (forms only).')
-            : t('flatten.processingMode.backendDescription', 'Use the server for full flattening, including rasterising pages.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+        frontendDescriptionKey="flatten.processingMode.frontendDescription"
+        backendDescriptionKey="flatten.processingMode.backendDescription"
+      />
 
       <Stack gap="sm">
         <Checkbox

frontend/src/components/tools/merge/MergeSettings.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Stack, Checkbox } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { MergeParameters } from '../../../hooks/tools/merge/useMergeParameters';
+import ProcessingModeToggle from '../../shared/ProcessingModeToggle';
 
 interface MergeSettingsProps {
   parameters: MergeParameters;
@@ -18,6 +19,12 @@ const MergeSettings: React.FC<MergeSettingsProps> = ({
 
   return (
     <Stack gap="md">
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
+
       <Checkbox
         label={t('merge.removeDigitalSignature', 'Remove digital signature in the merged file?')}
         checked={parameters.removeDigitalSignature}

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

@@ -1,7 +1,8 @@
-import { Divider, Select, Stack, Switch, SegmentedControl, Text } from '@mantine/core';
+import { Divider, Select, Stack, Switch } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { PageLayoutParameters } from '../../../hooks/tools/pageLayout/usePageLayoutParameters';
 import { getPagesPerSheetOptions } from './constants';
+import ProcessingModeToggle from '../../shared/ProcessingModeToggle';
 
 export default function PageLayoutSettings({
   parameters,
@@ -22,26 +23,11 @@ export default function PageLayoutSettings({
 
   return (
     <Stack gap="sm">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('pageLayout.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as PageLayoutParameters['processingMode'])}
-          data={[
-            { label: t('pageLayout.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('pageLayout.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('pageLayout.processingMode.frontendDescription', 'Lay out pages directly in your browser for quick previews.')
-            : t('pageLayout.processingMode.backendDescription', 'Use the server for large documents or advanced layouts.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       <Select
         label={t('pageLayout.pagesPerSheet', 'Pages per sheet:')}

frontend/src/components/tools/removePages/RemovePagesSettings.tsx

@@ -1,7 +1,8 @@
-import { Stack, TextInput, SegmentedControl, Text } from "@mantine/core";
+import { Stack, TextInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { RemovePagesParameters } from "../../../hooks/tools/removePages/useRemovePagesParameters";
 import { validatePageNumbers } from "../../../utils/pageSelection";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface RemovePagesSettingsProps {
   parameters: RemovePagesParameters;
@@ -23,23 +24,11 @@ const RemovePagesSettings = ({ parameters, onParameterChange, disabled = false }
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('removePages.processingMode.label', 'Processing mode')}</Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as 'backend' | 'frontend')}
-          data={[
-            { label: t('removePages.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('removePages.processingMode.frontend', 'Browser'), value: 'frontend' },
-          ]}
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('removePages.processingMode.frontendDescription', 'Remove the selected pages locally in your browser.')
-            : t('removePages.processingMode.backendDescription', 'Use the server to remove pages (required for complex formulas).')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
       <TextInput
         label={t('removePages.pageNumbers.label', 'Pages to Remove')}
         value={parameters.pageNumbers || ''}

frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx

@@ -1,7 +1,8 @@
-import { Divider, Select, Stack, TextInput, SegmentedControl, Text } from '@mantine/core';
+import { Divider, Select, Stack, TextInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ReorganizePagesParameters } from '../../../hooks/tools/reorganizePages/useReorganizePagesParameters';
 import { getReorganizePagesModeData } from './constants';
+import ProcessingModeToggle from '../../shared/ProcessingModeToggle';
 
 export default function ReorganizePagesSettings({
   parameters,
@@ -22,26 +23,11 @@ export default function ReorganizePagesSettings({
   const selectedMode = modeData.find(mode => mode.value === parameters.customMode) || modeData[0];
   return (
     <Stack gap="sm">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('reorganizePages.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as ReorganizePagesParameters['processingMode'])}
-          data={[
-            { label: t('reorganizePages.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('reorganizePages.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('reorganizePages.processingMode.frontendDescription', 'Reorder or transform pages locally for supported modes.')
-            : t('reorganizePages.processingMode.backendDescription', 'Use the server for advanced or scripted page arrangements.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       <Select
         label={t('pdfOrganiser.mode._value', 'Organization mode')}

frontend/src/components/tools/rotate/RotateSettings.tsx

@@ -1,11 +1,12 @@
 import { useMemo, useState, useEffect } from "react";
-import { Stack, Text, Box, ActionIcon, Group, Center, SegmentedControl } from "@mantine/core";
+import { Stack, Text, Box, ActionIcon, Group, Center } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import RotateLeftIcon from "@mui/icons-material/RotateLeft";
 import RotateRightIcon from "@mui/icons-material/RotateRight";
 import { RotateParametersHook } from "../../../hooks/tools/rotate/useRotateParameters";
 import { useSelectedFiles } from "../../../contexts/file/fileHooks";
 import DocumentThumbnail from "../../shared/filePreview/DocumentThumbnail";
+import ProcessingModeToggle from "../../shared/ProcessingModeToggle";
 
 interface RotateSettingsProps {
   parameters: RotateParametersHook;
@@ -33,26 +34,11 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t("rotate.processingMode.label", "Processing mode")}
-        </Text>
-        <SegmentedControl
-          value={parameters.parameters.processingMode}
-          onChange={(value) => parameters.updateParameter('processingMode', value as 'backend' | 'frontend')}
-          data={[
-            { label: t('rotate.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('rotate.processingMode.frontend', 'Browser'), value: 'frontend' },
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.parameters.processingMode === 'frontend'
-            ? t('rotate.processingMode.frontendDescription', 'Process the rotation directly in your browser without uploading files.')
-            : t('rotate.processingMode.backendDescription', 'Use the server to perform the rotation (recommended for large files).')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.parameters.processingMode}
+        onChange={(mode) => parameters.updateParameter('processingMode', mode)}
+        disabled={disabled}
+      />
 
       {/* Thumbnail Preview Section */}
       <Stack gap="xs">

frontend/src/components/tools/singleLargePage/SingleLargePageSettings.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { SegmentedControl, Stack, Text } from '@mantine/core';
+import { Stack, Text } from '@mantine/core';
 import { SingleLargePageParameters } from '../../../hooks/tools/singleLargePage/useSingleLargePageParameters';
+import ProcessingModeToggle from '../../shared/ProcessingModeToggle';
 
 interface SingleLargePageSettingsProps {
   parameters: SingleLargePageParameters;
@@ -14,26 +15,11 @@ const SingleLargePageSettings: React.FC<SingleLargePageSettingsProps> = ({ param
 
   return (
     <Stack gap="sm">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('pdfToSinglePage.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as SingleLargePageParameters['processingMode'])}
-          data={[
-            { label: t('pdfToSinglePage.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('pdfToSinglePage.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('pdfToSinglePage.processingMode.frontendDescription', 'Merge pages locally without uploading the document.')
-            : t('pdfToSinglePage.processingMode.backendDescription', 'Use the server for extremely large PDFs or scripted workflows.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       <Text size="sm" c="dimmed">
         {t('pdfToSinglePage.description', 'This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.')}

frontend/src/components/tools/split/SplitSettings.tsx

@@ -1,8 +1,9 @@
-import { Stack, TextInput, Checkbox, Anchor, Text, SegmentedControl } from '@mantine/core';
+import { Stack, TextInput, Checkbox, Anchor, Text } from '@mantine/core';
 import LocalIcon from '../../shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { SPLIT_METHODS } from '../../../constants/splitConstants';
 import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters';
+import ProcessingModeToggle from '../../shared/ProcessingModeToggle';
 
 export interface SplitSettingsProps {
   parameters: SplitParameters;
@@ -148,26 +149,11 @@ const SplitSettings = ({
 
   return (
     <Stack gap="md">
-      <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t('split.processingMode.label', 'Processing mode')}
-        </Text>
-        <SegmentedControl
-          value={parameters.processingMode}
-          onChange={(value) => onParameterChange('processingMode', value as SplitParameters['processingMode'])}
-          data={[
-            { label: t('split.processingMode.backend', 'Backend'), value: 'backend' },
-            { label: t('split.processingMode.frontend', 'Browser'), value: 'frontend' }
-          ]}
-          fullWidth
-          disabled={disabled}
-        />
-        <Text size="xs" c="dimmed">
-          {parameters.processingMode === 'frontend'
-            ? t('split.processingMode.frontendDescription', 'Split the selected ranges without uploading your PDF (page list only).')
-            : t('split.processingMode.backendDescription', 'Use the server for advanced split modes and very large files.')}
-        </Text>
-      </Stack>
+      <ProcessingModeToggle
+        value={parameters.processingMode}
+        onChange={(mode) => onParameterChange('processingMode', mode)}
+        disabled={disabled}
+      />
 
       {/* Method-Specific Form */}
       {parameters.method === SPLIT_METHODS.BY_PAGES && renderByPagesForm()}