From c0c486a53eb4137847230e226bb98e65f2da1c3d Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Thu, 16 Apr 2026 00:29:46 -0500
Subject: [PATCH] Feat: Double-Tap for Reader Bar (#29)

---
 src/components/reader/Reader.svelte     | 26 ++++++++++++++++++++++---
 src/components/settings/Settings.svelte |  4 ++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/reader/Reader.svelte b/src/components/reader/Reader.svelte
index 9f35690..d3472ca 100644
--- a/src/components/reader/Reader.svelte
+++ b/src/components/reader/Reader.svelte
@@ -181,7 +181,8 @@
   const zoom        = $derived(store.settings.readerZoom ?? 1.0);
   const autoNext    = $derived(store.settings.autoNextChapter ?? false);
   const markOnNext  = $derived(store.settings.markReadOnNext ?? true);
-  const overlayBars = $derived(store.settings.overlayBars ?? false);
+  const overlayBars      = $derived(store.settings.overlayBars ?? false);
+  const tapToToggleBar   = $derived(store.settings.tapToToggleBar ?? false);
   const lastPage    = $derived(store.pageUrls.length);
   const effectiveWidth = $derived(containerWidth > 0 ? Math.round(containerWidth * zoom) : undefined);
   const zoomPct = $derived(Math.round(zoom * 100));
@@ -776,7 +777,18 @@
   function showUi() {
     uiVisible = true;
     if (hideTimer) clearTimeout(hideTimer);
-    hideTimer = setTimeout(() => { if (!markerOpen && !winOpen) uiVisible = false; }, 3000);
+    if (!tapToToggleBar) {
+      hideTimer = setTimeout(() => { if (!markerOpen && !winOpen) uiVisible = false; }, 3000);
+    }
+  }
+
+  function toggleUiVisibility() {
+    if (uiVisible) {
+      if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
+      uiVisible = false;
+    } else {
+      uiVisible = true;
+    }
   }
 
   $effect(() => {
@@ -786,6 +798,13 @@
     }
   });
 
+  $effect(() => {
+    if (tapToToggleBar) {
+      if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
+      uiVisible = true;
+    }
+  });
+
   const INSPECT_ZOOM_STEP = 0.15;
   const INSPECT_ZOOM_MAX  = 8;
 
@@ -940,7 +959,7 @@
   });
 </script>
 
-<div class="root" class:overlay-bars={overlayBars} role="presentation" onmousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
+<div class="root" class:overlay-bars={overlayBars} role="presentation" onmousemove={(e) => { if (!tapToToggleBar && (e.clientY < 60 || window.innerHeight - e.clientY < 60)) showUi(); }}>
 
   <div class="topbar" class:hidden={!uiVisible}>
 
@@ -1158,6 +1177,7 @@
     role="presentation"
     tabindex="-1"
     onclick={handleTap}
+    ondblclick={(e) => { if (tapToToggleBar) { const x = e.clientX / window.innerWidth; if (x >= 0.3 && x <= 0.7) toggleUiVisibility(); } }}
     onmousedown={onInspectMouseDown}
     onwheel={(e) => { if (e.ctrlKey || style !== "longstrip") e.preventDefault(); }}
     onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 8f765c7..154ff8a 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -1320,6 +1320,10 @@
                 <div class="toggle-info"><span class="toggle-label">Overlay bars</span><span class="toggle-desc">Floats the nav and chapter bars over the page instead of pushing content</span></div>
                 <button role="switch" aria-checked={store.settings.overlayBars ?? false} aria-label="Overlay bars" class="toggle" class:on={store.settings.overlayBars ?? false} onclick={() => updateSettings({ overlayBars: !(store.settings.overlayBars ?? false) })}><span class="toggle-thumb"></span></button>
               </label>
+              <label class="toggle-row">
+                <div class="toggle-info"><span class="toggle-label">Tap to toggle bar</span><span class="toggle-desc">Double-tap the center of the reader to show or hide the bars — ideal for touchscreens</span></div>
+                <button role="switch" aria-checked={store.settings.tapToToggleBar ?? false} aria-label="Tap to toggle bar" class="toggle" class:on={store.settings.tapToToggleBar ?? false} onclick={() => updateSettings({ tapToToggleBar: !(store.settings.tapToToggleBar ?? false) })}><span class="toggle-thumb"></span></button>
+              </label>
             </div>
             <div class="section">
               <p class="section-title">Fit &amp; Zoom</p>