chihlasm 50d9ff59d0 feat: React Flow migration for flow editor canvas (#82) ...

* docs: add React Flow migration design for flow editor canvas

Replaces hand-built CSS flexbox canvas with @xyflow/react for zoom/pan,
dagre auto-layout, collapsible minimap, and side-panel editing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add React Flow migration implementation plan

12 tasks across 8 phases covering dagre layout, custom nodes,
side panel editor, and full canvas integration.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: install @xyflow/react and @dagrejs/dagre

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add dagre layout utility for React Flow node positioning

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add FlowCanvasNode compact card for React Flow canvas

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add FlowCanvasAnswerNode stub card for React Flow canvas

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add useTreeLayout hook for tree-to-ReactFlow conversion with dagre

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add NodeEditorPanel side panel for React Flow canvas editing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add FlowCanvas main React Flow component with zoom/pan/minimap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: wire FlowCanvas and NodeEditorPanel into TreeEditorLayout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: add panel state management for node editor in TreeEditorPage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style: add React Flow dark theme overrides for canvas

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: export new React Flow canvas components from barrel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: enable scrolling in node editor panel sidebar

Add min-h-0 to flex containers in the ancestor chain so overflow-y-auto
actually triggers instead of content overflowing off-screen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: constrain tree editor page height to prevent panel overflow

Add overflow-hidden to TreeEditorPage root and NodeEditorPanel container
so the flex height chain is properly constrained by the CSS Grid cell,
preventing the node editor sidebar from growing beyond the viewport.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve lint errors in NodeEditorPanel and useTreeLayout

- Fix unused 'children' destructuring with _children prefix
- Move handleClose declaration above the useEffect that references it
- Use handleClose as proper dependency instead of eslint-disable
- Fix unused _parentId parameter type in useTreeLayout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: use viewport-based height for node editor panel

Replace h-full with calc(100vh - 105px) to bypass the CSS height chain
that fails to constrain the panel across browsers. The 105px accounts
for the topbar (56px) and editor toolbar (49px).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style: fix canvas controls visibility and enhance dot grid background

- Add !important to all React Flow dark theme overrides to ensure they
  win over library default styles (fixes white controls rectangle)
- Add SVG fill inheritance for control button icons
- Use slightly lighter canvas background (bg-accent/30) so dot grid
  is more visible
- Increase dot size and use muted-foreground color for better contrast

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: collapse sidebar categories with show more/less toggle

Show only the first 4 categories by default with a "N more" button
to expand the full list. Reduces sidebar clutter when many categories
exist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-19 00:43:34 -05:00

277 KiB

Raw Blame History

View Raw