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>

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,9 +83,8 @@ export function NotificationsBell() {
     };
   }, [fetchNotifications]);
 
-  async function handleItemClick(item: NotificationItem) {
+  async function handleMarkOne(item: NotificationItem) {
-    if (marking) return;
+    if (item.read || marking) return;
-    if (!item.read) {
     setMarking(true);
     setActionError(null);
     try {
@@ -103,6 +102,9 @@ export function NotificationsBell() {
       setMarking(false);
     }
   }
+
+  async function handleItemClick(item: NotificationItem) {
+    if (!item.read) await handleMarkOne(item);
     if (item.link) {
       router.push(item.link);
       setOpen(false);
@@ -194,10 +196,26 @@ export function NotificationsBell() {
                       )}
                       {item.title}
                     </span>
-                    <span className="shrink-0 text-[10px] text-muted-foreground">
+                    <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 && (
                     <span className="line-clamp-3 w-full text-xs text-muted-foreground">
                       {item.message}