From 01f83d64cc3e21ef0a1179c0aa1066bebf5b1ebb Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 17 Jun 2024 15:47:51 -0400
Subject: [PATCH 1/5] feat: my quick links

---
 src/components/Sidebar.test.tsx               |  44 +++++
 src/components/Sidebar.tsx                    |  36 +++-
 .../__snapshots__/Sidebar.test.tsx.snap       | 180 ++++++++++++++++++
 src/utils/links.test.ts                       |  16 ++
 src/utils/links.ts                            |   8 +
 5 files changed, 281 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 8c16f7ade..93b6b1d54 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -146,6 +146,50 @@ describe('components/Sidebar.tsx', () => {
     );
   });
 
+  it('opens my github issues page', () => {
+    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+
+    render(
+      <AppContext.Provider
+        value={{
+          isLoggedIn: true,
+          notifications: mockAccountNotifications,
+        }}
+      >
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+    fireEvent.click(screen.getByLabelText('My Issues'));
+    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
+    expect(openExternalLinkMock).toHaveBeenCalledWith(
+      'https://github.com/issues',
+    );
+  });
+
+  it('opens my github pull requests page', () => {
+    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
+
+    render(
+      <AppContext.Provider
+        value={{
+          isLoggedIn: true,
+          notifications: mockAccountNotifications,
+        }}
+      >
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>
+      </AppContext.Provider>,
+    );
+    fireEvent.click(screen.getByLabelText('My Pull Requests'));
+    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
+    expect(openExternalLinkMock).toHaveBeenCalledWith(
+      'https://github.com/pulls',
+    );
+  });
+
   it('should quit the app', () => {
     const quitAppMock = jest.spyOn(comms, 'quitApp');
 
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index eee0c2c82..bad095124 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,8 @@
 import {
   BellIcon,
   GearIcon,
+  GitPullRequestIcon,
+  IssueOpenedIcon,
   SyncIcon,
   XCircleIcon,
 } from '@primer/octicons-react';
@@ -11,7 +13,12 @@ import { AppContext } from '../context/App';
 import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
 import { cn } from '../utils/cn';
 import { quitApp } from '../utils/comms';
-import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
+import {
+  openGitHubIssues,
+  openGitHubNotifications,
+  openGitHubPulls,
+  openGitifyRepository,
+} from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
 
 export const Sidebar: FC = () => {
@@ -33,6 +40,11 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
+  const hasNotifications = useMemo(
+    () => notificationsCount > 0,
+    [notificationsCount],
+  );
+
   return (
     <div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar">
       <div className="flex flex-1 flex-col items-center py-4">
@@ -50,7 +62,7 @@ export const Sidebar: FC = () => {
           type="button"
           className={cn(
             'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
-            notificationsCount > 0 ? 'text-green-500' : 'text-white',
+            hasNotifications ? 'text-green-500' : 'text-white',
           )}
           onClick={() => openGitHubNotifications()}
           title={`${notificationsCount} Unread Notifications`}
@@ -59,7 +71,25 @@ export const Sidebar: FC = () => {
             size={12}
             aria-label={`${notificationsCount} Unread Notifications`}
           />
-          {notificationsCount > 0 && notificationsCount}
+          {hasNotifications && notificationsCount}
+        </button>
+
+        <button
+          type="button"
+          className="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          onClick={() => openGitHubIssues()}
+          title="My Issues"
+        >
+          <IssueOpenedIcon size={12} aria-label="My Issues" />
+        </button>
+
+        <button
+          type="button"
+          className="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          onClick={() => openGitHubPulls()}
+          title="My Pull Requests"
+        >
+          <GitPullRequestIcon size={12} aria-label="My Pull Requests" />
         </button>
       </div>
 
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 6ef542d27..043b38dd2 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -84,6 +84,51 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
             4
           </button>
+          <button
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="12"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="12"
+            >
+              <path
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+              />
+              <path
+                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="12"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="12"
+            >
+              <path
+                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+              />
+            </svg>
+          </button>
         </div>
         <div
           class="px-3 py-4"
@@ -194,6 +239,51 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
           4
         </button>
+        <button
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="12"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="12"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="12"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="12"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
       </div>
       <div
         class="px-3 py-4"
@@ -361,6 +451,51 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
             4
           </button>
+          <button
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="12"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="12"
+            >
+              <path
+                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+              />
+              <path
+                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="12"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="12"
+            >
+              <path
+                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+              />
+            </svg>
+          </button>
         </div>
         <div
           class="px-3 py-4"
@@ -471,6 +606,51 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
           4
         </button>
+        <button
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="12"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="12"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="12"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="12"
+          >
+            <path
+              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+            />
+          </svg>
+        </button>
       </div>
       <div
         class="px-3 py-4"
diff --git a/src/utils/links.test.ts b/src/utils/links.test.ts
index d01bb5e25..316fff367 100644
--- a/src/utils/links.test.ts
+++ b/src/utils/links.test.ts
@@ -10,8 +10,10 @@ import * as helpers from './helpers';
 import {
   openAccountProfile,
   openDeveloperSettings,
+  openGitHubIssues,
   openGitHubNotifications,
   openGitHubParticipatingDocs,
+  openGitHubPulls,
   openGitifyReleaseNotes,
   openGitifyRepository,
   openHost,
@@ -50,6 +52,20 @@ describe('utils/links.ts', () => {
     );
   });
 
+  it('openGitHubIssues', () => {
+    openGitHubIssues();
+    expect(comms.openExternalLink).toHaveBeenCalledWith(
+      'https://github.com/issues',
+    );
+  });
+
+  it('openGitHubPulls', () => {
+    openGitHubPulls();
+    expect(comms.openExternalLink).toHaveBeenCalledWith(
+      'https://github.com/pulls',
+    );
+  });
+
   it('openAccountProfile', () => {
     openAccountProfile(mockGitHubCloudAccount);
     expect(comms.openExternalLink).toHaveBeenCalledWith(
diff --git a/src/utils/links.ts b/src/utils/links.ts
index 3b6f84e66..6edd44772 100644
--- a/src/utils/links.ts
+++ b/src/utils/links.ts
@@ -19,6 +19,14 @@ export function openGitHubNotifications() {
   openExternalLink('https://github.com/notifications' as Link);
 }
 
+export function openGitHubIssues() {
+  openExternalLink('https://github.com/issues' as Link);
+}
+
+export function openGitHubPulls() {
+  openExternalLink('https://github.com/pulls' as Link);
+}
+
 export function openAccountProfile(account: Account) {
   const url = new URL(`https://${account.hostname}`);
   url.pathname = account.user.login;

From c07f94ea77f0291c87fd69e4dbe87de92555d5b3 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 18 Jun 2024 11:40:50 -0400
Subject: [PATCH 2/5] refactor: extract sidebar button into component

---
 src/components/Sidebar.tsx                    |  48 ++--
 src/components/buttons/SidebarButton.test.tsx |  25 ++
 src/components/buttons/SidebarButton.tsx      |  30 +++
 .../__snapshots__/SidebarButton.test.tsx.snap | 213 ++++++++++++++++++
 src/types.ts                                  |   1 +
 5 files changed, 283 insertions(+), 34 deletions(-)
 create mode 100644 src/components/buttons/SidebarButton.test.tsx
 create mode 100644 src/components/buttons/SidebarButton.tsx
 create mode 100644 src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index bad095124..3723e6f6f 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -11,7 +11,6 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
 import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
-import { cn } from '../utils/cn';
 import { quitApp } from '../utils/comms';
 import {
   openGitHubIssues,
@@ -20,6 +19,7 @@ import {
   openGitifyRepository,
 } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
+import { SidebarButton } from './buttons/SidebarButton';
 
 export const Sidebar: FC = () => {
   const navigate = useNavigate();
@@ -40,11 +40,6 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  const hasNotifications = useMemo(
-    () => notificationsCount > 0,
-    [notificationsCount],
-  );
-
   return (
     <div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar">
       <div className="flex flex-1 flex-col items-center py-4">
@@ -58,39 +53,24 @@ export const Sidebar: FC = () => {
           <Logo aria-label="Open Gitify" />
         </button>
 
-        <button
-          type="button"
-          className={cn(
-            'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
-            hasNotifications ? 'text-green-500' : 'text-white',
-          )}
-          onClick={() => openGitHubNotifications()}
+        <SidebarButton
           title={`${notificationsCount} Unread Notifications`}
-        >
-          <BellIcon
-            size={12}
-            aria-label={`${notificationsCount} Unread Notifications`}
-          />
-          {hasNotifications && notificationsCount}
-        </button>
+          metric={notificationsCount}
+          icon={BellIcon}
+          onClick={() => openGitHubNotifications()}
+        />
 
-        <button
-          type="button"
-          className="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+        <SidebarButton
+          title={'My Issues'}
+          icon={IssueOpenedIcon}
           onClick={() => openGitHubIssues()}
-          title="My Issues"
-        >
-          <IssueOpenedIcon size={12} aria-label="My Issues" />
-        </button>
+        />
 
-        <button
-          type="button"
-          className="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+        <SidebarButton
+          title={'My Pull Requests'}
+          icon={GitPullRequestIcon}
           onClick={() => openGitHubPulls()}
-          title="My Pull Requests"
-        >
-          <GitPullRequestIcon size={12} aria-label="My Pull Requests" />
-        </button>
+        />
       </div>
 
       <div className="px-3 py-4">
diff --git a/src/components/buttons/SidebarButton.test.tsx b/src/components/buttons/SidebarButton.test.tsx
new file mode 100644
index 000000000..a5efea9b7
--- /dev/null
+++ b/src/components/buttons/SidebarButton.test.tsx
@@ -0,0 +1,25 @@
+import { MarkGithubIcon } from '@primer/octicons-react';
+import { render } from '@testing-library/react';
+import { type ISidebarButton, SidebarButton } from './SidebarButton';
+
+describe('components/buttons/SidebarButton.tsx', () => {
+  it('should render with metric', () => {
+    const props: ISidebarButton = {
+      title: 'Mock Sidebar Button',
+      metric: 1,
+      icon: MarkGithubIcon,
+    };
+    const tree = render(<SidebarButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render without metric', () => {
+    const props: ISidebarButton = {
+      title: 'Mock Sidebar Button',
+      metric: 0,
+      icon: MarkGithubIcon,
+    };
+    const tree = render(<SidebarButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx
new file mode 100644
index 000000000..18b5aafcf
--- /dev/null
+++ b/src/components/buttons/SidebarButton.tsx
@@ -0,0 +1,30 @@
+import type { Icon } from '@primer/octicons-react';
+import type { FC } from 'react';
+import { IconColor } from '../../types';
+import { cn } from '../../utils/cn';
+
+export interface ISidebarButton {
+  title: string;
+  metric?: number;
+  icon: Icon;
+  onClick?: () => void;
+}
+
+export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
+  const hasMetric = props?.metric > 0;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
+        hasMetric ? IconColor.GREEN : IconColor.WHITE,
+      )}
+      onClick={() => props.onClick()}
+      title={props.title}
+    >
+      <props.icon size={12} aria-label={props.title} />
+      {hasMetric && props.metric}
+    </button>
+  );
+};
diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
new file mode 100644
index 000000000..4c3c97fe0
--- /dev/null
+++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+        title="Mock Sidebar Button"
+        type="button"
+      >
+        <svg
+          aria-label="Mock Sidebar Button"
+          class="octicon octicon-mark-github"
+          fill="currentColor"
+          focusable="false"
+          height="12"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="12"
+        >
+          <path
+            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+          />
+        </svg>
+        1
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+      title="Mock Sidebar Button"
+      type="button"
+    >
+      <svg
+        aria-label="Mock Sidebar Button"
+        class="octicon octicon-mark-github"
+        fill="currentColor"
+        focusable="false"
+        height="12"
+        role="img"
+        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        viewBox="0 0 16 16"
+        width="12"
+      >
+        <path
+          d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+        />
+      </svg>
+      1
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/buttons/SidebarButton.tsx should render without metric 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+        title="Mock Sidebar Button"
+        type="button"
+      >
+        <svg
+          aria-label="Mock Sidebar Button"
+          class="octicon octicon-mark-github"
+          fill="currentColor"
+          focusable="false"
+          height="12"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="12"
+        >
+          <path
+            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+          />
+        </svg>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+      title="Mock Sidebar Button"
+      type="button"
+    >
+      <svg
+        aria-label="Mock Sidebar Button"
+        class="octicon octicon-mark-github"
+        fill="currentColor"
+        focusable="false"
+        height="12"
+        role="img"
+        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        viewBox="0 0 16 16"
+        width="12"
+      >
+        <path
+          d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+        />
+      </svg>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/types.ts b/src/types.ts
index 7b3d1bbd1..410c5c95a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -127,6 +127,7 @@ export enum IconColor {
   PURPLE = 'text-purple-500',
   RED = 'text-red-500',
   YELLOW = 'text-yellow-500 dark:text-yellow-300',
+  WHITE = 'text-white',
 }
 
 export type PullRequestApprovalIcon = {

From dc674f17bb7c21c836f6e0e368833f6fb7349947 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 18 Jun 2024 12:00:38 -0400
Subject: [PATCH 3/5] refactor: extract sidebar button into component

---
 src/components/Sidebar.tsx                    | 56 ++++++++-----------
 .../__snapshots__/Sidebar.test.tsx.snap       | 36 ++++++------
 src/components/buttons/SidebarButton.tsx      | 14 ++++-
 .../__snapshots__/SidebarButton.test.tsx.snap |  8 +--
 4 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 3723e6f6f..6e64fea0d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -10,7 +10,6 @@ import { type FC, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
-import { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
 import { quitApp } from '../utils/comms';
 import {
   openGitHubIssues,
@@ -36,6 +35,11 @@ export const Sidebar: FC = () => {
     }
   };
 
+  const refreshNotifications = () => {
+    navigate('/', { replace: true });
+    fetchNotifications();
+  };
+
   const notificationsCount = useMemo(() => {
     return getNotificationCount(notifications);
   }, [notifications]);
@@ -61,13 +65,13 @@ export const Sidebar: FC = () => {
         />
 
         <SidebarButton
-          title={'My Issues'}
+          title="My Issues"
           icon={IssueOpenedIcon}
           onClick={() => openGitHubIssues()}
         />
 
         <SidebarButton
-          title={'My Pull Requests'}
+          title="My Pull Requests"
           icon={GitPullRequestIcon}
           onClick={() => openGitHubPulls()}
         />
@@ -76,43 +80,31 @@ export const Sidebar: FC = () => {
       <div className="px-3 py-4">
         {isLoggedIn && (
           <>
-            <button
-              type="button"
-              className={BUTTON_SIDEBAR_CLASS_NAME}
+            <SidebarButton
               title="Refresh Notifications"
-              onClick={() => {
-                navigate('/', { replace: true });
-                fetchNotifications();
-              }}
+              icon={SyncIcon}
+              size={16}
+              loading={status === 'loading'}
               disabled={status === 'loading'}
-            >
-              <SyncIcon
-                size={16}
-                aria-label="Refresh Notifications"
-                className={status === 'loading' ? 'animate-spin' : undefined}
-              />
-            </button>
-            <button
-              type="button"
-              className={BUTTON_SIDEBAR_CLASS_NAME}
+              onClick={() => refreshNotifications()}
+            />
+
+            <SidebarButton
               title="Settings"
-              onClick={toggleSettings}
-            >
-              <GearIcon size={16} aria-label="Settings" />
-            </button>
+              icon={GearIcon}
+              size={16}
+              onClick={() => toggleSettings()}
+            />
           </>
         )}
 
         {!isLoggedIn && (
-          <button
-            type="button"
-            className={BUTTON_SIDEBAR_CLASS_NAME}
+          <SidebarButton
             title="Quit Gitify"
-            aria-label="Quit Gitify"
-            onClick={quitApp}
-          >
-            <XCircleIcon size={16} aria-label="Quit Gitify" />
-          </button>
+            icon={XCircleIcon}
+            size={16}
+            onClick={() => quitApp()}
+          />
         )}
       </div>
     </div>
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 043b38dd2..a4e4df9bf 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
             title="4 Unread Notifications"
             type="button"
           >
@@ -85,7 +85,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             4
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
             title="My Issues"
             type="button"
           >
@@ -109,7 +109,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
             title="My Pull Requests"
             type="button"
           >
@@ -134,8 +134,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           class="px-3 py-4"
         >
           <button
-            aria-label="Quit Gitify"
-            class="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
             title="Quit Gitify"
             type="button"
           >
@@ -218,7 +217,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
           title="4 Unread Notifications"
           type="button"
         >
@@ -240,7 +239,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           4
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
           title="My Issues"
           type="button"
         >
@@ -264,7 +263,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
           title="My Pull Requests"
           type="button"
         >
@@ -289,8 +288,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         class="px-3 py-4"
       >
         <button
-          aria-label="Quit Gitify"
-          class="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
           title="Quit Gitify"
           type="button"
         >
@@ -430,7 +428,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
             title="4 Unread Notifications"
             type="button"
           >
@@ -452,7 +450,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             4
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
             title="My Issues"
             type="button"
           >
@@ -476,7 +474,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
           </button>
           <button
-            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
             title="My Pull Requests"
             type="button"
           >
@@ -501,8 +499,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           class="px-3 py-4"
         >
           <button
-            aria-label="Quit Gitify"
-            class="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
             title="Quit Gitify"
             type="button"
           >
@@ -585,7 +582,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
           title="4 Unread Notifications"
           type="button"
         >
@@ -607,7 +604,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           4
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
           title="My Issues"
           type="button"
         >
@@ -631,7 +628,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
         </button>
         <button
-          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
           title="My Pull Requests"
           type="button"
         >
@@ -656,8 +653,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         class="px-3 py-4"
       >
         <button
-          aria-label="Quit Gitify"
-          class="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
           title="Quit Gitify"
           type="button"
         >
diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx
index 18b5aafcf..26a216728 100644
--- a/src/components/buttons/SidebarButton.tsx
+++ b/src/components/buttons/SidebarButton.tsx
@@ -8,6 +8,9 @@ export interface ISidebarButton {
   metric?: number;
   icon: Icon;
   onClick?: () => void;
+  size?: number;
+  loading?: boolean;
+  disabled?: boolean;
 }
 
 export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
@@ -17,13 +20,18 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
     <button
       type="button"
       className={cn(
-        'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
-        hasMetric ? IconColor.GREEN : IconColor.WHITE,
+        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default',
+        hasMetric
+          ? `${IconColor.GREEN} hover:text-green-700`
+          : `${IconColor.WHITE} hover:text-gray-500`,
+        props.loading ? 'animate-spin' : undefined,
+        props.size ? 'py-2' : 'py-1',
       )}
       onClick={() => props.onClick()}
       title={props.title}
+      disabled={props.disabled}
     >
-      <props.icon size={12} aria-label={props.title} />
+      <props.icon size={props.size ?? 12} aria-label={props.title} />
       {hasMetric && props.metric}
     </button>
   );
diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
index 4c3c97fe0..30add36d3 100644
--- a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
         title="Mock Sidebar Button"
         type="button"
       >
@@ -31,7 +31,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
   </body>,
   "container": <div>
     <button
-      class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-green-500 hover:text-green-700 py-1"
       title="Mock Sidebar Button"
       type="button"
     >
@@ -113,7 +113,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
   "baseElement": <body>
     <div>
       <button
-        class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
         title="Mock Sidebar Button"
         type="button"
       >
@@ -137,7 +137,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
   </body>,
   "container": <div>
     <button
-      class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-white"
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
       title="Mock Sidebar Button"
       type="button"
     >

From 23a11de18e2be2324e28d15f2e338beafbffdbdc Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 18 Jun 2024 12:05:22 -0400
Subject: [PATCH 4/5] refactor: extract sidebar button into component

---
 src/components/Sidebar.test.tsx               |  44 -----
 src/components/Sidebar.tsx                    |  21 +-
 .../__snapshots__/Sidebar.test.tsx.snap       | 180 ------------------
 src/utils/links.test.ts                       |  16 --
 src/utils/links.ts                            |   8 -
 5 files changed, 1 insertion(+), 268 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 93b6b1d54..8c16f7ade 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -146,50 +146,6 @@ describe('components/Sidebar.tsx', () => {
     );
   });
 
-  it('opens my github issues page', () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
-
-    render(
-      <AppContext.Provider
-        value={{
-          isLoggedIn: true,
-          notifications: mockAccountNotifications,
-        }}
-      >
-        <MemoryRouter>
-          <Sidebar />
-        </MemoryRouter>
-      </AppContext.Provider>,
-    );
-    fireEvent.click(screen.getByLabelText('My Issues'));
-    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
-    expect(openExternalLinkMock).toHaveBeenCalledWith(
-      'https://github.com/issues',
-    );
-  });
-
-  it('opens my github pull requests page', () => {
-    const openExternalLinkMock = jest.spyOn(comms, 'openExternalLink');
-
-    render(
-      <AppContext.Provider
-        value={{
-          isLoggedIn: true,
-          notifications: mockAccountNotifications,
-        }}
-      >
-        <MemoryRouter>
-          <Sidebar />
-        </MemoryRouter>
-      </AppContext.Provider>,
-    );
-    fireEvent.click(screen.getByLabelText('My Pull Requests'));
-    expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
-    expect(openExternalLinkMock).toHaveBeenCalledWith(
-      'https://github.com/pulls',
-    );
-  });
-
   it('should quit the app', () => {
     const quitAppMock = jest.spyOn(comms, 'quitApp');
 
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6e64fea0d..a10b36f55 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,8 +1,6 @@
 import {
   BellIcon,
   GearIcon,
-  GitPullRequestIcon,
-  IssueOpenedIcon,
   SyncIcon,
   XCircleIcon,
 } from '@primer/octicons-react';
@@ -11,12 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
-import {
-  openGitHubIssues,
-  openGitHubNotifications,
-  openGitHubPulls,
-  openGitifyRepository,
-} from '../utils/links';
+import { openGitHubNotifications, openGitifyRepository } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
 import { SidebarButton } from './buttons/SidebarButton';
 
@@ -63,18 +56,6 @@ export const Sidebar: FC = () => {
           icon={BellIcon}
           onClick={() => openGitHubNotifications()}
         />
-
-        <SidebarButton
-          title="My Issues"
-          icon={IssueOpenedIcon}
-          onClick={() => openGitHubIssues()}
-        />
-
-        <SidebarButton
-          title="My Pull Requests"
-          icon={GitPullRequestIcon}
-          onClick={() => openGitHubPulls()}
-        />
       </div>
 
       <div className="px-3 py-4">
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index a4e4df9bf..4a2dbcf07 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -84,51 +84,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
             4
           </button>
-          <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-            title="My Issues"
-            type="button"
-          >
-            <svg
-              aria-label="My Issues"
-              class="octicon octicon-issue-opened"
-              fill="currentColor"
-              focusable="false"
-              height="12"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="12"
-            >
-              <path
-                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              />
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-            title="My Pull Requests"
-            type="button"
-          >
-            <svg
-              aria-label="My Pull Requests"
-              class="octicon octicon-git-pull-request"
-              fill="currentColor"
-              focusable="false"
-              height="12"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="12"
-            >
-              <path
-                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-              />
-            </svg>
-          </button>
         </div>
         <div
           class="px-3 py-4"
@@ -238,51 +193,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
           4
         </button>
-        <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-          title="My Issues"
-          type="button"
-        >
-          <svg
-            aria-label="My Issues"
-            class="octicon octicon-issue-opened"
-            fill="currentColor"
-            focusable="false"
-            height="12"
-            role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="12"
-          >
-            <path
-              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-            />
-            <path
-              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-            />
-          </svg>
-        </button>
-        <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-          title="My Pull Requests"
-          type="button"
-        >
-          <svg
-            aria-label="My Pull Requests"
-            class="octicon octicon-git-pull-request"
-            fill="currentColor"
-            focusable="false"
-            height="12"
-            role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="12"
-          >
-            <path
-              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-            />
-          </svg>
-        </button>
       </div>
       <div
         class="px-3 py-4"
@@ -449,51 +359,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
             4
           </button>
-          <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-            title="My Issues"
-            type="button"
-          >
-            <svg
-              aria-label="My Issues"
-              class="octicon octicon-issue-opened"
-              fill="currentColor"
-              focusable="false"
-              height="12"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="12"
-            >
-              <path
-                d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-              />
-              <path
-                d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-            title="My Pull Requests"
-            type="button"
-          >
-            <svg
-              aria-label="My Pull Requests"
-              class="octicon octicon-git-pull-request"
-              fill="currentColor"
-              focusable="false"
-              height="12"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="12"
-            >
-              <path
-                d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-              />
-            </svg>
-          </button>
         </div>
         <div
           class="px-3 py-4"
@@ -603,51 +468,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
           4
         </button>
-        <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-          title="My Issues"
-          type="button"
-        >
-          <svg
-            aria-label="My Issues"
-            class="octicon octicon-issue-opened"
-            fill="currentColor"
-            focusable="false"
-            height="12"
-            role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="12"
-          >
-            <path
-              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-            />
-            <path
-              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-            />
-          </svg>
-        </button>
-        <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-1"
-          title="My Pull Requests"
-          type="button"
-        >
-          <svg
-            aria-label="My Pull Requests"
-            class="octicon octicon-git-pull-request"
-            fill="currentColor"
-            focusable="false"
-            height="12"
-            role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="12"
-          >
-            <path
-              d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
-            />
-          </svg>
-        </button>
       </div>
       <div
         class="px-3 py-4"
diff --git a/src/utils/links.test.ts b/src/utils/links.test.ts
index 316fff367..d01bb5e25 100644
--- a/src/utils/links.test.ts
+++ b/src/utils/links.test.ts
@@ -10,10 +10,8 @@ import * as helpers from './helpers';
 import {
   openAccountProfile,
   openDeveloperSettings,
-  openGitHubIssues,
   openGitHubNotifications,
   openGitHubParticipatingDocs,
-  openGitHubPulls,
   openGitifyReleaseNotes,
   openGitifyRepository,
   openHost,
@@ -52,20 +50,6 @@ describe('utils/links.ts', () => {
     );
   });
 
-  it('openGitHubIssues', () => {
-    openGitHubIssues();
-    expect(comms.openExternalLink).toHaveBeenCalledWith(
-      'https://github.com/issues',
-    );
-  });
-
-  it('openGitHubPulls', () => {
-    openGitHubPulls();
-    expect(comms.openExternalLink).toHaveBeenCalledWith(
-      'https://github.com/pulls',
-    );
-  });
-
   it('openAccountProfile', () => {
     openAccountProfile(mockGitHubCloudAccount);
     expect(comms.openExternalLink).toHaveBeenCalledWith(
diff --git a/src/utils/links.ts b/src/utils/links.ts
index 6edd44772..3b6f84e66 100644
--- a/src/utils/links.ts
+++ b/src/utils/links.ts
@@ -19,14 +19,6 @@ export function openGitHubNotifications() {
   openExternalLink('https://github.com/notifications' as Link);
 }
 
-export function openGitHubIssues() {
-  openExternalLink('https://github.com/issues' as Link);
-}
-
-export function openGitHubPulls() {
-  openExternalLink('https://github.com/pulls' as Link);
-}
-
 export function openAccountProfile(account: Account) {
   const url = new URL(`https://${account.hostname}`);
   url.pathname = account.user.login;

From d84101e94ca0345c2d08271b3e49ecfce85bea1d Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 18 Jun 2024 12:10:15 -0400
Subject: [PATCH 5/5] refactor: extract sidebar button into component

---
 src/styles/gitify.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/styles/gitify.ts b/src/styles/gitify.ts
index ac91a80b3..d6a2e6d47 100644
--- a/src/styles/gitify.ts
+++ b/src/styles/gitify.ts
@@ -1,5 +1,2 @@
 export const BUTTON_CLASS_NAME =
   'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';
-
-export const BUTTON_SIDEBAR_CLASS_NAME =
-  'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none disabled:text-gray-500 disabled:cursor-default';