Notification system primitives
The deep notification stack — bell badging, popover, full history, snooze and quiet hours, channel matrix, rule builder, cross-channel previews, and the post-click unsubscribe page. Visual references — no real delivery wired.
Notification system primitives is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Notification system primitives: The deep notification stack — bell badging, popover, full history, snooze and quiet hours, channel matrix, rule builder, cross-channel previews, and the post-click unsubscribe page. Visual references — no real delivery wired.
Notification bell
Top-bar bell icon with badge count and pulsing dot for new unread alerts.
Notification popover
Compact dropdown with All / Unread / Mentions tabs and live-updating list.
Notification card
Standalone card with icon, title, excerpt, timestamp, tone, action row.
History timeline
Long-form notification history grouped by date with unread count chips.
Read-state toggle
Tiny circular dot toggling between filled unread and hollow read state.
Snooze controls
Snooze option panel with presets and inline custom date+time picker.
Quiet hours scheduler
Day-of-week chips, start/end times, exceptions for urgent and mentions.
Channel matrix
Preferences matrix — event types × delivery channels with per-cell toggle.
Rule builder
Compose rules: when [event], send to [channel] after [delay], unless [cond].
Subscribe toggle
Subscribe/Unsubscribe button with subtle bell-shake animation on opt-in.
Push preview
Realistic iOS / Android / lockscreen push notification mock with tone toggle.
Email digest preview
Mock email card styled as an inbox preview — sender, subject, preheader.
Preview modal
Cross-channel preview — email + sms + push + in-app side by side.
Unsubscribe template
Post-link-click unsubscribe page with re-subscribe and manage CTAs.
Full notification center
Bell + open popover + history + matrix + quiet hours + preferences side panel.