Custom reader profiles

src/modules/core/Core.types.ts

@@ -15,13 +15,21 @@ export enum GridLayout {
     List = 2,
 }
 
-export type ValueToDisplayData<Value extends string | number> = Record<
-    Value,
-    {
-        title: TranslationKey;
-        icon: ReactNode;
-    }
->;
+interface DisplayDataTranslationKey {
+    isTitleString?: never;
+    title: TranslationKey;
+    icon: ReactNode;
+}
+
+interface DisplayDataString {
+    isTitleString: true;
+    title: string;
+    icon: ReactNode;
+}
+
+type DisplayData = DisplayDataTranslationKey | DisplayDataString;
+
+export type ValueToDisplayData<Value extends string | number> = Record<Value, DisplayData>;
 
 export interface MultiValueButtonBaseProps<Value extends string | number> {
     value: Value;

src/modules/core/components/buttons/ButtonSelect.tsx

@@ -35,7 +35,9 @@ export const ButtonSelect = <Value extends string | number>({
                     variant={displayValue === value ? 'contained' : 'outlined'}
                     startIcon={valueToDisplayData[displayValue].icon}
                 >
-                    {t(valueToDisplayData[displayValue].title)}
+                    {valueToDisplayData[displayValue].isTitleString
+                        ? valueToDisplayData[displayValue].title
+                        : t(valueToDisplayData[displayValue].title)}
                 </Button>
             ))}
         </Stack>

src/modules/core/components/buttons/ValueRotationButton.tsx

@@ -64,7 +64,9 @@ export const ValueRotationButton = <Value extends string | number>({
             startIcon={valueToDisplayData[value].icon}
             size="large"
         >
-            {t(valueToDisplayData[value].title)}
+            {valueToDisplayData[value].isTitleString
+                ? valueToDisplayData[value].title
+                : t(valueToDisplayData[value].title)}
         </Button>
     );
 };

src/modules/core/components/settings/MutableListSetting.tsx

@@ -66,9 +66,9 @@ type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placehold
     description?: string;
     dialogDisclaimer?: JSX.Element | string;
     addItemButtonTitle?: string;
-    handleChange: (values: string[]) => void;
+    handleChange: (values: string[], removedValues: string[]) => void;
     allowDuplicates?: boolean;
-    validateItem?: (value: string) => boolean;
+    validateItem?: (value: string, tmpValues?: string[]) => boolean;
     invalidItemError?: string;
 };
 
@@ -128,7 +128,7 @@ export const MutableListSetting = ({
             return;
         }
 
-        if (!validateItem(newValue)) {
+        if (!validateItem?.(newValue, dialogValues)) {
             makeToast(invalidItemError ?? t('global.error.label.invalid_input'), 'error');
             return;
         }
@@ -138,7 +138,11 @@ export const MutableListSetting = ({
 
     const saveChanges = () => {
         closeDialog(true);
-        handleChange(dialogValues.filter((dialogValue) => dialogValue !== ''));
+
+        const updatedValues = dialogValues.filter((dialogValue) => dialogValue !== '');
+        const removedValues = values.filter((value) => !updatedValues.includes(value));
+
+        handleChange(updatedValues, removedValues);
     };
 
     return (
@@ -193,6 +197,7 @@ export const MutableListSetting = ({
                     <List>
                         {dialogValues.map((dialogValue, index) => (
                             <MutableListItem
+                                key={dialogValue}
                                 settingName=""
                                 placeholder={placeholder}
                                 handleChange={(newValue: string) => updateSetting(index, newValue)}
@@ -230,6 +235,7 @@ export const MutableListSetting = ({
                     handleChange={(newValue: string) => updateSetting(dialogValues.length, newValue)}
                     isDialogOpen={isAddItemDialogOpen}
                     setIsDialogOpen={setIsAddItemDialogOpen}
+                    validate={(value) => validateItem?.(value, dialogValues) ?? true}
                 />
             )}
         </>

src/modules/core/components/settings/text/TextSettingDialog.tsx

@@ -47,6 +47,8 @@ export const TextSettingDialog = ({
     const [dialogValue, setDialogValue] = useState(value ?? '');
     const [isValidValue, setIsValidValue] = useState(true);
 
+    const error = !isValidValue && !!dialogValue.length;
+
     const TextFieldComponent = useMemo(() => (isPassword ? PasswordTextField : TextField), [isPassword]);
 
     useEffect(() => {
@@ -85,8 +87,8 @@ export const TextSettingDialog = ({
                     autoFocus
                     placeholder={placeholder}
                     value={dialogValue}
-                    error={!isValidValue}
-                    helperText={!isValidValue ? t('global.error.label.invalid_input') : ''}
+                    error={error}
+                    helperText={error ? t('global.error.label.invalid_input') : ''}
                     onChange={(e) => {
                         const newValue = e.target.value;