darkmode

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

@@ -40,11 +40,10 @@
 	let fetchedHourly: FetchedHourly | null = $state(null);
 	let fetchedDaily: FetchedDaily | null = $state(null);
 
-	let meteogramCharts: MeteogramCharts | undefined = $state();
-
+	// 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());
-		meteogramCharts?.scrollToDay(date);
 	};
 
 	onMount(() => {
@@ -109,6 +108,37 @@
 
 <div class="week-page">
 	<div class="weather-content" style="min-height: 50vh">
+		<!-- Page hero: prominent location + weather model selection -->
+		<div class="mb-5 flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
+			<div class="flex min-w-0 items-center gap-3">
+				<img
+					class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
+					src="/images/country-flags/{(
+						location.country_code || 'united_nations'
+					).toLowerCase()}.svg"
+					alt={location.country ?? ''}
+				/>
+				<div class="min-w-0">
+					<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
+						{location.name}
+					</h1>
+					<p class="truncate text-sm text-muted-foreground">
+						{#if location.admin1}{location.admin1},
+						{/if}{location.country ?? ''}
+						<span class="mx-1 opacity-50">·</span>
+						7-day forecast
+					</p>
+				</div>
+			</div>
+
+			<ModelSelector
+				selectedModel={params.models?.[0] ?? 'best_match'}
+				onModelChange={(model) => {
+					params.models = [model];
+				}}
+			/>
+		</div>
+
 		{#if loadError}
 			<div
 				class="mb-4 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
@@ -130,20 +160,7 @@
 		{/if}
 
 		{#if fetchedHourly}
-			<MeteogramCharts
-				bind:this={meteogramCharts}
-				data={fetchedHourly}
-				{selectedDay}
-				units={params}
-				{loading}
-			/>
+			<MeteogramCharts data={fetchedHourly} {selectedDay} units={params} {loading} />
 		{/if}
-
-		<ModelSelector
-			selectedModel={params.models?.[0] ?? 'best_match'}
-			onModelChange={(model) => {
-				params.models = [model];
-			}}
-		/>
 	</div>
 </div>