Skip to content

feat(frontend): wire dormant dashboard components (#963)#969

Merged
ericsocrat merged 1 commit intomainfrom
feat/963-wire-dormant-components
Mar 19, 2026
Merged

feat(frontend): wire dormant dashboard components (#963)#969
ericsocrat merged 1 commit intomainfrom
feat/963-wire-dormant-components

Conversation

@ericsocrat
Copy link
Owner

Summary

Wires three dormant dashboard components into the main dashboard page:

  • HealthInsightsPanel — score trends, NOVA distribution, allergen alerts, category diversity
  • NutritionTip — daily rotating nutrition tips with i18n
  • CategoriesBrowse — category overview browse grid

Changes

  • page.tsx: Added 3 imports + 3 new sections with ErrorBoundary wrappers. Updated animation sequence from 5→8 sections with staggered delays (0/50/100/150/200/250/300/350ms).
  • DashboardSkeleton.tsx: Added 3 matching skeleton sections (insights panel, nutrition tip, categories browse).
  • page.test.tsx: Added mock for getDashboardInsights, 4 new test cases (HealthInsightsPanel render, NutritionTip render, CategoriesBrowse render, ErrorBoundary graceful degradation), updated animation delay test from 5→8 sections.
  • DashboardSkeleton.test.tsx: Added 3 tests for new skeleton sections.

Verification

  • npx tsc --noEmit → 0 errors
  • npx vitest run → 18/18 tests pass (page.test.tsx + DashboardSkeleton.test.tsx)
  • npx eslint → 0 errors on all 4 changed files

Closes #963

Copilot AI review requested due to automatic review settings March 19, 2026 18:01
@vercel
Copy link

vercel bot commented Mar 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
tryvit Ready Ready Preview, Comment Mar 19, 2026 6:03pm

@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@github-actions
Copy link

📸 PR Screenshots

Captured 4 screenshots (2 mobile, 2 desktop) for 2 changed page(s):

  • common-dashboard
  • dashboard

📥 Download screenshots from workflow artifacts.

Captured by PR Screenshots workflow • 2026-03-19

@github-actions
Copy link

Bundle Size Report

Metric Value
Main baseline 0 KB
This PR 0 KB
Delta +0 KB (+0%)
JS chunks 0
Hard limit 4000 KB

✅ Bundle size is within acceptable limits.

Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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, and CategoriesBrowse in frontend/src/app/app/page.tsx with staggered entry animations and ErrorBoundary wrappers where applicable.
  • Extend DashboardSkeleton to 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.

Comment on lines 104 to +140
@@ -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>
Comment on lines +51 to +54
// 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();
Comment on lines +33 to +38
{/* 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>
@ericsocrat ericsocrat merged commit f4c0401 into main Mar 19, 2026
22 checks passed
@ericsocrat ericsocrat deleted the feat/963-wire-dormant-components branch March 19, 2026 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(dashboard): wire dormant components — HealthInsights, NutritionTip, CategoriesBrowse (#960)

2 participants