From 4a041e8a69f1d1f86809654f8008430c4e771940 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Fri, 2 Oct 2026 13:23:04 +0330
Subject: [PATCH] feat: clarify read notification states

---
 src/components/NotificationsBell.tsx        | 12 ++++++------
 src/components/NotificationsPageContent.tsx | 17 +++++++++++++++--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/NotificationsBell.tsx b/src/components/NotificationsBell.tsx
index 7f25810..6ffd221 100644
--- a/src/components/NotificationsBell.tsx
+++ b/src/components/NotificationsBell.tsx
@@ -13,12 +13,12 @@ export default function NotificationsBell() {
       aria-label={unreadCount ? `اعلان‌ها، ${unreadCount} خوانده‌نشده` : "اعلان‌ها"}
       className="relative inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition hover:bg-background/45"
     >
-      <Bell className="h-5 w-5" aria-hidden="true" />
-      {unreadCount > 0 ? (
-        <span className="absolute -left-1 -top-1 flex min-w-5 items-center justify-center rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
-          {unreadCount > 9 ? "9+" : unreadCount}
-        </span>
-      ) : null}
+      <span className="relative inline-flex">
+        <Bell className="h-5 w-5" aria-hidden="true" />
+        {unreadCount > 0 ? (
+          <span aria-hidden="true" className="absolute left-[1px] top-[-2px] size-2 rounded-full bg-primary ring-2 ring-background" />
+        ) : null}
+      </span>
     </Link>
   );
 }
diff --git a/src/components/NotificationsPageContent.tsx b/src/components/NotificationsPageContent.tsx
index 7cf3eea..faa1b27 100644
--- a/src/components/NotificationsPageContent.tsx
+++ b/src/components/NotificationsPageContent.tsx
@@ -205,7 +205,13 @@ export default function NotificationsPageContent() {
               const expanded = expandedId === item.id;
               const destination = safeDestination(item.action_url);
               return (
-                <article key={item.id} className={cn("overflow-hidden rounded-2xl bg-background shadow-sm", !item.is_seen && "ring-1 ring-primary/25")}>
+                <article
+                  key={item.id}
+                  className={cn(
+                    "overflow-hidden rounded-2xl bg-background shadow-sm",
+                    item.is_seen ? "grayscale" : "ring-1 ring-primary/25",
+                  )}
+                >
                   <button
                     type="button"
                     disabled={Boolean(openingId)}
@@ -215,7 +221,14 @@ export default function NotificationsPageContent() {
                     className="flex min-h-20 w-full flex-col items-start justify-center gap-2 px-5 py-4 text-right transition hover:bg-muted/30 sm:flex-row sm:items-center sm:justify-between sm:gap-6 sm:px-7"
                   >
                     <span className="flex min-w-0 items-center gap-2 font-medium leading-7">
-                      {!item.is_seen && <span className="h-2 w-2 shrink-0 rounded-full bg-primary" aria-label="خوانده‌نشده" />}
+                      <span
+                        aria-hidden="true"
+                        className={cn(
+                          "h-2 w-2 shrink-0 rounded-full",
+                          item.is_seen ? "bg-muted-foreground/50" : "bg-primary",
+                        )}
+                      />
+                      <span className="sr-only">{item.is_seen ? "خوانده‌شده" : "خوانده‌نشده"}</span>
                       <span>{item.title}</span>
                       {openingId === item.id && <Loader2 className="h-4 w-4 animate-spin" />}
                     </span>