persistent map with animated transitions and dimmed overview on detail pages

src/routes/activities/[id]/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import Map from '$lib/components/Map.svelte';
+	import MapSlot from '$lib/components/MapSlot.svelte';
 	import ElevationChart from '$lib/components/ElevationChart.svelte';
 	import SpeedChart from '$lib/components/SpeedChart.svelte';
 	import StatTile from '$lib/components/StatTile.svelte';
+	import { mapState } from '$lib/map-state.svelte';
 	import { fmtDate, fmtDistance, fmtDuration, fmtElevation, fmtSpeed } from '$lib/format';
 
 	let { data } = $props();
@@ -12,6 +13,24 @@
 	const avgSpeed = $derived(
 		a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null
 	);
+
+	// the persistent map keeps the overview visible, dims the rest,
+	// and animates toward this activity
+	$effect(() => {
+		mapState.setDetailTrack({
+			id: a.id,
+			name: a.name,
+			username: a.username,
+			type: a.type,
+			date: a.date,
+			distance_m: a.distance_m,
+			latlngs: data.latlngs
+		});
+		mapState.setHighlight(a.id);
+		mapState.setPeaks(data.bagged);
+		mapState.setFocus(JSON.parse(a.bounds));
+		return () => mapState.reset();
+	});
 </script>
 
 <svelte:head>
@@ -62,11 +81,7 @@
 {/if}
 
 <h2>Map</h2>
-<Map
-	tracks={[{ name: a.name, type: a.type, latlngs: data.latlngs }]}
-	peaks={data.bagged}
-	height="440px"
-/>
+<MapSlot height="440px" />
 
 {#if data.profile.length > 1}
 	<h2>Elevation profile</h2>