feat(frontend): wire dormant dashboard components (#963)#969
Conversation
…utritionTip, CategoriesBrowse (#963)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📸 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
Wires previously built-but-dormant dashboard components into the main /app dashboard page to expose more insights and browsing affordances to users.
Changes:
- Render
HealthInsightsPanel,NutritionTip, andCategoriesBrowseinfrontend/src/app/app/page.tsxwith staggered entry animations and ErrorBoundary wrappers where applicable. - Extend
DashboardSkeletonto include matching loading placeholders for the three new sections. - Add/update Vitest coverage for the new sections and skeleton placeholders, including the updated 8-step animation delay sequence.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| frontend/src/app/app/page.tsx | Adds the three dashboard sections and extends staggered animation delays to 8 sections. |
| frontend/src/components/common/skeletons/DashboardSkeleton.tsx | Adds skeleton placeholders corresponding to the new dashboard sections. |
| frontend/src/app/app/page.test.tsx | Mocks getDashboardInsights and adds tests for new sections + updated animation delay assertions. |
| frontend/src/components/common/skeletons/DashboardSkeleton.test.tsx | Adds tests asserting the new skeleton sections render. |
| @@ -117,8 +132,15 @@ export default function DashboardPage() { | |||
| </div> | |||
| )} | |||
|
|
|||
| {/* Browse categories — horizontal scrollable chips */} | |||
| <div className="animate-fade-in-up" style={{ animationDelay: "300ms" }}> | |||
| <ErrorBoundary level="section" context={{ section: "categories-browse" }}> | |||
| <CategoriesBrowse /> | |||
| </ErrorBoundary> | |||
| </div> | |||
| // Insights section: 3rd child (after greeting and health summary) | ||
| const insightsSection = container.children[2]; | ||
| expect(insightsSection).toBeInTheDocument(); | ||
| const blocks = insightsSection.querySelectorAll('[class*="rounded-xl"]'); |
| it("renders NutritionTip section", async () => { | ||
| render(<DashboardPage />, { wrapper: createWrapper() }); | ||
| await waitFor(() => { | ||
| expect(screen.getByText("💡")).toBeInTheDocument(); |
| {/* Health insights panel */} | ||
| <div className="space-y-3"> | ||
| <Skeleton variant="rect" width="100%" height={80} className="rounded-xl!" /> | ||
| <Skeleton variant="rect" width="100%" height={112} className="rounded-xl!" /> | ||
| <Skeleton variant="rect" width="100%" height={40} className="rounded-xl!" /> | ||
| </div> |
Summary
Wires three dormant dashboard components into the main dashboard page:
Changes
getDashboardInsights, 4 new test cases (HealthInsightsPanel render, NutritionTip render, CategoriesBrowse render, ErrorBoundary graceful degradation), updated animation delay test from 5→8 sections.Verification
npx tsc --noEmit→ 0 errorsnpx vitest run→ 18/18 tests pass (page.test.tsx + DashboardSkeleton.test.tsx)npx eslint→ 0 errors on all 4 changed filesCloses #963