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,8 +34,9 @@ export const ValueRotationButton = <Value extends string | number>({
         return values.indexOf(value);
     }, [value, values]);
 
-    if (isDefault) {
     return (
+        <Tooltip title={tooltip}>
+            {isDefault ? (
                 <Button
                     onClick={() => setValue(values[0])}
                     sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
@@ -43,10 +46,7 @@ export const ValueRotationButton = <Value extends string | number>({
                 >
                     {t('global.label.default')}
                 </Button>
-        );
+            ) : (
-    }
-
-    return (
                 <Button
                     onClick={() => {
                         const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
@@ -67,5 +67,7 @@ export const ValueRotationButton = <Value extends string | number>({
                         ? valueToDisplayData[value].title
                         : t(valueToDisplayData[value].title)}
                 </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,9 +24,13 @@ export const ReaderNavBarDesktopProfile = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
     Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
         updateSetting: (profile: string) => void;
-    }) => (
+    }) => {
+    const { t } = useTranslation();
+
+    return (
         <ValueRotationButton
             {...buttonSelectInputProps}
+            tooltip={t('global.label.profile_one')}
             value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
             values={profiles}
             setValue={updateSetting}
@@ -33,3 +38,4 @@ export const ReaderNavBarDesktopProfile = ({
             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,9 +22,13 @@ export const ReaderNavBarDesktopReadingDirection = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
     Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
         setReadingDirection: (readingDirection: ReadingDirection) => void;
-    }) => (
+    }) => {
+    const { t } = useTranslation();
+
+    return (
         <ValueRotationButton
             {...buttonSelectInputProps}
+            tooltip={t('reader.settings.label.reading_direction')}
             value={readingDirection.isDefault ? undefined : readingDirection.value}
             values={READING_DIRECTION_VALUES}
             setValue={setReadingDirection}
@@ -31,3 +36,4 @@ export const ReaderNavBarDesktopReadingDirection = ({
             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,9 +22,13 @@ export const ReaderNavBarDesktopReadingMode = ({
 }: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
     Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
         setReadingMode: (mode: ReadingMode) => void;
-    }) => (
+    }) => {
+    const { t } = useTranslation();
+
+    return (
         <ValueRotationButton
             {...buttonSelectInputProps}
+            tooltip={t('reader.settings.label.reading_mode')}
             value={readingMode.isDefault ? undefined : readingMode.value}
             values={READING_MODE_VALUES}
             setValue={setReadingMode}
@@ -31,3 +36,4 @@ export const ReaderNavBarDesktopReadingMode = ({
             defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
         />
     );
+};