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

<script lang="ts">
	import { onMount } from 'svelte';

	interface NotificationItem {
		readonly id: string;
		readonly appId: string | null;
		readonly event: string;
		readonly message: string;
		readonly sentAt: string;
		readonly readAt: string | null;
		readonly app?: {
			readonly name: string;
		} | null;
	}

	let allNotifications = $state<NotificationItem[]>([]);
	let loading = $state(true);
	let currentPage = $state(1);
	let hasMore = $state(false);
	let filterEvent = $state('');
	let filterAppId = $state('');

	const PAGE_SIZE = 20;

	async function loadNotifications(page: number = 1) {
		loading = true;
		try {
			 
			const params = new URLSearchParams({
				limit: String(PAGE_SIZE),
				offset: String((page - 1) * PAGE_SIZE)
			});
			if (filterEvent) params.set('event', filterEvent);
			if (filterAppId) params.set('appId', filterAppId);

			const res = await fetch(`/api/notifications?${params.toString()}`);
			if (res.ok) {
				const json = await res.json();
				if (json.success && Array.isArray(json.data)) {
					allNotifications = json.data;
					hasMore = json.data.length === PAGE_SIZE;
				}
			}
		} catch {
			// Silently fail
		} finally {
			loading = false;
		}
	}

	onMount(() => {
		loadNotifications();
	});

	function changePage(delta: number) {
		currentPage = Math.max(1, currentPage + delta);
		loadNotifications(currentPage);
	}

	function applyFilters() {
		currentPage = 1;
		loadNotifications(1);
	}

	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 eventBadgeClass(event: string): string {
		switch (event) {
			case 'app_online': return 'bg-green-500/10 text-green-500';
			case 'app_offline': return 'bg-red-500/10 text-red-500';
			case 'app_degraded': return 'bg-yellow-500/10 text-yellow-500';
			default: return 'bg-muted text-muted-foreground';
		}
	}
</script>

<div>
	<!-- Filters -->
	<div class="mb-4 flex flex-wrap items-center gap-3">
		<select
			bind:value={filterEvent}
			onchange={applyFilters}
			class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
		>
			<option value="">All Events</option>
			<option value="app_online">Online</option>
			<option value="app_offline">Offline</option>
			<option value="app_degraded">Degraded</option>
		</select>
	</div>

	<!-- Table -->
	{#if loading}
		<div class="py-12 text-center text-muted-foreground">Loading...</div>
	{:else if allNotifications.length === 0}
		<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
			<p class="text-muted-foreground">No notifications found</p>
		</div>
	{:else}
		<div class="overflow-x-auto rounded-lg border border-border">
			<table class="w-full text-left text-sm">
				<thead class="border-b border-border bg-muted/50">
					<tr>
						<th class="px-4 py-3 font-medium text-muted-foreground">Time</th>
						<th class="px-4 py-3 font-medium text-muted-foreground">Event</th>
						<th class="px-4 py-3 font-medium text-muted-foreground">App</th>
						<th class="px-4 py-3 font-medium text-muted-foreground">Message</th>
						<th class="px-4 py-3 font-medium text-muted-foreground">Status</th>
					</tr>
				</thead>
				<tbody>
					{#each allNotifications as notification (notification.id)}
						<tr class="border-b border-border last:border-0">
							<td class="whitespace-nowrap px-4 py-3 text-xs text-muted-foreground">
								{new Date(notification.sentAt).toLocaleString()}
							</td>
							<td class="px-4 py-3">
								<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {eventBadgeClass(notification.event)}">
									{eventLabel(notification.event)}
								</span>
							</td>
							<td class="px-4 py-3 text-sm text-foreground">
								{notification.app?.name ?? '—'}
							</td>
							<td class="max-w-xs truncate px-4 py-3 text-sm text-foreground">
								{notification.message}
							</td>
							<td class="px-4 py-3">
								{#if notification.readAt}
									<span class="text-xs text-muted-foreground">Read</span>
								{:else}
									<span class="text-xs font-medium text-primary">Unread</span>
								{/if}
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</div>

		<!-- Pagination -->
		<div class="mt-4 flex items-center justify-between">
			<button
				type="button"
				disabled={currentPage === 1}
				onclick={() => changePage(-1)}
				class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
			>
				Previous
			</button>
			<span class="text-sm text-muted-foreground">Page {currentPage}</span>
			<button
				type="button"
				disabled={!hasMore}
				onclick={() => changePage(1)}
				class="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50"
			>
				Next
			</button>
		</div>
	{/if}
</div>