more fluent texts

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

@@ -4,6 +4,8 @@
 	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
+	import { page } from '$app/stores';
+
 	import {
 		storedChartLayout,
 		storedLocation,
@@ -12,9 +14,12 @@
 		storedVariablePrefs
 	} from '$lib/stores/settings';
 
+	import { reportPageReady } from '$lib/stores/page-transition.svelte';
+
 	import { formatZoned } from '$lib/utils/date';
-	import { daySwap } from '$lib/utils/day-swap';
+	import { daySwap, runDayTransition } from '$lib/utils/day-swap';
 	import { buildLocationRoute } from '$lib/utils/location';
+	import { syncSearchParams } from '$lib/utils/url-state';
 
 	import { ChartContainer } from '$lib/components/charts';
 
@@ -41,6 +46,9 @@
 
 	let { data }: { data: PageData } = $props();
 
+	// the page cross-fade waits for this before revealing the new page
+	reportPageReady(() => fetchedDaily != null && fetchedHourly != null);
+
 	useHeroActions(heroActions);
 
 	let params = $state({
@@ -140,15 +148,41 @@
 	// Charts intentionally keep their current range: they show the full week
 	// unless the user narrows it via the range presets or Ctrl+scroll.
 	const switchDay = (date: Date) => {
-		selectedDay.setTime(date.getTime());
+		runDayTransition(() => selectedDay.setTime(date.getTime()));
 	};
 
 	onMount(() => {
-		// preselect the persisted model (client-only so prerendered HTML stays stable)
-		params.models = [get(storedModel)];
+		// the URL wins over the persisted choice, so a shared link opens on the
+		// same model the sender was looking at
+		const fromUrl = get(page).url.searchParams.get('model');
+		params.models = [fromUrl || get(storedModel)];
 		mounted = true;
 	});
 
+	// Apply ?day= once the forecast is in: the parameter is a plain calendar date,
+	// which only means something against the location's own timezone.
+	let appliedDayParam = false;
+	$effect(() => {
+		const fd = fetchedDaily;
+		if (appliedDayParam || !fd) return;
+		appliedDayParam = true;
+		const wanted = get(page).url.searchParams.get('day');
+		if (!wanted) return;
+		const match = fd.dailyDates.find((d) => formatZoned(d, fd.timezone, 'yyyy-MM-dd') === wanted);
+		if (match) selectedDay.setTime(match.getTime());
+	});
+
+	// Mirror the open day and the plotted model back into the URL.
+	$effect(() => {
+		const dayKey = selectedDayKey;
+		const model = params.models?.[0];
+		if (!mounted || !dayKey) return;
+		syncSearchParams($page.url, {
+			day: dayKey,
+			model: model && model !== 'best_match' ? model : null
+		});
+	});
+
 	$effect(() => {
 		const loc = location;
 		const modelList = params.models;
@@ -328,7 +362,7 @@
 			/>
 
 			{#if fetchedHourly && fetchedDaily}
-				<div use:daySwap={selectedDayKey}>
+				<div class="day-region-table" use:daySwap={selectedDayKey}>
 					<HourlyTable
 						data={fetchedHourly}
 						daily={fetchedDaily}
@@ -371,7 +405,7 @@
 			{/if}
 
 			{#if fetchedHourly && fetchedDaily}
-				<div use:daySwap={selectedDayKey}>
+				<div class="day-region-summary" use:daySwap={selectedDayKey}>
 					<DaySummary data={fetchedHourly} daily={fetchedDaily} {selectedDay} units={params} />
 				</div>
 			{:else}
@@ -383,7 +417,7 @@
 			{/if}
 
 			{#if fetchedHourly}
-				<div use:daySwap={selectedDayKey}>
+				<div class="day-region-charts" use:daySwap={selectedDayKey}>
 					<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
 				</div>
 			{:else}