feat: Tray icon voice detection, customization and notification badge

[PolisanTheEasyNick]

epic pr🚀 cooking explodin
Resolves #294, partially resolves #667

• Show icons depending on current voice state
• Add ability to change colors
• Auto change fill color with override function depending on white/black theme
• Create UI for manually choosing custom icons
• Create functional to choose custom icons
• Add ability to choose from .svg file
• Add reset buttons
• Resize to 16x16 for MacOS devices
• Improve logic for handling situations when user-defined icon can't be loaded
• Add ability to choose which icons to override
• Accent color support for Linux
• Show notification badge at top of icon
• Create own svg for badge icon and follow user-picked color

Any ideas about improving PR structure are welcome ^^

---

Voice Detection Icons

Ability to set custom color:

---

Custom Tray Icons

---

Notification Badge on top of Tray Icon

And with some random screenshot as tray icon xddd

Follows tray custom colors:

Implemented on plain Electron canvas, without using any new dependencies.

Special thanks to @MrGarlic1 and @Covkie

[EtereosDawn]

It's a great feature, but I wanted to say that maybe the colors could be different. I barely see the icon in gnome where the bar is completely black. If you could choose a palette that benefits everyone that would be great. It seems very hidden indeed. for me tray icons vesktop always seem of low quality when compared with other Apps. These two are the last ones that look really bad in gnome. I believe it's just a palette choice like the white of the other tray icons

the color palette doesn't have to be white, just some color that benefits from black.

[PolisanTheEasyNick]

Thank you for feedback! I'm not using any black colors, I believe that it was just small border width. Also, I increased whole icon size. Can you please pull and retest?
What state is on your last screenshot? If it is muted or deafened that means that icons too small, and we need to redraw them completely, because I just took discord's original icons and changed colors to Vesktop ones. They are 24x24 pixels, so maybe they have not resized to proper size in Gnome system.

[EtereosDawn]

Thank you for feedback! I'm not using any black colors, I believe that it was just small border width. Also, I increased whole icon size. Can you please pull and retest? What state is on your last screenshot? If it is muted or deafened that means that icons too small, and we need to redraw them completely, because I just took discord's original icons and changed colors to Vesktop ones. They are 24x24 pixels, so maybe they have not resized to proper size in Gnome system.

I can confirm that it looks much better! Well, maybe the edges of the circle could be a little smoother but I believe that the pixels are due to my monitor. That's great :) thanks for accepting the feedbeck.

[Covkie]

Might it be best to fold #261 into this PR?

[D3SOX]

Why is it pink. I think this should either copy stock Discord or make it customizable. I would prefer the latter then I could select my accent color.
Not sure if it's feasible when it must be a PNG

[PolisanTheEasyNick]

Added ability to change colors. For now, I want to find a way how to disable icon color chooser in settings when tray icon is disabled instead of hiding the whole setting and (maybe) add ability to propose to user his system accent color.
Edit: also I want to slightly refactor code for not reapplying same color to svg on each state change but instead apply them once on color change, somewhere store pngs of needed color and just use them. Done

[alchzh]

Might it be best to fold #261 into this PR?

I just found out about this PR, looks great though I haven't tested it yet. This only shows a notification dot not a number, right? if there's interest in getting numbers in the tray icons like I have it in that PR i'm happy to work on top of your PR @PolisanTheEasyNick (it's an important feature for me)

[PolisanTheEasyNick]

Might it be best to fold #261 into this PR?

I just found out about this PR, looks great though I haven't tested it yet. This only shows a notification dot not a number, right? if there's interest in getting numbers in the tray icons like I have it in that PR i'm happy to work on top of your PR @PolisanTheEasyNick (it's an important feature for me)

I can add that easily (even already did once at c725352 and removed at 8bbe16b), but problem was that numbers on badge in tray icon is very small and not readable, so there was a decision in ds chat to show only notification dot.
Also, this PR is already quite massive and badge logic on Linux is quite overwhelming, so probably the best approach here will be to rework the whole notification badge settings and with this add support of enabling/disabling badge numbers in tray icon :)

[zoobporsor]

Where is the option to change the taskbar and tray icon? I cant find it

[PolisanTheEasyNick]

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray

If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

[prochy-exe]

I tried running this on windows and it works just fine, the only problem is that the icon is not customizable but the notification dot shows up, and the icon changes while in call. The only problem is that it looks a bit strange? I'm not sure if this is visible on the screenshot

If you need some specific logs or anything else please let me know. Thanks!

[PolisanTheEasyNick]

I tried running this on windows and it works just fine, the only problem is that the icon is not customizable

Try retoggle "Enable tray icon" setting

The only problem is that it looks a bit strange? I'm not sure if this is visible on the screenshot

It is strange indeed. Looks like some problem with icon sizes on Windows :c
Probably some custom icons will look better

[zoobporsor]

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

Ok but this doesnt exist in the main .app image? I need to download some special pre-release build? Its not out yet officially?

[PolisanTheEasyNick]

Ok but this doesnt exist in the main .app image?

No, it will be at .app when this PR would be merged and new Vesktop release released

I need to download some special pre-release build? Its not out yet officially?

You can clone tray-icon branch from my fork and start Vesktop from console

[prochy-exe]

Where is the option to change the taskbar and tray icon? I cant find it

Vesktop Settings -> Tray If you still can't find try retoggle "Enable Tray Icon" option. If still can't find then make sure you're using tray-icon branch

Ok but this doesnt exist in the main .app image? I need to download some special pre-release build? Its not out yet officially?

i made this repo so if you trust me enough you can get it from here, if you are not on mac that is https://github.com/prochy-exe/custom-vesktop-builds

[BreadYogurt]

Using SVG files doesn't seem to scale properly for me, here's the results from trying to use the discord tray icons included in the Papirus icon set.

[PolisanTheEasyNick]

Can you please send .svg file you're trying to set? I'll try to test and fix ASAP

[BreadYogurt]

Here it is.

[PolisanTheEasyNick]

You can try to pull. Looks like fixed for me :)
I hope nothing explodes.

[BreadYogurt]

Yep, that fixed it, and more importantly, nothing exploded!

[fluffynuts]

This all looks really good - will it come to the binary releases sometime soon? I'm looking forward to this - it's the biggest thing I'm missing when moving from discord to vesktop, because I disable the noise and pop-outs of notifications, so having the tray icon with a red dot is pretty-much how I know to go check what's going on

Also not a fan of the VC tray icon - it's, imo, not clearly identifiable enough (easy to scan) - an artifact, probably, of an icon which works ok at larger sizes and becomes trash when compressed. Icons are hard. I rarely make a good one.