[hoangsvit]

Implements the approved dashboard mockup — real source code, not another image

Layout

• Two glowing, compact headline KPI cards in rose Listening / teal Online, with actual 7-day sparklines and optional calculated week-over-week growth (not fabricated).
• Four tight summary cards: listening today, online today, count of stations, most-played station.
• One combined interactive SVG area chart, including visible grid, active line markers, hover and touch tooltip, 7/30/90 day and Both/Listening/Online filters, keyboard day selection.
• Compact chart footer with real peak daily values and live tracking switches.
• Per-station leaderboard with real available images/fallback, relative percentages, duration bars and expand/collapse. No mock station data.
• Library heading/icon, segmented navigation and active Library sidebar label updated to match the reference composition.
• Route-scoped midnight/navy/purple palette in dark mode, with light-mode fallback, preserved --radio-* tokens, dark-mode and reduced-motion support.
• All 7 locales; functional statistics deletion, privacy and player behavior preserved.

Guardrails

• No changes to actual radio playback, HLS, persisted metrics or localStorage keys.
• Never show fabricated growth if historical baseline is unavailable.
• No new chart or icon library. Existing audio PlayerSession remains outside NuxtPage.
• Includes tests/library-stats-design.test.mjs and updated docs/PROJECT_CONTEXT.md.

Verification before staging / release

• CI: npm test, dependency audit, Nuxt full prerender / SEO.
• Manual light/dark visual match at 375px and 1440px (compare to mockup).
• Verify actual hover/touch, chart filter/range, no data, toggles, expand rank, fallback logos and current station.
• Merge into develop for preview once checks pass; no direct production merge.

Performance PR #330 touches chart hover geometry; reconcile after both checks rather than overwrite either change.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: ePlus-DEV/radio.eplus.dev
• Branch: design/library-stats-dashboard-20261103
• File: .coderabbit.yaml
• Commit: 1fc6f92
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: edf1dece-41b0-4f4e-ba91-9a960dec91e3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

CodeRabbit Verify

• Run CodeRabbit Verify to test the changes in this pull request.

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing