Add new image processing settings on serve

src/features/settings/Settings.constants.ts

@@ -12,7 +12,9 @@ import { DEFAULT_SORT_SETTINGS } from '@/features/migration/Migration.constants.
 import {
     GlobalUpdateSkipEntriesSettings,
     ImageProcessingTargetMode,
+    ImageProcessingType,
     MetadataServerSettings,
+    ServerSettings,
 } from '@/features/settings/Settings.types.ts';
 import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
 import { getDefaultLanguages } from '@/base/utils/Languages.ts';
@@ -296,3 +298,16 @@ export const IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES: SelectSettingValue<Ima
 export const IMAGE_PROCESSING_INPUT_WIDTH = 250;
 export const DEFAULT_MIME_TYPE = 'default';
 export const MIME_TYPE_PREFIX = 'image/';
+
+export const IMAGE_PROCESSING_TYPE_TO_TRANSLATION: Record<ImageProcessingType, TranslationKey> = {
+    [ImageProcessingType.DOWNLOAD]: 'download.settings.conversion.title',
+    [ImageProcessingType.SERVE]: 'settings.images.processing.serve.title',
+};
+
+export const IMAGE_PROCESSING_TYPE_TO_SETTING: Record<
+    ImageProcessingType,
+    Extract<keyof ServerSettings, 'downloadConversions' | 'serveConversions'>
+> = {
+    [ImageProcessingType.DOWNLOAD]: 'downloadConversions',
+    [ImageProcessingType.SERVE]: 'serveConversions',
+};

src/features/settings/Settings.types.ts

@@ -64,6 +64,11 @@ export enum ImageProcessingTargetMode {
     URL = 'url',
 }
 
+export enum ImageProcessingType {
+    DOWNLOAD = 'download',
+    SERVE = 'serve',
+}
+
 export type TSettingsDownloadConversionHeader = SettingsDownloadConversionHeader & {
     /**
      * The conversion object does not have a stable key, which causes issues when editing the settings

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')}

src/features/settings/screens/ImageProcessingSetting.tsx

@@ -11,8 +11,12 @@ import { useState } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import {
+    IMAGE_PROCESSING_TYPE_TO_SETTING,
+    IMAGE_PROCESSING_TYPE_TO_TRANSLATION,
+} from '@/features/settings/Settings.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { ServerSettings } from '@/features/settings/Settings.types.ts';
+import { ImageProcessingType, ServerSettings } from '@/features/settings/Settings.types.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
@@ -31,10 +35,10 @@ import {
 } from '@/features/settings/ImageProcessing.utils.ts';
 import { Processing } from '@/features/settings/components/images/Processing.tsx';
 
-export const ImageProcessingSetting = () => {
+export const ImageProcessingSetting = ({ type }: { type: ImageProcessingType }) => {
     const { t } = useTranslation();
 
-    useAppTitle(t('download.settings.conversion.title'));
+    useAppTitle(t(IMAGE_PROCESSING_TYPE_TO_TRANSLATION[type]));
 
     const { data, loading, error, refetch } = requestManager.useGetServerSettings({
         notifyOnNetworkStatusChange: true,
@@ -50,14 +54,16 @@ export const ImageProcessingSetting = () => {
             <EmptyViewAbsoluteCentered
                 message={t('global.error.label.failed_to_load_data')}
                 messageExtra={getErrorMessage(error)}
-                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadConversionSetting::refetch'))}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('ImageProcessingSetting::refetch'))}
             />
         );
     }
 
-    assertIsDefined(data?.settings?.downloadConversions);
+    const settingKey = IMAGE_PROCESSING_TYPE_TO_SETTING[type];
 
-    const conversions = data?.settings?.downloadConversions;
+    assertIsDefined(data?.settings?.[settingKey]);
+
+    const conversions = data?.settings?.[settingKey];
 
     const [tmpConversions, setTmpConversions] = useState(
         normalizeConversions(maybeAddDefault(addStableIdToConversions(conversions))),
@@ -69,8 +75,8 @@ export const ImageProcessingSetting = () => {
         tmpConversions,
     );
 
-    const updateSetting = (value: ServerSettings['downloadConversions']): Promise<any> => {
-        const mutation = mutateSettings({ variables: { input: { settings: { downloadConversions: value } } } });
+    const updateSetting = (value: ServerSettings[typeof settingKey]): Promise<any> => {
+        const mutation = mutateSettings({ variables: { input: { settings: { [settingKey]: value } } } });
         mutation.catch((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
 
         return mutation;

src/features/settings/screens/ImagesSettings.tsx

@@ -53,6 +53,9 @@ export const ImagesSettings = () => {
                 <ListItemLink to={AppRoutes.settings.childRoutes.images.childRoutes.processingDownloads.path}>
                     <ListItemText primary={t('download.settings.conversion.title')} />
                 </ListItemLink>
+                <ListItemLink to={AppRoutes.settings.childRoutes.images.childRoutes.processingServe.path}>
+                    <ListItemText primary={t('settings.images.processing.serve.title')} />
+                </ListItemLink>
             </List>
         </List>
     );