feat(settings): tray icon color

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

Author: setchy

src/main/index.ts

@@ -75,7 +75,7 @@ app.setAsDefaultProtocolClient(protocol);
 const appUpdater = new AppUpdater(mb, menuBuilder);
 
 let shouldUseAlternateIdleIcon = false;
-let shouldUseTrayIconStatusColors = true;
+let shouldUseMonochromeIcon = false;
 
 app.whenReady().then(async () => {
   await onFirstRunMaybe();
@@ -161,22 +161,22 @@ app.whenReady().then(async () => {
     },
   );
 
-  onMainEvent(
-    EVENTS.TRAY_ICON_STATUS_COLORS,
-    (_, trayIconStatusColors: boolean) => {
-      shouldUseTrayIconStatusColors = trayIconStatusColors;
+  onMainEvent(EVENTS.USE_MONOCHROME_ICON, (_, useMonochromeIcon: boolean) => {
+    shouldUseMonochromeIcon = useMonochromeIcon;
+
+    if (shouldUseMonochromeIcon) {
       setIdleIcon();
-    },
-  );
+    }
+  });
 
   onMainEvent(EVENTS.ICON_ERROR, () => {
-    if (!mb.tray.isDestroyed() && shouldUseTrayIconStatusColors) {
+    if (!mb.tray.isDestroyed() && !shouldUseMonochromeIcon) {
       mb.tray.setImage(TrayIcons.error);
     }
   });
 
   onMainEvent(EVENTS.ICON_ACTIVE, () => {
-    if (!mb.tray.isDestroyed() && shouldUseTrayIconStatusColors) {
+    if (!mb.tray.isDestroyed() && !shouldUseMonochromeIcon) {
       mb.tray.setImage(
         menuBuilder.isUpdateAvailable()
           ? TrayIcons.activeWithUpdate

src/preload/index.ts

@@ -51,11 +51,11 @@ export const api = {
 
     updateTitle: (title = '') => sendMainEvent(EVENTS.UPDATE_TITLE, title),
 
-    trayIconStatusColors: (value: boolean) =>
-      sendMainEvent(EVENTS.TRAY_ICON_STATUS_COLORS, value),
-
     useAlternateIdleIcon: (value: boolean) =>
       sendMainEvent(EVENTS.USE_ALTERNATE_IDLE_ICON, value),
+
+    useMonochromeIcon: (value: boolean) =>
+      sendMainEvent(EVENTS.USE_MONOCHROME_ICON, value),
   },
 
   notificationSoundPath: () => invokeMainEvent(EVENTS.NOTIFICATION_SOUND_PATH),

src/renderer/__helpers__/jest.setup.ts

@@ -28,8 +28,8 @@ window.gitify = {
   tray: {
     updateIcon: jest.fn(),
     updateTitle: jest.fn(),
-    trayIconStatusColors: jest.fn(),
     useAlternateIdleIcon: jest.fn(),
+    useMonochromeIcon: jest.fn(),
   },
   notificationSoundPath: jest.fn(),
   onAuthCallback: jest.fn(),

src/renderer/__mocks__/state-mocks.ts

@@ -99,8 +99,8 @@ const mockNotificationSettings: NotificationSettingsState = {
 
 const mockTraySettings: TraySettingsState = {
   showNotificationsCountInTray: true,
+  useMonochromeIcon: false,
   useAlternateIdleIcon: false,
-  trayIconStatusColors: true,
 };
 
 const mockSystemSettings: SystemSettingsState = {

src/renderer/components/fields/Tooltip.tsx

@@ -22,7 +22,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
     >
       <QuestionIcon className="text-gitify-tooltip-icon" />
       {showTooltip && (
-        <div className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
+        <div className="absolute left-[-80px] z-10 w-30 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
           <div className="text-left text-xs text-gitify-font">
             {props.tooltip}
           </div>

src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
-import { SystemSettings } from './SystemSettings';
+import { TraySettings } from './TraySettings';
 
 describe('renderer/components/settings/TraySettings.tsx', () => {
   const updateSetting = jest.fn();
@@ -22,7 +22,7 @@ describe('renderer/components/settings/TraySettings.tsx', () => {
             updateSetting,
           }}
         >
-          <SystemSettings />
+          <TraySettings />
         </AppContext.Provider>,
       );
     });
@@ -38,7 +38,7 @@ describe('renderer/components/settings/TraySettings.tsx', () => {
     );
   });
 
-  it('should toggle the useAlternateIdleIcon checkbox', async () => {
+  it('should toggle the useMonochromeIcon checkbox', async () => {
     await act(async () => {
       render(
         <AppContext.Provider
@@ -48,18 +48,18 @@ describe('renderer/components/settings/TraySettings.tsx', () => {
             updateSetting,
           }}
         >
-          <SystemSettings />
+          <TraySettings />
         </AppContext.Provider>,
       );
     });
 
-    await userEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'));
+    await userEvent.click(screen.getByTestId('checkbox-useMonochromeIcon'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith('useAlternateIdleIcon', true);
+    expect(updateSetting).toHaveBeenCalledWith('useMonochromeIcon', true);
   });
 
-  it('should toggle the trayIconStatusColors checkbox', async () => {
+  it('should toggle the useAlternateIdleIcon checkbox', async () => {
     await act(async () => {
       render(
         <AppContext.Provider
@@ -69,14 +69,14 @@ describe('renderer/components/settings/TraySettings.tsx', () => {
             updateSetting,
           }}
         >
-          <SystemSettings />
+          <TraySettings />
         </AppContext.Provider>,
       );
     });
 
-    await userEvent.click(screen.getByTestId('checkbox-trayIconStatusColors'));
+    await userEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith('trayIconStatusColors', true);
+    expect(updateSetting).toHaveBeenCalledWith('useAlternateIdleIcon', true);
   });
 });

src/renderer/components/settings/TraySettings.test.tsx

@@ -19,7 +19,7 @@ export const TraySettings: FC = () => {
       <Stack direction="vertical" gap="condensed">
         <Checkbox
           checked={settings.showNotificationsCountInTray}
-          label="Show notification count in tray"
+          label="Show notification count"
           name="showNotificationsCountInTray"
           onChange={(evt) =>
             updateSetting('showNotificationsCountInTray', evt.target.checked)
@@ -28,21 +28,17 @@ export const TraySettings: FC = () => {
         />
 
         <Checkbox
-          checked={settings.trayIconStatusColors}
-          label="Show tray icon status colors"
-          name="trayIconStatusColors"
+          checked={settings.useMonochromeIcon}
+          label="Use monochrome icon"
+          name="useMonochromeIcon"
           onChange={(evt) =>
-            updateSetting('trayIconStatusColors', evt.target.checked)
+            updateSetting('useMonochromeIcon', evt.target.checked)
           }
           tooltip={
             <Stack direction="vertical" gap="condensed">
               <Text>
-                When enabled the {APPLICATION.NAME} tray icon will change color
-                to indicate active, idle or error statuses.
-              </Text>
-              <Text>
-                When disabled the {APPLICATION.NAME} tray icon will not show any
-                status information.
+                Display a neutral (monochrome) icon for unread notifications and
+                errors, instead of using color highlights.
               </Text>
             </Stack>
           }

src/renderer/components/settings/TraySettings.tsx

@@ -44,7 +44,8 @@ import {
   setAlternateIdleIcon,
   setAutoLaunch,
   setKeyboardShortcut,
-  setTrayIconStatusColors,
+  setMonochromeIcon,
+  updateTrayIcon,
   updateTrayTitle,
 } from '../utils/comms';
 import { getNotificationCount } from '../utils/notifications/notifications';
@@ -158,6 +159,22 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [settings.showNotificationsCountInTray, notifications]);
 
+  useEffect(() => {
+    const count = getNotificationCount(notifications);
+
+    setMonochromeIcon(settings.useMonochromeIcon);
+
+    updateTrayIcon(count);
+  }, [settings.useMonochromeIcon, notifications]);
+
+  useEffect(() => {
+    setAutoLaunch(settings.openAtStartup);
+  }, [settings.openAtStartup]);
+
+  useEffect(() => {
+    setAlternateIdleIcon(settings.useAlternateIdleIcon);
+  }, [settings.useAlternateIdleIcon]);
+
   useEffect(() => {
     setKeyboardShortcut(settings.keyboardShortcut);
   }, [settings.keyboardShortcut]);
@@ -183,18 +200,6 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   const updateSetting = useCallback(
     (name: keyof SettingsState, value: SettingsValue) => {
-      if (name === 'openAtStartup') {
-        setAutoLaunch(value as boolean);
-      }
-
-      if (name === 'trayIconStatusColors') {
-        setTrayIconStatusColors(value as boolean);
-      }
-
-      if (name === 'useAlternateIdleIcon') {
-        setAlternateIdleIcon(value as boolean);
-      }
-
       const newSettings = { ...settings, [name]: value };
       setSettings(newSettings);
       saveState({ auth, settings: newSettings });
@@ -273,6 +278,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     // Restore settings before accounts to ensure filters are available before fetching notifications
     if (existing.settings) {
       setKeyboardShortcut(existing.settings.keyboardShortcut);
+      setMonochromeIcon(existing.settings.useMonochromeIcon);
       setAlternateIdleIcon(existing.settings.useAlternateIdleIcon);
       setSettings({ ...defaultSettings, ...existing.settings });
       window.gitify.zoom.setLevel(

src/renderer/context/App.tsx

@@ -37,7 +37,7 @@ const defaultNotificationSettings: NotificationSettingsState = {
 
 const defaultTraySettings: TraySettingsState = {
   showNotificationsCountInTray: true,
-  trayIconStatusColors: true,
+  useMonochromeIcon: false,
   useAlternateIdleIcon: false,
 };