developing #6
|
|
@ -0,0 +1,752 @@
|
|||
{
|
||||
"project": "WebVNWrite",
|
||||
"branchName": "ralph/vn-flowchart-editor",
|
||||
"description": "Visual Novel Flowchart Editor - A web-based tool for authoring visual novels with drag-and-drop nodes, branching connections, user authentication, and Ren'Py JSON export",
|
||||
"userStories": [
|
||||
{
|
||||
"id": "US-001",
|
||||
"title": "Project scaffolding and configuration",
|
||||
"description": "As a developer, I need the project set up with Next.js, TailwindCSS, and Supabase so that I can build the application.",
|
||||
"acceptanceCriteria": [
|
||||
"Initialize Next.js project with TypeScript and App Router",
|
||||
"Install and configure TailwindCSS",
|
||||
"Install Supabase client library (@supabase/supabase-js)",
|
||||
"Create .env.example with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY",
|
||||
"Basic folder structure: app/, components/, lib/, types/",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 1,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-002",
|
||||
"title": "Define TypeScript types for flowchart data",
|
||||
"description": "As a developer, I need TypeScript types for nodes, connections, and conditions.",
|
||||
"acceptanceCriteria": [
|
||||
"Create types/flowchart.ts file",
|
||||
"DialogueNode type: id, type='dialogue', position: {x,y}, data: { speaker?: string, text: string }",
|
||||
"ChoiceNode type: id, type='choice', position: {x,y}, data: { prompt: string, options: { id: string, label: string }[] }",
|
||||
"VariableNode type: id, type='variable', position: {x,y}, data: { variableName: string, operation: 'set'|'add'|'subtract', value: number }",
|
||||
"Condition type: { variableName: string, operator: '>'|'<'|'=='|'>='|'<='|'!=', value: number }",
|
||||
"FlowchartEdge type: id, source, sourceHandle?, target, targetHandle?, data?: { condition?: Condition }",
|
||||
"FlowchartData type: { nodes: (DialogueNode|ChoiceNode|VariableNode)[], edges: FlowchartEdge[] }",
|
||||
"All types exported from types/flowchart.ts",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 2,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-003",
|
||||
"title": "Supabase schema for users and projects",
|
||||
"description": "As a developer, I need database tables to store users and their projects.",
|
||||
"acceptanceCriteria": [
|
||||
"Create supabase/migrations/ directory",
|
||||
"Create SQL migration file with profiles table: id (uuid, references auth.users), email (text), display_name (text), is_admin (boolean default false), created_at (timestamptz)",
|
||||
"Create projects table: id (uuid), user_id (uuid, foreign key to profiles.id), name (text), flowchart_data (jsonb), created_at (timestamptz), updated_at (timestamptz)",
|
||||
"Add RLS policy: users can SELECT/INSERT/UPDATE/DELETE their own projects (user_id = auth.uid())",
|
||||
"Add RLS policy: users can SELECT their own profile",
|
||||
"Add RLS policy: admin users (is_admin=true) can SELECT all profiles",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 3,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-004",
|
||||
"title": "Supabase client configuration",
|
||||
"description": "As a developer, I need Supabase client utilities for auth and database access.",
|
||||
"acceptanceCriteria": [
|
||||
"Create lib/supabase/client.ts with browser client (createBrowserClient)",
|
||||
"Create lib/supabase/server.ts with server client (createServerClient for App Router)",
|
||||
"Create lib/supabase/middleware.ts with middleware client helper",
|
||||
"Export typed database client using generated types or manual types",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 4,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-005",
|
||||
"title": "Protected routes middleware",
|
||||
"description": "As a developer, I need authentication middleware so that only logged-in users can access the app.",
|
||||
"acceptanceCriteria": [
|
||||
"Create middleware.ts at project root",
|
||||
"Middleware checks Supabase session on each request",
|
||||
"Unauthenticated users accessing /dashboard or /editor/* are redirected to /login",
|
||||
"Authenticated users accessing /login or /signup are redirected to /dashboard",
|
||||
"Public routes allowed without auth: /login, /signup, /forgot-password, /reset-password",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 5,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-006",
|
||||
"title": "Login page",
|
||||
"description": "As a user, I want to log in with my email and password so that I can access my projects.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/login/page.tsx",
|
||||
"Form with email and password input fields",
|
||||
"Submit button calls Supabase signInWithPassword",
|
||||
"Show error message for invalid credentials",
|
||||
"On success, redirect to /dashboard",
|
||||
"Link to /forgot-password page",
|
||||
"Styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 6,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-007",
|
||||
"title": "Sign up page (invite-only)",
|
||||
"description": "As an invited user, I want to complete my account setup so that I can access the tool.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/signup/page.tsx",
|
||||
"Form with email (pre-filled if from invite link), password, and confirm password fields",
|
||||
"Validate passwords match before submission",
|
||||
"Handle Supabase invite token from URL (type=invite or type=signup)",
|
||||
"On success, create profile record in profiles table and redirect to /dashboard",
|
||||
"Show error message if signup fails",
|
||||
"Styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 7,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-008",
|
||||
"title": "Logout functionality",
|
||||
"description": "As a user, I want to log out so that I can secure my session.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/LogoutButton.tsx component",
|
||||
"Button calls Supabase signOut",
|
||||
"On success, redirect to /login",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 8,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-009",
|
||||
"title": "Password reset - forgot password page",
|
||||
"description": "As a user, I want to request a password reset if I forget my password.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/forgot-password/page.tsx",
|
||||
"Form with email input field",
|
||||
"Submit button calls Supabase resetPasswordForEmail",
|
||||
"Show confirmation message after sending (check your email)",
|
||||
"Link back to /login",
|
||||
"Styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 9,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-010",
|
||||
"title": "Password reset - set new password page",
|
||||
"description": "As a user, I want to set a new password after clicking the reset link.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/reset-password/page.tsx",
|
||||
"Form with new password and confirm password fields",
|
||||
"Handle Supabase recovery token from URL",
|
||||
"Submit calls Supabase updateUser with new password",
|
||||
"On success, redirect to /login with success message",
|
||||
"Show error if token invalid or expired",
|
||||
"Styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 10,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-011",
|
||||
"title": "Dashboard layout with navbar",
|
||||
"description": "As a user, I want a consistent layout with navigation so that I can move around the app.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/dashboard/layout.tsx",
|
||||
"Navbar component with app title/logo",
|
||||
"Navbar shows current user email",
|
||||
"Navbar includes LogoutButton",
|
||||
"Main content area below navbar",
|
||||
"Styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 11,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-012",
|
||||
"title": "Dashboard - list projects",
|
||||
"description": "As a user, I want to see all my projects so that I can choose which one to edit.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/dashboard/page.tsx",
|
||||
"Fetch projects from Supabase for current user",
|
||||
"Display projects as cards in a grid",
|
||||
"Each card shows: project name, last updated date (formatted)",
|
||||
"Click card navigates to /editor/[projectId]",
|
||||
"Empty state with message when no projects exist",
|
||||
"Loading state while fetching",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 12,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-013",
|
||||
"title": "Create new project",
|
||||
"description": "As a user, I want to create a new project so that I can start a new flowchart.",
|
||||
"acceptanceCriteria": [
|
||||
"Add 'New Project' button on dashboard",
|
||||
"Clicking opens modal with project name input",
|
||||
"Submit creates project in Supabase with empty flowchart_data: { nodes: [], edges: [] }",
|
||||
"On success, redirect to /editor/[newProjectId]",
|
||||
"Show error if creation fails",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 13,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-014",
|
||||
"title": "Delete project",
|
||||
"description": "As a user, I want to delete a project I no longer need.",
|
||||
"acceptanceCriteria": [
|
||||
"Add delete icon/button on each project card",
|
||||
"Clicking shows confirmation dialog (Are you sure?)",
|
||||
"Confirm deletes project from Supabase",
|
||||
"Project removed from dashboard list without page reload",
|
||||
"Show success toast after deletion",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 14,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-015",
|
||||
"title": "Rename project",
|
||||
"description": "As a user, I want to rename a project to keep my work organized.",
|
||||
"acceptanceCriteria": [
|
||||
"Add edit/rename icon on project card",
|
||||
"Clicking opens modal or enables inline edit for project name",
|
||||
"Submit updates project name in Supabase",
|
||||
"UI updates immediately without page reload",
|
||||
"Show error if rename fails",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 15,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-016",
|
||||
"title": "Admin - invite new user",
|
||||
"description": "As an admin, I want to invite new users so that collaborators can access the tool.",
|
||||
"acceptanceCriteria": [
|
||||
"Create app/admin/invite/page.tsx",
|
||||
"Only accessible by users with is_admin=true (redirect others to /dashboard)",
|
||||
"Form with email address input",
|
||||
"Submit calls Supabase admin inviteUserByEmail (requires service role key in server action)",
|
||||
"Show success message with invite sent confirmation",
|
||||
"Show error if invite fails",
|
||||
"Link to this page visible in navbar only for admins",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 16,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-017",
|
||||
"title": "Editor page with React Flow canvas",
|
||||
"description": "As a user, I want an editor page with a canvas where I can build my flowchart.",
|
||||
"acceptanceCriteria": [
|
||||
"Install reactflow package",
|
||||
"Create app/editor/[projectId]/page.tsx",
|
||||
"Fetch project from Supabase by ID",
|
||||
"Show error if project not found or user unauthorized",
|
||||
"Show loading state while fetching",
|
||||
"Render React Flow canvas filling the editor area",
|
||||
"Canvas has grid background (React Flow Background component)",
|
||||
"Header shows project name with back link to /dashboard",
|
||||
"Initialize React Flow with nodes and edges from flowchart_data",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 17,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-018",
|
||||
"title": "Canvas pan and zoom controls",
|
||||
"description": "As a user, I want to pan and zoom the canvas to navigate large flowcharts.",
|
||||
"acceptanceCriteria": [
|
||||
"Canvas supports click-and-drag panning (React Flow default)",
|
||||
"Mouse wheel zooms in/out (React Flow default)",
|
||||
"Add React Flow Controls component with zoom +/- buttons",
|
||||
"Add fitView button to show all nodes",
|
||||
"Controls positioned in bottom-right corner",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 18,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-019",
|
||||
"title": "Editor toolbar",
|
||||
"description": "As a user, I want a toolbar with actions for adding nodes and saving/exporting.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/Toolbar.tsx",
|
||||
"Toolbar positioned at top of editor below header",
|
||||
"Buttons: Add Dialogue, Add Choice, Add Variable (no functionality yet)",
|
||||
"Buttons: Save, Export, Import (no functionality yet)",
|
||||
"Buttons styled with TailwindCSS, icons optional",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 19,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-020",
|
||||
"title": "Create custom dialogue node component",
|
||||
"description": "As a user, I want dialogue nodes to display and edit character speech.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/nodes/DialogueNode.tsx",
|
||||
"Node styled with blue background/border",
|
||||
"Displays editable input for speaker name (placeholder: 'Speaker')",
|
||||
"Displays editable textarea for dialogue text (placeholder: 'Dialogue text...')",
|
||||
"Has one Handle at top (type='target', id='input')",
|
||||
"Has one Handle at bottom (type='source', id='output')",
|
||||
"Register as custom node type in React Flow",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 20,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-021",
|
||||
"title": "Add dialogue node from toolbar",
|
||||
"description": "As a user, I want to add dialogue nodes by clicking the toolbar button.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Add Dialogue' in toolbar creates new DialogueNode",
|
||||
"Node appears at center of current viewport",
|
||||
"Node has unique ID (use nanoid or uuid)",
|
||||
"Node added to React Flow nodes state",
|
||||
"Node can be dragged to reposition",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 21,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-022",
|
||||
"title": "Create custom choice node component",
|
||||
"description": "As a user, I want choice nodes to display branching decisions.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/nodes/ChoiceNode.tsx",
|
||||
"Node styled with green background/border",
|
||||
"Displays editable input for prompt text (placeholder: 'What do you choose?')",
|
||||
"Displays 2 default options, each with editable label input",
|
||||
"Has one Handle at top (type='target', id='input')",
|
||||
"Each option has its own Handle at bottom (type='source', id='option-0', 'option-1', etc.)",
|
||||
"Register as custom node type in React Flow",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 22,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-023",
|
||||
"title": "Add choice node from toolbar",
|
||||
"description": "As a user, I want to add choice nodes by clicking the toolbar button.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Add Choice' in toolbar creates new ChoiceNode",
|
||||
"Node appears at center of current viewport",
|
||||
"Node has unique ID",
|
||||
"Node initialized with 2 options (each with unique id and empty label)",
|
||||
"Node added to React Flow nodes state",
|
||||
"Node can be dragged to reposition",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 23,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-024",
|
||||
"title": "Add/remove choice options",
|
||||
"description": "As a user, I want to add or remove choice options (2-6 options supported).",
|
||||
"acceptanceCriteria": [
|
||||
"ChoiceNode has '+' button to add new option",
|
||||
"Maximum 6 options (button disabled or hidden at max)",
|
||||
"Each option has 'x' button to remove it",
|
||||
"Minimum 2 options (remove button disabled or hidden at min)",
|
||||
"Adding option creates new output Handle dynamically",
|
||||
"Removing option removes its Handle",
|
||||
"Node data updates in React Flow state",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 24,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-025",
|
||||
"title": "Create custom variable node component",
|
||||
"description": "As a user, I want variable nodes to set or modify story variables.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/nodes/VariableNode.tsx",
|
||||
"Node styled with orange background/border",
|
||||
"Displays editable input for variable name (placeholder: 'variableName')",
|
||||
"Displays dropdown/select for operation: set, add, subtract",
|
||||
"Displays editable number input for value (default: 0)",
|
||||
"Has one Handle at top (type='target', id='input')",
|
||||
"Has one Handle at bottom (type='source', id='output')",
|
||||
"Register as custom node type in React Flow",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 25,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-026",
|
||||
"title": "Add variable node from toolbar",
|
||||
"description": "As a user, I want to add variable nodes by clicking the toolbar button.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Add Variable' in toolbar creates new VariableNode",
|
||||
"Node appears at center of current viewport",
|
||||
"Node has unique ID",
|
||||
"Node initialized with empty variableName, operation='set', value=0",
|
||||
"Node added to React Flow nodes state",
|
||||
"Node can be dragged to reposition",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 26,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-027",
|
||||
"title": "Connect nodes with edges",
|
||||
"description": "As a user, I want to connect nodes with arrows to define story flow.",
|
||||
"acceptanceCriteria": [
|
||||
"Dragging from source Handle to target Handle creates edge (React Flow default)",
|
||||
"Edges render as smooth bezier curves (default edge type or smoothstep)",
|
||||
"Edges show arrow marker indicating direction (markerEnd)",
|
||||
"Edges update position when nodes are moved",
|
||||
"Cannot connect source-to-source or target-to-target (React Flow handles this)",
|
||||
"New edges added to React Flow edges state",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 27,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-028",
|
||||
"title": "Select and delete nodes",
|
||||
"description": "As a user, I want to delete nodes to revise my flowchart.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking a node selects it (visual highlight via React Flow)",
|
||||
"Pressing Delete or Backspace key removes selected node(s)",
|
||||
"Deleting node also removes all connected edges",
|
||||
"Use onNodesDelete callback to handle deletion",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 28,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-029",
|
||||
"title": "Select and delete edges",
|
||||
"description": "As a user, I want to delete connections between nodes.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking an edge selects it (visual highlight via React Flow)",
|
||||
"Pressing Delete or Backspace key removes selected edge(s)",
|
||||
"Use onEdgesDelete callback to handle deletion",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 29,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-030",
|
||||
"title": "Right-click context menu",
|
||||
"description": "As a user, I want a context menu for quick actions.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/ContextMenu.tsx",
|
||||
"Right-click on canvas shows menu: Add Dialogue, Add Choice, Add Variable",
|
||||
"New node created at click position",
|
||||
"Right-click on node shows menu: Delete",
|
||||
"Right-click on edge shows menu: Delete, Add Condition",
|
||||
"Clicking elsewhere or pressing Escape closes menu",
|
||||
"Menu styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 30,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-031",
|
||||
"title": "Condition editor modal",
|
||||
"description": "As a user, I want to add conditions to edges so branches depend on variables.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/ConditionEditor.tsx modal/popover",
|
||||
"Opens on double-click edge or via context menu 'Add Condition'",
|
||||
"Form fields: variable name input, operator dropdown (>, <, ==, >=, <=, !=), value number input",
|
||||
"Pre-fill fields if edge already has condition",
|
||||
"Save button applies condition to edge data",
|
||||
"Clear/Remove button removes condition from edge",
|
||||
"Cancel button closes without saving",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 31,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-032",
|
||||
"title": "Display conditions on edges",
|
||||
"description": "As a user, I want to see conditions displayed on edges.",
|
||||
"acceptanceCriteria": [
|
||||
"Create custom edge component or use edge labels",
|
||||
"Edges with conditions render as dashed lines (strokeDasharray)",
|
||||
"Condition label displayed on edge (e.g., 'score > 5')",
|
||||
"Unconditional edges remain solid lines",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 32,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-033",
|
||||
"title": "Auto-save to LocalStorage",
|
||||
"description": "As a user, I want my work auto-saved locally so I don't lose progress if the browser crashes.",
|
||||
"acceptanceCriteria": [
|
||||
"Save flowchart state (nodes + edges) to LocalStorage on every change",
|
||||
"Debounce saves (e.g., 1 second delay after last change)",
|
||||
"LocalStorage key format: 'vnwrite-draft-{projectId}'",
|
||||
"On editor load, check LocalStorage for saved draft",
|
||||
"If local draft exists and differs from database, show prompt to restore or discard",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 33,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-034",
|
||||
"title": "Save project to database",
|
||||
"description": "As a user, I want to save my project to the database manually.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Save' in toolbar saves current nodes/edges to Supabase",
|
||||
"Update project's flowchart_data and updated_at fields",
|
||||
"Show saving indicator/spinner while in progress",
|
||||
"Show success toast on completion",
|
||||
"Clear LocalStorage draft after successful save",
|
||||
"Show error toast if save fails",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 34,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-035",
|
||||
"title": "Export project as .vnflow file",
|
||||
"description": "As a user, I want to export my project as a JSON file for backup or sharing.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Export' in toolbar triggers file download",
|
||||
"File named '[project-name].vnflow'",
|
||||
"File contains JSON with nodes and edges arrays",
|
||||
"JSON is pretty-printed (2-space indent) for readability",
|
||||
"Uses browser download API (create blob, trigger download)",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 35,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-036",
|
||||
"title": "Import project from .vnflow file",
|
||||
"description": "As a user, I want to import a .vnflow file to restore or share projects.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Import' in toolbar opens file picker",
|
||||
"Accept .vnflow and .json file extensions",
|
||||
"If current project has unsaved changes, show confirmation dialog",
|
||||
"Validate imported file has nodes and edges arrays",
|
||||
"Show error toast if file is invalid",
|
||||
"Load valid data into React Flow state (replaces current flowchart)",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 36,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-037",
|
||||
"title": "Export to Ren'Py JSON format",
|
||||
"description": "As a user, I want to export my flowchart to Ren'Py-compatible JSON for use in my game.",
|
||||
"acceptanceCriteria": [
|
||||
"Add 'Export to Ren'Py' option (button or dropdown item)",
|
||||
"File named '[project-name]-renpy.json'",
|
||||
"Dialogue nodes export as: { type: 'dialogue', speaker: '...', text: '...' }",
|
||||
"Choice nodes export as: { type: 'menu', prompt: '...', choices: [{ label: '...', next: '...' }] }",
|
||||
"Variable nodes export as: { type: 'variable', name: '...', operation: '...', value: ... }",
|
||||
"Edges with conditions include condition object on the choice/jump",
|
||||
"Organize nodes into labeled sections based on flow (traverse from first node)",
|
||||
"Include metadata: projectName, exportedAt timestamp",
|
||||
"Output JSON is valid (test with JSON.parse)",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 37,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-038",
|
||||
"title": "Unsaved changes warning",
|
||||
"description": "As a user, I want a warning before losing unsaved work.",
|
||||
"acceptanceCriteria": [
|
||||
"Track dirty state: true when flowchart modified after last save",
|
||||
"Set dirty=true on node/edge add, delete, or modify",
|
||||
"Set dirty=false after successful save",
|
||||
"Browser beforeunload event shows warning if dirty",
|
||||
"Navigating to dashboard shows confirmation modal if dirty",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 38,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-039",
|
||||
"title": "Loading and error states",
|
||||
"description": "As a user, I want clear feedback when things are loading or when errors occur.",
|
||||
"acceptanceCriteria": [
|
||||
"Loading spinner component for async operations",
|
||||
"Editor shows loading spinner while fetching project",
|
||||
"Error message displayed if project fails to load (with back to dashboard link)",
|
||||
"Toast notification system for success/error messages",
|
||||
"Save error shows toast with retry option",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 39,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-040",
|
||||
"title": "Conditionals on choice options",
|
||||
"description": "As a user, I want individual choice options to have variable conditions so that options are only visible when certain conditions are met (e.g., affection > 10).",
|
||||
"acceptanceCriteria": [
|
||||
"Each ChoiceOption can have optional condition (variableName, operator, value)",
|
||||
"Update ChoiceNode UI to show 'Add condition' button per option",
|
||||
"Condition editor modal for each option",
|
||||
"Visual indicator (icon/badge) on options with conditions",
|
||||
"Update TypeScript types: ChoiceOption gets optional condition field",
|
||||
"Export includes per-option conditions in Ren'Py JSON",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 40,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-018, US-019, US-025. Complexity: M"
|
||||
},
|
||||
{
|
||||
"id": "US-041",
|
||||
"title": "Change password for logged-in user",
|
||||
"description": "As a user, I want to change my own password from a settings/profile page so that I can keep my account secure.",
|
||||
"acceptanceCriteria": [
|
||||
"Settings/profile page accessible from dashboard header",
|
||||
"Form with: current password, new password, confirm new password fields",
|
||||
"Calls Supabase updateUser with new password",
|
||||
"Requires current password verification (re-authenticate)",
|
||||
"Shows success/error messages",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 41,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-004. Complexity: S"
|
||||
},
|
||||
{
|
||||
"id": "US-042",
|
||||
"title": "Password reset modal on token arrival",
|
||||
"description": "As a user, I want a modal to automatically appear when a password reset token is detected so that I can set my new password seamlessly.",
|
||||
"acceptanceCriteria": [
|
||||
"Detect password reset token in URL (from Supabase email link)",
|
||||
"Show modal/dialog automatically when token present",
|
||||
"Modal has: new password, confirm password fields",
|
||||
"Calls Supabase updateUser with token to complete reset",
|
||||
"On success, close modal and redirect to login",
|
||||
"On error, show error message",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 42,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-006. Complexity: S"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,634 @@
|
|||
## Codebase Patterns
|
||||
- Project uses Next.js 16 with App Router, TypeScript, and TailwindCSS 4
|
||||
- Source files are in `src/` directory (app, components, lib, types)
|
||||
- Supabase is configured with @supabase/supabase-js and @supabase/ssr packages
|
||||
- Environment variables follow NEXT_PUBLIC_* convention for client-side access
|
||||
- Use `npm run typecheck` to run TypeScript type checking (tsc --noEmit)
|
||||
- Flowchart types exported from `src/types/flowchart.ts`
|
||||
- Supabase migrations go in `supabase/migrations/` with timestamp prefix (YYYYMMDDHHMMSS_*.sql)
|
||||
- Database has profiles table (linked to auth.users) and projects table (with flowchart_data JSONB)
|
||||
- RLS policies enforce user_id = auth.uid() for project access
|
||||
- Supabase client utilities in `src/lib/supabase/`: client.ts (browser), server.ts (App Router), middleware.ts (route protection)
|
||||
- Next.js middleware.ts at project root handles route protection using updateSession helper
|
||||
- Public auth routes: /login, /signup, /forgot-password, /reset-password
|
||||
- Protected routes: /dashboard, /editor/* (redirect to /login if unauthenticated)
|
||||
- Auth pages use 'use client' with useState, createClient() from lib/supabase/client.ts, and useRouter for redirects
|
||||
- For lists with client-side updates (delete/add), use wrapper client component that receives initialData from server component
|
||||
- Toast component in `src/components/Toast.tsx` for success/error notifications (auto-dismiss after 3s)
|
||||
- Admin operations use SUPABASE_SERVICE_ROLE_KEY (server-side only via server actions)
|
||||
- Admin users have is_admin=true in profiles table; check via .select('is_admin').eq('id', user.id).single()
|
||||
- React Flow editor is in `src/app/editor/[projectId]/` with page.tsx (server) and FlowchartEditor.tsx (client)
|
||||
- React Flow requires 'use client' and importing 'reactflow/dist/style.css'
|
||||
- Use toReactFlowNodes/toReactFlowEdges helpers to convert app types to React Flow types
|
||||
- Custom node components go in `src/components/editor/nodes/` with NodeProps<T> typing and useReactFlow() for updates
|
||||
- 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
|
||||
- Settings page at `/dashboard/settings` reuses dashboard layout; re-auth via signInWithPassword before updateUser
|
||||
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-001
|
||||
- What was implemented: Project scaffolding and configuration
|
||||
- Files changed:
|
||||
- package.json - project dependencies and scripts
|
||||
- tsconfig.json - TypeScript configuration
|
||||
- next.config.ts - Next.js configuration
|
||||
- postcss.config.mjs - PostCSS with TailwindCSS
|
||||
- eslint.config.mjs - ESLint configuration
|
||||
- .env.example - environment variables template
|
||||
- .gitignore - git ignore rules
|
||||
- src/app/ - Next.js App Router pages
|
||||
- src/components/.gitkeep - components directory placeholder
|
||||
- src/lib/.gitkeep - lib directory placeholder
|
||||
- src/types/.gitkeep - types directory placeholder
|
||||
- **Learnings for future iterations:**
|
||||
- Next.js 16 uses `@tailwindcss/postcss` for TailwindCSS 4 integration
|
||||
- Use --src-dir flag for create-next-app to put source in src/ folder
|
||||
- npm package names can't have capital letters (use lowercase)
|
||||
- .gitignore needs explicit exclusion for .env files, but include .env.example
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-002
|
||||
- What was implemented: TypeScript types for flowchart data structures
|
||||
- Files changed:
|
||||
- src/types/flowchart.ts - new file with all flowchart type definitions
|
||||
- package.json - added typecheck script (tsc --noEmit)
|
||||
- **Learnings for future iterations:**
|
||||
- Position is a helper type for {x, y} coordinates used by nodes
|
||||
- FlowchartNode is a union type of DialogueNode | ChoiceNode | VariableNode
|
||||
- ChoiceOption is a separate type to make options array cleaner
|
||||
- All types use `export type` for TypeScript isolatedModules compatibility
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-003
|
||||
- What was implemented: Supabase schema for users and projects
|
||||
- Files changed:
|
||||
- supabase/migrations/20260121000000_create_profiles_and_projects.sql - new file with all database schema
|
||||
- **Learnings for future iterations:**
|
||||
- Supabase migrations are plain SQL files in supabase/migrations/ directory
|
||||
- Migration filenames use timestamp prefix (YYYYMMDDHHMMSS_description.sql)
|
||||
- RLS policies need separate policies for SELECT, INSERT, UPDATE, DELETE operations
|
||||
- Admin check policy uses EXISTS subquery to check is_admin flag on profiles table
|
||||
- projects table references profiles.id (not auth.users.id directly) for proper FK relationships
|
||||
- flowchart_data column uses JSONB type with default empty structure
|
||||
- Added auto-update trigger for updated_at timestamp on projects table
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-004
|
||||
- What was implemented: Supabase client configuration utilities
|
||||
- Files changed:
|
||||
- src/lib/supabase/client.ts - browser client using createBrowserClient from @supabase/ssr
|
||||
- src/lib/supabase/server.ts - server client for App Router with async cookies() API
|
||||
- src/lib/supabase/middleware.ts - middleware helper with updateSession function
|
||||
- src/lib/.gitkeep - removed (no longer needed)
|
||||
- **Learnings for future iterations:**
|
||||
- @supabase/ssr package provides createBrowserClient and createServerClient functions
|
||||
- Server client requires async cookies() from next/headers in Next.js 16
|
||||
- Middleware client returns both user object and supabaseResponse for route protection
|
||||
- Cookie handling uses getAll/setAll pattern for proper session management
|
||||
- setAll in server.ts wrapped in try/catch to handle Server Component limitations
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-005
|
||||
- What was implemented: Protected routes middleware for authentication
|
||||
- Files changed:
|
||||
- middleware.ts - new file at project root for route protection
|
||||
- **Learnings for future iterations:**
|
||||
- Next.js middleware.ts must be at project root (not in src/)
|
||||
- updateSession helper from lib/supabase/middleware.ts returns { user, supabaseResponse }
|
||||
- Use startsWith() for route matching to handle nested routes (e.g., /editor/*)
|
||||
- Matcher config excludes static files and images to avoid unnecessary middleware calls
|
||||
- Clone nextUrl before modifying pathname for redirects
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-006
|
||||
- What was implemented: Login page with email/password authentication
|
||||
- Files changed:
|
||||
- src/app/login/page.tsx - new file with login form and Supabase auth
|
||||
- **Learnings for future iterations:**
|
||||
- Auth pages use 'use client' directive since they need useState and form handling
|
||||
- Use createClient() from lib/supabase/client.ts for browser-side auth operations
|
||||
- supabase.auth.signInWithPassword returns { error } object for handling failures
|
||||
- useRouter from next/navigation for programmatic redirects after auth
|
||||
- Error state displayed in red alert box with dark mode support
|
||||
- Loading state disables submit button and shows "Signing in..." text
|
||||
- TailwindCSS dark mode uses dark: prefix (e.g., dark:bg-zinc-950)
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-007
|
||||
- What was implemented: Sign up page for invite-only account setup
|
||||
- Files changed:
|
||||
- src/app/signup/page.tsx - new file with signup form and Supabase auth
|
||||
- **Learnings for future iterations:**
|
||||
- Supabase invite tokens come via URL hash fragment (window.location.hash)
|
||||
- Parse hash with URLSearchParams after removing leading '#'
|
||||
- Check for type=invite or type=signup to detect invite flow
|
||||
- Use setSession() with access_token and refresh_token to establish session from invite link
|
||||
- For invited users, update password with updateUser() then create profile with upsert()
|
||||
- Use upsert() instead of insert() for profiles to handle edge cases
|
||||
- Validate password confirmation before submission (passwords match check)
|
||||
- display_name defaults to email prefix (split('@')[0])
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-008
|
||||
- What was implemented: Logout functionality component
|
||||
- Files changed:
|
||||
- src/components/LogoutButton.tsx - new client component with signOut and redirect
|
||||
- src/components/.gitkeep - removed (no longer needed)
|
||||
- **Learnings for future iterations:**
|
||||
- LogoutButton is a reusable component that will be used in the navbar (US-011)
|
||||
- Component uses 'use client' directive for client-side auth operations
|
||||
- Loading state prevents double-clicks during signOut
|
||||
- Styled with neutral zinc colors to work as a secondary button in navbars
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-009
|
||||
- What was implemented: Password reset - forgot password page
|
||||
- Files changed:
|
||||
- src/app/forgot-password/page.tsx - new file with forgot password form and email reset
|
||||
- **Learnings for future iterations:**
|
||||
- resetPasswordForEmail requires redirectTo option to specify where user lands after clicking reset link
|
||||
- Use `window.location.origin` to get the current site URL for redirectTo
|
||||
- Page shows different UI after success (conditional rendering with success state)
|
||||
- Use ' for apostrophe in JSX to avoid HTML entity issues
|
||||
- Follow same styling pattern as login page for consistency across auth pages
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-010
|
||||
- What was implemented: Password reset - set new password page
|
||||
- Files changed:
|
||||
- src/app/reset-password/page.tsx - new file with password reset form
|
||||
- src/app/login/page.tsx - updated to show success message from password reset
|
||||
- **Learnings for future iterations:**
|
||||
- Supabase recovery tokens come via URL hash fragment with type=recovery
|
||||
- Use setSession() with access_token and refresh_token from hash to establish recovery session
|
||||
- Show loading state while verifying token validity (tokenValid === null)
|
||||
- Show error state with link to request new reset if token is invalid
|
||||
- After password update, sign out the user and redirect to login with success message
|
||||
- Use query param (message=password_reset_success) to pass success state between pages
|
||||
- Login page uses useSearchParams to read and display success messages
|
||||
- Success messages styled with green background (bg-green-50)
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-011
|
||||
- What was implemented: Dashboard layout with navbar component
|
||||
- Files changed:
|
||||
- src/app/dashboard/layout.tsx - new file with dashboard layout wrapper
|
||||
- src/components/Navbar.tsx - new reusable navbar component
|
||||
- **Learnings for future iterations:**
|
||||
- Dashboard layout is a server component that fetches user data via createClient() from lib/supabase/server.ts
|
||||
- Navbar accepts userEmail prop to display current user
|
||||
- Layout wraps children with consistent max-w-7xl container and padding
|
||||
- Navbar uses Link component to allow clicking app title to go back to dashboard
|
||||
- Navbar has border-b styling with dark mode support for visual separation
|
||||
- Use gap-4 for spacing between navbar items (user email and logout button)
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-012
|
||||
- What was implemented: Dashboard page listing user projects
|
||||
- Files changed:
|
||||
- src/app/dashboard/page.tsx - new file with project listing, cards, and empty state
|
||||
- **Learnings for future iterations:**
|
||||
- Dashboard page is a server component that fetches projects directly from Supabase
|
||||
- Use .eq('user_id', user.id) for RLS-backed queries (though RLS also enforces this)
|
||||
- Order by updated_at descending to show most recent projects first
|
||||
- formatDate() helper with toLocaleDateString for human-readable dates
|
||||
- Project cards use Link component for navigation to /editor/[projectId]
|
||||
- Empty state uses dashed border (border-dashed) with centered content and icon
|
||||
- Hover effects on cards: border-blue-300, shadow-md, and text color change on title
|
||||
- Error state displayed if Supabase query fails
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-013
|
||||
- What was implemented: Create new project functionality
|
||||
- Files changed:
|
||||
- src/components/NewProjectButton.tsx - new client component with modal dialog
|
||||
- src/app/dashboard/page.tsx - added NewProjectButton to header area
|
||||
- src/app/signup/page.tsx - fixed lint error (setState in effect) by initializing email from searchParams
|
||||
- **Learnings for future iterations:**
|
||||
- Modal dialogs use fixed positioning with backdrop (bg-black/50) for overlay effect
|
||||
- Form submission uses Supabase insert with .select('id').single() to get the new record ID
|
||||
- Initialize flowchart_data with { nodes: [], edges: [] } for new projects
|
||||
- router.push() for programmatic navigation after successful creation
|
||||
- autoFocus on input for better UX when modal opens
|
||||
- Prevent modal close while loading (check isLoading before calling handleClose)
|
||||
- ESLint rule react-hooks/set-state-in-effect warns against synchronous setState in useEffect
|
||||
- Initialize state from searchParams directly in useState() instead of setting in useEffect
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-014
|
||||
- What was implemented: Delete project functionality with confirmation dialog and toast
|
||||
- Files changed:
|
||||
- src/components/ProjectCard.tsx - new client component replacing Link, with delete button and confirmation dialog
|
||||
- src/components/ProjectList.tsx - new wrapper component to manage project list state and toast notifications
|
||||
- src/components/Toast.tsx - new reusable toast notification component
|
||||
- src/app/dashboard/page.tsx - updated to use ProjectList instead of inline rendering
|
||||
- **Learnings for future iterations:**
|
||||
- To enable client-side state updates (like removing items), extract list rendering from server components into client components
|
||||
- ProjectList accepts initialProjects from server and manages state locally for immediate UI updates
|
||||
- Use onDelete callback pattern to propagate deletion events from child (ProjectCard) to parent (ProjectList)
|
||||
- Delete button uses e.stopPropagation() to prevent card click navigation when clicking delete
|
||||
- Confirmation dialogs should disable close/cancel while action is in progress (isDeleting check)
|
||||
- Toast component uses useCallback for handlers and auto-dismiss with setTimeout
|
||||
- Toast animations can use TailwindCSS animate-in utilities (fade-in, slide-in-from-bottom-4)
|
||||
- Delete icon appears on hover using group-hover:opacity-100 with parent group class
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-015
|
||||
- What was implemented: Rename project functionality
|
||||
- Files changed:
|
||||
- src/components/ProjectCard.tsx - added rename button, modal dialog, and Supabase update logic
|
||||
- src/components/ProjectList.tsx - added handleRename callback and toast notification
|
||||
- **Learnings for future iterations:**
|
||||
- Multiple action buttons on a card can be grouped in a flex container with gap-1
|
||||
- Rename modal follows same pattern as delete dialog: fixed positioning, backdrop, form
|
||||
- Use onKeyDown to handle Enter key for quick form submission
|
||||
- Reset form state (newName, error) when opening modal to handle edge cases
|
||||
- Check if name is unchanged before making API call to avoid unnecessary requests
|
||||
- Trim whitespace from input value before validation and submission
|
||||
- handleRename callback updates project name in state using map() to preserve list order
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-016
|
||||
- What was implemented: Admin invite user functionality
|
||||
- Files changed:
|
||||
- src/app/admin/invite/page.tsx - new admin-only page with access check (redirects non-admins)
|
||||
- src/app/admin/invite/InviteForm.tsx - client component with invite form and state management
|
||||
- src/app/admin/invite/actions.ts - server action using service role key to call inviteUserByEmail
|
||||
- src/components/Navbar.tsx - added isAdmin prop and "Invite User" link (visible only to admins)
|
||||
- src/app/dashboard/layout.tsx - fetches profile.is_admin and passes it to Navbar
|
||||
- .env.example - added SUPABASE_SERVICE_ROLE_KEY and NEXT_PUBLIC_SITE_URL
|
||||
- **Learnings for future iterations:**
|
||||
- Admin operations require SUPABASE_SERVICE_ROLE_KEY (server-side only, not NEXT_PUBLIC_*)
|
||||
- Use createClient from @supabase/supabase-js directly for admin client (not @supabase/ssr)
|
||||
- Admin client needs auth config: { autoRefreshToken: false, persistSession: false }
|
||||
- inviteUserByEmail requires redirectTo option for the signup link in email
|
||||
- Server actions ('use server') can access private env vars safely
|
||||
- Admin check should happen both in server component (redirect) and server action (double check)
|
||||
- Admin page uses its own layout (not dashboard layout) to have custom styling
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-017
|
||||
- What was implemented: Editor page with React Flow canvas
|
||||
- Files changed:
|
||||
- package.json - added reactflow dependency
|
||||
- src/app/editor/[projectId]/page.tsx - new server component that fetches project from Supabase, handles auth/not found, renders header with back link
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - new client component with React Flow canvas, Background component, type converters for nodes/edges
|
||||
- src/app/editor/[projectId]/loading.tsx - new loading state component with spinner
|
||||
- **Learnings for future iterations:**
|
||||
- React Flow requires 'use client' directive since it uses browser APIs
|
||||
- Import 'reactflow/dist/style.css' for default React Flow styling
|
||||
- Use useNodesState and useEdgesState hooks for managing nodes/edges state
|
||||
- Convert app types (FlowchartNode, FlowchartEdge) to React Flow types with helper functions
|
||||
- Next.js dynamic route params come as Promise in App Router 16+ (need to await params)
|
||||
- Use notFound() from next/navigation for 404 responses
|
||||
- React Flow canvas needs parent container with explicit height (h-full, h-screen)
|
||||
- Background component accepts variant (Dots, Lines, Cross) and gap/size props
|
||||
- Loading page (loading.tsx) provides automatic loading UI for async server components
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-018
|
||||
- What was implemented: Canvas pan and zoom controls
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added Controls import and component
|
||||
- **Learnings for future iterations:**
|
||||
- React Flow Controls component provides zoom +/-, fitView, and lock buttons out of the box
|
||||
- Use position="bottom-right" prop to position controls in bottom-right corner
|
||||
- Pan (click-and-drag) and zoom (mouse wheel) are React Flow defaults, no extra config needed
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-019
|
||||
- What was implemented: Editor toolbar with add/save/export/import buttons
|
||||
- Files changed:
|
||||
- src/components/editor/Toolbar.tsx - new toolbar component with styled buttons
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated toolbar with placeholder handlers
|
||||
- **Learnings for future iterations:**
|
||||
- Toolbar component accepts callback props for actions (onAddDialogue, onSave, etc.)
|
||||
- Node type buttons use color coding: blue (Dialogue), green (Choice), orange (Variable)
|
||||
- Action buttons (Save, Export, Import) use neutral bordered styling
|
||||
- FlowchartEditor now uses flex-col layout to stack toolbar above canvas
|
||||
- Placeholder handlers with TODO comments help track future implementation work
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-020
|
||||
- What was implemented: Custom DialogueNode component for displaying/editing character dialogue
|
||||
- Files changed:
|
||||
- src/components/editor/nodes/DialogueNode.tsx - new custom node component with editable speaker and text fields
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - registered DialogueNode as custom node type
|
||||
- **Learnings for future iterations:**
|
||||
- Custom React Flow nodes use NodeProps<T> for typing, where T is the data shape
|
||||
- Use useReactFlow() hook to get setNodes for updating node data from within the node component
|
||||
- Handle components need Position enum (Position.Top, Position.Bottom) for positioning
|
||||
- Custom handles can be styled with className and TailwindCSS, use ! prefix to override defaults (e.g., !h-3, !w-3)
|
||||
- Node types must be registered in a nodeTypes object and passed to ReactFlow component
|
||||
- Memoize nodeTypes with useMemo to prevent unnecessary re-renders
|
||||
- Custom node components go in src/components/editor/nodes/ directory
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-021
|
||||
- What was implemented: Add dialogue node from toolbar functionality
|
||||
- Files changed:
|
||||
- package.json - added nanoid dependency for unique ID generation
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleAddDialogue to create new dialogue nodes at viewport center
|
||||
- **Learnings for future iterations:**
|
||||
- useReactFlow() hook requires ReactFlowProvider wrapper, so split component into inner component and outer wrapper
|
||||
- getViewport() returns { x, y, zoom } representing the current pan/zoom state
|
||||
- Calculate viewport center: centerX = (-viewport.x + halfWidth) / viewport.zoom
|
||||
- nanoid v5+ generates unique IDs synchronously with no dependencies
|
||||
- Node creation pattern: create Node object with { id, type, position, data }, then add to state via setNodes
|
||||
- React Flow nodes are draggable by default, no extra configuration needed
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-022
|
||||
- What was implemented: Custom ChoiceNode component for displaying branching decisions
|
||||
- Files changed:
|
||||
- src/components/editor/nodes/ChoiceNode.tsx - new custom node component with green styling, editable prompt, and dynamic option handles
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - registered ChoiceNode as custom node type
|
||||
- **Learnings for future iterations:**
|
||||
- ChoiceNode follows same pattern as DialogueNode: NodeProps<T> typing, useReactFlow() for updates
|
||||
- Dynamic handles positioned using style={{ left: `${((index + 1) / (options.length + 1)) * 100}%` }} for even spacing
|
||||
- Handle id format for options: 'option-0', 'option-1', etc. (matching the index)
|
||||
- Each option needs a unique id (string) and label (string) per the ChoiceOption type
|
||||
- updateOptionLabel callback pattern: find option by id, map over options array to update matching one
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-023
|
||||
- What was implemented: Add choice node from toolbar functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleAddChoice to create new choice nodes at viewport center
|
||||
- **Learnings for future iterations:**
|
||||
- handleAddChoice follows same pattern as handleAddDialogue: get viewport center, create node with nanoid, add to state
|
||||
- Choice nodes must be initialized with 2 options (each with unique id via nanoid and empty label)
|
||||
- Node data structure for choice: { prompt: '', options: [{ id, label }, { id, label }] }
|
||||
- React Flow nodes are draggable by default after being added to state
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-024
|
||||
- What was implemented: Add/remove choice options functionality (2-6 options supported)
|
||||
- Files changed:
|
||||
- src/components/editor/nodes/ChoiceNode.tsx - added addOption and removeOption callbacks, '+' button to add options, 'x' button per option to remove
|
||||
- **Learnings for future iterations:**
|
||||
- Define MIN_OPTIONS and MAX_OPTIONS constants for clear limits
|
||||
- Use disabled prop on buttons to enforce min/max constraints with appropriate styling (opacity-30, cursor-not-allowed)
|
||||
- Remove button uses × character for simple cross icon
|
||||
- Add button styled with border-dashed for visual distinction from action buttons
|
||||
- Handles update dynamically via React Flow re-render when options array changes
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-025
|
||||
- What was implemented: Custom VariableNode component for setting/modifying story variables
|
||||
- Files changed:
|
||||
- src/components/editor/nodes/VariableNode.tsx - new custom node component with orange styling, editable variable name, operation dropdown, and numeric value input
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - imported and registered VariableNode in nodeTypes
|
||||
- **Learnings for future iterations:**
|
||||
- VariableNode follows same pattern as DialogueNode: NodeProps<T> typing, useReactFlow() for updates
|
||||
- Use parseFloat() with fallback to 0 for number input handling: `parseFloat(e.target.value) || 0`
|
||||
- Operation dropdown uses select element with options for 'set', 'add', 'subtract'
|
||||
- Type assertion needed for select value: `e.target.value as 'set' | 'add' | 'subtract'`
|
||||
- Use `??` (nullish coalescing) for number defaults instead of `||` to allow 0 values: `data.value ?? 0`
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-026
|
||||
- What was implemented: Add variable node from toolbar functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleAddVariable to create new variable nodes at viewport center
|
||||
- **Learnings for future iterations:**
|
||||
- handleAddVariable follows same pattern as handleAddDialogue and handleAddChoice: get viewport center, create node with nanoid, add to state
|
||||
- Variable nodes initialized with { variableName: '', operation: 'set', value: 0 }
|
||||
- All add node handlers share the same pattern and use the getViewportCenter helper
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-027
|
||||
- What was implemented: Connect nodes with edges including arrow markers and smooth styling
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added MarkerType import, updated onConnect to create edges with smoothstep type and arrow markers, updated toReactFlowEdges to apply same styling to loaded edges
|
||||
- **Learnings for future iterations:**
|
||||
- Use `type: 'smoothstep'` for cleaner edge curves instead of default bezier
|
||||
- Use `markerEnd: { type: MarkerType.ArrowClosed }` to add directional arrows to edges
|
||||
- Connection type has nullable source/target, but Edge requires non-null strings - guard with early return
|
||||
- Apply consistent edge styling in both onConnect (new edges) and toReactFlowEdges (loaded edges)
|
||||
- Generate unique edge IDs with nanoid in onConnect callback
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-028
|
||||
- What was implemented: Select and delete nodes functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added deleteKeyCode prop to enable Delete/Backspace key deletion
|
||||
- **Learnings for future iterations:**
|
||||
- React Flow has built-in node selection via clicking - no extra configuration needed
|
||||
- Use `deleteKeyCode={['Delete', 'Backspace']}` prop to enable keyboard deletion
|
||||
- React Flow automatically removes connected edges when a node is deleted (no manual cleanup needed)
|
||||
- The useNodesState/useEdgesState hooks with onNodesChange/onEdgesChange handle all deletion state updates
|
||||
- No explicit onNodesDelete callback is needed - the onNodesChange handler covers deletion events
|
||||
---
|
||||
|
||||
## 2026-01-21 - US-029
|
||||
- What was implemented: Select and delete edges functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added onEdgesDelete callback
|
||||
- **Learnings for future iterations:**
|
||||
- React Flow 11 edges are clickable and selectable by default (interactionWidth renders invisible interaction area)
|
||||
- The `deleteKeyCode` prop works for both nodes and edges - same configuration covers both
|
||||
- onEdgesDelete is optional if you just need state management (onEdgesChange handles removal events)
|
||||
- onEdgesDelete is useful for additional logic like logging, dirty state tracking, or undo/redo
|
||||
- Edge selection shows visual highlight via React Flow's built-in styling
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-030
|
||||
- What was implemented: Right-click context menu for canvas, nodes, and edges
|
||||
- Files changed:
|
||||
- src/components/editor/ContextMenu.tsx - new component with menu items for different contexts (canvas/node/edge)
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated context menu with handlers for all actions
|
||||
- **Learnings for future iterations:**
|
||||
- Use `onPaneContextMenu`, `onNodeContextMenu`, and `onEdgeContextMenu` React Flow callbacks for context menus
|
||||
- `screenToFlowPosition()` converts screen coordinates to flow coordinates for placing nodes at click position
|
||||
- Context menu state includes type ('canvas'|'node'|'edge') and optional nodeId/edgeId for targeted actions
|
||||
- Use `document.addEventListener('click', handler)` and `e.stopPropagation()` on menu to close on outside click
|
||||
- Escape key listener via `document.addEventListener('keydown', handler)` for menu close
|
||||
- NodeMouseHandler and EdgeMouseHandler types from reactflow provide proper typing for context menu callbacks
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-031
|
||||
- What was implemented: Condition editor modal for adding/editing/removing conditions on edges
|
||||
- Files changed:
|
||||
- src/components/editor/ConditionEditor.tsx - new modal component with form for variable name, operator, and value
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated condition editor with double-click and context menu triggers
|
||||
- **Learnings for future iterations:**
|
||||
- Use `onEdgeDoubleClick` React Flow callback for double-click on edges
|
||||
- Store condition editor state separately from context menu state (`conditionEditor` vs `contextMenu`)
|
||||
- Use `edge.data.condition` to access condition object on edges
|
||||
- When removing properties from edge data, use `delete` operator instead of destructuring to avoid lint warnings about unused variables
|
||||
- Condition type has operators: '>' | '<' | '==' | '>=' | '<=' | '!='
|
||||
- Preview condition in modal using template string: `${variableName} ${operator} ${value}`
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-032
|
||||
- What was implemented: Display conditions on edges with dashed styling and labels
|
||||
- Files changed:
|
||||
- src/components/editor/edges/ConditionalEdge.tsx - new custom edge component with condition display
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated custom edge type, added EdgeTypes import and edgeTypes definition
|
||||
- **Learnings for future iterations:**
|
||||
- Custom React Flow edges use EdgeProps<T> typing where T is the data shape
|
||||
- Use `BaseEdge` component for rendering the edge path, and `EdgeLabelRenderer` for positioning labels
|
||||
- `getSmoothStepPath` returns [edgePath, labelX, labelY] - labelX/labelY are center coordinates for labels
|
||||
- Custom edge types are registered in edgeTypes object (similar to nodeTypes) and passed to ReactFlow
|
||||
- Style edges with conditions using strokeDasharray: '5 5' for dashed lines
|
||||
- Custom edges go in `src/components/editor/edges/` directory
|
||||
- Use amber color scheme for conditional edges to distinguish from regular edges
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-033
|
||||
- What was implemented: Auto-save to LocalStorage with debounced saves and draft restoration prompt
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added LocalStorage auto-save functionality, draft check on load, and restoration prompt UI
|
||||
- **Learnings for future iterations:**
|
||||
- Use lazy useState initializer for draft check to avoid ESLint "setState in effect" warning
|
||||
- LocalStorage key format: `vnwrite-draft-{projectId}` for project-specific drafts
|
||||
- Debounce saves with 1 second delay using useRef for timer tracking
|
||||
- Convert React Flow Node/Edge types back to app types using helper functions (fromReactFlowNodes, fromReactFlowEdges)
|
||||
- React Flow Edge has `sourceHandle: string | null | undefined` but app types use `string | undefined` - use nullish coalescing (`?? undefined`)
|
||||
- Check `typeof window === 'undefined'` in lazy initializer for SSR safety
|
||||
- clearDraft is exported for use in save functionality (US-034) to clear draft after successful database save
|
||||
- JSON.stringify comparison works for flowchart data equality check
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-034
|
||||
- What was implemented: Save project to database functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleSave with Supabase update, added isSaving state and Toast notifications
|
||||
- src/components/editor/Toolbar.tsx - added isSaving prop with loading spinner indicator
|
||||
- **Learnings for future iterations:**
|
||||
- Use createClient() from lib/supabase/client.ts for browser-side database operations
|
||||
- Supabase update returns { error } object for error handling
|
||||
- Use async/await with try/catch for async save operations
|
||||
- Set updated_at manually with new Date().toISOString() for Supabase JSONB updates
|
||||
- Clear LocalStorage draft after successful save to avoid stale drafts
|
||||
- Toast state uses object with message and type for flexibility
|
||||
- Loading spinner SVG with animate-spin class for visual feedback during save
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-035
|
||||
- What was implemented: Export project as .vnflow file functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleExport with blob creation and download trigger, added projectName prop
|
||||
- src/app/editor/[projectId]/page.tsx - passed projectName prop to FlowchartEditor
|
||||
- **Learnings for future iterations:**
|
||||
- Use Blob with type 'application/json' for JSON file downloads
|
||||
- JSON.stringify(data, null, 2) creates pretty-printed JSON with 2-space indentation
|
||||
- URL.createObjectURL creates a temporary URL for the blob
|
||||
- Create temporary anchor element with download attribute to trigger file download
|
||||
- Remember to cleanup: remove the anchor from DOM and revoke the object URL
|
||||
- Props needed for export: pass data down from server components (e.g., projectName) to client components that need them
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-036
|
||||
- What was implemented: Import project from .vnflow file functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleImport, handleFileSelect, validation, and confirmation dialog for unsaved changes
|
||||
- **Learnings for future iterations:**
|
||||
- Use hidden `<input type="file">` element with ref to trigger file picker programmatically via `ref.current?.click()`
|
||||
- Accept multiple file extensions using comma-separated values in `accept` attribute: `accept=".vnflow,.json"`
|
||||
- Reset file input value after selection (`event.target.value = ''`) to allow re-selecting the same file
|
||||
- Use FileReader API with `readAsText()` for reading file contents, handle onload and onerror callbacks
|
||||
- Type guard function `isValidFlowchartData()` validates imported JSON structure before loading
|
||||
- Track unsaved changes by comparing current state to initialData using JSON.stringify comparison
|
||||
- Show confirmation dialog before import if there are unsaved changes to prevent accidental data loss
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-037
|
||||
- What was implemented: Export to Ren'Py JSON format functionality
|
||||
- Files changed:
|
||||
- src/components/editor/Toolbar.tsx - added 'Export to Ren'Py' button with purple styling
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented Ren'Py export types, conversion functions, and handleExportRenpy callback
|
||||
- **Learnings for future iterations:**
|
||||
- Ren'Py export uses typed interfaces for different node types: RenpyDialogueNode, RenpyMenuNode, RenpyVariableNode
|
||||
- Find first node by identifying nodes with no incoming edges (not in any edge's target set)
|
||||
- Use graph traversal (DFS) to organize nodes into labeled sections based on flow
|
||||
- Choice nodes create branching sections - save current section before processing each branch
|
||||
- Track visited nodes to detect cycles and create proper labels for jump references
|
||||
- Labels are generated based on speaker name or incremental counter for uniqueness
|
||||
- Replace node IDs with proper labels in a second pass after traversal completes
|
||||
- Include metadata (projectName, exportedAt) at the top level of the export
|
||||
- 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)
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-040
|
||||
- What was implemented: Conditionals on choice options - per-option visibility conditions
|
||||
- Files changed:
|
||||
- src/types/flowchart.ts - moved Condition type before ChoiceOption, added optional condition field to ChoiceOption
|
||||
- src/components/editor/nodes/ChoiceNode.tsx - added condition button per option, condition badge display, condition editing state management
|
||||
- src/components/editor/OptionConditionEditor.tsx - new modal component for editing per-option conditions (variable name, operator, value)
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - updated Ren'Py export to include per-option conditions (option condition takes priority over edge condition)
|
||||
- **Learnings for future iterations:**
|
||||
- Per-option conditions use the same Condition type as edge conditions
|
||||
- Condition type needed to be moved above ChoiceOption in types file since ChoiceOption now references it
|
||||
- Use `delete obj.property` pattern instead of destructuring with unused variable to avoid lint warnings
|
||||
- OptionConditionEditor is separate from ConditionEditor because it operates on option IDs vs edge IDs
|
||||
- In Ren'Py export, option-level condition takes priority over edge condition since it represents visibility
|
||||
- Condition button uses amber color scheme (bg-amber-100) when condition is set, neutral when not
|
||||
- Condition badge below option shows "if variableName operator value" text in compact format
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-041
|
||||
- What was implemented: Change password for logged-in user from settings page
|
||||
- Files changed:
|
||||
- src/app/dashboard/settings/page.tsx - new client component with password change form (current, new, confirm fields)
|
||||
- src/components/Navbar.tsx - added "Settings" link to navbar
|
||||
- **Learnings for future iterations:**
|
||||
- Settings page lives under /dashboard/settings to reuse the dashboard layout (navbar, auth check)
|
||||
- Re-authentication uses signInWithPassword with current password before allowing updateUser
|
||||
- Supabase getUser() returns current user email needed for re-auth signInWithPassword call
|
||||
- Password validation: check match and minimum length (6 chars) before making API calls
|
||||
- Clear form fields after successful password update for security
|
||||
- Settings link in navbar uses neutral zinc colors to distinguish from admin/action links
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-042
|
||||
- What was implemented: Password reset modal that automatically appears when a recovery token is detected in the URL
|
||||
- Files changed:
|
||||
- src/components/PasswordResetModal.tsx - new client component with modal that detects recovery tokens from URL hash, sets session, and provides password reset form
|
||||
- src/app/login/page.tsx - integrated PasswordResetModal component on the login page
|
||||
- **Learnings for future iterations:**
|
||||
- PasswordResetModal is a standalone component that can be placed on any page to detect recovery tokens
|
||||
- Use window.history.replaceState to clean the URL hash after extracting the token (prevents re-triggering on refresh)
|
||||
- Separate tokenError state from form error state to show different UI (expired link vs. form validation)
|
||||
- Modal uses fixed positioning with z-50 to overlay above page content
|
||||
- After successful password update, sign out the user and redirect to login with success message (same as reset-password page)
|
||||
- The modal coexists with the existing /reset-password page - both handle recovery tokens but in different UX patterns
|
||||
---
|
||||
342
prd.json
342
prd.json
|
|
@ -414,8 +414,350 @@
|
|||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 23,
|
||||
<<<<<<< HEAD
|
||||
"passes": false,
|
||||
"notes": "Dependencies: US-052, US-048"
|
||||
=======
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-024",
|
||||
"title": "Add/remove choice options",
|
||||
"description": "As a user, I want to add or remove choice options (2-6 options supported).",
|
||||
"acceptanceCriteria": [
|
||||
"ChoiceNode has '+' button to add new option",
|
||||
"Maximum 6 options (button disabled or hidden at max)",
|
||||
"Each option has 'x' button to remove it",
|
||||
"Minimum 2 options (remove button disabled or hidden at min)",
|
||||
"Adding option creates new output Handle dynamically",
|
||||
"Removing option removes its Handle",
|
||||
"Node data updates in React Flow state",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 24,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-025",
|
||||
"title": "Create custom variable node component",
|
||||
"description": "As a user, I want variable nodes to set or modify story variables.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/nodes/VariableNode.tsx",
|
||||
"Node styled with orange background/border",
|
||||
"Displays editable input for variable name (placeholder: 'variableName')",
|
||||
"Displays dropdown/select for operation: set, add, subtract",
|
||||
"Displays editable number input for value (default: 0)",
|
||||
"Has one Handle at top (type='target', id='input')",
|
||||
"Has one Handle at bottom (type='source', id='output')",
|
||||
"Register as custom node type in React Flow",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 25,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-026",
|
||||
"title": "Add variable node from toolbar",
|
||||
"description": "As a user, I want to add variable nodes by clicking the toolbar button.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Add Variable' in toolbar creates new VariableNode",
|
||||
"Node appears at center of current viewport",
|
||||
"Node has unique ID",
|
||||
"Node initialized with empty variableName, operation='set', value=0",
|
||||
"Node added to React Flow nodes state",
|
||||
"Node can be dragged to reposition",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 26,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-027",
|
||||
"title": "Connect nodes with edges",
|
||||
"description": "As a user, I want to connect nodes with arrows to define story flow.",
|
||||
"acceptanceCriteria": [
|
||||
"Dragging from source Handle to target Handle creates edge (React Flow default)",
|
||||
"Edges render as smooth bezier curves (default edge type or smoothstep)",
|
||||
"Edges show arrow marker indicating direction (markerEnd)",
|
||||
"Edges update position when nodes are moved",
|
||||
"Cannot connect source-to-source or target-to-target (React Flow handles this)",
|
||||
"New edges added to React Flow edges state",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 27,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-028",
|
||||
"title": "Select and delete nodes",
|
||||
"description": "As a user, I want to delete nodes to revise my flowchart.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking a node selects it (visual highlight via React Flow)",
|
||||
"Pressing Delete or Backspace key removes selected node(s)",
|
||||
"Deleting node also removes all connected edges",
|
||||
"Use onNodesDelete callback to handle deletion",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 28,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-029",
|
||||
"title": "Select and delete edges",
|
||||
"description": "As a user, I want to delete connections between nodes.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking an edge selects it (visual highlight via React Flow)",
|
||||
"Pressing Delete or Backspace key removes selected edge(s)",
|
||||
"Use onEdgesDelete callback to handle deletion",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 29,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-030",
|
||||
"title": "Right-click context menu",
|
||||
"description": "As a user, I want a context menu for quick actions.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/ContextMenu.tsx",
|
||||
"Right-click on canvas shows menu: Add Dialogue, Add Choice, Add Variable",
|
||||
"New node created at click position",
|
||||
"Right-click on node shows menu: Delete",
|
||||
"Right-click on edge shows menu: Delete, Add Condition",
|
||||
"Clicking elsewhere or pressing Escape closes menu",
|
||||
"Menu styled with TailwindCSS",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 30,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-031",
|
||||
"title": "Condition editor modal",
|
||||
"description": "As a user, I want to add conditions to edges so branches depend on variables.",
|
||||
"acceptanceCriteria": [
|
||||
"Create components/editor/ConditionEditor.tsx modal/popover",
|
||||
"Opens on double-click edge or via context menu 'Add Condition'",
|
||||
"Form fields: variable name input, operator dropdown (>, <, ==, >=, <=, !=), value number input",
|
||||
"Pre-fill fields if edge already has condition",
|
||||
"Save button applies condition to edge data",
|
||||
"Clear/Remove button removes condition from edge",
|
||||
"Cancel button closes without saving",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 31,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-032",
|
||||
"title": "Display conditions on edges",
|
||||
"description": "As a user, I want to see conditions displayed on edges.",
|
||||
"acceptanceCriteria": [
|
||||
"Create custom edge component or use edge labels",
|
||||
"Edges with conditions render as dashed lines (strokeDasharray)",
|
||||
"Condition label displayed on edge (e.g., 'score > 5')",
|
||||
"Unconditional edges remain solid lines",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 32,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-033",
|
||||
"title": "Auto-save to LocalStorage",
|
||||
"description": "As a user, I want my work auto-saved locally so I don't lose progress if the browser crashes.",
|
||||
"acceptanceCriteria": [
|
||||
"Save flowchart state (nodes + edges) to LocalStorage on every change",
|
||||
"Debounce saves (e.g., 1 second delay after last change)",
|
||||
"LocalStorage key format: 'vnwrite-draft-{projectId}'",
|
||||
"On editor load, check LocalStorage for saved draft",
|
||||
"If local draft exists and differs from database, show prompt to restore or discard",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 33,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-034",
|
||||
"title": "Save project to database",
|
||||
"description": "As a user, I want to save my project to the database manually.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Save' in toolbar saves current nodes/edges to Supabase",
|
||||
"Update project's flowchart_data and updated_at fields",
|
||||
"Show saving indicator/spinner while in progress",
|
||||
"Show success toast on completion",
|
||||
"Clear LocalStorage draft after successful save",
|
||||
"Show error toast if save fails",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 34,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-035",
|
||||
"title": "Export project as .vnflow file",
|
||||
"description": "As a user, I want to export my project as a JSON file for backup or sharing.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Export' in toolbar triggers file download",
|
||||
"File named '[project-name].vnflow'",
|
||||
"File contains JSON with nodes and edges arrays",
|
||||
"JSON is pretty-printed (2-space indent) for readability",
|
||||
"Uses browser download API (create blob, trigger download)",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 35,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-036",
|
||||
"title": "Import project from .vnflow file",
|
||||
"description": "As a user, I want to import a .vnflow file to restore or share projects.",
|
||||
"acceptanceCriteria": [
|
||||
"Clicking 'Import' in toolbar opens file picker",
|
||||
"Accept .vnflow and .json file extensions",
|
||||
"If current project has unsaved changes, show confirmation dialog",
|
||||
"Validate imported file has nodes and edges arrays",
|
||||
"Show error toast if file is invalid",
|
||||
"Load valid data into React Flow state (replaces current flowchart)",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 36,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-037",
|
||||
"title": "Export to Ren'Py JSON format",
|
||||
"description": "As a user, I want to export my flowchart to Ren'Py-compatible JSON for use in my game.",
|
||||
"acceptanceCriteria": [
|
||||
"Add 'Export to Ren'Py' option (button or dropdown item)",
|
||||
"File named '[project-name]-renpy.json'",
|
||||
"Dialogue nodes export as: { type: 'dialogue', speaker: '...', text: '...' }",
|
||||
"Choice nodes export as: { type: 'menu', prompt: '...', choices: [{ label: '...', next: '...' }] }",
|
||||
"Variable nodes export as: { type: 'variable', name: '...', operation: '...', value: ... }",
|
||||
"Edges with conditions include condition object on the choice/jump",
|
||||
"Organize nodes into labeled sections based on flow (traverse from first node)",
|
||||
"Include metadata: projectName, exportedAt timestamp",
|
||||
"Output JSON is valid (test with JSON.parse)",
|
||||
"Typecheck passes"
|
||||
],
|
||||
"priority": 37,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-038",
|
||||
"title": "Unsaved changes warning",
|
||||
"description": "As a user, I want a warning before losing unsaved work.",
|
||||
"acceptanceCriteria": [
|
||||
"Track dirty state: true when flowchart modified after last save",
|
||||
"Set dirty=true on node/edge add, delete, or modify",
|
||||
"Set dirty=false after successful save",
|
||||
"Browser beforeunload event shows warning if dirty",
|
||||
"Navigating to dashboard shows confirmation modal if dirty",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 38,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-039",
|
||||
"title": "Loading and error states",
|
||||
"description": "As a user, I want clear feedback when things are loading or when errors occur.",
|
||||
"acceptanceCriteria": [
|
||||
"Loading spinner component for async operations",
|
||||
"Editor shows loading spinner while fetching project",
|
||||
"Error message displayed if project fails to load (with back to dashboard link)",
|
||||
"Toast notification system for success/error messages",
|
||||
"Save error shows toast with retry option",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 39,
|
||||
"passes": true,
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "US-040",
|
||||
"title": "Conditionals on choice options",
|
||||
"description": "As a user, I want individual choice options to have variable conditions so that options are only visible when certain conditions are met (e.g., affection > 10).",
|
||||
"acceptanceCriteria": [
|
||||
"Each ChoiceOption can have optional condition (variableName, operator, value)",
|
||||
"Update ChoiceNode UI to show 'Add condition' button per option",
|
||||
"Condition editor modal for each option",
|
||||
"Visual indicator (icon/badge) on options with conditions",
|
||||
"Update TypeScript types: ChoiceOption gets optional condition field",
|
||||
"Export includes per-option conditions in Ren'Py JSON",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 40,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-018, US-019, US-025. Complexity: M"
|
||||
},
|
||||
{
|
||||
"id": "US-041",
|
||||
"title": "Change password for logged-in user",
|
||||
"description": "As a user, I want to change my own password from a settings/profile page so that I can keep my account secure.",
|
||||
"acceptanceCriteria": [
|
||||
"Settings/profile page accessible from dashboard header",
|
||||
"Form with: current password, new password, confirm new password fields",
|
||||
"Calls Supabase updateUser with new password",
|
||||
"Requires current password verification (re-authenticate)",
|
||||
"Shows success/error messages",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 41,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-004. Complexity: S"
|
||||
},
|
||||
{
|
||||
"id": "US-042",
|
||||
"title": "Password reset modal on token arrival",
|
||||
"description": "As a user, I want a modal to automatically appear when a password reset token is detected so that I can set my new password seamlessly.",
|
||||
"acceptanceCriteria": [
|
||||
"Detect password reset token in URL (from Supabase email link)",
|
||||
"Show modal/dialog automatically when token present",
|
||||
"Modal has: new password, confirm password fields",
|
||||
"Calls Supabase updateUser with token to complete reset",
|
||||
"On success, close modal and redirect to login",
|
||||
"On error, show error message",
|
||||
"Typecheck passes",
|
||||
"Verify in browser using dev-browser skill"
|
||||
],
|
||||
"priority": 42,
|
||||
"passes": true,
|
||||
"notes": "Dependencies: US-006. Complexity: S"
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
199
progress.txt
199
progress.txt
|
|
@ -27,6 +27,7 @@
|
|||
- 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
|
||||
- Settings page at `/dashboard/settings` reuses dashboard layout; re-auth via signInWithPassword before updateUser
|
||||
<<<<<<< HEAD
|
||||
- Character/Variable types (`Character`, `Variable`) and extracted node data types (`DialogueNodeData`, `VariableNodeData`) are in `src/types/flowchart.ts`
|
||||
- `EditorContext` at `src/components/editor/EditorContext.tsx` provides shared state (characters, onAddCharacter) to all custom node components via React context
|
||||
- Use `useEditorContext()` in node components to access project-level characters and variables without prop drilling through React Flow node data
|
||||
|
|
@ -43,6 +44,8 @@
|
|||
- `ChoiceOption` type includes optional `condition?: Condition`. When counting variable usage, check variable nodes + edge conditions + choice option conditions.
|
||||
- React Compiler lint forbids `setState` in effects and reading `useRef().current` during render. Use `useState(() => computeValue())` lazy initializer pattern for one-time initialization logic.
|
||||
- For detecting legacy data shape (pre-migration), pass a flag from the server component (page.tsx) to the client component, since only the server reads raw DB data.
|
||||
=======
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -183,3 +186,199 @@
|
|||
- Supabase client-side fetching from `createClient()` (browser) automatically scopes by the logged-in user's RLS policies, so fetching other projects just uses `.neq('id', currentProjectId)` and RLS handles ownership filtering.
|
||||
- No browser testing tools are available; manual verification is needed.
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-030
|
||||
- What was implemented: Right-click context menu for canvas, nodes, and edges
|
||||
- Files changed:
|
||||
- src/components/editor/ContextMenu.tsx - new component with menu items for different contexts (canvas/node/edge)
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated context menu with handlers for all actions
|
||||
- **Learnings for future iterations:**
|
||||
- Use `onPaneContextMenu`, `onNodeContextMenu`, and `onEdgeContextMenu` React Flow callbacks for context menus
|
||||
- `screenToFlowPosition()` converts screen coordinates to flow coordinates for placing nodes at click position
|
||||
- Context menu state includes type ('canvas'|'node'|'edge') and optional nodeId/edgeId for targeted actions
|
||||
- Use `document.addEventListener('click', handler)` and `e.stopPropagation()` on menu to close on outside click
|
||||
- Escape key listener via `document.addEventListener('keydown', handler)` for menu close
|
||||
- NodeMouseHandler and EdgeMouseHandler types from reactflow provide proper typing for context menu callbacks
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-031
|
||||
- What was implemented: Condition editor modal for adding/editing/removing conditions on edges
|
||||
- Files changed:
|
||||
- src/components/editor/ConditionEditor.tsx - new modal component with form for variable name, operator, and value
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated condition editor with double-click and context menu triggers
|
||||
- **Learnings for future iterations:**
|
||||
- Use `onEdgeDoubleClick` React Flow callback for double-click on edges
|
||||
- Store condition editor state separately from context menu state (`conditionEditor` vs `contextMenu`)
|
||||
- Use `edge.data.condition` to access condition object on edges
|
||||
- When removing properties from edge data, use `delete` operator instead of destructuring to avoid lint warnings about unused variables
|
||||
- Condition type has operators: '>' | '<' | '==' | '>=' | '<=' | '!='
|
||||
- Preview condition in modal using template string: `${variableName} ${operator} ${value}`
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-032
|
||||
- What was implemented: Display conditions on edges with dashed styling and labels
|
||||
- Files changed:
|
||||
- src/components/editor/edges/ConditionalEdge.tsx - new custom edge component with condition display
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - integrated custom edge type, added EdgeTypes import and edgeTypes definition
|
||||
- **Learnings for future iterations:**
|
||||
- Custom React Flow edges use EdgeProps<T> typing where T is the data shape
|
||||
- Use `BaseEdge` component for rendering the edge path, and `EdgeLabelRenderer` for positioning labels
|
||||
- `getSmoothStepPath` returns [edgePath, labelX, labelY] - labelX/labelY are center coordinates for labels
|
||||
- Custom edge types are registered in edgeTypes object (similar to nodeTypes) and passed to ReactFlow
|
||||
- Style edges with conditions using strokeDasharray: '5 5' for dashed lines
|
||||
- Custom edges go in `src/components/editor/edges/` directory
|
||||
- Use amber color scheme for conditional edges to distinguish from regular edges
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-033
|
||||
- What was implemented: Auto-save to LocalStorage with debounced saves and draft restoration prompt
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - added LocalStorage auto-save functionality, draft check on load, and restoration prompt UI
|
||||
- **Learnings for future iterations:**
|
||||
- Use lazy useState initializer for draft check to avoid ESLint "setState in effect" warning
|
||||
- LocalStorage key format: `vnwrite-draft-{projectId}` for project-specific drafts
|
||||
- Debounce saves with 1 second delay using useRef for timer tracking
|
||||
- Convert React Flow Node/Edge types back to app types using helper functions (fromReactFlowNodes, fromReactFlowEdges)
|
||||
- React Flow Edge has `sourceHandle: string | null | undefined` but app types use `string | undefined` - use nullish coalescing (`?? undefined`)
|
||||
- Check `typeof window === 'undefined'` in lazy initializer for SSR safety
|
||||
- clearDraft is exported for use in save functionality (US-034) to clear draft after successful database save
|
||||
- JSON.stringify comparison works for flowchart data equality check
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-034
|
||||
- What was implemented: Save project to database functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleSave with Supabase update, added isSaving state and Toast notifications
|
||||
- src/components/editor/Toolbar.tsx - added isSaving prop with loading spinner indicator
|
||||
- **Learnings for future iterations:**
|
||||
- Use createClient() from lib/supabase/client.ts for browser-side database operations
|
||||
- Supabase update returns { error } object for error handling
|
||||
- Use async/await with try/catch for async save operations
|
||||
- Set updated_at manually with new Date().toISOString() for Supabase JSONB updates
|
||||
- Clear LocalStorage draft after successful save to avoid stale drafts
|
||||
- Toast state uses object with message and type for flexibility
|
||||
- Loading spinner SVG with animate-spin class for visual feedback during save
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-035
|
||||
- What was implemented: Export project as .vnflow file functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleExport with blob creation and download trigger, added projectName prop
|
||||
- src/app/editor/[projectId]/page.tsx - passed projectName prop to FlowchartEditor
|
||||
- **Learnings for future iterations:**
|
||||
- Use Blob with type 'application/json' for JSON file downloads
|
||||
- JSON.stringify(data, null, 2) creates pretty-printed JSON with 2-space indentation
|
||||
- URL.createObjectURL creates a temporary URL for the blob
|
||||
- Create temporary anchor element with download attribute to trigger file download
|
||||
- Remember to cleanup: remove the anchor from DOM and revoke the object URL
|
||||
- Props needed for export: pass data down from server components (e.g., projectName) to client components that need them
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-036
|
||||
- What was implemented: Import project from .vnflow file functionality
|
||||
- Files changed:
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleImport, handleFileSelect, validation, and confirmation dialog for unsaved changes
|
||||
- **Learnings for future iterations:**
|
||||
- Use hidden `<input type="file">` element with ref to trigger file picker programmatically via `ref.current?.click()`
|
||||
- Accept multiple file extensions using comma-separated values in `accept` attribute: `accept=".vnflow,.json"`
|
||||
- Reset file input value after selection (`event.target.value = ''`) to allow re-selecting the same file
|
||||
- Use FileReader API with `readAsText()` for reading file contents, handle onload and onerror callbacks
|
||||
- Type guard function `isValidFlowchartData()` validates imported JSON structure before loading
|
||||
- Track unsaved changes by comparing current state to initialData using JSON.stringify comparison
|
||||
- Show confirmation dialog before import if there are unsaved changes to prevent accidental data loss
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-037
|
||||
- What was implemented: Export to Ren'Py JSON format functionality
|
||||
- Files changed:
|
||||
- src/components/editor/Toolbar.tsx - added 'Export to Ren'Py' button with purple styling
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - implemented Ren'Py export types, conversion functions, and handleExportRenpy callback
|
||||
- **Learnings for future iterations:**
|
||||
- Ren'Py export uses typed interfaces for different node types: RenpyDialogueNode, RenpyMenuNode, RenpyVariableNode
|
||||
- Find first node by identifying nodes with no incoming edges (not in any edge's target set)
|
||||
- Use graph traversal (DFS) to organize nodes into labeled sections based on flow
|
||||
- Choice nodes create branching sections - save current section before processing each branch
|
||||
- Track visited nodes to detect cycles and create proper labels for jump references
|
||||
- Labels are generated based on speaker name or incremental counter for uniqueness
|
||||
- Replace node IDs with proper labels in a second pass after traversal completes
|
||||
- Include metadata (projectName, exportedAt) at the top level of the export
|
||||
- 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)
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-040
|
||||
- What was implemented: Conditionals on choice options - per-option visibility conditions
|
||||
- Files changed:
|
||||
- src/types/flowchart.ts - moved Condition type before ChoiceOption, added optional condition field to ChoiceOption
|
||||
- src/components/editor/nodes/ChoiceNode.tsx - added condition button per option, condition badge display, condition editing state management
|
||||
- src/components/editor/OptionConditionEditor.tsx - new modal component for editing per-option conditions (variable name, operator, value)
|
||||
- src/app/editor/[projectId]/FlowchartEditor.tsx - updated Ren'Py export to include per-option conditions (option condition takes priority over edge condition)
|
||||
- **Learnings for future iterations:**
|
||||
- Per-option conditions use the same Condition type as edge conditions
|
||||
- Condition type needed to be moved above ChoiceOption in types file since ChoiceOption now references it
|
||||
- Use `delete obj.property` pattern instead of destructuring with unused variable to avoid lint warnings
|
||||
- OptionConditionEditor is separate from ConditionEditor because it operates on option IDs vs edge IDs
|
||||
- In Ren'Py export, option-level condition takes priority over edge condition since it represents visibility
|
||||
- Condition button uses amber color scheme (bg-amber-100) when condition is set, neutral when not
|
||||
- Condition badge below option shows "if variableName operator value" text in compact format
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-041
|
||||
- What was implemented: Change password for logged-in user from settings page
|
||||
- Files changed:
|
||||
- src/app/dashboard/settings/page.tsx - new client component with password change form (current, new, confirm fields)
|
||||
- src/components/Navbar.tsx - added "Settings" link to navbar
|
||||
- **Learnings for future iterations:**
|
||||
- Settings page lives under /dashboard/settings to reuse the dashboard layout (navbar, auth check)
|
||||
- Re-authentication uses signInWithPassword with current password before allowing updateUser
|
||||
- Supabase getUser() returns current user email needed for re-auth signInWithPassword call
|
||||
- Password validation: check match and minimum length (6 chars) before making API calls
|
||||
- Clear form fields after successful password update for security
|
||||
- Settings link in navbar uses neutral zinc colors to distinguish from admin/action links
|
||||
---
|
||||
|
||||
## 2026-01-22 - US-042
|
||||
- What was implemented: Password reset modal that automatically appears when a recovery token is detected in the URL
|
||||
- Files changed:
|
||||
- src/components/PasswordResetModal.tsx - new client component with modal that detects recovery tokens from URL hash, sets session, and provides password reset form
|
||||
- src/app/login/page.tsx - integrated PasswordResetModal component on the login page
|
||||
- **Learnings for future iterations:**
|
||||
- PasswordResetModal is a standalone component that can be placed on any page to detect recovery tokens
|
||||
- Use window.history.replaceState to clean the URL hash after extracting the token (prevents re-triggering on refresh)
|
||||
- Separate tokenError state from form error state to show different UI (expired link vs. form validation)
|
||||
- Modal uses fixed positioning with z-50 to overlay above page content
|
||||
- After successful password update, sign out the user and redirect to login with success message (same as reset-password page)
|
||||
- The modal coexists with the existing /reset-password page - both handle recovery tokens but in different UX patterns
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,161 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [currentPassword, setCurrentPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [success, setSuccess] = useState('')
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setSuccess('')
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError('New passwords do not match.')
|
||||
return
|
||||
}
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
setError('New password must be at least 6 characters.')
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
const supabase = createClient()
|
||||
|
||||
// Re-authenticate with current password
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
if (!user?.email) {
|
||||
setError('Unable to verify current user.')
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const { error: signInError } = await supabase.auth.signInWithPassword({
|
||||
email: user.email,
|
||||
password: currentPassword,
|
||||
})
|
||||
|
||||
if (signInError) {
|
||||
setError('Current password is incorrect.')
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Update to new password
|
||||
const { error: updateError } = await supabase.auth.updateUser({
|
||||
password: newPassword,
|
||||
})
|
||||
|
||||
if (updateError) {
|
||||
setError(updateError.message)
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
setSuccess('Password updated successfully.')
|
||||
setCurrentPassword('')
|
||||
setNewPassword('')
|
||||
setConfirmPassword('')
|
||||
} catch {
|
||||
setError('An unexpected error occurred.')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-50 mb-8">
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<div className="max-w-md">
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50 mb-4">
|
||||
Change Password
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleChangePassword} className="space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="rounded-md bg-green-50 p-3 text-sm text-green-700 dark:bg-green-900/30 dark:text-green-400">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="currentPassword"
|
||||
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1"
|
||||
>
|
||||
Current Password
|
||||
</label>
|
||||
<input
|
||||
id="currentPassword"
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-300 px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 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-100 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="newPassword"
|
||||
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1"
|
||||
>
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
id="newPassword"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-300 px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 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-100 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="confirmPassword"
|
||||
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1"
|
||||
>
|
||||
Confirm New Password
|
||||
</label>
|
||||
<input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
className="w-full rounded-md border border-zinc-300 px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 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-100 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:focus:ring-offset-zinc-900"
|
||||
>
|
||||
{isLoading ? 'Updating...' : 'Update Password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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,6 +27,7 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
.single()
|
||||
|
||||
if (error || !project) {
|
||||
<<<<<<< HEAD
|
||||
notFound()
|
||||
}
|
||||
|
||||
|
|
@ -47,9 +47,15 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
<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">
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
<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"
|
||||
|
|
@ -64,10 +70,37 @@ 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're looking for doesn't exist or you don'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>
|
||||
<<<<<<< HEAD
|
||||
</header>
|
||||
|
||||
<div className="flex-1">
|
||||
|
|
@ -76,7 +109,22 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
initialData={flowchartData}
|
||||
needsMigration={needsMigration}
|
||||
/>
|
||||
</div>
|
||||
=======
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const flowchartData = (project.flowchart_data || {
|
||||
nodes: [],
|
||||
edges: [],
|
||||
}) as FlowchartData
|
||||
|
||||
return (
|
||||
<FlowchartEditor
|
||||
projectId={project.id}
|
||||
projectName={project.name}
|
||||
initialData={flowchartData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,130 +1,25 @@
|
|||
'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'
|
||||
import PasswordResetModal from '@/components/PasswordResetModal'
|
||||
|
||||
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">
|
||||
<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">
|
||||
Sign in to your account
|
||||
Loading...
|
||||
</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>
|
||||
<LoginForm />
|
||||
</Suspense>
|
||||
<PasswordResetModal />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,5 @@
|
|||
import Image from "next/image";
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
redirect('/dashboard')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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">
|
||||
<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">
|
||||
Complete your account setup
|
||||
Loading...
|
||||
</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>
|
||||
<SignupForm />
|
||||
</Suspense>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -29,6 +29,12 @@ export default function Navbar({ userEmail, isAdmin }: NavbarProps) {
|
|||
Invite User
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href="/dashboard/settings"
|
||||
className="text-sm font-medium text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
<span className="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{userEmail}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { createClient } from '@/lib/supabase/client'
|
||||
|
||||
export default function PasswordResetModal() {
|
||||
const router = useRouter()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [tokenError, setTokenError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleTokenFromUrl = async () => {
|
||||
const hash = window.location.hash
|
||||
if (!hash) return
|
||||
|
||||
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 === 'recovery') {
|
||||
const supabase = createClient()
|
||||
const { error } = await supabase.auth.setSession({
|
||||
access_token: accessToken,
|
||||
refresh_token: refreshToken,
|
||||
})
|
||||
|
||||
if (error) {
|
||||
setTokenError('Invalid or expired reset link. Please request a new password reset.')
|
||||
return
|
||||
}
|
||||
|
||||
// Clear hash from URL without reloading
|
||||
window.history.replaceState(null, '', window.location.pathname + window.location.search)
|
||||
setIsOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
handleTokenFromUrl()
|
||||
}, [])
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match')
|
||||
return
|
||||
}
|
||||
|
||||
if (password.length < 6) {
|
||||
setError('Password must be at least 6 characters')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
const supabase = createClient()
|
||||
|
||||
const { error: updateError } = await supabase.auth.updateUser({
|
||||
password,
|
||||
})
|
||||
|
||||
if (updateError) {
|
||||
setError(updateError.message)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
await supabase.auth.signOut()
|
||||
|
||||
setIsOpen(false)
|
||||
router.push('/login?message=password_reset_success')
|
||||
}
|
||||
|
||||
if (tokenError) {
|
||||
return (
|
||||
<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-800">
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
|
||||
Reset link expired
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{tokenError}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setTokenError(null)}
|
||||
className="mt-4 w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<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-800">
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
|
||||
Set new password
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
Enter your new password below.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="mt-4 space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-50 p-3 dark:bg-red-900/20">
|
||||
<p className="text-sm text-red-700 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="reset-password"
|
||||
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
New password
|
||||
</label>
|
||||
<input
|
||||
id="reset-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="reset-confirm-password"
|
||||
className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Confirm new password
|
||||
</label>
|
||||
<input
|
||||
id="reset-confirm-password"
|
||||
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>
|
||||
|
||||
<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-800"
|
||||
>
|
||||
{loading ? 'Updating password...' : 'Update password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
'use client'
|
||||
|
||||
<<<<<<< HEAD
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import Combobox from '@/components/editor/Combobox'
|
||||
import type { ComboboxItem } from '@/components/editor/Combobox'
|
||||
import { useEditorContext } from '@/components/editor/EditorContext'
|
||||
=======
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
import type { Condition } from '@/types/flowchart'
|
||||
|
||||
type ConditionEditorProps = {
|
||||
edgeId: string
|
||||
<<<<<<< HEAD
|
||||
condition: Condition | undefined
|
||||
onChange: (edgeId: string, condition: Condition | undefined) => void
|
||||
onClose: () => void
|
||||
|
|
@ -215,10 +220,133 @@ export default function ConditionEditor({
|
|||
{hasInvalidReference && (
|
||||
<div className="mt-1 text-xs text-orange-600 dark:text-orange-400">
|
||||
Variable not found
|
||||
=======
|
||||
condition?: Condition
|
||||
onSave: (edgeId: string, condition: Condition) => void
|
||||
onRemove: (edgeId: string) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const OPERATORS: Condition['operator'][] = ['>', '<', '==', '>=', '<=', '!=']
|
||||
|
||||
export default function ConditionEditor({
|
||||
edgeId,
|
||||
condition,
|
||||
onSave,
|
||||
onRemove,
|
||||
onCancel,
|
||||
}: ConditionEditorProps) {
|
||||
const [variableName, setVariableName] = useState(condition?.variableName ?? '')
|
||||
const [operator, setOperator] = useState<Condition['operator']>(condition?.operator ?? '==')
|
||||
const [value, setValue] = useState(condition?.value ?? 0)
|
||||
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onCancel()
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [onCancel])
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
if (!variableName.trim()) return
|
||||
onSave(edgeId, {
|
||||
variableName: variableName.trim(),
|
||||
operator,
|
||||
value,
|
||||
})
|
||||
}, [edgeId, variableName, operator, value, onSave])
|
||||
|
||||
const handleRemove = useCallback(() => {
|
||||
onRemove(edgeId)
|
||||
}, [edgeId, onRemove])
|
||||
|
||||
const hasExistingCondition = !!condition
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div
|
||||
className="w-full max-w-md rounded-lg border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="mb-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{hasExistingCondition ? 'Edit Condition' : 'Add Condition'}
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Variable Name Input */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="variableName"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Variable Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="variableName"
|
||||
value={variableName}
|
||||
onChange={(e) => setVariableName(e.target.value)}
|
||||
placeholder="e.g., score, health, affection"
|
||||
autoFocus
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Operator Dropdown */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="operator"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Operator
|
||||
</label>
|
||||
<select
|
||||
id="operator"
|
||||
value={operator}
|
||||
onChange={(e) => setOperator(e.target.value as Condition['operator'])}
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
|
||||
>
|
||||
{OPERATORS.map((op) => (
|
||||
<option key={op} value={op}>
|
||||
{op === '==' ? '== (equals)' : op === '!=' ? '!= (not equals)' : op === '>' ? '> (greater than)' : op === '<' ? '< (less than)' : op === '>=' ? '>= (greater or equal)' : '<= (less or equal)'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Value Number Input */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="value"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Value
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="value"
|
||||
value={value}
|
||||
onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{variableName.trim() && (
|
||||
<div className="rounded-md border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-600 dark:bg-zinc-700">
|
||||
<span className="text-sm text-zinc-600 dark:text-zinc-300">
|
||||
Condition: <code className="font-mono text-blue-600 dark:text-blue-400">{variableName.trim()} {operator} {value}</code>
|
||||
</span>
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
{/* Inline add form */}
|
||||
{showAddForm && (
|
||||
<div className="mb-3 rounded border border-zinc-300 bg-zinc-50 p-2 dark:border-zinc-600 dark:bg-zinc-900">
|
||||
|
|
@ -315,6 +443,38 @@ export default function ConditionEditor({
|
|||
>
|
||||
Done
|
||||
</button>
|
||||
=======
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div>
|
||||
{hasExistingCondition && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemove}
|
||||
className="rounded-md border border-red-300 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="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-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!variableName.trim()}
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useEffect } from 'react'
|
||||
|
||||
export type ContextMenuType = 'canvas' | 'node' | 'edge'
|
||||
|
||||
type ContextMenuProps = {
|
||||
x: number
|
||||
y: number
|
||||
type: ContextMenuType
|
||||
onClose: () => void
|
||||
onAddDialogue?: () => void
|
||||
onAddChoice?: () => void
|
||||
onAddVariable?: () => void
|
||||
onDelete?: () => void
|
||||
onAddCondition?: () => void
|
||||
}
|
||||
|
||||
export default function ContextMenu({
|
||||
x,
|
||||
y,
|
||||
type,
|
||||
onClose,
|
||||
onAddDialogue,
|
||||
onAddChoice,
|
||||
onAddVariable,
|
||||
onDelete,
|
||||
onAddCondition,
|
||||
}: ContextMenuProps) {
|
||||
// Close menu on Escape key
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
},
|
||||
[onClose]
|
||||
)
|
||||
|
||||
// Close menu on click outside
|
||||
const handleClickOutside = useCallback(() => {
|
||||
onClose()
|
||||
}, [onClose])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown)
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
}, [handleKeyDown, handleClickOutside])
|
||||
|
||||
const menuItemClass =
|
||||
'w-full px-4 py-2 text-left text-sm hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer'
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed z-50 min-w-40 rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-800"
|
||||
style={{ left: x, top: y }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{type === 'canvas' && (
|
||||
<>
|
||||
<button
|
||||
className={`${menuItemClass} text-blue-600 dark:text-blue-400`}
|
||||
onClick={() => {
|
||||
onAddDialogue?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Add Dialogue
|
||||
</button>
|
||||
<button
|
||||
className={`${menuItemClass} text-green-600 dark:text-green-400`}
|
||||
onClick={() => {
|
||||
onAddChoice?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Add Choice
|
||||
</button>
|
||||
<button
|
||||
className={`${menuItemClass} text-orange-600 dark:text-orange-400`}
|
||||
onClick={() => {
|
||||
onAddVariable?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Add Variable
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{type === 'node' && (
|
||||
<button
|
||||
className={`${menuItemClass} text-red-600 dark:text-red-400`}
|
||||
onClick={() => {
|
||||
onDelete?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
|
||||
{type === 'edge' && (
|
||||
<>
|
||||
<button
|
||||
className={`${menuItemClass} text-red-600 dark:text-red-400`}
|
||||
onClick={() => {
|
||||
onDelete?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className={menuItemClass}
|
||||
onClick={() => {
|
||||
onAddCondition?.()
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
Add Condition
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
'use client'
|
||||
|
||||
export type ValidationIssue = {
|
||||
nodeId: string
|
||||
nodeType: 'dialogue' | 'choice' | 'variable' | 'edge'
|
||||
contentSnippet: string
|
||||
referenceType: 'character' | 'variable'
|
||||
referenceId: string
|
||||
}
|
||||
|
||||
type ExportValidationModalProps = {
|
||||
issues: ValidationIssue[]
|
||||
onExportAnyway: () => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
export default function ExportValidationModal({
|
||||
issues,
|
||||
onExportAnyway,
|
||||
onCancel,
|
||||
}: ExportValidationModalProps) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="mx-4 w-full max-w-lg rounded-lg bg-white shadow-xl dark:bg-zinc-800">
|
||||
<div className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-700">
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
Undefined References Found
|
||||
</h2>
|
||||
<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
The following nodes reference characters or variables that are no longer defined.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[50vh] overflow-y-auto px-6 py-4">
|
||||
<ul className="space-y-3">
|
||||
{issues.map((issue, index) => (
|
||||
<li
|
||||
key={`${issue.nodeId}-${issue.referenceId}-${index}`}
|
||||
className="rounded-md border border-orange-200 bg-orange-50 px-3 py-2 dark:border-orange-800 dark:bg-orange-950"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex items-center rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
|
||||
{issue.nodeType}
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded bg-orange-200 px-1.5 py-0.5 text-xs font-medium text-orange-800 dark:bg-orange-800 dark:text-orange-200">
|
||||
undefined {issue.referenceType}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 truncate text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{issue.contentSnippet}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 border-t border-zinc-200 px-6 py-4 dark:border-zinc-700">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="rounded border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onExportAnyway}
|
||||
className="rounded bg-orange-500 px-4 py-2 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Export anyway
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
'use client'
|
||||
|
||||
<<<<<<< HEAD
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import Combobox from '@/components/editor/Combobox'
|
||||
import type { ComboboxItem } from '@/components/editor/Combobox'
|
||||
|
|
@ -208,10 +209,143 @@ export default function OptionConditionEditor({
|
|||
{hasInvalidReference && (
|
||||
<div className="mt-1 text-xs text-orange-600 dark:text-orange-400">
|
||||
Variable not found
|
||||
=======
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import type { Condition } from '@/types/flowchart'
|
||||
|
||||
type OptionConditionEditorProps = {
|
||||
optionId: string
|
||||
optionLabel: string
|
||||
condition?: Condition
|
||||
onSave: (optionId: string, condition: Condition) => void
|
||||
onRemove: (optionId: string) => void
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const OPERATORS: Condition['operator'][] = ['>', '<', '==', '>=', '<=', '!=']
|
||||
|
||||
export default function OptionConditionEditor({
|
||||
optionId,
|
||||
optionLabel,
|
||||
condition,
|
||||
onSave,
|
||||
onRemove,
|
||||
onCancel,
|
||||
}: OptionConditionEditorProps) {
|
||||
const [variableName, setVariableName] = useState(condition?.variableName ?? '')
|
||||
const [operator, setOperator] = useState<Condition['operator']>(condition?.operator ?? '==')
|
||||
const [value, setValue] = useState(condition?.value ?? 0)
|
||||
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onCancel()
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [onCancel])
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
if (!variableName.trim()) return
|
||||
onSave(optionId, {
|
||||
variableName: variableName.trim(),
|
||||
operator,
|
||||
value,
|
||||
})
|
||||
}, [optionId, variableName, operator, value, onSave])
|
||||
|
||||
const handleRemove = useCallback(() => {
|
||||
onRemove(optionId)
|
||||
}, [optionId, onRemove])
|
||||
|
||||
const hasExistingCondition = !!condition
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div
|
||||
className="w-full max-w-md rounded-lg border border-zinc-200 bg-white p-6 shadow-xl dark:border-zinc-700 dark:bg-zinc-800"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h3 className="mb-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{hasExistingCondition ? 'Edit Option Condition' : 'Add Option Condition'}
|
||||
</h3>
|
||||
<p className="mb-4 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
Option: {optionLabel || '(unnamed)'}
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Variable Name Input */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="optionVariableName"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Variable Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="optionVariableName"
|
||||
value={variableName}
|
||||
onChange={(e) => setVariableName(e.target.value)}
|
||||
placeholder="e.g., affection, score, health"
|
||||
autoFocus
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100 dark:placeholder-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Operator Dropdown */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="optionOperator"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Operator
|
||||
</label>
|
||||
<select
|
||||
id="optionOperator"
|
||||
value={operator}
|
||||
onChange={(e) => setOperator(e.target.value as Condition['operator'])}
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
|
||||
>
|
||||
{OPERATORS.map((op) => (
|
||||
<option key={op} value={op}>
|
||||
{op === '==' ? '== (equals)' : op === '!=' ? '!= (not equals)' : op === '>' ? '> (greater than)' : op === '<' ? '< (less than)' : op === '>=' ? '>= (greater or equal)' : '<= (less or equal)'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Value Number Input */}
|
||||
<div>
|
||||
<label
|
||||
htmlFor="optionValue"
|
||||
className="mb-1 block text-sm font-medium text-zinc-700 dark:text-zinc-300"
|
||||
>
|
||||
Value
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="optionValue"
|
||||
value={value}
|
||||
onChange={(e) => setValue(parseFloat(e.target.value) || 0)}
|
||||
className="w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
{variableName.trim() && (
|
||||
<div className="rounded-md border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-600 dark:bg-zinc-700">
|
||||
<span className="text-sm text-zinc-600 dark:text-zinc-300">
|
||||
Show option when: <code className="font-mono text-amber-600 dark:text-amber-400">{variableName.trim()} {operator} {value}</code>
|
||||
</span>
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
{/* Inline add form */}
|
||||
{showAddForm && (
|
||||
<div className="mb-3 rounded border border-zinc-300 bg-zinc-50 p-2 dark:border-zinc-600 dark:bg-zinc-900">
|
||||
|
|
@ -308,6 +442,38 @@ export default function OptionConditionEditor({
|
|||
>
|
||||
Done
|
||||
</button>
|
||||
=======
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 flex justify-between">
|
||||
<div>
|
||||
{hasExistingCondition && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemove}
|
||||
className="rounded-md border border-red-300 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="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-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!variableName.trim()}
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,13 @@ type ToolbarProps = {
|
|||
onAddVariable: () => void
|
||||
onSave: () => void
|
||||
onExport: () => void
|
||||
onExportRenpy: () => void
|
||||
onImport: () => void
|
||||
<<<<<<< HEAD
|
||||
onProjectSettings: () => void
|
||||
=======
|
||||
isSaving?: boolean
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
}
|
||||
|
||||
export default function Toolbar({
|
||||
|
|
@ -16,8 +21,13 @@ export default function Toolbar({
|
|||
onAddVariable,
|
||||
onSave,
|
||||
onExport,
|
||||
onExportRenpy,
|
||||
onImport,
|
||||
<<<<<<< HEAD
|
||||
onProjectSettings,
|
||||
=======
|
||||
isSaving = false,
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
}: ToolbarProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
|
||||
|
|
@ -54,9 +64,32 @@ export default function Toolbar({
|
|||
</button>
|
||||
<button
|
||||
onClick={onSave}
|
||||
className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
disabled={isSaving}
|
||||
className="flex items-center gap-1.5 rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Save
|
||||
{isSaving && (
|
||||
<svg
|
||||
className="h-4 w-4 animate-spin"
|
||||
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>
|
||||
)}
|
||||
{isSaving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={onExport}
|
||||
|
|
@ -64,6 +97,12 @@ export default function Toolbar({
|
|||
>
|
||||
Export
|
||||
</button>
|
||||
<button
|
||||
onClick={onExportRenpy}
|
||||
className="rounded border border-purple-400 bg-purple-50 px-3 py-1.5 text-sm font-medium text-purple-700 hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-purple-500 dark:bg-purple-900/30 dark:text-purple-300 dark:hover:bg-purple-900/50 dark:focus:ring-offset-zinc-800"
|
||||
>
|
||||
Export to Ren'Py
|
||||
</button>
|
||||
<button
|
||||
onClick={onImport}
|
||||
className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
'use client'
|
||||
|
||||
import {
|
||||
BaseEdge,
|
||||
EdgeLabelRenderer,
|
||||
EdgeProps,
|
||||
getSmoothStepPath,
|
||||
} from 'reactflow'
|
||||
import type { Condition } from '@/types/flowchart'
|
||||
|
||||
type ConditionalEdgeData = {
|
||||
condition?: Condition
|
||||
}
|
||||
|
||||
export default function ConditionalEdge({
|
||||
id,
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
data,
|
||||
markerEnd,
|
||||
selected,
|
||||
}: EdgeProps<ConditionalEdgeData>) {
|
||||
const [edgePath, labelX, labelY] = getSmoothStepPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourcePosition,
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition,
|
||||
})
|
||||
|
||||
const hasCondition = !!data?.condition
|
||||
|
||||
// Format condition as readable label
|
||||
const conditionLabel = hasCondition
|
||||
? `${data.condition!.variableName} ${data.condition!.operator} ${data.condition!.value}`
|
||||
: null
|
||||
|
||||
return (
|
||||
<>
|
||||
<BaseEdge
|
||||
id={id}
|
||||
path={edgePath}
|
||||
markerEnd={markerEnd}
|
||||
style={{
|
||||
strokeDasharray: hasCondition ? '5 5' : undefined,
|
||||
stroke: selected ? '#3b82f6' : hasCondition ? '#f59e0b' : '#64748b',
|
||||
strokeWidth: selected ? 2 : 1.5,
|
||||
}}
|
||||
/>
|
||||
{conditionLabel && (
|
||||
<EdgeLabelRenderer>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
||||
pointerEvents: 'all',
|
||||
}}
|
||||
className="rounded border border-amber-300 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800 dark:border-amber-600 dark:bg-amber-900 dark:text-amber-200"
|
||||
>
|
||||
{conditionLabel}
|
||||
</div>
|
||||
</EdgeLabelRenderer>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,11 +1,19 @@
|
|||
'use client'
|
||||
|
||||
<<<<<<< HEAD
|
||||
import { useCallback, useMemo, useState, ChangeEvent } from 'react'
|
||||
import { Handle, Position, NodeProps, useReactFlow } from 'reactflow'
|
||||
import { nanoid } from 'nanoid'
|
||||
import { useEditorContext } from '@/components/editor/EditorContext'
|
||||
import OptionConditionEditor from '@/components/editor/OptionConditionEditor'
|
||||
import type { Condition } from '@/types/flowchart'
|
||||
=======
|
||||
import { useCallback, useState, ChangeEvent } from 'react'
|
||||
import { Handle, Position, NodeProps, useReactFlow } from 'reactflow'
|
||||
import { nanoid } from 'nanoid'
|
||||
import type { Condition } from '@/types/flowchart'
|
||||
import OptionConditionEditor from '@/components/editor/OptionConditionEditor'
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
|
||||
type ChoiceOption = {
|
||||
id: string
|
||||
|
|
@ -23,7 +31,10 @@ const MAX_OPTIONS = 6
|
|||
|
||||
export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
|
||||
const { setNodes } = useReactFlow()
|
||||
<<<<<<< HEAD
|
||||
const { variables } = useEditorContext()
|
||||
=======
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
const [editingConditionOptionId, setEditingConditionOptionId] = useState<string | null>(null)
|
||||
|
||||
const updatePrompt = useCallback(
|
||||
|
|
@ -123,6 +134,7 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
|
|||
[id, data.options.length, setNodes]
|
||||
)
|
||||
|
||||
<<<<<<< HEAD
|
||||
const editingOption = useMemo(() => {
|
||||
if (!editingConditionOptionId) return null
|
||||
return data.options.find((opt) => opt.id === editingConditionOptionId) || null
|
||||
|
|
@ -136,6 +148,59 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
|
|||
[variables]
|
||||
)
|
||||
|
||||
=======
|
||||
const handleSaveCondition = useCallback(
|
||||
(optionId: string, condition: Condition) => {
|
||||
setNodes((nodes) =>
|
||||
nodes.map((node) =>
|
||||
node.id === id
|
||||
? {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
options: node.data.options.map((opt: ChoiceOption) =>
|
||||
opt.id === optionId ? { ...opt, condition } : opt
|
||||
),
|
||||
},
|
||||
}
|
||||
: node
|
||||
)
|
||||
)
|
||||
setEditingConditionOptionId(null)
|
||||
},
|
||||
[id, setNodes]
|
||||
)
|
||||
|
||||
const handleRemoveCondition = useCallback(
|
||||
(optionId: string) => {
|
||||
setNodes((nodes) =>
|
||||
nodes.map((node) =>
|
||||
node.id === id
|
||||
? {
|
||||
...node,
|
||||
data: {
|
||||
...node.data,
|
||||
options: node.data.options.map((opt: ChoiceOption) => {
|
||||
if (opt.id !== optionId) return opt
|
||||
const updated = { ...opt }
|
||||
delete updated.condition
|
||||
return updated
|
||||
}),
|
||||
},
|
||||
}
|
||||
: node
|
||||
)
|
||||
)
|
||||
setEditingConditionOptionId(null)
|
||||
},
|
||||
[id, setNodes]
|
||||
)
|
||||
|
||||
const editingOption = editingConditionOptionId
|
||||
? data.options.find((opt) => opt.id === editingConditionOptionId)
|
||||
: null
|
||||
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
return (
|
||||
<>
|
||||
<div className="min-w-[220px] rounded-lg border-2 border-green-500 bg-green-50 p-3 shadow-md dark:border-green-400 dark:bg-green-950">
|
||||
|
|
@ -228,6 +293,7 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
{editingOption && (
|
||||
<OptionConditionEditor
|
||||
condition={editingOption.condition}
|
||||
|
|
@ -236,5 +302,97 @@ export default function ChoiceNode({ id, data }: NodeProps<ChoiceNodeData>) {
|
|||
/>
|
||||
)}
|
||||
</>
|
||||
=======
|
||||
<input
|
||||
type="text"
|
||||
value={data.prompt || ''}
|
||||
onChange={updatePrompt}
|
||||
placeholder="What do you choose?"
|
||||
className="mb-3 w-full rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
{data.options.map((option, index) => (
|
||||
<div key={option.id}>
|
||||
<div className="relative flex items-center gap-1">
|
||||
<input
|
||||
type="text"
|
||||
value={option.label}
|
||||
onChange={(e) => updateOptionLabel(option.id, e.target.value)}
|
||||
placeholder={`Option ${index + 1}`}
|
||||
className="flex-1 rounded border border-green-300 bg-white px-2 py-1 text-sm focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-green-600 dark:bg-zinc-800 dark:text-white dark:placeholder-zinc-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingConditionOptionId(option.id)}
|
||||
className={`flex h-6 w-6 items-center justify-center rounded text-xs ${
|
||||
option.condition
|
||||
? 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/50 dark:text-amber-300 dark:hover:bg-amber-900/70'
|
||||
: 'text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600 dark:text-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-300'
|
||||
}`}
|
||||
title={option.condition ? `Condition: ${option.condition.variableName} ${option.condition.operator} ${option.condition.value}` : 'Add condition'}
|
||||
>
|
||||
{option.condition ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeOption(option.id)}
|
||||
disabled={data.options.length <= MIN_OPTIONS}
|
||||
className="flex h-6 w-6 items-center justify-center rounded text-red-500 hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:hover:bg-red-900/30"
|
||||
title="Remove option"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Bottom}
|
||||
id={`option-${index}`}
|
||||
className="!h-3 !w-3 !border-2 !border-green-500 !bg-white dark:!bg-zinc-800"
|
||||
style={{
|
||||
left: `${((index + 1) / (data.options.length + 1)) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{option.condition && (
|
||||
<div className="ml-1 mt-0.5 flex items-center gap-1">
|
||||
<span className="inline-flex items-center rounded-sm bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-800 dark:bg-amber-900/40 dark:text-amber-300">
|
||||
if {option.condition.variableName} {option.condition.operator} {option.condition.value}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addOption}
|
||||
disabled={data.options.length >= MAX_OPTIONS}
|
||||
className="mt-2 flex w-full items-center justify-center gap-1 rounded border border-dashed border-green-400 py-1 text-sm text-green-600 hover:bg-green-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent dark:border-green-500 dark:text-green-400 dark:hover:bg-green-900/30"
|
||||
title="Add option"
|
||||
>
|
||||
+ Add Option
|
||||
</button>
|
||||
|
||||
{editingOption && (
|
||||
<OptionConditionEditor
|
||||
optionId={editingOption.id}
|
||||
optionLabel={editingOption.label}
|
||||
condition={editingOption.condition}
|
||||
onSave={handleSaveCondition}
|
||||
onRemove={handleRemoveCondition}
|
||||
onCancel={() => setEditingConditionOptionId(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ export type Position = {
|
|||
y: number;
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Character type: represents a defined character in the project
|
||||
export type Character = {
|
||||
id: string;
|
||||
|
|
@ -27,6 +28,13 @@ export type Condition = {
|
|||
variableId?: string;
|
||||
operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
|
||||
value: number | string | boolean;
|
||||
=======
|
||||
// Condition type for conditional edges and choice options
|
||||
export type Condition = {
|
||||
variableName: string;
|
||||
operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
|
||||
value: number;
|
||||
>>>>>>> a6a966ce8f445a7ff2c20d92afd65214567eb411
|
||||
};
|
||||
|
||||
// DialogueNode type: represents character speech/dialogue
|
||||
|
|
|
|||
|
|
@ -0,0 +1,530 @@
|
|||
# PRD: Real-time Collaboration & Character/Variable Management
|
||||
|
||||
## Introduction
|
||||
|
||||
Two major features to enhance the Visual Novel Flowchart Editor:
|
||||
|
||||
1. **Real-time Collaboration** - Enable multiple users to work on the same flowchart simultaneously with presence indicators, live cursors, CRDT-based conflict-free synchronization, and a full audit trail with revert capability.
|
||||
|
||||
2. **Character & Variable Management** - Replace free-text fields for speaker names and variable names with a centralized management system. Users define characters and variables once per project, then select from dropdowns throughout the flowchart, preventing typos and ensuring consistency.
|
||||
|
||||
## Goals
|
||||
|
||||
- Enable simultaneous multi-user editing of flowcharts with zero data loss
|
||||
- Provide real-time awareness of collaborators (presence, cursors, editing state)
|
||||
- Maintain a full audit trail of all changes with the ability to revert
|
||||
- Centralize character and variable definitions per project
|
||||
- Replace free-text inputs with searchable dropdowns for characters/variables
|
||||
- Auto-migrate existing projects with free-text values to the new system
|
||||
- Allow importing characters/variables from other projects
|
||||
|
||||
---
|
||||
|
||||
## User Stories
|
||||
|
||||
---
|
||||
|
||||
### FEATURE 1: Real-time Collaboration
|
||||
|
||||
---
|
||||
|
||||
### US-043: Database schema for collaboration sessions and audit trail
|
||||
**Description:** As a developer, I need database tables to track active collaboration sessions and store the full change history for projects.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Create migration adding `project_collaborators` table: id (uuid), project_id (references projects), user_id (references profiles), role ('owner' | 'editor' | 'viewer'), invited_at (timestamptz), accepted_at (timestamptz)
|
||||
- [ ] Create `collaboration_sessions` table: id (uuid), project_id, user_id, cursor_position (jsonb), selected_node_id (text nullable), connected_at (timestamptz), last_heartbeat (timestamptz)
|
||||
- [ ] Create `audit_trail` table: id (uuid), project_id, user_id, action_type (text: 'node_add' | 'node_update' | 'node_delete' | 'edge_add' | 'edge_update' | 'edge_delete'), entity_id (text), previous_state (jsonb), new_state (jsonb), created_at (timestamptz)
|
||||
- [ ] Add RLS policies: collaborators can access sessions/audit for projects they belong to
|
||||
- [ ] Add index on audit_trail(project_id, created_at) for efficient history queries
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Complexity:** L
|
||||
|
||||
---
|
||||
|
||||
### US-044: Project sharing and collaborator management
|
||||
**Description:** As a project owner, I want to invite other users to collaborate on my project so that we can work together.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Add "Share" button in the editor toolbar
|
||||
- [ ] Share modal displays current collaborators with roles (owner/editor/viewer)
|
||||
- [ ] Owner can invite users by email with a selected role
|
||||
- [ ] Owner can change collaborator roles or remove collaborators
|
||||
- [ ] Invited users see shared projects on their dashboard with a "Shared with me" indicator
|
||||
- [ ] RLS policies updated so collaborators can read/write projects based on their role
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-043
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-045: Supabase Realtime channel and connection management
|
||||
**Description:** As a developer, I need a WebSocket connection layer using Supabase Realtime so that clients can exchange presence and change events in real time.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Create `lib/collaboration/realtime.ts` module
|
||||
- [ ] On editor mount, join a Supabase Realtime channel scoped to the project ID
|
||||
- [ ] Track connection state (connecting, connected, disconnected, reconnecting)
|
||||
- [ ] Implement heartbeat mechanism (update `last_heartbeat` every 30 seconds)
|
||||
- [ ] Auto-reconnect on network interruption with exponential backoff
|
||||
- [ ] Clean up session record on disconnect/unmount
|
||||
- [ ] Show connection status indicator in editor toolbar (green=connected, yellow=reconnecting, red=disconnected)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-043
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-046: Presence indicators for active collaborators
|
||||
**Description:** As a user, I want to see who else is currently viewing or editing the project so that I am aware of my collaborators.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Display a row of avatar circles in the editor toolbar showing connected users
|
||||
- [ ] Each avatar shows the user's display_name on hover (tooltip)
|
||||
- [ ] Each user is assigned a consistent color (derived from user ID hash)
|
||||
- [ ] Avatars appear when users join and disappear when they leave
|
||||
- [ ] Maximum 5 avatars shown with "+N" overflow indicator
|
||||
- [ ] Own avatar not shown in the list
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-045
|
||||
**Complexity:** S
|
||||
|
||||
---
|
||||
|
||||
### US-047: Live cursor positions on canvas
|
||||
**Description:** As a user, I want to see other collaborators' cursor positions on the canvas so that I can understand where they are working.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Broadcast local cursor position to the Realtime channel (throttled to 50ms)
|
||||
- [ ] Render remote cursors as colored arrows/pointers on the canvas with user name labels
|
||||
- [ ] Cursor color matches the user's assigned presence color
|
||||
- [ ] Remote cursors smoothly interpolate between position updates (no jumping)
|
||||
- [ ] Remote cursors fade out after 5 seconds of inactivity
|
||||
- [ ] Cursors are rendered in screen coordinates and properly transform with canvas zoom/pan
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-045, US-046
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-048: Integrate Yjs CRDT for conflict-free node/edge synchronization
|
||||
**Description:** As a developer, I need to integrate a CRDT library so that concurrent edits from multiple users merge automatically without data loss.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Install and configure Yjs with a Supabase-compatible provider (or WebSocket provider)
|
||||
- [ ] Create `lib/collaboration/crdt.ts` module wrapping Yjs document setup
|
||||
- [ ] Model flowchart nodes as a Y.Map keyed by node ID
|
||||
- [ ] Model flowchart edges as a Y.Map keyed by edge ID
|
||||
- [ ] Local React Flow state changes are synced to the Yjs document
|
||||
- [ ] Remote Yjs document changes update local React Flow state
|
||||
- [ ] Initial load populates Yjs document from database state
|
||||
- [ ] Periodic persistence of Yjs document state to Supabase (debounced 2 seconds)
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Dependencies:** US-045
|
||||
**Complexity:** L
|
||||
|
||||
---
|
||||
|
||||
### US-049: Node editing lock indicators
|
||||
**Description:** As a user, I want to see when another collaborator is actively editing a specific node so that I can avoid conflicts and wait for them to finish.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] When a user focuses/opens a node for editing, broadcast the node ID to the channel
|
||||
- [ ] Nodes being edited by others show a colored border matching the editor's presence color
|
||||
- [ ] A small label with the editor's name appears on the locked node
|
||||
- [ ] Other users can still view but see a "Being edited by [name]" indicator if they try to edit
|
||||
- [ ] Lock is released when the user clicks away, closes the node, or disconnects
|
||||
- [ ] Lock auto-expires after 60 seconds of inactivity as a safety measure
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-045, US-048
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-050: Join/leave notifications
|
||||
**Description:** As a user, I want to be notified when collaborators join or leave the editing session so that I stay aware of the team's activity.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Show a toast notification when a collaborator joins: "[Name] joined"
|
||||
- [ ] Show a toast notification when a collaborator leaves: "[Name] left"
|
||||
- [ ] Notifications use the collaborator's assigned color as an accent
|
||||
- [ ] Notifications auto-dismiss after 3 seconds (matches existing Toast behavior)
|
||||
- [ ] No notification shown for own join/leave events
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-045, US-046
|
||||
**Complexity:** S
|
||||
|
||||
---
|
||||
|
||||
### US-051: Audit trail recording
|
||||
**Description:** As a developer, I need all node and edge changes to be recorded in the audit trail so that users can review history and revert changes.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Every node add/update/delete operation writes a record to `audit_trail` table
|
||||
- [ ] Every edge add/update/delete operation writes a record to `audit_trail` table
|
||||
- [ ] Records include `previous_state` (null for additions) and `new_state` (null for deletions)
|
||||
- [ ] Records include the acting user's ID and timestamp
|
||||
- [ ] Writes are batched/debounced to avoid excessive DB calls (max 1 write per second per entity)
|
||||
- [ ] Audit writes do not block the user's editing flow (fire-and-forget with error logging)
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Dependencies:** US-043, US-048
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-052: Activity history sidebar
|
||||
**Description:** As a user, I want to view a history of all changes made to the project so that I can see what collaborators have done and when.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Add "History" button to editor toolbar that opens a right sidebar panel
|
||||
- [ ] Sidebar displays a chronological list of changes with: user name, action type, entity description, timestamp
|
||||
- [ ] Entries are grouped by time period (Today, Yesterday, Earlier)
|
||||
- [ ] Each entry shows the user's presence color as an accent
|
||||
- [ ] Clicking an entry highlights/selects the affected node or edge on the canvas
|
||||
- [ ] Paginated loading (20 entries per page) with "Load more" button
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-051
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-053: Revert changes from audit trail
|
||||
**Description:** As a user, I want to revert a specific change from the history so that I can undo mistakes made by myself or collaborators.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Each entry in the activity history sidebar has a "Revert" button
|
||||
- [ ] Clicking "Revert" shows a confirmation dialog with before/after preview
|
||||
- [ ] Reverting a node addition deletes the node
|
||||
- [ ] Reverting a node update restores the previous state
|
||||
- [ ] Reverting a node deletion re-creates the node with its previous state
|
||||
- [ ] Reverting an edge change follows the same add/update/delete logic
|
||||
- [ ] The revert itself is recorded as a new audit trail entry
|
||||
- [ ] Reverted state is synced to all connected clients via CRDT
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-052, US-048
|
||||
**Complexity:** L
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
### FEATURE 2: Character & Variable Management
|
||||
|
||||
---
|
||||
|
||||
### US-054: Character and Variable TypeScript types
|
||||
**Description:** As a developer, I need TypeScript types for Character and Variable models so that the rest of the feature can be built with type safety.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Add `Character` type to `types/flowchart.ts`: id (string), name (string), color (string, hex), description (string, optional)
|
||||
- [ ] Add `Variable` type to `types/flowchart.ts`: id (string), name (string), type ('numeric' | 'string' | 'boolean'), initialValue (number | string | boolean), description (string, optional)
|
||||
- [ ] Update `FlowchartData` type to include `characters: Character[]` and `variables: Variable[]`
|
||||
- [ ] Update `DialogueNodeData` to add optional `characterId: string` field (alongside existing `speaker` for migration)
|
||||
- [ ] Update `Condition` type to add optional `variableId: string` field (alongside existing `variableName` for migration)
|
||||
- [ ] Update `VariableNodeData` to add optional `variableId: string` field (alongside existing `variableName` for migration)
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Complexity:** S
|
||||
|
||||
---
|
||||
|
||||
### US-055: Database schema update for characters and variables
|
||||
**Description:** As a developer, I need the database schema to store characters and variables as part of the project's flowchart data.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Create migration that documents the new JSONB structure (characters/variables arrays stored within `flowchart_data`)
|
||||
- [ ] Update the default value for `flowchart_data` column to include `characters: []` and `variables: []`
|
||||
- [ ] Existing projects with no characters/variables arrays continue to load (handled as empty arrays in app code)
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Dependencies:** US-054
|
||||
**Complexity:** S
|
||||
|
||||
---
|
||||
|
||||
### US-056: Character management UI in project settings
|
||||
**Description:** As a user, I want a dedicated page to manage my project's characters so that I can define them once and reuse them throughout the flowchart.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Add "Project Settings" button to editor toolbar
|
||||
- [ ] Project settings opens as a modal with "Characters" and "Variables" tabs
|
||||
- [ ] Characters tab shows a list of defined characters with name, color swatch, and description
|
||||
- [ ] "Add Character" button opens inline form with: name (required), color picker (required, defaults to random), description (optional)
|
||||
- [ ] Each character row has Edit and Delete buttons
|
||||
- [ ] Deleting a character that is referenced by nodes shows a warning: "This character is used in N nodes. Removing it will leave those nodes without a speaker."
|
||||
- [ ] Character names must be unique within the project (show validation error if duplicate)
|
||||
- [ ] Changes are saved to the flowchart data (same save mechanism as nodes/edges)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-054, US-055
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-057: Variable management UI in project settings
|
||||
**Description:** As a user, I want a dedicated page to manage my project's variables so that I can define them with types and initial values for use throughout the flowchart.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Variables tab in project settings modal shows a list of defined variables
|
||||
- [ ] Each variable displays: name, type badge (numeric/string/boolean), initial value, description
|
||||
- [ ] "Add Variable" button opens inline form with: name (required), type dropdown (required), initial value (required, input type matches selected type), description (optional)
|
||||
- [ ] Each variable row has Edit and Delete buttons
|
||||
- [ ] Deleting a variable that is referenced by nodes/edges shows a warning with usage count
|
||||
- [ ] Variable names must be unique within the project
|
||||
- [ ] Changes are saved to the flowchart data
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-054, US-055
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-058: Dialogue node speaker dropdown
|
||||
**Description:** As a user, I want to select a character from a dropdown in the dialogue node instead of typing a name so that I avoid typos and maintain consistency.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Replace the speaker text input in DialogueNode with a searchable dropdown (combobox)
|
||||
- [ ] Dropdown lists all characters defined in the project, showing color swatch + name
|
||||
- [ ] Selecting a character sets `characterId` on the node data
|
||||
- [ ] Dropdown includes an "Add new character..." option at the bottom
|
||||
- [ ] Clicking "Add new character..." opens a mini form inline (name + color) that creates the character and selects it
|
||||
- [ ] If node has a `characterId` that doesn't match any defined character, show orange warning border on the dropdown
|
||||
- [ ] Empty/unset speaker shows placeholder "Select speaker..."
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-056
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-059: Variable node variable dropdown
|
||||
**Description:** As a user, I want to select a variable from a dropdown in the variable node instead of typing a name so that I avoid typos and maintain consistency.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Replace the variableName text input in VariableNode with a searchable dropdown
|
||||
- [ ] Dropdown lists all variables defined in the project, showing type badge + name
|
||||
- [ ] Selecting a variable sets `variableId` on the node data
|
||||
- [ ] Dropdown includes "Add new variable..." option that opens inline creation form
|
||||
- [ ] If node references a variableId that doesn't match any defined variable, show orange warning border
|
||||
- [ ] Operation options (set/add/subtract) are filtered based on selected variable's type (add/subtract only for numeric)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-057
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-060: Edge condition variable dropdown
|
||||
**Description:** As a user, I want to select a variable from a dropdown when setting edge conditions so that I reference valid variables consistently.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Replace the variableName text input in ConditionEditor with a searchable dropdown
|
||||
- [ ] Dropdown lists all variables defined in the project, showing type badge + name
|
||||
- [ ] Selecting a variable sets `variableId` on the condition object
|
||||
- [ ] Dropdown includes "Add new variable..." option
|
||||
- [ ] If condition references an undefined variableId, show orange warning indicator
|
||||
- [ ] Operator options are filtered based on variable type (comparison operators for numeric, == and != for string/boolean)
|
||||
- [ ] Value input adapts to variable type (number input for numeric, text for string, checkbox for boolean)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-057
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-061: Choice option condition variable dropdown
|
||||
**Description:** As a user, I want to select a variable from a dropdown when setting choice option conditions so that I reference valid variables consistently.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Replace the variableName text input in OptionConditionEditor with a searchable dropdown
|
||||
- [ ] Dropdown lists all variables defined in the project, showing type badge + name
|
||||
- [ ] Selecting a variable sets `variableId` on the option's condition object
|
||||
- [ ] Dropdown includes "Add new variable..." option
|
||||
- [ ] If condition references an undefined variableId, show orange warning indicator
|
||||
- [ ] Operator and value inputs adapt to variable type (same behavior as US-060)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-057
|
||||
**Complexity:** S
|
||||
|
||||
---
|
||||
|
||||
### US-062: Auto-migration of existing free-text values
|
||||
**Description:** As a user, I want my existing projects to automatically create character and variable definitions from free-text values so that I don't have to manually re-enter them.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] On project load, if `characters` array is empty but nodes have `speaker` values, auto-create Character entries from unique speaker names
|
||||
- [ ] Auto-created characters get randomly assigned colors and the speaker text as name
|
||||
- [ ] On project load, if `variables` array is empty but nodes/edges have `variableName` values, auto-create Variable entries (default type: numeric, initial value: 0)
|
||||
- [ ] After auto-creation, update all nodes to set `characterId`/`variableId` references pointing to the new entries
|
||||
- [ ] Show a toast notification: "Auto-imported N characters and M variables from existing data"
|
||||
- [ ] Migration only runs once (presence of characters/variables arrays, even if empty, means migration already happened)
|
||||
- [ ] Typecheck passes
|
||||
|
||||
**Dependencies:** US-054, US-058, US-059
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-063: Import characters/variables from another project
|
||||
**Description:** As a user, I want to import character and variable definitions from another project so that I can reuse them without redefining everything.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Add "Import from project" button in both Characters and Variables tabs of project settings
|
||||
- [ ] Button opens a modal listing the user's other projects
|
||||
- [ ] Selecting a project shows its characters (or variables) with checkboxes for selection
|
||||
- [ ] User can select which entries to import (select all / none / individual)
|
||||
- [ ] Imported entries are added to the current project (duplicates by name are skipped with a warning)
|
||||
- [ ] Imported characters keep their colors; imported variables keep their types and initial values
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-056, US-057
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-064: Export validation for undefined references
|
||||
**Description:** As a user, I want to be warned before exporting if any nodes reference undefined characters or variables so that I can fix issues before generating output.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Before export, scan all nodes and edges for `characterId`/`variableId` references that don't match defined entries
|
||||
- [ ] If issues found, show a warning modal listing: node type, node content snippet, and the undefined reference
|
||||
- [ ] Modal offers "Export anyway" and "Cancel" options
|
||||
- [ ] Nodes with undefined references are highlighted on the canvas with orange warning borders when modal is shown
|
||||
- [ ] If no issues found, export proceeds normally
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Dependencies:** US-058, US-059, US-060, US-061
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
### US-065: Searchable combobox component
|
||||
**Description:** As a developer, I need a reusable searchable combobox component so that all character/variable dropdowns share consistent behavior and styling.
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Create `components/editor/Combobox.tsx` - a reusable searchable dropdown component
|
||||
- [ ] Props: items (id, label, color?, badge?), value, onChange, placeholder, onAddNew (optional callback)
|
||||
- [ ] Typing in the input filters the list by name (case-insensitive)
|
||||
- [ ] Keyboard navigation: arrow keys to move, Enter to select, Escape to close
|
||||
- [ ] Shows color swatch and/or badge next to item labels when provided
|
||||
- [ ] "Add new..." option rendered at bottom when `onAddNew` prop is provided
|
||||
- [ ] Dropdown positions itself above or below input based on available space
|
||||
- [ ] Matches existing editor styling (TailwindCSS, dark mode support)
|
||||
- [ ] Typecheck passes
|
||||
- [ ] Verify in browser using dev-browser skill
|
||||
|
||||
**Complexity:** M
|
||||
|
||||
---
|
||||
|
||||
## Functional Requirements
|
||||
|
||||
### Real-time Collaboration
|
||||
|
||||
- FR-1: The system must establish a WebSocket connection via Supabase Realtime when a user opens a project in the editor
|
||||
- FR-2: The system must broadcast user presence (cursor position, selected node, connected status) to all collaborators on the same project
|
||||
- FR-3: The system must display up to 5 collaborator avatars in the toolbar with overflow count
|
||||
- FR-4: The system must render remote cursors on the canvas with color-coded labels
|
||||
- FR-5: The system must use Yjs CRDT documents to synchronize node and edge state across clients without data loss
|
||||
- FR-6: The system must show a colored border and name label on nodes being actively edited by another user
|
||||
- FR-7: The system must display toast notifications when collaborators join or leave the session
|
||||
- FR-8: The system must record all node/edge mutations to an audit_trail table with previous and new state
|
||||
- FR-9: The system must provide a history sidebar showing chronological change entries grouped by date
|
||||
- FR-10: The system must allow reverting any individual change from the history, restoring the previous state
|
||||
- FR-11: The system must handle network disconnection gracefully with automatic reconnection and state re-sync
|
||||
- FR-12: The system must allow project owners to invite collaborators by email with a specific role (editor/viewer)
|
||||
|
||||
### Character & Variable Management
|
||||
|
||||
- FR-13: The system must store Character definitions (id, name, color, description) in the project's flowchart_data
|
||||
- FR-14: The system must store Variable definitions (id, name, type, initialValue, description) in the project's flowchart_data
|
||||
- FR-15: The system must provide a project settings modal with tabs for managing characters and variables
|
||||
- FR-16: The system must replace all speaker text inputs with searchable combobox dropdowns populated from the characters list
|
||||
- FR-17: The system must replace all variableName text inputs with searchable combobox dropdowns populated from the variables list
|
||||
- FR-18: The system must allow inline creation of new characters/variables from within dropdowns
|
||||
- FR-19: The system must show orange warning indicators on nodes/edges referencing undefined characters or variables
|
||||
- FR-20: The system must validate references before export and warn the user of any undefined references
|
||||
- FR-21: The system must auto-migrate existing free-text speaker/variableName values to Character/Variable definitions on first load
|
||||
- FR-22: The system must allow importing characters/variables from other projects owned by the user
|
||||
- FR-23: The system must filter operator options and value inputs based on the selected variable's type
|
||||
|
||||
## Non-Goals (Out of Scope)
|
||||
|
||||
- No voice/video chat between collaborators
|
||||
- No commenting/annotation system on nodes
|
||||
- No permission system beyond owner/editor/viewer roles
|
||||
- No offline-first editing (requires active connection for collaboration)
|
||||
- No version branching or forking (linear history only)
|
||||
- No global character/variable library shared across all users
|
||||
- No AI-assisted character or variable suggestions
|
||||
- No real-time text editing within a single node's text field (CRDT operates at node level)
|
||||
- No variable dependencies or computed values
|
||||
|
||||
## Design Considerations
|
||||
|
||||
- Presence avatars should follow existing toolbar button styling (compact, consistent height)
|
||||
- Remote cursors should be semi-transparent to avoid visual clutter
|
||||
- Node lock indicators should use the existing node border styling with color override
|
||||
- Project settings modal should match existing modal patterns (ProjectCard rename/delete modals)
|
||||
- Combobox dropdown should match existing input styling with dark mode support
|
||||
- Character colors should be distinguishable in both light and dark modes
|
||||
- History sidebar width should not exceed 320px to preserve canvas space
|
||||
|
||||
## Technical Considerations
|
||||
|
||||
- **Supabase Realtime** for presence and broadcast channels (already available in the stack)
|
||||
- **Yjs** CRDT library for conflict-free document synchronization
|
||||
- **y-supabase** or custom provider to bridge Yjs with Supabase Realtime
|
||||
- Cursor position broadcasts should be throttled (50ms) to avoid overwhelming the channel
|
||||
- Audit trail writes should be debounced and batched to minimize database load
|
||||
- Auto-migration logic must be idempotent (safe to run multiple times)
|
||||
- Combobox component should use React portal for dropdown to avoid z-index/overflow issues
|
||||
- Character/variable ID references enable renaming without breaking node associations
|
||||
- The `flowchart_data` JSONB column grows with characters/variables arrays; monitor size for large projects
|
||||
|
||||
## Success Metrics
|
||||
|
||||
- Multiple users can simultaneously edit a flowchart with all changes reflected within 500ms
|
||||
- No data loss during concurrent edits (CRDT guarantees)
|
||||
- Collaborators can see each other's presence and activity within 1 second of connection
|
||||
- Any historical change can be reverted without side effects on other nodes
|
||||
- Zero typo-related issues in character names and variable references after migration to dropdowns
|
||||
- New characters/variables can be created inline without leaving the canvas (under 3 clicks)
|
||||
- Existing projects auto-migrate to the new system seamlessly on first load
|
||||
|
||||
## Open Questions
|
||||
|
||||
- Should the Yjs document be persisted separately from the Supabase JSONB column (dedicated storage)?
|
||||
- What is the maximum number of concurrent collaborators to support per project?
|
||||
- Should viewer-role users see other viewers' cursors, or only editors'?
|
||||
- How long should audit trail entries be retained (indefinitely, or time-based cleanup)?
|
||||
- Should the combobox support creating characters/variables with full details inline, or just name + essentials?
|
||||
- Should variable type changes be allowed after creation if the variable is already in use?
|
||||
Loading…
Reference in New Issue