From 858c3b4bcf6ff7fcb3eed9b8b9641ca8b1288237 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 12 Dec 2024 02:09:19 +0100
Subject: [PATCH] Display active profile for default value

In case the profile was not set and the default value got used, there was no indication of the active profile.
---
 public/locales/en.json                         |  1 +
 src/modules/core/Core.types.ts                 |  1 +
 .../components/buttons/ValueRotationButton.tsx |  3 ++-
 .../ReaderNavBarDesktopProfile.tsx             | 11 ++++++++++-
 .../ReaderNavBarDesktopQuickSettings.tsx       |  3 +++
 src/modules/reader/screens/Reader.tsx          | 12 +++++-------
 .../reader/utils/ReaderSettings.utils.tsx      | 18 +++++++++++++++++-
 7 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index c2eb8ab4..67b49c2a 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -901,6 +901,7 @@
         "width": "Fit width"
       },
       "profiles": {
+        "default_value": "$t(global.label.default) ({{profile}})",
         "description": "Profiles are used to define the default reader settings which then can be used for series and reading modes",
         "placeholder": "Comics | length: 16, chars: letters, numbers, -, _"
       },
diff --git a/src/modules/core/Core.types.ts b/src/modules/core/Core.types.ts
index faca95c0..c1910ef0 100644
--- a/src/modules/core/Core.types.ts
+++ b/src/modules/core/Core.types.ts
@@ -33,6 +33,7 @@ export type ValueToDisplayData<Value extends string | number> = Record<Value, Di
 
 export interface MultiValueButtonBaseProps<Value extends string | number> {
     tooltip?: string;
+    defaultText?: 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 6bf8522e..e4519640 100644
--- a/src/modules/core/components/buttons/ValueRotationButton.tsx
+++ b/src/modules/core/components/buttons/ValueRotationButton.tsx
@@ -15,6 +15,7 @@ import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.u
 
 export const ValueRotationButton = <Value extends string | number>({
     tooltip,
+    defaultText,
     value,
     values,
     setValue,
@@ -44,7 +45,7 @@ export const ValueRotationButton = <Value extends string | number>({
                     startIcon={defaultIcon}
                     size="large"
                 >
-                    {t('global.label.default')}
+                    {defaultText ?? t('global.label.default')}
                 </Button>
             ) : (
                 <Button
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 5395734e..a00d16f5 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
@@ -13,24 +13,33 @@ import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
 import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
 import {
     createProfileValueToDisplayData,
+    getReaderProfile,
     getValidReaderProfile,
 } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
 export const ReaderNavBarDesktopProfile = ({
     defaultProfile,
     profiles,
+    readingModesDefaultProfile,
+    readingMode,
     updateSetting,
     ...buttonSelectInputProps
-}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
+}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles' | 'readingModesDefaultProfile' | 'readingMode'> &
     Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
         updateSetting: (profile: string) => void;
     }) => {
     const { t } = useTranslation();
 
+    const activeProfile = getReaderProfile(defaultProfile, profiles, readingModesDefaultProfile, readingMode.value);
+
     return (
         <ValueRotationButton
             {...buttonSelectInputProps}
             tooltip={t('global.label.profile_one')}
+            defaultText={t('reader.settings.profiles.default_value', {
+                profile: activeProfile === DEFAULT_READER_PROFILE ? t('global.label.standard') : activeProfile,
+            })}
             value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
             values={profiles}
             setValue={updateSetting}
diff --git a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
index 95c72f79..5b7ee890 100644
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -22,6 +22,7 @@ export const ReaderNavBarDesktopQuickSettings = ({
     settings: {
         defaultProfile,
         profiles,
+        readingModesDefaultProfile,
         readingMode,
         shouldOffsetDoubleSpreads,
         pageScaleMode,
@@ -40,6 +41,8 @@ export const ReaderNavBarDesktopQuickSettings = ({
             <ReaderNavBarDesktopProfile
                 defaultProfile={defaultProfile}
                 profiles={profiles}
+                readingModesDefaultProfile={readingModesDefaultProfile}
+                readingMode={readingMode}
                 updateSetting={(value) => updateSetting('defaultProfile', value)}
                 isDefaultable={isDefaultable}
                 onDefault={() => onDefault?.('defaultProfile')}
diff --git a/src/modules/reader/screens/Reader.tsx b/src/modules/reader/screens/Reader.tsx
index 8adcaef9..b3fd889d 100644
--- a/src/modules/reader/screens/Reader.tsx
+++ b/src/modules/reader/screens/Reader.tsx
@@ -37,7 +37,7 @@ import { ReaderViewer } from '@/modules/reader/components/viewer/ReaderViewer.ts
 import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { READER_BACKGROUND_TO_COLOR } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { createPageData, createPagesData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
-import { getValidReaderProfile } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
+import { getReaderProfile } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
 import { ReaderHotkeys } from '@/modules/reader/components/ReaderHotkeys.tsx';
 import { ReaderResumeMode, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
 import { getInitialReaderPageIndex } from '@/modules/reader/utils/Reader.utils.ts';
@@ -194,13 +194,11 @@ export const Reader = () => {
             defaultSettings,
         );
 
-        const profile = getValidReaderProfile(
-            settingsWithDefaultProfileFallback.defaultProfile.isDefault
-                ? settingsWithDefaultProfileFallback.readingModesDefaultProfile[
-                      settingsWithDefaultProfileFallback.readingMode.value
-                  ]
-                : settingsWithDefaultProfileFallback.defaultProfile.value,
+        const profile = getReaderProfile(
+            settingsWithDefaultProfileFallback.defaultProfile,
             settingsWithDefaultProfileFallback.profiles,
+            settingsWithDefaultProfileFallback.readingModesDefaultProfile,
+            settingsWithDefaultProfileFallback.readingMode.value,
         );
 
         const profileSettings = getReaderSettings(
diff --git a/src/modules/reader/utils/ReaderSettings.utils.tsx b/src/modules/reader/utils/ReaderSettings.utils.tsx
index 623e9483..044859f6 100644
--- a/src/modules/reader/utils/ReaderSettings.utils.tsx
+++ b/src/modules/reader/utils/ReaderSettings.utils.tsx
@@ -7,7 +7,12 @@
  */
 
 import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
-import { IReaderSettings, ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import {
+    IReaderSettings,
+    IReaderSettingsWithDefaultFlag,
+    ReaderPageScaleMode,
+    ReadingMode,
+} from '@/modules/reader/types/Reader.types.ts';
 import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
 
@@ -37,3 +42,14 @@ export const isReaderWidthEditable = (pageScaleMode: IReaderSettings['pageScaleM
 
 export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
     [ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL].includes(readingMode);
+
+export const getReaderProfile = (
+    defaultProfile: IReaderSettingsWithDefaultFlag['defaultProfile'],
+    profiles: IReaderSettings['profiles'],
+    readingModesDefaultProfile: IReaderSettings['readingModesDefaultProfile'],
+    readingMode: IReaderSettings['readingMode'],
+): string =>
+    getValidReaderProfile(
+        defaultProfile.isDefault ? readingModesDefaultProfile[readingMode] : defaultProfile.value,
+        profiles,
+    );