feat(analytics): add category popularity chart widget

[Joycejay17]

Problem

Category popularity data isn't visualized anywhere on the analytics dashboard. Product/growth needs a way to see which puzzle categories are getting the most engagement (unique users and puzzles solved) so content investment can be prioritized. Closes #573.

Solution

Added CategoryPopularityChart.tsx, a horizontal bar chart ranking categories by the selected metric, following the same structure/styling as the existing DauMauChart and RetentionCurveChart widgets:

• Horizontal recharts BarChart with categories on the Y-axis and the metric value on the X-axis.
• A segmented toggle to switch the ranked metric between Unique Users and Puzzles Solved.
• Bars are re-sorted descending on the client whenever the data or selected metric changes, so ordering is guaranteed regardless of the order the API returns rows in.
• Date range presets (7D/30D/90D) plus manual start/end date inputs, matching the existing widgets' filter pattern, with the same tablet-collapsible "Filters" panel introduced in the recent tablet-responsiveness pass.
• Loading / error (with retry) / empty-state handling, consistent with the other analytics widgets.
• Added getCategoryPopularity() and its request/response types to lib/api/analyticsApi.ts, calling GET /analytics/categories/popularity with startDate/endDate query params.

Note: the backend endpoint (#529), provider (#513), and entity (#495) for /analytics/categories/popularity are tracked as separate open issues and aren't implemented yet. This PR only covers the frontend widget, per the issue's scope ("Files to touch: frontend/src/components/analytics/CategoryPopularityChart.tsx"). The response shape consumed here ({ categoryId, categoryName, uniqueUsers, puzzlesSolved } inside the existing AnalyticsMetricResult-style envelope) mirrors the fields described in those backend issues so no rework should be needed once the endpoint lands. Until then, the widget will show its error/retry state against a live backend.

As with the recently-merged RetentionCurveChart, this component is added standalone and not yet wired into app/analytics/page.tsx, matching that PR's precedent.

Acceptance Criteria

• Bars are sorted descending by the selected metric
• Widget supports toggling between unique users and puzzles solved

Testing Notes

• npm --workspace frontend exec -- tsc --noEmit -p tsconfig.json — passes, no new errors.
• npm --workspace frontend run build — production build succeeds.
• npm --workspace frontend run lint — no new lint errors/warnings introduced (pre-existing errors in unrelated files untouched).
• Manually rendered the component locally (temporarily wired into /analytics) via next dev and confirmed the widget mounts, the metric toggle and date controls render, and it correctly shows its loading state during SSR with no console/render errors. Since the backend endpoint doesn't exist yet, the live data path (success/empty/sorted-bars rendering) couldn't be exercised end-to-end against real data — only the wiring, sort logic, and states around it were verified. No headless browser was available in this environment to capture a visual screenshot.

[vercel]

@pope-h is attempting to deploy a commit to the aminubabafatima8-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
mind-block-app-frontend	Ready	Preview, Comment	Jul 23, 2026 11:27pm