Convert "download conversions" setting to a page

src/App.tsx

@@ -60,6 +60,10 @@ const { DownloadSettings } = loadable(
     () => import('@/features/downloads/screens/DownloadSettings.tsx'),
     lazyLoadFallback,
 );
+const { DownloadConversionSettings } = loadable(
+    () => import('@/features/downloads/screens/DownloadConversionSettings.tsx'),
+    lazyLoadFallback,
+);
 const { ServerSettings } = loadable(() => import('@/features/settings/screens/ServerSettings.tsx'), lazyLoadFallback);
 const { BrowseSettings } = loadable(() => import('@/features/browse/screens/BrowseSettings.tsx'), lazyLoadFallback);
 const { WebUISettings } = loadable(() => import('@/features/settings/screens/WebUISettings.tsx'), lazyLoadFallback);
@@ -221,10 +225,13 @@ const MainApp = () => {
                                     element={<LibraryDuplicates />}
                                 />
                             </Route>
+                            <Route path={AppRoutes.settings.childRoutes.download.match}>
+                                <Route index element={<DownloadSettings />} />
                                 <Route
-                                path={AppRoutes.settings.childRoutes.download.match}
+                                    path={AppRoutes.settings.childRoutes.download.childRoutes.conversions.match}
-                                element={<DownloadSettings />}
+                                    element={<DownloadConversionSettings />}
                                 />
+                            </Route>
                             <Route path={AppRoutes.settings.childRoutes.backup.match} element={<Backup />} />
                             <Route path={AppRoutes.settings.childRoutes.server.match} element={<ServerSettings />} />
                             <Route path={AppRoutes.settings.childRoutes.webui.match} element={<WebUISettings />} />

src/base/AppRoute.constants.ts

@@ -69,6 +69,12 @@ export const AppRoutes = {
             download: {
                 match: 'download',
                 path: '/settings/download',
+                childRoutes: {
+                    conversions: {
+                        match: 'conversions',
+                        path: '/settings/download/conversions',
+                    },
+                },
             },
             backup: {
                 match: 'backup',

src/features/downloads/components/DownloadConversionSetting.tsx

@@ -7,24 +7,21 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
 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 DialogActions from '@mui/material/DialogActions';
+import { useTheme } from '@mui/material/styles';
-import DialogContentText from '@mui/material/DialogContentText';
-import { SettingsDownloadConversion } from '@/lib/graphql/generated/graphql.ts';
-import { DOWNLOAD_CONVERSION_COMPRESSION } from '@/features/downloads/Downloads.constants.ts';
-import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
+import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
+import { DOWNLOAD_CONVERSION_COMPRESSION } from '@/features/downloads/Downloads.constants.ts';
+import { SettingsDownloadConversion } from '@/lib/graphql/generated/graphql.ts';
+
+const INPUT_WIDTH = 250;
 
 const DEFAULT_MIME_TYPE = 'default';
 const MIME_TYPE_PREFIX = 'image/';
@@ -127,7 +124,7 @@ const MimeTypeTextField = ({
 
     return (
         <TextField
-            sx={{ maxWidth: 150 }}
+            sx={{ width: INPUT_WIDTH }}
             autoFocus={shouldAutoFocus}
             label={label}
             value={value}
@@ -158,6 +155,7 @@ const Conversion = ({
     isDuplicate: boolean;
 }) => {
     const { t } = useTranslation();
+    const theme = useTheme();
 
     const isCompressionLevelValid = isValidCompressionLevel(compressionLevel);
     const isDefault = isDefaultMimeType(mimeType) && !isDuplicate;
@@ -179,6 +177,10 @@ const Conversion = ({
                     flexDirection: 'row',
                     alignItems: 'baseline',
                     flexWrap: 'wrap',
+                    [theme.breakpoints.down('md')]: {
+                        flexDirection: 'column',
+                        width: '100%',
+                    },
                 }}
             >
                 <MimeTypeTextField
@@ -213,6 +215,7 @@ const Conversion = ({
                     }
                 />
                 <TextField
+                    sx={{ width: INPUT_WIDTH }}
                     label={t('download.settings.conversion.compression_level')}
                     value={compressionLevel ?? ''}
                     type="number"
@@ -256,7 +259,6 @@ export const DownloadConversionSetting = ({
 }) => {
     const { t } = useTranslation();
 
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [tmpConversions, setTmpConversions] = useState(normalizeConversions(maybeAddDefault(conversions)));
     const [focusedMimeTypeTextFieldIndex, setFocusedMimeTypeTextFieldIndex] = useState(DEFAULT_FOCUS_INDEX);
 
@@ -264,42 +266,18 @@ export const DownloadConversionSetting = ({
 
     const hasChanged = didUpdateConversions(normalizeConversions(maybeAddDefault(conversions)), tmpConversions);
 
-    const onClose = (newConversions: SettingsDownloadConversion[] = conversions) => {
-        setTmpConversions(normalizeConversions(maybeAddDefault(newConversions)));
-        setIsDialogOpen(false);
-    };
-
-    const onCancel = () => {
-        onClose(conversions);
-    };
-
     const onSubmit = async () => {
         try {
             await updateSetting(toValidServerConversions(tmpConversions));
-            onClose(toValidServerConversions(tmpConversions));
         } catch (e) {
             // ignore error
         }
     };
 
     return (
-        <>
+        <Stack sx={{ p: 2, gap: 3 }}>
-            <ListItemButton disabled={false} onClick={() => setIsDialogOpen(true)}>
+            <Typography>{t('download.settings.conversion.description', { value: 'none' })}</Typography>
-                <ListItemText
+            <Stack sx={{ flexDirection: 'column', gap: 5 }}>
-                    primary={t('download.settings.conversion.title')}
-                    secondary={conversions
-                        .map((conversion) => `${conversion.mimeType} → ${conversion.target}`)
-                        .join('; ')}
-                    secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
-                />
-            </ListItemButton>
-            <Dialog open={isDialogOpen} onClose={onCancel}>
-                <DialogTitle>{t('download.settings.conversion.title')}</DialogTitle>
-                <DialogContent>
-                    <DialogContentText sx={{ mb: 2, whiteSpace: 'pre-line' }}>
-                        {t('download.settings.conversion.description', { value: 'none' })}
-                    </DialogContentText>
-                    <Stack sx={{ flexDirection: 'column', gap: 3 }}>
                 {tmpConversions.map((conversion, index) => {
                     const { mimeType } = conversion;
 
@@ -327,35 +305,24 @@ export const DownloadConversionSetting = ({
                     );
                 })}
             </Stack>
-                </DialogContent>
-                <DialogActions>
             <Stack
                 direction="row"
                 sx={{
-                            justifyContent: 'space-between',
+                    gap: 2,
-                            width: '100%',
                 }}
             >
                 <Button
                     variant="outlined"
                     onClick={() => {
-                                setTmpConversions((prev) => [
+                        setTmpConversions((prev) => [...prev, { mimeType: '', target: '' }]);
-                                    ...prev,
-                                    { mimeType: '', target: '', compressionLevel: null },
-                                ]);
                     }}
                 >
                     {t('global.button.add')}
                 </Button>
-                        <Stack direction="row">
+                <Button variant="contained" disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
-                            <Button onClick={onCancel}>{t('global.button.cancel')}</Button>
+                    {t('global.button.save')}
-                            <Button disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
-                                {t('global.button.ok')}
                 </Button>
             </Stack>
         </Stack>
-                </DialogActions>
-            </Dialog>
-        </>
     );
 };

src/features/downloads/screens/DownloadConversionSettings.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { DownloadConversionSetting } from '@/features/downloads/components/DownloadConversionSetting.tsx';
+import { makeToast } from '@/base/utils/Toast.ts';
+import { ServerSettings } from '@/features/settings/Settings.types.ts';
+
+export const DownloadConversionSettings = () => {
+    const { t } = useTranslation();
+
+    useAppTitle(t('download.title.download'));
+
+    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const updateSetting = (value: ServerSettings['downloadConversions']): Promise<any> => {
+        const mutation = mutateSettings({ variables: { input: { settings: { downloadConversions: value } } } });
+        mutation.catch((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
+
+        return mutation;
+    };
+
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={getErrorMessage(error)}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadConversionSetting::refetch'))}
+            />
+        );
+    }
+
+    return <DownloadConversionSetting conversions={data!.settings.downloadConversions} updateSetting={updateSetting} />;
+};

src/features/downloads/screens/DownloadSettings.tsx

@@ -32,7 +32,8 @@ import { MetadataDownloadSettings } from '@/features/downloads/Downloads.types.t
 import { ServerSettings } from '@/features/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
-import { DownloadConversionSetting } from '@/features/downloads/components/DownloadConversionSetting.tsx';
+import { ListItemLink } from '@/base/components/lists/ListItemLink.tsx';
+import { AppRoutes } from '@/base/AppRoute.constants.ts';
 
 type DownloadSettingsType = Pick<
     ServerSettings,
@@ -128,10 +129,9 @@ export const DownloadSettings = () => {
                     onChange={(e) => updateSetting('downloadAsCbz', e.target.checked)}
                 />
             </ListItem>
-            <DownloadConversionSetting
+            <ListItemLink to={AppRoutes.settings.childRoutes.download.childRoutes.conversions.path}>
-                conversions={downloadSettings?.downloadConversions}
+                <ListItemText primary={t('download.settings.conversion.title')} />
-                updateSetting={(conversions) => updateSetting('downloadConversions', conversions)}
+            </ListItemLink>
-            />
             <List
                 subheader={
                     <ListSubheader component="div" id="download-settings-auto-delete-downloads">