Add new image processing settings on serve

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

@@ -29,7 +29,7 @@ export const Headers = ({
 
     return (
         <Collapse in={open}>
-            <Stack sx={{ justifyContent: 'start', gap: 2 }}>
+            <Stack sx={{ justifyContent: 'start', gap: 2, pt: 2 }}>
                 <Typography>{t('download.settings.conversion.headers.title')}</Typography>
                 {headers?.map((header, index) => (
                     <Header

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

@@ -11,6 +11,7 @@ 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';
+import { isUrlTargetMode } from '@/features/settings/ImageProcessing.utils.ts';
 
 export const MimeTypeTextField = ({
     shouldAutoFocus,
@@ -32,7 +33,7 @@ export const MimeTypeTextField = ({
     const { t } = useTranslation();
 
     const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
-    const isValidUrl = !value.length || value.match(/^https?:\/\//);
+    const isValidUrl = !value.length || isUrlTargetMode(value);
     const isValid = !isDuplicate && (isImageMode || isValidUrl);
 
     return (

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

@@ -67,7 +67,7 @@ export const Processing = ({
     const isDisabled = isDefault && !target && compressionLevel == null;
 
     return (
-        <Stack sx={{ gap: 2 }}>
+        <Stack>
             <Stack
                 sx={{
                     gap: 1,
@@ -103,7 +103,13 @@ export const Processing = ({
                             });
                         }}
                     />
-                    <TypographyMaxLines sx={{ mx: 1 }}>→</TypographyMaxLines>
+                    <TypographyMaxLines
+                        sx={{
+                            [theme.breakpoints.up('md')]: { mx: 1 },
+                        }}
+                    >
+                        →
+                    </TypographyMaxLines>
                     <FormControl sx={{ minWidth: '100px' }}>
                         <InputLabel id="image-conversion-target-mode-label">
                             {t('download.settings.conversion.target_modes.title')}