Show active setting in reader desktop nav bar

public/locales/en.json

@@ -395,7 +395,7 @@
     "label": {
       "advanced": "Advanced",
       "are_you_sure": "Are you sure?",
-      "footnote": "{{text}}*",
+      "asterisk": "*",
       "auto": "Auto",
       "both": "Both",
       "bottom": "Bottom",
@@ -410,6 +410,7 @@
       "display": "Display",
       "filter": "Filter",
       "finished": "Finished",
+      "footnote": "{{value}}<0>$t(global.label.asterisk)</0>",
       "general": "General",
       "github": "GitHub",
       "hidden": "Hidden",
@@ -903,7 +904,6 @@
         "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, -, _"
       },
@@ -1116,6 +1116,7 @@
         "title": "Clear server cache"
       }
     },
+    "default_value": "{{value}}<0>($t(global.label.default))</0>",
     "device": {
       "active_device": {
         "label": {

src/modules/core/Core.types.ts

@@ -33,7 +33,6 @@ export type ValueToDisplayData<Value extends string | number> = Record<Value, Di
 
 export interface MultiValueButtonBaseProps<Value extends string | number> {
     tooltip?: string;
-    defaultText?: string;
     value: Value;
     defaultValue?: Value;
     values: Value[];

src/modules/core/components/Superscript.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Trans, useTranslation } from 'react-i18next';
+import { TranslationKey } from '@/Base.types.ts';
+
+/**
+ * Expects a translation key of format "{{value}}<0>superscript</0>"
+ * @param i18nKey
+ * @param value
+ * @constructor
+ */
+export const Superscript = ({ i18nKey, value }: { i18nKey: TranslationKey; value: string }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 0.25 }}>
+            <Trans
+                t={t}
+                // the type of "key" causes tsc error: "TS2590: Expression produces a union type that is too complex to represent"
+                i18nKey={i18nKey as any}
+                values={{ value }}
+                components={[<Typography variant="caption" sx={{ fontSize: 'x-small', opacity: 0.75 }} />]}
+            />
+        </Stack>
+    );
+};

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

@@ -11,6 +11,7 @@ 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';
+import { Superscript } from '@/modules/core/components/Superscript.tsx';
 
 export const ButtonSelect = <Value extends string | number>({
     value,
@@ -36,8 +37,6 @@ export const ButtonSelect = <Value extends string | number>({
                 const text = valueToDisplayData[displayValue].isTitleString
                     ? valueToDisplayData[displayValue].title
                     : t(valueToDisplayData[displayValue].title);
-                const defaultValueText = t('global.label.footnote', { text });
-                const finalText = isDefault ? defaultValueText : text;
 
                 return (
                     <Tooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
@@ -46,7 +45,7 @@ export const ButtonSelect = <Value extends string | number>({
                             variant={displayValue === value ? 'contained' : 'outlined'}
                             startIcon={valueToDisplayData[displayValue].icon}
                         >
-                            {finalText}
+                            {isDefault ? <Superscript i18nKey="global.label.footnote" value={text} /> : text}
                         </Button>
                     </Tooltip>
                 );

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

@@ -12,11 +12,12 @@ 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';
+import { Superscript } from '@/modules/core/components/Superscript.tsx';
 
 export const ValueRotationButton = <Value extends string | number>({
     tooltip,
-    defaultText,
     value,
+    defaultValue,
     values,
     setValue,
     valueToDisplayData,
@@ -45,7 +46,18 @@ export const ValueRotationButton = <Value extends string | number>({
                     startIcon={defaultIcon}
                     size="large"
                 >
-                    {defaultText ?? t('global.label.default')}
+                    {defaultValue === undefined ? (
+                        t('global.label.default')
+                    ) : (
+                        <Superscript
+                            i18nKey="settings.default_value"
+                            value={
+                                valueToDisplayData[defaultValue].isTitleString
+                                    ? valueToDisplayData[defaultValue].title
+                                    : t(valueToDisplayData[defaultValue].title)
+                            }
+                        />
+                    )}
                 </Button>
             ) : (
                 <Button

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

@@ -44,6 +44,7 @@ export const ReaderNavBarDesktopPageScale = ({
                 {...buttonSelectInputProps}
                 tooltip={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={(value) => updateSetting('pageScaleMode', value)}
                 valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}

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

@@ -16,7 +16,6 @@ import {
     getReaderProfile,
     getValidReaderProfile,
 } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
-import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
 
 export const ReaderNavBarDesktopProfile = ({
     defaultProfile,
@@ -37,10 +36,8 @@ export const ReaderNavBarDesktopProfile = ({
         <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)}
+            defaultValue={defaultProfile.isDefault ? activeProfile : undefined}
             values={profiles}
             setValue={updateSetting}
             valueToDisplayData={createProfileValueToDisplayData(profiles, true)}

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

@@ -30,6 +30,7 @@ export const ReaderNavBarDesktopReadingDirection = ({
             {...buttonSelectInputProps}
             tooltip={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={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}

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

@@ -30,6 +30,7 @@ export const ReaderNavBarDesktopReadingMode = ({
             {...buttonSelectInputProps}
             tooltip={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}