feat(settings): tray icon color (#2249)

* feat(settings): tray icon color

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

* feat(settings): tray icon color

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

* feat(settings): tray icon color

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

* refactor to change language to highlight unread notifications

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

* refactor to change language to highlight unread notifications

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

---------

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

Author: setchy

src/main/index.ts

@@ -75,6 +75,7 @@ app.setAsDefaultProtocolClient(protocol);
 const appUpdater = new AppUpdater(mb, menuBuilder);
 
 let shouldUseAlternateIdleIcon = false;
+let shouldUseUnreadActiveIcon = false;
 
 app.whenReady().then(async () => {
   await onFirstRunMaybe();
@@ -160,14 +161,25 @@ app.whenReady().then(async () => {
     },
   );
 
+  onMainEvent(
+    EVENTS.USE_UNREAD_ACTIVE_ICON,
+    (_, useUnreadActiveIcon: boolean) => {
+      shouldUseUnreadActiveIcon = useUnreadActiveIcon;
+
+      if (!shouldUseUnreadActiveIcon) {
+        setIdleIcon();
+      }
+    },
+  );
+
   onMainEvent(EVENTS.ICON_ERROR, () => {
     if (!mb.tray.isDestroyed()) {
       mb.tray.setImage(TrayIcons.error);
     }
   });
 
   onMainEvent(EVENTS.ICON_ACTIVE, () => {
-    if (!mb.tray.isDestroyed()) {
+    if (!mb.tray.isDestroyed() && shouldUseUnreadActiveIcon) {
       mb.tray.setImage(
         menuBuilder.isUpdateAvailable()
           ? TrayIcons.activeWithUpdate
@@ -178,19 +190,7 @@ app.whenReady().then(async () => {
 
   onMainEvent(EVENTS.ICON_IDLE, () => {
     if (!mb.tray.isDestroyed()) {
-      if (shouldUseAlternateIdleIcon) {
-        mb.tray.setImage(
-          menuBuilder.isUpdateAvailable()
-            ? TrayIcons.idleAlternateWithUpdate
-            : TrayIcons.idleAlternate,
-        );
-      } else {
-        mb.tray.setImage(
-          menuBuilder.isUpdateAvailable()
-            ? TrayIcons.idleWithUpdate
-            : TrayIcons.idle,
-        );
-      }
+      setIdleIcon();
     }
   });
 
@@ -258,3 +258,19 @@ const handleURL = (url: string) => {
     sendRendererEvent(mb, EVENTS.AUTH_CALLBACK, url);
   }
 };
+
+function setIdleIcon() {
+  if (shouldUseAlternateIdleIcon) {
+    mb.tray.setImage(
+      menuBuilder.isUpdateAvailable()
+        ? TrayIcons.idleAlternateWithUpdate
+        : TrayIcons.idleAlternate,
+    );
+  } else {
+    mb.tray.setImage(
+      menuBuilder.isUpdateAvailable()
+        ? TrayIcons.idleWithUpdate
+        : TrayIcons.idle,
+    );
+  }
+}

src/preload/index.ts

@@ -53,6 +53,9 @@ export const api = {
 
     useAlternateIdleIcon: (value: boolean) =>
       sendMainEvent(EVENTS.USE_ALTERNATE_IDLE_ICON, value),
+
+    useUnreadActiveIcon: (value: boolean) =>
+      sendMainEvent(EVENTS.USE_UNREAD_ACTIVE_ICON, value),
   },
 
   notificationSoundPath: () => invokeMainEvent(EVENTS.NOTIFICATION_SOUND_PATH),

src/renderer/__helpers__/jest.setup.ts

@@ -29,6 +29,7 @@ window.gitify = {
     updateIcon: jest.fn(),
     updateTitle: jest.fn(),
     useAlternateIdleIcon: jest.fn(),
+    useUnreadActiveIcon: jest.fn(),
   },
   notificationSoundPath: jest.fn(),
   onAuthCallback: jest.fn(),

src/renderer/__mocks__/state-mocks.ts

@@ -15,6 +15,7 @@ import {
   type SystemSettingsState,
   Theme,
   type Token,
+  type TraySettingsState,
 } from '../types';
 
 export const mockGitifyUser: GitifyUser = {
@@ -96,14 +97,18 @@ const mockNotificationSettings: NotificationSettingsState = {
   delayNotificationState: false,
 };
 
+const mockTraySettings: TraySettingsState = {
+  showNotificationsCountInTray: true,
+  useUnreadActiveIcon: true,
+  useAlternateIdleIcon: false,
+};
+
 const mockSystemSettings: SystemSettingsState = {
   openLinks: OpenPreference.FOREGROUND,
   keyboardShortcut: true,
-  showNotificationsCountInTray: true,
   showNotifications: true,
   playSound: true,
   notificationVolume: 20,
-  useAlternateIdleIcon: false,
   openAtStartup: false,
 };
 
@@ -119,6 +124,7 @@ const mockFilters: FilterSettingsState = {
 export const mockSettings: SettingsState = {
   ...mockAppearanceSettings,
   ...mockNotificationSettings,
+  ...mockTraySettings,
   ...mockSystemSettings,
   ...mockFilters,
 };

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

@@ -54,32 +54,6 @@ describe('renderer/components/settings/SystemSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('keyboardShortcut', false);
   });
 
-  it('should toggle the showNotificationsCountInTray checkbox', async () => {
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            updateSetting,
-          }}
-        >
-          <SystemSettings />
-        </AppContext.Provider>,
-      );
-    });
-
-    await userEvent.click(
-      screen.getByTestId('checkbox-showNotificationsCountInTray'),
-    );
-
-    expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith(
-      'showNotificationsCountInTray',
-      false,
-    );
-  });
-
   it('should toggle the showNotifications checkbox', async () => {
     await act(async () => {
       render(
@@ -197,27 +171,6 @@ describe('renderer/components/settings/SystemSettings.tsx', () => {
     });
   });
 
-  it('should toggle the useAlternateIdleIcon checkbox', async () => {
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            updateSetting,
-          }}
-        >
-          <SystemSettings />
-        </AppContext.Provider>,
-      );
-    });
-
-    await userEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'));
-
-    expect(updateSetting).toHaveBeenCalledTimes(1);
-    expect(updateSetting).toHaveBeenCalledWith('useAlternateIdleIcon', true);
-  });
-
   it('should toggle the openAtStartup checkbox', async () => {
     await act(async () => {
       render(

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

@@ -53,16 +53,6 @@ export const SystemSettings: FC = () => {
           }
         />
 
-        <Checkbox
-          checked={settings.showNotificationsCountInTray}
-          label="Show notification count in tray"
-          name="showNotificationsCountInTray"
-          onChange={(evt) =>
-            updateSetting('showNotificationsCountInTray', evt.target.checked)
-          }
-          visible={window.gitify.platform.isMacOS()}
-        />
-
         <Checkbox
           checked={settings.showNotifications}
           label="Show system notifications"
@@ -141,27 +131,6 @@ export const SystemSettings: FC = () => {
           </ButtonGroup>
         </Stack>
 
-        <Checkbox
-          checked={settings.useAlternateIdleIcon}
-          label="Use alternate idle icon"
-          name="useAlternateIdleIcon"
-          onChange={(evt) =>
-            updateSetting('useAlternateIdleIcon', evt.target.checked)
-          }
-          tooltip={
-            <Stack direction="vertical" gap="condensed">
-              <Text>
-                Use a white {APPLICATION.NAME} logo (instead of the default
-                black logo) when all notifications are read.
-              </Text>
-              <Text>
-                This is particularly useful for devices which have a dark-themed
-                menubar or taskbar.
-              </Text>
-            </Stack>
-          }
-        />
-
         <Checkbox
           checked={settings.openAtStartup}
           label="Open at startup"

src/renderer/components/settings/SystemSettings.tsx

@@ -0,0 +1,82 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
+import { TraySettings } from './TraySettings';
+
+describe('renderer/components/settings/TraySettings.tsx', () => {
+  const updateSetting = jest.fn();
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should toggle the showNotificationsCountInTray checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <TraySettings />
+        </AppContext.Provider>,
+      );
+    });
+
+    await userEvent.click(
+      screen.getByTestId('checkbox-showNotificationsCountInTray'),
+    );
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith(
+      'showNotificationsCountInTray',
+      false,
+    );
+  });
+
+  it('should toggle the useUnreadActiveIcon checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <TraySettings />
+        </AppContext.Provider>,
+      );
+    });
+
+    await userEvent.click(screen.getByTestId('checkbox-useUnreadActiveIcon'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('useUnreadActiveIcon', false);
+  });
+
+  it('should toggle the useAlternateIdleIcon checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <TraySettings />
+        </AppContext.Provider>,
+      );
+    });
+
+    await userEvent.click(screen.getByTestId('checkbox-useAlternateIdleIcon'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('useAlternateIdleIcon', true);
+  });
+});