GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: clarify read notification states

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-10-02 13:23:04 +03:30
parent b206150e92
commit 4a041e8a69
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/NotificationsBell.tsx
View File

@@ -13,12 +13,12 @@ export default function NotificationsBell() {
aria-label={unreadCount ? `اعلان‌ها، ${unreadCount} خوانده‌نشده` : "اعلان‌ها"} 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" 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" /> <span className="relative inline-flex">
{unreadCount > 0 ? ( <Bell className="h-5 w-5" aria-hidden="true" />
<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 > 0 ? (
{unreadCount > 9 ? "9+" : unreadCount} <span aria-hidden="true" className="absolute left-[1px] top-[-2px] size-2 rounded-full bg-primary ring-2 ring-background" />
</span> ) : null}
) : null} </span>
</Link> </Link>
); );
} }

17
src/components/NotificationsPageContent.tsx
View File

@@ -205,7 +205,13 @@ export default function NotificationsPageContent() {
const expanded = expandedId === item.id; const expanded = expandedId === item.id;
const destination = safeDestination(item.action_url); const destination = safeDestination(item.action_url);
return ( 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 <button
type="button" type="button"
disabled={Boolean(openingId)} 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" 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"> <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> <span>{item.title}</span>
{openingId === item.id && <Loader2 className="h-4 w-4 animate-spin" />} {openingId === item.id && <Loader2 className="h-4 w-4 animate-spin" />}
</span> </span>