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/components/navbar/ReaderNavBar.tsx

@@ -184,6 +184,7 @@ export function ReaderNavBar(props: IProps) {
 
         // main container and root div need to change styles...
         rootEl.style.display = 'flex';
+        rootEl.style.flexDirection = 'column';
         mainContainer.style.display = 'none';
 
         return () => {

src/components/settings/DeviceSetting.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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, ListItem, ListItemText, MenuItem, Select } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useContext, useEffect } from 'react';
+import { convertSettingsToMetadata, useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
+import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
+import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata.ts';
+import { makeToast } from '@/components/util/Toast.tsx';
+import { MutableListSetting } from '@/components/settings/MutableListSetting.tsx';
+import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { DEFAULT_DEVICE } from '@/util/device.ts';
+
+export const DeviceSetting = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useEffect(() => {
+        setTitle(t('settings.device.title.settings'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    const {
+        metadata,
+        settings: { devices, activeDevice },
+    } = useMetadataServerSettings();
+
+    const updateMetadataSetting = async <Setting extends MetadataServerSettingKeys>(
+        setting: Setting,
+        value: MetadataServerSettings[Setting],
+    ) => {
+        if (!metadata) {
+            return;
+        }
+
+        const wasActiveDeviceDeleted = setting === 'devices' && !(value as string[]).includes(activeDevice);
+        if (wasActiveDeviceDeleted) {
+            try {
+                await requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
+                    ['activeDevice', convertSettingsToMetadata({ activeDevice: DEFAULT_DEVICE }).activeDevice],
+                ]);
+            } catch (e) {
+                makeToast(t('global.error.label.failed_to_save_changes'), 'error');
+                return;
+            }
+        }
+
+        requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
+            [setting, convertSettingsToMetadata({ [setting]: value })[setting]],
+        ]).catch(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
+    };
+
+    return (
+        <List>
+            <MutableListSetting
+                settingName={t('settings.device.devices.label.title')}
+                description={t('settings.device.devices.label.description')}
+                handleChange={(deviceList) => {
+                    updateMetadataSetting('devices', [...new Set([DEFAULT_DEVICE, ...deviceList])]);
+                }}
+                valueInfos={devices.map((device) => [device, { mutable: false, deletable: device !== DEFAULT_DEVICE }])}
+                addItemButtonTitle={t('global.button.create')}
+            />
+            <ListItem>
+                <ListItemText
+                    primary={t('settings.device.active_device.label.title')}
+                    secondary={t('settings.device.active_device.label.description')}
+                />
+                <Select
+                    MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
+                    value={activeDevice}
+                    onChange={({ target: { value: device } }) => updateMetadataSetting('activeDevice', device)}
+                >
+                    {devices.map((device) => (
+                        <MenuItem key={device} value={device}>
+                            {device}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </ListItem>
+        </List>
+    );
+};

src/components/settings/MutableListSetting.tsx

@@ -6,7 +6,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, Dialog, DialogTitle, ListItemButton, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
+import {
+    Button,
+    Dialog,
+    DialogTitle,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+    Stack,
+    Tooltip,
+    Typography,
+} from '@mui/material';
 import { useEffect, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
@@ -22,15 +32,27 @@ import { makeToast } from '@/components/util/Toast.tsx';
 
 const MutableListItem = ({
     handleDelete,
+    mutable = true,
+    deletable = true,
     ...textSettingProps
-}: Omit<TextSettingProps, 'isPassword' | 'disabled'> & { handleDelete: () => void }) => {
+}: Omit<TextSettingProps, 'isPassword' | 'disabled'> & {
+    handleDelete: () => void;
+    mutable?: boolean;
+    deletable?: boolean;
+}) => {
     const { t } = useTranslation();
 
     return (
         <Stack direction="row">
-            <TextSetting {...textSettingProps} dialogTitle="" />
+            {mutable ? (
+                <TextSetting {...textSettingProps} dialogTitle="" />
+            ) : (
+                <ListItem>
+                    <ListItemText secondary={textSettingProps.value} />
+                </ListItem>
+            )}
             <Tooltip title={t('chapter.action.download.delete.label.action')}>
-                <IconButton size="large" onClick={handleDelete}>
+                <IconButton disabled={!deletable} size="large" onClick={handleDelete}>
                     <DeleteIcon />
                 </IconButton>
             </Tooltip>
@@ -39,7 +61,10 @@ const MutableListItem = ({
 };
 
 type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placeholder'> & {
-    values?: string[];
+    valueInfos?: (
+        | [value: string]
+        | [value: string, Pick<React.ComponentProps<typeof MutableListItem>, 'mutable' | 'deletable'>]
+    )[];
     description?: string;
     dialogDisclaimer?: JSX.Element | string;
     addItemButtonTitle?: string;
@@ -49,11 +74,14 @@ type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placehold
     invalidItemError?: string;
 };
 
+const getValues = (valueInfos: MutableListSettingProps['valueInfos']): string[] =>
+    valueInfos?.map((valueInfo) => valueInfo[0]) ?? [];
+
 export const MutableListSetting = ({
     settingName,
     description,
     dialogDisclaimer,
-    values,
+    valueInfos,
     handleChange,
     addItemButtonTitle,
     placeholder,
@@ -63,22 +91,24 @@ export const MutableListSetting = ({
 }: MutableListSettingProps) => {
     const { t } = useTranslation();
 
+    const values = getValues(valueInfos);
+
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogValues, setDialogValues] = useState(values ?? []);
+    const [dialogValues, setDialogValues] = useState(values);
 
     const [isAddItemDialogOpen, setIsAddItemDialogOpen] = useState(false);
 
     useEffect(() => {
-        if (!values) {
+        if (!valueInfos) {
             return;
         }
 
         setDialogValues(values);
-    }, [values]);
+    }, [valueInfos]);
 
     const closeDialog = (resetValue: boolean = true) => {
         if (resetValue) {
-            setDialogValues(values ?? []);
+            setDialogValues(values);
         }
 
         setIsDialogOpen(false);
@@ -165,6 +195,8 @@ export const MutableListSetting = ({
                                 handleChange={(newValue: string) => updateSetting(index, newValue)}
                                 handleDelete={() => updateSetting(index, undefined)}
                                 value={dialogValue}
+                                mutable={valueInfos?.find(([value]) => value === dialogValue)?.[1]?.mutable}
+                                deletable={valueInfos?.find(([value]) => value === dialogValue)?.[1]?.deletable}
                             />
                         ))}
                     </List>