fallback and 404

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

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { SvelteDate } from 'svelte/reactivity';
+	import { get } from 'svelte/store';
 
-	import { storedLocation } from '$lib/stores/settings';
+	import { storedLocation, storedModel, storedVariablePrefs } from '$lib/stores/settings';
+
+	import { ChartContainer } from '$lib/components/charts';
 
 	import { type WeekForecastResult, fetchWeekForecast } from '$lib/services/weather';
 
@@ -11,6 +14,7 @@
 	import HourlyTable from './HourlyTable.svelte';
 	import MeteogramCharts from './MeteogramCharts.svelte';
 	import ModelSelector from './ModelSelector.svelte';
+	import VariableSidebar from './VariableSidebar.svelte';
 
 	import type { PageData } from './$types';
 	import type { FetchedDaily, FetchedHourly } from './types';
@@ -22,6 +26,19 @@
 		...defaultParameters
 	});
 
+	let variableSidebarOpen = $state(false);
+
+	// Number of meteogram chart panels currently enabled: used to reserve the
+	// exact chart area height before data arrives (no layout shift)
+	let enabledChartCount = $derived.by(() => {
+		const on = (key: string) => $storedVariablePrefs.charts?.[key] ?? true;
+		return (
+			(on('temperature') || on('cloud_cover') ? 1 : 0) +
+			(on('precipitation') || on('precipitation_probability') ? 1 : 0) +
+			(on('wind') || on('humidity') ? 1 : 0)
+		);
+	});
+
 	// the URL is the source of truth: location comes from the load function,
 	// which is also correct on hydrated prerendered pages. The persisted store
 	// only mirrors it so the header and bare /weather/* redirects follow along.
@@ -47,6 +64,8 @@
 	};
 
 	onMount(() => {
+		// preselect the persisted model (client-only so prerendered HTML stays stable)
+		params.models = [get(storedModel)];
 		mounted = true;
 	});
 
@@ -131,14 +150,39 @@
 				</div>
 			</div>
 
-			<ModelSelector
-				selectedModel={params.models?.[0] ?? 'best_match'}
-				onModelChange={(model) => {
-					params.models = [model];
-				}}
-			/>
+			<div class="flex items-center gap-3">
+				<ModelSelector
+					selectedModel={params.models?.[0] ?? 'best_match'}
+					onModelChange={(model) => {
+						params.models = [model];
+						storedModel.set(model);
+					}}
+				/>
+				<button
+					class="flex h-11 cursor-pointer items-center gap-2 rounded-xl border-2 border-border bg-card px-3.5 text-sm font-semibold text-muted-foreground shadow-sm transition-colors hover:border-primary/50 hover:text-foreground"
+					onclick={() => (variableSidebarOpen = true)}
+					aria-label="Choose visible variables"
+				>
+					<!-- sliders icon -->
+					<svg
+						class="h-4.5 w-4.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="1.75"
+					>
+						<path
+							stroke-linecap="round"
+							d="M4 6h9m5 0h2M4 12h2m5 0h9M4 18h9m5 0h2M13 4.5v3M6 10.5v3M18 16.5v3"
+						/>
+					</svg>
+					<span class="hidden md:inline">Variables</span>
+				</button>
+			</div>
 		</div>
 
+		<VariableSidebar open={variableSidebarOpen} onClose={() => (variableSidebarOpen = false)} />
+
 		{#if loadError}
 			<div
 				class="mb-4 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
@@ -157,10 +201,18 @@
 				units={params}
 				locationName={location.name ?? ''}
 			/>
+		{:else}
+			<!-- placeholder with the table's approximate height: no layout shift -->
+			<div class="h-[430px] animate-pulse rounded-2xl border border-border/70 bg-card"></div>
 		{/if}
 
 		{#if fetchedHourly}
 			<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
+		{:else}
+			<!-- reserve the exact chart area height before the first fetch resolves -->
+			<section class="mt-8">
+				<ChartContainer loading chartCount={enabledChartCount || 1} chartHeight={300} />
+			</section>
 		{/if}
 	</div>
 </div>