<script lang="ts">
	import Badge from '$lib/components/ui/badge.svelte';
	import Button from '$lib/components/ui/button.svelte';

	import UserImg01 from '$assets/avatar-80-01.jpg?w=64&h=64&enhanced';
	import UserImg02 from '$assets/avatar-80-02.jpg?w=64&h=64&enhanced';
	import UserImg03 from '$assets/avatar-80-03.jpg?w=64&h=64&enhanced';
	import UserImg04 from '$assets/avatar-80-04.jpg?w=64&h=64&enhanced';
	import UserImg05 from '$assets/avatar-80-05.jpg?w=64&h=64&enhanced';
	import UserImg06 from '$assets/avatar-80-06.jpg?w=64&h=64&enhanced';
	import { Popover, PopoverContent, PopoverTrigger } from '$lib/components/ui/popover';
	import Bell from 'lucide-svelte/icons/bell';
	const initialNotifications = [
		{
			action: 'requested review on',
			id: 1,
			image: UserImg01,
			target: 'PR #42: Feature implementation',
			timestamp: '15 minutes ago',
			unread: true,
			user: 'Chris Tompson'
		},
		{
			action: 'shared',
			id: 2,
			image: UserImg02,
			target: 'New component library',
			timestamp: '45 minutes ago',
			unread: true,
			user: 'Emma Davis'
		},
		{
			action: 'assigned you to',
			id: 3,
			image: UserImg03,
			target: 'API integration task',
			timestamp: '4 hours ago',
			unread: false,
			user: 'James Wilson'
		},
		{
			action: 'replied to your comment in',
			id: 4,
			image: UserImg04,
			target: 'Authentication flow',
			timestamp: '12 hours ago',
			unread: false,
			user: 'Alex Morgan'
		},
		{
			action: 'commented on',
			id: 5,
			image: UserImg05,
			target: 'Dashboard redesign',
			timestamp: '2 days ago',
			unread: false,
			user: 'Sarah Chen'
		},
		{
			action: 'mentioned you in',
			id: 6,
			image: UserImg06,
			target: 'Origin UI open graph image',
			timestamp: '2 weeks ago',
			unread: false,
			user: 'Miky Derya'
		}
	];
	let notifications = $state(initialNotifications);
	const unreadCount = $derived(notifications.filter((n) => n.unread).length);

	function handleMarkAllAsRead() {
		notifications = notifications.map((n) => {
			n.unread = false;
			return n;
		});
	}

	function handleNotificationClick(id: number) {
		notifications = notifications.map((n) => {
			if (n.id === id) {
				n.unread = false;
			}
			return n;
		});
	}
</script>

{#snippet Dot(className = '')}
	<svg
		width="6"
		height="6"
		fill="currentColor"
		viewBox="0 0 6 6"
		xmlns="http://www.w3.org/2000/svg"
		class={className}
		aria-hidden="true"
	>
		<circle cx="3" cy="3" r="3" />
	</svg>
{/snippet}
<Popover>
	<PopoverTrigger>
		{#snippet child({ props })}
			<Button
				size="icon"
				variant="outline"
				class="relative"
				aria-label="Open notifications"
				{...props}
			>
				<Bell size={16} stroke-width={2} aria-hidden="true" />
				{#if unreadCount > 0}
					<Badge class="absolute -top-2 left-full min-w-5 -translate-x-1/2 px-1">
						{unreadCount > 99 ? '99+' : unreadCount}
					</Badge>
				{/if}
			</Button>
		{/snippet}
	</PopoverTrigger>
	<PopoverContent class="w-80 p-1">
		<div class="flex items-baseline justify-between gap-4 px-3 py-2">
			<div class="text-sm font-semibold">Notifications</div>
			{#if unreadCount > 0}
				<button class="text-xs font-medium hover:underline" onclick={handleMarkAllAsRead}>
					Mark all as read
				</button>
			{/if}
		</div>
		<div role="separator" aria-orientation="horizontal" class="-mx-1 my-1 h-px bg-border"></div>
		{#each notifications as notification}
			<div class="rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent">
				<div class="relative flex items-start gap-3 pe-3">
					<enhanced:img
						class="size-8 rounded-md"
						src={notification.image}
						alt={notification.user}
					/>
					<div class="flex-1 space-y-1">
						<button
							class="text-left text-foreground/80 after:absolute after:inset-0"
							onclick={() => handleNotificationClick(notification.id)}
						>
							<span class="font-medium text-foreground hover:underline">
								{notification.user}
							</span>{' '}
							{notification.action}{' '}
							<span class="font-medium text-foreground hover:underline">
								{notification.target}
							</span>
							.
						</button>
						<div class="text-xs text-muted-foreground">{notification.timestamp}</div>
					</div>
					{#if notification.unread}
						<div class="absolute end-0 self-center">
							{@render Dot()}
						</div>
					{/if}
				</div>
			</div>
		{/each}
	</PopoverContent>
</Popover>
Dropdown and Popover

Check out the original Origin UI library or send a suggestion
