Feature/improve custom extension repos support

src/components/settings/MutableListSetting.tsx

@@ -15,7 +15,9 @@ import List from '@mui/material/List';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import DialogContentText from '@mui/material/DialogContentText';
-import { TextSetting, TextSettingProps } from '@/components/settings/TextSetting.tsx';
+import { TextSetting, TextSettingProps } from '@/components/settings/text/TextSetting.tsx';
+import { TextSettingDialog } from '@/components/settings/text/TextSettingDialog.tsx';
+import { makeToast } from '@/components/util/Toast.tsx';
 
 const MutableListItem = ({
     handleDelete,
@@ -35,24 +37,34 @@ const MutableListItem = ({
     );
 };
 
+type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placeholder'> & {
+    values?: string[];
+    description?: string;
+    addItemButtonTitle?: string;
+    handleChange: (values: string[]) => void;
+    allowDuplicates?: boolean;
+    validateItem?: (value: string) => boolean;
+    invalidItemError?: string;
+};
+
 export const MutableListSetting = ({
     settingName,
     description,
     values,
     handleChange,
     addItemButtonTitle,
-}: {
-    settingName: string;
-    description?: string;
-    values?: string[];
-    handleChange: (values: string[]) => void;
-    addItemButtonTitle?: string;
-}) => {
+    placeholder,
+    allowDuplicates = false,
+    validateItem = () => true,
+    invalidItemError,
+}: MutableListSettingProps) => {
     const { t } = useTranslation();
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [dialogValues, setDialogValues] = useState(values ?? []);
 
+    const [isAddItemDialogOpen, setIsAddItemDialogOpen] = useState(false);
+
     useEffect(() => {
         if (!values) {
             return;
@@ -76,11 +88,25 @@ export const MutableListSetting = ({
             return;
         }
 
+        const isDuplicate = !allowDuplicates && dialogValues.includes(newValue);
+        if (isDuplicate) {
+            return;
+        }
+
+        if (newValue === '') {
+            return;
+        }
+
+        if (!validateItem(newValue)) {
+            makeToast(invalidItemError ?? t('global.error.label.invalid_input'), 'error');
+            return;
+        }
+
         setDialogValues(dialogValues.toSpliced(index, 1, newValue.trim()));
     };
 
     const saveChanges = () => {
-        closeDialog();
+        closeDialog(true);
         handleChange(dialogValues.filter((dialogValue) => dialogValue !== ''));
     };
 
@@ -105,8 +131,8 @@ export const MutableListSetting = ({
                     <List>
                         {dialogValues.map((dialogValue, index) => (
                             <MutableListItem
-                                settingName={dialogValue === '' ? t('global.label.placeholder') : ''}
-                                placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
+                                settingName=""
+                                placeholder={placeholder}
                                 handleChange={(newValue: string) => updateSetting(index, newValue)}
                                 handleDelete={() => updateSetting(index, undefined)}
                                 value={dialogValue}
@@ -116,7 +142,7 @@ export const MutableListSetting = ({
                 </DialogContent>
                 <DialogActions>
                     <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
-                        <Button onClick={() => updateSetting(dialogValues.length, '')}>
+                        <Button onClick={() => setIsAddItemDialogOpen(true)}>
                             {addItemButtonTitle ?? t('global.button.add')}
                         </Button>
                         <Stack direction="row">
@@ -126,6 +152,16 @@ export const MutableListSetting = ({
                     </Stack>
                 </DialogActions>
             </Dialog>
+
+            {isAddItemDialogOpen && (
+                <TextSettingDialog
+                    settingName=""
+                    placeholder={placeholder}
+                    handleChange={(newValue: string) => updateSetting(dialogValues.length, newValue)}
+                    isDialogOpen={isAddItemDialogOpen}
+                    setIsDialogOpen={setIsAddItemDialogOpen}
+                />
+            )}
         </>
     );
 };

src/components/settings/text/TextSetting.tsx

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

src/components/settings/text/TextSettingDialog.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import DialogActions from '@mui/material/DialogActions';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type TextSettingDialogProps = {
+    settingName: string;
+    dialogTitle?: string;
+    dialogDescription?: string;
+    value?: string;
+    handleChange: (value: string) => void;
+    isPassword?: boolean;
+    placeholder?: string;
+    isDialogOpen: boolean;
+    setIsDialogOpen: (open: boolean) => void;
+};
+
+export const TextSettingDialog = ({
+    settingName,
+    dialogTitle = settingName,
+    dialogDescription,
+    value,
+    handleChange,
+    isPassword = false,
+    placeholder = '',
+    isDialogOpen,
+    setIsDialogOpen,
+}: TextSettingDialogProps) => {
+    const { t } = useTranslation();
+
+    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 (
+        <Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
+            <DialogContent>
+                <DialogTitle sx={{ paddingLeft: 0 }}>{dialogTitle}</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>
+    );
+};