UI/UX: Design the dashboard 'What's New' panel and badge presentation

[Baskarayelu]

Description

The dashboard includes components/Dashboard/WhatsNewPanel.tsx and components/Dashboard/WhatsNewBadge.tsx, but the presentation, placement, and unread/read behavior of product updates is undesigned. A "What's New" surface can drive feature adoption (e.g. recurring schedules, family approvals) if it is clear and unobtrusive. We need a design for the panel layout, the badge's unread indicator, item read states, and how the panel is opened/dismissed from the dashboard. It should not compete with primary dashboard data for attention.

Requirements and context

• UI/UX scope only.
• Reference components/Dashboard/WhatsNewPanel.tsx, components/Dashboard/WhatsNewBadge.tsx, app/dashboard/page.tsx.
• Design the panel layout (list of updates with date, title, optional CTA).
• Define the badge unread indicator and read-state transitions.
• Specify open/dismiss behavior and placement on the dashboard.

Suggested execution

• Branch: uiux/dashboard-whats-new-panel
• Redline the panel and badge with unread/read states.
• Document open/dismiss interaction and placement.
• Provide an empty state for "no updates."

Test and commit

• Visual QA at 375px and 1280px.
• npm run build
• npm run lint
• a11y: badge unread state not color-only, panel focus trap and dismiss.

Example commit message

feat(uiux): design dashboard what's-new panel and badge

Guidelines

• Document read/unread behavior.
• Keep the panel unobtrusive relative to primary data.
• Timeframe: 96 hours