Highlight active settings in reader settings

public/locales/en.json

@@ -395,6 +395,7 @@
     "label": {
       "advanced": "Advanced",
       "are_you_sure": "Are you sure?",
+      "footnote": "{{text}}*",
       "auto": "Auto",
       "both": "Both",
       "bottom": "Bottom",
@@ -836,6 +837,7 @@
       }
     },
     "settings": {
+      "active_setting": "Active setting",
       "background_color": "Background color",
       "custom_filter": {
         "brightness": "Custom brightness",

src/modules/core/Core.types.ts

@@ -35,6 +35,7 @@ export interface MultiValueButtonBaseProps<Value extends string | number> {
     tooltip?: string;
     defaultText?: string;
     value: Value;
+    defaultValue?: Value;
     values: Value[];
     setValue: (value: Value) => void;
     valueToDisplayData: ValueToDisplayData<Value>;

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

@@ -9,11 +9,13 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 
 export const ButtonSelect = <Value extends string | number>({
     value,
     values,
+    defaultValue,
     setValue,
     valueToDisplayData,
     isDefaultable,
@@ -28,18 +30,27 @@ export const ButtonSelect = <Value extends string | number>({
                     {t('global.label.default')}
                 </Button>
             )}
-            {values.map((displayValue) => (
+            {values.map((displayValue) => {
-                <Button
+                const isDefault = value === undefined && displayValue === defaultValue;
-                    key={displayValue}
+
-                    onClick={() => setValue(displayValue)}
+                const text = valueToDisplayData[displayValue].isTitleString
-                    variant={displayValue === value ? 'contained' : 'outlined'}
+                    ? valueToDisplayData[displayValue].title
-                    startIcon={valueToDisplayData[displayValue].icon}
+                    : t(valueToDisplayData[displayValue].title);
-                >
+                const defaultValueText = t('global.label.footnote', { text });
-                    {valueToDisplayData[displayValue].isTitleString
+                const finalText = isDefault ? defaultValueText : text;
-                        ? valueToDisplayData[displayValue].title
+
-                        : t(valueToDisplayData[displayValue].title)}
+                return (
-                </Button>
+                    <Tooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
-            ))}
+                        <Button
+                            onClick={() => setValue(displayValue)}
+                            variant={displayValue === value ? 'contained' : 'outlined'}
+                            startIcon={valueToDisplayData[displayValue].icon}
+                        >
+                            {finalText}
+                        </Button>
+                    </Tooltip>
+                );
+            })}
         </Stack>
     );
 };

src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx

@@ -34,6 +34,7 @@ export const ReaderSettingPageScaleMode = ({
             {...buttonSelectInputProps}
             label={t('reader.settings.page_scale.title')}
             value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
+            defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
             values={READER_PAGE_SCALE_MODE_VALUES}
             setValue={setPageScaleMode}
             valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}

src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx

@@ -41,6 +41,7 @@ export const ReaderSettingReadingDirection = ({
             {...buttonSelectInputProps}
             label={t('reader.settings.label.reading_direction')}
             value={readingDirection.isDefault ? undefined : readingDirection.value}
+            defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
             values={READING_DIRECTION_VALUES}
             setValue={setReadingDirection}
             valueToDisplayData={VALUE_TO_DISPLAY_DATA}

src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx

@@ -30,6 +30,7 @@ export const ReaderSettingReadingMode = ({
             {...buttonSelectInputProps}
             label={t('reader.settings.label.reading_mode')}
             value={readingMode.isDefault ? undefined : readingMode.value}
+            defaultValue={readingMode.isDefault ? readingMode.value : undefined}
             values={READING_MODE_VALUES}
             setValue={setReadingMode}
             valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}

src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx

@@ -89,11 +89,14 @@ export const ReaderSettingTapZoneInvertMode = ({
     }) => {
     const { t } = useTranslation();
 
+    const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
+
     return (
         <ButtonSelectInput
             {...buttonSelectInputProps}
             label={t('reader.settings.tap_zones.invert')}
-            value={tapZoneInvertMode.isDefault ? undefined : convertTapZoneInvertModeToOption(tapZoneInvertMode.value)}
+            value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}
+            defaultValue={tapZoneInvertMode.isDefault ? tapZonesInvertOption : undefined}
             values={TAP_ZONES_INVERT_OPTION_VALUES}
             setValue={(value) => setTapZoneInvertMode(TAP_ZONES_INVERT_OPTION_TO_SETTING[value])}
             valueToDisplayData={VALUE_TO_DISPLAY_DATA}

src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx

@@ -52,6 +52,7 @@ export const ReaderSettingTapZoneLayout = ({
             {...buttonSelectInputProps}
             label={t('reader.settings.tap_zones.title')}
             value={tapZoneLayout.isDefault ? undefined : tapZoneLayout.value}
+            defaultValue={tapZoneLayout.isDefault ? tapZoneLayout.value : undefined}
             values={READER_TAP_ZONE_LAYOUT_VALUES}
             setValue={setTapZoneLayout}
             valueToDisplayData={VALUE_TO_DISPLAY_DATA}

src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx

@@ -26,11 +26,14 @@ export const ReaderSettingProfile = ({
     }) => {
     const { t } = useTranslation();
 
+    const validReaderProfile = getValidReaderProfile(defaultProfile.value, profiles);
+
     return (
         <ButtonSelectInput
             {...buttonSelectInputProps}
             label={t('global.label.profile_one')}
-            value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
+            value={defaultProfile.isDefault ? undefined : validReaderProfile}
+            defaultValue={defaultProfile.isDefault ? validReaderProfile : undefined}
             values={profiles}
             setValue={updateSetting}
             valueToDisplayData={createProfileValueToDisplayData(profiles)}