Indicate unread mentions in UI

[towerofnix]

Currently if there's an unread mention, we show that in the title bar. We should also show that in the UI somehow. Discord puts a little marker icon beside the mentions button, as well as a number-of-unread-mentions in place of the channel's icon in the sidebar. To me, those both sound like they'd work well with Decent's UI.

Ping @PullJosh for design thoughts.

[PullJosh]

I love the idea of putting a red indicator dot on the icon for the "mentions" tab in the right sidebar. If we're going to do that, it really makes sense to update the Icon component to be able to draw an indicator dot over any icon just by being passed a boolean prop. Then we can use Icon in the channel list as well as the sidebar tabs.

[bates64]

I think we should have two colours of indicator for unread and mentioned. Mentions can be (are?) per-channel so the channel would have a blue indicator if you have unread mentions.

Also we should show this data in the server dropdown also.

[PullJosh]

I think we should have two colours of indicator for unread and mentioned.

I definitely like the idea of making a distinction. It might be fun to play around with using a red @ sign in place of the usual red dot. No idea if it would look good, but could be fun to try.

[PullJosh]

I gave it an honest effort, but I'm not sure that there's enough room to pull it off. The normal dot is 6px wide. I gave myself 8px to work with in the @ icon, but that's still not particularly spacious.

[bates64]

@PullJosh We can go for a more muted dot for 'unread' and a strong one (eg. red) for mention, then?

[PullJosh]

Sounds good.