From f3d71a54233be4f4b0ed1dac29751f21de7c38ca Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Wed, 15 Apr 2026 22:24:31 +0800
Subject: [PATCH] Reader: hover-reveal / hover-hide top nav on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the nav is hidden (auto-hidden after scrolling past 50px), a
fixed-position hover sensor at the top of the viewport catches mouseenter
and slides the nav back in. Moving the mouse away from the nav slides it
back out.

Gated by `@media (hover: hover)` via JS matchMedia so touch devices are
unaffected — the existing single-tap toggle stays the only way to show
the nav there.

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

diff --git a/components/PageReader.tsx b/components/PageReader.tsx
index 2097796..3197f56 100644
--- a/components/PageReader.tsx
+++ b/components/PageReader.tsx
@@ -82,6 +82,10 @@ export function PageReader({
   // Guards progress writes so an empty session (opened chapter, never
   // scrolled) doesn't overwrite prior bookmark for a different chapter.
   const hasScrolledRef = useRef(false);
+  const [canHover, setCanHover] = useState(false);
+  useEffect(() => {
+    setCanHover(window.matchMedia("(hover: hover)").matches);
+  }, []);
 
   const imagesRef = useRef(images);
   const chapterMetasRef = useRef(chapterMetas);
@@ -539,10 +543,18 @@ export function PageReader({
 
   return (
     <div className="min-h-dvh bg-background">
+      {canHover && !showUI && (
+        <div
+          className="fixed top-0 left-0 right-0 h-16 z-40"
+          onMouseEnter={() => setShowUI(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"
         }`}
+        onMouseEnter={canHover ? () => setShowUI(true) : undefined}
+        onMouseLeave={canHover ? () => setShowUI(false) : undefined}
       >
         <div className="flex items-center gap-3 px-4 h-12 max-w-4xl mx-auto">
           <Link