Feature/server settings (#458)

* Move "Server Address" setting to server settings

* Rename "ServerDirSetting" to "TextSetting"

* Use "TextSetting" for server address

* Reset value when closing the dialog

* Support passwords in "TextSetting"

* Add server settings

src/App.tsx

@@ -33,6 +33,7 @@ import '@/i18n';
 import { LibrarySettings } from '@/screens/settings/LibrarySettings';
 import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
 import { DownloadSettings } from '@/screens/settings/DownloadSettings.tsx';
+import { ServerSettings } from '@/screens/settings/ServerSettings.tsx';
 
 if (__DEV__) {
     // Adds messages only in a dev environment
@@ -66,6 +67,7 @@ export const App: React.FC = () => (
                     <Route path="librarySettings" element={<LibrarySettings />} />
                     <Route path="downloadSettings" element={<DownloadSettings />} />
                     <Route path="backup" element={<Backup />} />
+                    <Route path="server" element={<ServerSettings />} />
                 </Route>
 
                 {/* Manga Routes */}

src/components/settings/ServerDirSetting.tsx

@@ -1,87 +0,0 @@
-/*
- * 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 { Button, Dialog, DialogTitle, ListItemText } from '@mui/material';
-import DialogContent from '@mui/material/DialogContent';
-import TextField from '@mui/material/TextField';
-import DialogActions from '@mui/material/DialogActions';
-import ListItemButton from '@mui/material/ListItemButton';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import DialogContentText from '@mui/material/DialogContentText';
-
-export const ServerDirSetting = ({
-    settingName,
-    dialogDescription,
-    dirPath,
-    handlePathChange,
-}: {
-    settingName: string;
-    dialogDescription: string;
-    dirPath?: string;
-    handlePathChange: (path: string) => void;
-}) => {
-    const { t } = useTranslation();
-
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogDirPath, setDialogDirPath] = useState(dirPath ?? '');
-
-    useEffect(() => {
-        if (!dirPath) {
-            return;
-        }
-
-        setDialogDirPath(dirPath);
-    }, [dirPath]);
-
-    const closeDialog = () => {
-        setIsDialogOpen(false);
-    };
-
-    const updateSetting = () => {
-        closeDialog();
-        handlePathChange(dialogDirPath);
-    };
-
-    return (
-        <>
-            <ListItemButton onClick={() => setIsDialogOpen(true)}>
-                <ListItemText
-                    primary={settingName}
-                    secondary={dirPath ?? t('global.label.loading')}
-                    secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
-                />
-            </ListItemButton>
-
-            <Dialog open={isDialogOpen} onClose={closeDialog} fullWidth>
-                <DialogContent>
-                    <DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
-                    <DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
-                    <TextField
-                        sx={{
-                            width: '100%',
-                            margin: 'auto',
-                        }}
-                        autoFocus
-                        value={dialogDirPath}
-                        type="text"
-                        onChange={(e) => setDialogDirPath(e.target.value)}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={closeDialog} color="primary">
-                        {t('global.button.cancel')}
-                    </Button>
-                    <Button onClick={() => updateSetting()} color="primary">
-                        {t('global.button.ok')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-};

src/components/settings/TextSetting.tsx

@@ -0,0 +1,117 @@
+/*
+ * 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 { Button, Dialog, DialogTitle, InputAdornment, ListItemText } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import TextField from '@mui/material/TextField';
+import DialogActions from '@mui/material/DialogActions';
+import ListItemButton from '@mui/material/ListItemButton';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import DialogContentText from '@mui/material/DialogContentText';
+import IconButton from '@mui/material/IconButton';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+
+export const TextSetting = ({
+    settingName,
+    dialogDescription,
+    value,
+    handleChange,
+    isPassword = false,
+    placeholder = '',
+}: {
+    settingName: string;
+    dialogDescription?: string;
+    value?: string;
+    handleChange: (value: string) => void;
+    isPassword?: boolean;
+    placeholder?: string;
+}) => {
+    const { t } = useTranslation();
+
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [dialogValue, setDialogValue] = useState(value ?? '');
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+    useEffect(() => {
+        if (!value) {
+            return;
+        }
+
+        setDialogValue(value);
+    }, [value]);
+
+    const closeDialog = (resetValue: boolean = true) => {
+        if (resetValue) {
+            setDialogValue(value ?? '');
+        }
+
+        setShowPassword(false);
+        setIsDialogOpen(false);
+    };
+
+    const updateSetting = () => {
+        closeDialog(false);
+        handleChange(dialogValue);
+    };
+
+    return (
+        <>
+            <ListItemButton onClick={() => setIsDialogOpen(true)}>
+                <ListItemText
+                    primary={settingName}
+                    secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
+                    secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
+                />
+            </ListItemButton>
+
+            <Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
+                <DialogContent>
+                    <DialogTitle sx={{ paddingLeft: 0 }}>{settingName}</DialogTitle>
+                    {!!dialogDescription && (
+                        <DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
+                    )}
+                    <TextField
+                        sx={{
+                            width: '100%',
+                            margin: 'auto',
+                        }}
+                        autoFocus
+                        placeholder={placeholder}
+                        value={dialogValue}
+                        type={isPassword && !showPassword ? 'password' : 'text'}
+                        onChange={(e) => setDialogValue(e.target.value)}
+                        InputProps={{
+                            endAdornment: isPassword ? (
+                                <InputAdornment position="end">
+                                    <IconButton
+                                        aria-label="toggle password visibility"
+                                        onClick={handleClickShowPassword}
+                                        edge="end"
+                                    >
+                                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                                    </IconButton>
+                                </InputAdornment>
+                            ) : null,
+                        }}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => closeDialog()} color="primary">
+                        {t('global.button.cancel')}
+                    </Button>
+                    <Button onClick={() => updateSetting()} color="primary">
+                        {t('global.button.ok')}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+};

src/i18n/locale/en.json

@@ -283,13 +283,16 @@
     },
     "label": {
       "browse": "Browse",
+      "client": "Client",
       "display": "Display",
       "filter": "Filter",
       "loading": "Loading…",
       "never": "Never",
       "none": "None",
+      "password": "Password",
       "sort": "Sort",
-      "unknown": "Unknown"
+      "unknown": "Unknown",
+      "username": "Username"
     },
     "language": {
       "label": {
@@ -488,7 +491,6 @@
         "build_time": "Build time",
         "discord": "Discord",
         "github": "GitHub",
-        "server": "Server",
         "server_address": "Server address",
         "server_version": "Server version"
       },
@@ -534,11 +536,86 @@
       "show_nsfw": "Show NSFW",
       "show_nsfw_description": "Hide NSFW extensions and sources"
     },
-    "server_address": {
+    "server": {
-      "dialog": {
+      "address": {
-        "label": {
+        "client": {
-          "enter_address": "Enter server address"
+          "dialog": {
+            "label": {
+              "enter_address": "Enter server address"
+            }
+          },
+          "label": {
+            "description": "The address the client will use to connect to the server"
+          }
+        },
+        "server": {
+          "label": {
+            "ip": "IP",
+            "port": "Port"
+          },
+          "title": "Server bindings"
         }
+      },
+      "auth": {
+        "basic": {
+          "label": {
+            "enable": "Use basic authentication",
+            "password": "Basic authentication $t(global.label.password, lowercase)",
+            "username": "Basic authentication $t(global.label.username, lowercase)"
+          }
+        },
+        "title": "Authentication"
+      },
+      "local_source": {
+        "path": {
+          "label": {
+            "description": "The path to the directory on the server where local source files are saved in",
+            "title": "Local source location"
+          }
+        }
+      },
+      "misc": {
+        "log_level": {
+          "graphql": {
+            "label": {
+              "description": "This includes logs with non privacy safe information",
+              "title": "Enable graphql debug logs"
+            }
+          },
+          "label": {
+            "server": "Enable debug logs"
+          }
+        },
+        "title": "Misc",
+        "tray_icon": {
+          "label": {
+            "description": "This icon will be shown on the system that is running the server",
+            "title": "Show icon in system tray"
+          }
+        }
+      },
+      "requests": {
+        "sources": {
+          "parallel": {
+            "label": {
+              "title": "Parallel source requests",
+              "value": "{{value}} $t(source.title)"
+            }
+          }
+        },
+        "title": "Requests"
+      },
+      "socks_proxy": {
+        "label": {
+          "enable": "Use SOCKS5 proxy",
+          "host": "SOCKS5 host",
+          "port": "SOCKS5 port"
+        },
+        "title": "SOCKS proxy"
+      },
+      "title": {
+        "server": "Server",
+        "settings": "Server Settings"
       }
     },
     "title": "Settings"

src/lib/graphql/Fragments.ts

@@ -455,5 +455,8 @@ export const SERVER_SETTINGS = gql`
         backupTime
         backupInterval
         backupTTL
+
+        # local source
+        localSourcePath
     }
 `;

src/lib/graphql/generated/graphql.ts

@@ -2108,7 +2108,7 @@ export type WebuiUpdateInfoFragment = { __typename?: 'WebUIUpdateInfo', channel:
 
 export type WebuiUpdateStatusFragment = { __typename?: 'WebUIUpdateStatus', progress: number, state: UpdateState, info: { __typename?: 'WebUIUpdateInfo', channel: string, tag: string, updateAvailable: boolean } };
 
-export type ServerSettingsFragment = { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number };
+export type ServerSettingsFragment = { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string };
 
 export type CreateBackupMutationVariables = Exact<{
   input: CreateBackupInput;
@@ -2388,14 +2388,14 @@ export type ResetServerSettingsMutationVariables = Exact<{
 }>;
 
 
-export type ResetServerSettingsMutation = { __typename?: 'Mutation', resetSettings: { __typename?: 'ResetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } } };
+export type ResetServerSettingsMutation = { __typename?: 'Mutation', resetSettings: { __typename?: 'ResetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } } };
 
 export type UpdateServerSettingsMutationVariables = Exact<{
   input: SetSettingsInput;
 }>;
 
 
-export type UpdateServerSettingsMutation = { __typename?: 'Mutation', setSettings: { __typename?: 'SetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } } };
+export type UpdateServerSettingsMutation = { __typename?: 'Mutation', setSettings: { __typename?: 'SetSettingsPayload', clientMutationId?: string | null, settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } } };
 
 export type GetSourceMangasFetchMutationVariables = Exact<{
   input: FetchSourceMangaInput;
@@ -2591,7 +2591,7 @@ export type GetWebuiUpdateStatusQuery = { __typename?: 'Query', getWebUIUpdateSt
 export type GetServerSettingsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetServerSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number } };
+export type GetServerSettingsQuery = { __typename?: 'Query', settings: { __typename?: 'SettingsType', ip: string, port: number, socksProxyEnabled: boolean, socksProxyHost: string, socksProxyPort: string, webUIFlavor: WebUiFlavor, initialOpenInBrowserEnabled: boolean, webUIInterface: WebUiInterface, electronPath: string, webUIChannel: WebUiChannel, webUIUpdateCheckInterval: number, downloadAsCbz: boolean, downloadsPath: string, autoDownloadNewChapters: boolean, excludeEntryWithUnreadChapters: boolean, autoDownloadAheadLimit: number, maxSourcesInParallel: number, excludeUnreadChapters: boolean, excludeNotStarted: boolean, excludeCompleted: boolean, globalUpdateInterval: number, updateMangas: boolean, basicAuthEnabled: boolean, basicAuthUsername: string, basicAuthPassword: string, debugLogsEnabled: boolean, gqlDebugLogsEnabled: boolean, systemTrayEnabled: boolean, backupPath: string, backupTime: string, backupInterval: number, backupTTL: number, localSourcePath: string } };
 
 export type GetSourceQueryVariables = Exact<{
   id: Scalars['LongString']['input'];

src/screens/Settings.tsx

@@ -6,14 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo } 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 Brightness6Icon from '@mui/icons-material/Brightness6';
-import DnsIcon from '@mui/icons-material/Dns';
-import EditIcon from '@mui/icons-material/Edit';
 import InfoIcon from '@mui/icons-material/Info';
 import CachedIcon from '@mui/icons-material/Cached';
 import ListItem from '@mui/material/ListItem';
@@ -21,21 +19,14 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Switch from '@mui/material/Switch';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
-import { Link, MenuItem, Select, Tooltip } from '@mui/material';
+import { Link, MenuItem, Select } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import LanguageIcon from '@mui/icons-material/Language';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
 import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import { requestManager } from '@/lib/requests/RequestManager.ts';
+import DnsIcon from '@mui/icons-material/Dns';
 import { langCodeToName } from '@/util/language';
 import { useLocalStorage } from '@/util/useLocalStorage';
 import { ListItemLink } from '@/components/util/ListItemLink';
@@ -53,191 +44,133 @@ export function Settings() {
     }, [t]);
 
     const { darkTheme, setDarkTheme } = useContext(DarkTheme);
-    const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', '');
     const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
     const [useCache, setUseCache] = useLocalStorage<boolean>('useCache', true);
-    const [dialogOpen, setDialogOpen] = useState(false);
-    const [dialogValue, setDialogValue] = useState(serverAddress);
 
     const DEFAULT_ITEM_WIDTH = 300;
     const itemWidthIcon = useMemo(() => <ViewModuleIcon />, []);
     const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
 
-    const handleDialogOpen = () => {
-        setDialogValue(serverAddress);
-        setDialogOpen(true);
-    };
-
-    const handleDialogCancel = () => {
-        setDialogOpen(false);
-    };
-
-    const handleDialogSubmit = () => {
-        setDialogOpen(false);
-        const serverBaseUrl = dialogValue.replaceAll(/(\/)+$/g, '');
-        setServerAddress(serverBaseUrl);
-        requestManager.updateClient({ baseURL: serverBaseUrl });
-    };
-
     return (
-        <>
+        <List sx={{ padding: 0 }}>
-            <List sx={{ padding: 0 }}>
+            <ListItemLink to="/settings/categories">
-                <ListItemLink to="/settings/categories">
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <ListAltIcon />
-                        <ListAltIcon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('category.title.categories')} />
-                    <ListItemText primary={t('category.title.categories')} />
+            </ListItemLink>
-                </ListItemLink>
+            <ListItemLink to="/settings/defaultReaderSettings">
-                <ListItemLink to="/settings/defaultReaderSettings">
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <AutoStoriesIcon />
-                        <AutoStoriesIcon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('reader.settings.title.default_reader_settings')} />
-                    <ListItemText primary={t('reader.settings.title.default_reader_settings')} />
+            </ListItemLink>
-                </ListItemLink>
+            <ListItemLink to="/settings/librarySettings">
-                <ListItemLink to="/settings/librarySettings">
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <CollectionsOutlinedBookmarkIcon />
-                        <CollectionsOutlinedBookmarkIcon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('library.title')} />
-                    <ListItemText primary={t('library.title')} />
+            </ListItemLink>
-                </ListItemLink>
+            <ListItemLink to="/settings/downloadSettings">
-                <ListItemLink to="/settings/downloadSettings">
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <GetAppOutlinedIcon />
-                        <GetAppOutlinedIcon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('download.title')} />
-                    <ListItemText primary={t('download.title')} />
+            </ListItemLink>
-                </ListItemLink>
+            <ListItemLink to="/settings/backup">
-                <ListItemLink to="/settings/backup">
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <BackupIcon />
-                        <BackupIcon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('settings.backup.title')} />
-                    <ListItemText primary={t('settings.backup.title')} />
+            </ListItemLink>
-                </ListItemLink>
+            <ListItem>
-                <ListItem>
+                <ListItemIcon>
-                    <ListItemIcon>
+                    <Brightness6Icon />
-                        <Brightness6Icon />
+                </ListItemIcon>
-                    </ListItemIcon>
+                <ListItemText primary={t('settings.label.dark_theme')} />
-                    <ListItemText primary={t('settings.label.dark_theme')} />
+                <ListItemSecondaryAction>
-                    <ListItemSecondaryAction>
+                    <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
-                        <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
+                </ListItemSecondaryAction>
-                    </ListItemSecondaryAction>
+            </ListItem>
-                </ListItem>
+            <NumberSetting
-                <NumberSetting
+                settingTitle={t('settings.label.manga_item_width')}
-                    settingTitle={t('settings.label.manga_item_width')}
+                settingValue={`px:${itemWidth}`}
-                    settingValue={`px:${itemWidth}`}
+                settingIcon={itemWidthIcon}
-                    settingIcon={itemWidthIcon}
+                value={itemWidth}
-                    value={itemWidth}
+                defaultValue={DEFAULT_ITEM_WIDTH}
-                    defaultValue={DEFAULT_ITEM_WIDTH}
+                minValue={100}
-                    minValue={100}
+                maxValue={1000}
-                    maxValue={1000}
+                stepSize={10}
-                    stepSize={10}
+                dialogTitle={t('settings.label.manga_item_width')}
-                    dialogTitle={t('settings.label.manga_item_width')}
+                valueUnit="px"
-                    valueUnit="px"
+                showSlider
-                    showSlider
+                handleUpdate={setItemWidth}
-                    handleUpdate={setItemWidth}
+            />
+            <ListItem>
+                <ListItemIcon>
+                    <FavoriteIcon />
+                </ListItemIcon>
+                <ListItemText
+                    primary={t('settings.label.show_nsfw')}
+                    secondary={t('settings.label.show_nsfw_description')}
                 />
-                <ListItem>
+                <ListItemSecondaryAction>
-                    <ListItemIcon>
+                    <Switch edge="end" checked={showNsfw} onChange={() => setShowNsfw(!showNsfw)} />
-                        <FavoriteIcon />
+                </ListItemSecondaryAction>
-                    </ListItemIcon>
+            </ListItem>
-                    <ListItemText
+            <ListItem>
-                        primary={t('settings.label.show_nsfw')}
+                <ListItemIcon>
-                        secondary={t('settings.label.show_nsfw_description')}
+                    <CachedIcon />
-                    />
+                </ListItemIcon>
-                    <ListItemSecondaryAction>
+                <ListItemText
-                        <Switch edge="end" checked={showNsfw} onChange={() => setShowNsfw(!showNsfw)} />
+                    primary={t('settings.label.image_cache')}
-                    </ListItemSecondaryAction>
+                    secondary={t('settings.label.image_cache_description')}
-                </ListItem>
+                />
-                <ListItem>
+                <ListItemSecondaryAction>
-                    <ListItemIcon>
+                    <Switch edge="end" checked={useCache} onChange={() => setUseCache(!useCache)} />
-                        <CachedIcon />
+                </ListItemSecondaryAction>
-                    </ListItemIcon>
+            </ListItem>
-                    <ListItemText
+            <ListItem>
-                        primary={t('settings.label.image_cache')}
+                <ListItemIcon>
-                        secondary={t('settings.label.image_cache_description')}
+                    <LanguageIcon />
-                    />
+                </ListItemIcon>
-                    <ListItemSecondaryAction>
+                <ListItemText
-                        <Switch edge="end" checked={useCache} onChange={() => setUseCache(!useCache)} />
+                    primary={t('global.language.label.language')}
-                    </ListItemSecondaryAction>
+                    secondary={
-                </ListItem>
+                        <>
-                <ListItem>
+                            <span>{t('settings.label.language_description')} </span>
-                    <ListItemIcon>
+                            <Link href="https://hosted.weblate.org/projects/suwayomi/tachidesk-webui">
-                        <LanguageIcon />
+                                {t('global.language.title.weblate')}
-                    </ListItemIcon>
+                            </Link>
-                    <ListItemText
+                        </>
-                        primary={t('global.language.label.language')}
+                    }
-                        secondary={
+                />
-                            <>
+                <ListItemSecondaryAction>
-                                <span>{t('settings.label.language_description')} </span>
+                    <Select
-                                <Link href="https://hosted.weblate.org/projects/suwayomi/tachidesk-webui">
+                        MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
-                                    {t('global.language.title.weblate')}
+                        value={i18n.language}
-                                </Link>
+                        onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
-                            </>
+                    >
-                        }
+                        {Object.keys(i18n.services.resourceStore.data).map((language) => (
-                    />
+                            <MenuItem key={language} value={language}>
-                    <ListItemSecondaryAction>
+                                {langCodeToName(language)}
-                        <Select
+                            </MenuItem>
-                            MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
+                        ))}
-                            value={i18n.language}
+                    </Select>
-                            onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
+                </ListItemSecondaryAction>
-                        >
+            </ListItem>
-                            {Object.keys(i18n.services.resourceStore.data).map((language) => (
+            <ListItemLink to="/settings/server">
-                                <MenuItem key={language} value={language}>
+                <ListItemIcon>
-                                    {langCodeToName(language)}
+                    <DnsIcon />
-                                </MenuItem>
+                </ListItemIcon>
-                            ))}
+                <ListItemText primary={t('settings.server.title.server')} />
-                        </Select>
+            </ListItemLink>
-                    </ListItemSecondaryAction>
+            <ListItemLink to="/settings/about">
-                </ListItem>
+                <ListItemIcon>
-                <ListItem>
+                    <InfoIcon />
-                    <ListItemIcon>
+                </ListItemIcon>
-                        <DnsIcon />
+                <ListItemText primary={t('settings.about.title')} />
-                    </ListItemIcon>
+            </ListItemLink>
-                    <ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} />
+        </List>
-                    <ListItemSecondaryAction>
-                        <Tooltip title={t('global.button.edit')}>
-                            <IconButton
-                                onClick={() => {
-                                    handleDialogOpen();
-                                }}
-                                size="large"
-                            >
-                                <EditIcon />
-                            </IconButton>
-                        </Tooltip>
-                    </ListItemSecondaryAction>
-                </ListItem>
-                <ListItemLink to="/settings/about">
-                    <ListItemIcon>
-                        <InfoIcon />
-                    </ListItemIcon>
-                    <ListItemText primary={t('settings.about.title')} />
-                </ListItemLink>
-            </List>
-
-            <Dialog open={dialogOpen} onClose={handleDialogCancel}>
-                <DialogContent>
-                    <DialogContentText>{t('settings.server_address.dialog.label.enter_address')}</DialogContentText>
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        id="name"
-                        label={t('settings.about.label.server_address')}
-                        type="text"
-                        fullWidth
-                        value={dialogValue}
-                        placeholder="http://127.0.0.1:4567"
-                        onChange={(e) => setDialogValue(e.target.value)}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleDialogCancel} color="primary">
-                        {t('global.button.cancel')}
-                    </Button>
-                    <Button onClick={handleDialogSubmit} color="primary">
-                        {t('global.button.set')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
     );
 }

src/screens/settings/About.tsx

@@ -45,7 +45,7 @@ export function About() {
         <List>
             <ListItem>
                 <ListItemText
-                    primary={t('settings.about.label.server')}
+                    primary={t('settings.server.title.server')}
                     secondary={`${about.name} ${about.buildType}`}
                 />
             </ListItem>

src/screens/settings/Backup.tsx

@@ -21,7 +21,7 @@ import { ListItemLink } from '@/components/util/ListItemLink';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts';
 import { Progress } from '@/components/util/Progress.tsx';
-import { ServerDirSetting } from '@/components/settings/ServerDirSetting.tsx';
+import { TextSetting } from '@/components/settings/TextSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
@@ -188,11 +188,11 @@ export function Backup() {
                         </ListSubheader>
                     }
                 >
-                    <ServerDirSetting
+                    <TextSetting
                         settingName={t('settings.backup.automated.location.label.title')}
                         dialogDescription={t('settings.backup.automated.location.label.description')}
-                        dirPath={backupSettings?.backupPath}
+                        value={backupSettings?.backupPath}
-                        handlePathChange={(path) => updateSetting('backupPath', path)}
+                        handleChange={(path) => updateSetting('backupPath', path)}
                     />
                     <TimeSetting
                         settingName={t('settings.backup.automated.label.time')}

src/screens/settings/DownloadSettings.tsx

@@ -12,7 +12,7 @@ import List from '@mui/material/List';
 import { ListItem, ListItemText, Switch } from '@mui/material';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import ListSubheader from '@mui/material/ListSubheader';
-import { ServerDirSetting } from '@/components/settings/ServerDirSetting';
+import { TextSetting } from '@/components/settings/TextSetting.tsx';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 import { ServerSettings } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -59,11 +59,11 @@ export const DownloadSettings = () => {
 
     return (
         <List>
-            <ServerDirSetting
+            <TextSetting
                 settingName={t('download.settings.download_path.label.title')}
                 dialogDescription={t('download.settings.download_path.label.description')}
-                dirPath={downloadSettings?.downloadsPath}
+                value={downloadSettings?.downloadsPath}
-                handlePathChange={(path) => updateSetting('downloadsPath', path)}
+                handleChange={(path) => updateSetting('downloadsPath', path)}
             />
             <ListItem>
                 <ListItemText primary={t('download.settings.file_type.label.cbz')} />

src/screens/settings/ServerSettings.tsx

@@ -0,0 +1,272 @@
+/*
+ * 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, useEffect } from 'react';
+import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import ListSubheader from '@mui/material/ListSubheader';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { useLocalStorage } from '@/util/useLocalStorage.tsx';
+import { TextSetting } from '@/components/settings/TextSetting.tsx';
+import { ServerSettings as GqlServerSettings } from '@/typings.ts';
+import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
+
+type ServerSettingsType = Pick<
+    GqlServerSettings,
+    | 'ip'
+    | 'port'
+    | 'socksProxyEnabled'
+    | 'socksProxyHost'
+    | 'socksProxyPort'
+    | 'debugLogsEnabled'
+    | 'gqlDebugLogsEnabled'
+    | 'systemTrayEnabled'
+    | 'basicAuthEnabled'
+    | 'basicAuthUsername'
+    | 'basicAuthPassword'
+    | 'maxSourcesInParallel'
+    | 'localSourcePath'
+>;
+
+const extractDownloadSettings = (settings: GqlServerSettings): ServerSettingsType => ({
+    ip: settings.ip,
+    port: settings.port,
+    socksProxyEnabled: settings.socksProxyEnabled,
+    socksProxyHost: settings.socksProxyHost,
+    socksProxyPort: settings.socksProxyPort,
+    debugLogsEnabled: settings.debugLogsEnabled,
+    gqlDebugLogsEnabled: settings.gqlDebugLogsEnabled,
+    systemTrayEnabled: settings.systemTrayEnabled,
+    basicAuthEnabled: settings.basicAuthEnabled,
+    basicAuthUsername: settings.basicAuthUsername,
+    basicAuthPassword: settings.basicAuthPassword,
+    maxSourcesInParallel: settings.maxSourcesInParallel,
+    localSourcePath: settings.localSourcePath,
+});
+
+export const ServerSettings = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useSetDefaultBackTo('settings');
+
+    useEffect(() => {
+        setTitle(t('settings.server.title.settings'));
+        setAction(null);
+    }, [t]);
+
+    const { data } = requestManager.useGetServerSettings();
+    const serverSettings = data ? extractDownloadSettings(data.settings) : undefined;
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', '');
+
+    const handleServerAddressChange = (address: string) => {
+        const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
+        setServerAddress(serverBaseUrl);
+        requestManager.updateClient({ baseURL: serverBaseUrl });
+    };
+
+    const updateSetting = <Setting extends keyof ServerSettingsType>(
+        setting: Setting,
+        value: ServerSettingsType[Setting],
+    ) => {
+        mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
+    };
+
+    return (
+        <List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-client">
+                        {t('global.label.client')}
+                    </ListSubheader>
+                }
+            >
+                <TextSetting
+                    settingName={t('settings.about.label.server_address')}
+                    handleChange={handleServerAddressChange}
+                    value={serverAddress}
+                    placeholder="http://localhost:4567"
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-requests">
+                        {t('settings.server.requests.title')}
+                    </ListSubheader>
+                }
+            >
+                <NumberSetting
+                    settingTitle={t('settings.server.requests.sources.parallel.label.title')}
+                    settingValue={t('settings.server.requests.sources.parallel.label.value', {
+                        value: serverSettings?.maxSourcesInParallel,
+                        count: serverSettings?.maxSourcesInParallel,
+                    })}
+                    valueUnit={t('source.title')}
+                    value={serverSettings?.maxSourcesInParallel ?? 6}
+                    defaultValue={6}
+                    minValue={1}
+                    maxValue={20}
+                    showSlider
+                    stepSize={1}
+                    dialogTitle={t('settings.server.requests.sources.parallel.label.title')}
+                    handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="server-settings-requests">
+                        {t('settings.server.requests.title')}
+                    </ListSubheader>
+                }
+            >
+                <TextSetting
+                    settingName={t('settings.server.local_source.path.label.title')}
+                    dialogDescription={t('settings.server.local_source.path.label.description')}
+                    value={serverSettings?.localSourcePath}
+                    handleChange={(path) => updateSetting('localSourcePath', path)}
+                />
+            </List>
+            <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()}
+                    dialogTitle={t('settings.server.address.server.label.port')}
+                    handleUpdate={(port) => updateSetting('port', port)}
+                    value={serverSettings?.port ?? 4567}
+                    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')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!serverSettings?.socksProxyEnabled}
+                            onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+                {!!serverSettings?.socksProxyEnabled && (
+                    <>
+                        <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)}
+                        />
+                    </>
+                )}
+            </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')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!serverSettings?.basicAuthEnabled}
+                            onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+                {!!serverSettings?.basicAuthEnabled && (
+                    <>
+                        <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-misc">
+                        {t('settings.server.misc.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText primary={t('settings.server.misc.log_level.label.server')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!serverSettings?.debugLogsEnabled}
+                            onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.misc.log_level.graphql.label.title')}
+                        secondary={t('settings.server.misc.log_level.graphql.label.description')}
+                    />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!serverSettings?.gqlDebugLogsEnabled}
+                            onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('settings.server.misc.tray_icon.label.title')}
+                        secondary={t('settings.server.misc.tray_icon.label.description')}
+                    />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!serverSettings?.systemTrayEnabled}
+                            onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+            </List>
+        </List>
+    );
+};