Feature/handle disabled download ahead limit by default (#475)

* Add a description to the dialog

* Set the default limit to the lowest possible value

src/components/settings/NumberSetting.tsx

@@ -10,7 +10,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
-import { InputAdornment, ListItemText } from '@mui/material';
+import { InputAdornment, ListItemText, Stack, Typography } from '@mui/material';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useCallback, useEffect, useState } from 'react';
@@ -19,6 +19,8 @@ import ListItemButton from '@mui/material/ListItemButton';
 import * as React from 'react';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Slider from '@mui/material/Slider';
+import DialogContentText from '@mui/material/DialogContentText';
+import InfoIcon from '@mui/icons-material/Info';
 
 type BaseProps = {
     settingTitle: string;
@@ -30,6 +32,8 @@ type BaseProps = {
     maxValue?: number;
     stepSize?: number;
     dialogTitle: string;
+    dialogDescription?: string;
+    dialogDisclaimer?: string;
     valueUnit: string;
     handleUpdate: (value: number) => void;
     showSlider?: never;
@@ -45,6 +49,8 @@ export const NumberSetting = ({
     settingTitle,
     settingValue,
     settingIcon,
+    dialogDescription,
+    dialogDisclaimer,
     value,
     defaultValue,
     minValue,
@@ -108,6 +114,35 @@ export const NumberSetting = ({
             <Dialog open={isDialogOpen} onClose={closeDialogWithReset}>
                 <DialogContent>
                     <DialogTitle sx={{ paddingLeft: 0 }}>{dialogTitle}</DialogTitle>
+                    {(!!dialogDescription || !!dialogDisclaimer) && (
+                        <DialogContentText sx={{ paddingBottom: '10px' }} component="div">
+                            {dialogDescription && (
+                                <Typography
+                                    variant="body1"
+                                    sx={{
+                                        whiteSpace: 'pre-line',
+                                    }}
+                                >
+                                    {dialogDescription}
+                                </Typography>
+                            )}
+                            {dialogDisclaimer && (
+                                <Stack direction="row" alignItems="center">
+                                    <InfoIcon color="warning" />
+                                    <Typography
+                                        variant="body1"
+                                        sx={{
+                                            marginLeft: '10px',
+                                            marginTop: '5px',
+                                            whiteSpace: 'pre-line',
+                                        }}
+                                    >
+                                        {dialogDisclaimer}
+                                    </Typography>
+                                </Stack>
+                            )}
+                        </DialogContentText>
+                    )}
                     <TextField
                         sx={{
                             width: '100%',

src/components/settings/SelectSetting.tsx

@@ -125,11 +125,6 @@ export const SelectSetting = <SettingValue extends string | number>({
                             )}
                         </DialogContentText>
                     )}
-                    {/* {!!dialogValueDisplayInfo.disclaimer && ( */}
-                    {/*    <DialogContentText sx={{ paddingBottom: '10px', color: 'orange' }}> */}
-                    {/*        {t(dialogValueDisplayInfo.disclaimer)} */}
-                    {/*    </DialogContentText> */}
-                    {/* )} */}
                     <FormControl fullWidth>
                         <Select
                             id="dialog-select"

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -14,9 +14,9 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
 
-const DEFAULT_LIMIT = 5;
 const MIN_LIMIT = 2;
 const MAX_LIMIT = 10;
+const DEFAULT_LIMIT = MIN_LIMIT;
 
 export const DownloadAheadSetting = () => {
     const { t } = useTranslation();
@@ -75,6 +75,8 @@ export const DownloadAheadSetting = () => {
                 defaultValue={DEFAULT_LIMIT}
                 showSlider
                 dialogTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
+                dialogDescription={t('download.settings.download_ahead.label.description')}
+                dialogDisclaimer={t('download.settings.download_ahead.label.disclaimer')}
                 valueUnit={t('chapter.title')}
                 handleUpdate={updateSetting}
                 disabled={!shouldDownloadAhead}

src/i18n/locale/en.json

@@ -159,6 +159,8 @@
       },
       "download_ahead": {
         "label": {
+          "description": "How many chapters should get downloaded when marking a chapter as read while reading.",
+          "disclaimer": "This limit will also be applied to the automatic download of new chapters during an update",
           "unread_chapters_to_download": "Number of unread chapters to download",
           "value": "{{chapters}} $t(chapter.title)",
           "while_reading": "Auto download while reading"