Seperate out components

frontend/src/components/tools/convert/ConvertFromImageSettings.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Stack, Text, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { COLOR_TYPES } from "../../../constants/convertConstants";
+import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
+
+interface ConvertFromImageSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: (key: keyof ConvertParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const ConvertFromImageSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertFromImageSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm">
+      <Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
+      <Select
+        label={t("convert.colorType", "Color Type")}
+        value={parameters.imageOptions.colorType}
+        onChange={(val) => val && onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
+        })}
+        data={[
+          { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
+          { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
+          { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
+        ]}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ConvertFromImageSettings;

frontend/src/components/tools/convert/ConvertSettings.tsx

@@ -1,15 +1,17 @@
 import React, { useMemo } from "react";
-import { Stack, Text, Select, NumberInput, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";
 import { useMultipleEndpointsEnabled } from "../../../hooks/useEndpointConfig";
 import GroupedFormatDropdown from "./GroupedFormatDropdown";
+import ConvertToImageSettings from "./ConvertToImageSettings";
+import ConvertFromImageSettings from "./ConvertFromImageSettings";
 import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
 import { 
   FROM_FORMAT_OPTIONS,
+  EXTENSION_TO_ENDPOINT,
   COLOR_TYPES,
-  OUTPUT_OPTIONS,
+  OUTPUT_OPTIONS
-  EXTENSION_TO_ENDPOINT
 } from "../../../constants/convertConstants";
 
 interface ConvertSettingsProps {
@@ -150,50 +152,11 @@ const ConvertSettings = ({
       {['png', 'jpg'].includes(parameters.toExtension) && (
         <>
           <Divider />
-          <Stack gap="sm">
+          <ConvertToImageSettings
-            <Text size="sm" fw={500}>{t("convert.imageOptions", "Image Options")}:</Text>
+            parameters={parameters}
-            <Group grow>
+            onParameterChange={onParameterChange}
-              <Select
+            disabled={disabled}
-                label={t("convert.colorType", "Color Type")}
+          />
-                value={parameters.imageOptions.colorType}
-                onChange={(val) => val && onParameterChange('imageOptions', {
-                  ...parameters.imageOptions,
-                  colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
-                })}
-                data={[
-                  { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
-                  { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
-                  { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
-                ]}
-                disabled={disabled}
-              />
-              <NumberInput
-                label={t("convert.dpi", "DPI")}
-                value={parameters.imageOptions.dpi}
-                onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
-                  ...parameters.imageOptions,
-                  dpi: val
-                })}
-                min={72}
-                max={600}
-                step={1}
-                disabled={disabled}
-              />
-            </Group>
-            <Select
-              label={t("convert.output", "Output")}
-              value={parameters.imageOptions.singleOrMultiple}
-              onChange={(val) => val && onParameterChange('imageOptions', {
-                ...parameters.imageOptions,
-                singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
-              })}
-              data={[
-                { value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
-                { value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
-              ]}
-              disabled={disabled}
-            />
-          </Stack>
         </>
       )}
 
@@ -202,23 +165,11 @@ const ConvertSettings = ({
       {['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'].includes(parameters.fromExtension) && parameters.toExtension === 'pdf' && (
         <>
           <Divider />
-          <Stack gap="sm">
+          <ConvertFromImageSettings
-            <Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
+            parameters={parameters}
-            <Select
+            onParameterChange={onParameterChange}
-              label={t("convert.colorType", "Color Type")}
+            disabled={disabled}
-              value={parameters.imageOptions.colorType}
+          />
-              onChange={(val) => val && onParameterChange('imageOptions', {
-                ...parameters.imageOptions,
-                colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
-              })}
-              data={[
-                { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
-                { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
-                { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
-              ]}
-              disabled={disabled}
-            />
-          </Stack>
         </>
       )}
     </Stack>

frontend/src/components/tools/convert/ConvertToImageSettings.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { COLOR_TYPES, OUTPUT_OPTIONS } from "../../../constants/convertConstants";
+import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
+
+interface ConvertToImageSettingsProps {
+  parameters: ConvertParameters;
+  onParameterChange: (key: keyof ConvertParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const ConvertToImageSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ConvertToImageSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="sm">
+      <Text size="sm" fw={500}>{t("convert.imageOptions", "Image Options")}:</Text>
+      <Group grow>
+        <Select
+          label={t("convert.colorType", "Color Type")}
+          value={parameters.imageOptions.colorType}
+          onChange={(val) => val && onParameterChange('imageOptions', {
+            ...parameters.imageOptions,
+            colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
+          })}
+          data={[
+            { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
+            { value: COLOR_TYPES.GREYSCALE, label: t("convert.greyscale", "Greyscale") },
+            { value: COLOR_TYPES.BLACK_WHITE, label: t("convert.blackwhite", "Black & White") },
+          ]}
+          disabled={disabled}
+        />
+        <NumberInput
+          label={t("convert.dpi", "DPI")}
+          value={parameters.imageOptions.dpi}
+          onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
+            ...parameters.imageOptions,
+            dpi: val
+          })}
+          min={72}
+          max={600}
+          step={1}
+          disabled={disabled}
+        />
+      </Group>
+      <Select
+        label={t("convert.output", "Output")}
+        value={parameters.imageOptions.singleOrMultiple}
+        onChange={(val) => val && onParameterChange('imageOptions', {
+          ...parameters.imageOptions,
+          singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
+        })}
+        data={[
+          { value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
+          { value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
+        ]}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ConvertToImageSettings;