feat(dashboard): QuickActions polish — colored icons, count badges, bounce-in animation (#965)#971
Conversation
…ounce-in animation (#965)
|
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 4 screenshots (2 mobile, 2 desktop) for 2 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
This PR polishes the dashboard’s QuickActions UI by adding branded icon backgrounds, integrating dashboard stats for count badges, and introducing a staggered bounce-in entry animation, while syncing the dashboard skeleton to the updated layout.
Changes:
- Updated
QuickActionsto support colored icon containers, optionalstatsprop, list-count badge (0-hidden, 99+-capped), and staggered bounce-in + hover lift interaction. - Wired dashboard stats into
QuickActionsfrom the dashboard page. - Updated
DashboardSkeleton(and tests) to match the new QuickActions icon sizing and section ordering; expanded unit tests for QuickActions behaviors.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/dashboard/QuickActions.tsx | Adds icon background styling, stats-driven badge rendering, and staggered bounce-in animation. |
| frontend/src/app/app/page.tsx | Passes dashboard.stats into QuickActions for badge rendering. |
| frontend/src/components/common/skeletons/DashboardSkeleton.tsx | Syncs quick-action skeleton padding and icon placeholder size/shape to the updated UI. |
| frontend/src/components/dashboard/QuickActions.test.tsx | Adds unit tests for icon backgrounds, badge visibility/capping, and animation staggering. |
| frontend/src/components/common/skeletons/DashboardSkeleton.test.tsx | Adds a test asserting the skeleton’s 8-section structure/order. |
| className="card group relative flex flex-col items-center gap-2 py-4 text-center transition-transform transition-shadow duration-200 hover:scale-[1.04] hover:shadow-md lg:py-6" | ||
| style={{ | ||
| animation: `bounceIn 400ms ease-out ${index * 100}ms both`, | ||
| }} |
| {typeof badge === "number" && badge > 0 && ( | ||
| <span | ||
| className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-brand-primary px-1 text-[10px] font-bold text-white" | ||
| aria-label={`${badge}`} | ||
| > | ||
| {badge > 99 ? "99+" : badge} | ||
| </span> |
Summary
Enhances the QuickActions component on the dashboard with visual polish and data integration:
Changes
Verification
px tsc --noEmit — 0 errors
Closes #965