Two adjacent notification surfaces: the bell-icon popover that opens from the app shell (15d) and the email-digest preview that shows a user what their daily/weekly summary will contain (15e). Both compose existing primitives — `menu-ui` + per-row `list-item-ui` shapes.
When to use
Bell menu: the ambient affordance — a small popover the user
glances at when the bell icon shows an unread count. Distinct
from the full notifications feed (15a) which is a dedicated
page and from toasts (08e) which are transient.
Digest preview: the in-app preview of what a scheduled email
will contain — used inside notification-prefs (15c) so the
user can validate the digest before committing.
Bell menu — empty
Default state when there are no unread notifications. Uses an empty-state-ui in the menu body so the popover doesn't feel broken; "View all" footer links to the full feed.
Notifications
Bell menu — unread items
Each row carries an avatar (or icon for system events), a one-line summary, a timestamp, and a small unread-dot. Clicking a row marks it read and navigates to the source. "Mark all read" + "View all activity" in the footer.
Notifications3 newAvery Chen commented on your PR"OKLCH ramp comment" · 4 minutes agoJordan Lee assigned you a task"Audit kanban accessibility" · 1 hour agoBuild #4823 succeeded on main2 hours agoSam Park mentioned you"#design — auth review" · yesterdayStorage 80% full2 days ago · Workspace
Email digest preview
The in-app rendering of the digest email — frequency header, "What's in this digest" summary, sectioned content. Used inside notification prefs so the user can see exactly what a daily/weekly digest will look like before opting in.
Weekly digest previewThis is what your Monday morning email will containHi Kim,Here's what happened in Adia AI this week.Mentions · 4Avery on "OKLCH ramp comment""Should we use chrome or data scale here?" · TuesdayJordan on "Auth flow rebuild""Nominating for review" · WednesdayActivity · 123 PRs mergedv0.0.26 hotfix, attribute-API migration sweep, INDEX update9 issues closed5 by you, 4 by teamComing upDesign review — Tuesday 2pmv0.0.27 cut planning
Composition rules
Unread dot, not unread badge — a small primary-tinted dot on the trailing edge of the row reads as "new" without screaming. Per-row badges with counts are noise on a glance-surface.
Cap the menu at ~5–7 rows — anything more is a feed, not a glance. Older items live in the full activity surface (15a) reachable via "View all".
Empty state is mandatory — bare "No notifications" text reads as broken. The empty-state-ui treatment (icon + heading + description) is the difference between "system is working and there's nothing to show" vs. "did the page fail to load?".
Mark-all-read goes in the footer — destructive-ish actions (clearing the unread state across many items) live below a divider, not inline with row clicks.
Digest previews use the same components as the email — the in-app preview should be visually faithful to what the email renders. Don't render a different layout for the preview.
"Send test" on the digest preview — let the user fire one to themselves before committing to a recurring schedule. The preview is a confidence check; the test is the proof.
Frequency lives in the header — "Weekly digest", "Monday 8am". Without that anchor, users don't know if the preview is "what I'd see today" or "the standard shape".