feat(accounts): add avatar, account-level quick links and account refresh support (#1438)

* feat(account): add avatar and account-level quick links

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

* feat(account): add avatar and account-level quick links

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

* feat(account): add avatar and account-level quick links

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

* feat(account): add avatar and account-level quick links

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

* feat(account): add avatar and account-level quick links

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

* Merge branch 'main' into feature/account-avatar

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

* Merge branch 'main' into feature/account-avatar

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

---------

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

Author: setchy

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 = {

src/components/AccountNotifications.test.tsx

@@ -114,6 +114,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,

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}

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,