nearby

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

@@ -39,6 +39,7 @@
 	import HourlyTable from './HourlyTable.svelte';
 	import MeteogramCharts from './MeteogramCharts.svelte';
 	import ModelSelector from './ModelSelector.svelte';
+	import NearbyCities from './NearbyCities.svelte';
 	import VariableSidebar from './VariableSidebar.svelte';
 	import { neededHourlyApiVars } from './variables';
 
@@ -326,7 +327,7 @@
 </script>
 
 <svelte:head>
-	<title>Drizz.li | Weather</title>
+	<title>Drizz.li | {m.page_week_title()}</title>
 	<link rel="canonical" href="https://drizz.li/weather/week" />
 	<meta name="description" content="7-day weather forecast with detailed hourly data" />
 </svelte:head>
@@ -362,7 +363,7 @@
 						class="cursor-pointer rounded-md border border-destructive/40 bg-background px-3 py-1 text-xs font-semibold text-destructive transition-colors hover:bg-destructive/10"
 						onclick={() => retryNonce++}
 					>
-						Try again
+						{m.action_try_again()}
 					</button>
 					{#if suggestedCity}
 						<a
@@ -383,7 +384,7 @@
 				</div>
 				{#if loadError.detail}
 					<details class="mt-2 text-xs text-destructive/70">
-						<summary class="cursor-pointer select-none">Technical details</summary>
+						<summary class="cursor-pointer select-none">{m.error_technical_details()}</summary>
 						<p class="mt-1 font-mono break-all">{loadError.detail}</p>
 					</details>
 				{/if}
@@ -535,6 +536,15 @@
 					<ChartContainer loading chartCount={enabledChartCount || 1} {chartHeight} />
 				</section>
 			{/if}
+
+			{#if selectedDayKey}
+				<NearbyCities
+					latitude={location.latitude}
+					longitude={location.longitude}
+					{selectedDayKey}
+					units={$storedUnits}
+				/>
+			{/if}
 		</div>
 	</div>
 </div>

src/routes/weather/week/[location]/ChartCustomizer.svelte

@@ -152,15 +152,15 @@
 		>
 			<div class="flex items-center justify-between border-b border-border px-5 py-4">
 				<div>
-					<h2 class="text-base font-bold">Customize meteograms</h2>
+					<h2 class="text-base font-bold">{m.customize_meteograms()}</h2>
 					<p class="text-xs text-muted-foreground">
-						Drag variables between charts to build your own layout.
+						{m.customizer_intro()}
 					</p>
 				</div>
 				<button
 					class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
 					onclick={onClose}
-					aria-label="Close"
+					aria-label={m.action_close()}
 				>
 					<svg
 						class="h-4.5 w-4.5"
@@ -212,12 +212,12 @@
 					>
 						<div class="mb-2 flex items-center justify-between">
 							<span class="text-[11px] font-bold tracking-wider text-primary uppercase"
-								>Chart {i + 1}</span
+								>{m.customizer_chart_n({ number: i + 1 })}</span
 							>
 							<button
 								class="cursor-pointer rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-destructive"
 								onclick={() => deletePanel(panel.id)}
-								aria-label="Delete chart {i + 1}"
+								aria-label={m.customizer_delete_chart({ number: i + 1 })}
 							>
 								<svg
 									class="h-4 w-4"
@@ -238,7 +238,7 @@
 										data-chip
 										role="button"
 										tabindex="0"
-										aria-label="Drag {def.label}"
+										aria-label={m.customizer_drag({ variable: def.label })}
 										class="flex cursor-grab touch-none items-center gap-1.5 rounded-lg border border-border bg-background py-1.5 pr-1 pl-2.5 text-sm shadow-sm select-none active:cursor-grabbing {dragKey ===
 										key
 											? 'opacity-30'
@@ -257,7 +257,7 @@
 											class="ml-0.5 flex h-5 w-5 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground"
 											onpointerdown={(e) => e.stopPropagation()}
 											onclick={() => removeVar(key)}
-											aria-label="Remove {def.label}"
+											aria-label={m.customizer_remove({ variable: def.label })}
 										>
 											<svg
 												class="h-3.5 w-3.5"
@@ -274,7 +274,7 @@
 							{/each}
 							{#if panel.variables.length === 0}
 								<span class="self-center text-xs text-muted-foreground italic"
-									>Drop variables here</span
+									>{m.customizer_drop_here()}</span
 								>
 							{/if}
 						</div>
@@ -285,12 +285,12 @@
 					class="w-full cursor-pointer rounded-xl border-2 border-dashed border-border py-2.5 text-sm font-semibold text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground"
 					onclick={addPanel}
 				>
-					+ Add chart
+					{m.customizer_add_chart()}
 				</button>
 
 				<div>
 					<h3 class="mb-2 text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
-						Available variables
+						{m.customizer_available()}
 					</h3>
 					<div
 						data-zone="pool"
@@ -304,7 +304,7 @@
 								data-chip
 								role="button"
 								tabindex="0"
-								aria-label="Drag {def.label}"
+								aria-label={m.customizer_drag({ variable: def.label })}
 								class="flex cursor-grab touch-none items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1.5 text-sm text-muted-foreground shadow-sm select-none active:cursor-grabbing {dragKey ===
 								def.key
 									? 'opacity-30'
@@ -321,7 +321,7 @@
 						{/each}
 						{#if availableVars.length === 0}
 							<span class="self-center text-xs text-muted-foreground italic"
-								>All variables are in use</span
+								>{m.customizer_all_in_use()}</span
 							>
 						{/if}
 					</div>
@@ -333,13 +333,13 @@
 					class="cursor-pointer text-xs font-medium text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline"
 					onclick={resetLayout}
 				>
-					Reset to defaults
+					{m.action_reset_defaults()}
 				</button>
 				<button
 					class="cursor-pointer rounded-lg bg-primary px-4 py-1.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90"
 					onclick={onClose}
 				>
-					Done
+					{m.action_done()}
 				</button>
 			</div>
 		</div>

src/routes/weather/week/[location]/DailyCards.svelte

@@ -3,6 +3,8 @@
 
 	import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';
 
+	import * as m from '$lib/paraglide/messages';
+
 	import { getTempStyle } from '../../utils/colors';
 	import { getWeatherIconName } from '../../utils/weather-codes';
 	import { precipIsSignificant, sunIsSignificant, windIsSignificant } from './significance';
@@ -118,7 +120,7 @@
 					type="button"
 					class="mr-4 flex w-24 shrink-0 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-border/70 bg-card/40 px-2 text-muted-foreground transition-colors hover:border-primary/50 hover:bg-primary/5 hover:text-foreground"
 					onclick={onExtendPast}
-					aria-label="Load recent past days"
+					aria-label={m.strip_past_aria()}
 				>
 					<svg
 						class="h-6 w-6"
@@ -135,7 +137,7 @@
 						<path stroke-linecap="round" stroke-linejoin="round" d="M14 13l-3 3 3 3" />
 					</svg>
 					<span class="text-center text-[11px] leading-tight font-semibold">
-						Past<br />3 days
+						{m.daycards_past()}
 					</span>
 				</button>
 			{/if}
@@ -317,7 +319,7 @@
 						type="button"
 						class="day-card-btn flex w-24 shrink-0 cursor-pointer flex-col items-center justify-center gap-2 self-stretch rounded-2xl border border-dashed border-border/70 bg-card/40 px-2 text-muted-foreground transition-colors hover:border-primary/50 hover:bg-primary/5 hover:text-foreground md:hidden"
 						onclick={onExtend}
-						aria-label="Load the longer-range forecast"
+						aria-label={m.strip_extend_aria()}
 					>
 						<svg
 							class="h-6 w-6"
@@ -334,7 +336,7 @@
 							<path stroke-linecap="round" stroke-linejoin="round" d="M12 14v4m-2-2h4" />
 						</svg>
 						<span class="text-center text-[11px] leading-tight font-semibold">
-							Load<br />15 days
+							{m.daycards_load_15()}
 						</span>
 					</button>
 				{/if}
@@ -349,7 +351,7 @@
 			type="button"
 			class="mt-2 mb-3 hidden w-20 shrink-0 cursor-pointer flex-col items-center justify-center gap-2 self-stretch rounded-2xl border border-dashed border-border/70 bg-card/40 px-2 text-muted-foreground transition-colors hover:border-primary/50 hover:bg-primary/5 hover:text-foreground md:mt-5 md:mb-11 md:flex md:w-24"
 			onclick={onExtend}
-			aria-label="Load the longer-range forecast"
+			aria-label={m.strip_extend_aria()}
 		>
 			<svg
 				class="h-6 w-6"
@@ -365,7 +367,8 @@
 				/>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M12 14v4m-2-2h4" />
 			</svg>
-			<span class="text-center text-[11px] leading-tight font-semibold"> Load<br />15 days </span>
+			<span class="text-center text-[11px] leading-tight font-semibold">{m.daycards_load_15()}</span
+			>
 		</button>
 	{/if}
 </div>

src/routes/weather/week/[location]/HourlyTable.svelte

@@ -451,7 +451,7 @@
 					<button
 						class="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-[13px] font-semibold text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground"
 						onclick={onCustomize}
-						aria-label="Customize variables"
+						aria-label={m.table_customize()}
 					>
 						<!-- sliders icon -->
 						<svg
@@ -466,13 +466,13 @@
 								d="M4 6h9m5 0h2M4 12h2m5 0h9M4 18h9m5 0h2M13 4.5v3M6 10.5v3M18 16.5v3"
 							/>
 						</svg>
-						<span class="hidden sm:inline">Variables</span>
+						<span class="hidden sm:inline">{m.hourly_variables()}</span>
 					</button>
 				{/if}
 				<div
 					class="inline-flex items-center rounded-lg bg-muted p-0.5 text-[13px] font-semibold"
 					role="group"
-					aria-label="Hourly interval"
+					aria-label={m.table_interval_aria()}
 				>
 					{#each [3, 1] as interval (interval)}
 						<button
@@ -584,7 +584,7 @@
 										class="absolute bottom-0.5 z-15 -translate-x-1/2 rounded-full bg-red-500 px-1.5 py-px text-[9px] font-bold tracking-wide whitespace-nowrap text-white uppercase shadow-sm"
 										style="left:{nowPercent}%"
 									>
-										Now
+										{m.table_now()}
 									</span>
 								{/if}
 								<!-- Hour labels -->

src/routes/weather/week/[location]/MeteogramCharts.svelte

@@ -231,7 +231,7 @@
 		</h3>
 		<div class="flex flex-wrap items-center gap-3">
 			<span class="hidden text-xs text-muted-foreground md:inline">
-				drag or
+				{m.meteograms_zoom_hint()}
 				<kbd class="rounded border border-border bg-muted px-1 py-0.5 font-sans text-[10px]"
 					>Ctrl</kbd
 				>
@@ -273,7 +273,7 @@
 				class="flex cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-xs font-semibold text-muted-foreground transition-colors hover:border-primary/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
 				disabled={liveCharts.length === 0 || downloadingPng}
 				onclick={downloadPng}
-				title="Download meteogram as PNG image"
+				title={m.chart_download()}
 			>
 				{#if downloadingPng}
 					<svg
@@ -330,9 +330,10 @@
 		<div
 			class="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground"
 		>
-			No meteograms configured, <button
+			{m.meteograms_none_before()}
+			<button
 				class="cursor-pointer font-semibold text-primary underline-offset-2 hover:underline"
-				onclick={() => (customizerOpen = true)}>add some variables</button
+				onclick={() => (customizerOpen = true)}>{m.meteograms_none_action()}</button
 			>.
 		</div>
 	{:else}

src/routes/weather/week/[location]/ModelSelector.svelte

@@ -43,7 +43,7 @@
 	}}
 >
 	<Select.Trigger
-		aria-label="{label} selection"
+		aria-label={m.model_selector_aria({ label })}
 		class="group h-auto min-h-12 min-w-0 flex-1 cursor-pointer gap-2.5 rounded-xl border-2 border-primary/35 bg-card py-1.5 ps-2.5 shadow-sm transition-colors hover:border-primary/70 hover:shadow-md data-[size=default]:h-auto data-[state=open]:border-primary sm:min-h-14 sm:gap-3 sm:py-2 sm:min-w-72 sm:flex-none"
 	>
 		<div
@@ -99,7 +99,9 @@
 									{mo.resolution}{mo.update ? ` · updated ${mo.update}` : ''}
 								</span>
 							{:else if mo.value === 'best_match'}
-								<span class="text-[11px] text-muted-foreground">Automatic selection</span>
+								<span class="text-[11px] text-muted-foreground"
+									>{m.model_automatic_selection()}</span
+								>
 							{/if}
 						</div>
 					</Select.Item>

src/routes/weather/week/[location]/NearbyCities.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	import { buildLocationRoute } from '$lib/utils/location';
+
+	import { href } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';
+	import { getLocale } from '$lib/paraglide/runtime';
+	import { type NearbyCity, findNearbyCities } from '$lib/services/nearby-cities';
+	import { type NearbyDaily, fetchNearbyDaily } from '$lib/services/weather';
+
+	import { getWeatherIconName } from '../../utils/weather-codes';
+
+	import type { UnitPrefs } from '$lib/stores/settings';
+
+	interface Props {
+		latitude: number;
+		longitude: number;
+		/** "yyyy-MM-dd" of the day the rest of the page is showing */
+		selectedDayKey: string;
+		units: UnitPrefs;
+	}
+
+	let { latitude, longitude, selectedDayKey, units }: Props = $props();
+
+	const COUNT = 10;
+
+	let cities = $state<NearbyCity[]>([]);
+	let daily = $state<(NearbyDaily | null)[]>([]);
+	let failed = $state(false);
+
+	// Country names come free and localized from the platform; the flag images
+	// are the same set the header uses.
+	let countryNames = $derived(new Intl.DisplayNames([getLocale()], { type: 'region' }));
+	const countryName = (code: string) => {
+		try {
+			return countryNames.of(code) ?? code;
+		} catch {
+			return code;
+		}
+	};
+
+	// One request covers the whole strip's date range, so clicking through the
+	// days re-reads what is already here instead of refetching ten cities.
+	$effect(() => {
+		const lat = latitude;
+		const lon = longitude;
+		const unitPrefs = { ...units };
+		let cancelled = false;
+
+		cities = [];
+		daily = [];
+		failed = false;
+
+		(async () => {
+			try {
+				const found = await findNearbyCities(lat, lon, COUNT);
+				if (cancelled) return;
+				cities = found;
+
+				const snapshots = await fetchNearbyDaily({ points: found, ...unitPrefs });
+				if (cancelled) return;
+				daily = snapshots;
+			} catch {
+				if (!cancelled) failed = true;
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const dayFor = (index: number) => daily[index]?.byDate[selectedDayKey];
+
+	const temp = (value: number | undefined) =>
+		value == null || !Number.isFinite(value) ? '–' : `${Math.round(value)}°`;
+
+	const distance = (km: number) =>
+		units.wind_speed_unit === 'mph' ? `${Math.round(km * 0.621371)} mi` : `${Math.round(km)} km`;
+</script>
+
+{#if cities.length > 0 && !failed}
+	<section class="mt-8" in:fade={{ duration: 200 }}>
+		<div class="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+			<h2 class="text-lg font-semibold">{m.nearby_cities_title()}</h2>
+			<p class="text-xs text-muted-foreground">{m.nearby_cities_subtitle()}</p>
+		</div>
+
+		<div
+			class="-mx-3 grid grid-cols-2 gap-px overflow-hidden border-y border-border/70 bg-border/70 sm:grid-cols-3 md:mx-0 md:rounded-2xl md:border lg:grid-cols-5"
+		>
+			{#each cities as city, i (city.id)}
+				{@const day = dayFor(i)}
+				<a
+					href={href('/weather/week/[location]', {
+						location: buildLocationRoute({
+							id: city.id,
+							name: city.name,
+							latitude: city.latitude,
+							longitude: city.longitude,
+							population: city.population,
+							feature_code: 'PPL'
+						})
+					})}
+					class="group flex items-center gap-2 bg-card px-3 py-2.5 transition-colors hover:bg-muted/60"
+					title="{city.name}, {countryName(city.countryCode)}"
+				>
+					<svg class="shrink-0 fill-foreground/80" width="34px" height="34px">
+						{#if day}
+							<use
+								xlink:href="/images/weather-icons/{getWeatherIconName(
+									day.weatherCode,
+									true
+								)}.svg#Layer_1"
+							></use>
+						{/if}
+					</svg>
+					<div class="min-w-0 flex-1">
+						<div class="truncate text-sm font-medium group-hover:underline">{city.name}</div>
+						<div class="text-[11px] text-muted-foreground">
+							{distance(city.distanceKm)} · {countryName(city.countryCode)}
+						</div>
+					</div>
+					<div class="text-right text-sm tabular-nums">
+						<div class="font-semibold">{temp(day?.max)}</div>
+						<div class="text-[11px] text-muted-foreground">{temp(day?.min)}</div>
+					</div>
+				</a>
+			{/each}
+		</div>
+	</section>
+{/if}

src/routes/weather/week/[location]/VariableSidebar.svelte

@@ -12,6 +12,8 @@
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { Label } from '$lib/components/ui/label';
 
+	import * as m from '$lib/paraglide/messages';
+
 	interface Props {
 		open: boolean;
 		onClose: () => void;
@@ -81,16 +83,16 @@
 		<aside
 			class="absolute inset-y-0 right-0 flex w-80 max-w-[90vw] flex-col overflow-y-auto border-l border-border bg-card shadow-xl"
 			transition:fly={{ x: 320, duration: 200, opacity: 1 }}
-			aria-label="Variable selection"
+			aria-label={m.variables_aria()}
 		>
 			<div
 				class="sticky top-0 flex items-center justify-between border-b border-border bg-card px-5 py-4"
 			>
-				<h2 class="text-base font-bold">Variables</h2>
+				<h2 class="text-base font-bold">{m.hourly_variables()}</h2>
 				<button
 					class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
 					onclick={onClose}
-					aria-label="Close variable selection"
+					aria-label={m.variables_close()}
 				>
 					<svg
 						class="h-4.5 w-4.5"
@@ -107,7 +109,7 @@
 			<div class="flex flex-1 flex-col gap-6 px-5 py-4">
 				<section>
 					<h3 class="mb-2 text-[11px] font-bold tracking-wider text-primary uppercase">
-						Hourly table
+						{m.variables_table_section()}
 					</h3>
 					<div class="flex flex-col gap-1">
 						{#each tableRowOrder as key, i (key)}
@@ -129,7 +131,7 @@
 										class="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
 										onclick={() => moveRow(key, -1)}
 										disabled={i === 0}
-										aria-label="Move {tableVariableLabels[key] ?? key} up"
+										aria-label={m.variables_move_up({ variable: tableVariableLabels[key] ?? key })}
 									>
 										<svg
 											class="h-3.5 w-3.5"
@@ -145,7 +147,9 @@
 										class="flex h-6 w-6 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30"
 										onclick={() => moveRow(key, 1)}
 										disabled={i === tableRowOrder.length - 1}
-										aria-label="Move {tableVariableLabels[key] ?? key} down"
+										aria-label={m.variables_move_down({
+											variable: tableVariableLabels[key] ?? key
+										})}
 									>
 										<svg
 											class="h-3.5 w-3.5"
@@ -164,8 +168,9 @@
 				</section>
 
 				<p class="text-xs text-muted-foreground">
-					Meteogram variables are configured with the <span class="font-semibold">Customize</span>
-					button above the charts.
+					{m.variables_charts_hint_before()}
+					<span class="font-semibold">{m.meteograms_customize()}</span>
+					{m.variables_charts_hint_after()}
 				</p>
 			</div>
 
@@ -174,7 +179,7 @@
 					class="cursor-pointer text-xs font-medium text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline"
 					onclick={resetDefaults}
 				>
-					Reset to defaults
+					{m.action_reset_defaults()}
 				</button>
 			</div>
 		</aside>