Objective
- Make it easy to clear notification backlog in one action.
- Reduce the friction and stress caused by a large unread notification count without hiding notification state entirely.
Background
- The current notifications experience can feel overwhelming when the unread count grows large.
- Hiding the badge would reduce visual noise, but the simpler and more direct improvement is to let users clear notifications in bulk.
- Today, notifications can be marked as read one at a time, but there is no bulk Mark all as read action.
- The current sidebar badge is shown whenever the unread count is greater than zero.
- Existing screenshot of the sidebar badge:
- Proposed placement for the bulk action in the notifications popover:
Scope
Frontend
- The sidebar notifications entry point lives in
src/components/navbar/NavNotifications.tsx, where the unread badge is rendered fromunreadCount. - The notifications list UI lives in
src/components/dashboard/RecentMentions/MentionsList.tsx. - Current behavior in
MentionsList.tsxsupports per-notification read actions only: - an explicit mark-as-read control for individual unread items
- an implicit mark-as-read action when opening an individual notification
- There is currently no bulk action in the notifications UI, no select-all flow, and no call path for a bulk mark-all-read action.
- The requirement is to add a clear bulk Mark all as read action in the notifications experience.
- Add Mark all as read to the notifications popover next to View All Notifications.
- Keep the existing single-notification mark as read behavior available alongside the new bulk action.
- Single-notification mark as read should run without a confirmation step.
- Mark all as read should require a confirmation step before applying the action.
- After a successful bulk action, the UI should immediately clear the sidebar badge, refresh the notifications list, and empty the unread view.
- This behavior is intended for every user who has notifications.
References
- Key code paths:
src/components/navbar/NavNotifications.tsxsrc/components/dashboard/RecentMentions/MentionsList.tsx