feat(settings): alternate idle tray icon

src/__mocks__/state-mocks.ts

@@ -97,6 +97,7 @@ const mockSystemSettings = {
   showNotificationsCountInTray: false,
   showNotifications: true,
   playSound: true,
+  useAlternateIdleIcon: false,
   openAtStartup: false,
 };
 

src/components/settings/SystemSettings.test.tsx

@@ -137,6 +137,31 @@ describe('routes/components/settings/SystemSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('playSound', false);
   });
 
+  it('should toggle the useAlternateIdleIcon checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SystemSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByLabelText('Use alternate idle icon'), {
+      target: { checked: true },
+    });
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('useAlternateIdleIcon', false);
+  });
+
   it('should toggle the openAtStartup checkbox', async () => {
     await act(async () => {
       render(

src/components/settings/SystemSettings.tsx

@@ -67,6 +67,21 @@ export const SystemSettings: FC = () => {
         checked={settings.playSound}
         onChange={(evt) => updateSetting('playSound', evt.target.checked)}
       />
+      <Checkbox
+        name="useAlternateIdleIcon"
+        label="Use alternate idle icon"
+        checked={settings.useAlternateIdleIcon}
+        onChange={(evt) =>
+          updateSetting('useAlternateIdleIcon', evt.target.checked)
+        }
+        tooltip={
+          <div>
+            Use a white Gitify logo (instead of the default black logo) when all
+            notifications are read. Particularly useful for devices which have a
+            dark-themed menubar or taskbar.
+          </div>
+        }
+      />
       {!isLinux() && (
         <Checkbox
           name="openAtStartUp"

src/context/App.test.tsx

@@ -345,25 +345,8 @@ describe('context/App.tsx', () => {
           user: null,
         } as AuthState,
         settings: {
+          ...defaultSettings,
           participating: true,
-          playSound: true,
-          showNotifications: true,
-          hideBots: false,
-          showNotificationsCountInTray: false,
-          openAtStartup: false,
-          theme: 'SYSTEM',
-          detailedNotifications: true,
-          markAsDoneOnOpen: false,
-          markAsDoneOnUnsubscribe: false,
-          showAccountHeader: false,
-          delayNotificationState: false,
-          showPills: true,
-          showNumber: true,
-          keyboardShortcut: true,
-          groupBy: 'REPOSITORY',
-          filterReasons: [],
-          zoomPercentage: 100,
-          openLinks: 'FOREGROUND',
         } as SettingsState,
       });
     });
@@ -403,25 +386,8 @@ describe('context/App.tsx', () => {
           user: null,
         } as AuthState,
         settings: {
-          participating: false,
-          playSound: true,
-          showNotifications: true,
-          hideBots: false,
-          showNotificationsCountInTray: false,
+          ...defaultSettings,
           openAtStartup: true,
-          theme: 'SYSTEM',
-          detailedNotifications: true,
-          markAsDoneOnOpen: false,
-          markAsDoneOnUnsubscribe: false,
-          showAccountHeader: false,
-          delayNotificationState: false,
-          showPills: true,
-          showNumber: true,
-          keyboardShortcut: true,
-          groupBy: 'REPOSITORY',
-          filterReasons: [],
-          zoomPercentage: 100,
-          openLinks: 'FOREGROUND',
         } as SettingsState,
       });
     });

src/context/App.tsx

@@ -37,6 +37,7 @@ import {
   removeAccount,
 } from '../utils/auth/utils';
 import {
+  setAlternateIdleIcon,
   setAutoLaunch,
   setKeyboardShortcut,
   updateTrayTitle,
@@ -77,6 +78,7 @@ const defaultSystemSettings = {
   showNotificationsCountInTray: false,
   showNotifications: true,
   playSound: true,
+  useAlternateIdleIcon: false,
   openAtStartup: false,
 };
 
@@ -196,6 +198,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       if (name === 'openAtStartup') {
         setAutoLaunch(value as boolean);
       }
+      if (name === 'useAlternateIdleIcon') {
+        setAlternateIdleIcon(value as boolean);
+      }
 
       const newSettings = { ...settings, [name]: value };
       setSettings(newSettings);
@@ -271,6 +276,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
     if (existing.settings) {
       setKeyboardShortcut(existing.settings.keyboardShortcut);
+      setAlternateIdleIcon(existing.settings.useAlternateIdleIcon);
       setSettings({ ...defaultSettings, ...existing.settings });
       webFrame.setZoomLevel(
         zoomPercentageToLevel(existing.settings.zoomPercentage),

src/electron/main.js

@@ -21,9 +21,15 @@ log.initialize();
 const idleIcon = path.resolve(
   `${__dirname}/../../assets/images/tray-idleTemplate.png`,
 );
+const idleAlternateIcon = path.resolve(
+  `${__dirname}/../../assets/images/tray-idle-white.png`,
+);
 const idleUpdateAvailableIcon = path.resolve(
   `${__dirname}/../../assets/images/tray-idle-update.png`,
 );
+const idleAlternateUpdateAvailableIcon = path.resolve(
+  `${__dirname}/../../assets/images/tray-idle-white-update.png`,
+);
 const activeIcon = path.resolve(
   `${__dirname}/../../assets/images/tray-active.png`,
 );
@@ -114,6 +120,8 @@ const mb = menubar({
   showDockIcon: false,
 });
 
+let shouldUseAlternateIdleIcon = false;
+
 app.whenReady().then(async () => {
   await onFirstRunMaybe();
 
@@ -177,6 +185,10 @@ app.whenReady().then(async () => {
 
   ipc.on('gitify:quit', () => mb.app.quit());
 
+  ipc.on('gitify:use-alternate-idle-icon', (_, useAlternateIdleIcon) => {
+    shouldUseAlternateIdleIcon = useAlternateIdleIcon;
+  });
+
   ipc.on('gitify:icon-active', () => {
     if (!mb.tray.isDestroyed()) {
       mb.tray.setImage(
@@ -189,9 +201,17 @@ app.whenReady().then(async () => {
 
   ipc.on('gitify:icon-idle', () => {
     if (!mb.tray.isDestroyed()) {
-      mb.tray.setImage(
-        updateAvailableMenuItem.visible ? idleUpdateAvailableIcon : idleIcon,
-      );
+      if (shouldUseAlternateIdleIcon) {
+        mb.tray.setImage(
+          updateAvailableMenuItem.visible
+            ? idleAlternateUpdateAvailableIcon
+            : idleAlternateIcon,
+        );
+      } else {
+        mb.tray.setImage(
+          updateAvailableMenuItem.visible ? idleUpdateAvailableIcon : idleIcon,
+        );
+      }
     }
   });
 

src/types.ts

@@ -75,20 +75,21 @@ interface AppearanceSettingsState {
 }
 
 interface NotificationSettingsState {
+  groupBy: GroupBy;
   participating: boolean;
-  showNotifications: boolean;
   markAsDoneOnOpen: boolean;
   markAsDoneOnUnsubscribe: boolean;
   delayNotificationState: boolean;
-  groupBy: GroupBy;
 }
 
 interface SystemSettingsState {
   openLinks: OpenPreference;
+  keyboardShortcut: boolean;
+  showNotificationsCountInTray: boolean;
+  showNotifications: boolean;
+  useAlternateIdleIcon: boolean;
   playSound: boolean;
   openAtStartup: boolean;
-  showNotificationsCountInTray: boolean;
-  keyboardShortcut: boolean;
 }
 
 interface FilterSettingsState {

src/utils/comms.test.ts

@@ -6,6 +6,7 @@ import {
   hideWindow,
   openExternalLink,
   quitApp,
+  setAlternateIdleIcon,
   setAutoLaunch,
   showWindow,
   updateTrayIcon,
@@ -104,4 +105,13 @@ describe('utils/comms.ts', () => {
       openAtLogin: false,
     });
   });
+
+  it('should setAlternateIdleIcon', () => {
+    setAlternateIdleIcon(true);
+
+    expect(ipcRenderer.send).toHaveBeenCalledWith(
+      'gitify:use-alternate-idle-icon',
+      true,
+    );
+  });
 });

src/utils/comms.ts

@@ -42,6 +42,10 @@ export function setAutoLaunch(value: boolean): void {
   });
 }
 
+export function setAlternateIdleIcon(value: boolean): void {
+  ipcRenderer.send('gitify:use-alternate-idle-icon', value);
+}
+
 export function setKeyboardShortcut(keyboardShortcut: boolean): void {
   ipcRenderer.send('gitify:update-keyboard-shortcut', {
     enabled: keyboardShortcut,