Add a third state to header icons

[dcsjapan]

Currently the bell and flag icons have two states: orange with a number, blue with no number. This means that clicking the icon to reveal notifications (or reports) cancels the orange state and makes it look as if there are no unread notifications, even when there are.

How about adding a third state, as follows:

• Orange with number: there are new unread notifications since you last checked here
• Blue with number: there are unread notifications, but nothing new since you last checked
• Blue with no number: there are no unread notifications

This would remind the user of unread notifications, while at the same time alerting him to new ones.

[franzliedke]

I agree about this one. Will take it on. 👍

[franzliedke]

I've made some progress on this. The idea is the following:

• Calculate "unread" notifications in the NotificationList, by looping over the cached notifications, and filtering for unread notifications like this:

return app.cache.notifications.filter(notification => !notification.isRead()).length;

• Show the number of "unread" notifications in the little bubble next to the dropdown button.
• Only highlight (with color) the dropdown button when any notifications are "new".

Getting that last part ("new" notifications) right is the hardest part, I guess. Where should this state be kept, @tobscure? I've already taken care of the styling (only apply the accent color when a class "new" is applied to the button), but I'm hesitant about the data flow...

[tobyzerner]

@franzliedke How about this approach:

• Change User::getUnreadNotificationsCount() so that it doesn't care about time being more recent than notifications_read_time – i.e. it simply gets the number of notifications where not is_read.
• Add a new method (User::getNewNotificationsCount()?) which does what getUnreadNotificationsCount used to do.
• Output both of those values in the UserSerializer.
• Always show the unreadNotificationsCount in the bubble on the dropdown button.
• Only highlight the button if newNotificationsCount > 0.

[franzliedke]

I implemented this, and it seems to work well. Even thought of edge cases. ;)

Can you please review, @tobscure? Especially the following things:

• Does it make sense?
• Did I use the correct LESS color variables?

That said, this still needs to be done for the flagged posts dropdown.

[kirkbushell]

Do we maintain notifications beyond being read?

[tobyzerner]

@kirkbushell Yep we keep them around in case people want to refer back to them. But we should indeed think about having some kind of cleanup process that deletes notifications older than X days. Somewhat related to #217.

@franzliedke Great work! All looks good to me. See above commit for the only thing I added.