feat: ability to set fetch type (interval or inactivity)

src/renderer/__mocks__/state-mocks.ts

@@ -3,6 +3,7 @@ import {
   type Account,
   type AppearanceSettingsState,
   type AuthState,
+  FetchType,
   type FilterSettingsState,
   type GitifyState,
   type GitifyUser,
@@ -87,6 +88,7 @@ const mockAppearanceSettings: AppearanceSettingsState = {
 
 const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
+  fetchType: FetchType.INTERVAL,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/components/fields/FieldLabel.tsx

@@ -7,7 +7,7 @@ export interface IFieldLabel {
 
 export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
   return (
-    <label className="mr-3 font-medium cursor-pointer" htmlFor={props.name}>
+    <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}
     </label>
   );

src/renderer/components/fields/RadioGroup.tsx

@@ -1,16 +1,18 @@
-import type { ChangeEvent, FC } from 'react';
+import type { ChangeEvent, FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
 import type { RadioGroupItem } from '../../types';
 import { FieldLabel } from './FieldLabel';
+import { Tooltip } from './Tooltip';
 
 export interface IRadioGroup {
   name: string;
   label: string;
   options: RadioGroupItem[];
   value: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  tooltip?: ReactNode | string;
 }
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
@@ -47,6 +49,10 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           </Stack>
         );
       })}
+
+      {props.tooltip && (
+        <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
+      )}
     </Stack>
   );
 };

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

@@ -34,6 +34,27 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE');
   });
 
+  it('should change the fetchType radio group', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <NotificationSettings />
+        </AppContext.Provider>,
+      );
+    });
+
+    await userEvent.click(screen.getByTestId('radio-fetchType-inactivity'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('fetchType', 'INACTIVITY');
+  });
+
   it('should toggle the fetchAllNotifications checkbox', async () => {
     await act(async () => {
       render(

src/renderer/components/settings/NotificationSettings.tsx

@@ -14,7 +14,7 @@ import { Stack, Text } from '@primer/react';
 import { APPLICATION } from '../../../shared/constants';
 
 import { AppContext } from '../../context/App';
-import { GroupBy, Size } from '../../types';
+import { FetchType, GroupBy, Size } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
@@ -41,6 +41,33 @@ export const NotificationSettings: FC = () => {
           value={settings.groupBy}
         />
 
+        <RadioGroup
+          label="Fetch type:"
+          name="fetchType"
+          onChange={(evt) => {
+            updateSetting('fetchType', evt.target.value as FetchType);
+          }}
+          options={[
+            { label: 'Interval', value: FetchType.INTERVAL },
+            { label: 'Inactivity', value: FetchType.INACTIVITY },
+          ]}
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>Controls how new notifications are fetched.</Text>
+              <Text>
+                <Text as="strong">Interval</Text> will check for new
+                notifications on a regular scheduled interval.
+              </Text>
+              <Text>
+                <Text as="strong">Inactivity</Text> will check for new
+                notifications only when there has been no user activity within{' '}
+                {APPLICATION.NAME} for a specified period of time.
+              </Text>
+            </Stack>
+          }
+          value={settings.fetchType}
+        />
+
         <Checkbox
           checked={settings.fetchAllNotifications}
           label="Fetch all notifications"
@@ -102,7 +129,7 @@ export const NotificationSettings: FC = () => {
               tooltip={
                 <Stack direction="vertical" gap="condensed">
                   <Text>Show notification metric pills for:</Text>
-                  <div className="pl-4">
+                  <div className="pl-2">
                     <Stack direction="vertical" gap="none">
                       <Stack direction="horizontal" gap="condensed">
                         <IssueOpenedIcon size={Size.SMALL} />
@@ -140,27 +167,23 @@ export const NotificationSettings: FC = () => {
               tooltip={
                 <Stack direction="vertical" gap="condensed">
                   <Text>Show GitHub number for:</Text>
-                  <div className="pl-4">
-                    <ul>
-                      <li>
-                        <Stack direction="horizontal" gap="condensed">
-                          <CommentIcon size={Size.SMALL} />
-                          Discussion
-                        </Stack>
-                      </li>
-                      <li>
-                        <Stack direction="horizontal" gap="condensed">
-                          <IssueOpenedIcon size={Size.SMALL} />
-                          Issue
-                        </Stack>
-                      </li>
-                      <li>
-                        <Stack direction="horizontal" gap="condensed">
-                          <GitPullRequestIcon size={Size.SMALL} />
-                          Pull Request
-                        </Stack>
-                      </li>
-                    </ul>
+                  <div className="pl-2">
+                    <Stack direction="vertical" gap="none">
+                      <Stack direction="horizontal" gap="condensed">
+                        <CommentIcon size={Size.SMALL} />
+                        Discussion
+                      </Stack>
+
+                      <Stack direction="horizontal" gap="condensed">
+                        <IssueOpenedIcon size={Size.SMALL} />
+                        Issue
+                      </Stack>
+
+                      <Stack direction="horizontal" gap="condensed">
+                        <GitPullRequestIcon size={Size.SMALL} />
+                        Pull Request
+                      </Stack>
+                    </Stack>
                   </div>
                 </Stack>
               }

src/renderer/context/App.tsx

@@ -10,7 +10,8 @@ import {
 import { useTheme } from '@primer/react';
 
 import { Constants } from '../constants';
-import { useInterval } from '../hooks/useInterval';
+import { useInactivityTimer } from '../hooks/timers/useInactivityTimer';
+import { useIntervalTimer } from '../hooks/timers/useIntervalTimer';
 import { useNotifications } from '../hooks/useNotifications';
 import type {
   Account,
@@ -24,6 +25,7 @@ import type {
   Status,
   Token,
 } from '../types';
+import { FetchType } from '../types';
 import type { Notification } from '../typesGitHub';
 import { headNotifications } from '../utils/api/client';
 import type {
@@ -142,11 +144,25 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     settings.filterReasons,
   ]);
 
-  useInterval(() => {
-    fetchNotifications({ auth, settings });
-  }, Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+  useIntervalTimer(
+    () => {
+      fetchNotifications({ auth, settings });
+    },
+    settings.fetchType === FetchType.INTERVAL
+      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
+      : null,
+  );
+
+  useInactivityTimer(
+    () => {
+      fetchNotifications({ auth, settings });
+    },
+    settings.fetchType === FetchType.INACTIVITY
+      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
+      : null,
+  );
 
-  useInterval(() => {
+  useIntervalTimer(() => {
     for (const account of auth.accounts) {
       refreshAccount(account);
     }

src/renderer/context/defaults.ts

@@ -1,6 +1,7 @@
 import {
   type AppearanceSettingsState,
   type AuthState,
+  FetchType,
   type FilterSettingsState,
   GroupBy,
   type NotificationSettingsState,
@@ -25,6 +26,7 @@ const defaultAppearanceSettings: AppearanceSettingsState = {
 
 const defaultNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
+  fetchType: FetchType.INTERVAL,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,