feat: [US-017] - Editor page with React Flow canvas

Implement the flowchart editor page with React Flow integration: - Install reactflow package for canvas rendering - Create editor page that fetches project data from Supabase - Add loading state with spinner while fetching - Handle unauthorized access and not found with appropriate responses - Render React Flow canvas with grid background - Add header with project name and back link to dashboard - Initialize React Flow with nodes and edges from flowchart_data - Add type converters for FlowchartNode/Edge to React Flow types Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-21 12:41:08 -03:00
parent 4d0ee8e578
commit db742e7fe8
5 changed files with 722 additions and 6 deletions
@@ -0,0 +1,74 @@
+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'
+
+type PageProps = {
+  params: Promise<{ projectId: string }>
+}
+
+export default async function EditorPage({ params }: PageProps) {
+  const { projectId } = await params
+  const supabase = await createClient()
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser()
+
+  if (!user) {
+    return null
+  }
+
+  const { data: project, error } = await supabase
+    .from('projects')
+    .select('id, name, flowchart_data')
+    .eq('id', projectId)
+    .eq('user_id', user.id)
+    .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">
+          <Link
+            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}
+          initialData={flowchartData}
+        />
+      </div>
+    </div>
+  )
+}