diff --git a/prd.json b/prd.json index 61bc574..cf98949 100644 --- a/prd.json +++ b/prd.json @@ -109,7 +109,7 @@ "Verify in browser using dev-browser skill" ], "priority": 6, - "passes": false, + "passes": true, "notes": "Dependencies: US-056, US-065" }, { @@ -127,7 +127,7 @@ "Verify in browser using dev-browser skill" ], "priority": 7, - "passes": false, + "passes": true, "notes": "Dependencies: US-057, US-065" }, { diff --git a/progress.txt b/progress.txt index 3ae35fa..64b07d5 100644 --- a/progress.txt +++ b/progress.txt @@ -28,11 +28,15 @@ - 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 - 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 - New JSONB fields (characters, variables) must be defaulted to `[]` when reading from DB in page.tsx to handle pre-existing data - Reusable `Combobox` component at `src/components/editor/Combobox.tsx` - use for all character/variable dropdowns. Props: items (ComboboxItem[]), value, onChange, placeholder, onAddNew - `ProjectSettingsModal` at `src/components/editor/ProjectSettingsModal.tsx` manages characters/variables. Receives state + callbacks from FlowchartEditor - Characters and variables state is managed in `FlowchartEditorInner` with `useState` hooks, passed down to the modal - For settings-style modals, use `max-w-2xl h-[80vh]` with overflow-y-auto content area and fixed header/tabs +- `EditorContext` provides both characters (onAddCharacter) and variables (onAddVariable) to node components. Use `useEditorContext()` to access them. +- In FlowchartEditor, `handleAddVariable` adds a variable *node* to the canvas; `handleAddVariableDefinition` creates a variable *definition* in project data. Avoid naming collisions between "add node" and "add definition" callbacks. --- @@ -97,3 +101,17 @@ - The same form patterns from CharactersTab apply: inline form within the list for editing, appended form below the list for adding - No browser testing tools are available; manual verification is needed. --- + +## 2026-01-23 - US-059 +- What was implemented: Variable node variable dropdown using Combobox component, replacing the free-text input +- Files changed: + - `src/components/editor/nodes/VariableNode.tsx` - Replaced text input with Combobox for variable selection, added inline "Add new variable" form with name + type, added orange warning border for invalid references, filtered operation options (add/subtract only for numeric type) + - `src/components/editor/EditorContext.tsx` - Extended context to include `variables: Variable[]` and `onAddVariable` callback + - `src/app/editor/[projectId]/FlowchartEditor.tsx` - Added `handleAddVariableDefinition` callback and passed variables + onAddVariable through EditorContext +- **Learnings for future iterations:** + - The existing `handleAddVariable` in FlowchartEditor adds a variable *node* to the canvas (toolbar action). The new `handleAddVariableDefinition` creates a variable *definition* in the project's data. Name carefully to avoid collisions. + - EditorContext is the shared context for node components to access project-level characters and variables. Extend it when new entity types need to be accessible from custom node components. + - The VariableNode follows the same pattern as DialogueNode for Combobox integration: items derived via useMemo, handleSelect sets both variableId and variableName, inline add form for quick creation, hasInvalidReference for warning state. + - Operations filtering uses `isNumeric` flag: if no variable is selected (undefined) or type is 'numeric', all operations are shown; otherwise only 'set' is available. When selecting a non-numeric variable, operation is auto-reset to 'set' if it was 'add' or 'subtract'. + - No browser testing tools are available; manual verification is needed. +---