Repository navigation
Conversation
- Save as ai-roadmap.jsx (main App entry with board manager home)
- localStorage persistence: boards survive page refresh, hydrates on load
- Hash-based URL routing: #board-{id} opens board directly, browser back/forward works
- Split into focused components:
· Canvas.jsx — full interactive canvas logic
· components/Toolbar.jsx — top toolbar
· components/NodePanel.jsx — node editor side panel
· components/Sidebar.jsx — legend & categories sidebar
· components/Minimap.jsx — minimap overlay
· components/Modals.jsx — AddNode and EditGroup modals
· components/BoardCard.jsx — board card on home screen
· components/ui.jsx — shared UI primitives (F, FL, GB, CMI)
· constants.js — NODE_W/H, STATUS, COLOR_PRESETS, uid, FI, TB
· data/seeds.js — SEED_NODES, SEED_EDGES, DEFAULT_CATS
· utils.js — edgeGeom, rectsOverlap, makeBoard
- Vite + React project setup (index.html, package.json, vite.config.js)
https://claude.ai/code/session_01KAgvqHrtMK7tX4YGJ9GHPE
Previously, fn(board) was called inside setPanel's callback, reading the board prop that hadn't updated yet in the same render cycle. Now fn(board) is called once eagerly before both onUpdate and setPanel, so both operate on the same derived state with no stale closure risk. https://claude.ai/code/session_01KAgvqHrtMK7tX4YGJ9GHPE
AM-Bear
left a comment
AM-Bear
left a comment
There was a problem hiding this comment.
PR summary (Add AI Learning Roadmap interactive canvas app)
This PR adds a new Vite/React “ai-roadmap” app (~1,886 LOC) with a multi-board manager, hash routing, localStorage persistence, and a fairly full-featured interactive canvas (nodes/edges/groups/minimap/sidebar/pan/zoom/selection).
What looks solid
Nice end-to-end feature slice: board manager + “open board” view, plus import/export flows, makes this usable immediately.
State update wiring looks correct: Canvas updates are routed through onUpdate={fn => upd(activeId, fn)} which ensures edits land on the active board entry in boards.
Canvas interaction basics are thoughtfully covered: wheel zoom (non-passive), space-to-pan, drag-select, multi-select behavior, etc.
Must-fix before merge
CSS bug in index.html: 100 vw / 100 vh won’t apply
Right now you have spaces in the units:
#root { width: 100 vw; height: 100 vh; } → should be 100vw / 100vh.
Remove the hidden/bidi Unicode characters flagged by GitHub
GitHub is explicitly warning that index.html contains hidden or bidirectional Unicode text. This is a real supply-chain risk class (“Trojan Source”) and should be cleaned before merging.
(Also flagged on package.json as well.)
High-value follow-ups (strongly recommended)
Effect dependencies & StrictMode behavior: Canvas persists pan/zoom via an effect that calls onUpdate(...). In React 18 StrictMode (enabled in main.jsx), effects run twice in dev, which can mean extra writes / extra board updates while developing. Consider guarding (e.g., only persist if values changed from board) or ensuring onUpdate is stable and included in deps.
Inline-style sprawl: This is fine for a contained app, but long-term maintainability will improve a lot if common styles are centralized (CSS file / CSS modules / styled components).
Input validation on import: Import currently parses JSON and trusts structure. Even a lightweight shape check (required fields, arrays) would prevent corrupted boards from bricking the UI.
Nitpicks
package.json formatting (indentation/newlines) is nonstandard; running a formatter (or npm pkg fix style tooling) would reduce diff noise later.
Verdict
Request changes for the 100vw/100vh typo and the hidden/bidi Unicode cleanup. Once those are addressed, I’d be comfortable approving—this is a substantial, cohesive feature addition with good UX fundamentals.
2 participants
Summary
This PR introduces a complete interactive canvas-based learning roadmap application built with React and Vite. The application allows users to create, organize, and visualize AI learning paths through an interactive node-and-edge graph system with full persistence via localStorage.
Key Changes
Core Application Structure
ai-roadmap.jsx): Multi-board manager with localStorage persistence, hash-based URL routing for direct board access, and board CRUD operations (create, duplicate, rename, delete, import/export)Canvas.jsx): Full-featured interactive canvas with 557 lines implementing:UI Components
Toolbar.jsx): Mode selection (select/connect/delete), node addition, group creation, search, zoom controls, and navigationNodePanel.jsx): Side panel for editing selected node properties (title, category, rank, status, URL, notes) with edge managementSidebar.jsx): Legend view showing categories and controls, plus category management (add/edit/delete)Modals.jsx): Add node and edit group dialogs with form validationBoardCard.jsx): Board preview cards with thumbnail visualization, rename, duplicate, export, and delete actionsMinimap.jsx): Collapsible minimap showing canvas overview and viewport indicatorui.jsx): Reusable form field, button, and context menu item componentsData & Utilities
constants.js): Node dimensions, UID generation, color presets, status definitions, and shared inline stylesutils.js): Edge geometry calculation (quadratic Bezier curves), rectangle overlap detection, and board factory functiondata/seeds.js): Default categories and pre-populated learning nodes/edges for demo boardBuild Configuration
vite.config.js): React plugin configurationindex.html): Minimal setup with dark theme stylingmain.jsx): React StrictMode root renderNotable Implementation Details
toC()function converts screen coordinates to canvas coordinates accounting for pan and zoom#board-{id}URLshttps://claude.ai/code/session_01KAgvqHrtMK7tX4YGJ9GHPE