more fluent texts

src/routes/weather/compare/[location]/+page.svelte

@@ -3,9 +3,14 @@
 	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
+	import { page } from '$app/stores';
+
 	import { storedLocation, storedModel, storedUnits } from '$lib/stores/settings';
 
+	import { reportPageReady } from '$lib/stores/page-transition.svelte';
+
 	import { formatZoned } from '$lib/utils/date';
+	import { readList, syncSearchParams } from '$lib/utils/url-state';
 
 	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
 	import { Checkbox } from '$lib/components/ui/checkbox';
@@ -53,6 +58,9 @@
 
 	let { data }: { data: PageData } = $props();
 
+	// the page cross-fade waits for this before revealing the new page
+	reportPageReady(() => fetchedData != null);
+
 	useHeroActions(heroActions);
 
 	// the URL is the source of truth: location comes from the load function,
@@ -94,14 +102,34 @@
 	// ─── Lifecycle ──────────────────────────────────────────────────────────────
 
 	onMount(() => {
-		// the model chosen elsewhere on the site is always part of the comparison
-		const selectedModel = get(storedModel);
-		if (selectedModel !== 'best_match' && !params.models.includes(selectedModel)) {
-			params.models = [selectedModel, ...params.models];
+		// A link carries the exact comparison it was shared with; without one, the
+		// model chosen elsewhere on the site joins the default line-up.
+		const url = get(page).url;
+		const urlModels = readList(url, 'models');
+		const urlVars = readList(url, 'vars');
+
+		if (urlModels) params.models = urlModels;
+		else {
+			const selectedModel = get(storedModel);
+			if (selectedModel !== 'best_match' && !params.models.includes(selectedModel)) {
+				params.models = [selectedModel, ...params.models];
+			}
 		}
+		if (urlVars) params.hourly = urlVars;
 		mounted = true;
 	});
 
+	// Mirror the comparison back into the URL so it can be shared or reloaded.
+	$effect(() => {
+		const models = params.models;
+		const vars = params.hourly;
+		if (!mounted) return;
+		syncSearchParams($page.url, {
+			models: models?.length ? models.join(',') : null,
+			vars: vars?.length ? vars.join(',') : null
+		});
+	});
+
 	// components persist across refetches; entries are null while unmounted
 	let liveCharts = $derived(chartComponents.filter((chart) => chart != null));