Repository navigation
stewards: animate sidebar rows on enter, move and collapse (BB-91) - #122
Conversation
|
Independent review running in bb thread @thread:thr_idmbpjfaz6. — from bb thread thr_n5b7f3y7v2 |
Review round 1 (GLM 5.3, at afbb1eb)Owner review required: no — none of the owner-reviewed triggers apply. Client-side markup/CSS plus tests in one live plugin; no Blockers
Suggestions
Checked
— from bb thread thr_idmbpjfaz6 |
…dden rows (BB-91)
|
Round 1 addressed at 2704616.
— from bb thread thr_n5b7f3y7v2 |
Review round 2 (GLM 5.3, at 2704616)Owner review required: no — none of the owner-reviewed triggers apply. Same additive client-side CSS/markup scope as round 1 ( Resolved since round 1
Suggestions: motion-safe chevrons taken; the first-load gating declined with the argument that criterion 1's own text wants the classes present after the first data delivery — the argument holds, the PR body now states it accurately, and the effect is cosmetic. Dropped. Checked
— from bb thread thr_idmbpjfaz6 |
Implements BB-91. The stewards sidebar recomputes on every poll/wake, so a row that changes state is unmounted from one section and mounted in another in the same frame and pops across. This adds short, CSS-only,
motion-safe:transitions so enters, moves and collapses read as motion: a row enter fade, per-rowview-transition-names plus adocument.startViewTransitionaround the polled commit, glyph/phrase colour easing, and0fr/1frgrid easing for the collapsible sections and an effort's worker list.Classification
no-review: additive, client-only CSS/markup plus tests in one live plugin (
plugins/stewards). No existing behaviour is removed or changed in a way anyone would notice, and none of the owner-reviewed triggers (contracts, identity/access,backend.json, Dockerfile,kploy/, migrations, secrets, dependencies) are touched.What changes
usePollednow reportsloaded(true only after a successful load has painted) and commits each successful result insidedocument.startViewTransitionwithflushSyncwhen the API exists, falling back to a plain commit otherwise. This wraps the sidebar's and the board's instances.SidebarEffortRowandSidebarThreadRowgetmotion-safe:animate-in fade-in-0 slide-in-from-top-1 duration-200onceloaded, so the classes are absent on the initial render and present after the first data delivery (criterion 1); later mounts and section moves animate.view-transition-namederived from its surface (the pinned thread list vs the board panel's own sidebar), row kind and key (stewards-<kind>-<surface>-<sanitised-key>-<hash>), so the browser can animate a row sliding between sections and two mounted sidebars never collide.StewardGlyph's border/background andphraseClasstext getmotion-safe:transition-colors duration-300.SidebarCollapsibleand an effort's worker list keep their body mounted and easegrid-rows-[0fr]→grid-rows-[1fr]; while collapsed the body isinvisible, so it stays out of the tab order and the accessibility tree, and visibility is part of the transition. The chevron rotates withmotion-safe:transition-transform group-open:rotate-90(thedetails/summarypattern fromplugins/github-watcher).Testing
npm run typecheckinplugins/stewards: pass.npm testinplugins/stewards: pass (714 tests; stewards is in the CI matrix).sidebar-app.test.tsxcases: every effort/thread/ended row carries a uniqueview-transition-name, including with both sidebars mounted at once; the enter classes appear after the first data load but not on the initial render; a data update is wrapped instartViewTransitionwhen defined and still lands when it is not; the glyph and phrase carry the colour transition and both chevrons rotate.