From 9d46aa744dfcc672bd67dbce34c349a6856af801 Mon Sep 17 00:00:00 2001 From: Gustavo Henrique Santos Souza de Miranda Date: Wed, 21 Jan 2026 12:48:20 -0300 Subject: [PATCH] chore: mark US-020 as complete and update progress log Co-Authored-By: Claude Opus 4.5 --- prd.json | 2 +- progress.txt | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/prd.json b/prd.json index 8f68bdb..53629c4 100644 --- a/prd.json +++ b/prd.json @@ -354,7 +354,7 @@ "Verify in browser using dev-browser skill" ], "priority": 20, - "passes": false, + "passes": true, "notes": "" }, { diff --git a/progress.txt b/progress.txt index 4d4a058..fdc05a2 100644 --- a/progress.txt +++ b/progress.txt @@ -20,6 +20,8 @@ - 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 typing and useReactFlow() for updates +- Register custom node types in nodeTypes object (memoized with useMemo) and pass to ReactFlow component --- @@ -305,3 +307,18 @@ - 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 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 +---