Disable disallowed settings (#461)

src/components/settings/NumberSetting.tsx

@@ -33,6 +33,7 @@ type BaseProps = {
     valueUnit: string;
     handleUpdate: (value: number) => void;
     showSlider?: never;
+    disabled?: boolean;
 };
 
 type PropsWithSlider = Omit<BaseProps, 'defaultValue' | 'minValue' | 'maxValue' | 'showSlider'> &
@@ -53,6 +54,7 @@ export const NumberSetting = ({
     valueUnit,
     handleUpdate,
     showSlider,
+    disabled = false,
 }: Props) => {
     const { t } = useTranslation();
 
@@ -94,7 +96,7 @@ export const NumberSetting = ({
 
     return (
         <>
-            <ListItemButton onClick={() => setIsDialogOpen(true)}>
+            <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
                 {settingIcon ? <ListItemIcon>{settingIcon}</ListItemIcon> : null}
                 <ListItemText
                     primary={settingTitle}

src/components/settings/TextSetting.tsx

@@ -24,6 +24,7 @@ export const TextSetting = ({
     handleChange,
     isPassword = false,
     placeholder = '',
+    disabled = false,
 }: {
     settingName: string;
     dialogDescription?: string;
@@ -31,6 +32,7 @@ export const TextSetting = ({
     handleChange: (value: string) => void;
     isPassword?: boolean;
     placeholder?: string;
+    disabled?: boolean;
 }) => {
     const { t } = useTranslation();
 
@@ -64,7 +66,7 @@ export const TextSetting = ({
 
     return (
         <>
-            <ListItemButton onClick={() => setIsDialogOpen(true)}>
+            <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
                     secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -46,18 +46,17 @@ export const DownloadAheadSetting = () => {
                     />
                 </ListItemSecondaryAction>
             </ListItem>
-            {shouldDownloadAhead ? (
             <NumberSetting
                 settingTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
                 settingValue={
-                        downloadAheadLimit
+                    downloadAheadLimit !== undefined
                         ? t('download.settings.download_ahead.label.value', {
                               chapters: downloadAheadLimit,
                               count: downloadAheadLimit,
                           })
                         : undefined
                 }
-                    value={downloadAheadLimit}
+                value={downloadAheadLimit ?? DEFAULT_LIMIT}
                 minValue={MIN_LIMIT}
                 maxValue={MAX_LIMIT}
                 defaultValue={DEFAULT_LIMIT}
@@ -65,8 +64,8 @@ export const DownloadAheadSetting = () => {
                 dialogTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
                 valueUnit={t('chapter.title')}
                 handleUpdate={updateSetting}
+                disabled={!shouldDownloadAhead}
             />
-            ) : null}
         </List>
     );
 };

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -42,17 +42,16 @@ export const GlobalUpdateSettingsInterval = () => {
                     <Switch edge="end" checked={doAutoUpdates} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
                 </ListItemSecondaryAction>
             </ListItem>
-            {doAutoUpdates ? (
             <NumberSetting
                 settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}
                 settingValue={
-                        autoUpdateIntervalHours
+                    autoUpdateIntervalHours !== undefined
                         ? t('library.settings.global_update.auto_update.interval.label.value', {
                               hours: autoUpdateIntervalHours,
                           })
                         : undefined
                 }
-                    value={autoUpdateIntervalHours}
+                value={autoUpdateIntervalHours ?? DEFAULT_INTERVAL_HOURS}
                 minValue={MIN_INTERVAL_HOURS}
                 maxValue={MAX_INTERVAL_HOURS}
                 defaultValue={DEFAULT_INTERVAL_HOURS}
@@ -60,8 +59,8 @@ export const GlobalUpdateSettingsInterval = () => {
                 dialogTitle={t('library.settings.global_update.auto_update.interval.label.title')}
                 valueUnit={t('global.time.hour_short')}
                 handleUpdate={updateSetting}
+                disabled={!doAutoUpdates}
             />
-            ) : null}
         </List>
     );
 };

src/screens/settings/DownloadSettings.tsx

@@ -92,20 +92,17 @@ export const DownloadSettings = () => {
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
-                {downloadSettings?.autoDownloadNewChapters ? (
+                <ListItem disabled={!downloadSettings?.autoDownloadNewChapters}>
-                    <ListItem>
+                    <ListItemText primary={t('download.settings.auto_download.label.ignore_with_unread_chapters')} />
-                        <ListItemText
-                            primary={t('download.settings.auto_download.label.ignore_with_unread_chapters')}
-                        />
                     <ListItemSecondaryAction>
                         <Switch
                             edge="end"
-                                checked={downloadSettings.excludeEntryWithUnreadChapters}
+                            checked={!!downloadSettings?.excludeEntryWithUnreadChapters}
                             onChange={(e) => updateSetting('excludeEntryWithUnreadChapters', e.target.checked)}
+                            disabled={!downloadSettings?.autoDownloadNewChapters}
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
-                ) : null}
             </List>
             <List
                 subheader={

src/screens/settings/ServerSettings.tsx

@@ -175,20 +175,18 @@ export const ServerSettings = () => {
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
-                {!!serverSettings?.socksProxyEnabled && (
-                    <>
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.host')}
-                            value={serverSettings.socksProxyHost}
+                    value={serverSettings?.socksProxyHost}
                     handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
+                    disabled={!serverSettings?.socksProxyEnabled}
                 />
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.port')}
-                            value={serverSettings.socksProxyPort}
+                    value={serverSettings?.socksProxyPort}
                     handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
+                    disabled={!serverSettings?.socksProxyEnabled}
                 />
-                    </>
-                )}
             </List>
             <List
                 subheader={
@@ -207,21 +205,19 @@ export const ServerSettings = () => {
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
-                {!!serverSettings?.basicAuthEnabled && (
-                    <>
                 <TextSetting
                     settingName={t('settings.server.auth.basic.label.username')}
                     value={serverSettings?.basicAuthUsername}
                     handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
+                    disabled={!serverSettings?.basicAuthEnabled}
                 />
                 <TextSetting
                     settingName={t('settings.server.auth.basic.label.password')}
                     value={serverSettings?.basicAuthPassword}
                     isPassword
                     handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
+                    disabled={!serverSettings?.basicAuthEnabled}
                 />
-                    </>
-                )}
             </List>
             <List
                 subheader={