feat(desktop): display unread in tray

Author: DIYgod

apps/desktop/src/main/src/lib/dock.ts

@@ -11,3 +11,12 @@ export const setDockCount = (input: number) => {
     app.setBadgeCount(input)
   }
 }
+
+export const getDockCount = () => {
+  if (isWindows) return null
+  if (app.dock) {
+    return app.dock.getBadge()
+  } else {
+    return app.getBadgeCount()
+  }
+}

apps/desktop/src/main/src/lib/tray.ts

@@ -1,32 +1,31 @@
 import { name } from "@pkg"
 import { app, Menu, nativeImage, Tray } from "electron"
 
-import { isMacOS } from "~/env"
+import { isMacOS, isWindows } from "~/env"
 import { getTrayIconPath } from "~/helper"
 import { logger, revealLogFile } from "~/logger"
 import { checkForAppUpdates } from "~/updater"
 
 import { getMainWindowOrCreate } from "../window"
+import { getDockCount } from "./dock"
 import { t } from "./i18n"
 import { store } from "./store"
 
 // https://www.electronjs.org/docs/latest/tutorial/tray
 
 let tray: Tray | null = null
 
-export const registerAppTray = () => {
-  if (!getTrayConfig()) return
-  if (tray) {
-    destroyAppTray()
-  }
-
-  const icon = nativeImage.createFromPath(getTrayIconPath())
-  // See https://stackoverflow.com/questions/41664208/electron-tray-icon-change-depending-on-dark-theme/41998326#41998326
-  const trayIcon = isMacOS ? icon.resize({ width: 16 }) : icon
-  trayIcon.setTemplateImage(true)
-  tray = new Tray(trayIcon)
-
-  const contextMenu = Menu.buildFromTemplate([
+const getTrayContextMenu = () => {
+  const count = getDockCount()
+  return Menu.buildFromTemplate([
+    ...(count
+      ? [
+          {
+            label: `${t("menu.unread")} ${count}`,
+            enabled: false,
+          },
+        ]
+      : []),
     {
       label: t("menu.open", { name }),
       click: showWindow,
@@ -71,9 +70,27 @@ export const registerAppTray = () => {
       },
     },
   ])
-  tray.setContextMenu(contextMenu)
+}
+export const registerAppTray = () => {
+  if (!getTrayConfig()) return
+  if (tray) {
+    destroyAppTray()
+  }
+
+  const icon = nativeImage.createFromPath(getTrayIconPath())
+  // See https://stackoverflow.com/questions/41664208/electron-tray-icon-change-depending-on-dark-theme/41998326#41998326
+  const trayIcon = isMacOS ? icon.resize({ width: 16 }) : icon
+  trayIcon.setTemplateImage(true)
+  tray = new Tray(trayIcon)
+
+  tray.setContextMenu(getTrayContextMenu())
   tray.setToolTip(app.getName())
-  tray.on("click", showWindow)
+  tray.on("mouse-enter", () => {
+    tray?.setContextMenu(getTrayContextMenu())
+  })
+  if (isWindows) {
+    tray.on("click", showWindow)
+  }
 }
 
 const showWindow = () => {

locales/native/en.json

@@ -65,6 +65,7 @@
   "menu.toggleDevTools": "Toggle Developer Tools",
   "menu.toggleFullScreen": "Toggle Full Screen",
   "menu.undo": "Undo",
+  "menu.unread": "Unread",
   "menu.view": "View",
   "menu.window": "Window",
   "menu.zenMode": "Zen Mode",

locales/settings/en.json

@@ -38,7 +38,7 @@
   "actions.action_card.operation_options.matches_regex": "matches regex",
   "actions.action_card.operator": "Operator",
   "actions.action_card.or": "Or",
-  "actions.action_card.rewrite_rules": "Rewrite Rules",
+  "actions.action_card.rewrite_rules": "Rewrite rules",
   "actions.action_card.silence": "Silence",
   "actions.action_card.source_content": "View source content",
   "actions.action_card.then_do": "Then do…",