From 3d8655aa8a667c7e062c70c2f60c52e46b8bc5d0 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 1 Sep 2026 17:17:41 -0400
Subject: [PATCH] fix(notifications): add per-row mark as read

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../notifications/NotificationsBell.tsx       | 60 ++++++++++++-------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/components/frontend/notifications/NotificationsBell.tsx b/src/components/frontend/notifications/NotificationsBell.tsx
index 4865d35..8559440 100644
--- a/src/components/frontend/notifications/NotificationsBell.tsx
+++ b/src/components/frontend/notifications/NotificationsBell.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { BellIcon } from "lucide-react";
+import { BellIcon, CheckIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -83,26 +83,28 @@ export function NotificationsBell() {
     };
   }, [fetchNotifications]);
 
-  async function handleItemClick(item: NotificationItem) {
-    if (marking) return;
-    if (!item.read) {
-      setMarking(true);
-      setActionError(null);
-      try {
-        const result = await markNotificationsRead([item.id]);
-        if (result.success) {
-          setNotifications((prev) =>
-            prev.map((n) => (n.id === item.id ? { ...n, read: true } : n)),
-          );
-        } else {
-          setActionError(result.error ?? "Failed to update notifications.");
-        }
-      } catch (err) {
-        setActionError(err instanceof Error ? err.message : "Failed to update notifications.");
-      } finally {
-        setMarking(false);
+  async function handleMarkOne(item: NotificationItem) {
+    if (item.read || marking) return;
+    setMarking(true);
+    setActionError(null);
+    try {
+      const result = await markNotificationsRead([item.id]);
+      if (result.success) {
+        setNotifications((prev) =>
+          prev.map((n) => (n.id === item.id ? { ...n, read: true } : n)),
+        );
+      } else {
+        setActionError(result.error ?? "Failed to update notifications.");
       }
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : "Failed to update notifications.");
+    } finally {
+      setMarking(false);
     }
+  }
+
+  async function handleItemClick(item: NotificationItem) {
+    if (!item.read) await handleMarkOne(item);
     if (item.link) {
       router.push(item.link);
       setOpen(false);
@@ -194,8 +196,24 @@ export function NotificationsBell() {
                       )}
                       {item.title}
                     </span>
-                    <span className="shrink-0 text-[10px] text-muted-foreground">
-                      {timeAgo(item.createdAt)}
+                    <span className="flex shrink-0 items-center gap-1.5">
+                      {!item.read && (
+                        <button
+                          type="button"
+                          title="Mark as read"
+                          aria-label={`Mark "${item.title}" as read`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            void handleMarkOne(item);
+                          }}
+                          className="rounded-sm p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                        >
+                          <CheckIcon className="size-3.5" />
+                        </button>
+                      )}
+                      <span className="text-[10px] text-muted-foreground">
+                        {timeAgo(item.createdAt)}
+                      </span>
                     </span>
                   </span>
                   {item.message && (