AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix notification badge overlap and improve notification fetching

Browse source 
cgen-b3500f8ed00446ef8b47c4a646f0edb8
This commit is contained in:
Builder.io 2025-11-11 01:27:05 +00:00
parent e13636878a
commit a1aabc0e49
1 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
client/components/notifications/NotificationBell.tsx
View file

@ -80,12 +80,14 @@ export default function NotificationBell({
.getUserNotifications(user.id) .getUserNotifications(user.id)
.then((data) => { .then((data) => {
if (!isActive) return; if (!isActive) return;
console.debug("[Notifications] Loaded", Array.isArray(data) ? data.length : 0, "notifications");
setNotifications( setNotifications(
Array.isArray(data) ? (data as AethexNotification[]) : [], Array.isArray(data) ? (data as AethexNotification[]) : [],
); );
}) })
.catch(() => { .catch((err) => {
if (!isActive) return; if (!isActive) return;
console.warn("[Notifications] Failed to load:", err);
setNotifications([]); setNotifications([]);
}) })
.finally(() => { .finally(() => {
@ -103,10 +105,12 @@ export default function NotificationBell({
if (!next?.id) return; if (!next?.id) return;
setNotifications((prev) => { setNotifications((prev) => {
if (prev.some((item) => item.id === next.id)) { // Check if notification already exists
return prev; const exists = prev.some((item) => item.id === next.id);
} if (exists) return prev;
return [next, ...prev].slice(0, 20);
// Add new notification to the top and keep up to 50 in the list
return [next, ...prev].slice(0, 50);
}); });
aethexToast.aethex({ aethexToast.aethex({
@ -220,11 +224,12 @@ export default function NotificationBell({
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className={cn("relative overflow-visible hover-lift", className)} className={cn("relative hover-lift", className)}
style={{ overflow: "visible" }}
> >
<Bell className="h-4 w-4" /> <Bell className="h-4 w-4" />
{unreadCount > 0 ? ( {unreadCount > 0 ? (
<span className="absolute -right-1 -top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-aethex-500 px-1 text-[10px] font-semibold text-white shadow-lg"> <span className="absolute -right-1.5 -top-1.5 z-10 flex h-5 min-w-[20px] items-center justify-center rounded-full bg-aethex-500 px-1.5 text-[11px] font-bold text-white shadow-lg border border-background">
{unreadCount > 9 ? "9+" : unreadCount} {unreadCount > 9 ? "9+" : unreadCount}
</span> </span>
) : null} ) : null}