Extract "image processing" components

src/features/settings/ImageProcessing.utils.ts

@@ -0,0 +1,201 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { d } from 'koration';
+import {
+    ImageProcessingTargetMode,
+    TSettingsDownloadConversion,
+    TSettingsDownloadConversionHeader,
+} from '@/features/settings/Settings.types.ts';
+import {
+    DEFAULT_MIME_TYPE,
+    IMAGE_PROCESSING_CALL_TIMEOUT,
+    IMAGE_PROCESSING_COMPRESSION,
+    IMAGE_PROCESSING_CONNECT_TIMEOUT,
+    MIME_TYPE_PREFIX,
+} from '@/features/settings/Settings.constants.ts';
+import {
+    SettingsDownloadConversion,
+    SettingsDownloadConversionHeader,
+    SettingsDownloadConversionType,
+} from '@/lib/graphql/generated/graphql.ts';
+
+let COUNTER = 0;
+
+const normalizeMimeType = (mimeType: string): string => mimeType.replace(MIME_TYPE_PREFIX, '');
+
+export const isDefaultMimeType = (mimeType: string): boolean =>
+    normalizeMimeType(mimeType.toLowerCase().trim()) === DEFAULT_MIME_TYPE;
+
+export const isDuplicateHeader = (
+    header: string,
+    index: number,
+    headers: SettingsDownloadConversionType['headers'],
+): boolean => headers?.slice(0, index).some(({ name }) => name === header) ?? false;
+
+const hasDuplicateHeaders = (headers: SettingsDownloadConversionType['headers']): boolean =>
+    headers?.some((header, index) => isDuplicateHeader(header.name, index, headers)) ?? false;
+
+export const isDuplicateConversion = (
+    mimeType: string,
+    index: number,
+    conversions: SettingsDownloadConversion[],
+): boolean => conversions.slice(0, index).some((conversion) => conversion.mimeType === mimeType);
+
+export const isUrlTargetMode = (target: string): boolean => target !== '' && !!target.match(/^https?:\/\/.+/);
+
+const isValidNumberSetting = (value: number | null | undefined, min: number, max: number): boolean =>
+    value == null || (value >= min && value <= max);
+
+export const isValidCallTimeoutSetting = (timeout: string | null | undefined): boolean =>
+    isValidNumberSetting(
+        timeout ? d(timeout).seconds.inWholeSeconds : null,
+        IMAGE_PROCESSING_CALL_TIMEOUT.min,
+        IMAGE_PROCESSING_CALL_TIMEOUT.max,
+    );
+
+export const isValidConnectTimeoutSetting = (timeout: string | null | undefined): boolean =>
+    isValidNumberSetting(
+        timeout ? d(timeout).seconds.inWholeSeconds : null,
+        IMAGE_PROCESSING_CONNECT_TIMEOUT.min,
+        IMAGE_PROCESSING_CONNECT_TIMEOUT.max,
+    );
+
+export const isValidCompressionLevel = (compression: number | null | undefined): boolean =>
+    isValidNumberSetting(compression, IMAGE_PROCESSING_COMPRESSION.min, IMAGE_PROCESSING_COMPRESSION.max);
+
+const isUnsetConversion = (mimeType: string, target: string): boolean => mimeType === '' && target === '';
+
+const isInvalidTarget = (target: string, mode: ImageProcessingTargetMode, mimeType: string): boolean => {
+    if (isDefaultMimeType(mimeType) && !target) {
+        return false;
+    }
+
+    return mode === ImageProcessingTargetMode.URL && !isUrlTargetMode(target);
+};
+
+export const containsInvalidConversion = (conversions: TSettingsDownloadConversion[]): boolean =>
+    conversions.some(
+        ({ mimeType, compressionLevel, target, callTimeout, connectTimeout, headers, mode }, index) =>
+            isUnsetConversion(mimeType, target) ||
+            isInvalidTarget(target, mode, mimeType) ||
+            !isValidCompressionLevel(compressionLevel) ||
+            !isValidCallTimeoutSetting(callTimeout) ||
+            !isValidConnectTimeoutSetting(connectTimeout) ||
+            isDuplicateConversion(mimeType, index, conversions) ||
+            hasDuplicateHeaders(headers),
+    );
+
+export const getTargetMode = (target: string): ImageProcessingTargetMode => {
+    if (isUrlTargetMode(target)) {
+        return ImageProcessingTargetMode.URL;
+    }
+
+    return ImageProcessingTargetMode.IMAGE;
+};
+
+export const addStableIdToHeaders = (
+    headers: (SettingsDownloadConversionHeader | TSettingsDownloadConversionHeader)[],
+): TSettingsDownloadConversionHeader[] =>
+    headers.map((header) => ({
+        // eslint-disable-next-line no-plusplus
+        id: (header as TSettingsDownloadConversionHeader).id ?? COUNTER++,
+        ...header,
+    }));
+
+export const addStableIdToConversions = (
+    conversions: (SettingsDownloadConversion | TSettingsDownloadConversion)[],
+): TSettingsDownloadConversion[] =>
+    conversions.map((conversion) => ({
+        // eslint-disable-next-line no-plusplus
+        id: (conversion as TSettingsDownloadConversion).id ?? COUNTER++,
+        ...conversion,
+        mode: getTargetMode(conversion.target),
+        headers: conversion.headers ? addStableIdToHeaders(conversion.headers) : null,
+    }));
+
+export const normalizeConversions = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] =>
+    conversions.map((conversion) => ({
+        ...conversion,
+        mimeType: normalizeMimeType(conversion.mimeType),
+        target: normalizeMimeType(conversion.target),
+    }));
+
+const toValidServerMimeType = (mimeType: string): string => {
+    if (isDefaultMimeType(mimeType)) {
+        return DEFAULT_MIME_TYPE;
+    }
+
+    return `${MIME_TYPE_PREFIX}${mimeType}`;
+};
+
+export const toValidServerConversions = (conversions: TSettingsDownloadConversion[]): SettingsDownloadConversion[] =>
+    conversions
+        .filter(({ mimeType, target }) => !!mimeType && !!target)
+        .map(({ id, mode, ...conversion }) => ({
+            ...conversion,
+            mimeType: toValidServerMimeType(conversion.mimeType),
+            target: isUrlTargetMode(conversion.target) ? conversion.target : `${MIME_TYPE_PREFIX}${conversion.target}`,
+            headers: conversion.headers?.map(({ id: headerId, ...header }) => header) ?? null,
+        }));
+
+export const maybeAddDefault = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] => {
+    const isDefaultDefined = conversions.some(({ mimeType }) => isDefaultMimeType(mimeType));
+
+    return [
+        ...(isDefaultDefined
+            ? []
+            : [
+                  {
+                      id: -1,
+                      mode: ImageProcessingTargetMode.IMAGE,
+                      mimeType: DEFAULT_MIME_TYPE,
+                      target: '',
+                      compressionLevel: null,
+                      headers: null,
+                      callTimeout: null,
+                      connectTimeout: null,
+                  },
+              ]),
+        ...conversions,
+    ];
+};
+
+const normalizeHeaders = (
+    headers: SettingsDownloadConversionType['headers'],
+): SettingsDownloadConversionType['headers'] => headers?.filter(({ name }) => name !== '');
+
+export const didUpdateConversions = (
+    conversions: TSettingsDownloadConversion[],
+    tmpConversions: TSettingsDownloadConversion[],
+): boolean => {
+    if (conversions.length !== tmpConversions.length) {
+        return true;
+    }
+
+    return conversions.some(({ mimeType, target, compressionLevel, callTimeout, connectTimeout, headers }, index) => {
+        const tmpConversion = tmpConversions[index];
+
+        const orgHeaders = normalizeHeaders(headers);
+        const tmpHeaders = normalizeHeaders(tmpConversion.headers);
+
+        return (
+            normalizeMimeType(mimeType) !== tmpConversion.mimeType ||
+            normalizeMimeType(target) !== tmpConversion.target ||
+            compressionLevel !== tmpConversion.compressionLevel ||
+            callTimeout !== tmpConversion.callTimeout ||
+            connectTimeout !== tmpConversion.connectTimeout ||
+            (orgHeaders?.length ?? 0) !== (tmpHeaders?.length ?? 0) ||
+            !!orgHeaders?.some(
+                (header, headerIndex) =>
+                    header.name !== tmpHeaders?.[headerIndex]?.name ||
+                    header.value !== tmpHeaders?.[headerIndex]?.value,
+            )
+        );
+    });
+};

src/features/settings/Settings.constants.ts

@@ -9,7 +9,11 @@
 import { d } from 'koration';
 import { DEFAULT_DEVICE } from '@/features/device/services/Device.ts';
 import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.ts';
-import { GlobalUpdateSkipEntriesSettings, MetadataServerSettings } from '@/features/settings/Settings.types.ts';
+import {
+    GlobalUpdateSkipEntriesSettings,
+    ImageProcessingTargetMode,
+    MetadataServerSettings,
+} from '@/features/settings/Settings.types.ts';
 import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
 import { getDefaultLanguages } from '@/base/utils/Languages.ts';
 import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
@@ -272,3 +276,23 @@ export const IMAGE_PROCESSING_CONNECT_TIMEOUT = {
     max: d(10).minutes.inWholeSeconds,
     step: d(10).seconds.inWholeSeconds,
 };
+
+const IMAGE_PROCESSING_TARGET_MODES = Object.values(ImageProcessingTargetMode);
+const IMAGE_PROCESSING_TARGET_MODES_TO_TRANSLATION_KEY: {
+    [flavor in ImageProcessingTargetMode]: SelectSettingValueDisplayInfo;
+} = {
+    [ImageProcessingTargetMode.IMAGE]: {
+        text: 'download.settings.conversion.target_modes.image.title',
+        description: 'download.settings.conversion.target_modes.image.description',
+    },
+    [ImageProcessingTargetMode.URL]: {
+        text: 'download.settings.conversion.target_modes.url.title',
+        description: 'download.settings.conversion.target_modes.image.description',
+    },
+};
+export const IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES: SelectSettingValue<ImageProcessingTargetMode>[] =
+    IMAGE_PROCESSING_TARGET_MODES.map((mode) => [mode, IMAGE_PROCESSING_TARGET_MODES_TO_TRANSLATION_KEY[mode]]);
+
+export const IMAGE_PROCESSING_INPUT_WIDTH = 250;
+export const DEFAULT_MIME_TYPE = 'default';
+export const MIME_TYPE_PREFIX = 'image/';

src/features/settings/Settings.types.ts

@@ -14,7 +14,12 @@ import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
 import { MetadataTrackingSettings } from '@/features/tracker/Tracker.types.ts';
 import { MetadataUpdateSettings } from '@/features/app-updates/AppUpdateChecker.types.ts';
 import { MetadataThemeSettings } from '@/features/theme/AppTheme.types.ts';
-import { GetServerSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
+import {
+    GetServerSettingsQuery,
+    Maybe,
+    SettingsDownloadConversion,
+    SettingsDownloadConversionHeader,
+} from '@/lib/graphql/generated/graphql.ts';
 import { MetadataHistorySettings } from '@/features/history/History.types.ts';
 
 export type MetadataServerSettingKeys = keyof MetadataServerSettings;
@@ -53,3 +58,24 @@ export type GlobalUpdateSkipEntriesSettings = Pick<
 >;
 
 export type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
+
+export enum ImageProcessingTargetMode {
+    IMAGE = 'image',
+    URL = 'url',
+}
+
+export type TSettingsDownloadConversionHeader = SettingsDownloadConversionHeader & {
+    /**
+     * The conversion object does not have a stable key, which causes issues when editing the settings
+     */
+    id: number;
+};
+
+export type TSettingsDownloadConversion = Omit<SettingsDownloadConversion, 'headers'> & {
+    /**
+     * The conversion object does not have a stable key, which causes issues when editing the settings
+     */
+    id: number;
+    mode: ImageProcessingTargetMode;
+    headers?: Maybe<TSettingsDownloadConversionHeader[]>;
+};

src/features/settings/components/images/Header.tsx

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+import { IMAGE_PROCESSING_INPUT_WIDTH } from '@/features/settings/Settings.constants.ts';
+import { TSettingsDownloadConversionHeader } from '@/features/settings/Settings.types';
+
+export const Header = ({
+    id,
+    name,
+    value,
+    onChange,
+    isDuplicate,
+}: {
+    isDuplicate: boolean;
+    onChange: (header: TSettingsDownloadConversionHeader | null) => void;
+} & TSettingsDownloadConversionHeader) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+
+    return (
+        <Stack
+            sx={{
+                gap: 1,
+                flexDirection: 'row',
+                flexWrap: 'nowrap',
+                alignItems: 'center',
+            }}
+        >
+            <Stack
+                sx={{
+                    flexDirection: 'row',
+                    gap: 2,
+                    [theme.breakpoints.down('md')]: {
+                        flexDirection: 'column',
+                        width: '100%',
+                    },
+                }}
+            >
+                <TextField
+                    autoFocus
+                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+                    label={t('download.settings.conversion.headers.name')}
+                    value={name}
+                    error={isDuplicate}
+                    helperText={isDuplicate && t('global.error.label.invalid_input')}
+                    onChange={(e) =>
+                        onChange({
+                            id,
+                            name: e.target.value,
+                            value,
+                        })
+                    }
+                />
+                <TextField
+                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+                    label={t('download.settings.conversion.headers.value')}
+                    value={value}
+                    onChange={(e) =>
+                        onChange({
+                            id,
+                            name,
+                            value: e.target.value,
+                        })
+                    }
+                />
+            </Stack>
+            <CustomTooltip disabled={false} title={t('chapter.action.download.delete.label.action')}>
+                <IconButton
+                    onClick={() => {
+                        onChange(null);
+                    }}
+                >
+                    <DeleteIcon />
+                </IconButton>
+            </CustomTooltip>
+        </Stack>
+    );
+};

src/features/settings/components/images/Headers.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import { Maybe } from '@/lib/graphql/generated/graphql.ts';
+import { addStableIdToHeaders, isDuplicateHeader } from '@/features/settings/ImageProcessing.utils.ts';
+import { Header } from '@/features/settings/components/images/Header.tsx';
+import { TSettingsDownloadConversionHeader } from '@/features/settings/Settings.types.ts';
+
+export const Headers = ({
+    open,
+    headers,
+    onChange,
+}: {
+    open: boolean;
+    headers: Maybe<TSettingsDownloadConversionHeader[] | undefined>;
+    onChange: (headers: Maybe<TSettingsDownloadConversionHeader[]>) => void;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <Collapse in={open}>
+            <Stack sx={{ justifyContent: 'start', gap: 2 }}>
+                <Typography>{t('download.settings.conversion.headers.title')}</Typography>
+                {headers?.map((header, index) => (
+                    <Header
+                        key={header.id}
+                        {...header}
+                        isDuplicate={isDuplicateHeader(header.name, index, headers)}
+                        onChange={(updatedHeader) => {
+                            const isDeletion = updatedHeader == null;
+                            if (isDeletion) {
+                                onChange(headers?.toSpliced(index, 1));
+                                return;
+                            }
+
+                            onChange((headers ?? []).toSpliced(index, 1, updatedHeader));
+                        }}
+                    />
+                ))}
+                <Button
+                    onClick={() => onChange([...(headers ?? []), ...addStableIdToHeaders([{ name: '', value: '' }])])}
+                    variant="contained"
+                    sx={{ width: 'fit-content' }}
+                >
+                    {t('global.button.add')}
+                </Button>
+            </Stack>
+        </Collapse>
+    );
+};

src/features/settings/components/images/MimeTypeTextField.tsx

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import { ImageProcessingTargetMode } from '@/features/settings/Settings.types.ts';
+import { IMAGE_PROCESSING_INPUT_WIDTH, MIME_TYPE_PREFIX } from '@/features/settings/Settings.constants.ts';
+
+export const MimeTypeTextField = ({
+    shouldAutoFocus,
+    isDefault,
+    isDuplicate,
+    label,
+    value,
+    onUpdate,
+    mode,
+}: {
+    shouldAutoFocus: boolean;
+    isDefault: boolean;
+    isDuplicate: boolean;
+    label: string;
+    value: string;
+    onUpdate: (value: string) => void;
+    mode: ImageProcessingTargetMode;
+}) => {
+    const { t } = useTranslation();
+
+    const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
+    const isValidUrl = !value.length || value.match(/^https?:\/\//);
+    const isValid = !isDuplicate && (isImageMode || isValidUrl);
+
+    return (
+        <TextField
+            sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+            autoFocus={shouldAutoFocus}
+            label={label}
+            value={value}
+            disabled={isDefault}
+            error={!isValid}
+            helperText={!isValid && t('global.error.label.invalid_input')}
+            slotProps={{
+                input: {
+                    startAdornment: (
+                        <InputAdornment position="start">{isImageMode ? MIME_TYPE_PREFIX : null}</InputAdornment>
+                    ),
+                },
+            }}
+            onChange={(e) => onUpdate(e.target.value.trim())}
+        />
+    );
+};

src/features/settings/components/images/Processing.tsx

@@ -0,0 +1,254 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { d } from 'koration';
+import { useElementSize } from '@mantine/hooks';
+import { Headers } from '@/features/settings/components/images/Headers.tsx';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+import { TranslationKey } from '@/base/Base.types.ts';
+import {
+    IMAGE_PROCESSING_CALL_TIMEOUT,
+    IMAGE_PROCESSING_COMPRESSION,
+    IMAGE_PROCESSING_CONNECT_TIMEOUT,
+    IMAGE_PROCESSING_INPUT_WIDTH,
+    IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES,
+} from '@/features/settings/Settings.constants.ts';
+import { Select } from '@/base/components/inputs/Select.tsx';
+import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
+import { MimeTypeTextField } from '@/features/settings/components/images/MimeTypeTextField.tsx';
+import { ImageProcessingTargetMode, TSettingsDownloadConversion } from '@/features/settings/Settings.types.ts';
+import {
+    isDefaultMimeType,
+    isValidCallTimeoutSetting,
+    isValidCompressionLevel,
+    isValidConnectTimeoutSetting,
+} from '@/features/settings/ImageProcessing.utils.ts';
+
+export const Processing = ({
+    conversion,
+    conversion: { mode, mimeType, target, compressionLevel, headers, callTimeout, connectTimeout },
+    onChange,
+    isDuplicate,
+}: {
+    conversion: TSettingsDownloadConversion;
+    onChange: (newConversion: TSettingsDownloadConversion | null) => void;
+    isDuplicate: boolean;
+}) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+
+    const { ref: textFieldRef, height: textFieldHeight } = useElementSize();
+
+    const [areHeadersCollapsed, setAreHeadersCollapsed] = useState(true);
+
+    const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
+
+    const isCallTimeoutValid = isValidCallTimeoutSetting(callTimeout);
+    const isConnectTimeoutValid = isValidConnectTimeoutSetting(connectTimeout);
+    const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
+    const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
+    const isDisabled = isDefault && !target && compressionLevel == null;
+
+    return (
+        <Stack sx={{ gap: 2 }}>
+            <Stack
+                sx={{
+                    gap: 1,
+                    flexDirection: 'row',
+                    flexWrap: 'nowrap',
+                    alignItems: 'center',
+                    pt: 1,
+                }}
+            >
+                <Stack
+                    sx={{
+                        gap: 1,
+                        flexDirection: 'row',
+                        alignItems: 'baseline',
+                        flexWrap: 'wrap',
+                        [theme.breakpoints.down('md')]: {
+                            flexDirection: 'column',
+                            width: '100%',
+                        },
+                    }}
+                >
+                    <MimeTypeTextField
+                        mode={ImageProcessingTargetMode.IMAGE}
+                        shouldAutoFocus
+                        isDefault={isDefault}
+                        isDuplicate={isDuplicate}
+                        label={t('download.settings.conversion.mime_type')}
+                        value={mimeType}
+                        onUpdate={(value) => {
+                            onChange({
+                                ...conversion,
+                                mimeType: value,
+                            });
+                        }}
+                    />
+                    <TypographyMaxLines sx={{ mx: 1 }}>→</TypographyMaxLines>
+                    <FormControl sx={{ minWidth: '100px' }}>
+                        <InputLabel id="image-conversion-target-mode-label">
+                            {t('download.settings.conversion.target_modes.title')}
+                        </InputLabel>
+                        <Select
+                            ref={textFieldRef}
+                            id="image-conversion-target-mode"
+                            labelId="image-conversion-target-mode-label"
+                            label={t('download.settings.conversion.target_modes.title')}
+                            value={mode}
+                            onChange={(e) =>
+                                onChange({
+                                    ...conversion,
+                                    mode: e.target.value,
+                                })
+                            }
+                        >
+                            {IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES.map(([selectValue, { text: selectText }]) => (
+                                <MenuItem key={selectValue} value={selectValue}>
+                                    {t(selectText as TranslationKey)}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                    <MimeTypeTextField
+                        mode={mode}
+                        shouldAutoFocus={false}
+                        isDefault={false}
+                        isDuplicate={false}
+                        label={t('download.settings.conversion.target')}
+                        value={target}
+                        onUpdate={(value) =>
+                            onChange({
+                                ...conversion,
+                                target: value,
+                            })
+                        }
+                    />
+                    {isImageMode ? (
+                        <TextField
+                            sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+                            label={t('download.settings.conversion.compression_level')}
+                            value={compressionLevel ?? ''}
+                            type="number"
+                            error={!isCompressionLevelValid}
+                            helperText={!isCompressionLevelValid ? t('global.error.label.invalid_input') : ''}
+                            slotProps={{
+                                input: {
+                                    inputProps: IMAGE_PROCESSING_COMPRESSION,
+                                },
+                            }}
+                            onChange={(e) => {
+                                onChange({
+                                    ...conversion,
+                                    compressionLevel: e.target.value ? Number(e.target.value) : null,
+                                });
+                            }}
+                        />
+                    ) : (
+                        <>
+                            <TextField
+                                sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+                                label={t('download.settings.conversion.call_timeout')}
+                                value={callTimeout ? d(callTimeout).seconds.inWholeSeconds : ''}
+                                type="number"
+                                error={!isCallTimeoutValid}
+                                helperText={!isCallTimeoutValid ? t('global.error.label.invalid_input') : ''}
+                                slotProps={{
+                                    input: {
+                                        inputProps: IMAGE_PROCESSING_CALL_TIMEOUT,
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                {t('global.date.label.second_other')}
+                                            </InputAdornment>
+                                        ),
+                                    },
+                                }}
+                                onChange={(e) => {
+                                    onChange({
+                                        ...conversion,
+                                        callTimeout: e.target.value
+                                            ? d(Number(e.target.value)).seconds.toISOString()
+                                            : null,
+                                    });
+                                }}
+                            />
+                            <TextField
+                                sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
+                                label={t('download.settings.conversion.connect_timeout')}
+                                value={connectTimeout ? d(connectTimeout).seconds.inWholeSeconds : ''}
+                                type="number"
+                                error={!isConnectTimeoutValid}
+                                helperText={!isConnectTimeoutValid ? t('global.error.label.invalid_input') : ''}
+                                slotProps={{
+                                    input: {
+                                        inputProps: IMAGE_PROCESSING_CONNECT_TIMEOUT,
+                                        endAdornment: (
+                                            <InputAdornment position="end">
+                                                {t('global.date.label.second_other')}
+                                            </InputAdornment>
+                                        ),
+                                    },
+                                }}
+                                onChange={(e) => {
+                                    onChange({
+                                        ...conversion,
+                                        connectTimeout: e.target.value
+                                            ? d(Number(e.target.value)).seconds.toISOString()
+                                            : null,
+                                    });
+                                }}
+                            />
+                            <Button
+                                onClick={() => setAreHeadersCollapsed(!areHeadersCollapsed)}
+                                variant={areHeadersCollapsed ? 'outlined' : 'contained'}
+                                sx={{ height: textFieldHeight }}
+                            >
+                                {t('download.settings.conversion.headers.button', {
+                                    count: headers?.length ?? 0,
+                                })}
+                            </Button>
+                        </>
+                    )}
+                </Stack>
+                <CustomTooltip disabled={isDisabled} title={t('chapter.action.download.delete.label.action')}>
+                    <IconButton
+                        disabled={isDisabled}
+                        onClick={() => {
+                            onChange(null);
+                        }}
+                    >
+                        <DeleteIcon />
+                    </IconButton>
+                </CustomTooltip>
+            </Stack>
+            <Headers
+                open={!areHeadersCollapsed}
+                headers={headers}
+                onChange={(updatedHeaders) =>
+                    onChange({
+                        ...conversion,
+                        headers: updatedHeaders,
+                    })
+                }
+            />
+        </Stack>
+    );
+};

src/features/settings/screens/ImageProcessingSetting.tsx

@@ -8,36 +8,9 @@
 
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
-import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
-import DeleteIcon from '@mui/icons-material/Delete';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
-import { useTheme } from '@mui/material/styles';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
-import { d } from 'koration';
-import Collapse from '@mui/material/Collapse';
-import { useElementSize } from '@mantine/hooks';
-import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
-import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import {
-    Maybe,
-    SettingsDownloadConversion,
-    SettingsDownloadConversionHeader,
-    SettingsDownloadConversionType,
-} from '@/lib/graphql/generated/graphql.ts';
-import { SelectSettingValue, SelectSettingValueDisplayInfo } from '@/base/components/settings/SelectSetting.tsx';
-import { Select } from '@/base/components/inputs/Select.tsx';
-import { TranslationKey } from '@/base/Base.types.ts';
-import {
-    IMAGE_PROCESSING_CALL_TIMEOUT,
-    IMAGE_PROCESSING_COMPRESSION,
-    IMAGE_PROCESSING_CONNECT_TIMEOUT,
-} from '@/features/settings/Settings.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ServerSettings } from '@/features/settings/Settings.types.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
@@ -47,589 +20,16 @@ import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewA
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
-
-export type TSettingsDownloadConversionHeader = SettingsDownloadConversionHeader & {
-    /**
-     * The conversion object does not have a stable key, which causes issues when editing the settings
-     */
-    id: number;
-};
-
-export type TSettingsDownloadConversion = Omit<SettingsDownloadConversion, 'headers'> & {
-    /**
-     * The conversion object does not have a stable key, which causes issues when editing the settings
-     */
-    id: number;
-    mode: TargetMode;
-    headers?: Maybe<TSettingsDownloadConversionHeader[]>;
-};
-
-let COUNTER = 0;
-
-const INPUT_WIDTH = 250;
-
-const DEFAULT_MIME_TYPE = 'default';
-const MIME_TYPE_PREFIX = 'image/';
-
-enum TargetMode {
-    IMAGE = 'image',
-    URL = 'url',
-}
-
-const TARGET_MODES = Object.values(TargetMode);
-const TARGET_MODES_TO_TRANSLATION_KEY: { [flavor in TargetMode]: SelectSettingValueDisplayInfo } = {
-    [TargetMode.IMAGE]: {
-        text: 'download.settings.conversion.target_modes.image.title',
-        description: 'download.settings.conversion.target_modes.image.description',
-    },
-    [TargetMode.URL]: {
-        text: 'download.settings.conversion.target_modes.url.title',
-        description: 'download.settings.conversion.target_modes.image.description',
-    },
-};
-export const TARGET_MODES_SELECT_VALUES: SelectSettingValue<TargetMode>[] = TARGET_MODES.map((mode) => [
-    mode,
-    TARGET_MODES_TO_TRANSLATION_KEY[mode],
-]);
-
-const normalizeMimeType = (mimeType: string): string => mimeType.replace(MIME_TYPE_PREFIX, '');
-
-const isDefaultMimeType = (mimeType: string): boolean =>
-    normalizeMimeType(mimeType.toLowerCase().trim()) === DEFAULT_MIME_TYPE;
-
-const isDuplicateHeader = (
-    header: string,
-    index: number,
-    headers: SettingsDownloadConversionType['headers'],
-): boolean => headers?.slice(0, index).some(({ name }) => name === header) ?? false;
-
-const hasDuplicateHeaders = (headers: SettingsDownloadConversionType['headers']): boolean =>
-    headers?.some((header, index) => isDuplicateHeader(header.name, index, headers)) ?? false;
-
-const isDuplicateConversion = (mimeType: string, index: number, conversions: SettingsDownloadConversion[]): boolean =>
-    conversions.slice(0, index).some((conversion) => conversion.mimeType === mimeType);
-
-export const isUrlTargetMode = (target: string): boolean => target !== '' && !!target.match(/^https?:\/\//);
-
-const isValidNumberSetting = (value: number | null | undefined, min: number, max: number): boolean =>
-    value == null || (value >= min && value <= max);
-
-const isValidCallTimeoutSetting = (timeout: string | null | undefined): boolean =>
-    isValidNumberSetting(
-        timeout ? d(timeout).seconds.inWholeSeconds : null,
-        IMAGE_PROCESSING_CALL_TIMEOUT.min,
-        IMAGE_PROCESSING_CALL_TIMEOUT.max,
-    );
-
-const isValidConnectTimeoutSetting = (timeout: string | null | undefined): boolean =>
-    isValidNumberSetting(
-        timeout ? d(timeout).seconds.inWholeSeconds : null,
-        IMAGE_PROCESSING_CONNECT_TIMEOUT.min,
-        IMAGE_PROCESSING_CONNECT_TIMEOUT.max,
-    );
-
-const isValidCompressionLevel = (compression: number | null | undefined): boolean =>
-    isValidNumberSetting(compression, IMAGE_PROCESSING_COMPRESSION.min, IMAGE_PROCESSING_COMPRESSION.max);
-
-const isUnsetConversion = (mimeType: string, target: string): boolean => mimeType === '' && target === '';
-
-const isInvalidTarget = (target: string, mode: TargetMode, mimeType: string): boolean => {
-    if (isDefaultMimeType(mimeType) && !target) {
-        return false;
-    }
-
-    return mode === TargetMode.URL && !isUrlTargetMode(target);
-};
-
-const containsInvalidConversion = (conversions: TSettingsDownloadConversion[]): boolean =>
-    conversions.some(
-        ({ mimeType, compressionLevel, target, callTimeout, connectTimeout, headers, mode }, index) =>
-            isUnsetConversion(mimeType, target) ||
-            isInvalidTarget(target, mode, mimeType) ||
-            !isValidCompressionLevel(compressionLevel) ||
-            !isValidCallTimeoutSetting(callTimeout) ||
-            !isValidConnectTimeoutSetting(connectTimeout) ||
-            isDuplicateConversion(mimeType, index, conversions) ||
-            hasDuplicateHeaders(headers),
-    );
-
-const getTargetMode = (target: string): TargetMode => {
-    if (isUrlTargetMode(target)) {
-        return TargetMode.URL;
-    }
-
-    return TargetMode.IMAGE;
-};
-
-export const addStableIdToHeaders = (
-    headers: (SettingsDownloadConversionHeader | TSettingsDownloadConversionHeader)[],
-): TSettingsDownloadConversionHeader[] =>
-    headers.map((header) => ({
-        // eslint-disable-next-line no-plusplus
-        id: (header as TSettingsDownloadConversionHeader).id ?? COUNTER++,
-        ...header,
-    }));
-
-export const addStableIdToConversions = (
-    conversions: (SettingsDownloadConversion | TSettingsDownloadConversion)[],
-): TSettingsDownloadConversion[] =>
-    conversions.map((conversion) => ({
-        // eslint-disable-next-line no-plusplus
-        id: (conversion as TSettingsDownloadConversion).id ?? COUNTER++,
-        ...conversion,
-        mode: getTargetMode(conversion.target),
-        headers: conversion.headers ? addStableIdToHeaders(conversion.headers) : null,
-    }));
-
-const normalizeConversions = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] =>
-    conversions.map((conversion) => ({
-        ...conversion,
-        mimeType: normalizeMimeType(conversion.mimeType),
-        target: normalizeMimeType(conversion.target),
-    }));
-
-const toValidServerMimeType = (mimeType: string): string => {
-    if (isDefaultMimeType(mimeType)) {
-        return DEFAULT_MIME_TYPE;
-    }
-
-    return `${MIME_TYPE_PREFIX}${mimeType}`;
-};
-
-const toValidServerConversions = (conversions: TSettingsDownloadConversion[]): SettingsDownloadConversion[] =>
-    conversions
-        .filter(({ mimeType, target }) => !!mimeType && !!target)
-        .map(({ id, mode, ...conversion }) => ({
-            ...conversion,
-            mimeType: toValidServerMimeType(conversion.mimeType),
-            target: isUrlTargetMode(conversion.target) ? conversion.target : `${MIME_TYPE_PREFIX}${conversion.target}`,
-            headers: conversion.headers?.map(({ id: headerId, ...header }) => header) ?? null,
-        }));
-
-const maybeAddDefault = (conversions: TSettingsDownloadConversion[]): TSettingsDownloadConversion[] => {
-    const isDefaultDefined = conversions.some(({ mimeType }) => isDefaultMimeType(mimeType));
-
-    return [
-        ...(isDefaultDefined
-            ? []
-            : [
-                  {
-                      id: -1,
-                      mode: TargetMode.IMAGE,
-                      mimeType: DEFAULT_MIME_TYPE,
-                      target: '',
-                      compressionLevel: null,
-                      headers: null,
-                      callTimeout: null,
-                      connectTimeout: null,
-                  },
-              ]),
-        ...conversions,
-    ];
-};
-
-const normalizeHeaders = (
-    headers: SettingsDownloadConversionType['headers'],
-): SettingsDownloadConversionType['headers'] => headers?.filter(({ name }) => name !== '');
-
-const didUpdateConversions = (
-    conversions: TSettingsDownloadConversion[],
-    tmpConversions: TSettingsDownloadConversion[],
-): boolean => {
-    if (conversions.length !== tmpConversions.length) {
-        return true;
-    }
-
-    return conversions.some(({ mimeType, target, compressionLevel, callTimeout, connectTimeout, headers }, index) => {
-        const tmpConversion = tmpConversions[index];
-
-        const orgHeaders = normalizeHeaders(headers);
-        const tmpHeaders = normalizeHeaders(tmpConversion.headers);
-
-        return (
-            normalizeMimeType(mimeType) !== tmpConversion.mimeType ||
-            normalizeMimeType(target) !== tmpConversion.target ||
-            compressionLevel !== tmpConversion.compressionLevel ||
-            callTimeout !== tmpConversion.callTimeout ||
-            connectTimeout !== tmpConversion.connectTimeout ||
-            (orgHeaders?.length ?? 0) !== (tmpHeaders?.length ?? 0) ||
-            !!orgHeaders?.some(
-                (header, headerIndex) =>
-                    header.name !== tmpHeaders?.[headerIndex]?.name ||
-                    header.value !== tmpHeaders?.[headerIndex]?.value,
-            )
-        );
-    });
-};
-
-const MimeTypeTextField = ({
-    shouldAutoFocus,
-    isDefault,
-    isDuplicate,
-    label,
-    value,
-    onUpdate,
-    mode,
-}: {
-    shouldAutoFocus: boolean;
-    isDefault: boolean;
-    isDuplicate: boolean;
-    label: string;
-    value: string;
-    onUpdate: (value: string) => void;
-    mode: TargetMode;
-}) => {
-    const { t } = useTranslation();
-
-    const isImageMode = mode === TargetMode.IMAGE;
-    const isValidUrl = value === '' || isUrlTargetMode(value);
-    const isValid = !isDuplicate && (isImageMode || isValidUrl);
-
-    return (
-        <TextField
-            sx={{ width: INPUT_WIDTH }}
-            autoFocus={shouldAutoFocus}
-            label={label}
-            value={value}
-            disabled={isDefault}
-            error={!isValid}
-            helperText={!isValid && t('global.error.label.invalid_input')}
-            slotProps={{
-                input: {
-                    startAdornment: (
-                        <InputAdornment position="start">{isImageMode ? MIME_TYPE_PREFIX : null}</InputAdornment>
-                    ),
-                },
-            }}
-            onChange={(e) => onUpdate(e.target.value.trim())}
-        />
-    );
-};
-
-const Header = ({
-    id,
-    name,
-    value,
-    onChange,
-    isDuplicate,
-}: {
-    isDuplicate: boolean;
-    onChange: (header: TSettingsDownloadConversionHeader | null) => void;
-} & TSettingsDownloadConversionHeader) => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-
-    return (
-        <Stack
-            sx={{
-                gap: 1,
-                flexDirection: 'row',
-                flexWrap: 'nowrap',
-                alignItems: 'center',
-            }}
-        >
-            <Stack
-                sx={{
-                    flexDirection: 'row',
-                    gap: 2,
-                    [theme.breakpoints.down('md')]: {
-                        flexDirection: 'column',
-                        width: '100%',
-                    },
-                }}
-            >
-                <TextField
-                    autoFocus
-                    sx={{ width: INPUT_WIDTH }}
-                    label={t('download.settings.conversion.headers.name')}
-                    value={name}
-                    error={isDuplicate}
-                    helperText={isDuplicate && t('global.error.label.invalid_input')}
-                    onChange={(e) =>
-                        onChange({
-                            id,
-                            name: e.target.value,
-                            value,
-                        })
-                    }
-                />
-                <TextField
-                    sx={{ width: INPUT_WIDTH }}
-                    label={t('download.settings.conversion.headers.value')}
-                    value={value}
-                    onChange={(e) =>
-                        onChange({
-                            id,
-                            name,
-                            value: e.target.value,
-                        })
-                    }
-                />
-            </Stack>
-            <CustomTooltip disabled={false} title={t('chapter.action.download.delete.label.action')}>
-                <IconButton
-                    onClick={() => {
-                        onChange(null);
-                    }}
-                >
-                    <DeleteIcon />
-                </IconButton>
-            </CustomTooltip>
-        </Stack>
-    );
-};
-
-const Headers = ({
-    open,
-    headers,
-    onChange,
-}: {
-    open: boolean;
-    headers: Maybe<TSettingsDownloadConversionHeader[]> | undefined;
-    onChange: (headers: Maybe<TSettingsDownloadConversionHeader[]>) => void;
-}) => {
-    const { t } = useTranslation();
-
-    return (
-        <Collapse in={open}>
-            <Stack sx={{ justifyContent: 'start', gap: 2 }}>
-                <Typography>{t('download.settings.conversion.headers.title')}</Typography>
-                {headers?.map((header, index) => (
-                    <Header
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={index}
-                        {...header}
-                        isDuplicate={isDuplicateHeader(header.name, index, headers)}
-                        onChange={(updatedHeader) => {
-                            const isDeletion = updatedHeader == null;
-                            if (isDeletion) {
-                                onChange(headers?.toSpliced(index, 1));
-                                return;
-                            }
-
-                            onChange((headers ?? []).toSpliced(index, 1, updatedHeader));
-                        }}
-                    />
-                ))}
-                <Button
-                    onClick={() => onChange([...(headers ?? []), ...addStableIdToHeaders([{ name: '', value: '' }])])}
-                    variant="contained"
-                    sx={{ width: 'fit-content' }}
-                >
-                    Add
-                </Button>
-            </Stack>
-        </Collapse>
-    );
-};
-
-const Conversion = ({
-    conversion,
-    conversion: { mimeType, target, compressionLevel, headers, callTimeout, connectTimeout },
-    onChange,
-    isDuplicate,
-}: {
-    conversion: TSettingsDownloadConversion;
-    onChange: (newConversion: TSettingsDownloadConversion | null) => void;
-    isDuplicate: boolean;
-}) => {
-    const { t } = useTranslation();
-    const theme = useTheme();
-
-    const { ref: textFieldRef, height: textFieldHeight } = useElementSize();
-
-    const [targetMode, setTargetMode] = useState(getTargetMode(target));
-    const [areHeadersCollapsed, setAreHeadersCollapsed] = useState(true);
-
-    const isImageMode = targetMode === TargetMode.IMAGE;
-
-    const isCallTimeoutValid = isValidCallTimeoutSetting(callTimeout);
-    const isConnectTimeoutValid = isValidConnectTimeoutSetting(connectTimeout);
-    const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
-    const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
-    const isDisabled = isDefault && !target && compressionLevel == null;
-
-    return (
-        <Stack sx={{ gap: 2 }}>
-            <Stack
-                sx={{
-                    gap: 1,
-                    flexDirection: 'row',
-                    flexWrap: 'nowrap',
-                    alignItems: 'center',
-                    pt: 1,
-                }}
-            >
-                <Stack
-                    sx={{
-                        gap: 1,
-                        flexDirection: 'row',
-                        alignItems: 'baseline',
-                        flexWrap: 'wrap',
-                        [theme.breakpoints.down('md')]: {
-                            flexDirection: 'column',
-                            width: '100%',
-                        },
-                    }}
-                >
-                    <MimeTypeTextField
-                        mode={TargetMode.IMAGE}
-                        shouldAutoFocus
-                        isDefault={isDefault}
-                        isDuplicate={isDuplicate}
-                        label={t('download.settings.conversion.mime_type')}
-                        value={mimeType}
-                        onUpdate={(value) => {
-                            onChange({
-                                ...conversion,
-                                mimeType: value,
-                            });
-                        }}
-                    />
-                    <TypographyMaxLines sx={{ mx: 1 }}>→</TypographyMaxLines>
-                    <FormControl sx={{ minWidth: '100px' }}>
-                        <InputLabel id="image-conversion-target-mode-label">
-                            {t('download.settings.conversion.target_modes.title')}
-                        </InputLabel>
-                        <Select
-                            ref={textFieldRef}
-                            id="image-conversion-target-mode"
-                            labelId="image-conversion-target-mode-label"
-                            label={t('download.settings.conversion.target_modes.title')}
-                            value={targetMode}
-                            onChange={(e) => setTargetMode(e.target.value)}
-                        >
-                            {TARGET_MODES_SELECT_VALUES.map(([selectValue, { text: selectText }]) => (
-                                <MenuItem key={selectValue} value={selectValue}>
-                                    {t(selectText as TranslationKey)}
-                                </MenuItem>
-                            ))}
-                        </Select>
-                    </FormControl>
-                    <MimeTypeTextField
-                        mode={targetMode}
-                        shouldAutoFocus={false}
-                        isDefault={false}
-                        isDuplicate={false}
-                        label={t('download.settings.conversion.target')}
-                        value={target}
-                        onUpdate={(value) =>
-                            onChange({
-                                ...conversion,
-                                target: value,
-                            })
-                        }
-                    />
-                    {isImageMode ? (
-                        <TextField
-                            sx={{ width: INPUT_WIDTH }}
-                            label={t('download.settings.conversion.compression_level')}
-                            value={compressionLevel ?? ''}
-                            type="number"
-                            error={!isCompressionLevelValid}
-                            helperText={!isCompressionLevelValid ? t('global.error.label.invalid_input') : ''}
-                            slotProps={{
-                                input: {
-                                    inputProps: IMAGE_PROCESSING_COMPRESSION,
-                                },
-                            }}
-                            onChange={(e) => {
-                                onChange({
-                                    ...conversion,
-                                    compressionLevel: e.target.value ? Number(e.target.value) : null,
-                                });
-                            }}
-                        />
-                    ) : (
-                        <>
-                            <TextField
-                                sx={{ width: INPUT_WIDTH }}
-                                label={t('download.settings.conversion.call_timeout')}
-                                value={callTimeout ? d(callTimeout).seconds.inWholeSeconds : ''}
-                                type="number"
-                                error={!isCallTimeoutValid}
-                                helperText={!isCallTimeoutValid ? t('global.error.label.invalid_input') : ''}
-                                slotProps={{
-                                    input: {
-                                        inputProps: IMAGE_PROCESSING_CALL_TIMEOUT,
-                                        endAdornment: (
-                                            <InputAdornment position="end">
-                                                {t('global.date.label.second_other')}
-                                            </InputAdornment>
-                                        ),
-                                    },
-                                }}
-                                onChange={(e) => {
-                                    onChange({
-                                        ...conversion,
-                                        callTimeout: e.target.value
-                                            ? d(Number(e.target.value)).seconds.toISOString()
-                                            : null,
-                                    });
-                                }}
-                            />
-                            <TextField
-                                sx={{ width: INPUT_WIDTH }}
-                                label={t('download.settings.conversion.connect_timeout')}
-                                value={connectTimeout ? d(connectTimeout).seconds.inWholeSeconds : ''}
-                                type="number"
-                                error={!isConnectTimeoutValid}
-                                helperText={!isConnectTimeoutValid ? t('global.error.label.invalid_input') : ''}
-                                slotProps={{
-                                    input: {
-                                        inputProps: IMAGE_PROCESSING_CONNECT_TIMEOUT,
-                                        endAdornment: (
-                                            <InputAdornment position="end">
-                                                {t('global.date.label.second_other')}
-                                            </InputAdornment>
-                                        ),
-                                    },
-                                }}
-                                onChange={(e) => {
-                                    onChange({
-                                        ...conversion,
-                                        connectTimeout: e.target.value
-                                            ? d(Number(e.target.value)).seconds.toISOString()
-                                            : null,
-                                    });
-                                }}
-                            />
-                            <Button
-                                onClick={() => setAreHeadersCollapsed(!areHeadersCollapsed)}
-                                variant={areHeadersCollapsed ? 'outlined' : 'contained'}
-                                sx={{ height: textFieldHeight }}
-                            >
-                                {t('download.settings.conversion.headers.button', {
-                                    count: headers?.length ?? 0,
-                                })}
-                            </Button>
-                        </>
-                    )}
-                </Stack>
-                <CustomTooltip disabled={isDisabled} title={t('chapter.action.download.delete.label.action')}>
-                    <IconButton
-                        disabled={isDisabled}
-                        onClick={() => {
-                            onChange(null);
-                        }}
-                    >
-                        <DeleteIcon />
-                    </IconButton>
-                </CustomTooltip>
-            </Stack>
-            <Headers
-                open={!areHeadersCollapsed}
-                headers={headers}
-                onChange={(updatedHeaders) =>
-                    onChange({
-                        ...conversion,
-                        headers: updatedHeaders,
-                    })
-                }
-            />
-        </Stack>
-    );
-};
+import {
+    addStableIdToConversions,
+    containsInvalidConversion,
+    didUpdateConversions,
+    isDuplicateConversion,
+    maybeAddDefault,
+    normalizeConversions,
+    toValidServerConversions,
+} from '@/features/settings/ImageProcessing.utils.ts';
+import { Processing } from '@/features/settings/components/images/Processing.tsx';
 
 export const ImageProcessingSetting = () => {
     const { t } = useTranslation();
@@ -694,7 +94,7 @@ export const ImageProcessingSetting = () => {
                     const isDuplicate = isDuplicateConversion(mimeType, index, tmpConversions);
 
                     return (
-                        <Conversion
+                        <Processing
                             key={conversion.id}
                             conversion={conversion}
                             isDuplicate={isDuplicate}
@@ -720,7 +120,16 @@ export const ImageProcessingSetting = () => {
                     onClick={() => {
                         setTmpConversions((prev) => [
                             ...prev,
-                            ...addStableIdToConversions([{ mimeType: '', target: '' }]),
+                            ...addStableIdToConversions([
+                                {
+                                    mimeType: '',
+                                    target: '',
+                                    compressionLevel: null,
+                                    headers: null,
+                                    callTimeout: null,
+                                    connectTimeout: null,
+                                },
+                            ]),
                         ]);
                     }}
                 >