Make "value" prop of setting components required

src/components/settings/NumberSetting.tsx

@@ -28,7 +28,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 
 type BaseProps = {
     settingTitle: string;
-    settingValue?: string;
+    settingValue: string;
     settingIcon?: React.ReactNode;
     value: number;
     defaultValue?: number;
@@ -117,7 +117,7 @@ export const NumberSetting = ({
                 {settingIcon ? <ListItemIcon>{settingIcon}</ListItemIcon> : null}
                 <ListItemText
                     primary={settingTitle}
-                    secondary={settingValue ?? t('global.label.loading')}
+                    secondary={settingValue}
                     sx={sx}
                     secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
                 />

src/components/settings/SelectSetting.tsx

@@ -36,15 +36,13 @@ export const SelectSetting = <SettingValue extends string | number>({
     settingName,
     dialogDescription,
     value,
-    defaultValue,
     values,
     handleChange,
     disabled = false,
 }: {
     settingName: string;
     dialogDescription?: string;
-    value?: SettingValue;
+    value: SettingValue;
-    defaultValue: SettingValue;
     values: SelectSettingValue<SettingValue>[];
     handleChange: (value: SettingValue) => void;
     disabled?: boolean;
@@ -52,7 +50,7 @@ export const SelectSetting = <SettingValue extends string | number>({
     const { t } = useTranslation();
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
+    const [dialogValue, setDialogValue] = useState(value);
 
     const valueDisplayText = useMemo(() => values.find(([key]) => key === value)?.[1]?.text, [value]);
     const dialogValueDisplayInfo = useMemo(() => values.find(([key]) => key === dialogValue)![1], [dialogValue]);
@@ -67,7 +65,7 @@ export const SelectSetting = <SettingValue extends string | number>({
 
     const closeDialog = (resetValue: boolean = true) => {
         if (resetValue) {
-            setDialogValue(value ?? defaultValue);
+            setDialogValue(value);
         }
 
         setIsDialogOpen(false);

src/components/settings/TimeSetting.tsx

@@ -28,14 +28,14 @@ export const TimeSetting = ({
     handleChange,
 }: {
     settingName: string;
-    value?: string;
+    value: string;
     defaultValue: string;
     handleChange: (path: string) => void;
 }) => {
     const { t, i18n } = useTranslation();
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogValue, setDialogValue] = useState(value ?? defaultValue);
+    const [dialogValue, setDialogValue] = useState(value);
 
     const [locale, setLocale] = useState('en');
 
@@ -58,7 +58,7 @@ export const TimeSetting = ({
             setIsDialogOpen(false);
 
             if (resetValue) {
-                setDialogValue(value ?? defaultValue);
+                setDialogValue(value);
             }
         },
         [value],
@@ -87,9 +87,7 @@ export const TimeSetting = ({
             <ListItemButton onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
-                    secondary={
+                    secondary={dayjs(value, 'HH:mm').locale(currentLocale).format('LT')}
-                        value ? dayjs(value, 'HH:mm').locale(currentLocale).format('LT') : t('global.label.loading')
-                    }
                     secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
                 />
             </ListItemButton>

src/components/settings/downloads/DeleteChaptersWhileReadingSetting.tsx

@@ -42,11 +42,7 @@ const CHAPTERS_TO_DELETE_SELECT_VALUES: SelectSettingValue<(typeof CHAPTERS_TO_D
         CHAPTERS_TO_DELETE_TO_TRANSLATION_KEY[chapterToDelete],
     ]);
 
-const getNormalizedChapterToDelete = (chapterToDelete?: number | boolean) => {
+const getNormalizedChapterToDelete = (chapterToDelete: number | boolean) => {
-    if (chapterToDelete === undefined) {
-        return undefined;
-    }
-
     const isMigrationVersion0 = typeof chapterToDelete === 'boolean';
     if (isMigrationVersion0) {
         return Number(chapterToDelete);
@@ -59,7 +55,7 @@ export const DeleteChaptersWhileReadingSetting = ({
     chapterToDelete,
     handleChange,
 }: {
-    chapterToDelete?: number;
+    chapterToDelete: number;
     handleChange: (chapterToDelete: number) => void;
 }) => {
     const { t } = useTranslation();
@@ -70,7 +66,6 @@ export const DeleteChaptersWhileReadingSetting = ({
         <SelectSetting
             settingName={t('download.settings.delete_chapters.while_reading.label.title')}
             value={normalizedChapterToDelete}
-            defaultValue={0}
             values={CHAPTERS_TO_DELETE_SELECT_VALUES}
             handleChange={handleChange}
         />

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -56,14 +56,10 @@ export const DownloadAheadSetting = ({
             </ListItem>
             <NumberSetting
                 settingTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
-                settingValue={
+                settingValue={t('download.settings.download_ahead.label.value', {
-                    downloadAheadLimit !== undefined
+                    chapters: currentDownloadAheadLimit,
-                        ? t('download.settings.download_ahead.label.value', {
+                    count: currentDownloadAheadLimit,
-                              chapters: currentDownloadAheadLimit,
+                })}
-                              count: currentDownloadAheadLimit,
-                          })
-                        : undefined
-                }
                 value={currentDownloadAheadLimit}
                 minValue={MIN_LIMIT}
                 maxValue={MAX_LIMIT}

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -61,13 +61,9 @@ export const GlobalUpdateSettingsInterval = ({
             </ListItem>
             <NumberSetting
                 settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}
-                settingValue={
+                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
-                    autoUpdateIntervalHours !== undefined
+                    hours: currentAutoUpdateIntervalHours,
-                        ? t('library.settings.global_update.auto_update.interval.label.value', {
+                })}
-                              hours: currentAutoUpdateIntervalHours,
-                          })
-                        : undefined
-                }
                 value={currentAutoUpdateIntervalHours}
                 minValue={MIN_INTERVAL_HOURS}
                 maxValue={MAX_INTERVAL_HOURS}

src/components/settings/text/TextSetting.tsx

@@ -9,16 +9,14 @@
 import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { TextSettingDialog, TextSettingDialogProps } from '@/components/settings/text/TextSettingDialog.tsx';
 
-export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen'> & {
+export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen' | 'value'> &
-    disabled?: boolean;
+    Required<Pick<TextSettingDialogProps, 'value'>> & {
-};
+        disabled?: boolean;
+    };
 
 export const TextSetting = (props: TextSettingProps) => {
-    const { t } = useTranslation();
-
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 
     const { settingName, value, isPassword = false, disabled = false } = props;
@@ -28,7 +26,7 @@ export const TextSetting = (props: TextSettingProps) => {
             <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
-                    secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
+                    secondary={isPassword ? value.replace(/./g, '*') : value}
                     secondaryTypographyProps={{
                         sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
                     }}

src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx

@@ -67,13 +67,9 @@ export const WebUIUpdateIntervalSetting = ({
             </ListItem>
             <NumberSetting
                 settingTitle={t('settings.webui.auto_update.label.interval')}
-                settingValue={
+                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
-                    updateCheckInterval !== undefined
+                    hours: currentUpdateCheckInterval,
-                        ? t('library.settings.global_update.auto_update.interval.label.value', {
+                })}
-                              hours: currentUpdateCheckInterval,
-                          })
-                        : undefined
-                }
                 value={currentUpdateCheckInterval}
                 minValue={MIN_VALUE}
                 maxValue={MAX_VALUE}

src/components/tracker/TrackerActiveCard.tsx

@@ -267,7 +267,6 @@ export const TrackerActiveCard = ({
                                 <Divider orientation="vertical" flexItem />
                                 <SelectSetting<string>
                                     settingName={t('tracking.track_record.label.score')}
-                                    defaultValue={tracker.scores[0]}
                                     value={currentScore}
                                     values={selectSettingValues}
                                     handleChange={(score) => updateTrackerBind({ scoreString: score })}

src/screens/settings/Backup.tsx

@@ -44,11 +44,7 @@ const extractBackupSettings = (settings: ServerSettings): BackupSettingsType =>
     backupTTL: settings.backupTTL,
 });
 
-const getBackupCleanupDisplayValue = (ttl?: number) => {
+const getBackupCleanupDisplayValue = (ttl: number): string => {
-    if (ttl === undefined) {
-        return undefined;
-    }
-
     if (ttl === 0) {
         return translate('global.label.never');
     }
@@ -81,8 +77,6 @@ export function Backup() {
     } = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
-    const backupSettings = settingsData ? extractBackupSettings(settingsData.settings) : undefined;
-
     const { data } = requestManager.useGetBackupRestoreStatus(backupRestoreId ?? '', {
         skip: !backupRestoreId,
         pollInterval: 1000,
@@ -245,6 +239,8 @@ export function Backup() {
         );
     }
 
+    const backupSettings = extractBackupSettings(settingsData!.settings);
+
     return (
         <>
             <List sx={{ padding: 0 }}>
@@ -278,26 +274,22 @@ export function Backup() {
                     <TextSetting
                         settingName={t('settings.backup.automated.location.label.title')}
                         dialogDescription={t('settings.backup.automated.location.label.description')}
-                        value={backupSettings?.backupPath}
+                        value={backupSettings.backupPath}
                         handleChange={(path) => updateSetting('backupPath', path)}
                     />
                     <TimeSetting
                         settingName={t('settings.backup.automated.label.time')}
-                        value={backupSettings?.backupTime}
+                        value={backupSettings.backupTime}
                         defaultValue="00:00"
                         handleChange={(time: string) => updateSetting('backupTime', time)}
                     />
                     <NumberSetting
                         settingTitle={t('settings.backup.automated.label.interval')}
-                        settingValue={
+                        settingValue={t('global.date.value.label.day', {
-                            backupSettings?.backupInterval
+                            days: backupSettings.backupInterval,
-                                ? t('global.date.value.label.day', {
+                            count: backupSettings.backupInterval,
-                                      days: backupSettings.backupInterval,
+                        })}
-                                      count: backupSettings.backupInterval,
+                        value={backupSettings.backupInterval}
-                                  })
-                                : undefined
-                        }
-                        value={backupSettings?.backupInterval ?? 1}
                         defaultValue={1}
                         minValue={1}
                         maxValue={31}
@@ -308,8 +300,8 @@ export function Backup() {
                     />
                     <NumberSetting
                         settingTitle={t('settings.backup.automated.cleanup.label.title')}
-                        settingValue={getBackupCleanupDisplayValue(backupSettings?.backupTTL)}
+                        settingValue={getBackupCleanupDisplayValue(backupSettings.backupTTL)}
-                        value={backupSettings?.backupTTL ?? 14}
+                        value={backupSettings.backupTTL}
                         defaultValue={14}
                         minValue={0}
                         maxValue={1000}

src/screens/settings/BrowseSettings.tsx

@@ -51,7 +51,6 @@ export const BrowseSettings = () => {
     const { data, loading, error, refetch } = requestManager.useGetServerSettings({
         notifyOnNetworkStatusChange: true,
     });
-    const serverSettings = data ? extractBrowseSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const updateSetting = <Setting extends keyof ExtensionsSettings>(
@@ -80,6 +79,8 @@ export const BrowseSettings = () => {
         );
     }
 
+    const serverSettings = extractBrowseSettings(data!.settings);
+
     return (
         <List>
             <ListItem>
@@ -100,11 +101,11 @@ export const BrowseSettings = () => {
             <NumberSetting
                 settingTitle={t('settings.server.requests.sources.parallel.label.title')}
                 settingValue={t('settings.server.requests.sources.parallel.label.value', {
-                    value: serverSettings?.maxSourcesInParallel,
+                    value: serverSettings.maxSourcesInParallel,
-                    count: serverSettings?.maxSourcesInParallel,
+                    count: serverSettings.maxSourcesInParallel,
                 })}
                 valueUnit={t('source.title')}
-                value={serverSettings?.maxSourcesInParallel ?? 6}
+                value={serverSettings.maxSourcesInParallel}
                 defaultValue={6}
                 minValue={1}
                 maxValue={20}
@@ -128,7 +129,7 @@ export const BrowseSettings = () => {
                     updateSetting('extensionRepos', repos);
                     requestManager.clearExtensionCache();
                 }}
-                valueInfos={serverSettings?.extensionRepos.map((extensionRepo) => [extensionRepo]) as [string][]}
+                valueInfos={serverSettings.extensionRepos.map((extensionRepo) => [extensionRepo]) as [string][]}
                 addItemButtonTitle={t('extension.settings.repositories.custom.dialog.action.button.add')}
                 placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
                 validateItem={(repo) =>
@@ -141,7 +142,7 @@ export const BrowseSettings = () => {
             <TextSetting
                 settingName={t('settings.server.local_source.path.label.title')}
                 dialogDescription={t('settings.server.local_source.path.label.description')}
-                value={serverSettings?.localSourcePath}
+                value={serverSettings.localSourcePath}
                 handleChange={(path) => updateSetting('localSourcePath', path)}
             />
         </List>

src/screens/settings/DownloadSettings.tsx

@@ -188,15 +188,12 @@ export const DownloadSettings = () => {
                     dialogDescription={t('download.settings.auto_download.download_limit.label.description')}
                     value={downloadSettings?.autoDownloadNewChaptersLimit ?? 0}
                     settingValue={
-                        // eslint-disable-next-line no-nested-ternary
+                        !downloadSettings.autoDownloadNewChaptersLimit
-                        downloadSettings?.autoDownloadNewChaptersLimit !== undefined
+                            ? t('global.label.none')
-                            ? !downloadSettings.autoDownloadNewChaptersLimit
+                            : t('download.settings.download_ahead.label.value', {
-                                ? t('global.label.none')
+                                  chapters: downloadSettings.autoDownloadNewChaptersLimit,
-                                : t('download.settings.download_ahead.label.value', {
+                                  count: downloadSettings.autoDownloadNewChaptersLimit,
-                                      chapters: downloadSettings.autoDownloadNewChaptersLimit,
+                              })
-                                      count: downloadSettings.autoDownloadNewChaptersLimit,
-                                  })
-                            : undefined
                     }
                     defaultValue={0}
                     minValue={0}

src/screens/settings/ServerSettings.tsx

@@ -89,7 +89,6 @@ export const ServerSettings = () => {
     const { data, loading, error, refetch } = requestManager.useGetServerSettings({
         notifyOnNetworkStatusChange: true,
     });
-    const serverSettings = data ? extractServerSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', window.location.origin);
@@ -121,6 +120,8 @@ export const ServerSettings = () => {
         );
     }
 
+    const serverSettings = extractServerSettings(data!.settings);
+
     return (
         <List>
             <List
@@ -147,14 +148,14 @@ export const ServerSettings = () => {
                 <TextSetting
                     settingName={t('settings.server.address.server.label.ip')}
                     handleChange={(ip) => updateSetting('ip', ip)}
-                    value={serverSettings?.ip}
+                    value={serverSettings.ip}
                     placeholder="0.0.0.0"
                 />
                 <NumberSetting
                     settingTitle={t('settings.server.address.server.label.port')}
-                    settingValue={serverSettings?.port.toString()}
+                    settingValue={serverSettings.port.toString()}
                     handleUpdate={(port) => updateSetting('port', port)}
-                    value={serverSettings?.port ?? 4567}
+                    value={serverSettings.port}
                     defaultValue={4567}
                     valueUnit={t('settings.server.address.server.label.port')}
                 />
@@ -170,14 +171,13 @@ export const ServerSettings = () => {
                     <ListItemText primary={t('settings.server.socks_proxy.label.enable')} />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.socksProxyEnabled}
+                        checked={serverSettings.socksProxyEnabled}
                         onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
                     />
                 </ListItem>
                 <SelectSetting<number>
                     settingName={t('settings.server.socks_proxy.label.version')}
-                    value={serverSettings?.socksProxyVersion}
+                    value={serverSettings.socksProxyVersion}
-                    defaultValue={5}
                     values={[
                         [4, { text: '4' }],
                         [5, { text: '5' }],
@@ -186,22 +186,22 @@ export const ServerSettings = () => {
                 />
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.host')}
-                    value={serverSettings?.socksProxyHost}
+                    value={serverSettings.socksProxyHost}
                     handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
                 />
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.port')}
-                    value={serverSettings?.socksProxyPort}
+                    value={serverSettings.socksProxyPort}
                     handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
                 />
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.username')}
-                    value={serverSettings?.socksProxyUsername}
+                    value={serverSettings.socksProxyUsername}
                     handleChange={(proxyUsername) => updateSetting('socksProxyUsername', proxyUsername)}
                 />
                 <TextSetting
                     settingName={t('settings.server.socks_proxy.label.password')}
-                    value={serverSettings?.socksProxyPassword}
+                    value={serverSettings.socksProxyPassword}
                     handleChange={(proxyPassword) => updateSetting('socksProxyPassword', proxyPassword)}
                     isPassword
                 />
@@ -217,18 +217,18 @@ export const ServerSettings = () => {
                     <ListItemText primary={t('settings.server.auth.basic.label.enable')} />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.basicAuthEnabled}
+                        checked={serverSettings.basicAuthEnabled}
                         onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
                     />
                 </ListItem>
                 <TextSetting
                     settingName={t('settings.server.auth.basic.label.username')}
-                    value={serverSettings?.basicAuthUsername}
+                    value={serverSettings.basicAuthUsername}
                     handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
                 />
                 <TextSetting
                     settingName={t('settings.server.auth.basic.label.password')}
-                    value={serverSettings?.basicAuthPassword}
+                    value={serverSettings.basicAuthPassword}
                     isPassword
                     handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
                 />
@@ -259,25 +259,21 @@ export const ServerSettings = () => {
                     />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.flareSolverrEnabled}
+                        checked={serverSettings.flareSolverrEnabled}
                         onChange={(e) => updateSetting('flareSolverrEnabled', e.target.checked)}
                     />
                 </ListItem>
                 <TextSetting
                     settingName={t('settings.server.cloudflare.flaresolverr.url.label.title')}
                     dialogDescription={t('settings.server.cloudflare.flaresolverr.url.label.description')}
-                    value={serverSettings?.flareSolverrUrl}
+                    value={serverSettings.flareSolverrUrl}
                     handleChange={(url) => updateSetting('flareSolverrUrl', url)}
                 />
                 <NumberSetting
                     settingTitle={t('settings.server.cloudflare.flaresolverr.timeout.label.title')}
-                    settingValue={
+                    settingValue={t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })}
-                        serverSettings?.flareSolverrTimeout !== undefined
-                            ? t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })
-                            : undefined
-                    }
                     dialogDescription={t('settings.server.cloudflare.flaresolverr.timeout.label.description')}
-                    value={serverSettings?.flareSolverrTimeout ?? 60}
+                    value={serverSettings.flareSolverrTimeout}
                     defaultValue={60}
                     minValue={20}
                     maxValue={60 * 5}
@@ -288,18 +284,14 @@ export const ServerSettings = () => {
                 />
                 <TextSetting
                     settingName={t('settings.server.cloudflare.flaresolverr.session.name.label.title')}
-                    value={serverSettings?.flareSolverrSessionName}
+                    value={serverSettings.flareSolverrSessionName}
                     handleChange={(sessionName) => updateSetting('flareSolverrSessionName', sessionName)}
                 />
                 <NumberSetting
                     settingTitle={t('settings.server.cloudflare.flaresolverr.session.ttl.label.title')}
-                    settingValue={
+                    settingValue={t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })}
-                        serverSettings?.flareSolverrTimeout !== undefined
-                            ? t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })
-                            : undefined
-                    }
                     dialogDescription={t('settings.server.cloudflare.flaresolverr.session.ttl.label.description')}
-                    value={serverSettings?.flareSolverrSessionTtl ?? 15}
+                    value={serverSettings.flareSolverrSessionTtl}
                     defaultValue={15}
                     minValue={1}
                     maxValue={60}
@@ -320,7 +312,7 @@ export const ServerSettings = () => {
                     <ListItemText primary={t('settings.server.misc.log_level.label.server')} />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.debugLogsEnabled}
+                        checked={serverSettings.debugLogsEnabled}
                         onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
                     />
                 </ListItem>
@@ -331,7 +323,7 @@ export const ServerSettings = () => {
                     />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.gqlDebugLogsEnabled}
+                        checked={serverSettings.gqlDebugLogsEnabled}
                         onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
                     />
                 </ListItem>
@@ -342,7 +334,7 @@ export const ServerSettings = () => {
                     />
                     <Switch
                         edge="end"
-                        checked={!!serverSettings?.systemTrayEnabled}
+                        checked={serverSettings.systemTrayEnabled}
                         onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
                     />
                 </ListItem>

src/screens/settings/WebUISettings.tsx

@@ -130,11 +130,8 @@ export const WebUISettings = () => {
     const { data, loading, error, refetch } = requestManager.useGetServerSettings({
         notifyOnNetworkStatusChange: true,
     });
-    const webUISettings = data ? extractWebUISettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
-    const isDefaultWebUI = webUISettings?.webUIFlavor === WebUiFlavor.Webui;
-
     const updateSetting = <Setting extends keyof WebUISettingsType>(
         setting: Setting,
         value: WebUISettingsType[Setting],
@@ -160,12 +157,14 @@ export const WebUISettings = () => {
         );
     }
 
+    const webUISettings = extractWebUISettings(data!.settings);
+    const isDefaultWebUI = webUISettings.webUIFlavor === WebUiFlavor.Webui;
+
     return (
         <List>
             <SelectSetting<WebUiFlavor>
                 settingName={t('settings.webui.flavor.label.title')}
-                value={webUISettings?.webUIFlavor}
+                value={webUISettings.webUIFlavor}
-                defaultValue={WebUiFlavor.Webui}
                 values={FLAVOR_SELECT_VALUES}
                 handleChange={(flavor) => updateSetting('webUIFlavor', flavor)}
             />
@@ -173,32 +172,33 @@ export const WebUISettings = () => {
                 <ListItemText primary={t('settings.webui.label.initial_open_browser')} />
                 <Switch
                     edge="end"
-                    checked={!!webUISettings?.initialOpenInBrowserEnabled}
+                    checked={webUISettings.initialOpenInBrowserEnabled}
                     onChange={(e) => updateSetting('initialOpenInBrowserEnabled', e.target.checked)}
                 />
             </ListItem>
             <SelectSetting<WebUiInterface>
                 settingName={t('settings.webui.interface.label.title')}
-                value={webUISettings?.webUIInterface}
+                value={webUISettings.webUIInterface}
-                defaultValue={WebUiInterface.Browser}
                 values={INTERFACE_SELECT_VALUES}
                 handleChange={(webUIInterface) => updateSetting('webUIInterface', webUIInterface)}
             />
             <TextSetting
                 settingName={t('settings.webui.electron_path.label.title')}
                 dialogDescription={t('settings.webui.electron_path.label.description')}
-                value={webUISettings?.electronPath}
+                value={webUISettings.electronPath}
                 handleChange={(path) => updateSetting('electronPath', path)}
             />
             <SelectSetting<WebUiChannel>
                 settingName={t('settings.webui.channel.label.title')}
-                value={webUISettings?.webUIChannel}
+                value={webUISettings.webUIChannel}
-                defaultValue={WebUiChannel.Stable}
                 values={CHANNEL_SELECT_VALUES}
                 handleChange={(channel) => updateSetting('webUIChannel', channel)}
                 disabled={!isDefaultWebUI}
             />
-            <WebUIUpdateIntervalSetting disabled={!isDefaultWebUI} />
+            <WebUIUpdateIntervalSetting
+                disabled={!isDefaultWebUI}
+                updateCheckInterval={data!.settings.webUIUpdateCheckInterval}
+            />
         </List>
     );
 };