feat: add 'Show read notifications' setting

src/renderer/__mocks__/state-mocks.ts

@@ -43,6 +43,7 @@ const mockNotificationSettings: NotificationSettingsState = {
   showPills: true,
   showNumber: true,
   participating: false,
+  fetchReadNotifications: false,
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,

src/renderer/components/Sidebar.tsx

@@ -35,7 +35,7 @@ export const Sidebar: FC = () => {
     status,
     settings,
     auth,
-    unreadNotificationCount,
+    notificationCount,
     hasUnreadNotifications,
   } = useAppContext();
 
@@ -91,7 +91,7 @@ export const Sidebar: FC = () => {
         <IconButton
           aria-label="Notifications"
           data-testid="sidebar-notifications"
-          description={`${unreadNotificationCount} unread notifications ↗`}
+          description={`${notificationCount} ${settings.fetchReadNotifications ? 'notifications' : 'unread notifications'} ↗`}
           icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"

src/renderer/components/notifications/NotificationRow.test.tsx

@@ -154,6 +154,24 @@ describe('renderer/components/notifications/NotificationRow.tsx', () => {
       expect(markNotificationsAsReadMock).toHaveBeenCalledTimes(1);
     });
 
+    it('should hide mark as read button when notification is already read', async () => {
+      const readNotification = {
+        ...mockSingleNotification,
+        unread: false,
+      };
+
+      const props = {
+        notification: readNotification,
+        account: mockGitHubCloudAccount,
+      };
+
+      renderWithAppContext(<NotificationRow {...props} />);
+
+      expect(
+        screen.queryByTestId('notification-mark-as-read'),
+      ).not.toBeInTheDocument();
+    });
+
     it('should mark notifications as done', async () => {
       const markNotificationsAsDoneMock = jest.fn();
 

src/renderer/components/notifications/NotificationRow.tsx

@@ -138,6 +138,14 @@ export const NotificationRow: FC<NotificationRowProps> = ({
 
       {!animateExit && (
         <HoverGroup bgColor="group-hover:bg-gitify-notification-hover">
+          <HoverButton
+            action={actionMarkAsRead}
+            enabled={!isNotificationRead}
+            icon={ReadIcon}
+            label="Mark as read"
+            testid="notification-mark-as-read"
+          />
+
           <HoverButton
             action={actionMarkAsDone}
             enabled={isMarkAsDoneFeatureSupported(notification.account)}
@@ -146,13 +154,6 @@ export const NotificationRow: FC<NotificationRowProps> = ({
             testid="notification-mark-as-done"
           />
 
-          <HoverButton
-            action={actionMarkAsRead}
-            icon={ReadIcon}
-            label="Mark as read"
-            testid="notification-mark-as-read"
-          />
-
           <HoverButton
             action={actionUnsubscribeFromThread}
             icon={BellSlashIcon}

src/renderer/components/notifications/RepositoryNotifications.test.tsx

@@ -23,6 +23,13 @@ describe('renderer/components/notifications/RepositoryNotifications.tsx', () =>
     repoNotifications: mockGitHubNotifications,
   };
 
+  beforeEach(() => {
+    // Reset mock notification state between tests since it's mutated
+    for (const n of mockGitHubNotifications) {
+      n.unread = true;
+    }
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });

src/renderer/components/notifications/RepositoryNotifications.tsx

@@ -91,6 +91,14 @@ export const RepositoryNotifications: FC<RepositoryNotificationsProps> = ({
 
         {!animateExit && (
           <HoverGroup bgColor="group-hover:bg-gitify-repository">
+            <HoverButton
+              action={actionMarkAsRead}
+              enabled={!areAllRepoNotificationsRead}
+              icon={ReadIcon}
+              label="Mark repository as read"
+              testid="repository-mark-as-read"
+            />
+
             <HoverButton
               action={actionMarkAsDone}
               enabled={isMarkAsDoneFeatureSupported(
@@ -101,13 +109,6 @@ export const RepositoryNotifications: FC<RepositoryNotificationsProps> = ({
               testid="repository-mark-as-done"
             />
 
-            <HoverButton
-              action={actionMarkAsRead}
-              icon={ReadIcon}
-              label="Mark repository as read"
-              testid="repository-mark-as-read"
-            />
-
             <HoverButton
               action={actionToggleRepositoryNotifications}
               icon={Chevron.icon}