Notification Center / Activity Feed
Full-page inbox for user activity, mentions, and system notifications.
Layout
Two-column: left filter sidebar (200px) + right notification list. Or single column on mobile. Filter by type (all, mentions, system, updates). Mark all read at top-right.
Content Slots
Filter sidebar
Category filters: All, Mentions, Assignments, System. Count badge per category.
Notification list
Chronological items. Unread: accent left border or dot. Grouped by date (Today, Yesterday, This week).
Notification item
Actor avatar + action description + target link + relative timestamp.
Empty state
"You're all caught up" — brand-appropriate illustration optional.
Bulk actions
"Mark all read" + optional "Clear all" for non-critical types.
Load more
Pagination or "Load 20 more" — not infinite scroll (notifications need clear endpoint).
Hierarchy Rules
- Unread notifications must be visually distinct from read — left border or background tint
- Timestamp is secondary — action description is the primary element
- Group by date to help users find recent vs. older items
- Mark-as-read should happen on click, not on view (prevents accidental reads)