feat(settings): alternate idle tray icon (#1501)

* fix: alternate idle images for linux

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

* fix: alternate idle images for linux

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

* fix: use user setting to control alternate idle icon

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

---------

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

Author: setchy

assets/images/tray-idle-white-update.png

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

assets/images/[email protected]

@@ -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(

assets/images/tray-idle-white.png

@@ -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"

assets/images/[email protected]

@@ -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,
       });
     });

assets/images/tray-idleTemplate.png

@@ -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),