Notifications
Real-time notification panel with contact-colored badges and grouped messages
The notification system delivers real-time updates about new messages, event changes, and system activity. You access it through the bell icon in the header dock.
Bell Icon and Badge
A bell icon button sits in the header. When unread notifications exist, a badge appears at the top-right corner of the icon showing the unread count. Counts above 99 display as "99+". When all notifications are read, the badge disappears entirely.
Popover Panel
Clicking the bell icon opens a popover panel anchored to the bottom-right of the button with an 8-pixel offset. The panel is 320 pixels wide and scrolls vertically with a maximum height of min(60vh, 420px). A themed scrollbar with hidden horizontal overflow keeps the panel compact.
The panel header shows the title "Notifications" on the left. When unread items exist, a "Mark all as read" link appears on the right. Closing the panel automatically marks all visible notifications as read.