From 3db1de86a8893c4c0ae966729f736ff0aa8ffef5 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:48:24 +0100
Subject: [PATCH] Inform about reader layout setting asterisk on touch device

The information for the asterisk was only shown as a tooltip, which is only optimal for non touch devices
---
 public/locales/en.json                        |  1 +
 .../ReaderBottomBarMobileQuickSettings.tsx    |  2 ++
 .../settings/DefaultSettingFootnote.tsx       | 27 +++++++++++++++++++
 .../settings/layout/ReaderLayoutSettings.tsx  |  2 ++
 4 files changed, 32 insertions(+)
 create mode 100644 src/modules/reader/components/settings/DefaultSettingFootnote.tsx

diff --git a/public/locales/en.json b/public/locales/en.json
index 8d33cae6..09034064 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -857,6 +857,7 @@
         "sepia": "Sepia",
         "title": "Custom filter"
       },
+      "default_setting_footnote": "$t(global.label.asterisk): $t(reader.settings.active_setting)",
       "error": {
         "label": {
           "failed_to_save_settings": "Could not save the reader settings to the server"
diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx
index 173b3ad6..b81967d9 100644
--- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobileQuickSettings.tsx
@@ -13,6 +13,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { MangaIdInfo } from '@/modules/manga/Manga.types.ts';
 import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
+import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
 
 const DEFAULT_MANGA: MangaIdInfo = { id: -1 };
 export const ReaderBottomBarMobileQuickSettings = () => {
@@ -26,6 +27,7 @@ export const ReaderBottomBarMobileQuickSettings = () => {
 
     return (
         <Stack sx={{ gap: 2 }}>
+            <DefaultSettingFootnote />
             <ReaderSettingProfile
                 defaultProfile={defaultProfile}
                 profiles={profiles}
diff --git a/src/modules/reader/components/settings/DefaultSettingFootnote.tsx b/src/modules/reader/components/settings/DefaultSettingFootnote.tsx
new file mode 100644
index 00000000..57fd48b3
--- /dev/null
+++ b/src/modules/reader/components/settings/DefaultSettingFootnote.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
+
+export const DefaultSettingFootnote = () => {
+    const { t } = useTranslation();
+    const isTouchDevice = MediaQuery.useIsTouchDevice();
+
+    if (!isTouchDevice) {
+        return null;
+    }
+
+    return (
+        <Stack sx={{ alignItems: 'end' }}>
+            <Typography variant="caption">{t('reader.settings.default_setting_footnote')}</Typography>
+        </Stack>
+    );
+};
diff --git a/src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx b/src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx
index 0c03a522..0d43d906 100644
--- a/src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx
+++ b/src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx
@@ -19,6 +19,7 @@ import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts'
 import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx';
 import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
 import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
+import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
 
 export const ReaderLayoutSettings = ({
     setShowPreview,
@@ -30,6 +31,7 @@ export const ReaderLayoutSettings = ({
     setShowPreview: ContextType<typeof ReaderTapZoneContext>['setShowPreview'];
 }) => (
     <Stack sx={{ gap: 2 }}>
+        <DefaultSettingFootnote />
         {isDefaultable && (
             <ReaderSettingProfile
                 defaultProfile={settings.defaultProfile}