feat(settings): show notification count in tray

main.js

@@ -75,6 +75,11 @@ menubarApp.on('ready', () => {
       }
     }
   });
+  ipcMain.on('update-title', (_, title) => {
+    if (!menubarApp.tray.isDestroyed()) {
+      menubarApp.tray.setTitle(title);
+    }
+  });
   ipcMain.on('set-login-item-settings', (event, settings) => {
     app.setLoginItemSettings(settings);
   });

src/__mocks__/mock-state.ts

@@ -12,6 +12,7 @@ export const mockSettings: SettingsState = {
   playSound: true,
   showNotifications: true,
   showBots: true,
+  showNotificationsCountInTray: false,
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
   colors: false,

src/context/App.tsx

@@ -19,10 +19,11 @@ import {
 import { apiRequestAuth } from '../utils/api-requests';
 import { setAppearance } from '../utils/appearance';
 import { addAccount, authGitHub, getToken, getUserData } from '../utils/auth';
-import { setAutoLaunch } from '../utils/comms';
+import { setAutoLaunch, updateTrayTitle } from '../utils/comms';
 import Constants from '../utils/constants';
 import { generateGitHubAPIUrl } from '../utils/helpers';
 import { clearState, loadState, saveState } from '../utils/storage';
+import { getNotificationCount } from '../utils/notifications';
 
 const defaultAccounts: AuthState = {
   token: null,
@@ -35,6 +36,7 @@ export const defaultSettings: SettingsState = {
   playSound: true,
   showNotifications: true,
   showBots: true,
+  showNotificationsCountInTray: false,
   openAtStartup: false,
   appearance: Appearance.SYSTEM,
   colors: null,
@@ -98,6 +100,16 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     fetchNotifications(accounts, settings);
   }, [accounts.token, accounts.enterpriseAccounts.length]);
 
+  useEffect(() => {
+    const count = getNotificationCount(notifications);
+
+    if (settings.showNotificationsCountInTray && count > 0) {
+      updateTrayTitle(count.toString());
+    } else {
+      updateTrayTitle();
+    }
+  }, [settings.showNotificationsCountInTray, notifications]);
+
   useInterval(() => {
     fetchNotifications(accounts, settings);
   }, 60000);

src/routes/Settings.tsx

@@ -20,7 +20,11 @@ import { AppContext } from '../context/App';
 import { Appearance } from '../types';
 import { apiRequestAuth } from '../utils/api-requests';
 import { setAppearance } from '../utils/appearance';
-import { openExternalLink, updateTrayIcon } from '../utils/comms';
+import {
+  openExternalLink,
+  updateTrayIcon,
+  updateTrayTitle,
+} from '../utils/comms';
 import Constants from '../utils/constants';
 import { generateGitHubAPIUrl } from '../utils/helpers';
 
@@ -71,6 +75,7 @@ export const SettingsRoute: React.FC = () => {
     logout();
     navigate(-1);
     updateTrayIcon();
+    updateTrayTitle();
   }, []);
 
   const quitApp = useCallback(() => {
@@ -152,6 +157,14 @@ export const SettingsRoute: React.FC = () => {
           checked={settings.showBots}
           onChange={(evt) => updateSetting('showBots', evt.target.checked)}
         />
+        <FieldCheckbox
+          name="showNotificationsCountInTray"
+          label="Show notifications count in tray"
+          checked={settings.showNotificationsCountInTray}
+          onChange={(evt) =>
+            updateSetting('showNotificationsCountInTray', evt.target.checked)
+          }
+        />
         <FieldCheckbox
           name="markAsDoneOnOpen"
           label="Mark as done on open"

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -230,6 +230,29 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </label>
       </div>
     </div>
+    <div
+      class="flex items-start mt-1 mb-3"
+    >
+      <div
+        class="flex items-center h-5"
+      >
+        <input
+          class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+          id="showNotificationsCountInTray"
+          type="checkbox"
+        />
+      </div>
+      <div
+        class="ml-3 text-sm"
+      >
+        <label
+          class="font-medium text-gray-700 dark:text-gray-200"
+          for="showNotificationsCountInTray"
+        >
+          Show notifications count in tray
+        </label>
+      </div>
+    </div>
     <div
       class="flex items-start mt-1 mb-3"
     >

src/types.ts

@@ -11,6 +11,7 @@ export interface SettingsState {
   playSound: boolean;
   showNotifications: boolean;
   showBots: boolean;
+  showNotificationsCountInTray: boolean;
   openAtStartup: boolean;
   appearance: Appearance;
   colors: boolean | null;

src/utils/comms.ts

@@ -21,6 +21,10 @@ export function updateTrayIcon(notificationsLength = 0): void {
   }
 }
 
+export function updateTrayTitle(title: string = ''): void {
+  ipcRenderer.send('update-title', title);
+}
+
 export function restoreSetting(setting, value): void {
   ipcRenderer.send(setting, value);
 }