feat: Enhance notification model and UI components

- Added an `updated_at` timestamp field to the Notification model for better tracking of notification updates.
- Updated the NotificationButton component to change the unread notification badge color for improved visibility.
- Adjusted the NotificationPopup component's layout and text handling for better responsiveness and readability.
This commit is contained in:
Anish Sarkar 2026-01-14 04:35:59 +05:30
parent 9d0f5b4249
commit 460dc0dec8
3 changed files with 17 additions and 10 deletions

View file

@ -55,7 +55,7 @@ export function NotificationPopup({
};
return (
<div className="flex flex-col">
<div className="flex flex-col w-80 max-w-[calc(100vw-2rem)]">
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b">
<div className="flex items-center gap-2">
@ -92,20 +92,20 @@ export function NotificationPopup({
!notification.read && "bg-accent/50"
)}
>
<div className="flex items-start gap-3">
<div className="flex items-start gap-3 overflow-hidden">
<div className="flex-shrink-0 mt-0.5">{getStatusIcon(notification)}</div>
<div className="flex-1 min-w-0">
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-start justify-between gap-2 mb-1">
<p
className={cn(
"text-xs font-medium break-words",
"text-xs font-medium break-all",
!notification.read && "font-semibold"
)}
>
{notification.title}
</p>
</div>
<p className="text-[11px] text-muted-foreground break-words line-clamp-2">
<p className="text-[11px] text-muted-foreground break-all line-clamp-2">
{notification.message}
</p>
<div className="flex items-center justify-between mt-2">