feat: Tray icon voice detection, customization and notification badge #517

PolisanTheEasyNick · 2024-04-18T12:22:37Z

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

Show icons depending on current voice state
Auto change fill color with override function depending on white/black theme
MacOS devices support
Show notification badge at top of icon

Any ideas about improving PR structure are welcome ^^

Voice Detection Icons

Notification Badge on top of Tray Icon

Special thanks to @MrGarlic1 and @Covkie

Also, on my repo, there is branch tray-icon-old where all changes with tray icons customizations, colors, and so on

Korpyz · 2024-04-19T10:53:28Z

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 · 2024-04-19T15:40:24Z

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.

Korpyz · 2024-04-19T16:05:11Z

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.

src/renderer/patches/tray.ts

src/main/mainWindow.ts

This reverts commit 3ccb0c4.

Covkie · 2024-04-24T20:54:05Z

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

D3SOX · 2024-04-24T20:59:51Z

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 · 2024-04-26T14:01:56Z

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

src/renderer/components/settings/TrayColorPicker.tsx

…ixes

mrbigmouth502 · 2025-03-14T13:53:21Z

The lack of a system tray notification dot in Vencord/Vesktop is the number one thing keeping me from switching to it from the stock Discord client. It's an extremely important feature for my workflow.

Hopefully the conflicts preventing it from being merged can be sorted out. 🙂

Thespikedballofdoom · 2025-06-08T20:05:11Z

The lack of a system tray notification dot in Vencord/Vesktop is the number one thing keeping me from switching to it from the stock Discord client. It's an extremely important feature for my workflow.

Hopefully the conflicts preventing it from being merged can be sorted out. 🙂

Same, really, really pining for this, it's the only thing I look for every update.

Vendicated · 2025-06-27T19:12:04Z

Sorry for the long wait

I really love the addition of the tray icon modifiers, thank you!

Some feedback:

Please resolve conflicts
You seem to have added a native dbus library. Do we really need this? If yes, make sure that it is correctly bundled into the binary when packaging, not just when running dynamically from source. Also make sure this won't cause issues when running on non-linux, and make sure arm64 is correctly supported
I'm not really a fan of the customisations being baked into this PR. I do plan to have one central UI for managing various images but that should be part of a separate change, but the way you implemented it here doesn't really match what I had envisioned. Please remove the image customisation logic & ui. That will drastially reduce the complexity of this change

In other words, do keep all the tray modifiers like showing voice status, notification dot etc, but remove the settings ui

kerriganx · 2025-06-28T05:10:04Z

It is possible to add ability to set custom icon for unread messages instead of red dot? Thanks

PolisanTheEasyNick · 2025-06-28T07:47:40Z

Thank you for response!

You seem to have added a native dbus library. Do we really need this?

I'm using it for getting accent color from Linux system. The library was added because it may be used for some other features, like #686.
Personally, I think that feature "automatically pick accent color and propose it to user" is not very critical, because user can just pick color by himself, so I will remove library and accent color feature from this PR scope.

but remove the settings ui

Should I remain color picker settings?

KarlOfDuty · 2025-06-28T10:44:25Z

I do plan to have one central UI for managing various images but that should be part of a separate change

Is this planned soon? If its like a year away couldn't this gui be allowed to exist until then? It would be a shame to have these features ready to go but then get removed until really far into the future.

Vendicated · 2025-06-28T20:38:24Z

src/main/appBadge.ts


-let lastIndex: null | number = -1;
+let lastBadgeIndex: null | number = -1;
+export var lastBadgeCount: number = -1;


always use let or const, never var

Vendicated · 2025-06-28T20:39:26Z

src/main/mainWindow.ts

        }
    });

+    nativeTheme.on("updated", () => {


this shouldn't be here

and it also needs to unsubscribe if the mainWin is destroyed

Vendicated · 2025-06-28T20:40:42Z

src/main/tray.ts

+export async function setTrayIcon(iconName: string) {
+    if (!tray || tray.isDestroyed()) return;
+    const Icons = new Set(["speaking", "muted", "deafened", "idle", "main"]);
+    if (!Icons.has(iconName)) return;


Suggested change

export async function setTrayIcon(iconName: string) {

if (!tray || tray.isDestroyed()) return;

const Icons = new Set(["speaking", "muted", "deafened", "idle", "main"]);

if (!Icons.has(iconName)) return;

const IconNames = ["speaking", "muted", "deafened", "idle", "main"];

export type IconName = typeof Icons[number];

export async function setTrayIcon(iconName: IconName) {

if (!tray || tray.isDestroyed()) return;

if (!IconNames.includes(iconName)) return;

Vendicated · 2025-06-28T20:42:41Z

src/preload/VesktopNative.ts

            invoke<void>(IpcEvents.CLIPBOARD_COPY_IMAGE, imageBuffer, imageSrc)
    },
+    tray: {
+        setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),


Suggested change

setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),

setIcon: (iconName: IconName) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),

import the IconName type from the file in main

Vendicated · 2025-06-28T20:43:22Z

src/preload/VesktopNative.ts

+    tray: {
+        setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
+        setCurrentVoiceIcon: (listener: (...args: any[]) => void) => {
+            ipcRenderer.on(IpcEvents.SET_CURRENT_TRAY_ICON, listener);


it would be better to use the renderer commands system i recently added instead of listening to an ipc message

Vendicated · 2025-06-28T20:43:58Z

src/renderer/components/settings/Settings.tsx

            defaultValue: true,
-            invisible: () => isMac,
-            disabled: () => Settings.store.tray === false
+            invisible: () => isMac || Settings.store.tray === false


why invisible? it's better to only disable it so the user knows this exists

Vendicated · 2025-06-28T20:44:09Z

src/renderer/components/settings/Settings.tsx

-            defaultValue: false
-        },
+            defaultValue: false,
+            invisible: () => Settings.store.tray === false


Suggested change

invisible: () => Settings.store.tray === false

disabled: () => Settings.store.tray === false

fragtion · 2025-07-23T14:46:39Z

I'm not really a fan of the customisations being baked into this PR. I do plan to have one central UI for managing various images but that should be part of a separate change, but the way you implemented it here doesn't really match what I had envisioned. Please remove the image customisation logic & ui. That will drastially reduce the complexity of this change

In other words, do keep all the tray modifiers like showing voice status, notification dot etc, but remove the settings ui

How should the icons now be modified now that the UI is removed? The default accent color is not striking/noticeable enough for me and I would like to be able to change it like we could earlier in this PR, but there seems to be no obvious way of doing that anymore...? Is this just a temporary regress?

mrbigmouth502 · 2025-09-11T04:31:20Z

This branch is out-of-date with the base branch

Changes can be cleanly merged.

Hmm...

Vendicated · 2025-10-05T18:20:19Z

I just added tray customisation via #1179 so if you rebase on that, you can add customisation back!

Getting the system accent colour will be made possible via #1180 so then we can just use the user's system accent colour for the badge modifier colour

mrbigmouth502 · 2025-12-21T15:48:09Z

I just wanna say thanks to whoever added tray notification badges recently. It's allowed me to finally switch over from the stock Discord client. 🙂

Vendicated reviewed Apr 20, 2024

View reviewed changes

src/renderer/patches/tray.ts Outdated Show resolved Hide resolved

Vendicated reviewed Apr 20, 2024

View reviewed changes

src/main/mainWindow.ts Outdated Show resolved Hide resolved

src/main/mainWindow.ts Outdated Show resolved Hide resolved

PolisanTheEasyNick added 9 commits April 21, 2024 00:00

Added new tray icons

9c6b5f9

Added tray icon voice detection

05def05

removed unused imports

8d77870

Fixed for tests

2dc3ff6

Removed unused logger

eec5eb1

Fixed icon when connected with muted status

68a55e2

added ability to change icon to unread

c3d5dbd

Revert "added ability to change icon to unread"

6108823

This reverts commit 3ccb0c4.

Increased border width

5b3c9b5

PolisanTheEasyNick force-pushed the tray-icon branch from 35b8db0 to 5b3c9b5 Compare April 20, 2024 21:00

PolisanTheEasyNick and others added 4 commits April 21, 2024 02:12

Updated and resized icons

8c6d68e

changes according to reviews

b9e5ad3

fixed bug with not changing to default icon

b89a10e

Merge branch 'main' into tray-icon

5e54eb6

Added custom color support

b95521e

Vendicated reviewed Apr 26, 2024

View reviewed changes

src/renderer/components/settings/TrayColorPicker.tsx Outdated Show resolved Hide resolved

Vendicated reviewed Apr 26, 2024

View reviewed changes

src/renderer/components/settings/TrayColorPicker.tsx Outdated Show resolved Hide resolved

Vendicated reviewed Apr 26, 2024

View reviewed changes

src/renderer/components/settings/TrayColorPicker.tsx Outdated Show resolved Hide resolved

PolisanTheEasyNick and others added 4 commits April 26, 2024 23:51

Merge branch 'main' into tray-icon

b268a59

resolved due to reviews

b8a12a9

fixed case in Settings.tsx

562095e

svg rework, add proposal for accent color (windows,linux), some bug f…

b314f62

…ixes

reimplenet edit-button

b727a1c

Vendicated force-pushed the main branch from 73e83cc to 9ca9e78 Compare March 5, 2025 23:14

nyabinary mentioned this pull request Mar 16, 2025

[REQUEST] Tray Icon Customization Milkshiift/GoofCord#101

Closed

nyabinary mentioned this pull request Apr 1, 2025

Tray Icon Customization Legcord/Legcord#874

Open

PolisanTheEasyNick added 2 commits April 11, 2025 09:48

Merge branch 'main' into tray-icon

6437363

update pnpm-lock

d153872

PolisanTheEasyNick added 2 commits June 28, 2025 12:44

Merge branch 'main' into tray-icon

51f693b

add dbus-native after merging main

b286740

PolisanTheEasyNick marked this pull request as draft June 28, 2025 09:48

dbus-native fixes + colorpicker fix

d514817

PolisanTheEasyNick added 3 commits June 28, 2025 14:47

removed color and icon change logic

2673dd7

removed old svgs

3a9ac94

remove baking badge into icon logic

bf9c305

PolisanTheEasyNick marked this pull request as ready for review June 28, 2025 12:47

PolisanTheEasyNick added 4 commits June 28, 2025 15:49

remove dbus-native deps

a8f5fa5

add line at end of file

82f289b

sync pnpm-lock

f007f38

minor end-fixes

3cda422

Vendicated reviewed Jun 28, 2025

View reviewed changes

Merge branch 'main' into tray-icon

048a97a

	setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
	setIcon: (iconName: IconName) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),

	invisible: () => Settings.store.tray === false
	disabled: () => Settings.store.tray === false

Uh oh!

feat: Tray icon voice detection, customization and notification badge #517

Are you sure you want to change the base?

feat: Tray icon voice detection, customization and notification badge #517

Uh oh!

Conversation

PolisanTheEasyNick commented Apr 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Voice Detection Icons

Notification Badge on top of Tray Icon

Uh oh!

Korpyz commented Apr 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PolisanTheEasyNick commented Apr 19, 2024

Uh oh!

Korpyz commented Apr 19, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Covkie commented Apr 24, 2024

Uh oh!

D3SOX commented Apr 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PolisanTheEasyNick commented Apr 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mrbigmouth502 commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Thespikedballofdoom commented Jun 8, 2025

Uh oh!

Vendicated commented Jun 27, 2025

Uh oh!

kerriganx commented Jun 28, 2025

Uh oh!

PolisanTheEasyNick commented Jun 28, 2025

Uh oh!

KarlOfDuty commented Jun 28, 2025

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

Vendicated Jun 28, 2025

Choose a reason for hiding this comment

Uh oh!

fragtion commented Jul 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrbigmouth502 commented Sep 11, 2025

Uh oh!

Vendicated commented Oct 5, 2025

Uh oh!

mrbigmouth502 commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

PolisanTheEasyNick commented Apr 18, 2024 •

edited

Loading

Korpyz commented Apr 19, 2024 •

edited

Loading

D3SOX commented Apr 24, 2024 •

edited

Loading

PolisanTheEasyNick commented Apr 26, 2024 •

edited

Loading

mrbigmouth502 commented Mar 14, 2025 •

edited

Loading

fragtion commented Jul 23, 2025 •

edited

Loading

mrbigmouth502 commented Dec 21, 2025 •

edited

Loading