feat: check for updates

src/components/settings/SettingsFooter.test.tsx

@@ -48,7 +48,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
         );
       });
 
-      expect(screen.getByTitle('app-version')).toMatchSnapshot();
+      expect(screen.getByLabelText('app-version')).toMatchSnapshot();
     });
 
     it('should show development app version', async () => {
@@ -72,7 +72,49 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
         );
       });
 
-      expect(screen.getByTitle('app-version')).toMatchSnapshot();
+      expect(screen.getByLabelText('app-version')).toMatchSnapshot();
+    });
+  });
+
+  describe('update available visual indicator', () => {
+    it('using latest version', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: mockSettings,
+            }}
+          >
+            <MemoryRouter>
+              <SettingsFooter isUpdateAvailable={false} />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      expect(
+        screen.getByTitle('You are using the latest version'),
+      ).toMatchSnapshot();
+    });
+
+    it('new version available', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: mockSettings,
+            }}
+          >
+            <MemoryRouter>
+              <SettingsFooter isUpdateAvailable={true} />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      expect(screen.getByTitle('New version available')).toMatchSnapshot();
     });
   });
 

src/components/settings/SettingsFooter.tsx

@@ -1,12 +1,23 @@
-import { PersonIcon, XCircleIcon } from '@primer/octicons-react';
+import {
+  AlertFillIcon,
+  CheckCircleFillIcon,
+  PersonIcon,
+  XCircleIcon,
+} from '@primer/octicons-react';
 import { type FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BUTTON_CLASS_NAME } from '../../styles/gitify';
-import { Size } from '../../types';
+import { IconColor, Size } from '../../types';
 import { getAppVersion, quitApp } from '../../utils/comms';
 import { openGitifyReleaseNotes } from '../../utils/links';
 
-export const SettingsFooter: FC = () => {
+interface ISettingsFooter {
+  isUpdateAvailable?: boolean;
+}
+
+export const SettingsFooter: FC<ISettingsFooter> = ({
+  isUpdateAvailable = false,
+}: ISettingsFooter) => {
   const [appVersion, setAppVersion] = useState<string | null>(null);
   const navigate = useNavigate();
 
@@ -29,7 +40,26 @@ export const SettingsFooter: FC = () => {
         title="View release notes"
         onClick={() => openGitifyReleaseNotes(appVersion)}
       >
-        <span title="app-version">Gitify {appVersion}</span>
+        <div className="flex items-center gap-1">
+          <span aria-label="app-version">Gitify {appVersion}</span>
+          <span className="pb-1">
+            {isUpdateAvailable ? (
+              <span title="New version available">
+                <AlertFillIcon
+                  size={Size.XSMALL}
+                  className={IconColor.YELLOW}
+                />
+              </span>
+            ) : (
+              <span title="You are using the latest version">
+                <CheckCircleFillIcon
+                  size={Size.XSMALL}
+                  className={IconColor.GREEN}
+                />
+              </span>
+            )}
+          </span>
+        </div>
       </button>
       <div>
         <button

src/electron/main.js

@@ -40,7 +40,30 @@ const browserWindowOpts = {
   },
 };
 
+let isUpdateAvailable = false;
+let isUpdateDownloaded = false;
+
 const contextMenu = Menu.buildFromTemplate([
+  {
+    label: 'Check for updates',
+    visible: !isUpdateAvailable,
+    click: () => {
+      checkForUpdates();
+    },
+  },
+  {
+    label: 'An update is available',
+    enabled: false,
+    visible: isUpdateAvailable,
+  },
+  {
+    label: 'Restart to update',
+    visible: isUpdateDownloaded,
+    click: () => {
+      autoUpdater.quitAndInstall();
+    },
+  },
+  { type: 'separator' },
   {
     label: 'Developer',
     submenu: [
@@ -88,8 +111,6 @@ app.whenReady().then(async () => {
   await onFirstRunMaybe();
 
   mb.on('ready', () => {
-    autoUpdater.checkForUpdatesAndNotify();
-
     mb.app.setAppUserModelId('com.electron.gitify');
 
     // Tray configuration
@@ -121,6 +142,27 @@ app.whenReady().then(async () => {
       mb.positioner.move('trayCenter', trayBounds);
       mb.window.resizable = false;
     });
+
+    // Auto Updater
+    checkForUpdates();
+    setInterval(checkForUpdates, 24 * 60 * 60 * 1000); // 24 hours
+
+    autoUpdater.on('update-available', () => {
+      log.info('Auto Updater: New update available');
+      isUpdateAvailable = true;
+      mb.window.webContents.send('gitify:auto-updater', isUpdateAvailable);
+    });
+
+    autoUpdater.on('update-not-available', () => {
+      log.info('Auto Updater: Already on the latest version');
+      isUpdateAvailable = false;
+      mb.window.webContents.send('gitify:auto-updater', isUpdateAvailable);
+    });
+
+    autoUpdater.on('update-downloaded', () => {
+      log.info('Auto Updater: Update downloaded');
+      isUpdateDownloaded = true;
+    });
   });
 
   nativeTheme.on('updated', () => {
@@ -156,7 +198,7 @@ app.whenReady().then(async () => {
 
   ipc.on('gitify:update-title', (_, title) => {
     if (!mb.tray.isDestroyed()) {
-      mb.tray.setTitle(title);
+      mb.tray.setTitle(`${isUpdateAvailable ? '⤓' : ''}${title}`);
     }
   });
 
@@ -183,6 +225,11 @@ app.whenReady().then(async () => {
   });
 });
 
+function checkForUpdates() {
+  log.info('Auto Updater: Checking for updates...');
+  autoUpdater.checkForUpdatesAndNotify();
+}
+
 function takeScreenshot() {
   const date = new Date();
   const dateStr = date.toISOString().replace(/:/g, '-');

src/routes/Settings.tsx

@@ -1,5 +1,6 @@
 import { GearIcon } from '@primer/octicons-react';
-import { type FC, useContext } from 'react';
+import { ipcRenderer } from 'electron';
+import { type FC, useContext, useEffect, useState } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
@@ -9,6 +10,14 @@ import { AppContext } from '../context/App';
 
 export const SettingsRoute: FC = () => {
   const { resetSettings } = useContext(AppContext);
+  const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
+
+  useEffect(() => {
+    ipcRenderer.on('gitify:auto-updater', (_, isUpdateAvailable: boolean) => {
+      setIsUpdateAvailable(isUpdateAvailable);
+    });
+  }, []);
+
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
       <Header fetchOnBack icon={GearIcon}>
@@ -31,7 +40,7 @@ export const SettingsRoute: FC = () => {
         </button>
       </div>
 
-      <SettingsFooter />
+      <SettingsFooter isUpdateAvailable={isUpdateAvailable} />
     </div>
   );
 };