Feature/support settings per device (#640)

* Optionally prevent deletion and mutation of "MutableListSetting" items

* Save server metadata per device

This makes it possible to e.g. have different settings on a desktop and a smartphone.

src/screens/Settings.tsx

@@ -27,6 +27,7 @@ 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 { langCodeToName } from '@/util/language';
 import { useLocalStorage } from '@/util/useLocalStorage';
 import { ListItemLink } from '@/components/util/ListItemLink';
@@ -161,6 +162,12 @@ export function Settings() {
                 </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 />

src/screens/settings/BrowseSettings.tsx

@@ -92,7 +92,7 @@ export const BrowseSettings = () => {
                     updateSetting('extensionRepos', repos);
                     requestManager.clearExtensionCache();
                 }}
-                values={serverSettings?.extensionRepos}
+                valueInfos={serverSettings?.extensionRepos.map((extensionRepo) => [extensionRepo]) as [string][]}
                 addItemButtonTitle={t('extension.settings.repositories.custom.dialog.action.button.add')}
                 placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
                 validateItem={(repo) =>

src/screens/settings/DownloadSettings.tsx

@@ -16,7 +16,7 @@ import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarC
 import { MetadataServerSettingKeys, MetadataServerSettings, ServerSettings } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { DownloadAheadSetting } from '@/components/settings/downloads/DownloadAheadSetting.tsx';
-import { useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
+import { convertSettingsToMetadata, useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloads/DeleteChaptersWhileReadingSetting.tsx';
@@ -78,9 +78,9 @@ export const DownloadSettings = () => {
             return;
         }
 
-        requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [[setting, value]]).catch(() =>
-            makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
-        );
+        requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
+            [setting, convertSettingsToMetadata({ [setting]: value })[setting]],
+        ]).catch(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
     };
 
     return (

src/screens/settings/LibrarySettings.tsx

@@ -16,7 +16,7 @@ import { GlobalUpdateSettings } from '@/components/settings/globalUpdate/GlobalU
 import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
 import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata.ts';
 import { makeToast } from '@/components/util/Toast.tsx';
-import { useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
+import { convertSettingsToMetadata, useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/lib/data/Mangas.ts';
 
@@ -61,9 +61,9 @@ export function LibrarySettings() {
         setting: Setting,
         value: MetadataServerSettings[Setting],
     ) => {
-        requestUpdateServerMetadata(convertToGqlMeta(metadata)! ?? {}, [[setting, value]]).catch(() =>
-            makeToast(t('search.error.label.failed_to_save_settings'), 'warning'),
-        );
+        requestUpdateServerMetadata(convertToGqlMeta(metadata)! ?? {}, [
+            [setting, convertSettingsToMetadata({ [setting]: value })[setting]],
+        ]).catch(() => makeToast(t('search.error.label.failed_to_save_settings'), 'warning'));
     };
 
     return (