Fixes #5471

frontend-web/webclient/app/Notifications/Card.tsx

@@ -9,6 +9,7 @@ import {AvatarForUser} from "@/AvataaarLib/UserAvatar";
 import {copyToClipboard} from "@/UtilityFunctions";
 import {TooltipV2} from "@/ui-components/Tooltip";
 import {MultiLineTruncateClass} from "@/Applications/Card";
+import {markAsRead} from ".";
 
 export interface NotificationProps {
     icon: IconName;
@@ -48,12 +49,17 @@ export const NotificationCard: React.FunctionComponent<NotificationProps & {
         }
     }, [props.callbackItem, props.onSnooze, props.isPinned]);
 
+    const onAction = React.useCallback(() => {
+        markAsRead([props.callbackItem.notification]);
+        props.onAction?.();
+    }, []);
+
     return <div
         className={classConcat(Style, props.exit ? "exit" : undefined)}
         style={{position: "fixed", bottom: props.bottom, right: "16px"}}
         onMouseEnter={onMouseEnterMemo}
         onMouseLeave={onMouseLeaveMemo}
-        onClick={props.onAction}
+        onClick={onAction}
     >
         <div className={DefaultHidden} data-tag="operations">
             {props.onDismiss ?

frontend-web/webclient/app/Notifications/index.tsx

@@ -402,18 +402,17 @@ export function markAllAsRead() {
 }
 
 export function markAsRead(notifications: NormalizedNotification[]) {
-    for (const notification of notifications) {
-        notification.read = true;
-    }
-    renderNotifications();
 
     const idsToUpdate: string[] = [];
     for (const notification of notifications) {
-        if (!notification.isPinned && notification.uniqueId.toString().indexOf("-") !== 0) {
+        if (!notification.isPinned && notification.uniqueId.toString().indexOf("-") !== 0 && !notification.read) {
             idsToUpdate.push(notification.uniqueId);
         }
+        notification.read = true;
     }
 
+    renderNotifications();
+
     if (idsToUpdate.length > 0) {
         callAPI({
             context: "",
@@ -647,7 +646,6 @@ export function normalizeNotification(
             if (location && refresh) {
                 const before = location.pathname;
 
-                markAsRead([result]);
                 notification.onAction?.();
 
                 const after = location.pathname;
@@ -670,23 +668,22 @@ export function normalizeNotification(
         uniqueId: notification.id,
         avatar: resolved.avatar,
         onSnooze: () => Snooze.snooze(`${notification.id}`),
-    };
+        onAction: () => {
+            const navigate = normalizationDependencies?.navigate;
+            const dispatch = normalizationDependencies?.dispatch;
+            const refresh = normalizationDependencies?.refresh;
+            const before = location.pathname;
 
-    result.onAction = () => {
-        const navigate = normalizationDependencies?.navigate;
-        const dispatch = normalizationDependencies?.dispatch;
-        const refresh = normalizationDependencies?.refresh;
-        const before = location.pathname;
+            if (navigate && dispatch) {
+                onNotificationAction(notification, navigate, dispatch);
+            }
 
-        markAsRead([result]);
-        if (navigate && dispatch) {
-            onNotificationAction(notification, navigate, dispatch);
+            const after = location.pathname;
+            if (before === after && refresh?.current) refresh.current();
         }
-
-        const after = location.pathname;
-        if (before === after && refresh?.current) refresh.current();
     };
 
+
     return result;
 }