Add toggle setting for Mac tray icon unread count display

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(),

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;

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")!,

app/renderer/js/tray.ts

@@ -179,6 +179,35 @@ 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(
+    t.__mf(
+      "{number, plural, one {# unread message} other {# unread messages}}",
+      {number: `${unread}`},
+    ),
+  );
+};
+
 export function initializeTray(serverManagerView: ServerManagerView) {
   ipcRenderer.on("destroytray", () => {
     if (!tray) {
@@ -198,22 +227,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(t.__("No unread messages"));
       } else {
         unread = argument;
-        const image = renderNativeImage(argument);
-        tray.setImage(image);
-        tray.setToolTip(
-          t.__mf(
-            "{number, plural, one {# unread message} other {# unread messages}}",
-            {number: `${argument}`},
-          ),
-        );
+        displayTrayIcon(tray);
       }
     }
   });
@@ -231,10 +253,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);
@@ -245,6 +265,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();
   }