website/src/routes/trackers/ai/+page.svelte

<script lang="ts">
	import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
	import Cpu from 'lucide-svelte/icons/cpu';
	import Code from 'lucide-svelte/icons/code';
	import Layers from 'lucide-svelte/icons/layers';

	let { data } = $props();

	type Filter = 'all' | 'ai' | 'software';
	let filter = $state<Filter>('all');

	const filters = [
		{ key: 'all', label: 'all', icon: Layers },
		{ key: 'ai', label: 'ai', icon: Cpu },
		{ key: 'software', label: 'software', icon: Code }
	] as const;

	const counts = $derived({
		all: data.news.length,
		ai: data.news.filter((n) => n.section === 'ai').length,
		software: data.news.filter((n) => n.section === 'software').length
	});

	const days = $derived.by(() => {
		const groups: { date: string; items: typeof data.news }[] = [];
		for (const item of data.news) {
			if (filter !== 'all' && item.section !== filter) continue;
			const last = groups.at(-1);
			if (last?.date === item.date) last.items.push(item);
			else groups.push({ date: item.date, items: [item] });
		}
		return groups;
	});

	const dayLabel = (iso: string) =>
		new Date(`${iso}T12:00:00Z`).toLocaleDateString('en-GB', {
			weekday: 'short',
			day: 'numeric',
			month: 'short',
			year: 'numeric',
			timeZone: 'Europe/Amsterdam'
		});
	const host = (url: string) => {
		try {
			return new URL(url).hostname.replace(/^www\./, '');
		} catch {
			return '';
		}
	};
</script>

<div class="filters" role="group" aria-label="Filter by section">
	{#each filters as f (f.key)}
		<button
			type="button"
			class={['chip', `chip-${f.key}`, { on: filter === f.key }]}
			aria-pressed={filter === f.key}
			onclick={() => (filter = f.key)}
			><span class="dot"><f.icon size={12} /></span>{f.label}<span class="count"
				>{counts[f.key]}</span
			></button
		>
	{/each}
</div>

{#if !days.length}
	<p class="empty">No news yet. The digest lands here every weekday.</p>
{:else}
	<div class="days">
		{#each days as day (day.date)}
			<section class="day" aria-label={dayLabel(day.date)}>
				<h2><time datetime={day.date}>{dayLabel(day.date)}</time></h2>
				<ul>
					{#each day.items as item (item.id)}
						<li>
							<a class="item" href={item.url} target="_blank" rel="noopener noreferrer">
								<span class={['badge', `badge-${item.section}`]}
									>{#if item.section === 'software'}<Code size={13} />{:else}<Cpu
											size={13}
										/>{/if}</span
								>
								<span class="body">
									<span class="title">{item.title}</span>
									{#if item.note}<span class="note">{item.note}</span>{/if}
									<span class="host">{host(item.url)}</span>
								</span>
								<ArrowUpRight size={16} class="arrow" aria-hidden="true" />
							</a>
						</li>
					{/each}
				</ul>
			</section>
		{/each}
	</div>
{/if}

<style>
	.filters {
		display: flex;
		gap: 0.4rem;
		flex-wrap: wrap;
	}
	.chip {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.25rem 0.6rem 0.25rem 0.3rem;
		border: 1px solid var(--site-border);
		border-radius: 999px;
		font-size: 0.8rem;
		color: var(--site-muted);
		background: transparent;
		cursor: pointer;
		transition:
			color 0.15s,
			border-color 0.15s;
	}
	.chip:hover {
		color: var(--site-text);
		border-color: var(--site-muted);
	}
	.chip.on {
		color: var(--site-text);
		border-color: var(--site-text);
	}
	.dot {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.25rem;
		height: 1.25rem;
		border-radius: 999px;
		color: #fff;
	}
	.chip-all .dot {
		background: linear-gradient(135deg, #a1a1aa, #52525b);
	}
	.chip-ai .dot,
	.badge-ai {
		background: linear-gradient(135deg, #fda4af, #8b5cf6);
	}
	.chip-software .dot,
	.badge-software {
		background: linear-gradient(135deg, #5eead4, #0284c7);
	}
	.count {
		font-variant-numeric: tabular-nums;
		opacity: 0.6;
	}
	.empty {
		color: var(--site-muted);
		padding: 2rem 0;
	}
	.days {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	.day h2 {
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--site-muted);
		margin-bottom: 0.5rem;
	}
	.day ul {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	}
	.item {
		display: flex;
		align-items: flex-start;
		gap: 0.7rem;
		height: 100%;
		padding: 0.7rem 0.8rem;
		border: 1px solid var(--site-border);
		border-radius: 0.75rem;
		background: var(--site-surface);
		color: var(--site-text);
		text-decoration: none;
		transition:
			border-color 0.15s,
			transform 0.15s,
			box-shadow 0.15s;
	}
	.item:hover {
		border-color: var(--site-muted);
		transform: translateY(-1px);
		box-shadow: 0 6px 20px -12px rgb(0 0 0 / 0.5);
	}
	.item :global(.arrow) {
		flex-shrink: 0;
		color: var(--site-muted);
		opacity: 0;
		transition: opacity 0.15s;
	}
	.item:hover :global(.arrow) {
		opacity: 1;
	}
	.badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 0.5rem;
		color: #fff;
	}
	.body {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		min-width: 0;
		flex: 1;
	}
	.title {
		font-weight: 550;
		font-size: 0.92rem;
		line-height: 1.3;
	}
	.note {
		font-size: 0.83rem;
		color: var(--site-muted);
		line-height: 1.35;
	}
	.host {
		font-size: 0.72rem;
		color: var(--site-muted);
		opacity: 0.8;
	}
</style>