web-app-launcher/src/lib/components/notifications/NotificationBell.svelte

<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	import { notifications } from '$lib/stores/notifications.svelte.js';

	let showDropdown = $state(false);

	onMount(() => {
		notifications.load();
		notifications.startPolling();
	});

	onDestroy(() => {
		notifications.stopPolling();
	});

	function handleClickOutside(e: MouseEvent) {
		const target = e.target as HTMLElement;
		if (!target.closest('.notification-bell-container')) {
			showDropdown = false;
		}
	}

	function formatTime(dateStr: string): string {
		const diff = Date.now() - new Date(dateStr).getTime();
		const minutes = Math.floor(diff / 60_000);
		if (minutes < 1) return 'just now';
		if (minutes < 60) return `${minutes}m ago`;
		const hours = Math.floor(minutes / 60);
		if (hours < 24) return `${hours}h ago`;
		const days = Math.floor(hours / 24);
		return `${days}d ago`;
	}

	function eventLabel(event: string): string {
		switch (event) {
			case 'app_online':
				return 'Online';
			case 'app_offline':
				return 'Offline';
			case 'app_degraded':
				return 'Degraded';
			default:
				return event;
		}
	}

	function eventColor(event: string): string {
		switch (event) {
			case 'app_online':
				return 'text-status-online-ink';
			case 'app_offline':
				return 'text-status-offline-ink';
			case 'app_degraded':
				return 'text-status-degraded-ink';
			default:
				return 'text-muted-foreground';
		}
	}
</script>

<svelte:window onclick={handleClickOutside} />

<div class="notification-bell-container relative">
	<button
		type="button"
		onclick={() => (showDropdown = !showDropdown)}
		class="relative inline-flex items-center justify-center rounded-xl p-2.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
		title="Notifications"
		aria-label="Notifications"
	>
		<!-- Bell Icon -->
		<svg
			class="h-5 w-5"
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 24 24"
			fill="none"
			stroke="currentColor"
			stroke-width="2"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
			<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
		</svg>

		<!-- Unread Badge -->
		{#if notifications.hasUnread}
			<span
				class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground"
			>
				{notifications.unreadCount > 99 ? '99+' : notifications.unreadCount}
			</span>
		{/if}
	</button>

	{#if showDropdown}
		<div
			class="absolute right-0 top-full z-50 mt-1 w-80 rounded-xl border border-border bg-popover shadow-[var(--shadow-soft)]"
		>
			<!-- Header -->
			<div class="flex items-center justify-between border-b border-border px-4 py-3">
				<h3 class="text-sm font-semibold text-popover-foreground">Notifications</h3>
				{#if notifications.hasUnread}
					<button
						type="button"
						class="text-xs text-primary transition-colors hover:text-primary/80"
						onclick={() => notifications.markAllAsRead()}
					>
						Mark all as read
					</button>
				{/if}
			</div>

			<!-- Notification List -->
			<div class="max-h-80 overflow-y-auto">
				{#if notifications.items.length === 0}
					<div class="p-6 text-center">
						<p class="text-sm text-muted-foreground">No notifications yet</p>
					</div>
				{:else}
					{#each notifications.items as notification (notification.id)}
						<button
							type="button"
							class="flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-accent/50 {notification.readAt === null ? 'bg-primary/5' : ''}"
							onclick={() => {
								if (notification.readAt === null) {
									notifications.markAsRead(notification.id);
								}
							}}
						>
							<!-- Unread dot -->
							<span class="mt-1.5 flex-shrink-0">
								{#if notification.readAt === null}
									<span class="inline-block h-2 w-2 rounded-full bg-primary"></span>
								{:else}
									<span class="inline-block h-2 w-2"></span>
								{/if}
							</span>

							<div class="min-w-0 flex-1">
								<div class="flex items-center gap-1.5">
									<span class="text-xs font-medium {eventColor(notification.event)}">
										{eventLabel(notification.event)}
									</span>
									{#if notification.app}
										<span class="truncate text-xs text-muted-foreground">
											{notification.app.name}
										</span>
									{/if}
								</div>
								<p class="mt-0.5 line-clamp-2 text-xs text-popover-foreground">
									{notification.message}
								</p>
								<p class="mt-1 text-[10px] text-muted-foreground">
									{formatTime(notification.sentAt)}
								</p>
							</div>
						</button>
					{/each}
				{/if}
			</div>

			<!-- Footer -->
			<div class="border-t border-border p-2">
				<a
					href="/settings/notifications"
					class="block rounded-md px-3 py-1.5 text-center text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
					onclick={() => (showDropdown = false)}
				>
					Manage notifications
				</a>
			</div>
		</div>
	{/if}
</div>