From 2cd5a970cc7e3286e45f07fb1614c1c551c5bc90 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:24:32 +0100
Subject: [PATCH] Add tooltips to reader desktop quick settings

---
 src/modules/core/Core.types.ts                |  1 +
 .../buttons/ValueRotationButton.tsx           | 66 ++++++++++---------
 .../ReaderNavBarDesktopPageScale.tsx          |  1 +
 .../ReaderNavBarDesktopProfile.tsx            | 26 +++++---
 .../ReaderNavBarDesktopReadingDirection.tsx   | 26 +++++---
 .../ReaderNavBarDesktopReadingMode.tsx        | 26 +++++---
 6 files changed, 84 insertions(+), 62 deletions(-)

diff --git a/src/modules/core/Core.types.ts b/src/modules/core/Core.types.ts
index d33bb311..faca95c0 100644
--- a/src/modules/core/Core.types.ts
+++ b/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;
diff --git a/src/modules/core/components/buttons/ValueRotationButton.tsx b/src/modules/core/components/buttons/ValueRotationButton.tsx
index eb999438..6bf8522e 100644
--- a/src/modules/core/components/buttons/ValueRotationButton.tsx
+++ b/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
-            onClick={() => {
-                const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
+        <Tooltip title={tooltip}>
+            {isDefault ? (
+                <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) {
-                    onDefault?.();
-                    return;
-                }
+                        if (nextValue === undefined) {
+                            onDefault?.();
+                            return;
+                        }
 
-                setValue(nextValue);
-            }}
-            sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
-            variant="contained"
-            startIcon={valueToDisplayData[value].icon}
-            size="large"
-        >
-            {valueToDisplayData[value].isTitleString
-                ? valueToDisplayData[value].title
-                : t(valueToDisplayData[value].title)}
-        </Button>
+                        setValue(nextValue);
+                    }}
+                    sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+                    variant="contained"
+                    startIcon={valueToDisplayData[value].icon}
+                    size="large"
+                >
+                    {valueToDisplayData[value].isTitleString
+                        ? valueToDisplayData[value].title
+                        : t(valueToDisplayData[value].title)}
+                </Button>
+            )}
+        </Tooltip>
     );
 };
diff --git a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
index 9469f310..0cb61e29 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
+++ b/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)}
diff --git a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx
index 48e03e7e..5395734e 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx
+++ b/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
-        {...buttonSelectInputProps}
-        value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
-        values={profiles}
-        setValue={updateSetting}
-        valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
-        defaultIcon={<ManageAccountsIcon />}
-    />
-);
+    }) => {
+    const { t } = useTranslation();
+
+    return (
+        <ValueRotationButton
+            {...buttonSelectInputProps}
+            tooltip={t('global.label.profile_one')}
+            value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
+            values={profiles}
+            setValue={updateSetting}
+            valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
+            defaultIcon={<ManageAccountsIcon />}
+        />
+    );
+};
diff --git a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx
index 85e98619..acff5b10 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx
+++ b/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
-        {...buttonSelectInputProps}
-        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}
-    />
-);
+    }) => {
+    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}
+            valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
+            defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
+        />
+    );
+};
diff --git a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx
index e84d8b6e..2314b336 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx
+++ b/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
-        {...buttonSelectInputProps}
-        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}
-    />
-);
+    }) => {
+    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}
+            valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+            defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
+        />
+    );
+};