From 00af4a3d603b24f16016a98466263971fcc84add Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 11 Oct 2025 01:14:57 +0800
Subject: [PATCH] layout: make TTS icon less distracting during read-aloud mode
 (#2198)

---
 .../app/reader/components/footerbar/FooterBar.tsx  | 14 ++++++++++++--
 .../src/app/reader/components/tts/TTSControl.tsx   |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index 9b9be971..24a4942a 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -95,7 +95,9 @@ const FooterBar: React.FC<FooterBarProps> = ({
       setActionTab((prevTab) => (prevTab === tab ? '' : tab));
 
       if (tab === 'tts') {
-        setHoveredBookKey('');
+        if (viewState?.ttsEnabled) {
+          setHoveredBookKey('');
+        }
         handleSpeakText();
       } else if (tab === 'toc') {
         setHoveredBookKey('');
@@ -113,7 +115,15 @@ const FooterBar: React.FC<FooterBarProps> = ({
         }
       }
     },
-    [config, bookKey, setConfig, setSideBarVisible, setHoveredBookKey, handleSpeakText],
+    [
+      config,
+      bookKey,
+      viewState?.ttsEnabled,
+      setConfig,
+      setSideBarVisible,
+      setHoveredBookKey,
+      handleSpeakText,
+    ],
   );
 
   useEffect(() => {
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
index b7abb36e..1c0e81ba 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
@@ -550,7 +550,7 @@ const TTSControl: React.FC<TTSControlProps> = ({ bookKey, gridInsets }) => {
   return (
     <>
       {showPanel && <Overlay onDismiss={handleDismissPopup} />}
-      {showIndicator && (
+      {showIndicator && hoveredBookKey === bookKey && (
         <div
           ref={iconRef}
           className={clsx(