refactor: simplify tray color/count updates

src/renderer/__mocks__/notifications-mocks.ts

@@ -1,4 +1,4 @@
-import type { AccountNotifications } from '../types';
+import type { AccountNotifications, GitifyError } from '../types';
 import type {
   Notification,
   StateType,
@@ -50,6 +50,14 @@ export function createSubjectMock(mocks: {
   };
 }
 
+export function mockAccountWithError(error: GitifyError): AccountNotifications {
+  return {
+    account: mockGitHubCloudAccount,
+    notifications: [],
+    error,
+  };
+}
+
 export function createMockNotificationForRepoName(
   id: string,
   repoFullName: string | null,

src/renderer/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { type FC, useContext, useMemo } from 'react';
+import { type FC, useContext } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
@@ -23,20 +23,20 @@ import {
   openGitHubPulls,
 } from '../utils/links';
 import { hasActiveFilters } from '../utils/notifications/filters/filter';
-import { getNotificationCount } from '../utils/notifications/notifications';
 import { LogoIcon } from './icons/LogoIcon';
 
 export const Sidebar: FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
   const {
-    notifications,
     fetchNotifications,
     isLoggedIn,
     status,
     settings,
     auth,
+    unreadCount,
+    hasNotifications,
   } = useContext(AppContext);
 
   // We naively assume that the first account is the primary account for the purposes of our sidebar quick links
@@ -65,10 +65,6 @@ export const Sidebar: FC = () => {
     fetchNotifications();
   };
 
-  const notificationsCount = useMemo(() => {
-    return getNotificationCount(notifications);
-  }, [notifications]);
-
   const sidebarButtonStyle = { color: 'white' };
 
   return (
@@ -98,14 +94,14 @@ export const Sidebar: FC = () => {
         <IconButton
           aria-label="Notifications"
           data-testid="sidebar-notifications"
-          description={`${notificationsCount} unread notifications ↗`}
+          description={`${unreadCount} unread notifications ↗`}
           icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"
           sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
-          variant={notificationsCount > 0 ? 'primary' : 'invisible'}
+          variant={hasNotifications ? 'primary' : 'invisible'}
         />
 
         {isLoggedIn && (

src/renderer/components/notifications/AccountNotifications.tsx

@@ -127,7 +127,9 @@ export const AccountNotifications: FC<IAccountNotifications> = (
       {showAccountNotifications && (
         <>
           {props.error && <Oops error={props.error} fullHeight={false} />}
+
           {!hasNotifications && !props.error && <AllRead fullHeight={false} />}
+
           {isGroupByRepository(settings)
             ? groupedNotifications.map(([repoSlug, repoNotifications]) => (
                 <RepositoryNotifications

src/renderer/context/App.test.tsx

@@ -10,6 +10,7 @@ import * as apiRequests from '../utils/api/request';
 import * as comms from '../utils/comms';
 import * as notifications from '../utils/notifications/notifications';
 import * as storage from '../utils/storage';
+import * as tray from '../utils/tray';
 import { AppContext, AppProvider } from './App';
 import { defaultSettings } from './defaults';
 
@@ -38,11 +39,13 @@ describe('renderer/context/App.tsx', () => {
   });
 
   describe('notification methods', () => {
-    const getNotificationCountMock = jest.spyOn(
-      notifications,
-      'getNotificationCount',
-    );
-    getNotificationCountMock.mockReturnValue(1);
+    const setTrayIconColorAndTitleMock = jest
+      .spyOn(tray, 'setTrayIconColorAndTitle')
+      .mockImplementation(jest.fn());
+
+    jest
+      .spyOn(notifications, 'getUnreadNotificationCount')
+      .mockImplementation(jest.fn());
 
     const fetchNotificationsMock = jest.fn();
     const markNotificationsAsReadMock = jest.fn();
@@ -70,8 +73,6 @@ describe('renderer/context/App.tsx', () => {
     it('fetch notifications every minute', async () => {
       customRender(null);
 
-      // Wait for the useEffects, for settings.participating and accounts, to run.
-      // Those aren't what we're testing
       await waitFor(() =>
         expect(fetchNotificationsMock).toHaveBeenCalledTimes(1),
       );
@@ -80,23 +81,20 @@ describe('renderer/context/App.tsx', () => {
         jest.advanceTimersByTime(
           Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
         );
-        return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(2);
 
       act(() => {
         jest.advanceTimersByTime(
           Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
         );
-        return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(3);
 
       act(() => {
         jest.advanceTimersByTime(
           Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
         );
-        return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(4);
     });
@@ -144,6 +142,7 @@ describe('renderer/context/App.tsx', () => {
         mockDefaultState,
         [mockSingleNotification],
       );
+      expect(setTrayIconColorAndTitleMock).toHaveBeenCalledTimes(1);
     });
 
     it('should call markNotificationsAsDone', async () => {
@@ -169,6 +168,7 @@ describe('renderer/context/App.tsx', () => {
         mockDefaultState,
         [mockSingleNotification],
       );
+      expect(setTrayIconColorAndTitleMock).toHaveBeenCalledTimes(1);
     });
 
     it('should call unsubscribeNotification', async () => {
@@ -194,6 +194,7 @@ describe('renderer/context/App.tsx', () => {
         mockDefaultState,
         mockSingleNotification,
       );
+      expect(setTrayIconColorAndTitleMock).toHaveBeenCalledTimes(1);
     });
   });
 

src/renderer/context/App.tsx

@@ -47,17 +47,16 @@ import {
   setKeyboardShortcut,
   setUseAlternateIdleIcon,
   setUseUnreadActiveIcon,
-  updateTrayColor,
-  updateTrayTitle,
 } from '../utils/comms';
-import { getNotificationCount } from '../utils/notifications/notifications';
+import { getUnreadNotificationCount } from '../utils/notifications/notifications';
 import { clearState, loadState, saveState } from '../utils/storage';
 import {
   DEFAULT_DAY_COLOR_SCHEME,
   DEFAULT_NIGHT_COLOR_SCHEME,
   mapThemeModeToColorMode,
   mapThemeModeToColorScheme,
 } from '../utils/theme';
+import { setTrayIconColorAndTitle } from '../utils/tray';
 import { zoomPercentageToLevel } from '../utils/zoom';
 import { defaultAuth, defaultFilters, defaultSettings } from './defaults';
 
@@ -75,6 +74,8 @@ interface AppContextState {
   globalError: GitifyError;
 
   notifications: AccountNotifications[];
+  unreadCount: number;
+  hasNotifications: boolean;
   fetchNotifications: () => Promise<void>;
   removeAccountNotifications: (account: Account) => Promise<void>;
 
@@ -110,6 +111,10 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     unsubscribeNotification,
   } = useNotifications();
 
+  const unreadCount = getUnreadNotificationCount(notifications);
+
+  const hasNotifications = useMemo(() => unreadCount > 0, [unreadCount]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: restoreSettings is stable and should run only once
   useEffect(() => {
     restoreSettings();
@@ -166,24 +171,16 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     }
   }, Constants.REFRESH_ACCOUNTS_INTERVAL_MS);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We also want to update the tray on setting changes
   useEffect(() => {
-    const count = getNotificationCount(notifications);
-
-    let title = '';
-    if (settings.showNotificationsCountInTray && count > 0) {
-      title = count.toString();
-    }
-
     setUseUnreadActiveIcon(settings.useUnreadActiveIcon);
     setUseAlternateIdleIcon(settings.useAlternateIdleIcon);
-
-    updateTrayColor(count);
-    updateTrayTitle(title);
+    setTrayIconColorAndTitle(unreadCount, settings);
   }, [
     settings.showNotificationsCountInTray,
     settings.useUnreadActiveIcon,
     settings.useAlternateIdleIcon,
-    notifications,
+    unreadCount,
   ]);
 
   useEffect(() => {
@@ -362,6 +359,8 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       globalError,
 
       notifications,
+      unreadCount,
+      hasNotifications,
       fetchNotifications: fetchNotificationsWithAccounts,
 
       markNotificationsAsRead: markNotificationsAsReadWithAccounts,
@@ -386,6 +385,8 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       globalError,
 
       notifications,
+      unreadCount,
+      hasNotifications,
       fetchNotificationsWithAccounts,
       markNotificationsAsReadWithAccounts,
       markNotificationsAsDoneWithAccounts,