forked from boos/BoosAPI
Cita
8cf78a5354
* Keep route-detail motion smooth while restoring a more panel-like reveal feel The route page detail panel originally reused the shared collapse container, which looked lively but reintroduced layout-heavy motion inside the desktop route grid. This change keeps the non-layout presence shell, then tunes the panel animation itself so it reveals from the top with a softer, more trace-panel-like feel without falling back to grid row interpolation. Constraint: The desktop route detail panel sits inside a multi-column CSS grid and must avoid layout-driven collapse animation Rejected: Reuse anim-collapse exactly as ProxyLogs does | reopening grid-template-rows animation brought back jank on route expand/collapse Confidence: high Scope-risk: narrow Reversibility: clean Directive: Preserve transform/clip-path-based motion here unless grid placement is redesigned; do not reintroduce layout collapse without profiling Tested: npm test -- src/web/pages/tokenRoutes.desktop-detail-panel.test.tsx src/web/pages/tokenRoutes.group-collapse.test.tsx src/web/pages/token-routes/RouteFilterBar.test.tsx Tested: npm run typecheck:web Tested: npm run typecheck:web:test Tested: npm run repo:drift-check Not-tested: manual GitHub review in production browser after PR creation * Keep route-detail motion PR lint-clean without changing behavior CodeRabbit correctly flagged the new keyframes for using from/to selector notation. This follow-up keeps the animation timing and properties the same while switching to percentage selectors so the stylesheet aligns with the configured keyframe selector rule. Constraint: Keep the route-detail panel motion unchanged while satisfying the style rule mentioned in PR review Rejected: Ignore the review comment | leaves a stylelint-style regression in the PR discussion unresolved Confidence: high Scope-risk: narrow Reversibility: clean Directive: When adding new keyframes in this stylesheet, prefer explicit percentage selectors to avoid repeating this lint issue Tested: npm test -- src/web/pages/tokenRoutes.desktop-detail-panel.test.tsx src/web/pages/tokenRoutes.group-collapse.test.tsx src/web/pages/token-routes/RouteFilterBar.test.tsx Tested: npm run typecheck:web Tested: npm run repo:drift-check Not-tested: remote Git transport from this machine still hangs, so branch update was handled separately from local git push * Respect reduced-motion and narrow layer promotion for route detail panel The new route detail panel motion path solved grid-driven jank, but the follow-up review correctly flagged two polish issues: the animation should honor reduced motion, and will-change should only stay enabled during active transitions. This keeps the smoother motion path while reducing persistent layer cost and giving reduced-motion users immediate state changes. Constraint: Must preserve the non-layout animation path that fixed dropped frames in the route grid Rejected: Restore anim-collapse behavior | reintroduces grid/layout-driven jank Confidence: high Scope-risk: narrow Directive: Keep desktop route detail motion on transform and clip-path rather than grid height animation unless the panel moves out of the card grid Tested: npm test -- src/web/pages/tokenRoutes.desktop-detail-panel.test.tsx src/web/pages/tokenRoutes.group-collapse.test.tsx src/web/pages/token-routes/RouteFilterBar.test.tsx Tested: npm run typecheck:web Tested: npm run typecheck:web:test Tested: npm run repo:drift-check Not-tested: Manual browser validation of prefers-reduced-motion on macOS * Honor reduced-motion semantics in route detail panel lifecycle The previous follow-up removed the always-on layer hint and added reduced-motion CSS, but the enter state still reused the long-lived open class and the desktop close path kept a fixed JS delay. This narrows will-change to a transient entering state, bypasses close delays for reduced-motion users, and locks the behavior with a regression test. Constraint: Must preserve the non-layout detail-panel motion path that fixed grid jank Rejected: Keep reduced-motion as CSS-only | JS close timer still delayed unmount and active-state cleanup Rejected: Drop the close delay globally | would remove the intended close animation for standard-motion users Confidence: high Scope-risk: narrow Directive: If the desktop detail panel motion changes again, keep motion-state CSS and JS timers aligned for prefers-reduced-motion users Tested: npm test -- src/web/pages/tokenRoutes.desktop-detail-panel.test.tsx src/web/pages/tokenRoutes.group-collapse.test.tsx src/web/pages/token-routes/RouteFilterBar.test.tsx Tested: npm run typecheck:web Tested: npm run typecheck:web:test Tested: npm run repo:drift-check Not-tested: Manual browser verification of prefers-reduced-motion on macOS