layout: make TTS icon less distracting during read-aloud mode (#2198)

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(() => {

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(