Move setting files into new folder

src/modules/settings/Settings.constants.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts';
+import { DEFAULT_SORT_SETTINGS } from '@/modules/migration/Migration.constants.ts';
+import { MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
+
+export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
+    // downloads
+    deleteChaptersManuallyMarkedRead: false,
+    deleteChaptersWhileReading: 0,
+    deleteChaptersWithBookmark: false,
+    downloadAheadLimit: 0,
+
+    // library
+    showAddToLibraryCategorySelectDialog: true,
+    ignoreFilters: false,
+    removeMangaFromCategories: false,
+    showTabSize: false,
+
+    // client
+    devices: [DEFAULT_DEVICE],
+
+    // migration
+    migrateChapters: true,
+    migrateCategories: true,
+    migrateTracking: true,
+    deleteChapters: true,
+    migrateSortSettings: DEFAULT_SORT_SETTINGS,
+
+    // browse
+    hideLibraryEntries: false,
+
+    // tracking
+    updateProgressAfterReading: true,
+    updateProgressManualMarkRead: false,
+
+    // updates
+    webUIInformAvailableUpdate: true,
+    serverInformAvailableUpdate: true,
+
+    // themes
+    customThemes: {},
+    mangaThumbnailBackdrop: true,
+};

src/modules/settings/Settings.types.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { MetadataDownloadSettings } from '@/modules/downloads/Downloads.types.ts';
+import { MetadataLibrarySettings } from '@/modules/library/Library.types.ts';
+import { MetadataClientSettings } from '@/modules/device/Device.types.ts';
+import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
+import { MetadataBrowseSettings } from '@/modules/browse/Browse.types.ts';
+import { MetadataTrackingSettings } from '@/modules/tracker/Tracker.types.ts';
+import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
+import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
+import { GetServerSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
+
+export type MetadataServerSettingKeys = keyof MetadataServerSettings;
+
+export type SearchMetadataKeys = keyof ISearchSettings;
+
+export type MetadataServerSettings = MetadataDownloadSettings &
+    MetadataLibrarySettings &
+    MetadataClientSettings &
+    MetadataMigrationSettings &
+    MetadataBrowseSettings &
+    MetadataTrackingSettings &
+    MetadataUpdateSettings &
+    MetadataThemeSettings;
+
+export interface ISearchSettings {
+    ignoreFilters: boolean;
+}
+
+export type ServerSettings = GetServerSettingsQuery['settings'];

src/modules/settings/components/globalUpdate/GlobalUpdateSettings.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
+import { useTranslation } from 'react-i18next';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import {
+    CategoriesInclusionSetting,
+    CategoriesInclusionSettingProps,
+} from '@/modules/category/components/CategoriesInclusionSetting.tsx';
+import { GlobalUpdateSettingsEntries } from '@/modules/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx';
+import { GlobalUpdateSettingsInterval } from '@/modules/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+
+type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
+
+export const GlobalUpdateSettings = ({
+    serverSettings,
+    categories,
+}: {
+    serverSettings: ServerSettings;
+    categories: CategoriesInclusionSettingProps['categories'];
+}) => {
+    const { t } = useTranslation();
+
+    const { updateMangas } = serverSettings;
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const updateSetting = async <Setting extends keyof LibrarySettingsType>(
+        setting: Setting,
+        value: LibrarySettingsType[Setting],
+    ) => {
+        try {
+            await mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
+        } catch (error) {
+            makeToast(t('global.error.label.failed_to_save_changes'), 'error');
+        }
+    };
+
+    return (
+        <List
+            subheader={
+                <ListSubheader component="div" id="global-update-settings">
+                    {t('library.settings.global_update.title')}
+                </ListSubheader>
+            }
+        >
+            <GlobalUpdateSettingsInterval globalUpdateInterval={serverSettings.globalUpdateInterval} />
+            <GlobalUpdateSettingsEntries serverSettings={serverSettings} />
+            <CategoriesInclusionSetting
+                categories={categories}
+                includeField="includeInUpdate"
+                dialogText={t('library.settings.global_update.categories.label.info')}
+            />
+            <ListItem>
+                <ListItemText
+                    primary={t('library.settings.global_update.metadata.label.title')}
+                    secondary={t('library.settings.global_update.metadata.label.description')}
+                />
+                <Switch
+                    edge="end"
+                    checked={updateMangas}
+                    onChange={(e) => updateSetting('updateMangas', e.target.checked)}
+                />
+            </ListItem>
+        </List>
+    );
+};

src/modules/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx

@@ -0,0 +1,157 @@
+/*
+ * 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 { t as translate } from 'i18next';
+import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { CheckboxContainer } from '@/modules/core/components/inputs/CheckboxContainer.ts';
+import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
+import { TranslationKey } from '@/Base.types.ts';
+import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+
+type GlobalUpdateSkipEntriesSettings = Pick<
+    ServerSettings,
+    'excludeUnreadChapters' | 'excludeNotStarted' | 'excludeCompleted'
+>;
+
+const settingToTextMap: { [setting in keyof GlobalUpdateSkipEntriesSettings]: TranslationKey } = {
+    excludeUnreadChapters: 'library.settings.global_update.entries.label.unread_chapters',
+    excludeNotStarted: 'library.settings.global_update.entries.label.not_started',
+    excludeCompleted: 'library.settings.global_update.entries.label.completed',
+};
+
+const getSkipMangasText = (settings: GlobalUpdateSkipEntriesSettings) => {
+    const skipSettings: string[] = [];
+
+    if (settings.excludeUnreadChapters) {
+        skipSettings.push(translate(settingToTextMap.excludeUnreadChapters) as string);
+    }
+
+    if (settings.excludeNotStarted) {
+        skipSettings.push(translate(settingToTextMap.excludeNotStarted) as string);
+    }
+
+    if (settings.excludeCompleted) {
+        skipSettings.push(translate(settingToTextMap.excludeCompleted) as string);
+    }
+
+    const isNothingExcluded = !skipSettings.length;
+    if (isNothingExcluded) {
+        skipSettings.push(translate('global.label.none'));
+    }
+
+    return skipSettings.join(', ');
+};
+
+const extractSkipEntriesSettings = (serverSettings: ServerSettings): GlobalUpdateSkipEntriesSettings => ({
+    excludeCompleted: serverSettings.excludeCompleted,
+    excludeNotStarted: serverSettings.excludeNotStarted,
+    excludeUnreadChapters: serverSettings.excludeUnreadChapters,
+});
+
+export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings: ServerSettings }) => {
+    const { t } = useTranslation();
+
+    const globalUpdateSettings = extractSkipEntriesSettings(serverSettings);
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const [dialogSettings, setDialogSettings] = useState<GlobalUpdateSkipEntriesSettings>(
+        globalUpdateSettings ?? ({} as GlobalUpdateSkipEntriesSettings),
+    );
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const skipEntriesText = getSkipMangasText(globalUpdateSettings);
+
+    const updateSettings = async () => {
+        const didSettingsChange =
+            globalUpdateSettings?.excludeCompleted !== dialogSettings.excludeCompleted ||
+            globalUpdateSettings.excludeNotStarted !== dialogSettings.excludeNotStarted ||
+            globalUpdateSettings.excludeUnreadChapters !== dialogSettings.excludeUnreadChapters;
+
+        setIsDialogOpen(false);
+
+        if (!didSettingsChange) {
+            return;
+        }
+
+        try {
+            await mutateSettings({ variables: { input: { settings: dialogSettings } } });
+        } catch (error) {
+            makeToast(t('global.error.label.failed_to_save_changes'), 'error');
+        }
+    };
+
+    const closeDialog = () => {
+        setDialogSettings(globalUpdateSettings ?? ({} as GlobalUpdateSkipEntriesSettings));
+        setIsDialogOpen(false);
+    };
+
+    useEffect(() => {
+        if (!globalUpdateSettings) {
+            return;
+        }
+
+        setDialogSettings(globalUpdateSettings);
+    }, [
+        globalUpdateSettings?.excludeCompleted,
+        globalUpdateSettings?.excludeNotStarted,
+        globalUpdateSettings?.excludeUnreadChapters,
+    ]);
+
+    return (
+        <>
+            <ListItemButton onClick={() => setIsDialogOpen(true)}>
+                <ListItemText
+                    primary={t('library.settings.global_update.entries.title')}
+                    secondary={skipEntriesText}
+                    onClick={() => setIsDialogOpen(true)}
+                />
+            </ListItemButton>
+
+            <Dialog open={isDialogOpen} onClose={closeDialog}>
+                <DialogContent>
+                    <DialogTitle sx={{ paddingLeft: 0 }}>
+                        {t('library.settings.global_update.entries.title')}
+                    </DialogTitle>
+                    <CheckboxContainer>
+                        {Object.entries(dialogSettings).map(([setting, value]) => (
+                            <CheckboxInput
+                                key={setting}
+                                label={t(settingToTextMap[setting as keyof GlobalUpdateSkipEntriesSettings])}
+                                checked={value}
+                                onChange={(_, checked) => {
+                                    setDialogSettings({
+                                        ...dialogSettings,
+                                        [setting]: checked,
+                                    });
+                                }}
+                            />
+                        ))}
+                    </CheckboxContainer>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={closeDialog} color="primary">
+                        {t('global.button.cancel')}
+                    </Button>
+                    <Button onClick={updateSettings} color="primary">
+                        {t('global.button.ok')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};

src/modules/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import { useCallback } from 'react';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
+import { getPersistedServerSetting, usePersistedValue } from '@/modules/core/hooks/usePersistedValue.tsx';
+
+import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+
+const DEFAULT_INTERVAL_HOURS = 12;
+const MIN_INTERVAL_HOURS = 6;
+const MAX_INTERVAL_HOURS = 24 * 7 * 4; // 1 month
+
+export const GlobalUpdateSettingsInterval = ({
+    globalUpdateInterval,
+}: {
+    globalUpdateInterval: ServerSettings['globalUpdateInterval'];
+}) => {
+    const { t } = useTranslation();
+
+    const autoUpdateIntervalHours = globalUpdateInterval;
+    const doAutoUpdates = !!autoUpdateIntervalHours;
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+    const [currentAutoUpdateIntervalHours, persistAutoUpdateIntervalHours] = usePersistedValue(
+        'lastGlobalUpdateInterval',
+        DEFAULT_INTERVAL_HOURS,
+        autoUpdateIntervalHours,
+        getPersistedServerSetting,
+    );
+
+    const updateSetting = useCallback(
+        (newGlobalUpdateInterval: number) => {
+            persistAutoUpdateIntervalHours(
+                newGlobalUpdateInterval === 0 ? currentAutoUpdateIntervalHours : newGlobalUpdateInterval,
+            );
+            mutateSettings({ variables: { input: { settings: { globalUpdateInterval: newGlobalUpdateInterval } } } });
+        },
+        [currentAutoUpdateIntervalHours],
+    );
+
+    const setDoAutoUpdates = (enable: boolean) => {
+        const newGlobalUpdateInterval = enable ? currentAutoUpdateIntervalHours : 0;
+        updateSetting(newGlobalUpdateInterval);
+    };
+
+    return (
+        <List>
+            <ListItem>
+                <ListItemText primary={t('library.settings.global_update.auto_update.label.title')} />
+                <Switch edge="end" checked={doAutoUpdates} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
+            </ListItem>
+            <NumberSetting
+                settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}
+                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
+                    hours: currentAutoUpdateIntervalHours,
+                })}
+                value={currentAutoUpdateIntervalHours}
+                minValue={MIN_INTERVAL_HOURS}
+                maxValue={MAX_INTERVAL_HOURS}
+                defaultValue={DEFAULT_INTERVAL_HOURS}
+                showSlider
+                valueUnit={t('global.time.hour_short')}
+                handleUpdate={updateSetting}
+                disabled={!doAutoUpdates}
+            />
+        </List>
+    );
+};

src/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import { useCallback } from 'react';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
+import { getPersistedServerSetting, usePersistedValue } from '@/modules/core/hooks/usePersistedValue.tsx';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+
+const DEFAULT_VALUE = 23;
+const MIN_VALUE = 1;
+const MAX_VALUE = 23; // 1 month
+
+export const WebUIUpdateIntervalSetting = ({
+    disabled = false,
+    updateCheckInterval,
+}: {
+    disabled?: boolean;
+    updateCheckInterval: ServerSettings['webUIUpdateCheckInterval'];
+}) => {
+    const { t } = useTranslation();
+
+    const shouldAutoUpdate = !!updateCheckInterval;
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+    const [currentUpdateCheckInterval, persistUpdateCheckInterval] = usePersistedValue(
+        'lastUpdateCheckInterval',
+        DEFAULT_VALUE,
+        updateCheckInterval,
+        getPersistedServerSetting,
+    );
+
+    const updateSetting = useCallback(
+        (webUIUpdateCheckInterval: number) => {
+            persistUpdateCheckInterval(
+                webUIUpdateCheckInterval === 0 ? currentUpdateCheckInterval : webUIUpdateCheckInterval,
+            );
+            mutateSettings({ variables: { input: { settings: { webUIUpdateCheckInterval } } } }).catch(() =>
+                makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
+            );
+        },
+        [currentUpdateCheckInterval],
+    );
+
+    const setDoAutoUpdates = (enable: boolean) => {
+        const globalUpdateInterval = enable ? currentUpdateCheckInterval : 0;
+        updateSetting(globalUpdateInterval);
+    };
+
+    return (
+        <List>
+            <ListItem>
+                <ListItemText primary={t('settings.webui.auto_update.label.title')} />
+                <Switch
+                    disabled={disabled}
+                    edge="end"
+                    checked={shouldAutoUpdate}
+                    onChange={(e) => setDoAutoUpdates(e.target.checked)}
+                />
+            </ListItem>
+            <NumberSetting
+                settingTitle={t('settings.webui.auto_update.label.interval')}
+                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
+                    hours: currentUpdateCheckInterval,
+                })}
+                value={currentUpdateCheckInterval}
+                minValue={MIN_VALUE}
+                maxValue={MAX_VALUE}
+                defaultValue={DEFAULT_VALUE}
+                showSlider
+                valueUnit={t('global.time.hour_short')}
+                handleUpdate={updateSetting}
+                disabled={disabled || !shouldAutoUpdate}
+            />
+        </List>
+    );
+};

src/modules/settings/screens/About.tsx

@@ -0,0 +1,183 @@
+/*
+ * 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 { useContext, useLayoutEffect } from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import { useTranslation } from 'react-i18next';
+import ListSubheader from '@mui/material/ListSubheader';
+import Divider from '@mui/material/Divider';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { UpdateState } from '@/lib/graphql/generated/graphql.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { getBuildTime, getVersion } from '@/modules/app-updates/services/AppUpdateChecker.tsx';
+import { VersionInfo } from '@/modules/app-updates/components/VersionInfo.tsx';
+
+export function About() {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useLayoutEffect(() => {
+        setTitle(t('settings.about.title'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const { data, loading, error, refetch } = requestManager.useGetAbout({ notifyOnNetworkStatusChange: true });
+
+    const {
+        data: serverUpdateCheckData,
+        loading: isCheckingForServerUpdate,
+        refetch: checkForServerUpdate,
+        error: serverUpdateCheckError,
+    } = requestManager.useCheckForServerUpdate({ notifyOnNetworkStatusChange: true });
+    const {
+        data: webUIUpdateData,
+        loading: isCheckingForWebUIUpdate,
+        refetch: checkForWebUIUpdate,
+        error: orgWebUIUpdateCheckError,
+    } = requestManager.useCheckForWebUIUpdate({ notifyOnNetworkStatusChange: true });
+    const webUIUpdateCheckError = orgWebUIUpdateCheckError || webUIUpdateData?.checkForWebUIUpdate.tag === '';
+
+    const { data: webUIUpdateStatusData } = requestManager.useGetWebUIUpdateStatus();
+    const { state: webUIUpdateState, progress: webUIUpdateProgress } = webUIUpdateStatusData?.getWebUIUpdateStatus ?? {
+        state: UpdateState.Idle,
+        progress: 0,
+    };
+
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
+            />
+        );
+    }
+
+    const { aboutServer, aboutWebUI } = data!;
+    const selectedServerChannelInfo = serverUpdateCheckData?.checkForServerUpdates?.find(
+        (channel) => channel.channel === aboutServer.buildType,
+    );
+    const isServerUpdateAvailable =
+        !!selectedServerChannelInfo?.tag && selectedServerChannelInfo.tag !== getVersion(aboutServer);
+    const isWebUIUpdateAvailable = !!webUIUpdateData?.checkForWebUIUpdate.updateAvailable;
+
+    return (
+        <List sx={{ pt: 0 }}>
+            <List
+                sx={{ padding: 0 }}
+                subheader={
+                    <ListSubheader component="div" id="about-server-info">
+                        {t('settings.server.title.server')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.title.server')}
+                        secondary={`${aboutServer.name} ${aboutServer.buildType}`}
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.about.server.label.version')}
+                        secondary={
+                            <VersionInfo
+                                version={getVersion(aboutServer)}
+                                isCheckingForUpdate={isCheckingForServerUpdate}
+                                isUpdateAvailable={isServerUpdateAvailable}
+                                updateCheckError={serverUpdateCheckError}
+                                checkForUpdate={checkForServerUpdate}
+                                downloadAsLink
+                                url={selectedServerChannelInfo?.url ?? ''}
+                            />
+                        }
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.about.server.label.build_time')}
+                        secondary={getBuildTime(aboutServer)}
+                    />
+                </ListItem>
+            </List>
+            <Divider />
+            <List
+                sx={{ padding: 0 }}
+                subheader={
+                    <ListSubheader component="div" id="about-webui-info">
+                        {t('settings.webui.title.webui')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.about.webui.label.channel')}
+                        secondary={aboutWebUI.channel.toLocaleUpperCase()}
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.about.webui.label.version')}
+                        secondary={
+                            <VersionInfo
+                                version={aboutWebUI.tag}
+                                isCheckingForUpdate={isCheckingForWebUIUpdate}
+                                isUpdateAvailable={isWebUIUpdateAvailable}
+                                updateCheckError={webUIUpdateCheckError}
+                                checkForUpdate={checkForWebUIUpdate}
+                                triggerUpdate={() =>
+                                    requestManager
+                                        .updateWebUI()
+                                        .response.catch(defaultPromiseErrorHandler('About::updateWebUI'))
+                                }
+                                progress={webUIUpdateProgress}
+                                updateState={webUIUpdateState}
+                            />
+                        }
+                    />
+                </ListItem>
+            </List>
+            <Divider />
+            <List
+                subheader={
+                    <ListSubheader component="div" id="about-links">
+                        {t('global.label.links')}
+                    </ListSubheader>
+                }
+            >
+                <ListItemLink to={aboutServer.github} target="_blank" rel="noreferrer">
+                    <ListItemText primary={t('settings.about.server.label.github')} secondary={aboutServer.github} />
+                </ListItemLink>
+                <ListItemLink to="https://github.com/Suwayomi/Suwayomi-WebUI" target="_blank" rel="noreferrer">
+                    <ListItemText
+                        primary={t('settings.about.webui.label.github')}
+                        secondary="https://github.com/Suwayomi/Suwayomi-WebUI"
+                    />
+                </ListItemLink>
+                <ListItemLink to={aboutServer.discord} target="_blank" rel="noreferrer">
+                    <ListItemText primary={t('global.label.discord')} secondary={aboutServer.discord} />
+                </ListItemLink>
+            </List>
+        </List>
+    );
+}

src/modules/settings/screens/Appearance.tsx

@@ -0,0 +1,171 @@
+/*
+ * 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 { useContext, useLayoutEffect } from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import ListSubheader from '@mui/material/ListSubheader';
+import Switch from '@mui/material/Switch';
+import Link from '@mui/material/Link';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
+import { Select } from '@/modules/core/components/inputs/Select.tsx';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
+import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
+import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { I18nResourceCode, i18nResources } from '@/i18n';
+import { langCodeToName } from '@/lib/Languages.tsx';
+import { getTheme } from '@/modules/theme/services/AppThemes.ts';
+import { ThemeList } from '@/modules/theme/components/ThemeList.tsx';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
+
+export const Appearance = () => {
+    const { t, i18n } = useTranslation();
+    const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode, appTheme } = useContext(ThemeModeContext);
+
+    const { setTitle, setAction } = useContext(NavBarContext);
+    useLayoutEffect(() => {
+        setTitle(t('settings.appearance.title'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const {
+        settings,
+        request: { loading, error, refetch },
+    } = useMetadataServerSettings();
+    const updateMetadataSetting = createUpdateMetadataServerSettings<keyof MetadataThemeSettings>(() =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
+    );
+
+    const isDarkMode =
+        getTheme(appTheme).muiTheme.palette?.mode === 'dark' || MediaQuery.getThemeMode() === ThemeMode.DARK;
+
+    const DEFAULT_ITEM_WIDTH = 300;
+    const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
+
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('Appearance::refetch'))}
+            />
+        );
+    }
+
+    return (
+        <List
+            subheader={
+                <ListSubheader component="div" id="appearance-theme">
+                    {t('settings.appearance.theme.title')}
+                </ListSubheader>
+            }
+        >
+            <ListItem>
+                <ListItemText primary={t('settings.appearance.theme.device_theme')} />
+                <Select<ThemeMode> value={themeMode} onChange={(e) => setThemeMode(e.target.value as ThemeMode)}>
+                    <MenuItem key={ThemeMode.SYSTEM} value={ThemeMode.SYSTEM}>
+                        System
+                    </MenuItem>
+                    <MenuItem key={ThemeMode.DARK} value={ThemeMode.DARK}>
+                        Dark
+                    </MenuItem>
+                    <MenuItem key={ThemeMode.LIGHT} value={ThemeMode.LIGHT}>
+                        Light
+                    </MenuItem>
+                </Select>
+            </ListItem>
+            <ThemeList />
+            {isDarkMode && (
+                <ListItem>
+                    <ListItemText primary={t('settings.appearance.theme.pure_black_mode')} />
+                    <Switch checked={pureBlackMode} onChange={(_, enabled) => setPureBlackMode(enabled)} />
+                </ListItem>
+            )}
+            <List
+                subheader={
+                    <ListSubheader component="div" id="appearance-theme">
+                        {t('global.label.display')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('global.language.label.language')}
+                        secondary={
+                            <>
+                                <span>{t('settings.label.language_description')} </span>
+                                <Link
+                                    href="https://hosted.weblate.org/projects/suwayomi/suwayomi-webui"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    {t('global.language.title.weblate')}
+                                </Link>
+                            </>
+                        }
+                    />
+                    <Select
+                        value={i18nResources.includes(i18n.language as I18nResourceCode) ? i18n.language : 'en'}
+                        onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
+                    >
+                        {i18nResources.map((language) => (
+                            <MenuItem key={language} value={language}>
+                                {langCodeToName(language)}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </ListItem>
+                <NumberSetting
+                    settingTitle={t('settings.label.manga_item_width')}
+                    settingValue={`px: ${itemWidth}`}
+                    value={itemWidth}
+                    defaultValue={DEFAULT_ITEM_WIDTH}
+                    minValue={100}
+                    maxValue={1000}
+                    stepSize={10}
+                    valueUnit="px"
+                    showSlider
+                    handleUpdate={setItemWidth}
+                />
+
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.appearance.manga_thumbnail_backdrop.title')}
+                        secondary={t('settings.appearance.manga_thumbnail_backdrop.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={settings.mangaThumbnailBackdrop}
+                        onChange={(e) => updateMetadataSetting('mangaThumbnailBackdrop', e.target.checked)}
+                    />
+                </ListItem>
+            </List>
+        </List>
+    );
+};

src/modules/settings/screens/ServerSettings.tsx

@@ -0,0 +1,453 @@
+/*
+ * 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, Trans } from 'react-i18next';
+import { useContext, useLayoutEffect, useMemo } from 'react';
+import Link from '@mui/material/Link';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import ListSubheader from '@mui/material/ListSubheader';
+import { t as translate } from 'i18next';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
+import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
+import { SelectSetting } from '@/modules/core/components/settings/SelectSetting.tsx';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
+import { ServerSettings as GqlServerSettings } from '@/modules/settings/Settings.types.ts';
+
+type ServerSettingsType = Pick<
+    GqlServerSettings,
+    | 'ip'
+    | 'port'
+    | 'socksProxyEnabled'
+    | 'socksProxyVersion'
+    | 'socksProxyHost'
+    | 'socksProxyPort'
+    | 'socksProxyUsername'
+    | 'socksProxyPassword'
+    | 'debugLogsEnabled'
+    | 'gqlDebugLogsEnabled'
+    | 'systemTrayEnabled'
+    | 'maxLogFiles'
+    | 'maxLogFileSize'
+    | 'maxLogFolderSize'
+    | 'basicAuthEnabled'
+    | 'basicAuthUsername'
+    | 'basicAuthPassword'
+    | 'flareSolverrEnabled'
+    | 'flareSolverrTimeout'
+    | 'flareSolverrUrl'
+    | 'flareSolverrSessionName'
+    | 'flareSolverrSessionTtl'
+    | 'flareSolverrAsResponseFallback'
+>;
+
+const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
+    ip: settings.ip,
+    port: settings.port,
+    socksProxyEnabled: settings.socksProxyEnabled,
+    socksProxyVersion: settings.socksProxyVersion,
+    socksProxyHost: settings.socksProxyHost,
+    socksProxyPort: settings.socksProxyPort,
+    socksProxyUsername: settings.socksProxyUsername,
+    socksProxyPassword: settings.socksProxyPassword,
+    debugLogsEnabled: settings.debugLogsEnabled,
+    gqlDebugLogsEnabled: settings.gqlDebugLogsEnabled,
+    systemTrayEnabled: settings.systemTrayEnabled,
+    maxLogFiles: settings.maxLogFiles,
+    maxLogFileSize: settings.maxLogFileSize,
+    maxLogFolderSize: settings.maxLogFolderSize,
+    basicAuthEnabled: settings.basicAuthEnabled,
+    basicAuthUsername: settings.basicAuthUsername,
+    basicAuthPassword: settings.basicAuthPassword,
+    flareSolverrEnabled: settings.flareSolverrEnabled,
+    flareSolverrTimeout: settings.flareSolverrTimeout,
+    flareSolverrUrl: settings.flareSolverrUrl,
+    flareSolverrSessionName: settings.flareSolverrSessionName,
+    flareSolverrSessionTtl: settings.flareSolverrSessionTtl,
+    flareSolverrAsResponseFallback: settings.flareSolverrAsResponseFallback,
+});
+
+const getLogFilesCleanupDisplayValue = (ttl: number): string => {
+    if (ttl === 0) {
+        return translate('global.label.never');
+    }
+
+    return translate('settings.server.misc.log_files.file_cleanup.value', { days: ttl, count: ttl });
+};
+
+export const ServerSettings = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useLayoutEffect(() => {
+        setTitle(t('settings.server.title.settings'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const {
+        settings: { serverInformAvailableUpdate },
+        loading: areMetadataServerSettingsLoading,
+        request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
+    } = useMetadataServerSettings();
+    const updateMetadataServerSettings = createUpdateMetadataServerSettings<
+        keyof Pick<MetadataUpdateSettings, 'serverInformAvailableUpdate'>
+    >(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
+
+    const {
+        data,
+        loading: areServerSettingsLoading,
+        error: serverSettingsError,
+        refetch: refetchServerSettings,
+    } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', window.location.origin);
+
+    const handleServerAddressChange = (address: string) => {
+        const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
+        setServerAddress(serverBaseUrl);
+        requestManager.reset();
+    };
+
+    const updateSetting = <Setting extends keyof ServerSettingsType>(
+        setting: Setting,
+        value: ServerSettingsType[Setting],
+    ) => {
+        mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
+            makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
+        );
+    };
+
+    const localSettings = useMemo(
+        () => (
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-client">
+                        {t('global.label.client')}
+                    </ListSubheader>
+                }
+            >
+                <TextSetting
+                    settingName={t('settings.about.server.label.address')}
+                    handleChange={handleServerAddressChange}
+                    value={serverAddress}
+                    placeholder="http://localhost:4567"
+                />
+                <ListItem>
+                    <ListItemText
+                        primary={t('global.update.settings.inform.label.title')}
+                        secondary={t('global.update.settings.inform.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={serverInformAvailableUpdate}
+                        onChange={(e) => updateMetadataServerSettings('serverInformAvailableUpdate', e.target.checked)}
+                    />
+                </ListItem>
+            </List>
+        ),
+        [serverAddress, serverInformAvailableUpdate],
+    );
+
+    const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
+    if (loading) {
+        return (
+            <>
+                {localSettings}
+                <LoadingPlaceholder />
+            </>
+        );
+    }
+
+    const error = metadataServerSettingsError ?? serverSettingsError;
+    if (error) {
+        return (
+            <>
+                {localSettings}
+                <EmptyViewAbsoluteCentered
+                    message={t('global.error.label.failed_to_load_data')}
+                    messageExtra={error.message}
+                    retry={() => {
+                        if (metadataServerSettingsError) {
+                            refetchServerMetadataSettings().catch(
+                                defaultPromiseErrorHandler('ServerSettings::refetchServerMetadataSettings'),
+                            );
+                        }
+
+                        if (serverSettingsError) {
+                            refetchServerSettings().catch(
+                                defaultPromiseErrorHandler('ServerSettings::refetchServerSettings'),
+                            );
+                        }
+                    }}
+                />
+            </>
+        );
+    }
+
+    const serverSettings = extractServerSettings(data!.settings);
+
+    return (
+        <List sx={{ pt: 0 }}>
+            {localSettings}
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-server-address">
+                        {t('settings.server.address.server.title')}
+                    </ListSubheader>
+                }
+            >
+                <TextSetting
+                    settingName={t('settings.server.address.server.label.ip')}
+                    handleChange={(ip) => updateSetting('ip', ip)}
+                    value={serverSettings.ip}
+                    placeholder="0.0.0.0"
+                />
+                <NumberSetting
+                    settingTitle={t('settings.server.address.server.label.port')}
+                    settingValue={serverSettings.port.toString()}
+                    handleUpdate={(port) => updateSetting('port', port)}
+                    value={serverSettings.port}
+                    defaultValue={4567}
+                    valueUnit={t('settings.server.address.server.label.port')}
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-socks-proxy">
+                        {t('settings.server.socks_proxy.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText primary={t('settings.server.socks_proxy.label.enable')} />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.socksProxyEnabled}
+                        onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <SelectSetting<number>
+                    settingName={t('settings.server.socks_proxy.label.version')}
+                    value={serverSettings.socksProxyVersion}
+                    values={[
+                        [4, { text: '4' }],
+                        [5, { text: '5' }],
+                    ]}
+                    handleChange={(socksProxyVersion) => updateSetting('socksProxyVersion', socksProxyVersion)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.socks_proxy.label.host')}
+                    value={serverSettings.socksProxyHost}
+                    handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.socks_proxy.label.port')}
+                    value={serverSettings.socksProxyPort}
+                    handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.socks_proxy.label.username')}
+                    value={serverSettings.socksProxyUsername}
+                    handleChange={(proxyUsername) => updateSetting('socksProxyUsername', proxyUsername)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.socks_proxy.label.password')}
+                    value={serverSettings.socksProxyPassword}
+                    handleChange={(proxyPassword) => updateSetting('socksProxyPassword', proxyPassword)}
+                    isPassword
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-auth">
+                        {t('settings.server.auth.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText primary={t('settings.server.auth.basic.label.enable')} />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.basicAuthEnabled}
+                        onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <TextSetting
+                    settingName={t('settings.server.auth.basic.label.username')}
+                    value={serverSettings.basicAuthUsername}
+                    handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.auth.basic.label.password')}
+                    value={serverSettings.basicAuthPassword}
+                    isPassword
+                    handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-clouadflare-bypass">
+                        {t('settings.server.cloudflare.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.cloudflare.flaresolverr.enabled.label.title')}
+                        secondary={
+                            <Trans i18nKey="settings.server.cloudflare.flaresolverr.enabled.label.description">
+                                See{' '}
+                                <Link
+                                    href="https://github.com/FlareSolverr/FlareSolverr?tab=readme-ov-file#installation"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                >
+                                    FlareSolverr
+                                </Link>{' '}
+                                for information on how to set it up
+                            </Trans>
+                        }
+                    />
+                    <Switch
+                        edge="end"
+                        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}
+                    handleChange={(url) => updateSetting('flareSolverrUrl', url)}
+                />
+                <NumberSetting
+                    settingTitle={t('settings.server.cloudflare.flaresolverr.timeout.label.title')}
+                    settingValue={t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })}
+                    dialogDescription={t('settings.server.cloudflare.flaresolverr.timeout.label.description')}
+                    value={serverSettings.flareSolverrTimeout}
+                    defaultValue={60}
+                    minValue={20}
+                    maxValue={60 * 5}
+                    stepSize={1}
+                    showSlider
+                    valueUnit={t('global.time.seconds.second_other')}
+                    handleUpdate={(timeout) => updateSetting('flareSolverrTimeout', timeout)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.cloudflare.flaresolverr.session.name.label.title')}
+                    value={serverSettings.flareSolverrSessionName}
+                    handleChange={(sessionName) => updateSetting('flareSolverrSessionName', sessionName)}
+                />
+                <NumberSetting
+                    settingTitle={t('settings.server.cloudflare.flaresolverr.session.ttl.label.title')}
+                    settingValue={t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })}
+                    dialogDescription={t('settings.server.cloudflare.flaresolverr.session.ttl.label.description')}
+                    value={serverSettings.flareSolverrSessionTtl}
+                    defaultValue={15}
+                    minValue={1}
+                    maxValue={60}
+                    stepSize={1}
+                    showSlider
+                    valueUnit={t('global.time.minutes.minute_other')}
+                    handleUpdate={(sessionTTL) => updateSetting('flareSolverrSessionTtl', sessionTTL)}
+                />
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.title')}
+                        secondary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.flareSolverrAsResponseFallback}
+                        onChange={(e) => updateSetting('flareSolverrAsResponseFallback', e.target.checked)}
+                    />
+                </ListItem>
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-misc">
+                        {t('settings.server.misc.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText primary={t('settings.server.misc.log_level.label.server')} />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.debugLogsEnabled}
+                        onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.misc.log_level.graphql.label.title')}
+                        secondary={t('settings.server.misc.log_level.graphql.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.gqlDebugLogsEnabled}
+                        onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.misc.tray_icon.label.title')}
+                        secondary={t('settings.server.misc.tray_icon.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={serverSettings.systemTrayEnabled}
+                        onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
+                    />
+                </ListItem>
+                <NumberSetting
+                    settingTitle={t('settings.server.misc.log_files.file_cleanup.title')}
+                    settingValue={getLogFilesCleanupDisplayValue(serverSettings.maxLogFiles)}
+                    value={serverSettings.maxLogFiles}
+                    valueUnit={t('global.date.label.day_one')}
+                    handleUpdate={(maxFiles) => updateSetting('maxLogFiles', maxFiles)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.misc.log_files.file_size.title')}
+                    value={serverSettings.maxLogFileSize}
+                    dialogDescription={t('settings.server.misc.log_files.file_size.description')}
+                    validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
+                    handleChange={(maxLogFileSize) => updateSetting('maxLogFileSize', maxLogFileSize)}
+                />
+                <TextSetting
+                    settingName={t('settings.server.misc.log_files.total_size.title')}
+                    value={serverSettings.maxLogFolderSize}
+                    dialogDescription={t('settings.server.misc.log_files.total_size.description')}
+                    validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
+                    handleChange={(maxLogFolderSize) => updateSetting('maxLogFolderSize', maxLogFolderSize)}
+                />
+            </List>
+        </List>
+    );
+};

src/modules/settings/screens/Settings.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 { useContext, useLayoutEffect } from 'react';
+import AutoStoriesIcon from '@mui/icons-material/AutoStories';
+import List from '@mui/material/List';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import BackupIcon from '@mui/icons-material/Backup';
+import InfoIcon from '@mui/icons-material/Info';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
+import { useTranslation } from 'react-i18next';
+import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
+import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
+import DnsIcon from '@mui/icons-material/Dns';
+import WebIcon from '@mui/icons-material/Web';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
+import DevicesIcon from '@mui/icons-material/Devices';
+import SyncIcon from '@mui/icons-material/Sync';
+import PaletteIcon from '@mui/icons-material/Palette';
+import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+
+export function Settings() {
+    const { t } = useTranslation();
+
+    const { setTitle, setAction } = useContext(NavBarContext);
+    useLayoutEffect(() => {
+        setTitle(t('settings.title'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const [triggerClearServerCache, { loading: isClearingServerCache }] = requestManager.useClearServerCache();
+
+    const clearServerCache = async () => {
+        try {
+            await triggerClearServerCache();
+            makeToast(t('settings.clear_cache.label.success'), 'success');
+        } catch (e) {
+            makeToast(t('settings.clear_cache.label.failure'), 'error');
+        }
+    };
+
+    return (
+        <List sx={{ padding: 0 }}>
+            <ListItemLink to="/settings/appearance">
+                <ListItemIcon>
+                    <PaletteIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.appearance.title')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/categories">
+                <ListItemIcon>
+                    <ListAltIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('category.title.category_other')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/defaultReaderSettings">
+                <ListItemIcon>
+                    <AutoStoriesIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reader.settings.title.default_reader_settings')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/librarySettings">
+                <ListItemIcon>
+                    <CollectionsOutlinedBookmarkIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('library.title')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/downloadSettings">
+                <ListItemIcon>
+                    <GetAppOutlinedIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('download.title')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/trackingSettings">
+                <ListItemIcon>
+                    <SyncIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('tracking.title')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/backup">
+                <ListItemIcon>
+                    <BackupIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.backup.title')} />
+            </ListItemLink>
+
+            <ListItemButton disabled={isClearingServerCache} onClick={clearServerCache}>
+                <ListItemIcon>
+                    <DeleteForeverIcon />
+                </ListItemIcon>
+                <ListItemText
+                    primary={t('settings.clear_cache.label.title')}
+                    secondary={t('settings.clear_cache.label.description')}
+                />
+            </ListItemButton>
+            <ListItemLink to="/settings/browseSettings">
+                <ListItemIcon>
+                    <ExploreOutlinedIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('global.label.browse')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/device">
+                <ListItemIcon>
+                    <DevicesIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.device.title.device')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/webUI">
+                <ListItemIcon>
+                    <WebIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.webui.title.webui')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/server">
+                <ListItemIcon>
+                    <DnsIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.server.title.server')} />
+            </ListItemLink>
+            <ListItemLink to="/settings/about">
+                <ListItemIcon>
+                    <InfoIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.about.title')} />
+            </ListItemLink>
+        </List>
+    );
+}

src/modules/settings/screens/WebUISettings.tsx

@@ -0,0 +1,254 @@
+/*
+ * 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 { useContext, useLayoutEffect } from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { WebUIUpdateIntervalSetting } from '@/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx';
+import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
+import {
+    SelectSetting,
+    SelectSettingValue,
+    SelectSettingValueDisplayInfo,
+} from '@/modules/core/components/settings/SelectSetting.tsx';
+import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/modules/settings/services/ServerSettingsMetadata.ts';
+import { makeToast } from '@/lib/ui/Toast.ts';
+import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
+import { ServerSettings } from '@/modules/settings/Settings.types.ts';
+
+type WebUISettingsType = Pick<
+    ServerSettings,
+    | 'webUIFlavor'
+    | 'initialOpenInBrowserEnabled'
+    | 'webUIInterface'
+    | 'electronPath'
+    | 'webUIChannel'
+    | 'webUIUpdateCheckInterval'
+>;
+
+const FLAVORS = Object.values(WebUiFlavor);
+const FLAVOR_TO_TRANSLATION_KEY: { [flavor in WebUiFlavor]: SelectSettingValueDisplayInfo } = {
+    [WebUiFlavor.Webui]: {
+        text: 'settings.webui.title.webui',
+        description: 'settings.webui.flavor.option.webui.label.description',
+        disclaimer: 'settings.webui.flavor.label.info',
+    },
+    [WebUiFlavor.Vui]: {
+        text: 'settings.webui.flavor.option.vui.label.title',
+        description: 'settings.webui.flavor.option.vui.label.description',
+        disclaimer: 'settings.webui.flavor.label.info',
+    },
+    [WebUiFlavor.Custom]: {
+        text: 'settings.webui.flavor.option.custom.label.title',
+        description: 'settings.webui.flavor.option.custom.label.description',
+    },
+};
+const FLAVOR_SELECT_VALUES: SelectSettingValue<WebUiFlavor>[] = FLAVORS.map((flavor) => [
+    flavor,
+    FLAVOR_TO_TRANSLATION_KEY[flavor],
+]);
+
+const CHANNELS = Object.values(WebUiChannel);
+const CHANNEL_TO_TRANSLATION_KEYS: {
+    [channel in WebUiChannel]: SelectSettingValueDisplayInfo;
+} = {
+    [WebUiChannel.Bundled]: {
+        text: 'settings.webui.channel.option.bundled.label.title',
+        description: 'settings.webui.channel.option.bundled.label.description',
+        disclaimer: 'settings.webui.flavor.label.info',
+    },
+    [WebUiChannel.Stable]: {
+        text: 'settings.webui.channel.option.stable.label.title',
+        description: 'settings.webui.channel.option.stable.label.description',
+        disclaimer: 'settings.webui.flavor.label.info',
+    },
+    [WebUiChannel.Preview]: {
+        text: 'settings.webui.channel.option.preview.label.title',
+        description: 'settings.webui.channel.option.preview.label.description',
+        disclaimer: 'settings.webui.channel.option.preview.label.disclaimer',
+    },
+};
+const CHANNEL_SELECT_VALUES: SelectSettingValue<WebUiChannel>[] = CHANNELS.map((channel) => [
+    channel,
+    CHANNEL_TO_TRANSLATION_KEYS[channel],
+]);
+
+const INTERFACES = Object.values(WebUiInterface);
+const INTERFACE_TO_TRANSLATION_KEYS: {
+    [webUIInterface in WebUiInterface]: SelectSettingValueDisplayInfo;
+} = {
+    [WebUiInterface.Browser]: {
+        text: 'settings.webui.interface.option.label.browser',
+        description: 'settings.webui.interface.label.description',
+    },
+    [WebUiInterface.Electron]: {
+        text: 'settings.webui.interface.option.label.electron',
+        description: 'settings.webui.interface.label.description',
+    },
+};
+const INTERFACE_SELECT_VALUES: SelectSettingValue<WebUiInterface>[] = INTERFACES.map((webUIInterface) => [
+    webUIInterface,
+    INTERFACE_TO_TRANSLATION_KEYS[webUIInterface],
+]);
+
+const extractWebUISettings = (settings: ServerSettings): WebUISettingsType => ({
+    webUIFlavor: settings.webUIFlavor,
+    initialOpenInBrowserEnabled: settings.initialOpenInBrowserEnabled,
+    webUIInterface: settings.webUIInterface,
+    electronPath: settings.electronPath,
+    webUIChannel: settings.webUIChannel,
+    webUIUpdateCheckInterval: settings.webUIUpdateCheckInterval,
+});
+
+export const WebUISettings = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useLayoutEffect(() => {
+        setTitle(t('settings.webui.title.settings'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const {
+        settings: { webUIInformAvailableUpdate },
+        loading: areMetadataServerSettingsLoading,
+        request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
+    } = useMetadataServerSettings();
+    const updateMetadataServerSettings = createUpdateMetadataServerSettings<
+        keyof Pick<MetadataUpdateSettings, 'webUIInformAvailableUpdate'>
+    >(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
+
+    const {
+        data,
+        loading: areServerSettingsLoading,
+        error: serverSettingsError,
+        refetch: refetchServerSettings,
+    } = requestManager.useGetServerSettings({
+        notifyOnNetworkStatusChange: true,
+    });
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const updateSetting = <Setting extends keyof WebUISettingsType>(
+        setting: Setting,
+        value: WebUISettingsType[Setting],
+    ) => {
+        if (setting === 'webUIChannel') {
+            requestManager.graphQLClient.client.cache.evict({ fieldName: 'checkForWebUIUpdate' });
+        }
+
+        mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
+            makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
+        );
+    };
+
+    const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const error = metadataServerSettingsError ?? serverSettingsError;
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => {
+                    if (metadataServerSettingsError) {
+                        refetchServerMetadataSettings().catch(
+                            defaultPromiseErrorHandler('WebUISettings::refetchServerMetadataSettings'),
+                        );
+                    }
+
+                    if (serverSettingsError) {
+                        refetchServerSettings().catch(
+                            defaultPromiseErrorHandler('WebUISettings::refetchServerSettings'),
+                        );
+                    }
+                }}
+            />
+        );
+    }
+
+    const webUISettings = extractWebUISettings(data!.settings);
+    const isCustomWebUI = webUISettings.webUIFlavor === WebUiFlavor.Custom;
+
+    return (
+        <List sx={{ pt: 0 }}>
+            <SelectSetting<WebUiFlavor>
+                settingName={t('settings.webui.flavor.label.title')}
+                value={webUISettings.webUIFlavor}
+                values={FLAVOR_SELECT_VALUES}
+                handleChange={(flavor) => updateSetting('webUIFlavor', flavor)}
+            />
+            <ListItem>
+                <ListItemText primary={t('settings.webui.label.initial_open_browser')} />
+                <Switch
+                    edge="end"
+                    checked={webUISettings.initialOpenInBrowserEnabled}
+                    onChange={(e) => updateSetting('initialOpenInBrowserEnabled', e.target.checked)}
+                />
+            </ListItem>
+            <SelectSetting<WebUiInterface>
+                settingName={t('settings.webui.interface.label.title')}
+                value={webUISettings.webUIInterface}
+                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}
+                settingDescription={
+                    webUISettings.electronPath.length ? webUISettings.electronPath : t('global.label.default')
+                }
+                handleChange={(path) => updateSetting('electronPath', path)}
+            />
+            <SelectSetting<WebUiChannel>
+                settingName={t('settings.webui.channel.label.title')}
+                value={webUISettings.webUIChannel}
+                values={CHANNEL_SELECT_VALUES}
+                handleChange={(channel) => updateSetting('webUIChannel', channel)}
+                disabled={isCustomWebUI}
+            />
+            <WebUIUpdateIntervalSetting
+                disabled={isCustomWebUI}
+                updateCheckInterval={webUISettings.webUIUpdateCheckInterval}
+            />
+            {!webUISettings.webUIUpdateCheckInterval && (
+                <ListItem>
+                    <ListItemText
+                        primary={t('global.update.settings.inform.label.title')}
+                        secondary={t('global.update.settings.inform.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={webUIInformAvailableUpdate}
+                        onChange={(e) => updateMetadataServerSettings('webUIInformAvailableUpdate', e.target.checked)}
+                    />
+                </ListItem>
+            )}
+        </List>
+    );
+};

src/modules/settings/services/ServerSettingsMetadata.ts

@@ -0,0 +1,92 @@
+/*
+ * 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 { AllowedMetadataValueTypes, AppMetadataKeys, Metadata } from '@/typings.ts';
+import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
+import { convertFromGqlMeta, getMetadataFrom, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts';
+import { jsonSaveParse } from '@/lib/HelperFunctions.ts';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
+import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
+import { SERVER_SETTINGS_METADATA_DEFAULT } from '@/modules/settings/Settings.constants.ts';
+import { MetadataServerSettingKeys, MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
+
+export const convertSettingsToMetadata = (
+    settings: Partial<MetadataServerSettings>,
+): Metadata<string, AllowedMetadataValueTypes> => ({
+    ...settings,
+    devices: JSON.stringify(settings.devices),
+    customThemes: JSON.stringify(settings.customThemes),
+    migrateSortSettings: JSON.stringify(settings.migrateSortSettings),
+});
+
+export const convertMetadataToSettings = (
+    metadata: Partial<Metadata<AppMetadataKeys, AllowedMetadataValueTypes>>,
+): MetadataServerSettings =>
+    ({
+        ...SERVER_SETTINGS_METADATA_DEFAULT,
+        ...(metadata as unknown as MetadataServerSettings),
+        devices:
+            jsonSaveParse<string[]>((metadata.devices as string) ?? '') ?? SERVER_SETTINGS_METADATA_DEFAULT.devices,
+        customThemes:
+            jsonSaveParse<MetadataThemeSettings['customThemes']>((metadata.customThemes as string) ?? '') ??
+            SERVER_SETTINGS_METADATA_DEFAULT.customThemes,
+        migrateSortSettings:
+            jsonSaveParse<MetadataMigrationSettings['migrateSortSettings']>(
+                (metadata.migrateSortSettings as string) ?? '',
+            ) ?? SERVER_SETTINGS_METADATA_DEFAULT.migrateSortSettings,
+    }) satisfies MetadataServerSettings;
+
+const getMetadataServerSettingsWithDefaultFallback = (
+    meta?: Metadata,
+    defaultSettings: MetadataServerSettings = SERVER_SETTINGS_METADATA_DEFAULT,
+    applyMetadataMigration: boolean = true,
+): MetadataServerSettings =>
+    convertMetadataToSettings(
+        getMetadataFrom({ meta }, convertSettingsToMetadata(defaultSettings), applyMetadataMigration),
+    );
+export const useMetadataServerSettings = (): {
+    metadata?: Metadata;
+    settings: MetadataServerSettings;
+    loading: boolean;
+    request: ReturnType<typeof requestManager.useGetGlobalMeta>;
+} => {
+    const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
+    const { data, loading } = request;
+    const metadata = convertFromGqlMeta(data?.metas.nodes);
+    const settings = getMetadataServerSettingsWithDefaultFallback(metadata);
+
+    return { metadata, settings, loading, request };
+};
+
+export const getMetadataServerSettings = async (): Promise<MetadataServerSettings> => {
+    const { data, error } = await requestManager.getGlobalMeta().response;
+
+    if (error) {
+        throw error;
+    }
+
+    const metadata = convertFromGqlMeta(data?.metas.nodes);
+    return getMetadataServerSettingsWithDefaultFallback(metadata);
+};
+
+export const updateMetadataServerSettings = async <
+    Settings extends MetadataServerSettingKeys = MetadataServerSettingKeys,
+    Setting extends Settings = Settings,
+>(
+    setting: Setting,
+    value: MetadataServerSettings[Setting],
+): Promise<void[]> =>
+    requestUpdateServerMetadata([[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
+
+export const createUpdateMetadataServerSettings =
+    <Settings extends MetadataServerSettingKeys>(
+        handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateMetadataServerSettings'),
+    ): ((...args: Parameters<typeof updateMetadataServerSettings<Settings>>) => Promise<void | void[]>) =>
+    (setting, value) =>
+        updateMetadataServerSettings(setting, value).catch(handleError);