Fix tray icon indicator (#2041)

* tray icon fix

* use chats icon

* Update source/browser/conversation-list.ts

Co-authored-by: Dušan Simić <dusan.simic1810@gmail.com>

* Update source/browser/selectors.ts

Co-authored-by: Dušan Simić <dusan.simic1810@gmail.com>

* fix typo # -> //

* observe left sidebar

---------

Co-authored-by: Dušan Simić <dusan.simic1810@gmail.com>

Author: stkrknds

source/browser/conversation-list.ts

@@ -213,8 +213,19 @@ function countUnread(mutationsList: MutationRecord[]): void {
 	}
 }
 
+async function updateTrayIcon(): Promise<void> {
+	const chatsIcon = await elementReady(selectors.chatsIcon, {
+		stopOnDomReady: false,
+	});
+
+	// Extract messageCount from ariaLabel
+	const messageCount = chatsIcon?.ariaLabel?.match(/\d+/g) ?? 0;
+	ipc.callMain('update-tray-icon', messageCount);
+}
+
 window.addEventListener('load', async () => {
-	const sidebar = await elementReady('[role=navigation]', {stopOnDomReady: false});
+	const sidebar = await elementReady('[role=navigation]:has([role=grid])', {stopOnDomReady: false});
+	const leftSidebar = await elementReady(`${selectors.leftSidebar}:has(${selectors.chatsIcon})`, {stopOnDomReady: false});
 
 	if (sidebar) {
 		const conversationListObserver = new MutationObserver(async () => sendConversationList());
@@ -234,4 +245,15 @@ window.addEventListener('load', async () => {
 			attributeFilter: ['class'],
 		});
 	}
+
+	if (leftSidebar) {
+		const chatsIconObserver = new MutationObserver(async () => updateTrayIcon());
+
+		chatsIconObserver.observe(leftSidebar, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ['aria-label'],
+		});
+	}
 });

source/browser/selectors.ts

@@ -1,4 +1,6 @@
 export default {
+	leftSidebar: '[class="x9f619 x1n2onr6 x1ja2u2z x78zum5 xdt5ytf x2lah0s x193iq5w xeuugli xycxndf xkhd6sd x4uap5 xexx8yu x18d9i69"]', // ! Tray icon dependency
+	chatsIcon: '[class="x1i10hfl xjqpnuy xa49m3k xqeqjp1 x2hbi6w x13fuv20 xu3j5b3 x1q0q8m5 x26u7qi x972fbf xcfux6l x1qhh985 xm0m39n x9f619 x1ypdohk xdl72j9 x2lah0s xe8uvvx x2lwn1j xeuugli x4uap5 xkhd6sd x1n2onr6 x16tdsg8 x1hl2dhg xggy1nq x1ja2u2z x1t137rt x87ps6o x1lku1pv x1a2a7pz x6s0dn4 x1q0g3np xn3w4p2 x1nn3v0j x1120s5i x1av1boa x1lq5wgf xgqcy7u x30kzoy x9jhf4c xdj266r x11i5rnm xat24cr x1mh8g0r x78zum5"]', // ! Tray icon dependency
 	conversationList: '[role=navigation] [role=grid]',
 	conversationSelector: '[role=main] [role=grid]',
 	notificationCheckbox: '._374b:nth-of-type(4) ._4ng2 input',

source/index.ts

@@ -99,18 +99,7 @@ app.on('ready', () => {
 	});
 });
 
-function getMessageCount(conversations: Conversation[]): number {
-	return conversations.filter(({unread}) => unread).length;
-}
-
-async function updateBadge(conversations: Conversation[]): Promise<void> {
-	// Ignore `Sindre messaged you` blinking
-	if (!Array.isArray(conversations)) {
-		return;
-	}
-
-	const messageCount = getMessageCount(conversations);
-
+async function updateBadge(messageCount: number): Promise<void> {
 	if (!is.windows) {
 		if (config.get('showUnreadBadge') && !isDNDEnabled) {
 			app.badgeCount = messageCount;
@@ -154,16 +143,6 @@ function updateOverlayIcon({data, text}: {data: string; text: string}): void {
 	mainWindow.setOverlayIcon(img, text);
 }
 
-function updateTrayIcon(): void {
-	if (!config.get('showTrayIcon') || config.get('quitOnWindowClose')) {
-		tray.destroy();
-	} else {
-		tray.create(mainWindow);
-	}
-}
-
-ipc.answerRenderer('update-tray-icon', updateTrayIcon);
-
 interface BeforeSendHeadersResponse {
 	cancel?: boolean;
 	requestHeaders?: Record<string, string>;
@@ -437,8 +416,8 @@ function createMainWindow(): BrowserWindow {
 	}
 
 	// Update badge on conversations change
-	ipc.answerRenderer('conversations', async (conversations: Conversation[]) => {
-		updateBadge(conversations);
+	ipc.answerRenderer('update-tray-icon', async (messageCount: number) => {
+		updateBadge(messageCount);
 	});
 
 	enableHiresResources();