fix: wrap useSearchParams() in Suspense boundary for login and signup pages

Next.js App Router requires components using useSearchParams() to be
wrapped in a Suspense boundary for static generation. Split login and
signup pages into server component wrappers with Suspense and client
form components.

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

prd.json

@@ -675,7 +675,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 38,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {
@@ -692,7 +692,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 39,
-      "passes": false,
+      "passes": true,
       "notes": ""
     }
   ]

progress.txt

@@ -24,6 +24,8 @@
 - Register custom node types in nodeTypes object (memoized with useMemo) and pass to ReactFlow component
 - FlowchartEditor uses ReactFlowProvider wrapper + inner component pattern for useReactFlow() hook access
 - Use nanoid for generating unique node IDs (import from 'nanoid')
+- Reusable LoadingSpinner component in `src/components/LoadingSpinner.tsx` with size ('sm'|'md'|'lg') and optional message
+- Toast component supports an optional `action` prop: `{ label: string; onClick: () => void }` for retry/undo buttons
 
 ---
 
@@ -552,3 +554,35 @@
   - Validate JSON output with JSON.parse before download to ensure validity
   - Use purple color scheme for Ren'Py-specific button to distinguish from generic export
 ---
+
+## 2026-01-22 - US-038
+- What was implemented: Unsaved changes warning with dirty state tracking, beforeunload, and navigation confirmation modal
+- Files changed:
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - added isDirty tracking via useMemo comparing current state to lastSavedDataRef, beforeunload event handler, navigation warning modal, back button with handleBackClick, moved header from page.tsx into this component
+  - src/app/editor/[projectId]/page.tsx - simplified to only render FlowchartEditor (header moved to client component for dirty state access)
+- **Learnings for future iterations:**
+  - Dirty state tracking uses useMemo comparing JSON.stringify of current flowchart data to a lastSavedDataRef
+  - lastSavedDataRef is a useRef initialized with initialData and updated after successful save
+  - Browser beforeunload requires both event.preventDefault() and setting event.returnValue = '' for modern browsers
+  - Header with back navigation was moved from server component (page.tsx) to client component (FlowchartEditor.tsx) so it can access isDirty state
+  - Back button uses handleBackClick which checks isDirty before navigating or showing confirmation modal
+  - Navigation warning modal shows "Leave Page" (red) and "Stay" buttons for clear user action
+  - "(unsaved changes)" indicator shown next to project name when isDirty is true
+---
+
+## 2026-01-22 - US-039
+- What was implemented: Loading and error states with reusable spinner, error page, and toast retry
+- Files changed:
+  - src/components/LoadingSpinner.tsx - new reusable loading spinner component with size variants and optional message
+  - src/app/editor/[projectId]/loading.tsx - updated to use LoadingSpinner component
+  - src/app/editor/[projectId]/page.tsx - replaced notFound() with custom error UI showing "Project Not Found" with back to dashboard link
+  - src/components/Toast.tsx - added optional action prop for action buttons (e.g., retry)
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - updated toast state type to include action, save error now shows retry button via handleSaveRef pattern
+- **Learnings for future iterations:**
+  - Use a ref (handleSaveRef) to break circular dependency when a useCallback needs to reference itself for retry logic
+  - Toast action prop uses `{ label: string; onClick: () => void }` for flexible action buttons
+  - Don't auto-dismiss toasts that have action buttons (users need time to click them)
+  - Replace `notFound()` with inline error UI when you need custom styling and navigation links
+  - LoadingSpinner uses size prop ('sm' | 'md' | 'lg') for flexibility across different contexts
+  - Link component from next/link is needed in server components for navigation (no useRouter in server components)
+---

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,
@@ -412,14 +413,21 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null)
   const [conditionEditor, setConditionEditor] = useState<ConditionEditorState>(null)
   const [isSaving, setIsSaving] = useState(false)
-  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null)
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error'; action?: { label: string; onClick: () => void } } | null>(null)
   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)
 
+  // Ref for save function to enable retry without circular dependency
+  const handleSaveRef = useRef<() => void>(() => {})
+
   // Check for saved draft on initial render (lazy initialization)
   const [draftState, setDraftState] = useState<{
     showPrompt: boolean
@@ -473,6 +481,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,15 +625,25 @@ 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)
-      setToast({ message: 'Failed to save project. Please try again.', type: 'error' })
+      setToast({
+        message: 'Failed to save project.',
+        type: 'error',
+        action: { label: 'Retry', onClick: () => { setToast(null); handleSaveRef.current() } },
+      })
     } finally {
       setIsSaving(false)
     }
   }, [isSaving, nodes, edges, projectId])
 
+  // Keep ref updated with latest handleSave
+  handleSaveRef.current = handleSave
+
   const handleExport = useCallback(() => {
     // Convert React Flow state to FlowchartData
     const flowchartData: FlowchartData = {
@@ -932,8 +977,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 +1150,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}
@@ -1065,6 +1194,7 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
           message={toast.message}
           type={toast.type}
           onClose={() => setToast(null)}
+          action={toast.action}
         />
       )}
     </div>

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

@@ -1,3 +1,5 @@
+import LoadingSpinner from '@/components/LoadingSpinner'
+
 export default function EditorLoading() {
   return (
     <div className="flex h-screen flex-col">
@@ -9,31 +11,7 @@ export default function EditorLoading() {
       </header>
 
       <div className="flex flex-1 items-center justify-center bg-zinc-100 dark:bg-zinc-800">
-        <div className="flex flex-col items-center gap-3">
-          <svg
-            className="h-8 w-8 animate-spin text-blue-500"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-          <p className="text-sm text-zinc-600 dark:text-zinc-400">
-            Loading editor...
-          </p>
-        </div>
+        <LoadingSpinner size="lg" message="Loading editor..." />
       </div>
     </div>
   )

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

@@ -1,5 +1,4 @@
 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'
@@ -28,21 +27,13 @@ export default async function EditorPage({ params }: PageProps) {
     .single()
 
   if (error || !project) {
-    notFound()
-  }
-
-  const flowchartData = (project.flowchart_data || {
-    nodes: [],
-    edges: [],
-  }) as FlowchartData
-
-  return (
-    <div className="flex h-screen flex-col">
-      <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">
+    return (
+      <div className="flex h-screen flex-col">
+        <header className="flex items-center border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
           <Link
             href="/dashboard"
             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"
@@ -57,19 +48,50 @@ export default async function EditorPage({ params }: PageProps) {
               />
             </svg>
           </Link>
-          <h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
-            {project.name}
-          </h1>
+        </header>
+        <div className="flex flex-1 items-center justify-center bg-zinc-100 dark:bg-zinc-800">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <svg
+              className="h-12 w-12 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
+            </svg>
+            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+              Project Not Found
+            </h2>
+            <p className="max-w-sm text-sm text-zinc-600 dark:text-zinc-400">
+              The project you&apos;re looking for doesn&apos;t exist or you don&apos;t have access to it.
+            </p>
+            <Link
+              href="/dashboard"
+              className="mt-2 rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
+            >
+              Back to Dashboard
+            </Link>
+          </div>
         </div>
-      </header>
-
-      <div className="flex-1">
-        <FlowchartEditor
-          projectId={project.id}
-          projectName={project.name}
-          initialData={flowchartData}
-        />
       </div>
-    </div>
+    )
+  }
+
+  const flowchartData = (project.flowchart_data || {
+    nodes: [],
+    edges: [],
+  }) as FlowchartData
+
+  return (
+    <FlowchartEditor
+      projectId={project.id}
+      projectName={project.name}
+      initialData={flowchartData}
+    />
   )
 }

src/app/login/LoginForm.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/client'
+
+export default function LoginForm() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  // Check for success message from password reset
+  const message = searchParams.get('message')
+  const successMessage = message === 'password_reset_success'
+    ? 'Your password has been reset successfully. Please sign in with your new password.'
+    : null
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+    setLoading(true)
+
+    const supabase = createClient()
+
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    })
+
+    if (error) {
+      setError(error.message)
+      setLoading(false)
+      return
+    }
+
+    router.push('/dashboard')
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-8">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+          WebVNWrite
+        </h1>
+        <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+          Sign in to your account
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+        {successMessage && (
+          <div className="rounded-md bg-green-50 p-4 dark:bg-green-900/20">
+            <p className="text-sm text-green-700 dark:text-green-400">{successMessage}</p>
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
+            <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Email address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+              placeholder="••••••••"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end">
+          <Link
+            href="/forgot-password"
+            className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            Forgot your password?
+          </Link>
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-zinc-950"
+        >
+          {loading ? 'Signing in...' : 'Sign in'}
+        </button>
+      </form>
+    </div>
+  )
+}

src/app/login/page.tsx

@@ -1,130 +1,23 @@
-'use client'
-
-import { useState } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import { createClient } from '@/lib/supabase/client'
+import { Suspense } from 'react'
+import LoginForm from './LoginForm'
 
 export default function LoginPage() {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  // Check for success message from password reset
-  const message = searchParams.get('message')
-  const successMessage = message === 'password_reset_success'
-    ? 'Your password has been reset successfully. Please sign in with your new password.'
-    : null
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError(null)
-    setLoading(true)
-
-    const supabase = createClient()
-
-    const { error } = await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-
-    if (error) {
-      setError(error.message)
-      setLoading(false)
-      return
-    }
-
-    router.push('/dashboard')
-  }
-
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
-      <div className="w-full max-w-md space-y-8">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-            WebVNWrite
-          </h1>
-          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-            Sign in to your account
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          {successMessage && (
-            <div className="rounded-md bg-green-50 p-4 dark:bg-green-900/20">
-              <p className="text-sm text-green-700 dark:text-green-400">{successMessage}</p>
-            </div>
-          )}
-
-          {error && (
-            <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
-              <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-            </div>
-          )}
-
-          <div className="space-y-4">
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
-              >
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
-                placeholder="you@example.com"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
-              >
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
-                placeholder="••••••••"
-              />
-            </div>
+      <Suspense
+        fallback={
+          <div className="w-full max-w-md space-y-8 text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+              WebVNWrite
+            </h1>
+            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+              Loading...
+            </p>
           </div>
-
-          <div className="flex items-center justify-end">
-            <Link
-              href="/forgot-password"
-              className="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
-            >
-              Forgot your password?
-            </Link>
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-zinc-950"
-          >
-            {loading ? 'Signing in...' : 'Sign in'}
-          </button>
-        </form>
-      </div>
+        }
+      >
+        <LoginForm />
+      </Suspense>
     </div>
   )
 }

src/app/signup/SignupForm.tsx

@@ -0,0 +1,236 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+import { createClient } from '@/lib/supabase/client'
+
+export default function SignupForm() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  // Pre-fill email if provided in URL (from invite link)
+  const [email, setEmail] = useState(searchParams.get('email') ?? '')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    // Handle invite/signup token from URL hash
+    // Supabase adds tokens to the URL hash after redirect
+    const handleTokenFromUrl = async () => {
+      const hash = window.location.hash
+      if (hash) {
+        const params = new URLSearchParams(hash.substring(1))
+        const accessToken = params.get('access_token')
+        const refreshToken = params.get('refresh_token')
+        const type = params.get('type')
+
+        if (accessToken && refreshToken && (type === 'invite' || type === 'signup')) {
+          const supabase = createClient()
+          const { error } = await supabase.auth.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken,
+          })
+
+          if (error) {
+            setError('Invalid or expired invite link. Please request a new invitation.')
+            return
+          }
+
+          // Get the user's email from the session
+          const { data: { user } } = await supabase.auth.getUser()
+          if (user?.email) {
+            setEmail(user.email)
+          }
+        }
+      }
+    }
+
+    handleTokenFromUrl()
+  }, [searchParams])
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    // Validate passwords match
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    // Validate password length
+    if (password.length < 6) {
+      setError('Password must be at least 6 characters')
+      return
+    }
+
+    setLoading(true)
+
+    const supabase = createClient()
+
+    // Check if user already has a session (from invite link)
+    const { data: { session } } = await supabase.auth.getSession()
+
+    if (session) {
+      // User was invited and has a session - update their password
+      const { error: updateError } = await supabase.auth.updateUser({
+        password,
+      })
+
+      if (updateError) {
+        setError(updateError.message)
+        setLoading(false)
+        return
+      }
+
+      // Create profile record
+      const { error: profileError } = await supabase.from('profiles').upsert({
+        id: session.user.id,
+        email: session.user.email,
+        display_name: session.user.email?.split('@')[0] || 'User',
+        is_admin: false,
+      })
+
+      if (profileError) {
+        setError(profileError.message)
+        setLoading(false)
+        return
+      }
+
+      router.push('/dashboard')
+    } else {
+      // Regular signup flow (if allowed)
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+      })
+
+      if (error) {
+        setError(error.message)
+        setLoading(false)
+        return
+      }
+
+      if (data.user) {
+        // Create profile record
+        const { error: profileError } = await supabase.from('profiles').upsert({
+          id: data.user.id,
+          email: data.user.email,
+          display_name: email.split('@')[0] || 'User',
+          is_admin: false,
+        })
+
+        if (profileError) {
+          setError(profileError.message)
+          setLoading(false)
+          return
+        }
+
+        router.push('/dashboard')
+      }
+    }
+  }
+
+  return (
+    <div className="w-full max-w-md space-y-8">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+          WebVNWrite
+        </h1>
+        <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+          Complete your account setup
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="mt-8 space-y-6">
+        {error && (
+          <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
+            <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Email address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+              placeholder="you@example.com"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Password
+            </label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="new-password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+              placeholder="••••••••"
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="confirmPassword"
+              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
+            >
+              Confirm password
+            </label>
+            <input
+              id="confirmPassword"
+              name="confirmPassword"
+              type="password"
+              autoComplete="new-password"
+              required
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
+              placeholder="••••••••"
+            />
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-zinc-950"
+        >
+          {loading ? 'Creating account...' : 'Create account'}
+        </button>
+
+        <p className="text-center text-sm text-zinc-600 dark:text-zinc-400">
+          Already have an account?{' '}
+          <Link
+            href="/login"
+            className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            Sign in
+          </Link>
+        </p>
+      </form>
+    </div>
+  )
+}

src/app/signup/page.tsx

@@ -1,238 +1,23 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import Link from 'next/link'
-import { createClient } from '@/lib/supabase/client'
+import { Suspense } from 'react'
+import SignupForm from './SignupForm'
 
 export default function SignupPage() {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  // Pre-fill email if provided in URL (from invite link)
-  const [email, setEmail] = useState(searchParams.get('email') ?? '')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    // Handle invite/signup token from URL hash
-    // Supabase adds tokens to the URL hash after redirect
-    const handleTokenFromUrl = async () => {
-      const hash = window.location.hash
-      if (hash) {
-        const params = new URLSearchParams(hash.substring(1))
-        const accessToken = params.get('access_token')
-        const refreshToken = params.get('refresh_token')
-        const type = params.get('type')
-
-        if (accessToken && refreshToken && (type === 'invite' || type === 'signup')) {
-          const supabase = createClient()
-          const { error } = await supabase.auth.setSession({
-            access_token: accessToken,
-            refresh_token: refreshToken,
-          })
-
-          if (error) {
-            setError('Invalid or expired invite link. Please request a new invitation.')
-            return
-          }
-
-          // Get the user's email from the session
-          const { data: { user } } = await supabase.auth.getUser()
-          if (user?.email) {
-            setEmail(user.email)
-          }
-        }
-      }
-    }
-
-    handleTokenFromUrl()
-  }, [searchParams])
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError(null)
-
-    // Validate passwords match
-    if (password !== confirmPassword) {
-      setError('Passwords do not match')
-      return
-    }
-
-    // Validate password length
-    if (password.length < 6) {
-      setError('Password must be at least 6 characters')
-      return
-    }
-
-    setLoading(true)
-
-    const supabase = createClient()
-
-    // Check if user already has a session (from invite link)
-    const { data: { session } } = await supabase.auth.getSession()
-
-    if (session) {
-      // User was invited and has a session - update their password
-      const { error: updateError } = await supabase.auth.updateUser({
-        password,
-      })
-
-      if (updateError) {
-        setError(updateError.message)
-        setLoading(false)
-        return
-      }
-
-      // Create profile record
-      const { error: profileError } = await supabase.from('profiles').upsert({
-        id: session.user.id,
-        email: session.user.email,
-        display_name: session.user.email?.split('@')[0] || 'User',
-        is_admin: false,
-      })
-
-      if (profileError) {
-        setError(profileError.message)
-        setLoading(false)
-        return
-      }
-
-      router.push('/dashboard')
-    } else {
-      // Regular signup flow (if allowed)
-      const { data, error } = await supabase.auth.signUp({
-        email,
-        password,
-      })
-
-      if (error) {
-        setError(error.message)
-        setLoading(false)
-        return
-      }
-
-      if (data.user) {
-        // Create profile record
-        const { error: profileError } = await supabase.from('profiles').upsert({
-          id: data.user.id,
-          email: data.user.email,
-          display_name: email.split('@')[0] || 'User',
-          is_admin: false,
-        })
-
-        if (profileError) {
-          setError(profileError.message)
-          setLoading(false)
-          return
-        }
-
-        router.push('/dashboard')
-      }
-    }
-  }
-
   return (
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 dark:bg-zinc-950">
-      <div className="w-full max-w-md space-y-8">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
-            WebVNWrite
-          </h1>
-          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-            Complete your account setup
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-          {error && (
-            <div className="rounded-md bg-red-50 p-4 dark:bg-red-900/20">
-              <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
-            </div>
-          )}
-
-          <div className="space-y-4">
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
-              >
-                Email address
-              </label>
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
-                placeholder="you@example.com"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
-              >
-                Password
-              </label>
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="new-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
-                placeholder="••••••••"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="confirmPassword"
-                className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
-              >
-                Confirm password
-              </label>
-              <input
-                id="confirmPassword"
-                name="confirmPassword"
-                type="password"
-                autoComplete="new-password"
-                required
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                className="mt-1 block w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-zinc-900 placeholder-zinc-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-50 dark:placeholder-zinc-500"
-                placeholder="••••••••"
-              />
-            </div>
+      <Suspense
+        fallback={
+          <div className="w-full max-w-md space-y-8 text-center">
+            <h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+              WebVNWrite
+            </h1>
+            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+              Loading...
+            </p>
           </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-zinc-950"
-          >
-            {loading ? 'Creating account...' : 'Create account'}
-          </button>
-
-          <p className="text-center text-sm text-zinc-600 dark:text-zinc-400">
-            Already have an account?{' '}
-            <Link
-              href="/login"
-              className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
-            >
-              Sign in
-            </Link>
-          </p>
-        </form>
-      </div>
+        }
+      >
+        <SignupForm />
+      </Suspense>
     </div>
   )
 }

src/components/LoadingSpinner.tsx

@@ -0,0 +1,40 @@
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg'
+  message?: string
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+}
+
+export default function LoadingSpinner({ size = 'md', message }: LoadingSpinnerProps) {
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <svg
+        className={`animate-spin text-blue-500 ${sizeClasses[size]}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+      {message && (
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">{message}</p>
+      )}
+    </div>
+  )
+}

src/components/Toast.tsx

@@ -6,16 +6,23 @@ interface ToastProps {
   message: string
   type: 'success' | 'error'
   onClose: () => void
+  action?: {
+    label: string
+    onClick: () => void
+  }
 }
 
-export default function Toast({ message, type, onClose }: ToastProps) {
+export default function Toast({ message, type, onClose, action }: ToastProps) {
   useEffect(() => {
+    // Don't auto-dismiss if there's an action button
+    if (action) return
+
     const timer = setTimeout(() => {
       onClose()
     }, 3000)
 
     return () => clearTimeout(timer)
-  }, [onClose])
+  }, [onClose, action])
 
   const bgColor =
     type === 'success'
@@ -60,6 +67,14 @@ export default function Toast({ message, type, onClose }: ToastProps) {
       >
         {icon}
         <span>{message}</span>
+        {action && (
+          <button
+            onClick={action.onClick}
+            className="ml-2 rounded bg-white/20 px-2 py-0.5 text-xs font-semibold hover:bg-white/30"
+          >
+            {action.label}
+          </button>
+        )}
         <button
           onClick={onClose}
           className="ml-2 rounded p-0.5 hover:bg-white/20"