feat(frontend): integrate ScoreGauge into dashboard + staggered entry animations (#962)#967
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📸 PR ScreenshotsCaptured 2 screenshots (1 mobile, 1 desktop) for 1 changed page(s):
📥 Download screenshots from workflow artifacts. Captured by PR Screenshots workflow • 2026-03-19 |
Bundle Size Report
✅ Bundle size is within acceptable limits. |
There was a problem hiding this comment.
Pull request overview
Integrates the existing ScoreGauge visual component into the dashboard (HealthSummary + QuickWinCard), adds a compact band distribution legend, and introduces staggered fade-in entry animations for dashboard sections to improve perceived UI polish.
Changes:
- Replace dashboard score “circles” with
ScoreGaugeinHealthSummaryandQuickWinCard. - Add a non-zero-only score band legend under the HealthSummary distribution bar.
- Wrap dashboard sections with
animate-fade-in-upand staggeredanimationDelay, with accompanying unit tests.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/dashboard/HealthSummary.tsx | Uses ScoreGauge for the hero score and adds a distribution legend under the band bar. |
| frontend/src/components/dashboard/QuickWinCard.tsx | Replaces from/to score circles with ScoreGauge and removes obsolete band styling logic. |
| frontend/src/app/app/page.tsx | Adds staggered entry animation wrappers and delays around dashboard sections. |
| frontend/src/components/dashboard/HealthSummary.test.tsx | Updates tests for ScoreGauge, adds legend + scale-in wrapper coverage. |
| frontend/src/components/dashboard/QuickWinCard.test.tsx | Mocks ScoreGauge for assertions in QuickWinCard tests. |
| frontend/src/app/app/page.test.tsx | Adds a test asserting staggered animation delays are applied. |
| {/* Score gauge */} | ||
| <div className="animate-scale-in" data-testid="health-score-gauge"> | ||
| <ScoreGauge score={100 - avgTryVit} size="lg" /> | ||
| </div> |
| className="inline-block h-2 w-2 rounded-full" | ||
| style={{ | ||
| backgroundColor: | ||
| SCORE_BAND_HEX[d.band as keyof typeof SCORE_BAND_HEX], | ||
| }} |
| <span | ||
| className="inline-block h-2 w-2 rounded-full" | ||
| style={{ | ||
| backgroundColor: | ||
| SCORE_BAND_HEX[d.band as keyof typeof SCORE_BAND_HEX], | ||
| }} | ||
| /> |
ericsocrat
force-pushed
the
feat/962-scoregauge-animations
branch
from
c9e53c5 to
5da57f2
Compare
Summary
Closes #962 — Integrates the existing
ScoreGaugecomponent into the dashboard hero and QuickWinCard, adds a distribution legend below the band bar, and applies staggered fade-in-up entry animations to all dashboard sections.Changes
ScoreGauge Integration
<ScoreGauge score={...} size="lg" />wrapped in aanimate-scale-inwrapper<span>score circles (from/to) with<ScoreGauge score={...} size="sm" />getScoreBandimport,worstBand, andaltBandvariables from QuickWinCardDistribution Legend
Staggered Entry Animations
animate-fade-in-updivs with staggered delays: 0ms (greeting), 50ms (health summary), 100ms (quick win), 150ms (recently viewed), 200ms (quick actions)animate-scale-infor emphasisprefers-reduced-motionhandling already exist inglobals.cssFiles Changed (6 files, +127/-46)
frontend/src/components/dashboard/HealthSummary.tsx— ScoreGauge + legendfrontend/src/components/dashboard/QuickWinCard.tsx— ScoreGauge + cleanupfrontend/src/app/app/page.tsx— Staggered animation wrappersfrontend/src/components/dashboard/HealthSummary.test.tsx— ScoreGauge mock, 2 new tests (legend + scale-in), testid updatesfrontend/src/components/dashboard/QuickWinCard.test.tsx— ScoreGauge mockfrontend/src/app/app/page.test.tsx— Staggered animation delay testVerification
Test Coverage
100 - scoreas plain text for assertion simplicity