cars: car pokedex tracker (brands, models, US variants from RDW + fueleconomy.gov), import script, search/filter UI, model pages

src/routes/trackers/cars/[brand]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import BrandBadge from '#lib/cars/BrandBadge.svelte';
+	import CarCard from '#lib/cars/CarCard.svelte';
+	import { flag, fmtNumber, years } from '#lib/cars/shared.js';
+	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	const b = $derived(data.brand);
+</script>
+
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
+	<a href="/trackers/cars" class="back"><ArrowLeft size={15} /> all cars</a>
+	<header class="mt-6 mb-8 flex items-center gap-5">
+		<BrandBadge name={b.name} size="lg" />
+		<div>
+			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{b.name}</h1>
+			<p class="mt-2 text-[var(--site-muted)]">
+				{#if b.country}{flag(b.country)} {b.country} ·
+				{/if}{fmtNumber(b.modelCount)} models{#if b.firstYear}
+					· {years(b.firstYear, b.lastYear, data.currentYear)}{/if}{#if b.nlCount}
+					· {fmtNumber(b.nlCount)} on Dutch roads{/if}
+			</p>
+		</div>
+	</header>
+
+	<ul class="grid">
+		{#each data.models as car (car.dex)}
+			<li><CarCard {car} current={data.currentYear} /></li>
+		{/each}
+	</ul>
+	<p class="mt-10 text-xs text-[var(--site-muted)]">
+		Sorted by how many are registered in NL. Sources: {b.sources.join(', ')}.
+	</p>
+</div>
+
+<style>
+	.back {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		font-size: 0.85rem;
+		color: var(--site-muted);
+	}
+	.back:hover {
+		color: var(--site-text);
+	}
+	.grid {
+		display: grid;
+		gap: 0.75rem;
+		grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
+	}
+</style>