bibdle/src/lib/components/stats/SignalsFeed.svelte

<script lang="ts">
	import Container from '$lib/components/Container.svelte';
	import StatusPill from '$lib/components/charts/StatusPill.svelte';
	import type { Signal } from '$lib/types/stats';

	interface Props {
		signals: Signal[];
	}
	let { signals }: Props = $props();

	const labels: Record<Signal['severity'], string> = {
		good: 'On target',
		info: 'Needs data',
		warn: 'Watch',
		bad: 'Act now'
	};
</script>

<section class="flex flex-col gap-3">
	<h2 class="text-lg font-bold text-gray-100">6 · Signals &amp; Actions</h2>
	{#if signals.length === 0}
		<p class="text-sm text-gray-400">No signals for this date.</p>
	{:else}
		<div class="grid gap-3 md:grid-cols-2">
			{#each signals as signal (signal.id)}
				<Container class="p-4 w-full items-start text-left gap-2">
					<div class="flex items-center justify-between gap-2 w-full">
						<p class="font-semibold text-gray-100">{signal.title}</p>
						<StatusPill severity={signal.severity} label={labels[signal.severity]} />
					</div>
					<p class="text-sm text-gray-300">{signal.detail}</p>
					{#if signal.action}
						<p class="text-xs text-amber-200/90">
							<span class="font-semibold">What to do:</span> {signal.action}
						</p>
					{/if}
				</Container>
			{/each}
		</div>
	{/if}
</section>