feat: Allow tray icon customization

[MrGarlic1]

Added option in Vesktop settings to select a custom tray icon, resolves #571

Only tested on Fedora 40 KDE. May need additional testing on Windows, I don't currently have access to a Windows device right now.

[Vendicated]

wow looks really good so far especially for a first contribution!

i'm not sure about the ui though, it would probably be much better to actually show the image that is chosen and maybe have it so you can click the image to change it? something like the profile picture picker (but way more simplistic)

also i can see a bit of inconsistent formatting, make sure you have prettier properly configured!

[MrGarlic1]

I had some issues with displaying an image from the local filesystem on the Vesktop settings page. I ended up moving the tray icon setting to a tray icon context menu item, where I think it makes more sense to be. (old method kept on a branch in case this ends up being worse)

When selected, it brings up this window which has the same functionality as the setting did before while also showing the current icon. This could probably use some additional formatting to make it look better.

[Tiagoquix]

Many thanks for your PR!

To be honest, I don't think an option as "important" as this should be so easily accessible with via right-click. Vendicated's idea ends up fitting better (of displaying the icon on the settings page next to the "Tray Icon" option, instead of your idea of adding new buttons).

[MrGarlic1]

Many thanks for your PR!

To be honest, I don't think an option as "important" as this should be so easily accessible with via right-click. Vendicated's idea ends up fitting better (of displaying the icon on the settings page next to the "Tray Icon" option, instead of your idea of adding new buttons).

That's my end goal too, I just shied away due to literally never having used css or html. After much learning (read: pain), the recent commits moved it back to being in the Vesktop settings menu, with a better UI:

When hovered (test icon shown):

Currently the edit icon image is a hard link to a discord attachment which I don't think are permanent links anymore. Unsure if I should store the icon somewhere in the project itself or try and find a permanent URL for it.

[TwilightKiddy]

Played around with it under Arch with KDE Plasma, working mighty fine with the exception of a missing edit icon.
Is it possible to allow .svg and .ico files to be chosen? They are far more common for distributing app icons, as far as I'm aware.

[MrGarlic1]

Played around with it under Arch with KDE Plasma, working mighty fine with the exception of a missing edit icon. Is it possible to allow .svg and .ico files to be chosen? They are far more common for distributing app icons, as far as I'm aware.

I tried doing this earlier, but Electron's NativeImage (which Tray uses) can only create images from .png and .jpg files. (RIP GIF tray icons)

[Tiagoquix]

To the author of this PR: could you test if this also changes the icon when pressing alt+tab? (In KDE, there is the Vencord icon when you press alt+tab.)

[rootiest]

To the author of this PR: could you test if this also changes the icon when pressing alt+tab? (In KDE, there is the Vencord icon when you press alt+tab.)

On KDE I can override the icon used in the task switcher by:

• First change the icon for Vesktop in your app menu to your preferred icon, then
• Right-click on the Vesktop titlebar and go to More Actions > Configure Special Application Settings
• Click the Detect Window Properties button
• Select the Vesktop window with the crosshair
• Click on the first one: Window Class Application
• Click Add Property then Desktop Filename
• Make sure this matches the name of the .desktop file used in your App menu, typically just "vesktop"
• Choose "Apply Now"
• Click Apply, and then verify the icon has changed to your liking
• Change "Apply Now" to "Force"
• Name and save the new rule.
• Close and reopen Vesktop to verify the icon change sticks.
• Enjoy your new icon in the App menu, taskbar, and app switcher (not tray, yet!)

Sorry this might seem kind of long/complicated, but it's actually pretty straightforward once you do it

[Tiagoquix]

@rootiest Thank you very much! I knew KDE had these special properties, but I didn't know it reached this level of customization!

And, in fact, it's pretty straightforward to do this (just like you said).

Have a wonderful day, my friend!

[SomeAspy]

It might be worth adding an option to use the favicon the discord website sends, because this dynamically updates the number of pings for just about any number. We do this in armcord, if you would like to see a working example.
https://github.com/ArmCord/ArmCord/blob/573c96b4ba80705b1bc5f85c5a737258481023e9/src/discord/window.ts#L168