From 6eff1f68fc64d535cbbca1a0931ec9b4334277c3 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Wed, 15 Apr 2026 22:25:37 +0800
Subject: [PATCH] Reader: nav hover reveals transiently, restores pre-hover
 state on leave
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously hover both revealed (on enter) AND hid (on leave) via the
persistent showUI state — so tapping the nav visible and then moving the
mouse away would hide it. Now hover toggles a separate transient
hoveringNav state; the nav is visible when (showUI || hoveringNav). On
mouseleave, hoveringNav clears and the nav returns to whatever showUI
was before — visible if the user tapped to show it, hidden if it was
scroll-auto-hidden.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/PageReader.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/PageReader.tsx b/components/PageReader.tsx
index 3197f56..795e413 100644
--- a/components/PageReader.tsx
+++ b/components/PageReader.tsx
@@ -83,6 +83,7 @@ export function PageReader({
   // scrolled) doesn't overwrite prior bookmark for a different chapter.
   const hasScrolledRef = useRef(false);
   const [canHover, setCanHover] = useState(false);
+  const [hoveringNav, setHoveringNav] = useState(false);
   useEffect(() => {
     setCanHover(window.matchMedia("(hover: hover)").matches);
   }, []);
@@ -543,18 +544,18 @@ export function PageReader({
 
   return (
     <div className="min-h-dvh bg-background">
-      {canHover && !showUI && (
+      {canHover && !showUI && !hoveringNav && (
         <div
           className="fixed top-0 left-0 right-0 h-16 z-40"
-          onMouseEnter={() => setShowUI(true)}
+          onMouseEnter={() => setHoveringNav(true)}
         />
       )}
       <div
         className={`sticky top-0 z-50 bg-background backdrop-blur-sm shadow-sm transition-transform duration-300 pt-safe ${
-          showUI ? "translate-y-0" : "-translate-y-full"
+          showUI || hoveringNav ? "translate-y-0" : "-translate-y-full"
         }`}
-        onMouseEnter={canHover ? () => setShowUI(true) : undefined}
-        onMouseLeave={canHover ? () => setShowUI(false) : undefined}
+        onMouseEnter={canHover ? () => setHoveringNav(true) : undefined}
+        onMouseLeave={canHover ? () => setHoveringNav(false) : undefined}
       >
         <div className="flex items-center gap-3 px-4 h-12 max-w-4xl mx-auto">
           <Link