NotificationDropdown class

Bell icon dropdown with a real-time unread badge over a notification stream.

Uses WPopover for overlay mechanics and StreamBuilder for live unread counts.

Example

NotificationDropdown(
  notificationStream: Notify.notifications(),
  onMarkAsRead: (id) => Notify.markAsRead(id),
  onMarkAllAsRead: () => Notify.markAllAsRead(),
  onNotificationTap: (n) => MagicRoute.to(n.actionUrl ?? '/'),
  onViewAll: () => MagicRoute.to('/notifications'),
)

Restyling it

The defaults are Wind's own palette (bg-white, text-gray-500, bg-red-500), which reads as a foreign control next to an app whose other controls are written in that app's semantic aliases. Four surfaces take an override so an adopter can answer in its own vocabulary without forking the widget: triggerClassName, triggerIconClassName, badgeClassName with badgeTextClassName, and panelClassName.

Each override REPLACES its default outright, layout tokens included, rather than appending to it, so a value that changes one token still has to carry the rest:

NotificationDropdown(
  notificationStream: Notify.notifications(),
  triggerClassName: 'w-9 h-9 rounded-lg flex items-center justify-center '
      'bg-surface hover:bg-surface-container',
  triggerIconClassName: 'text-[18px] text-fg-muted',
  panelClassName: 'w-80 bg-surface border border-color-border rounded-xl',
)

Replacement rather than append is deliberate. Wind's last-wins is per family, and bg-* and dark:bg-* are two families, so an appended light-only override would leave the default's dark:bg-gray-800 alive and the adopter would be debugging a dark mode it never asked for.