From 95342f852fdfb6d0e923e597b9b4db1dcc8c8a24 Mon Sep 17 00:00:00 2001 From: Alvis Date: Wed, 8 Apr 2026 11:24:36 +0000 Subject: [PATCH] Update CLAUDE.md with current animation and layout design decisions Co-Authored-By: Claude Sonnet 4.6 --- CLAUDE.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 4b58404d..3bd0a402 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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. - 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. -- `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. -- Panel transitions are 300ms CSS; graph re-fit/re-center delays 350ms to wait for the transition. +- 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. +- 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. +- `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