From 92ef0880f84fcbb954138ee8e7e93a42558d0dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E6=9F=B1?= <dazhu@staruniongame.com>
Date: Tue, 10 Jun 2025 18:04:52 +0800
Subject: [PATCH] tray: Add unread count badge option for macOS tray icon

Add a new configuration option 'trayBadgeCount' that allows users to
display unread message count on the tray icon for macOS. When enabled,
the tray icon shows the unread count as a title badge instead of
modifying the icon image itself.

This change:
- Adds trayBadgeCount configuration option to config schema
- Adds toggle-tray-badge-count IPC message for preference updates
- Implements displayTrayIcon() function to handle platform-specific
  tray icon display logic
- Updates preference UI to show the option only on macOS
- Refactors tray logic to use consistent display methods across platforms

The feature is macOS-specific because other platforms already use
icon overlays to show unread counts, while macOS can use the cleaner
title badge approach.
---
 app/common/config-schemata.ts                 |  1 +
 app/common/typed-ipc.ts                       |  1 +
 .../js/pages/preference/general-section.ts    | 30 +++++++++++++
 app/renderer/js/tray.ts                       | 44 +++++++++++++++----
 4 files changed, 67 insertions(+), 9 deletions(-)

diff --git a/app/common/config-schemata.ts b/app/common/config-schemata.ts
index e2db7b80f..b7e89c3b1 100644
--- a/app/common/config-schemata.ts
+++ b/app/common/config-schemata.ts
@@ -33,6 +33,7 @@ export const configSchemata = {
   startAtLogin: z.boolean(),
   startMinimized: z.boolean(),
   trayIcon: z.boolean(),
+  trayBadgeCount: z.boolean(),
   useManualProxy: z.boolean(),
   useProxy: z.boolean(),
   useSystemProxy: z.boolean(),
diff --git a/app/common/typed-ipc.ts b/app/common/typed-ipc.ts
index 269f42984..df7e06435 100644
--- a/app/common/typed-ipc.ts
+++ b/app/common/typed-ipc.ts
@@ -73,6 +73,7 @@ export type RendererMessage = {
   "toggle-sidebar": (show: boolean) => void;
   "toggle-silent": (state: boolean) => void;
   "toggle-tray": (state: boolean) => void;
+  "toggle-tray-badge-count": (newValue: boolean) => void;
   toggletray: () => void;
   tray: (argument: number) => void;
   "update-realm-icon": (serverURL: string, iconURL: string) => void;
diff --git a/app/renderer/js/pages/preference/general-section.ts b/app/renderer/js/pages/preference/general-section.ts
index df48a5ab3..b400a8e6a 100644
--- a/app/renderer/js/pages/preference/general-section.ts
+++ b/app/renderer/js/pages/preference/general-section.ts
@@ -60,6 +60,16 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
           </div>
           <div class="setting-control"></div>
         </div>
+        <div
+          class="setting-row"
+          id="tray-badge-count-option"
+          style="display:${process.platform === "darwin" ? "" : "none"}"
+        >
+          <div class="setting-description">
+            ${t.__("Show unread count on tray icon")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
         <div
           class="setting-row"
           id="dock-bounce-option"
@@ -213,6 +223,7 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
 
   updateTrayOption();
   updateBadgeOption();
+  updateTrayBadgeCountOption();
   updateSilentOption();
   autoUpdateOption();
   betaUpdateOption();
@@ -288,6 +299,25 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
     });
   }
 
+  function updateTrayBadgeCountOption(): void {
+    generateSettingOption({
+      $element: $root.querySelector(
+        "#tray-badge-count-option .setting-control",
+      )!,
+      value: ConfigUtil.getConfigItem("trayBadgeCount", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("trayBadgeCount", false);
+        ConfigUtil.setConfigItem("trayBadgeCount", newValue);
+        ipcRenderer.send(
+          "forward-message",
+          "toggle-tray-badge-count",
+          newValue,
+        );
+        updateTrayBadgeCountOption();
+      },
+    });
+  }
+
   function updateDockBouncing(): void {
     generateSettingOption({
       $element: $root.querySelector("#dock-bounce-option .setting-control")!,
diff --git a/app/renderer/js/tray.ts b/app/renderer/js/tray.ts
index 289090aa4..e14e01442 100644
--- a/app/renderer/js/tray.ts
+++ b/app/renderer/js/tray.ts
@@ -178,6 +178,30 @@ const createTray = function (): void {
   }
 };
 
+const shouldShowTrayIcon = function (): boolean {
+  return (
+    process.platform === "darwin" ||
+    process.platform === "win32" ||
+    process.platform === "linux"
+  );
+};
+
+const displayTrayIcon = function (tray: ElectronTray): void {
+  if (process.platform === "darwin") {
+    tray.setImage(iconPath());
+    const showTrayBadgeCount = ConfigUtil.getConfigItem(
+      "trayBadgeCount",
+      false,
+    );
+    tray.setTitle(showTrayBadgeCount && unread > 0 ? unread.toString() : "");
+  } else {
+    const image = renderNativeImage(unread);
+    tray.setImage(image);
+  }
+
+  tray.setToolTip(`${unread} unread messages`);
+};
+
 export function initializeTray(serverManagerView: ServerManagerView) {
   ipcRenderer.on("destroytray", () => {
     if (!tray) {
@@ -197,17 +221,15 @@ export function initializeTray(serverManagerView: ServerManagerView) {
       return;
     }
 
-    // We don't want to create tray from unread messages on macOS since it already has dock badges.
-    if (process.platform === "linux" || process.platform === "win32") {
+    if (shouldShowTrayIcon()) {
       if (argument === 0) {
         unread = argument;
         tray.setImage(iconPath());
+        tray.setTitle("");
         tray.setToolTip("No unread messages");
       } else {
         unread = argument;
-        const image = renderNativeImage(argument);
-        tray.setImage(image);
-        tray.setToolTip(`${argument} unread messages`);
+        displayTrayIcon(tray);
       }
     }
   });
@@ -225,10 +247,8 @@ export function initializeTray(serverManagerView: ServerManagerView) {
     } else {
       state = true;
       createTray();
-      if (process.platform === "linux" || process.platform === "win32") {
-        const image = renderNativeImage(unread);
-        tray!.setImage(image);
-        tray!.setToolTip(`${unread} unread messages`);
+      if (shouldShowTrayIcon()) {
+        displayTrayIcon(tray!);
       }
 
       ConfigUtil.setConfigItem("trayIcon", true);
@@ -239,6 +259,12 @@ export function initializeTray(serverManagerView: ServerManagerView) {
 
   ipcRenderer.on("toggletray", toggleTray);
 
+  ipcRenderer.on("toggle-tray-badge-count", () => {
+    if (tray && shouldShowTrayIcon()) {
+      displayTrayIcon(tray);
+    }
+  });
+
   if (ConfigUtil.getConfigItem("trayIcon", true)) {
     createTray();
   }