feat(ux): warn user before leaving with unsaved changes

Add beforeunload event listener to show browser confirmation
dialog when user tries to navigate away with staged changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: msujaws

src/App.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { ToastContainer } from './components/Notifications/ToastContainer'
 import { ApiKeyInput } from './components/Auth/ApiKeyInput'
 import { ApiKeyStatus } from './components/Auth/ApiKeyStatus'
@@ -36,6 +36,20 @@ function App() {
   const removeToast = useStore((state) => state.removeToast)
   const addToast = useStore((state) => state.addToast)
 
+  // Warn user before leaving page with unsaved staged changes
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (changes.size > 0) {
+        event.preventDefault()
+      }
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, [changes.size])
+
   // Handle close modal
   const handleCloseModal = useCallback(() => {
     setShowApiKeyModal(false)