Added number badge on top the tab icon to show the number of active conversations

[arjenrschat]

Description

Improved logo.svg
- fixes to render correctly in firefox
- correct size
- the icon is aligned to a 2x2 grid to render crisp on retina
- has update colours that work on light and dark mode
Added: Show number of active conversations on top of the badge icon

Screenshots

[reichert621]

hey @arjenrschat! thanks for sharing this, we'll definitely play around with it and see if it looks good to merge :)

a couple things:

• was most of the code copy/pasted from somewhere? if so, can you share the link?
• how many numbers does this support? i.e. if there are 99 messages, will it show "99" in the icon badge?
• is there a way we can make the number fit in the red circle more nicely?

[arjenrschat]

@reichert621

The code is written by me.
It supports 1-9 messages, if the number is higher a + is shown
The font is hand drawn based on old school bitmap font on a 4x7 grid

I agree the alignment can be improved. Unfortunately the available space is limited because the number badge can only be show in the same area as the icon. And I did not want to change the paper cups logo too much.

Compared to slack, they use just a quarter circle to indicate a new message

Options:
Use a larger font 5x7 or 5x9 font for better readability or a font that is available on most platforms to render the text.
Larger red badge for better alignment options

[reichert621]

got it! maybe we can start off simple with something like Slack, and just show a red dot when there are unread messages... I think that will look nicer for the time being

[arjenrschat]

The number is removed from the badge

[reichert621]

thanks @arjenrschat -- can you share a screenshot of how the latest code looks in both light and dark mode?

[arjenrschat]

Here you go.

Old vs new in dark mode

Light theme