fix: notification read state for delayNotificationState

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

Author: setchy

src/renderer/components/notifications/NotificationRow.tsx

@@ -18,13 +18,11 @@ import { NotificationHeader } from './NotificationHeader';
 interface INotificationRow {
   notification: Notification;
   isAnimated?: boolean;
-  isRead?: boolean;
 }
 
 export const NotificationRow: FC<INotificationRow> = ({
   notification,
   isAnimated = false,
-  isRead = false,
 }: INotificationRow) => {
   const {
     settings,
@@ -33,12 +31,9 @@ export const NotificationRow: FC<INotificationRow> = ({
     unsubscribeNotification,
   } = useContext(AppContext);
   const [animateExit, setAnimateExit] = useState(false);
-  const [showAsRead, setShowAsRead] = useState(false);
 
   const handleNotification = useCallback(() => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
-
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -55,13 +50,11 @@ export const NotificationRow: FC<INotificationRow> = ({
 
   const actionMarkAsDone = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsDone([notification]);
   };
 
   const actionMarkAsRead = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsRead([notification]);
   };
 
@@ -78,6 +71,8 @@ export const NotificationRow: FC<INotificationRow> = ({
 
   const groupByDate = settings.groupBy === GroupBy.DATE;
 
+  const isNotificationRead = !notification.unread;
+
   return (
     <div
       className={cn(
@@ -86,7 +81,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         'text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-350 ease-in-out',
-        (isRead || showAsRead) && Opacity.READ,
+        isNotificationRead && Opacity.READ,
       )}
       id={notification.id}
     >

src/renderer/components/notifications/RepositoryNotifications.tsx

@@ -27,28 +27,29 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   const { settings, markNotificationsAsRead, markNotificationsAsDone } =
     useContext(AppContext);
   const [animateExit, setAnimateExit] = useState(false);
-  const [showAsRead, setShowAsRead] = useState(false);
   const [showRepositoryNotifications, setShowRepositoryNotifications] =
     useState(true);
 
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
 
   const actionMarkAsDone = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsDone(repoNotifications);
   };
 
   const actionMarkAsRead = () => {
     setAnimateExit(!settings.delayNotificationState);
-    setShowAsRead(settings.delayNotificationState);
     markNotificationsAsRead(repoNotifications);
   };
 
   const actionToggleRepositoryNotifications = () => {
     setShowRepositoryNotifications(!showRepositoryNotifications);
   };
 
+  const areAllRepoNotificationsRead = repoNotifications.every(
+    (notification) => !notification.unread,
+  );
+
   const Chevron = getChevronDetails(
     true,
     showRepositoryNotifications,
@@ -63,7 +64,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           'bg-gitify-repository',
           animateExit &&
             'translate-x-full opacity-0 transition duration-350 ease-in-out',
-          showAsRead && Opacity.READ,
+          areAllRepoNotificationsRead && Opacity.READ,
         )}
         direction="horizontal"
         onClick={actionToggleRepositoryNotifications}
@@ -122,7 +123,6 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
         repoNotifications.map((notification) => (
           <NotificationRow
             isAnimated={animateExit}
-            isRead={showAsRead}
             key={notification.id}
             notification={notification}
           />

src/renderer/hooks/useNotifications.ts

@@ -23,6 +23,18 @@ import {
 } from '../utils/notifications/notifications';
 import { removeNotifications } from '../utils/notifications/remove';
 
+// Apply optimistic local updates for read state when delayNotificationState is enabled
+function applyLocalOptimisticRead(
+  state: GitifyState,
+  targetNotifications: Notification[],
+) {
+  if (state.settings.delayNotificationState) {
+    for (const n of targetNotifications) {
+      n.unread = false;
+    }
+  }
+}
+
 interface NotificationsState {
   notifications: AccountNotifications[];
   removeAccountNotifications: (account: Account) => Promise<void>;
@@ -125,6 +137,8 @@ export const useNotifications = (): NotificationsState => {
           notifications,
         );
 
+        applyLocalOptimisticRead(state, readNotifications);
+
         setNotifications(updatedNotifications);
         setTrayIconColor(updatedNotifications);
       } catch (err) {
@@ -163,6 +177,8 @@ export const useNotifications = (): NotificationsState => {
           notifications,
         );
 
+        applyLocalOptimisticRead(state, doneNotifications);
+
         setNotifications(updatedNotifications);
         setTrayIconColor(updatedNotifications);
       } catch (err) {