feat: add 'Show read notifications' setting (#708)

Author: afonsojramos

src/renderer/__mocks__/state-mocks.ts

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

src/renderer/components/settings/NotificationSettings.test.tsx

@@ -271,6 +271,22 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => {
     );
   });
 
+  it('should toggle the showReadNotifications checkbox', async () => {
+    await act(async () => {
+      renderWithAppContext(<NotificationSettings />, {
+        updateSetting: updateSettingMock,
+      });
+    });
+
+    await userEvent.click(screen.getByTestId('checkbox-showReadNotifications'));
+
+    expect(updateSettingMock).toHaveBeenCalledTimes(1);
+    expect(updateSettingMock).toHaveBeenCalledWith(
+      'showReadNotifications',
+      false,
+    );
+  });
+
   it('should toggle the markAsDoneOnOpen checkbox', async () => {
     await act(async () => {
       renderWithAppContext(<NotificationSettings />, {

src/renderer/components/settings/NotificationSettings.tsx

@@ -328,6 +328,27 @@ export const NotificationSettings: FC = () => {
           }
         />
 
+        <Checkbox
+          checked={settings.showReadNotifications}
+          label="Show read notifications"
+          name="showReadNotifications"
+          onChange={(evt) =>
+            updateSetting('showReadNotifications', evt.target.checked)
+          }
+          tooltip={
+            <Stack direction="vertical" gap="condensed">
+              <Text>
+                When <Text as="u">checked</Text>, {APPLICATION.NAME} will
+                display both read and unread notifications.
+              </Text>
+              <Text>
+                When <Text as="u">unchecked</Text>, {APPLICATION.NAME} will only
+                display unread notifications.
+              </Text>
+            </Stack>
+          }
+        />
+
         <Checkbox
           checked={settings.markAsDoneOnOpen}
           label="Mark as done on open"

src/renderer/context/defaults.ts

@@ -36,6 +36,7 @@ const defaultNotificationSettings: NotificationSettingsState = {
   showPills: true,
   showNumber: true,
   participating: false,
+  showReadNotifications: true,
   markAsDoneOnOpen: false,
   markAsDoneOnUnsubscribe: false,
   delayNotificationState: false,

src/renderer/routes/__snapshots__/Settings.test.tsx.snap

@@ -109,6 +109,7 @@ export interface NotificationSettingsState {
   showPills: boolean;
   showNumber: boolean;
   participating: boolean;
+  showReadNotifications: boolean;
   markAsDoneOnOpen: boolean;
   markAsDoneOnUnsubscribe: boolean;
   delayNotificationState: boolean;

src/renderer/types.ts

@@ -63,6 +63,34 @@ describe('renderer/utils/notifications/filters/filter.ts', () => {
     ];
 
     describe('filterBaseNotifications', () => {
+      it('should show all notifications when showReadNotifications is enabled', () => {
+        const notifications = [
+          { ...mockNotifications[0], unread: true },
+          { ...mockNotifications[1], unread: false },
+        ];
+        const result = filterBaseNotifications(notifications, {
+          ...mockSettings,
+          showReadNotifications: true,
+        });
+
+        expect(result.length).toBe(2);
+        expect(result).toEqual(notifications);
+      });
+
+      it('should filter out read notifications when showReadNotifications is disabled', () => {
+        const notifications = [
+          { ...mockNotifications[0], unread: true },
+          { ...mockNotifications[1], unread: false },
+        ];
+        const result = filterBaseNotifications(notifications, {
+          ...mockSettings,
+          showReadNotifications: false,
+        });
+
+        expect(result.length).toBe(1);
+        expect(result[0].unread).toBe(true);
+      });
+
       it('should filter notifications by subject type when provided', async () => {
         mockNotifications[0].subject.type = 'Issue';
         mockNotifications[1].subject.type = 'PullRequest';

src/renderer/utils/notifications/filters/filter.test.ts

@@ -24,6 +24,11 @@ export function filterBaseNotifications(
   return notifications.filter((notification) => {
     let passesFilters = true;
 
+    // Filter out read notifications if showReadNotifications is disabled
+    if (!settings.showReadNotifications && !notification.unread) {
+      return false;
+    }
+
     // Apply base qualifier include/exclude filters (org, repo, etc.)
     for (const qualifier of BASE_SEARCH_QUALIFIERS) {
       if (!passesFilters) {