revamp weather UI: cards, meteograms, units in header, location favorites and range controls

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

@@ -3,7 +3,7 @@
 	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
-	import { storedLocation, storedModel } from '$lib/stores/settings';
+	import { storedLocation, storedModel, storedUnits } from '$lib/stores/settings';
 
 	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
 	import { Checkbox } from '$lib/components/ui/checkbox';
@@ -63,6 +63,14 @@
 		models: ['ecmwf_ifs', 'meteofrance_seamless', 'ukmo_seamless', 'icon_seamless', 'gfs_seamless']
 	});
 
+	// units live in a persisted store; mirror them into params so a change
+	// re-runs the fetch effect (which reads params.*_unit)
+	$effect(() => {
+		params.temperature_unit = $storedUnits.temperature_unit;
+		params.wind_speed_unit = $storedUnits.wind_speed_unit;
+		params.precipitation_unit = $storedUnits.precipitation_unit;
+	});
+
 	// ─── Cached API Response ────────────────────────────────────────────────────
 
 	interface FetchedData {
@@ -268,9 +276,9 @@
 <div class="mt-6 md:mt-10">
 	<ChartToolbar charts={liveCharts} fileName="model-comparison">
 		{#snippet controls()}
-			<div class="flex gap-2">
+			<div class="flex items-center gap-2">
 				<Switch id="show_legend" name="Show legend" bind:checked={showLegend} />
-				<Label for="show_legend" class="mb-0.5 cursor-pointer text-lg">Show legend</Label>
+				<Label for="show_legend" class="cursor-pointer text-base leading-none">Show legend</Label>
 			</div>
 		{/snippet}
 	</ChartToolbar>