From 3ef9908df70fe90cd852dab7d575aa5c0687bebd Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Fri, 5 Dec 2025 18:42:36 +0900
Subject: [PATCH] feat: add confirmation dialog to prevent accidental back
 navigation (#99)

Addresses conflict between right-click drag and browser back gesture in
Chromium-based browsers. Shows browser confirmation dialog when user
tries to navigate away, preventing accidental page exits.

Closes #80
---
 app/page.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/page.tsx b/app/page.tsx
index d575d94..b2310dd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -32,6 +32,18 @@ export default function Home() {
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, []);
 
+    // Show confirmation dialog when user tries to leave the page
+    // This helps prevent accidental navigation from browser back gestures
+    useEffect(() => {
+        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+            event.preventDefault();
+            return '';
+        };
+
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    }, []);
+
     return (
         <div className="flex h-screen bg-background relative overflow-hidden">
             {/* Mobile warning overlay */}