From 4dc191735d16b393b11978b0fec2461c0bb9bdcd Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 16 Oct 2025 22:49:05 +0800
Subject: [PATCH] fix(layout): prevent TTS indicator from disappearing too
 quickly to open configuration panel, closes #2247 (#2248)

---
 .../app/reader/components/tts/TTSControl.tsx  | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

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 f99dc784..19828bde 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
@@ -54,6 +54,9 @@ const TTSControl: React.FC<TTSControlProps> = ({ bookKey, gridInsets }) => {
   const [timeoutTimestamp, setTimeoutTimestamp] = useState(0);
   const [timeoutFunc, setTimeoutFunc] = useState<ReturnType<typeof setTimeout> | null>(null);
 
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [showIndicatorWithinTimeout, setShowIndicatorWithinTimeout] = useState(true);
+
   const popupPadding = useResponsiveSize(POPUP_PADDING);
   const maxWidth = window.innerWidth - 2 * popupPadding;
   const popupWidth = Math.min(maxWidth, useResponsiveSize(POPUP_WIDTH));
@@ -571,10 +574,38 @@ const TTSControl: React.FC<TTSControlProps> = ({ bookKey, gridInsets }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPanel]);
 
+  useEffect(() => {
+    if (hoveredBookKey) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      const showTimeout = setTimeout(() => {
+        setShowIndicatorWithinTimeout(true);
+      }, 100);
+      hoverTimeoutRef.current = showTimeout;
+    } else {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      const hideTimeout = setTimeout(() => {
+        setShowIndicatorWithinTimeout(false);
+      }, 5000);
+      hoverTimeoutRef.current = hideTimeout;
+    }
+
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, [hoveredBookKey]);
+
   return (
     <>
       {showPanel && <Overlay onDismiss={handleDismissPopup} />}
-      {showIndicator && hoveredBookKey === bookKey && (
+      {(showPanel || (showIndicator && showIndicatorWithinTimeout)) && (
         <div
           ref={iconRef}
           className={clsx(