nearby

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

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { SvelteDate } from 'svelte/reactivity';
+	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
 	import { reportPageReady } from '$lib/stores/page-transition.svelte';
 	import {
+		storedArchiveModel,
 		storedChartLayout,
 		storedLocation,
 		storedUnits,
@@ -13,6 +15,7 @@
 
 	import { ChartContainer } from '$lib/components/charts';
 
+	import * as m from '$lib/paraglide/messages';
 	import PaywallGate from '$lib/paywall/PaywallGate.svelte';
 	import { isSupporter } from '$lib/paywall/supporter';
 	import {
@@ -22,8 +25,10 @@
 		fetchHistoricalWeather
 	} from '$lib/services/weather';
 
-	import { defaultParameters } from '../../options';
+	import { useHeroActions } from '../../hero.svelte';
+	import { archiveModelGroups, defaultParameters } from '../../options';
 	import HourlyTable from '../../week/[location]/HourlyTable.svelte';
+	import ModelSelector from '../../week/[location]/ModelSelector.svelte';
 	import { neededHourlyApiVars } from '../../week/[location]/variables';
 	import DateRangeControls from './DateRangeControls.svelte';
 	import HistoricalDaily from './HistoricalDaily.svelte';
@@ -37,6 +42,8 @@
 	// the page cross-fade waits for this before revealing the new page
 	reportPageReady(() => result != null);
 
+	useHeroActions(heroActions);
+
 	let location = $derived(data.location);
 	$effect(() => {
 		storedLocation.set(data.location);
@@ -79,6 +86,11 @@
 		mounted = true;
 	});
 
+	let archiveModel = $state('best_match');
+	onMount(() => {
+		archiveModel = get(storedArchiveModel);
+	});
+
 	function onRangeChange(s: string, e: string) {
 		startDate = s;
 		endDate = e;
@@ -101,6 +113,8 @@
 		const s = startDate;
 		const e = endDate;
 		const vars = hourlyVars;
+		const model = archiveModel;
+		void model;
 		if (!mounted || !$isSupporter || !loc || !s || !e) return;
 
 		const version = ++requestVersion;
@@ -203,12 +217,27 @@
 	}
 </script>
 
+<!-- the reanalysis picker rides in the layout's location row -->
+{#snippet heroActions()}
+	<div class="lg:absolute lg:right-0 lg:top-0 flex w-full min-w-0 items-center gap-3 sm:w-auto">
+		<ModelSelector
+			selectedModel={archiveModel}
+			groups={archiveModelGroups}
+			label={m.model_archive()}
+			onModelChange={(model) => {
+				archiveModel = model;
+				storedArchiveModel.set(model);
+			}}
+		/>
+	</div>
+{/snippet}
+
 <svelte:head>
-	<title>Drizz.li | Historical weather</title>
+	<title>Drizz.li | {m.page_historical_subtitle()}</title>
 	<meta name="description" content="Past weather and climate-normal comparisons for any location" />
 </svelte:head>
 
-<PaywallGate feature="Historical weather">
+<PaywallGate feature={m.page_historical_subtitle()}>
 	<DateRangeControls
 		start={startDate}
 		end={endDate}