From 28c6bf804468019ccb4e787e060dc77b005f024b Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 19 Jun 2024 09:48:53 -0400
Subject: [PATCH 01/11] feat: show notification number for issues, prs,
 discussions

---
 src/components/NotificationRow.tsx            |  14 +-
 .../NotificationRow.test.tsx.snap             | 120 ++++++++++++++++++
 src/typesGitHub.ts                            |   2 +
 src/utils/api/__mocks__/response-mocks.ts     |   1 +
 src/utils/api/graphql/discussions.ts          |   1 +
 src/utils/subject.test.ts                     |  52 +++++++-
 src/utils/subject.ts                          |   3 +
 7 files changed, 188 insertions(+), 5 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 5c7c86f19..a808b5696 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -83,11 +83,18 @@ export const NotificationRow: FC<INotificationRow> = ({
     ? `${notification.subject.user.login} updated ${updatedAt}`
     : `Updated ${updatedAt}`;
 
-  const notificationTitle = formatForDisplay([
+  const notificationType = formatForDisplay([
     notification.subject.state,
     notification.subject.type,
   ]);
 
+  const notificationNumber = notification.subject?.number
+    ? `#${notification.subject.number}`
+    : '';
+
+  const notificationTitle =
+    `${notification.subject.title} ${notificationNumber}`.trim();
+
   const commentsPillDescription = `${notification.subject.comments} ${
     notification.subject.comments > 1 ? 'comments' : 'comment'
   }`;
@@ -112,7 +119,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     >
       <div
         className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
-        title={notificationTitle}
+        title={notificationType}
       >
         <NotificationIcon size={16} aria-label={notification.subject.type} />
       </div>
@@ -124,9 +131,10 @@ export const NotificationRow: FC<INotificationRow> = ({
         <div
           className="mb-1 cursor-pointer truncate text-sm"
           role="main"
-          title={notification.subject.title}
+          title={notificationTitle}
         >
           {notification.subject.title}
+          <span className="text-xs"> {notificationNumber}</span>
         </div>
 
         <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 1ade8bac3..71635152c 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -41,6 +41,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -275,6 +280,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -566,6 +576,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -800,6 +815,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -1091,6 +1111,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -1303,6 +1328,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -1572,6 +1602,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -1830,6 +1865,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -2145,6 +2185,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -2357,6 +2402,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -2626,6 +2676,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -2838,6 +2893,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -3107,6 +3167,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -3386,6 +3451,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -3722,6 +3792,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -4001,6 +4076,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -4337,6 +4417,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -4476,6 +4561,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -4672,6 +4762,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -4855,6 +4950,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -5095,6 +5195,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -5278,6 +5383,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -5518,6 +5628,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize"
@@ -5705,6 +5820,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize"
diff --git a/src/typesGitHub.ts b/src/typesGitHub.ts
index 2fed9d328..39e567236 100644
--- a/src/typesGitHub.ts
+++ b/src/typesGitHub.ts
@@ -261,6 +261,7 @@ interface GitHubSubject {
 
 // This is not in the GitHub API, but we add it to the type to make it easier to work with
 export interface GitifySubject {
+  number?: number;
   state?: StateType;
   user?: SubjectUser;
   reviews?: GitifyPullRequestReview[];
@@ -494,6 +495,7 @@ export interface GraphQLSearch<T> {
 }
 
 export interface Discussion {
+  number: number;
   title: string;
   stateReason: DiscussionStateType;
   isAnswered: boolean;
diff --git a/src/utils/api/__mocks__/response-mocks.ts b/src/utils/api/__mocks__/response-mocks.ts
index 74097fb37..714635ab5 100644
--- a/src/utils/api/__mocks__/response-mocks.ts
+++ b/src/utils/api/__mocks__/response-mocks.ts
@@ -419,6 +419,7 @@ export const mockGraphQLResponse: GraphQLSearch<Discussion> = {
     search: {
       nodes: [
         {
+          number: 123,
           title: '1.16.0',
           isAnswered: false,
           stateReason: 'OPEN',
diff --git a/src/utils/api/graphql/discussions.ts b/src/utils/api/graphql/discussions.ts
index b5ce239af..93ec4c91a 100644
--- a/src/utils/api/graphql/discussions.ts
+++ b/src/utils/api/graphql/discussions.ts
@@ -31,6 +31,7 @@ export const QUERY_SEARCH_DISCUSSIONS = gql`
     search(query: $queryStatement, type: DISCUSSION, first: $firstDiscussions) {
       nodes {
         ... on Discussion {
+          number
           title
           stateReason
           isAnswered
diff --git a/src/utils/subject.test.ts b/src/utils/subject.test.ts
index 9bd3a3af6..0f0ba0ce0 100644
--- a/src/utils/subject.test.ts
+++ b/src/utils/subject.test.ts
@@ -221,6 +221,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'ANSWERED',
           user: {
             login: mockDiscussionAuthor.login,
@@ -247,6 +248,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'DUPLICATE',
           user: {
             login: mockDiscussionAuthor.login,
@@ -273,6 +275,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'OPEN',
           user: {
             login: mockDiscussionAuthor.login,
@@ -299,6 +302,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'OUTDATED',
           user: {
             login: mockDiscussionAuthor.login,
@@ -325,6 +329,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'REOPENED',
           user: {
             login: mockDiscussionAuthor.login,
@@ -351,6 +356,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'RESOLVED',
           user: {
             login: mockDiscussionAuthor.login,
@@ -385,6 +391,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'ANSWERED',
           user: {
             login: mockDiscussionAuthor.login,
@@ -413,7 +420,12 @@ describe('utils/subject.ts', () => {
       it('open issue state', async () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
-          .reply(200, { state: 'open', user: mockAuthor, labels: [] });
+          .reply(200, {
+            number: 123,
+            state: 'open',
+            user: mockAuthor,
+            labels: [],
+          });
 
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/comments/302888448')
@@ -422,6 +434,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'open',
           user: {
             login: mockCommenter.login,
@@ -436,7 +449,12 @@ describe('utils/subject.ts', () => {
       it('closed issue state', async () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
-          .reply(200, { state: 'closed', user: mockAuthor, labels: [] });
+          .reply(200, {
+            number: 123,
+            state: 'closed',
+            user: mockAuthor,
+            labels: [],
+          });
 
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/comments/302888448')
@@ -445,6 +463,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'closed',
           user: {
             login: mockCommenter.login,
@@ -460,6 +479,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
           .reply(200, {
+            number: 123,
             state: 'closed',
             state_reason: 'completed',
             user: mockAuthor,
@@ -473,6 +493,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'completed',
           user: {
             login: mockCommenter.login,
@@ -488,6 +509,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             state_reason: 'not_planned',
             user: mockAuthor,
@@ -501,6 +523,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'not_planned',
           user: {
             login: mockCommenter.login,
@@ -516,6 +539,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             state_reason: 'reopened',
             user: mockAuthor,
@@ -529,6 +553,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'reopened',
           user: {
             login: mockCommenter.login,
@@ -546,6 +571,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/issues/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: false,
             merged: false,
@@ -556,6 +582,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'open',
           user: {
             login: mockAuthor.login,
@@ -572,6 +599,7 @@ describe('utils/subject.ts', () => {
           nock('https://api.github.com')
             .get('/repos/gitify-app/notifications-test/issues/1')
             .reply(200, {
+              number: 123,
               state: 'open',
               user: mockAuthor,
               labels: [{ name: 'enhancement' }],
@@ -586,6 +614,7 @@ describe('utils/subject.ts', () => {
           const result = await getGitifySubjectDetails(mockNotification);
 
           expect(result).toEqual({
+            number: 123,
             state: 'open',
             user: {
               login: mockCommenter.login,
@@ -601,6 +630,7 @@ describe('utils/subject.ts', () => {
           nock('https://api.github.com')
             .get('/repos/gitify-app/notifications-test/issues/1')
             .reply(200, {
+              number: 123,
               state: 'open',
               user: mockAuthor,
               labels: null,
@@ -615,6 +645,7 @@ describe('utils/subject.ts', () => {
           const result = await getGitifySubjectDetails(mockNotification);
 
           expect(result).toEqual({
+            number: 123,
             state: 'open',
             user: {
               login: mockCommenter.login,
@@ -645,6 +676,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'closed',
             draft: false,
             merged: false,
@@ -663,6 +695,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'closed',
           user: {
             login: mockCommenter.login,
@@ -680,6 +713,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: true,
             merged: false,
@@ -698,6 +732,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'draft',
           user: {
             login: mockCommenter.login,
@@ -715,6 +750,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: false,
             merged: true,
@@ -733,6 +769,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'merged',
           user: {
             login: mockCommenter.login,
@@ -750,6 +787,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: false,
             merged: false,
@@ -768,6 +806,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'open',
           user: {
             login: mockCommenter.login,
@@ -788,6 +827,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: false,
             merged: false,
@@ -802,6 +842,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'open',
           user: {
             login: mockAuthor.login,
@@ -821,6 +862,7 @@ describe('utils/subject.ts', () => {
         nock('https://api.github.com')
           .get('/repos/gitify-app/notifications-test/pulls/1')
           .reply(200, {
+            number: 123,
             state: 'open',
             draft: false,
             merged: false,
@@ -835,6 +877,7 @@ describe('utils/subject.ts', () => {
         const result = await getGitifySubjectDetails(mockNotification);
 
         expect(result).toEqual({
+          number: 123,
           state: 'open',
           user: {
             login: mockAuthor.login,
@@ -911,6 +954,7 @@ describe('utils/subject.ts', () => {
           nock('https://api.github.com')
             .get('/repos/gitify-app/notifications-test/pulls/1')
             .reply(200, {
+              number: 123,
               state: 'open',
               draft: false,
               merged: false,
@@ -931,6 +975,7 @@ describe('utils/subject.ts', () => {
           const result = await getGitifySubjectDetails(mockNotification);
 
           expect(result).toEqual({
+            number: 123,
             state: 'open',
             user: {
               login: mockCommenter.login,
@@ -948,6 +993,7 @@ describe('utils/subject.ts', () => {
           nock('https://api.github.com')
             .get('/repos/gitify-app/notifications-test/pulls/1')
             .reply(200, {
+              number: 123,
               state: 'open',
               draft: false,
               merged: false,
@@ -968,6 +1014,7 @@ describe('utils/subject.ts', () => {
           const result = await getGitifySubjectDetails(mockNotification);
 
           expect(result).toEqual({
+            number: 123,
             state: 'open',
             user: {
               login: mockCommenter.login,
@@ -1292,6 +1339,7 @@ function mockDiscussionNode(
   isAnswered: boolean,
 ): Discussion {
   return {
+    number: 123,
     title: 'This is a mock discussion',
     url: 'https://github.com/gitify-app/notifications-test/discussions/1' as Link,
     stateReason: state,
diff --git a/src/utils/subject.ts b/src/utils/subject.ts
index ba0c7853b..a4063c0a3 100644
--- a/src/utils/subject.ts
+++ b/src/utils/subject.ts
@@ -183,6 +183,7 @@ async function getGitifySubjectForDiscussion(
   }
 
   return {
+    number: discussion.number,
     state: discussionState,
     user: discussionUser,
     comments: discussion.comments.totalCount,
@@ -226,6 +227,7 @@ async function getGitifySubjectForIssue(
   }
 
   return {
+    number: issue.number,
     state: issue.state_reason ?? issue.state,
     user: {
       login: issueCommentUser?.login ?? issue.user.login,
@@ -272,6 +274,7 @@ async function getGitifySubjectForPullRequest(
   const linkedIssues = parseLinkedIssuesFromPr(pr);
 
   return {
+    number: pr.number,
     state: prState,
     user: {
       login: prCommentUser?.login ?? pr.user.login,

From 11407a7aab88049d4f8613045c07855e487726c7 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 19 Jun 2024 11:17:07 -0400
Subject: [PATCH 02/11] feat: update opacity

---
 src/components/NotificationRow.tsx            |  2 +-
 .../NotificationRow.test.tsx.snap             | 48 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index a808b5696..ffcc6e0d1 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -134,7 +134,7 @@ export const NotificationRow: FC<INotificationRow> = ({
           title={notificationTitle}
         >
           {notification.subject.title}
-          <span className="text-xs"> {notificationNumber}</span>
+          <span className="text-xs opacity-60"> {notificationNumber}</span>
         </div>
 
         <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 71635152c..e397c2ec1 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -281,7 +281,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -577,7 +577,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -816,7 +816,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -1112,7 +1112,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -1329,7 +1329,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -1603,7 +1603,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -1866,7 +1866,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -2186,7 +2186,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -2403,7 +2403,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -2677,7 +2677,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -2894,7 +2894,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -3168,7 +3168,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -3452,7 +3452,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -3793,7 +3793,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -4077,7 +4077,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -4418,7 +4418,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -4562,7 +4562,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -4763,7 +4763,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -4951,7 +4951,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -5196,7 +5196,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -5384,7 +5384,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>
@@ -5629,7 +5629,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           >
             I am a robot and this is a test!
             <span
-              class="text-xs"
+              class="text-xs opacity-60"
             >
                
             </span>
@@ -5821,7 +5821,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         >
           I am a robot and this is a test!
           <span
-            class="text-xs"
+            class="text-xs opacity-60"
           >
              
           </span>

From 7dde63a9dd1703bbd196cd56f96e3e2d8292cc8c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 21 Jun 2024 07:16:24 -0400
Subject: [PATCH 03/11] Merge branch 'main' into refactor/pills-component

---
 .../AccountNotifications.test.tsx.snap        | 20 +++++++++++++++++++
 .../NotificationRow.test.tsx.snap             | 10 ++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index e63164fd3..25927a6d2 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -117,6 +117,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs opacity-60"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -313,6 +318,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             title="Improve the UI"
           >
             Improve the UI
+            <span
+              class="text-xs opacity-60"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -531,6 +541,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs opacity-60"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -727,6 +742,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           title="Improve the UI"
         >
           Improve the UI
+          <span
+            class="text-xs opacity-60"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index aec6b6918..d02fcce2b 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -5227,6 +5227,11 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
+            <span
+              class="text-xs opacity-60"
+            >
+               
+            </span>
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -5409,6 +5414,11 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
+          <span
+            class="text-xs opacity-60"
+          >
+             
+          </span>
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"

From 9c66de2fff8ac7276307b4fa69c6a9f96274c013 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 21 Jun 2024 07:21:26 -0400
Subject: [PATCH 04/11] Merge branch 'main' into refactor/pills-component

---
 src/components/NotificationRow.tsx            |  2 +-
 .../AccountNotifications.test.tsx.snap        |  8 +--
 .../NotificationRow.test.tsx.snap             | 52 +++++++++----------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index db44757b6..6630c1f41 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -145,7 +145,7 @@ export const NotificationRow: FC<INotificationRow> = ({
           title={notificationTitle}
         >
           {notification.subject.title}
-          <span className="text-xs opacity-60"> {notificationNumber}</span>
+          <span className="text-xxs opacity-60"> {notificationNumber}</span>
         </div>
 
         <div
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 25927a6d2..6d21d5fa1 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -319,7 +319,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           >
             Improve the UI
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -542,7 +542,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -743,7 +743,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         >
           Improve the UI
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index d02fcce2b..4afc3a89f 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -281,7 +281,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -577,7 +577,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -816,7 +816,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -1112,7 +1112,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -1329,7 +1329,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -1603,7 +1603,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -1866,7 +1866,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -2186,7 +2186,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -2403,7 +2403,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -2677,7 +2677,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -2894,7 +2894,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -3168,7 +3168,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -3452,7 +3452,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -3793,7 +3793,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -4077,7 +4077,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -4418,7 +4418,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -4562,7 +4562,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -4780,7 +4780,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -4984,7 +4984,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -5228,7 +5228,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -5415,7 +5415,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -5659,7 +5659,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -5846,7 +5846,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>
@@ -6090,7 +6090,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           >
             I am a robot and this is a test!
             <span
-              class="text-xs opacity-60"
+              class="text-xxs opacity-60"
             >
                
             </span>
@@ -6282,7 +6282,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         >
           I am a robot and this is a test!
           <span
-            class="text-xs opacity-60"
+            class="text-xxs opacity-60"
           >
              
           </span>

From f3da55dff81461c30645a6f69c5c915cfdb45536 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 21 Jun 2024 07:24:43 -0400
Subject: [PATCH 05/11] opacity

---
 src/components/NotificationRow.tsx            |   4 +-
 .../AccountNotifications.test.tsx.snap        |  24 +--
 .../NotificationRow.test.tsx.snap             | 156 ++++++------------
 3 files changed, 63 insertions(+), 121 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 6630c1f41..4ca631cb8 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -145,7 +145,9 @@ export const NotificationRow: FC<INotificationRow> = ({
           title={notificationTitle}
         >
           {notification.subject.title}
-          <span className="text-xxs opacity-60"> {notificationNumber}</span>
+          <span className={cn('text-xxs ml-1', Opacity.READ)}>
+            {notificationNumber}
+          </span>
         </div>
 
         <div
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 6d21d5fa1..241c77d29 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -118,10 +118,8 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -319,10 +317,8 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           >
             Improve the UI
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -542,10 +538,8 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -743,10 +737,8 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         >
           Improve the UI
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 4afc3a89f..6c424b47c 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -42,10 +42,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -281,10 +279,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -577,10 +573,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -816,10 +810,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -1112,10 +1104,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -1329,10 +1319,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -1603,10 +1591,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -1866,10 +1852,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -2186,10 +2170,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -2403,10 +2385,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -2677,10 +2657,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -2894,10 +2872,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -3168,10 +3144,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -3452,10 +3426,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -3793,10 +3765,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -4077,10 +4047,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -4418,10 +4386,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -4562,10 +4528,8 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -4780,10 +4744,8 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -4984,10 +4946,8 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -5228,10 +5188,8 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -5415,10 +5373,8 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -5659,10 +5615,8 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -5846,10 +5800,8 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -6090,10 +6042,8 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           >
             I am a robot and this is a test!
             <span
-              class="text-xxs opacity-60"
-            >
-               
-            </span>
+              class="text-xxs ml-1 opacity-50"
+            />
           </div>
           <div
             class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
@@ -6282,10 +6232,8 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         >
           I am a robot and this is a test!
           <span
-            class="text-xxs opacity-60"
-          >
-             
-          </span>
+            class="text-xxs ml-1 opacity-50"
+          />
         </div>
         <div
           class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"

From 6e22cbc479eeeec3c895fbea629d6999e3dedab6 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 25 Jun 2024 11:08:47 -0400
Subject: [PATCH 06/11] add setting

---
 src/__mocks__/state-mocks.ts                  |  1 +
 src/components/NotificationRow.tsx            |  8 +++-
 src/context/App.test.tsx                      |  2 +
 src/context/App.tsx                           |  1 +
 src/routes/Settings.test.tsx                  | 25 ++++++++++
 src/routes/Settings.tsx                       | 28 +++++++++++
 .../__snapshots__/Settings.test.tsx.snap      | 48 +++++++++++++++++++
 src/types.ts                                  |  1 +
 8 files changed, 113 insertions(+), 1 deletion(-)

diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts
index d41641901..ed6cdc541 100644
--- a/src/__mocks__/state-mocks.ts
+++ b/src/__mocks__/state-mocks.ts
@@ -84,6 +84,7 @@ export const mockSettings: SettingsState = {
   showAccountHostname: false,
   delayNotificationState: false,
   showPills: true,
+  showNumber: true,
   keyboardShortcut: true,
   groupBy: GroupBy.REPOSITORY,
 };
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index d61da1929..5f635e214 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -112,7 +112,13 @@ export const NotificationRow: FC<INotificationRow> = ({
           title={notificationTitle}
         >
           {notification.subject.title}
-          <span className={cn('text-xxs ml-1', Opacity.READ)}>
+          <span
+            className={cn(
+              'text-xxs ml-1',
+              Opacity.READ,
+              !settings.showNumber && 'hidden',
+            )}
+          >
             {notificationNumber}
           </span>
         </div>
diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
index bc0e2d675..06ea13a51 100644
--- a/src/context/App.test.tsx
+++ b/src/context/App.test.tsx
@@ -371,6 +371,7 @@ describe('context/App.tsx', () => {
           showAccountHostname: false,
           delayNotificationState: false,
           showPills: true,
+          showNumber: true,
           keyboardShortcut: true,
           groupBy: 'REPOSITORY',
         } as SettingsState,
@@ -424,6 +425,7 @@ describe('context/App.tsx', () => {
           showAccountHostname: false,
           delayNotificationState: false,
           showPills: true,
+          showNumber: true,
           keyboardShortcut: true,
           groupBy: 'REPOSITORY',
         } as SettingsState,
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 16904b58e..6f84667d7 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -62,6 +62,7 @@ export const defaultSettings: SettingsState = {
   showAccountHostname: false,
   delayNotificationState: false,
   showPills: true,
+  showNumber: true,
   keyboardShortcut: true,
   groupBy: GroupBy.REPOSITORY,
 };
diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
index 333cc184e..74374b084 100644
--- a/src/routes/Settings.test.tsx
+++ b/src/routes/Settings.test.tsx
@@ -155,6 +155,31 @@ describe('routes/Settings.tsx', () => {
       expect(updateSetting).toHaveBeenCalledWith('showPills', false);
     });
 
+    it('should toggle show number checkbox', async () => {
+      await act(async () => {
+        render(
+          <AppContext.Provider
+            value={{
+              auth: mockAuth,
+              settings: mockSettings,
+              updateSetting,
+            }}
+          >
+            <MemoryRouter>
+              <SettingsRoute />
+            </MemoryRouter>
+          </AppContext.Provider>,
+        );
+      });
+
+      await screen.findByLabelText('Show number');
+
+      fireEvent.click(screen.getByLabelText('Show number'));
+
+      expect(updateSetting).toHaveBeenCalledTimes(1);
+      expect(updateSetting).toHaveBeenCalledWith('showNumber', false);
+    });
+
     it('should toggle account hostname checkbox', async () => {
       await act(async () => {
         render(
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index f1635937a..f074b21a8 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -1,6 +1,7 @@
 import {
   CheckIcon,
   CommentIcon,
+  GitPullRequestIcon,
   IssueClosedIcon,
   MilestoneIcon,
   PersonIcon,
@@ -132,6 +133,33 @@ export const SettingsRoute: FC = () => {
               </div>
             }
           />
+          <Checkbox
+            name="showNumber"
+            label="Show number"
+            checked={settings.showNumber}
+            onChange={(evt) => updateSetting('showNumber', evt.target.checked)}
+            tooltip={
+              <div>
+                <div>Show GitHub number for:</div>
+                <div className="pl-6">
+                  <ul className="list-disc">
+                    <li>
+                      <CommentIcon size={Size.MEDIUM} className="pr-1" />
+                      Discussion
+                    </li>
+                    <li>
+                      <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
+                      Issue
+                    </li>
+                    <li>
+                      <GitPullRequestIcon size={Size.MEDIUM} className="pr-1" />
+                      Pull Request
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            }
+          />
           <Checkbox
             name="showAccountHostname"
             label="Show account hostname"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 7dc308869..a2d3e2375 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -237,6 +237,54 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="mb-3 mt-1 text-sm"
+      >
+        <div
+          class="flex items-start"
+        >
+          <div
+            class="flex h-5 items-center"
+          >
+            <input
+              checked=""
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+              id="showNumber"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3"
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showNumber"
+            >
+              Show number
+              <span
+                aria-label="tooltip-showNumber"
+                class="relative"
+                id="tooltip-showNumber"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="ml-1 text-blue-500"
+                  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="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                  />
+                </svg>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
       <div
         class="mb-3 mt-1 text-sm"
       >
diff --git a/src/types.ts b/src/types.ts
index 94aa95b8c..c1da44c7a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -60,6 +60,7 @@ interface AppearanceSettingsState {
   detailedNotifications: boolean;
   showAccountHostname: boolean;
   showPills: boolean;
+  showNumber: boolean;
 }
 
 interface NotificationSettingsState {

From 0b2f265b48e5f4b3e77540909af1c5a3dfd5cd16 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 25 Jun 2024 11:16:02 -0400
Subject: [PATCH 07/11] add setting

---
 src/components/NotificationRow.test.tsx       |  20 +
 .../NotificationRow.test.tsx.snap             | 427 ++++++++++++++++++
 2 files changed, 447 insertions(+)

diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index bb781f14a..15a6abb5b 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -61,6 +61,26 @@ describe('components/NotificationRow.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children - hide numbers', async () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementation(() => new Date('2024').valueOf());
+
+    const props = {
+      notification: mockSingleNotification,
+      account: mockGitHubCloudAccount,
+    };
+
+    const tree = render(
+      <AppContext.Provider
+        value={{ settings: { ...mockSettings, showNumber: false } }}
+      >
+        <NotificationRow {...props} />
+      </AppContext.Provider>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
   describe('notification interactions', () => {
     it('should open a notification in the browser - click', () => {
       const removeNotificationFromState = jest.fn();
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index f5d2a9172..c30e3a4ba 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -887,3 +887,430 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
   "unmount": [Function],
 }
 `;
+
+exports[`components/NotificationRow.tsx should render itself & its children - hide numbers 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        id="138661096"
+      >
+        <div
+          class="mr-3 flex items-center justify-center text-green-500"
+          title="Open Issue"
+        >
+          <svg
+            aria-label="Issue"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <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>
+        </div>
+        <div
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        >
+          <div
+            class="mb-1 truncate text-sm"
+            role="main"
+            title="I am a robot and this is a test!"
+          >
+            I am a robot and this is a test!
+            <span
+              class="text-xxs ml-1 opacity-50 hidden"
+            />
+          </div>
+          <div
+            class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
+          >
+            <button
+              class="flex-shrink-0"
+              title="View User Profile"
+              type="button"
+            >
+              <img
+                alt="gitify-app's avatar"
+                class="rounded-full object-cover size-4"
+                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+              />
+            </button>
+            <div
+              title="You're watching the repository."
+            >
+              Updated
+            </div>
+            <div
+              title="gitify-app updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div
+              class="flex"
+            >
+              <button
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                title="octocat approved these changes"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+              <button
+                class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                title="gitify-app requested changes"
+                type="button"
+              >
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </div>
+          </div>
+        </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="Mark as Done"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Done"
+              class="octicon octicon-check"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Mark as Read"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
+              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="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="h-full hover:text-green-500 focus:outline-none"
+            title="Unsubscribe from Thread"
+            type="button"
+          >
+            <svg
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
+              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="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      id="138661096"
+    >
+      <div
+        class="mr-3 flex items-center justify-center text-green-500"
+        title="Open Issue"
+      >
+        <svg
+          aria-label="Issue"
+          class="octicon octicon-issue-opened"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <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>
+      </div>
+      <div
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+      >
+        <div
+          class="mb-1 truncate text-sm"
+          role="main"
+          title="I am a robot and this is a test!"
+        >
+          I am a robot and this is a test!
+          <span
+            class="text-xxs ml-1 opacity-50 hidden"
+          />
+        </div>
+        <div
+          class="flex flex-wrap items-center gap-1 text-xs capitalize opacity-80"
+        >
+          <button
+            class="flex-shrink-0"
+            title="View User Profile"
+            type="button"
+          >
+            <img
+              alt="gitify-app's avatar"
+              class="rounded-full object-cover size-4"
+              src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+            />
+          </button>
+          <div
+            title="You're watching the repository."
+          >
+            Updated
+          </div>
+          <div
+            title="gitify-app updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="flex"
+          >
+            <button
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              title="octocat approved these changes"
+              type="button"
+            >
+              <svg
+                aria-label="octocat approved these changes"
+                class="text-green-500"
+                fill="currentColor"
+                focusable="false"
+                height="12"
+                role="img"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="12"
+              >
+                <path
+                  d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                />
+              </svg>
+              1
+            </button>
+            <button
+              class="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+              title="gitify-app requested changes"
+              type="button"
+            >
+              <svg
+                aria-label="gitify-app requested changes"
+                class="text-red-500"
+                fill="currentColor"
+                focusable="false"
+                height="12"
+                role="img"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="12"
+              >
+                <path
+                  d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                />
+              </svg>
+              1
+            </button>
+          </div>
+        </div>
+      </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="Mark as Done"
+          type="button"
+        >
+          <svg
+            aria-label="Mark as Done"
+            class="octicon octicon-check"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Mark as Read"
+          type="button"
+        >
+          <svg
+            aria-label="Mark as Read"
+            class="octicon octicon-read"
+            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="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+            />
+          </svg>
+        </button>
+        <button
+          class="h-full hover:text-green-500 focus:outline-none"
+          title="Unsubscribe from Thread"
+          type="button"
+        >
+          <svg
+            aria-label="Unsubscribe from Thread"
+            class="octicon octicon-bell-slash"
+            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="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

From 07c9638311394580f39da871ac1f5dada19c3dda Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 25 Jun 2024 22:06:39 -0400
Subject: [PATCH 08/11] add setting

---
 src/routes/Settings.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index f074b21a8..5f9593316 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -100,8 +100,12 @@ export const SettingsRoute: FC = () => {
           <Checkbox
             name="showPills"
             label="Show notification metric pills"
-            checked={settings.showPills}
-            onChange={(evt) => updateSetting('showPills', evt.target.checked)}
+            checked={settings.detailedNotifications && settings.showPills}
+            onChange={(evt) =>
+              settings.detailedNotifications &&
+              updateSetting('showPills', evt.target.checked)
+            }
+            disabled={!settings.detailedNotifications}
             tooltip={
               <div>
                 <div>Show notification metric pills for:</div>
@@ -130,14 +134,22 @@ export const SettingsRoute: FC = () => {
                     </li>
                   </ul>
                 </div>
+                <div className="pt-3 text-orange-600">
+                  ⚠️ This setting requires{' '}
+                  <strong>Detailed Notifications</strong> to be enabled.
+                </div>
               </div>
             }
           />
           <Checkbox
             name="showNumber"
             label="Show number"
-            checked={settings.showNumber}
-            onChange={(evt) => updateSetting('showNumber', evt.target.checked)}
+            checked={settings.detailedNotifications && settings.showNumber}
+            onChange={(evt) =>
+              settings.detailedNotifications &&
+              updateSetting('showNumber', evt.target.checked)
+            }
+            disabled={!settings.detailedNotifications}
             tooltip={
               <div>
                 <div>Show GitHub number for:</div>
@@ -157,6 +169,10 @@ export const SettingsRoute: FC = () => {
                     </li>
                   </ul>
                 </div>
+                <div className="pt-3 text-orange-600">
+                  ⚠️ This setting requires{' '}
+                  <strong>Detailed Notifications</strong> to be enabled.
+                </div>
               </div>
             }
           />
@@ -223,11 +239,11 @@ export const SettingsRoute: FC = () => {
             disabled={!settings.detailedNotifications}
             tooltip={
               <div>
-                <div className="pb-3">
+                <div>
                   Show or hide notifications from Bot accounts, such as
                   @dependabot, @renovatebot, etc
                 </div>
-                <div className="text-orange-600">
+                <div className="pt-3 text-orange-600">
                   ⚠️ This setting requires{' '}
                   <strong>Detailed Notifications</strong> to be enabled.
                 </div>
@@ -266,7 +282,7 @@ export const SettingsRoute: FC = () => {
           <Checkbox
             name="kbdShortcutEnabled"
             label="Enable keyboard shortcut"
-            checked={!!settings.keyboardShortcut}
+            checked={settings.keyboardShortcut}
             onChange={(evt) =>
               updateSetting('keyboardShortcut', evt.target.checked)
             }

From fc6b6057b35d7a91019eb981190dcb0b0544eb6e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 8 Jul 2024 12:05:55 -0700
Subject: [PATCH 09/11] Merge branch 'main' into feat/show-issue-no

---
 .../__snapshots__/Settings.test.tsx.snap      | 48 -------------------
 1 file changed, 48 deletions(-)

diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 2241044b9..0e2fa07a7 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -231,54 +231,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="mb-3 mt-1 text-sm"
-      >
-        <div
-          class="flex items-start"
-        >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showNumber"
-              type="checkbox"
-            />
-          </div>
-          <div
-            class="ml-3"
-          >
-            <label
-              class="font-medium text-gray-700 dark:text-gray-200"
-              for="showNumber"
-            >
-              Show number
-              <span
-                aria-label="tooltip-showNumber"
-                class="relative"
-                id="tooltip-showNumber"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  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="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
       <div
         class="mb-3 mt-1 text-sm"
       >

From 42d0aef49b609a12a8d59036c94453c65389b0eb Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 8 Jul 2024 12:09:01 -0700
Subject: [PATCH 10/11] Merge branch 'main' into feat/show-issue-no

---
 .../settings/AppearanceSettings.test.tsx      | 25 +++++++++++++
 .../settings/AppearanceSettings.tsx           | 36 +++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/src/components/settings/AppearanceSettings.test.tsx b/src/components/settings/AppearanceSettings.test.tsx
index dcf8a6d07..d7ea21381 100644
--- a/src/components/settings/AppearanceSettings.test.tsx
+++ b/src/components/settings/AppearanceSettings.test.tsx
@@ -84,6 +84,31 @@ describe('routes/components/settings/AppearanceSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('showPills', false);
   });
 
+  it('should toggle show number checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <AppearanceSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    await screen.findByLabelText('Show number');
+
+    fireEvent.click(screen.getByLabelText('Show number'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('showNumber', false);
+  });
+
   it('should toggle account hostname checkbox', async () => {
     await act(async () => {
       render(
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index 1d0da8e5a..ae0b959b7 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -1,6 +1,7 @@
 import {
   CheckIcon,
   CommentIcon,
+  GitPullRequestIcon,
   IssueClosedIcon,
   MilestoneIcon,
   PaintbrushIcon,
@@ -99,6 +100,41 @@ export const AppearanceSettings: FC = () => {
           </div>
         }
       />
+      <Checkbox
+        name="showNumber"
+        label="Show number"
+        checked={settings.detailedNotifications && settings.showNumber}
+        onChange={(evt) =>
+          settings.detailedNotifications &&
+          updateSetting('showNumber', evt.target.checked)
+        }
+        disabled={!settings.detailedNotifications}
+        tooltip={
+          <div>
+            <div>Show GitHub number for:</div>
+            <div className="pl-6">
+              <ul className="list-disc">
+                <li>
+                  <CommentIcon size={Size.MEDIUM} className="pr-1" />
+                  Discussion
+                </li>
+                <li>
+                  <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
+                  Issue
+                </li>
+                <li>
+                  <GitPullRequestIcon size={Size.MEDIUM} className="pr-1" />
+                  Pull Request
+                </li>
+              </ul>
+            </div>
+            <div className="pt-3 text-orange-600">
+              ⚠️ This setting requires <strong>Detailed Notifications</strong> to
+              be enabled.
+            </div>
+          </div>
+        }
+      />
       <Checkbox
         name="showAccountHostname"
         label="Show account hostname"

From 9c820d7104616c9e2d17a24afb13a1eeb789a3f7 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 8 Jul 2024 12:11:34 -0700
Subject: [PATCH 11/11] Merge branch 'main' into feat/show-issue-no

---
 .../__snapshots__/Settings.test.tsx.snap      | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 0e2fa07a7..2241044b9 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -231,6 +231,54 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="mb-3 mt-1 text-sm"
+      >
+        <div
+          class="flex items-start"
+        >
+          <div
+            class="flex h-5 items-center"
+          >
+            <input
+              checked=""
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+              id="showNumber"
+              type="checkbox"
+            />
+          </div>
+          <div
+            class="ml-3"
+          >
+            <label
+              class="font-medium text-gray-700 dark:text-gray-200"
+              for="showNumber"
+            >
+              Show number
+              <span
+                aria-label="tooltip-showNumber"
+                class="relative"
+                id="tooltip-showNumber"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="ml-1 text-blue-500"
+                  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="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                  />
+                </svg>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
       <div
         class="mb-3 mt-1 text-sm"
       >