Convert "download conversions" setting to a page

2025-12-07 03:32:28 +01:00
parent 162b477032
commit bded64b0b1
5 changed files with 134 additions and 102 deletions
--- a/src/App.tsx
+++ b/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}
-                                element={<DownloadSettings />}
+                                    path={AppRoutes.settings.childRoutes.download.childRoutes.conversions.match}
+                                    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 />} />
--- a/src/base/AppRoute.constants.ts
+++ b/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',
--- a/src/features/downloads/components/DownloadConversionSetting.tsx
+++ b/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 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 { useTheme } from '@mui/material/styles';
 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 (
-        <>
-            <ListItemButton disabled={false} onClick={() => setIsDialogOpen(true)}>
-                <ListItemText
-                    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 }}>
+        <Stack sx={{ p: 2, gap: 3 }}>
+            <Typography>{t('download.settings.conversion.description', { value: 'none' })}</Typography>
+            <Stack sx={{ flexDirection: 'column', gap: 5 }}>
                {tmpConversions.map((conversion, index) => {
                    const { mimeType } = conversion;

@@ -327,35 +305,24 @@ export const DownloadConversionSetting = ({
                    );
                })}
            </Stack>
-                </DialogContent>
-                <DialogActions>
            <Stack
                direction="row"
                sx={{
-                            justifyContent: 'space-between',
-                            width: '100%',
+                    gap: 2,
                }}
            >
                <Button
                    variant="outlined"
                    onClick={() => {
-                                setTmpConversions((prev) => [
-                                    ...prev,
-                                    { mimeType: '', target: '', compressionLevel: null },
-                                ]);
+                        setTmpConversions((prev) => [...prev, { mimeType: '', target: '' }]);
                    }}
                >
                    {t('global.button.add')}
                </Button>
-                        <Stack direction="row">
-                            <Button onClick={onCancel}>{t('global.button.cancel')}</Button>
-                            <Button disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
-                                {t('global.button.ok')}
+                <Button variant="contained" disabled={hasInvalidConversion || !hasChanged} onClick={onSubmit}>
+                    {t('global.button.save')}
                </Button>
            </Stack>
        </Stack>
-                </DialogActions>
-            </Dialog>
-        </>
    );
 };
--- a/src/features/downloads/screens/DownloadConversionSettings.tsx
+++ b/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} />;
+};
--- a/src/features/downloads/screens/DownloadSettings.tsx
+++ b/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
-                conversions={downloadSettings?.downloadConversions}
-                updateSetting={(conversions) => updateSetting('downloadConversions', conversions)}
-            />
+            <ListItemLink to={AppRoutes.settings.childRoutes.download.childRoutes.conversions.path}>
+                <ListItemText primary={t('download.settings.conversion.title')} />
+            </ListItemLink>
            <List
                subheader={
                    <ListSubheader component="div" id="download-settings-auto-delete-downloads">