From 82eaae74c07045824a5e104884d6533e7a0f2b6f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 16 Mar 2024 17:37:03 -0400
Subject: [PATCH 1/5] feat: read unread notifications

---
 src/__mocks__/mock-state.ts        |  1 +
 src/components/NotificationRow.tsx | 41 ++++++++++++++++++++++--------
 src/components/Sidebar.tsx         | 28 ++++++++++++++++++--
 src/context/App.tsx                | 12 ++++++++-
 src/hooks/useNotifications.ts      |  2 +-
 src/types.ts                       |  1 +
 6 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/src/__mocks__/mock-state.ts b/src/__mocks__/mock-state.ts
index ac5072e48..6411e2b0a 100644
--- a/src/__mocks__/mock-state.ts
+++ b/src/__mocks__/mock-state.ts
@@ -8,6 +8,7 @@ export const mockAccounts: AuthState = {
 };
 
 export const mockSettings: SettingsState = {
+  allNotifications: false,
   participating: false,
   playSound: true,
   showNotifications: true,
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 8f884cef5..b5e1215a5 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -1,6 +1,11 @@
 import React, { useCallback, useContext } from 'react';
 import { formatDistanceToNow, parseISO } from 'date-fns';
-import { CheckIcon, BellSlashIcon, ReadIcon } from '@primer/octicons-react';
+import {
+  CheckIcon,
+  BellSlashIcon,
+  ReadIcon,
+  DotFillIcon,
+} from '@primer/octicons-react';
 
 import {
   formatReason,
@@ -67,12 +72,24 @@ export const NotificationRow: React.FC<IProps> = ({
   ]);
 
   return (
-    <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group">
+    <div
+      className={`flex space-x-3 py-2 px-3 bg-white border-b border-gray-100 dark:border-gray-darker group dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker
+          ${!notification.unread ? 'opacity-50 dark:opacity-50' : ''}`}
+    >
       <div
-        className={`flex justify-center items-center w-5 ${realIconColor}`}
+        className={`flex flex-col justify-center items-center w-5 ${realIconColor}`}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
+        {notification.unread ? (
+          <DotFillIcon
+            className="focus:outline-none h-full text-blue-500"
+            size={14}
+            aria-label="Unread"
+          />
+        ) : (
+          <div className="w-[14px]" />
+        )}
       </div>
 
       <div
@@ -107,13 +124,17 @@ export const NotificationRow: React.FC<IProps> = ({
           <BellSlashIcon size={14} aria-label="Unsubscribe" />
         </button>
 
-        <button
-          className="focus:outline-none h-full hover:text-green-500"
-          title="Mark as Read"
-          onClick={() => markNotification(notification.id, hostname)}
-        >
-          <ReadIcon size={14} aria-label="Mark as Read" />
-        </button>
+        {notification.unread ? (
+          <button
+            className="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Read"
+            onClick={() => markNotification(notification.id, hostname)}
+          >
+            <ReadIcon size={14} aria-label="Mark as Read" />
+          </button>
+        ) : (
+          <div className="w-[14px]" />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 38574a812..314ac57d3 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { BellIcon } from '@primer/octicons-react';
+import { BellIcon, ReadIcon, UnreadIcon } from '@primer/octicons-react';
 import { ipcRenderer } from 'electron';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -15,7 +15,7 @@ export const Sidebar: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { isLoggedIn } = useContext(AppContext);
+  const { isLoggedIn, settings, updateSetting } = useContext(AppContext);
   const { notifications, fetchNotifications } = useContext(AppContext);
 
   const onOpenBrowser = useCallback(() => {
@@ -59,6 +59,30 @@ export const Sidebar: React.FC = () => {
           <BellIcon size={12} />
           {notificationsCount > 0 && notificationsCount}
         </div>
+
+        <div className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer">
+          <div
+            className={`${settings.allNotifications ? 'text-white' : 'text-green-500'}`}
+            title="Show Unread Notifications"
+            onClick={() => {
+              updateSetting('allNotifications', false);
+              navigate('/', { replace: true });
+            }}
+          >
+            <UnreadIcon size={12} />
+          </div>
+          <div>&nbsp;&nbsp;</div>
+          <div
+            className={`${settings.allNotifications ? 'text-green-500' : 'text-white'}`}
+            title="Show All Notifications"
+            onClick={() => {
+              updateSetting('allNotifications', true);
+              navigate('/', { replace: true });
+            }}
+          >
+            <ReadIcon size={12} />
+          </div>
+        </div>
       </div>
 
       <div className="py-4 px-3">
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 2f7b8487e..132edb262 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -31,6 +31,7 @@ const defaultAccounts: AuthState = {
 };
 
 export const defaultSettings: SettingsState = {
+  allNotifications: false,
   participating: false,
   playSound: true,
   showNotifications: true,
@@ -54,6 +55,7 @@ interface AppContextState {
   removeNotificationFromState: (id: string, hostname: string) => void;
   fetchNotifications: () => Promise<void>;
   markNotification: (id: string, hostname: string) => Promise<void>;
+  markUnreadNotification: (id: string, hostname: string) => Promise<void>;
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
@@ -75,6 +77,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     isFetching,
     removeNotificationFromState,
     markNotification,
+    markUnreadNotification,
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
@@ -91,7 +94,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
   useEffect(() => {
     fetchNotifications(accounts, settings);
-  }, [settings.participating]);
+  }, [settings.participating, settings.allNotifications]);
 
   useEffect(() => {
     fetchNotifications(accounts, settings);
@@ -183,6 +186,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, notifications],
   );
 
+  const markUnreadNotificationWithAccounts = useCallback(
+    async (id: string, hostname: string) =>
+      await markUnreadNotification(accounts, id, hostname),
+    [accounts, notifications],
+  );
+
   const markNotificationDoneWithAccounts = useCallback(
     async (id: string, hostname: string) =>
       await markNotificationDone(accounts, id, hostname),
@@ -223,6 +232,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         removeNotificationFromState,
         fetchNotifications: fetchNotificationsWithAccounts,
         markNotification: markNotificationWithAccounts,
+        markUnreadNotification: markUnreadNotificationWithAccounts,
         markNotificationDone: markNotificationDoneWithAccounts,
         unsubscribeNotification: unsubscribeNotificationWithAccounts,
         markRepoNotifications: markRepoNotificationsWithAccounts,
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index 82ca9f4df..bbcde58ae 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -65,7 +65,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   const fetchNotifications = useCallback(
     async (accounts: AuthState, settings) => {
       const isGitHubLoggedIn = accounts.token !== null;
-      const endpointSuffix = `notifications?participating=${settings.participating}`;
+      const endpointSuffix = `notifications?all=${settings.allNotifications}&participating=${settings.participating}`;
 
       function getGitHubNotifications() {
         if (!isGitHubLoggedIn) {
diff --git a/src/types.ts b/src/types.ts
index dc28c33a3..88fefd81c 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,6 +7,7 @@ export interface AuthState {
 }
 
 export interface SettingsState {
+  allNotifications: boolean;
   participating: boolean;
   playSound: boolean;
   showNotifications: boolean;

From 243f1b7de5f91d0eee1954c455abbc50484b050f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 16 Mar 2024 18:07:55 -0400
Subject: [PATCH 2/5] feat: read unread notifications

---
 src/context/App.tsx           | 9 ---------
 src/hooks/useNotifications.ts | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/context/App.tsx b/src/context/App.tsx
index 132edb262..018715c4f 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -55,7 +55,6 @@ interface AppContextState {
   removeNotificationFromState: (id: string, hostname: string) => void;
   fetchNotifications: () => Promise<void>;
   markNotification: (id: string, hostname: string) => Promise<void>;
-  markUnreadNotification: (id: string, hostname: string) => Promise<void>;
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
@@ -77,7 +76,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     isFetching,
     removeNotificationFromState,
     markNotification,
-    markUnreadNotification,
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
@@ -186,12 +184,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, notifications],
   );
 
-  const markUnreadNotificationWithAccounts = useCallback(
-    async (id: string, hostname: string) =>
-      await markUnreadNotification(accounts, id, hostname),
-    [accounts, notifications],
-  );
-
   const markNotificationDoneWithAccounts = useCallback(
     async (id: string, hostname: string) =>
       await markNotificationDone(accounts, id, hostname),
@@ -232,7 +224,6 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         removeNotificationFromState,
         fetchNotifications: fetchNotificationsWithAccounts,
         markNotification: markNotificationWithAccounts,
-        markUnreadNotification: markUnreadNotificationWithAccounts,
         markNotificationDone: markNotificationDoneWithAccounts,
         unsubscribeNotification: unsubscribeNotificationWithAccounts,
         markRepoNotifications: markRepoNotificationsWithAccounts,
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index bbcde58ae..ce2f72619 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -63,7 +63,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const fetchNotifications = useCallback(
-    async (accounts: AuthState, settings) => {
+    async (accounts: AuthState, settings: SettingsState) => {
       const isGitHubLoggedIn = accounts.token !== null;
       const endpointSuffix = `notifications?all=${settings.allNotifications}&participating=${settings.participating}`;
 

From cba8af08e64d1f31f547e966626f32c444dd3ea3 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sat, 16 Mar 2024 18:08:55 -0400
Subject: [PATCH 3/5] feat: read unread notifications

---
 .../NotificationRow.test.tsx.snap             | 28 +++++++-
 .../__snapshots__/Sidebar.test.tsx.snap       | 66 +++++++++++++++++++
 2 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 3dfac90dc..5fbc77214 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -2,10 +2,11 @@
 
 exports[`components/Notification.js should render itself & its children 1`] = `
 <div
-  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+  className="flex space-x-3 py-2 px-3 bg-white border-b border-gray-100 dark:border-gray-darker group dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker
+          "
 >
   <div
-    className="flex justify-center items-center w-5 text-green-500"
+    className="flex flex-col justify-center items-center w-5 text-green-500"
     title="Open Issue"
   >
     <svg
@@ -34,6 +35,29 @@ exports[`components/Notification.js should render itself & its children 1`] = `
         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>
+    <svg
+      aria-hidden="false"
+      aria-label="Unread"
+      className="focus:outline-none h-full text-blue-500"
+      fill="currentColor"
+      focusable="false"
+      height={14}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={14}
+    >
+      <path
+        d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"
+      />
+    </svg>
   </div>
   <div
     className="flex-1 overflow-hidden"
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index e9cf5c2ac..31cf3c3b9 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -81,6 +81,72 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       </svg>
       4
     </div>
+    <div
+      className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer"
+    >
+      <div
+        className="text-green-500"
+        onClick={[Function]}
+        title="Show Unread Notifications"
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-unread"
+          fill="currentColor"
+          focusable="false"
+          height={12}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        >
+          <path
+            d="M10.5 3.5H1.75a.25.25 0 0 0-.25.25v.32L8 7.88l3.02-1.77a.75.75 0 0 1 .758 1.295L8.379 9.397a.75.75 0 0 1-.758 0L1.5 5.809v6.441c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4.5a.75.75 0 0 1 1.5 0v4.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V4.513a.75.75 0 0 1 0-.027V3.75C0 2.784.784 2 1.75 2h8.75a.75.75 0 0 1 0 1.5Z"
+          />
+          <path
+            d="M14 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+          />
+        </svg>
+      </div>
+      <div>
+          
+      </div>
+      <div
+        className="text-white"
+        onClick={[Function]}
+        title="Show All Notifications"
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-read"
+          fill="currentColor"
+          focusable="false"
+          height={12}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        >
+          <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>
+      </div>
+    </div>
   </div>
   <div
     className="py-4 px-3"

From 6d73a84a318d94574fadbdaa6775dc2015ee972a Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 18 Mar 2024 08:09:38 -0400
Subject: [PATCH 4/5] feat: read unread notifications

---
 src/components/NotificationRow.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index b5e1215a5..b4bb7a1d3 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -81,15 +81,6 @@ export const NotificationRow: React.FC<IProps> = ({
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
-        {notification.unread ? (
-          <DotFillIcon
-            className="focus:outline-none h-full text-blue-500"
-            size={14}
-            aria-label="Unread"
-          />
-        ) : (
-          <div className="w-[14px]" />
-        )}
       </div>
 
       <div

From 11a01da758fa305dbe2cf683996599c4449a18cf Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 5 Apr 2024 16:09:04 -0400
Subject: [PATCH 5/5] fix: mark row as read without removing from state

---
 src/components/NotificationRow.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index ef204499a..bf9a481da 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -35,12 +35,22 @@ export const NotificationRow: React.FC<IProps> = ({
 
     if (settings.markAsDoneOnOpen) {
       markNotificationDone(notification.id, hostname);
-    } else {
+    }
+
+    if (!settings.showReadNotifications) {
       // no need to mark as read, github does it by default when opening it
       removeNotificationFromState(notification.id, hostname);
     }
   }, [settings]);
 
+  const setRowAsRead = useCallback(() => {
+    if (settings.showReadNotifications && notification.unread) {
+      const notificationRow = document.getElementById(notification.id);
+      notificationRow.className += 'opacity-50 dark:opacity-50';
+      console.log('Notification Row: ', notificationRow.className);
+    }
+  }, [settings]);
+
   const openBrowser = useCallback(
     () => openInBrowser(notification, accounts),
     [notification],
@@ -73,6 +83,7 @@ export const NotificationRow: React.FC<IProps> = ({
 
   return (
     <div
+      id={notification.id}
       className={`flex space-x-3 py-2 px-3 bg-white border-b border-gray-100 dark:border-gray-darker group dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker
           ${!notification.unread ? 'opacity-50 dark:opacity-50' : ''}`}
     >
@@ -87,7 +98,10 @@ export const NotificationRow: React.FC<IProps> = ({
         <div
           className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
           role="main"
-          onClick={() => pressTitle()}
+          onClick={() => {
+            setRowAsRead();
+            pressTitle();
+          }}
           title={notification.subject.title}
         >
           {notification.subject.title}