Merge branch 'developing' into ralph/collaboration-and-character-variables

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'
@@ -80,13 +79,14 @@ export default async function EditorPage({ params }: PageProps) {
   // the project was created before these features existed and may need auto-migration
   const needsMigration = !rawData.characters && !rawData.variables
 
-  return (
+  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">
           <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"
@@ -101,9 +101,35 @@ 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>
 
@@ -117,6 +143,20 @@ export default async function EditorPage({ params }: PageProps) {
           needsMigration={needsMigration}
         />
       </div>
-    </div>
+    </>
+    )
+  }
+
+  const flowchartData = (project.flowchart_data || {
+    nodes: [],
+    edges: [],
+  }) as FlowchartData
+
+  return (
+    <FlowchartEditor
+      projectId={project.id}
+      projectName={project.name}
+      initialData={flowchartData}
+    />
   )
 }