Comment Notification Inbox
Cross document notification feed with mention, reply, and resolve items, unread dots, type filter chips, and a mark all read action.
Cross document notification feed with mention, reply, and resolve items, unread dots, type filter chips, and a mark all read action.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Comment Notification Inbox is the panel behind the bell icon: a cross-document activity feed of six notifications spanning mentions, replies, reactions, and a resolution. Maya Chen and Noah Park mention Avery, Jordan Lee and Sofia Reyes reply, Priya Nair reacts, and Riley Parker resolves a followed thread. Each row badges a type icon onto the actor avatar, states the action and the document, and quotes a one-line snippet. Unread rows carry a tinted background and a dot, and a Mark all read action sits in the header.
Notifications are one typed array with an unread flag and a per-row icon that drives the avatar badge. A filter chip row above the list counts All, Mentions, Replies, and Resolved, with the active chip inverted. The footer note sets expectations: notifications older than 30 days archive automatically, and mentions also send an email after an hour offline.
Reach for this block as the notifications surface for any comment-heavy product, wired to your activity endpoint and read-state store. Bind the chips to your filter query and Mark all read to your bulk-update mutation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the document collaboration inbox. Other activity feed configurations:
Tip: badging the type icon onto the avatar lets a reader triage the feed at a glance, keep the mention, reply, and resolution glyphs distinct so scanning stays fast.