From c79e2d92779863454c4ffcd728479b5c43c778b8 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 6 Aug 2024 01:20:14 -0400
Subject: [PATCH 1/7] feat(account): add avatar and account-level quick links

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/__mocks__/state-mocks.ts                  |    2 +
 src/components/AccountNotifications.tsx       |   32 +-
 src/components/RepositoryNotifications.tsx    |    2 +-
 .../AccountNotifications.test.tsx.snap        | 1068 +++++++++++++----
 .../RepositoryNotifications.test.tsx.snap     |   14 +-
 src/context/App.tsx                           |   22 +-
 src/routes/Accounts.tsx                       |   31 +-
 .../__snapshots__/Accounts.test.tsx.snap      |   99 +-
 src/types.ts                                  |    1 +
 src/utils/auth/utils.test.ts                  |   16 +-
 src/utils/auth/utils.ts                       |   39 +-
 11 files changed, 1006 insertions(+), 320 deletions(-)

diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts
index 0065b2390..68f46e8e5 100644
--- a/src/__mocks__/state-mocks.ts
+++ b/src/__mocks__/state-mocks.ts
@@ -5,6 +5,7 @@ import {
   type GitifyUser,
   GroupBy,
   type Hostname,
+  type Link,
   OpenPreference,
   type SettingsState,
   Theme,
@@ -24,6 +25,7 @@ export const mockGitifyUser: GitifyUser = {
   login: 'octocat',
   name: 'Mona Lisa Octocat',
   id: 123456789,
+  avatar: 'https://avatars.githubusercontent.com/u/583231?v=4' as Link,
 };
 
 export const mockPersonalAccessTokenAccount: Account = {
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 3714bc649..4e3a2c971 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -2,19 +2,27 @@ import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronUpIcon,
+  FeedPersonIcon,
+  GitPullRequestIcon,
+  IssueOpenedIcon,
 } from '@primer/octicons-react';
 import { type FC, type MouseEvent, useContext, useMemo, useState } from 'react';
 import { AppContext } from '../context/App';
 import { type Account, type GitifyError, Opacity, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
-import { openAccountProfile } from '../utils/links';
+import {
+  openAccountProfile,
+  openGitHubIssues,
+  openGitHubPulls,
+} from '../utils/links';
 import { AllRead } from './AllRead';
 import { HoverGroup } from './HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { Oops } from './Oops';
 import { RepositoryNotifications } from './RepositoryNotifications';
 import { InteractionButton } from './buttons/InteractionButton';
+import { AvatarIcon } from './icons/AvatarIcon';
 import { PlatformIcon } from './icons/PlatformIcon';
 
 interface IAccountNotifications {
@@ -85,8 +93,13 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           onClick={toggleAccountNotifications}
         >
           <div className="flex">
-            <div className="mr-3 flex items-center justify-center">
-              <PlatformIcon type={account.platform} size={Size.MEDIUM} />
+            <div className="mr-2 flex items-center justify-center">
+              <AvatarIcon
+                title={account.user.login}
+                url={account.user.avatar}
+                size={Size.SMALL}
+                defaultIcon={FeedPersonIcon}
+              />
             </div>
             <button
               type="button"
@@ -101,6 +114,19 @@ export const AccountNotifications: FC<IAccountNotifications> = (
             </button>
           </div>
           <HoverGroup>
+            <PlatformIcon type={account.platform} size={Size.SMALL} />
+            <InteractionButton
+              title="My Issues"
+              icon={IssueOpenedIcon}
+              size={Size.SMALL}
+              onClick={() => openGitHubIssues(account.hostname)}
+            />
+            <InteractionButton
+              title="My Pull Requests"
+              icon={GitPullRequestIcon}
+              size={Size.SMALL}
+              onClick={() => openGitHubPulls(account.hostname)}
+            />
             <InteractionButton
               title={toggleAccountNotificationsLabel}
               icon={ChevronIcon}
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index c4aaab81c..758c3a099 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -55,7 +55,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
       >
         <div
           className={cn(
-            'flex flex-1 gap-4 items-center truncate text-sm font-medium',
+            'flex flex-1 gap-3 items-center truncate text-sm font-medium',
             animateExit &&
               'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
             showAsRead ? Opacity.READ : Opacity.MEDIUM,
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index f37cb8bcd..295295cda 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -12,27 +12,13 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -45,6 +31,70 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          </span>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="No notifications for account"
@@ -97,27 +147,13 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
         class="flex"
       >
         <div
-          class="mr-3 flex items-center justify-center"
+          class="mr-2 flex items-center justify-center"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <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>
-          </span>
+          <img
+            alt="octocat's avatar"
+            class="rounded-full object-cover size-5"
+            src="https://avatars.githubusercontent.com/u/583231?v=4"
+          />
         </div>
         <button
           title="Open Profile"
@@ -130,6 +166,70 @@ exports[`components/AccountNotifications.tsx should render itself - account erro
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        </span>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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="h-full hover:text-green-500 focus:outline-none"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="No notifications for account"
@@ -239,27 +339,13 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -272,6 +358,70 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          </span>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Hide account notifications"
@@ -671,27 +821,13 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         class="flex"
       >
         <div
-          class="mr-3 flex items-center justify-center"
+          class="mr-2 flex items-center justify-center"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <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>
-          </span>
+          <img
+            alt="octocat's avatar"
+            class="rounded-full object-cover size-5"
+            src="https://avatars.githubusercontent.com/u/583231?v=4"
+          />
         </div>
         <button
           title="Open Profile"
@@ -704,26 +840,90 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        </span>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
-          title="Hide account notifications"
+          title="My Issues"
           type="button"
         >
           <svg
-            aria-label="Hide account notifications"
-            class="octicon octicon-chevron-down"
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
             fill="currentColor"
             focusable="false"
             height="14"
             role="img"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 12 12"
+            viewBox="0 0 16 16"
             width="14"
           >
             <path
-              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
             />
-          </svg>
+            <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="h-full hover:text-green-500 focus:outline-none"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Hide account notifications"
+          type="button"
+        >
+          <svg
+            aria-label="Hide account notifications"
+            class="octicon octicon-chevron-down"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 12 12"
+            width="14"
+          >
+            <path
+              d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"
+            />
+          </svg>
         </button>
       </div>
     </div>
@@ -1160,27 +1360,13 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -1193,6 +1379,70 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          </span>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Hide account notifications"
@@ -1229,27 +1479,13 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
         class="flex"
       >
         <div
-          class="mr-3 flex items-center justify-center"
+          class="mr-2 flex items-center justify-center"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <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>
-          </span>
+          <img
+            alt="octocat's avatar"
+            class="rounded-full object-cover size-5"
+            src="https://avatars.githubusercontent.com/u/583231?v=4"
+          />
         </div>
         <button
           title="Open Profile"
@@ -1262,6 +1498,70 @@ exports[`components/AccountNotifications.tsx should render itself - group notifi
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        </span>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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="h-full hover:text-green-500 focus:outline-none"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="Hide account notifications"
@@ -1355,27 +1655,13 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -1387,55 +1673,6 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
         </div>
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
-        >
-          <button
-            class="h-full hover:text-green-500 focus:outline-none"
-            title="No notifications for account"
-            type="button"
-          >
-            <svg
-              aria-label="No notifications for account"
-              class="octicon octicon-chevron-left"
-              fill="currentColor"
-              focusable="false"
-              height="14"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 12 12"
-              width="14"
-            >
-              <path
-                d="M3.587 6.025c0 .2.1.4.2.5l3.3 3.3c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1l-2.7-2.7 2.7-2.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0l-3.2 3.2c-.2.2-.3.4-.3.6Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
-      >
-        <h1
-          class="mt-2 mb-5 text-5xl"
-        >
-          🎊
-        </h1>
-        <h2
-          class="mb-2 text-xl font-semibold"
-        >
-          No new notifications.
-        </h2>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
-    >
-      <div
-        class="flex"
-      >
-        <div
-          class="mr-3 flex items-center justify-center"
         >
           <span
             class="mr-1"
@@ -1446,18 +1683,117 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
               class="octicon octicon-mark-github"
               fill="currentColor"
               focusable="false"
-              height="16"
+              height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
               viewBox="0 0 16 16"
-              width="16"
+              width="14"
             >
               <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>
           </span>
-        </div>
-        <button
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="No notifications for account"
+            type="button"
+          >
+            <svg
+              aria-label="No notifications for account"
+              class="octicon octicon-chevron-left"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 12 12"
+              width="14"
+            >
+              <path
+                d="M3.587 6.025c0 .2.1.4.2.5l3.3 3.3c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1l-2.7-2.7 2.7-2.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0l-3.2 3.2c-.2.2-.3.4-.3.6Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+      >
+        <h1
+          class="mt-2 mb-5 text-5xl"
+        >
+          🎊
+        </h1>
+        <h2
+          class="mb-2 text-xl font-semibold"
+        >
+          No new notifications.
+        </h2>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+    >
+      <div
+        class="flex"
+      >
+        <div
+          class="mr-2 flex items-center justify-center"
+        >
+          <img
+            alt="octocat's avatar"
+            class="rounded-full object-cover size-5"
+            src="https://avatars.githubusercontent.com/u/583231?v=4"
+          />
+        </div>
+        <button
           title="Open Profile"
           type="button"
         >
@@ -1468,6 +1804,70 @@ exports[`components/AccountNotifications.tsx should render itself - no notificat
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        </span>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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="h-full hover:text-green-500 focus:outline-none"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="No notifications for account"
@@ -1572,27 +1972,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -1605,6 +1991,70 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          </span>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Show account notifications"
@@ -1637,27 +2087,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           class="flex"
         >
           <div
-            class="mr-3 flex items-center justify-center"
+            class="mr-2 flex items-center justify-center"
           >
-            <span
-              class="mr-1"
-              title="GitHub Cloud"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-mark-github"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <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>
-            </span>
+            <img
+              alt="octocat's avatar"
+              class="rounded-full object-cover size-5"
+              src="https://avatars.githubusercontent.com/u/583231?v=4"
+            />
           </div>
           <button
             title="Open Profile"
@@ -1670,6 +2106,70 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         <div
           class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
+          <span
+            class="mr-1"
+            title="GitHub Cloud"
+          >
+            <svg
+              aria-hidden="true"
+              class="octicon octicon-mark-github"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
+          </span>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="My Issues"
+            type="button"
+          >
+            <svg
+              aria-label="My Issues"
+              class="octicon octicon-issue-opened"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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="h-full hover:text-green-500 focus:outline-none"
+            title="My Pull Requests"
+            type="button"
+          >
+            <svg
+              aria-label="My Pull Requests"
+              class="octicon octicon-git-pull-request"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <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>
           <button
             class="h-full hover:text-green-500 focus:outline-none"
             title="Hide account notifications"
@@ -1706,27 +2206,13 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         class="flex"
       >
         <div
-          class="mr-3 flex items-center justify-center"
+          class="mr-2 flex items-center justify-center"
         >
-          <span
-            class="mr-1"
-            title="GitHub Cloud"
-          >
-            <svg
-              aria-hidden="true"
-              class="octicon octicon-mark-github"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <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>
-          </span>
+          <img
+            alt="octocat's avatar"
+            class="rounded-full object-cover size-5"
+            src="https://avatars.githubusercontent.com/u/583231?v=4"
+          />
         </div>
         <button
           title="Open Profile"
@@ -1739,6 +2225,70 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
       <div
         class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
+        <span
+          class="mr-1"
+          title="GitHub Cloud"
+        >
+          <svg
+            aria-hidden="true"
+            class="octicon octicon-mark-github"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
+        </span>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="My Issues"
+          type="button"
+        >
+          <svg
+            aria-label="My Issues"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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="h-full hover:text-green-500 focus:outline-none"
+          title="My Pull Requests"
+          type="button"
+        >
+          <svg
+            aria-label="My Pull Requests"
+            class="octicon octicon-git-pull-request"
+            fill="currentColor"
+            focusable="false"
+            height="14"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="14"
+          >
+            <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>
         <button
           class="h-full hover:text-green-500 focus:outline-none"
           title="Hide account notifications"
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 34fac98d9..31eacbd20 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+          class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
@@ -103,7 +103,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
@@ -254,7 +254,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+          class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -350,7 +350,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+          class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -453,7 +453,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -613,7 +613,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+          class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -716,7 +716,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
+        class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 67857be5e..552006a8b 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -32,7 +32,7 @@ import {
   addAccount,
   authGitHub,
   getToken,
-  getUserData,
+  refreshAccount,
   removeAccount,
 } from '../utils/auth/utils';
 import {
@@ -201,8 +201,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     const { authCode } = await authGitHub();
     const { token } = await getToken(authCode);
     const hostname = Constants.DEFAULT_AUTH_OPTIONS.hostname;
-    const user = await getUserData(token, hostname);
-    const updatedAuth = addAccount(auth, 'GitHub App', token, hostname, user);
+    const updatedAuth = await addAccount(auth, 'GitHub App', token, hostname);
     setAuth(updatedAuth);
     saveState({ auth: updatedAuth, settings });
   }, [auth, settings]);
@@ -211,8 +210,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     async (data: LoginOAuthAppOptions) => {
       const { authOptions, authCode } = await authGitHub(data);
       const { token, hostname } = await getToken(authCode, authOptions);
-      const user = await getUserData(token, hostname);
-      const updatedAuth = addAccount(auth, 'OAuth App', token, hostname, user);
+      const updatedAuth = await addAccount(auth, 'OAuth App', token, hostname);
       setAuth(updatedAuth);
       saveState({ auth: updatedAuth, settings });
     },
@@ -222,13 +220,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   const loginWithPersonalAccessToken = useCallback(
     async ({ token, hostname }: LoginPersonalAccessTokenOptions) => {
       await headNotifications(hostname, token);
-      const user = await getUserData(token, hostname);
-      const updatedAuth = addAccount(
+      const updatedAuth = await addAccount(
         auth,
         'Personal Access Token',
         token,
         hostname,
-        user,
       );
       setAuth(updatedAuth);
       saveState({ auth: updatedAuth, settings });
@@ -247,7 +243,6 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   const restoreSettings = useCallback(async () => {
     await migrateAuthenticatedAccounts();
-
     const existing = loadState();
 
     if (existing.auth) {
@@ -260,14 +255,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
       webFrame.setZoomLevel(
         zoomPercentageToLevel(existing.settings.zoomPercentage),
       );
-      return existing.settings;
     }
 
-    for (const account of auth.accounts.filter(
-      (a) => a.platform === 'GitHub Enterprise Server',
-    )) {
-      const res = await headNotifications(account.hostname, account.token);
-      account.version = res.headers['x-github-enterprise-version'];
+    // Refresh account data on app start
+    for (const account of existing.auth.accounts) {
+      await refreshAccount(account);
     }
   }, []);
 
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 60e77c572..7e4dadd38 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -1,19 +1,22 @@
 import {
+  FeedPersonIcon,
   KeyIcon,
   PersonIcon,
   PlusIcon,
   SignOutIcon,
+  SyncIcon,
 } from '@primer/octicons-react';
 
 import { type FC, useCallback, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Header } from '../components/Header';
 import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
+import { AvatarIcon } from '../components/icons/AvatarIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
 import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import { type Account, Size } from '../types';
-import { getAccountUUID } from '../utils/auth/utils';
+import { getAccountUUID, refreshAccount } from '../utils/auth/utils';
 import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
 import {
   openAccountProfile,
@@ -57,16 +60,22 @@ export const AccountsRoute: FC = () => {
                 <div>
                   <button
                     type="button"
-                    className="mb-1 cursor-pointer text-sm font-semibold"
+                    className="flex flex-1 gap-2 items-center justify-center mb-1 cursor-pointer text-sm font-semibold"
                     title="Open Profile"
                     onClick={() => openAccountProfile(account)}
                   >
+                    <AvatarIcon
+                      title={account.user.login}
+                      url={account.user.avatar}
+                      size={Size.MEDIUM}
+                      defaultIcon={FeedPersonIcon}
+                    />
                     @{account.user.login}
                     <span
                       hidden={!account.user?.name}
-                      className="pl-1 text-xs font-medium italic"
+                      className="text-xs font-medium italic"
                     >
-                      - {account.user?.name}
+                      ({account.user?.name})
                     </span>
                   </button>
                 </div>
@@ -94,6 +103,20 @@ export const AccountsRoute: FC = () => {
                 </div>
               </div>
               <div>
+                <button
+                  type="button"
+                  className={BUTTON_CLASS_NAME}
+                  title={`Refresh ${account.user.login}`}
+                  onClick={async () => {
+                    await refreshAccount(account);
+                    navigate('/accounts', { replace: true });
+                  }}
+                >
+                  <SyncIcon
+                    size={Size.XLARGE}
+                    aria-label={`Refresh ${account.user.login}`}
+                  />
+                </button>
                 <button
                   type="button"
                   className={BUTTON_CLASS_NAME}
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index da96fff28..e4fc4a576 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -68,17 +68,23 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         >
           <div>
             <button
-              class="mb-1 cursor-pointer text-sm font-semibold"
+              class="flex flex-1 gap-2 items-center justify-center mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-6"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
               @
               octocat
               <span
-                class="pl-1 text-xs font-medium italic"
+                class="text-xs font-medium italic"
               >
-                - 
+                (
                 Mona Lisa Octocat
+                )
               </span>
             </button>
           </div>
@@ -142,6 +148,27 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
         </div>
         <div>
+          <button
+            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            title="Refresh octocat"
+            type="button"
+          >
+            <svg
+              aria-label="Refresh octocat"
+              class="octicon octicon-sync"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+              />
+            </svg>
+          </button>
           <button
             class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
             title="Logout octocat"
@@ -173,17 +200,23 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         >
           <div>
             <button
-              class="mb-1 cursor-pointer text-sm font-semibold"
+              class="flex flex-1 gap-2 items-center justify-center mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-6"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
               @
               octocat
               <span
-                class="pl-1 text-xs font-medium italic"
+                class="text-xs font-medium italic"
               >
-                - 
+                (
                 Mona Lisa Octocat
+                )
               </span>
             </button>
           </div>
@@ -247,6 +280,27 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
         </div>
         <div>
+          <button
+            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            title="Refresh octocat"
+            type="button"
+          >
+            <svg
+              aria-label="Refresh octocat"
+              class="octicon octicon-sync"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+              />
+            </svg>
+          </button>
           <button
             class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
             title="Logout octocat"
@@ -278,17 +332,23 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         >
           <div>
             <button
-              class="mb-1 cursor-pointer text-sm font-semibold"
+              class="flex flex-1 gap-2 items-center justify-center mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
+              <img
+                alt="octocat's avatar"
+                class="rounded-full object-cover size-6"
+                src="https://avatars.githubusercontent.com/u/583231?v=4"
+              />
               @
               octocat
               <span
-                class="pl-1 text-xs font-medium italic"
+                class="text-xs font-medium italic"
               >
-                - 
+                (
                 Mona Lisa Octocat
+                )
               </span>
             </button>
           </div>
@@ -352,6 +412,27 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
         </div>
         <div>
+          <button
+            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            title="Refresh octocat"
+            type="button"
+          >
+            <svg
+              aria-label="Refresh octocat"
+              class="octicon octicon-sync"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="20"
+            >
+              <path
+                d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"
+              />
+            </svg>
+          </button>
           <button
             class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
             title="Logout octocat"
diff --git a/src/types.ts b/src/types.ts
index 09ac84a8b..826127dc0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -130,6 +130,7 @@ export interface AccountNotifications {
 export interface GitifyUser {
   login: string;
   name: string | null;
+  avatar: Link | null;
   id: number;
 }
 
diff --git a/src/utils/auth/utils.test.ts b/src/utils/auth/utils.test.ts
index bb8f22642..8ac3a23fa 100644
--- a/src/utils/auth/utils.test.ts
+++ b/src/utils/auth/utils.test.ts
@@ -121,8 +121,8 @@ describe('utils/auth/utils.ts', () => {
     });
 
     describe('should add GitHub Cloud account', () => {
-      it('should add personal access token account', () => {
-        const result = auth.addAccount(
+      it('should add personal access token account', async () => {
+        const result = await auth.addAccount(
           mockAuthState,
           'Personal Access Token',
           '123-456' as Token,
@@ -140,8 +140,8 @@ describe('utils/auth/utils.ts', () => {
         ]);
       });
 
-      it('should add oauth app account', () => {
-        const result = auth.addAccount(
+      it('should add oauth app account', async () => {
+        const result = await auth.addAccount(
           mockAuthState,
           'OAuth App',
           '123-456' as Token,
@@ -161,8 +161,8 @@ describe('utils/auth/utils.ts', () => {
     });
 
     describe('should add GitHub Enterprise Server account', () => {
-      it('should add personal access token account', () => {
-        const result = auth.addAccount(
+      it('should add personal access token account', async () => {
+        const result = await auth.addAccount(
           mockAuthState,
           'Personal Access Token',
           '123-456' as Token,
@@ -180,8 +180,8 @@ describe('utils/auth/utils.ts', () => {
         ]);
       });
 
-      it('should add oauth app account', () => {
-        const result = auth.addAccount(
+      it('should add oauth app account', async () => {
+        const result = await auth.addAccount(
           mockAuthState,
           'OAuth App',
           '123-456' as Token,
diff --git a/src/utils/auth/utils.ts b/src/utils/auth/utils.ts
index b15b84557..6a785f480 100644
--- a/src/utils/auth/utils.ts
+++ b/src/utils/auth/utils.ts
@@ -11,7 +11,7 @@ import type {
   Token,
 } from '../../types';
 import type { UserDetails } from '../../typesGitHub';
-import { getAuthenticatedUser } from '../api/client';
+import { getAuthenticatedUser, headNotifications } from '../api/client';
 import { apiRequest } from '../api/request';
 import { Constants } from '../constants';
 import { getPlatformFromHostname } from '../helpers';
@@ -98,6 +98,7 @@ export async function getUserData(
     id: response.id,
     login: response.login,
     name: response.name,
+    avatar: response.avatar_url,
   };
 }
 
@@ -120,24 +121,23 @@ export async function getToken(
   };
 }
 
-export function addAccount(
+export async function addAccount(
   auth: AuthState,
   method: AuthMethod,
   token: Token,
   hostname: Hostname,
-  user?: GitifyUser,
-): AuthState {
+): Promise<AuthState> {
+  let newAccount = {
+    hostname: hostname,
+    method: method,
+    platform: getPlatformFromHostname(hostname),
+    token: token,
+  } as Account;
+
+  newAccount = await refreshAccount(newAccount);
+
   return {
-    accounts: [
-      ...auth.accounts,
-      {
-        hostname: hostname,
-        method: method,
-        platform: getPlatformFromHostname(hostname),
-        token: token,
-        user: user,
-      },
-    ],
+    accounts: [...auth.accounts, newAccount],
   };
 }
 
@@ -151,6 +151,17 @@ export function removeAccount(auth: AuthState, account: Account): AuthState {
   };
 }
 
+export async function refreshAccount(account: Account): Promise<Account> {
+  // Refresh user data
+  account.user = await getUserData(account.token, account.hostname);
+
+  // Refresh platform version
+  const res = await headNotifications(account.hostname, account.token);
+  account.version = res.headers['x-github-enterprise-version'] ?? 'latest';
+
+  return account;
+}
+
 export function getDeveloperSettingsURL(account: Account): Link {
   const settingsURL = new URL(`https://${account.hostname}`);
 

From ea9dd660eca184c759a76c07fc083a35479d30ce Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 6 Aug 2024 01:46:37 -0400
Subject: [PATCH 2/7] feat(account): add avatar and account-level quick links

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/context/App.test.tsx         |  6 ++---
 src/context/App.tsx              | 18 +++++++++-----
 src/utils/auth/migration.test.ts | 12 ++++++----
 src/utils/auth/utils.test.ts     | 40 ++++++++++++++++++++++++++++----
 src/utils/auth/utils.ts          | 23 +++++++++++++-----
 5 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
index 4e49f7fe3..f41f887b8 100644
--- a/src/context/App.test.tsx
+++ b/src/context/App.test.tsx
@@ -79,19 +79,19 @@ describe('context/App.tsx', () => {
       );
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_INTERVAL);
+        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL);
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(2);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_INTERVAL);
+        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL);
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(3);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_INTERVAL);
+        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL);
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(4);
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 552006a8b..94e19d50a 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -146,7 +146,13 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
   useInterval(() => {
     fetchNotifications({ auth, settings });
-  }, Constants.FETCH_INTERVAL);
+  }, Constants.FETCH_NOTIFICATIONS_INTERVAL);
+
+  useInterval(() => {
+    for (const account of auth.accounts) {
+      refreshAccount(account);
+    }
+  }, Constants.REFRESH_ACCOUNTS_INTERVAL);
 
   useEffect(() => {
     const count = getNotificationCount(notifications);
@@ -247,6 +253,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
 
     if (existing.auth) {
       setAuth({ ...defaultAuth, ...existing.auth });
+
+      // Refresh account data on app start
+      for (const account of existing.auth.accounts) {
+        await refreshAccount(account);
+      }
     }
 
     if (existing.settings) {
@@ -256,11 +267,6 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         zoomPercentageToLevel(existing.settings.zoomPercentage),
       );
     }
-
-    // Refresh account data on app start
-    for (const account of existing.auth.accounts) {
-      await refreshAccount(account);
-    }
   }, []);
 
   const fetchNotificationsWithAccounts = useCallback(
diff --git a/src/utils/auth/migration.test.ts b/src/utils/auth/migration.test.ts
index 4eb2dc59b..b6669d37c 100644
--- a/src/utils/auth/migration.test.ts
+++ b/src/utils/auth/migration.test.ts
@@ -84,7 +84,9 @@ describe('utils/auth/migration.ts', () => {
 
   describe('convertAccounts', () => {
     it('should convert accounts - personal access token only', async () => {
-      nock('https://api.github.com').get('/user').reply(200, mockGitifyUser);
+      nock('https://api.github.com')
+        .get('/user')
+        .reply(200, { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar });
 
       const result = await convertAccounts({
         token: mockToken,
@@ -105,7 +107,7 @@ describe('utils/auth/migration.ts', () => {
     it('should convert accounts - oauth app only', async () => {
       nock('https://github.gitify.io/api/v3')
         .get('/user')
-        .reply(200, mockGitifyUser);
+        .reply(200, { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar });
 
       const result = await convertAccounts({
         enterpriseAccounts: [
@@ -125,10 +127,12 @@ describe('utils/auth/migration.ts', () => {
     });
 
     it('should convert accounts - combination', async () => {
-      nock('https://api.github.com').get('/user').reply(200, mockGitifyUser);
+      nock('https://api.github.com')
+        .get('/user')
+        .reply(200, { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar });
       nock('https://github.gitify.io/api/v3')
         .get('/user')
-        .reply(200, mockGitifyUser);
+        .reply(200, { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar });
 
       const result = await convertAccounts({
         token: mockToken,
diff --git a/src/utils/auth/utils.test.ts b/src/utils/auth/utils.test.ts
index 8ac3a23fa..460b0496b 100644
--- a/src/utils/auth/utils.test.ts
+++ b/src/utils/auth/utils.test.ts
@@ -1,6 +1,12 @@
 import remote from '@electron/remote';
+import axios from 'axios';
 import type { AxiosPromise, AxiosResponse } from 'axios';
-import { mockAuth, mockGitHubCloudAccount } from '../../__mocks__/state-mocks';
+import nock from 'nock';
+import {
+  mockAuth,
+  mockGitHubCloudAccount,
+  mockGitifyUser,
+} from '../../__mocks__/state-mocks';
 import type {
   Account,
   AuthCode,
@@ -118,9 +124,19 @@ describe('utils/auth/utils.ts', () => {
       mockAuthState = {
         accounts: [],
       };
+
+      // axios will default to using the XHR adapter which can't be intercepted
+      // by nock. So, configure axios to use the node adapter.
+      axios.defaults.adapter = 'http';
     });
 
     describe('should add GitHub Cloud account', () => {
+      beforeEach(() => {
+        nock('https://api.github.com')
+          .get('/user')
+          .reply(200, { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar });
+      });
+
       it('should add personal access token account', async () => {
         const result = await auth.addAccount(
           mockAuthState,
@@ -135,7 +151,8 @@ describe('utils/auth/utils.ts', () => {
             method: 'Personal Access Token',
             platform: 'GitHub Cloud',
             token: '123-456' as Token,
-            user: undefined,
+            user: mockGitifyUser,
+            version: 'latest',
           },
         ]);
       });
@@ -154,13 +171,24 @@ describe('utils/auth/utils.ts', () => {
             method: 'OAuth App',
             platform: 'GitHub Cloud',
             token: '123-456' as Token,
-            user: undefined,
+            user: mockGitifyUser,
+            version: 'latest',
           },
         ]);
       });
     });
 
     describe('should add GitHub Enterprise Server account', () => {
+      beforeEach(() => {
+        nock('https://github.gitify.io/api/v3')
+          .get('/user')
+          .reply(
+            200,
+            { ...mockGitifyUser, avatar_url: mockGitifyUser.avatar },
+            { 'x-github-enterprise-version': '3.0.0' },
+          );
+      });
+
       it('should add personal access token account', async () => {
         const result = await auth.addAccount(
           mockAuthState,
@@ -175,7 +203,8 @@ describe('utils/auth/utils.ts', () => {
             method: 'Personal Access Token',
             platform: 'GitHub Enterprise Server',
             token: '123-456' as Token,
-            user: undefined,
+            user: mockGitifyUser,
+            version: '3.0.0',
           },
         ]);
       });
@@ -194,7 +223,8 @@ describe('utils/auth/utils.ts', () => {
             method: 'OAuth App',
             platform: 'GitHub Enterprise Server',
             token: '123-456' as Token,
-            user: undefined,
+            user: mockGitifyUser,
+            version: '3.0.0',
           },
         ]);
       });
diff --git a/src/utils/auth/utils.ts b/src/utils/auth/utils.ts
index 6a785f480..4a502e287 100644
--- a/src/utils/auth/utils.ts
+++ b/src/utils/auth/utils.ts
@@ -1,5 +1,6 @@
 import { BrowserWindow } from '@electron/remote';
 import { format } from 'date-fns';
+import log from 'electron-log';
 import type {
   Account,
   AuthCode,
@@ -11,7 +12,7 @@ import type {
   Token,
 } from '../../types';
 import type { UserDetails } from '../../typesGitHub';
-import { getAuthenticatedUser, headNotifications } from '../api/client';
+import { getAuthenticatedUser } from '../api/client';
 import { apiRequest } from '../api/request';
 import { Constants } from '../constants';
 import { getPlatformFromHostname } from '../helpers';
@@ -152,12 +153,22 @@ export function removeAccount(auth: AuthState, account: Account): AuthState {
 }
 
 export async function refreshAccount(account: Account): Promise<Account> {
-  // Refresh user data
-  account.user = await getUserData(account.token, account.hostname);
+  try {
+    const res = await getAuthenticatedUser(account.hostname, account.token);
+
+    // Refresh user data
+    account.user = {
+      id: res.data.id,
+      login: res.data.login,
+      name: res.data.name,
+      avatar: res.data.avatar_url,
+    };
 
-  // Refresh platform version
-  const res = await headNotifications(account.hostname, account.token);
-  account.version = res.headers['x-github-enterprise-version'] ?? 'latest';
+    // Refresh platform version
+    account.version = res.headers['x-github-enterprise-version'] ?? 'latest';
+  } catch (error) {
+    log.error('Failed to refresh account', error);
+  }
 
   return account;
 }

From de1574dea3a6b8708b58e6ba0ec86a2fc7ff107d Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 6 Aug 2024 01:46:42 -0400
Subject: [PATCH 3/7] feat(account): add avatar and account-level quick links

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/utils/constants.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 15ed6ef59..eabacbaeb 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -21,7 +21,8 @@ export const Constants = {
 
   ALL_READ_EMOJIS: ['🎉', '🎊', '🥳', '👏', '🙌', '😎', '🏖️', '🚀', '✨', '🏆'],
 
-  FETCH_INTERVAL: 60000,
+  FETCH_NOTIFICATIONS_INTERVAL: 60000,
+  REFRESH_ACCOUNTS_INTERVAL: 3600000,
 
   DEFAULT_KEYBOARD_SHORTCUT: 'CommandOrControl+Shift+G',
 

From 29a9b17cb340cba22e2910897f3e9c78825097f8 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 6 Aug 2024 02:04:30 -0400
Subject: [PATCH 4/7] feat(account): add avatar and account-level quick links

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/components/AccountNotifications.test.tsx | 56 ++++++++++++++++++++
 src/routes/Accounts.test.tsx                 | 31 +++++++++++
 2 files changed, 87 insertions(+)

diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx
index 7df675406..96a3383d9 100644
--- a/src/components/AccountNotifications.test.tsx
+++ b/src/components/AccountNotifications.test.tsx
@@ -115,6 +115,62 @@ describe('components/AccountNotifications.tsx', () => {
     expect(openAccountProfileMock).toHaveBeenCalledWith(mockGitHubCloudAccount);
   });
 
+  it('should open my issues when clicked', async () => {
+    const openMyIssuesMock = jest
+      .spyOn(links, 'openGitHubIssues')
+      .mockImplementation();
+
+    const props = {
+      account: mockGitHubCloudAccount,
+      notifications: [],
+      showAccountHostname: true,
+      error: null,
+    };
+
+    await act(async () => {
+      render(
+        <AppContext.Provider value={{ settings: mockSettings }}>
+          <AccountNotifications {...props} />
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTitle('My Issues'));
+
+    expect(openMyIssuesMock).toHaveBeenCalledTimes(1);
+    expect(openMyIssuesMock).toHaveBeenCalledWith(
+      mockGitHubCloudAccount.hostname,
+    );
+  });
+
+  it('should open my pull requests when clicked', async () => {
+    const openPullRequestsMock = jest
+      .spyOn(links, 'openGitHubPulls')
+      .mockImplementation();
+
+    const props = {
+      account: mockGitHubCloudAccount,
+      notifications: [],
+      showAccountHostname: true,
+      error: null,
+    };
+
+    await act(async () => {
+      render(
+        <AppContext.Provider value={{ settings: mockSettings }}>
+          <AccountNotifications {...props} />
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTitle('My Pull Requests'));
+
+    expect(openPullRequestsMock).toHaveBeenCalledTimes(1);
+    expect(openPullRequestsMock).toHaveBeenCalledWith(
+      mockGitHubCloudAccount.hostname,
+    );
+  });
+
   it('should toggle account notifications visibility', async () => {
     const props = {
       account: mockGitHubCloudAccount,
diff --git a/src/routes/Accounts.test.tsx b/src/routes/Accounts.test.tsx
index 3b4e84624..7bbc8e1f7 100644
--- a/src/routes/Accounts.test.tsx
+++ b/src/routes/Accounts.test.tsx
@@ -8,6 +8,7 @@ import {
   mockSettings,
 } from '../__mocks__/state-mocks';
 import { AppContext } from '../context/App';
+import * as apiRequests from '../utils/api/request';
 import * as comms from '../utils/comms';
 import * as links from '../utils/links';
 
@@ -160,6 +161,36 @@ describe('routes/Accounts.tsx', () => {
       );
     });
 
+    it('should refresh account', async () => {
+      const apiRequestAuthMock = jest.spyOn(apiRequests, 'apiRequestAuth');
+
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: {
+                accounts: [mockPersonalAccessTokenAccount],
+              },
+              settings: mockSettings,
+            }}
+          >
+            <MemoryRouter>
+              <AccountsRoute />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      fireEvent.click(screen.getByTitle('Refresh octocat'));
+
+      expect(apiRequestAuthMock).toHaveBeenCalledTimes(1);
+      expect(apiRequestAuthMock).toHaveBeenCalledWith(
+        'https://api.github.com/user',
+        'GET',
+        'token-123-456',
+      );
+    });
+
     it('should logout', async () => {
       const logoutFromAccountMock = jest.fn();
       const updateTrayIconMock = jest.spyOn(comms, 'updateTrayIcon');

From f285268a5e0b1914c245834c2a840798db5a4ed5 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 6 Aug 2024 02:19:54 -0400
Subject: [PATCH 5/7] feat(account): add avatar and account-level quick links

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/routes/Accounts.test.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/routes/Accounts.test.tsx b/src/routes/Accounts.test.tsx
index 7bbc8e1f7..7fdae52fa 100644
--- a/src/routes/Accounts.test.tsx
+++ b/src/routes/Accounts.test.tsx
@@ -1,4 +1,10 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import {
   mockAuth,
@@ -189,6 +195,11 @@ describe('routes/Accounts.tsx', () => {
         'GET',
         'token-123-456',
       );
+      await waitFor(() =>
+        expect(mockNavigate).toHaveBeenNthCalledWith(1, '/accounts', {
+          replace: true,
+        }),
+      );
     });
 
     it('should logout', async () => {

From b8fc6dea8118178da3dc10a81c88ccdb83287e9f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 12 Aug 2024 17:39:41 -0400
Subject: [PATCH 6/7] Merge branch 'main' into feature/account-avatar

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/routes/Accounts.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 162c82e1d..6831259d2 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -115,7 +115,7 @@ export const AccountsRoute: FC = () => {
               <div>
                 <button
                   type="button"
-                  className={cn(BUTTON_CLASS_NAME, 'cursor-default')}
+                  className={cn(BUTTON_CLASS_NAME, 'px-0', 'cursor-default')}
                   title="Primary account"
                   hidden={i !== 0}
                 >
@@ -127,7 +127,7 @@ export const AccountsRoute: FC = () => {
                 </button>
                 <button
                   type="button"
-                  className={BUTTON_CLASS_NAME}
+                  className={cn(BUTTON_CLASS_NAME, 'px-0')}
                   title="Set as primary account"
                   onClick={() => setAsPrimaryAccount(account)}
                   hidden={i === 0}
@@ -140,7 +140,7 @@ export const AccountsRoute: FC = () => {
                 </button>
                 <button
                   type="button"
-                  className={BUTTON_CLASS_NAME}
+                  className={cn(BUTTON_CLASS_NAME, 'px-0')}
                   title={`Refresh ${account.user.login}`}
                   onClick={async () => {
                     await refreshAccount(account);
@@ -154,7 +154,7 @@ export const AccountsRoute: FC = () => {
                 </button>
                 <button
                   type="button"
-                  className={BUTTON_CLASS_NAME}
+                  className={cn(BUTTON_CLASS_NAME, 'px-0')}
                   title={`Logout ${account.user.login}`}
                   onClick={() => logoutAccount(account)}
                 >

From c94db05b9f55effca5aac24b8d56335210ef5a49 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 12 Aug 2024 17:39:55 -0400
Subject: [PATCH 7/7] Merge branch 'main' into feature/account-avatar

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../__snapshots__/Accounts.test.tsx.snap      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index 99fbbc352..26e7de18b 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
         <div>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none cursor-default"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0 cursor-default"
             title="Primary account"
             type="button"
           >
@@ -170,7 +170,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             hidden=""
             title="Set as primary account"
             type="button"
@@ -192,7 +192,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Refresh octocat"
             type="button"
           >
@@ -213,7 +213,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Logout octocat"
             type="button"
           >
@@ -324,7 +324,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
         <div>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none cursor-default"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0 cursor-default"
             hidden=""
             title="Primary account"
             type="button"
@@ -346,7 +346,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Set as primary account"
             type="button"
           >
@@ -367,7 +367,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Refresh octocat"
             type="button"
           >
@@ -388,7 +388,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Logout octocat"
             type="button"
           >
@@ -499,7 +499,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
         <div>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none cursor-default"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0 cursor-default"
             hidden=""
             title="Primary account"
             type="button"
@@ -521,7 +521,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Set as primary account"
             type="button"
           >
@@ -542,7 +542,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Refresh octocat"
             type="button"
           >
@@ -563,7 +563,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
             </svg>
           </button>
           <button
-            class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+            class="hover:text-gray-500 py-1 my-1 mx-2 focus:outline-none px-0"
             title="Logout octocat"
             type="button"
           >