Add tooltips to reader desktop quick settings

src/modules/core/Core.types.ts

@@ -32,6 +32,7 @@ type DisplayData = DisplayDataTranslationKey | DisplayDataString;
 export type ValueToDisplayData<Value extends string | number> = Record<Value, DisplayData>;
 
 export interface MultiValueButtonBaseProps<Value extends string | number> {
+    tooltip?: string;
     value: Value;
     values: Value[];
     setValue: (value: Value) => void;

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

@@ -9,10 +9,12 @@
 import { useTranslation } from 'react-i18next';
 import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
 import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.utils.ts';
 
 export const ValueRotationButton = <Value extends string | number>({
+    tooltip,
     value,
     values,
     setValue,
@@ -32,40 +34,40 @@ export const ValueRotationButton = <Value extends string | number>({
         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
+        <Tooltip title={tooltip}>
-            onClick={() => {
+            {isDefault ? (
-                const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
+                <Button
+                    onClick={() => setValue(values[0])}
+                    sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                    variant="contained"
+                    startIcon={defaultIcon}
+                    size="large"
+                >
+                    {t('global.label.default')}
+                </Button>
+            ) : (
+                <Button
+                    onClick={() => {
+                        const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
 
-                if (nextValue === undefined) {
+                        if (nextValue === undefined) {
-                    onDefault?.();
+                            onDefault?.();
-                    return;
+                            return;
-                }
+                        }
 
-                setValue(nextValue);
+                        setValue(nextValue);
-            }}
+                    }}
-            sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                    sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
-            variant="contained"
+                    variant="contained"
-            startIcon={valueToDisplayData[value].icon}
+                    startIcon={valueToDisplayData[value].icon}
-            size="large"
+                    size="large"
-        >
+                >
-            {valueToDisplayData[value].isTitleString
+                    {valueToDisplayData[value].isTitleString
-                ? valueToDisplayData[value].title
+                        ? valueToDisplayData[value].title
-                : t(valueToDisplayData[value].title)}
+                        : t(valueToDisplayData[value].title)}
-        </Button>
+                </Button>
+            )}
+        </Tooltip>
     );
 };

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx

@@ -42,6 +42,7 @@ export const ReaderNavBarDesktopPageScale = ({
         <Stack sx={{ flexDirection: 'row', gap: 1 }}>
             <ValueRotationButton
                 {...buttonSelectInputProps}
+                tooltip={t('reader.settings.page_scale.title')}
                 value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
                 values={READER_PAGE_SCALE_MODE_VALUES}
                 setValue={(value) => updateSetting('pageScaleMode', value)}

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx

@@ -7,6 +7,7 @@
  */
 
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
+import { useTranslation } from 'react-i18next';
 import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
 import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
@@ -23,13 +24,18 @@ export const ReaderNavBarDesktopProfile = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
     Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
         updateSetting: (profile: string) => void;
-    }) => (
+    }) => {
-    <ValueRotationButton
+    const { t } = useTranslation();
-        {...buttonSelectInputProps}
+
-        value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
+    return (
-        values={profiles}
+        <ValueRotationButton
-        setValue={updateSetting}
+            {...buttonSelectInputProps}
-        valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
+            tooltip={t('global.label.profile_one')}
-        defaultIcon={<ManageAccountsIcon />}
+            value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
-    />
+            values={profiles}
-);
+            setValue={updateSetting}
+            valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
+            defaultIcon={<ManageAccountsIcon />}
+        />
+    );
+};

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx

@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import { useTranslation } from 'react-i18next';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
 import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
 import {
@@ -21,13 +22,18 @@ export const ReaderNavBarDesktopReadingDirection = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
     Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
         setReadingDirection: (readingDirection: ReadingDirection) => void;
-    }) => (
+    }) => {
-    <ValueRotationButton
+    const { t } = useTranslation();
-        {...buttonSelectInputProps}
+
-        value={readingDirection.isDefault ? undefined : readingDirection.value}
+    return (
-        values={READING_DIRECTION_VALUES}
+        <ValueRotationButton
-        setValue={setReadingDirection}
+            {...buttonSelectInputProps}
-        valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
+            tooltip={t('reader.settings.label.reading_direction')}
-        defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
+            value={readingDirection.isDefault ? undefined : readingDirection.value}
-    />
+            values={READING_DIRECTION_VALUES}
-);
+            setValue={setReadingDirection}
+            valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
+            defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
+        />
+    );
+};

src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx

@@ -6,6 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import { useTranslation } from 'react-i18next';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
 import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 import {
@@ -21,13 +22,18 @@ export const ReaderNavBarDesktopReadingMode = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
     Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
         setReadingMode: (mode: ReadingMode) => void;
-    }) => (
+    }) => {
-    <ValueRotationButton
+    const { t } = useTranslation();
-        {...buttonSelectInputProps}
+
-        value={readingMode.isDefault ? undefined : readingMode.value}
+    return (
-        values={READING_MODE_VALUES}
+        <ValueRotationButton
-        setValue={setReadingMode}
+            {...buttonSelectInputProps}
-        valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+            tooltip={t('reader.settings.label.reading_mode')}
-        defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
+            value={readingMode.isDefault ? undefined : readingMode.value}
-    />
+            values={READING_MODE_VALUES}
-);
+            setValue={setReadingMode}
+            valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+            defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
+        />
+    );
+};