spotters: most-active-in sort with country/region selector, collection tracking (seen marks, progress, filters), refresh scripts score activity and report new NL entries

src/routes/trackers/planes/[maker]/+page.svelte

@@ -11,10 +11,17 @@
 		thumbSrcset
 	} from '#lib/planes/shared.js';
 	import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+	import { page } from '$app/state';
+	import { parseGot } from '#lib/spotting/areas.js';
+	import { countSeen, filterGot } from '#lib/spotting/seen.svelte.js';
+	import SpotItem from '#lib/spotting/SpotItem.svelte';
+	import SpotProgress from '#lib/spotting/SpotProgress.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
 	const b = $derived(data.maker);
+	const got = $derived(parseGot(page.url.searchParams.get('got')));
+	const shown = $derived(filterGot('planes', data.types, got));
 </script>
 
 <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
@@ -61,9 +68,21 @@
 		</div>
 	</header>
 
+	<div class="mb-6">
+		<SpotProgress
+			seen={countSeen('planes', data.types)}
+			total={data.types.length}
+			label="{b.name} types collected"
+			{got}
+		/>
+	</div>
 	<ul class="grid">
-		{#each data.types as plane, i (plane.dex)}
-			<li><PlaneCard {plane} eager={i < 4} /></li>
+		{#each shown as plane, i (plane.dex)}
+			<li>
+				<SpotItem tracker="planes" id={plane.id} seen={plane.seen} label={plane.fullName}>
+					<PlaneCard {plane} eager={i < 4} />
+				</SpotItem>
+			</li>
 		{/each}
 	</ul>
 	<p class="mt-10 text-xs text-[var(--site-muted)]">