{ if (e.target === e.currentTarget) onclose(); }} >
e.stopPropagation()} >
Notifications
{#if unreadCount > 0}
{unreadCount}
{/if}
{#if unreadCount > 0}
Mark all read
{/if} {#if notifications.length > 0}
Clear all
{/if}
Cancel
filter = 'all'} class={cn( 'text-xs px-3 py-1.5 rounded-l border border-(--color-border) transition-colors', filter === 'all' ? 'bg-(--color-brand) text-black border-(--color-brand) font-semibold' : 'text-(--color-muted) hover:text-(--color-text)' )} >All ({notifications.length})
filter = 'unread'} class={cn( 'text-xs px-3 py-1.5 rounded-r border border-l-0 border-(--color-border) transition-colors', filter === 'unread' ? 'bg-(--color-brand) text-black border-(--color-brand) font-semibold' : 'text-(--color-muted) hover:text-(--color-text)' )} >Unread ({unreadCount})
{#if filtered.length === 0}
{filter === 'unread' ? 'No unread notifications' : 'No notifications yet'}
{:else} {#each filtered as n (n.id)}
{ onMarkRead(n.id); onclose(); }} class="flex-1 px-4 py-3.5 min-w-0" >
{#if !n.read}
{/if}
{n.title}
{n.message}
onDismiss(n.id)} class="shrink-0 p-3 text-(--color-muted) hover:text-red-400 opacity-0 group-hover:opacity-100 transition-all" title="Dismiss" >
{/each} {/if}
View all notifications