feat: error tray icon (#1742)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

assets/images/tray-error.png

@@ -4,22 +4,24 @@ describe('main/icons.ts', () => {
   it('should return icon images', () => {
     expect(TrayIcons.active).toContain('assets/images/tray-active.png');
 
-    expect(TrayIcons.activeUpdateIcon).toContain(
+    expect(TrayIcons.activeWithUpdate).toContain(
       'assets/images/tray-active-update.png',
     );
 
     expect(TrayIcons.idle).toContain('assets/images/tray-idleTemplate.png');
 
-    expect(TrayIcons.idleUpdateIcon).toContain(
+    expect(TrayIcons.idleWithUpdate).toContain(
       'assets/images/tray-idle-update.png',
     );
 
     expect(TrayIcons.idleAlternate).toContain(
       'assets/images/tray-idle-white.png',
     );
 
-    expect(TrayIcons.idleAlternateUpdateIcon).toContain(
+    expect(TrayIcons.idleAlternateWithUpdate).toContain(
       'assets/images/tray-idle-white-update.png',
     );
+
+    expect(TrayIcons.error).toContain('assets/images/tray-error.png');
   });
 });

assets/images/[email protected]

@@ -2,11 +2,12 @@ import path from 'node:path';
 
 export const TrayIcons = {
   active: getIconPath('tray-active.png'),
-  activeUpdateIcon: getIconPath('tray-active-update.png'),
+  activeWithUpdate: getIconPath('tray-active-update.png'),
   idle: getIconPath('tray-idleTemplate.png'),
-  idleUpdateIcon: getIconPath('tray-idle-update.png'),
+  idleWithUpdate: getIconPath('tray-idle-update.png'),
   idleAlternate: getIconPath('tray-idle-white.png'),
-  idleAlternateUpdateIcon: getIconPath('tray-idle-white-update.png'),
+  idleAlternateWithUpdate: getIconPath('tray-idle-white-update.png'),
+  error: getIconPath('tray-error.png'),
 };
 
 function getIconPath(iconName: string) {

src/main/icons.test.ts

@@ -118,11 +118,17 @@ app.whenReady().then(async () => {
     },
   );
 
+  ipc.on(namespacedEvent('icon-error'), () => {
+    if (!mb.tray.isDestroyed()) {
+      mb.tray.setImage(TrayIcons.error);
+    }
+  });
+
   ipc.on(namespacedEvent('icon-active'), () => {
     if (!mb.tray.isDestroyed()) {
       mb.tray.setImage(
         menuBuilder.isUpdateAvailable()
-          ? TrayIcons.activeUpdateIcon
+          ? TrayIcons.activeWithUpdate
           : TrayIcons.active,
       );
     }
@@ -133,13 +139,13 @@ app.whenReady().then(async () => {
       if (shouldUseAlternateIdleIcon) {
         mb.tray.setImage(
           menuBuilder.isUpdateAvailable()
-            ? TrayIcons.idleAlternateUpdateIcon
+            ? TrayIcons.idleAlternateWithUpdate
             : TrayIcons.idleAlternate,
         );
       } else {
         mb.tray.setImage(
           menuBuilder.isUpdateAvailable()
-            ? TrayIcons.idleUpdateIcon
+            ? TrayIcons.idleWithUpdate
             : TrayIcons.idle,
         );
       }

src/main/icons.ts

@@ -18,7 +18,7 @@ export const Oops: FC<IOops> = ({ error }: IOops) => {
   return (
     <Centered>
       <Stack direction="vertical" align="center">
-        <div className="mt-2 mb-5 text-5xl">
+        <div className="mt-2 text-5xl">
           <EmojiText text={emoji} />
         </div>
 

src/main/main.ts

@@ -6,7 +6,7 @@ interface ICentered {
 
 export const Centered: FC<ICentered> = (props: ICentered) => {
   return (
-    <div className="flex flex-1 flex-col items-center justify-center min-h-screen">
+    <div className="flex flex-1 flex-col items-center justify-center p-8 min-h-screen">
       {props.children}
     </div>
   );

src/renderer/components/Oops.tsx

@@ -14,6 +14,7 @@ import {
   markNotificationThreadAsDone,
   markNotificationThreadAsRead,
 } from '../utils/api/client';
+import { updateTrayIcon } from '../utils/comms';
 import { isMarkAsDoneFeatureSupported } from '../utils/features';
 import { triggerNativeNotifications } from '../utils/notifications/native';
 import {
@@ -73,26 +74,27 @@ export const useNotifications = (): NotificationsState => {
       const fetchedNotifications = await getAllNotifications(state);
 
       // Set Global Error if all accounts have the same error
-      if (fetchNotifications.length > 0) {
-        const allAccountsHaveErrors = fetchedNotifications.every((account) => {
+      const allAccountsHaveErrors =
+        fetchedNotifications.length > 0 &&
+        fetchedNotifications.every((account) => {
           return account.error !== null;
         });
 
-        let accountErrorsAreAllSame = true;
-        const accountError = fetchedNotifications[0]?.error;
+      let accountErrorsAreAllSame = true;
+      const accountError = fetchedNotifications[0]?.error;
 
-        for (const fetchedNotification of fetchedNotifications) {
-          if (accountError !== fetchedNotification.error) {
-            accountErrorsAreAllSame = false;
-            break;
-          }
+      for (const fetchedNotification of fetchedNotifications) {
+        if (accountError !== fetchedNotification.error) {
+          accountErrorsAreAllSame = false;
+          break;
         }
+      }
 
-        if (allAccountsHaveErrors) {
-          setStatus('error');
-          setGlobalError(accountErrorsAreAllSame ? accountError : null);
-          return;
-        }
+      if (allAccountsHaveErrors) {
+        setStatus('error');
+        setGlobalError(accountErrorsAreAllSame ? accountError : null);
+        updateTrayIcon(-1);
+        return;
       }
 
       setNotifications(fetchedNotifications);

src/renderer/components/__snapshots__/AllRead.test.tsx.snap

@@ -162,4 +162,13 @@ describe('renderer/utils/comms.ts', () => {
     expect(ipcRenderer.send).toHaveBeenCalledTimes(1);
     expect(ipcRenderer.send).toHaveBeenCalledWith(namespacedEvent('icon-idle'));
   });
+
+  it('should send mark the icons as error', () => {
+    const notificationsLength = -1;
+    updateTrayIcon(notificationsLength);
+    expect(ipcRenderer.send).toHaveBeenCalledTimes(1);
+    expect(ipcRenderer.send).toHaveBeenCalledWith(
+      namespacedEvent('icon-error'),
+    );
+  });
 });

src/renderer/components/__snapshots__/Oops.test.tsx.snap

@@ -55,11 +55,17 @@ export function setKeyboardShortcut(keyboardShortcut: boolean): void {
 }
 
 export function updateTrayIcon(notificationsLength = 0): void {
+  if (notificationsLength < 0) {
+    ipcRenderer.send(namespacedEvent('icon-error'));
+    return;
+  }
+
   if (notificationsLength > 0) {
     ipcRenderer.send(namespacedEvent('icon-active'));
-  } else {
-    ipcRenderer.send(namespacedEvent('icon-idle'));
+    return;
   }
+
+  ipcRenderer.send(namespacedEvent('icon-idle'));
 }
 
 export function updateTrayTitle(title = ''): void {