[$150] Notifications dropdown red cue

[maxceem]

Currently, when we have some notifications we show red cue next to the notification bell in the top-right corner:

When we open notification dropdown, we remember the time of the last notification and hide red cue:

As soon as in the background some new notifications come, the red cue is shown again as there is newer notification then the time we remember.

The only thing, that we remember the time of the latest notification in the redux store. And if we reload the page, the red cue will be shown again.

See demo video https://monosnap.com/file/dFAvB5JTQsti0I0lzyCIHqPlP9kW9x

As were suggested here #3014 (comment) maybe we should remember the time of the latest seen notification in the session storage, to persist the status of the red cue in between page reloads.

[vikasrohit]

@acshields we need to discuss this behaviour.

[vikasrohit]

@maxceem are we marking any notification as seen as well while hiding the red cue?

[maxceem]

@vikasrohit no. By the current logic, we mark notifications as seen when we open the page which mentioned in the notifications link https://github.com/appirio-tech/connect-app/blob/dev/src/components/NotificationsDropdown/NotificationsDropdownContainer.jsx#L46-L52

[acshields]

@vikasrohit @maxceem - the suggestion by maxceem seems to make sense to me ("maybe we should remember the time of the latest seen notification in the session storage, to persist the status of the red cue in between page reloads")... @vikasrohit - are there any potential consequences to this that I am not thinking of?

[vic-georgiev]

Yes - red dot should be used as a visual cue for "new unread messages". The bell icon uses color to show notifications - it is gray when there are no notifications, and stays white when there are notifications that have not been visited. Hope that makes sense. This is because people don't follow all notifications all the time, and they need a way to discern between new notifications and unread notifications.

[vikasrohit]

Thanks @vic-topcoder @acshields for the inputs.

@vic-topcoder so if my understanding is correct:

1. Bell icon is gray when there is no new notification to read
2. Bell icon is white when there is at least one unread notification
3. Bell icon has red cue, when there is at least one unread notification which not seen (we assume all new unread notifications to be seen as soon as user clicks on the Bell icon) yet by the user.

If the above understanding is correct, @maxceem we might need to update the logic to mark all unseen notifications seen when user clicks on the Bell icon after seeing the red cue and mark individual notification as read when the user either explicitly reads the notification. I am not able to understand the need of keeping last seen date in any type of state when we mark all unseen notifications as seen on click of Bell icon as it would automatically persist the state information in terms of unseen/seen flag. And next time when user refreshes the page or even if even if logs in a separate browser, we won't show the red icon as all unseen things are now seen.

[vic-georgiev]

@vikasrohit:

1. Bell icon is gray when there is no new notification to read

No, the bell icon is gray when there are NO notifications (empty)

2. Bell icon is white when there is at least one unread notification

No, the bell icon is white where there are 1+ notifications (already seen, the menu/page has been open), but the notification was not clicked

3. Bell icon has red cue, when there is at least one unread notification which not seen (we assume all new unread notifications to be seen as soon as user clicks on the Bell icon) yet by the user.

Correct

[vikasrohit]

I am bit confused now @vic-topcoder

No, the bell icon is gray when there are NO notifications (empty)

What I meant by no new notification to read is that user has marked all notifications as read explicitly or navigated to the target page/object for that notification either by clicking the notification or directly going to the page/object. We don't show read notifications anywhere, but they exists in database. So, If I understand correctly, your NO notifications (empty) means empty view all notifications page which essentially means that all notifications were marked read implicitly or explicitly.

[vic-georgiev]

Yes - in that case, when there ARE notification in the system, but they are SEEN, the bell icon is white