ui: separate trackers from projects; keep header dropdown on top

- /trackers index, Trackers section on the homepage and in the header nav;
  /projects lists only projects (tracker URLs unchanged)
- header is its own z-50 layer and <main> is isolated, so maps, charts and
  sticky tables no longer paint over the nav dropdowns

src/lib/components/CatalogGrid.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	// Card grid shared by the home page, /projects and /trackers.
+	import { resolve } from '$app/paths';
+	import ArrowRight from 'lucide-svelte/icons/arrow-right';
+	import ExternalLink from 'lucide-svelte/icons/external-link';
+	import * as Card from '#lib/components/ui/card/index.js';
+	import ProjectIcon from '#lib/components/ProjectIcon.svelte';
+
+	type Item = { name: string; subtitle: string; href: string; external: boolean };
+	let {
+		items,
+		subtitleClass = 'mt-1 block text-sm text-muted-foreground'
+	}: { items: readonly Item[]; subtitleClass?: string } = $props();
+</script>
+
+<ul class="grid gap-3 sm:grid-cols-2">
+	{#each items as project (project.name)}
+		<li>
+			<Card.Root class="h-full py-0 transition-colors hover:bg-muted/50"
+				><Card.Content class="p-0">
+					{#if project.external}
+						<a
+							href={project.href}
+							rel="external"
+							class="flex min-h-28 items-start justify-between gap-4 p-5"
+						>
+							<span class="flex min-w-0 items-start gap-3">
+								<span
+									class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
+								>
+									<ProjectIcon name={project.name} class="size-5" />
+								</span>
+								<span class="min-w-0"
+									><span class="block font-medium">{project.name}</span><span class={subtitleClass}
+										>{project.subtitle}</span
+									></span
+								>
+							</span><ExternalLink size={18} aria-hidden="true" class="text-[var(--site-muted)]" />
+						</a>
+					{:else}
+						<a
+							href={resolve(project.href as '/')}
+							class="flex min-h-28 items-start justify-between gap-4 p-5"
+						>
+							<span class="flex min-w-0 items-start gap-3">
+								<span
+									class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
+								>
+									<ProjectIcon name={project.name} class="size-5" />
+								</span>
+								<span class="min-w-0"
+									><span class="block font-medium">{project.name}</span><span class={subtitleClass}
+										>{project.subtitle}</span
+									></span
+								>
+							</span><ArrowRight size={18} aria-hidden="true" class="text-[var(--site-muted)]" />
+						</a>
+					{/if}
+				</Card.Content></Card.Root
+			>
+		</li>
+	{/each}
+</ul>

src/lib/components/ProjectIcon.svelte

@@ -15,6 +15,7 @@
 	import House from 'lucide-svelte/icons/house';
 	import Globe2 from 'lucide-svelte/icons/globe-2';
 	import Languages from 'lucide-svelte/icons/languages';
+	import ListChecks from 'lucide-svelte/icons/list-checks';
 	import Music2 from 'lucide-svelte/icons/music-2';
 	import PawPrint from 'lucide-svelte/icons/paw-print';
 	import Trophy from 'lucide-svelte/icons/trophy';
@@ -32,7 +33,8 @@
 		'language learner': Languages,
 		'money tracker': Wallet,
 		'cs prices': CandlestickChart,
-		'house tracker': House
+		'house tracker': House,
+		lists: ListChecks
 	};
 
 	const Icon = $derived(icons[name as keyof typeof icons] ?? FolderKanban);