Reader settings

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

@@ -9,23 +9,25 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
-import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 
 export const ButtonSelect = <Value extends string | number>({
     value,
     values,
     setValue,
     valueToDisplayData,
-}: {
-    value: Value;
-    values: Value[];
-    setValue: (value: Value) => void;
-    valueToDisplayData: ValueToDisplayData<Value>;
-}) => {
+    isDefaultable,
+    onDefault,
+}: MultiValueButtonProps<Value>) => {
     const { t } = useTranslation();
 
     return (
         <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+            {isDefaultable && (
+                <Button key="default" onClick={onDefault} variant={value === undefined ? 'contained' : 'outlined'}>
+                    {t('global.label.default')}
+                </Button>
+            )}
             {values.map((displayValue) => (
                 <Button
                     key={displayValue}

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

@@ -7,28 +7,58 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
-import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 
 export const ValueRotationButton = <Value extends string | number>({
     value,
     values,
     setValue,
     valueToDisplayData,
-}: {
-    value: Value;
-    values: Value[];
-    setValue: (value: Value) => void;
-    valueToDisplayData: ValueToDisplayData<Value>;
-}) => {
+    isDefaultable,
+    onDefault,
+    defaultIcon,
+}: MultiValueButtonProps<Value> & { defaultIcon?: ReactNode }) => {
     const { t } = useTranslation();
 
-    const indexOfValue = useMemo(() => values.indexOf(value), [value, values]);
+    const isDefault = value === undefined;
+    const indexOfValue = useMemo(() => {
+        if (isDefault) {
+            return -1;
+        }
+
+        return values.indexOf(value);
+    }, [value, values]);
+
+    if (isDefault) {
+        return (
+            <Button
+                onClick={() => setValue(values[0])}
+                sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                variant="contained"
+                startIcon={defaultIcon}
+                size="large"
+            >
+                {t('global.label.default')}
+            </Button>
+        );
+    }
 
     return (
         <Button
-            onClick={() => setValue(values[(indexOfValue + 1) % values.length])}
+            onClick={() => {
+                const nextValueIndex = (indexOfValue + 1) % values.length;
+                const wasLastValue = nextValueIndex === 0;
+
+                const isDefaultNextValue = isDefaultable && wasLastValue;
+                if (isDefaultNextValue) {
+                    onDefault?.();
+                    return;
+                }
+
+                setValue(values[(indexOfValue + 1) % values.length]);
+            }}
             sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
             variant="contained"
             startIcon={valueToDisplayData[value].icon}