nearby

src/routes/weather/historical/[location]/HistoricalMeteograms.svelte

@@ -8,6 +8,7 @@
 	import { ChartContainer, downloadChartsPng } from '$lib/components/charts';
 
 	import { CanvasChart, groupRange } from '$lib/charts';
+	import * as m from '$lib/paraglide/messages';
 
 	import { getWeatherIconName } from '../../utils/weather-codes';
 	import { type FetchedHourly, type WeatherUnits } from '../../week/[location]/types';
@@ -121,22 +122,23 @@
 <section class="mt-8" transition:fade={{ duration: 200 }}>
 	<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
 		<h3 class="text-lg font-bold">
-			Meteograms <span class="font-semibold text-muted-foreground">– full range</span>
+			{m.meteograms_heading()}
+			<span class="font-semibold text-muted-foreground">{m.historical_full_range()}</span>
 		</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
 				>
-				+ scroll to zoom
+				{m.meteograms_zoom_hint_end()}
 			</span>
 			<button
 				type="button"
 				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}Rendering…{:else}PNG{/if}
 			</button>
@@ -148,7 +150,7 @@
 					class="flex cursor-pointer items-center gap-1.5 rounded-lg border border-primary/50 bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary transition-colors hover:bg-primary/15"
 					onclick={resetZoom}
 				>
-					Reset zoom
+					{m.reset_zoom()}
 				</button>
 			{/if}
 		</div>
@@ -158,7 +160,7 @@
 		<div
 			class="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground"
 		>
-			No meteograms configured. Add variables from the 7-day forecast page.
+			{m.meteograms_none_historical()}
 		</div>
 	{:else}
 		<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">