feat: implement showNotificationsCountInTray setting

main.js

@@ -66,15 +66,33 @@ menubarApp.on('ready', () => {
   ipcMain.on('hide-window', () => menubarApp.hideWindow());
 
   ipcMain.on('app-quit', () => menubarApp.app.quit());
-  ipcMain.on('update-icon', (_, arg) => {
-    if (!menubarApp.tray.isDestroyed()) {
-      if (arg === 'TrayActive') {
-        menubarApp.tray.setImage(iconActive);
-      } else {
-        menubarApp.tray.setImage(iconIdle);
+
+  ipcMain.on(
+    'update-icon',
+    (_, { notificationsCount, showNotificationsCountInTray }) => {
+      if (!menubarApp.tray.isDestroyed()) {
+        // only update tray icon if a notificationsCount has been provided
+        if (notificationsCount !== undefined) {
+          if (notificationsCount === 0) {
+            menubarApp.tray.setImage(iconIdle);
+          } else {
+            menubarApp.tray.setImage(iconActive);
+            if (showNotificationsCountInTray) {
+              menubarApp.tray.setTitle(String(notificationsCount || ''));
+            }
+          }
+        }
+
+        // change the title without changing the icon (when toggling the setting for eg)
+        if (showNotificationsCountInTray) {
+          menubarApp.tray.setTitle(String(notificationsCount || ''));
+        } else if (showNotificationsCountInTray === false) {
+          menubarApp.tray.setTitle('');
+        }
       }
-    }
-  });
+    },
+  );
+
   ipcMain.on('set-login-item-settings', (event, settings) => {
     app.setLoginItemSettings(settings);
   });

src/__mocks__/mock-state.ts

@@ -11,9 +11,10 @@ export const mockSettings: SettingsState = {
   participating: false,
   playSound: true,
   showNotifications: true,
+  showNotificationsCountInTray: false,
   showBots: true,
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
-  colors: false,
+  colors: null,
   markAsDoneOnOpen: false,
 };

src/components/NotificationRow.tsx

@@ -34,10 +34,10 @@ export const NotificationRow: React.FC<IProps> = ({
     openBrowser();
 
     if (settings.markAsDoneOnOpen) {
-      markNotificationDone(notification.id, hostname);
+      markNotificationDone(notification.id, hostname, settings);
     } else {
       // no need to mark as read, github does it by default when opening it
-      removeNotificationFromState(notification.id, hostname);
+      removeNotificationFromState(notification.id, hostname, settings);
     }
   }, [settings]);
 
@@ -117,7 +117,9 @@ export const NotificationRow: React.FC<IProps> = ({
         <button
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
-          onClick={() => markNotificationDone(notification.id, hostname)}
+          onClick={() =>
+            markNotificationDone(notification.id, hostname, settings)
+          }
         >
           <CheckIcon size={16} aria-label="Mark as Done" />
         </button>
@@ -133,7 +135,7 @@ export const NotificationRow: React.FC<IProps> = ({
         <button
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Read"
-          onClick={() => markNotification(notification.id, hostname)}
+          onClick={() => markNotification(notification.id, hostname, settings)}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>

src/context/App.test.tsx

@@ -103,7 +103,11 @@ describe('context/App.tsx', () => {
         const { markNotification } = useContext(AppContext);
 
         return (
-          <button onClick={() => markNotification('123-456', 'github.com')}>
+          <button
+            onClick={() =>
+              markNotification('123-456', 'github.com', mockSettings)
+            }
+          >
             Test Case
           </button>
         );
@@ -120,6 +124,7 @@ describe('context/App.tsx', () => {
         { enterpriseAccounts: [], token: null, user: null },
         '123-456',
         'github.com',
+        mockSettings,
       );
     });
 
@@ -128,7 +133,11 @@ describe('context/App.tsx', () => {
         const { markNotificationDone } = useContext(AppContext);
 
         return (
-          <button onClick={() => markNotificationDone('123-456', 'github.com')}>
+          <button
+            onClick={() =>
+              markNotificationDone('123-456', 'github.com', mockSettings)
+            }
+          >
             Test Case
           </button>
         );
@@ -145,6 +154,7 @@ describe('context/App.tsx', () => {
         { enterpriseAccounts: [], token: null, user: null },
         '123-456',
         'github.com',
+        mockSettings,
       );
     });
 
@@ -172,6 +182,7 @@ describe('context/App.tsx', () => {
         { enterpriseAccounts: [], token: null, user: null },
         '123-456',
         'github.com',
+        mockSettings,
       );
     });
 
@@ -201,6 +212,7 @@ describe('context/App.tsx', () => {
         { enterpriseAccounts: [], token: null, user: null },
         'manosim/gitify',
         'github.com',
+        mockSettings,
       );
     });
 
@@ -290,6 +302,7 @@ describe('context/App.tsx', () => {
         participating: true,
         playSound: true,
         showNotifications: true,
+        showNotificationsCountInTray: false,
         showBots: true,
         colors: null,
         markAsDoneOnOpen: false,
@@ -329,6 +342,7 @@ describe('context/App.tsx', () => {
         participating: false,
         playSound: true,
         showNotifications: true,
+        showNotificationsCountInTray: false,
         showBots: true,
         colors: null,
         markAsDoneOnOpen: false,

src/context/App.tsx

@@ -34,6 +34,7 @@ export const defaultSettings: SettingsState = {
   participating: false,
   playSound: true,
   showNotifications: true,
+  showNotificationsCountInTray: false,
   showBots: true,
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
@@ -52,10 +53,22 @@ interface AppContextState {
   notifications: AccountNotifications[];
   isFetching: boolean;
   requestFailed: boolean;
-  removeNotificationFromState: (id: string, hostname: string) => void;
+  removeNotificationFromState: (
+    id: string,
+    hostname: string,
+    settings: SettingsState,
+  ) => void;
   fetchNotifications: () => Promise<void>;
-  markNotification: (id: string, hostname: string) => Promise<void>;
-  markNotificationDone: (id: string, hostname: string) => Promise<void>;
+  markNotification: (
+    id: string,
+    hostname: string,
+    settings: SettingsState,
+  ) => Promise<void>;
+  markNotificationDone: (
+    id: string,
+    hostname: string,
+    settings: SettingsState,
+  ) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
   markRepoNotificationsDone: (id: string, hostname: string) => Promise<void>;
@@ -180,31 +193,31 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
   const markNotificationWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await markNotification(accounts, id, hostname),
+      await markNotification(accounts, id, hostname, settings),
     [accounts, notifications],
   );
 
   const markNotificationDoneWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await markNotificationDone(accounts, id, hostname),
+      await markNotificationDone(accounts, id, hostname, settings),
     [accounts, notifications],
   );
 
   const unsubscribeNotificationWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await unsubscribeNotification(accounts, id, hostname),
+      await unsubscribeNotification(accounts, id, hostname, settings),
     [accounts, notifications],
   );
 
   const markRepoNotificationsWithAccounts = useCallback(
     async (repoSlug: string, hostname: string) =>
-      await markRepoNotifications(accounts, repoSlug, hostname),
+      await markRepoNotifications(accounts, repoSlug, hostname, settings),
     [accounts, notifications],
   );
 
   const markRepoNotificationsDoneWithAccounts = useCallback(
     async (repoSlug: string, hostname: string) =>
-      await markRepoNotificationsDone(accounts, repoSlug, hostname),
+      await markRepoNotificationsDone(accounts, repoSlug, hostname, settings),
     [accounts, notifications],
   );