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

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

Author: setchy

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.tsx

@@ -51,6 +51,20 @@ export const NotificationSettings: FC = () => {
             { 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}
         />
 
@@ -115,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} />
@@ -153,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>
               }