Update CLAUDE.md with current animation and layout design decisions

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alvis
2026-04-08 11:24:36 +00:00
parent 25101008ef
commit 95342f852f

View File

@@ -65,9 +65,11 @@ cd backend && cargo test
- Task IDs are UUIDs (TEXT in SQLite, string from backend). Frontend `Task.id` is typed as `number` but actually receives strings — selection uses string comparison throughout. - Task IDs are UUIDs (TEXT in SQLite, string from backend). Frontend `Task.id` is typed as `number` but actually receives strings — selection uses string comparison throughout.
- Graph tab and task list are switched via tabs in the center area. Left panel (user info) and right panel (task details) are independently foldable. - Graph tab and task list are switched via tabs in the center area. Left panel (user info) and right panel (task details) are independently foldable.
- Selecting a task (from list or graph node click) animates the node to the center of the viewport (drag-style, not camera pan). The node stays pinned until a different task is selected. - Selecting a task (from list or graph node click) triggers a 3-phase animation: (1) charge force jumps to -600 so other nodes repel outward immediately, (2) after 80ms the selected node slides to canvas center over 500ms with cubic ease-out, (3) charge restores to -120 and the graph stabilizes. The node stays pinned (`fx`/`fy`) until a different task is selected.
- `ForceGraph2D` canvas dimensions are driven by a `ResizeObserver` on a container div that always renders. The canvas is only mounted after the first measurement to avoid a 300x300 default. - Both views (task list and graph) are always mounted using `absolute inset-0` with opacity/pointer-events toggle — never `hidden`. This ensures `GraphView` always has real canvas dimensions from page load, so the force simulation runs correctly in the background.
- Panel transitions are 300ms CSS; graph re-fit/re-center delays 350ms to wait for the transition. - `ForceGraph2D` canvas dimensions are driven by a `ResizeObserver` on the container div. Canvas is only mounted after the first measurement to avoid the 300×300 default size.
- Graph re-fits on tab switch (`isVisible` effect) and on panel resize (`dimensions` effect). When a node is selected, `zoomToFit` is suppressed to avoid fighting the pin animation.
- Panel transitions are 150ms CSS opacity. When switching to graph tab with a pending node selection, animation is delayed 400ms to let the re-fit settle first.
## API ## API