Currently, the notifications page does not provide support for controlling the read status of notifications. They get marked automatically as users visit the page and there is no visual representation of their status.
In order to provide more control to organising notifications, we can present notifications in a similar way as the are in the notification panel (distinguishing their status as well as providing an action to mark each as read). In addition, we can provide actions to mark several notifications in one go (those in a given group or the whole list)
Based on T115316, the following changes are proposed:
- Visually distinguish read and unread notifications at the notification page. This is needed to communicate there are unread items and surface the effects of marking them as read. This can be done by displaying them in the same way they are in the panel with one or more of the following: using background color contrast and providing controls to mark them as read.
- Provide a control to mark a given group as read (notifications are grouped by day in the page). If all notifications are read, the button will be disabled.
- Turn the cog icon into a menu to provide access to the more advanced options: mark all as read, notification settings and the learn more link (mockup below).
Design details
The icon for marking as read is a variant of the "check" icon, to be included in the icon repo:
The proposed actions under the cog menu replace the current ones and will link to the same destinations: learn more and settings.
