feat: [US-038] - Unsaved changes warning

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

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import ReactFlow, {
   Background,
   BackgroundVariant,
@@ -416,6 +417,10 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
   const [importConfirmDialog, setImportConfirmDialog] = useState<{
     pendingData: FlowchartData
   } | null>(null)
+  const [showNavigationWarning, setShowNavigationWarning] = useState(false)
+
+  // Track the last saved data to determine dirty state
+  const lastSavedDataRef = useRef<FlowchartData>(initialData)
 
   // Ref for hidden file input
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -473,6 +478,33 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
     }
   }, [nodes, edges, projectId, draftState.showPrompt])
 
+  // Calculate dirty state by comparing current data with last saved data
+  const isDirty = useMemo(() => {
+    const currentData: FlowchartData = {
+      nodes: fromReactFlowNodes(nodes),
+      edges: fromReactFlowEdges(edges),
+    }
+    return !flowchartDataEquals(currentData, lastSavedDataRef.current)
+  }, [nodes, edges])
+
+  // Browser beforeunload warning when dirty
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (isDirty) {
+        event.preventDefault()
+        // Modern browsers require returnValue to be set
+        event.returnValue = ''
+        return ''
+      }
+    }
+
+    window.addEventListener('beforeunload', handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+    }
+  }, [isDirty])
+
   // Handle restoring draft
   const handleRestoreDraft = useCallback(() => {
     if (draftState.savedDraft) {
@@ -590,6 +622,9 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
       // Clear LocalStorage draft after successful save
       clearDraft(projectId)
 
+      // Update last saved data ref to mark as not dirty
+      lastSavedDataRef.current = flowchartData
+
       setToast({ message: 'Project saved successfully', type: 'success' })
     } catch (error) {
       console.error('Failed to save project:', error)
@@ -932,8 +967,63 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
     setConditionEditor(null)
   }, [])
 
+  // Router for navigation
+  const router = useRouter()
+
+  // Handle back button click - show warning if dirty
+  const handleBackClick = useCallback(() => {
+    if (isDirty) {
+      setShowNavigationWarning(true)
+    } else {
+      router.push('/dashboard')
+    }
+  }, [isDirty, router])
+
+  // Confirm navigation (discard unsaved changes)
+  const handleConfirmNavigation = useCallback(() => {
+    setShowNavigationWarning(false)
+    router.push('/dashboard')
+  }, [router])
+
+  // Cancel navigation
+  const handleCancelNavigation = useCallback(() => {
+    setShowNavigationWarning(false)
+  }, [])
+
   return (
-    <div className="flex h-full w-full flex-col">
+    <div className="flex h-screen w-full flex-col">
+      {/* Editor header with back button and project name */}
+      <header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={handleBackClick}
+            className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
+            aria-label="Back to dashboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+            {projectName}
+          </h1>
+          {isDirty && (
+            <span className="text-sm text-zinc-500 dark:text-zinc-400">
+              (unsaved changes)
+            </span>
+          )}
+        </div>
+      </header>
+
       <Toolbar
         onAddDialogue={handleAddDialogue}
         onAddChoice={handleAddChoice}
@@ -1050,6 +1140,35 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
         </div>
       )}
 
+      {/* Navigation warning dialog */}
+      {showNavigationWarning && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-900">
+            <h2 className="mb-2 text-lg font-semibold text-zinc-900 dark:text-white">
+              Unsaved Changes
+            </h2>
+            <p className="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
+              You have unsaved changes that will be lost if you leave this page.
+              Are you sure you want to leave?
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={handleConfirmNavigation}
+                className="flex-1 rounded-md bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600"
+              >
+                Leave Page
+              </button>
+              <button
+                onClick={handleCancelNavigation}
+                className="flex-1 rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
+              >
+                Stay
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Hidden file input for import */}
       <input
         ref={fileInputRef}

src/app/editor/[projectId]/page.tsx

@@ -1,6 +1,5 @@
 import { createClient } from '@/lib/supabase/server'
 import { notFound } from 'next/navigation'
-import Link from 'next/link'
 import FlowchartEditor from './FlowchartEditor'
 import type { FlowchartData } from '@/types/flowchart'
 
@@ -37,39 +36,10 @@ export default async function EditorPage({ params }: PageProps) {
   }) as FlowchartData
 
   return (
-    <div className="flex h-screen flex-col">
+    <FlowchartEditor
-      <header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
+      projectId={project.id}
-        <div className="flex items-center gap-4">
+      projectName={project.name}
-          <Link
+      initialData={flowchartData}
-            href="/dashboard"
+    />
-            className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fillRule="evenodd"
-                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-                clipRule="evenodd"
-              />
-            </svg>
-          </Link>
-          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-            {project.name}
-          </h1>
-        </div>
-      </header>
-
-      <div className="flex-1">
-        <FlowchartEditor
-          projectId={project.id}
-          projectName={project.name}
-          initialData={flowchartData}
-        />
-      </div>
-    </div>
   )
 }