fix local times

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { pad } from '$lib/utils/index';
+	import { formatUtcOffset, formatZoned, getZonedHour, isSameDayInZone } from '$lib/utils/date';
 
 	import { getTempStyle } from '../../utils/colors';
 	import weatherCodes from '../../utils/weather-codes';
@@ -10,8 +10,7 @@
 		getPrecipUnit,
 		getTempUnit,
 		getWindArrowRotation,
-		getWindUnit,
-		isCurrentHour
+		getWindUnit
 	} from './types';
 
 	interface Props {
@@ -54,36 +53,31 @@
 	}
 
 	function timeToFraction(date: Date): number {
-		const totalMinutes = date.getHours() * 60 + date.getMinutes();
-		const firstMin = cellData[0].date.getHours() * 60;
+		const tz = data.timezone;
+		const hour = getZonedHour(date, tz);
+		const minutes = parseInt(formatZoned(date, tz, 'mm'), 10);
+		const totalMinutes = hour * 60 + minutes;
+
+		const firstHour = getZonedHour(cellData[0].date, tz);
+		const firstMin = firstHour * 60;
+
 		const step = is3h ? 3 : 1;
-		const lastMin = cellData[cellData.length - 1].date.getHours() * 60 + step * 60;
+		const lastHour = getZonedHour(cellData[cellData.length - 1].date, tz);
+		const lastMin = lastHour * 60 + step * 60;
+
 		const range = lastMin - firstMin;
 		if (range <= 0) return 0;
 		return Math.max(0, Math.min(1, (totalMinutes - firstMin) / range));
 	}
 
 	function formatTime(date: Date): string {
-		return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+		return formatZoned(date, data.timezone, 'HH:mm');
 	}
 
-	function formatTimezone(offsetSeconds: number): string {
-		const sign = offsetSeconds >= 0 ? '+' : '-';
-		const abs = Math.abs(offsetSeconds);
-		const hours = Math.floor(abs / 3600);
-		const minutes = Math.floor((abs % 3600) / 60);
-		return minutes === 0 ? `UTC${sign}${hours}` : `UTC${sign}${hours}:${pad(minutes)}`;
-	}
-
-	let timezoneLabel = $derived(formatTimezone(data.utc_offset_seconds));
+	let timezoneLabel = $derived(formatUtcOffset(data.utc_offset_seconds));
 
 	function findDailyIndex(date: Date): number {
-		return daily.dailyDates.findIndex(
-			(dd) =>
-				dd.getDate() === date.getDate() &&
-				dd.getMonth() === date.getMonth() &&
-				dd.getFullYear() === date.getFullYear()
-		);
+		return daily.dailyDates.findIndex((dd) => isSameDayInZone(dd, date, data.timezone));
 	}
 
 	function isDaytime(hourDate: Date): boolean {
@@ -97,13 +91,9 @@
 	}
 
 	function getDayIndices(dates: Date[], day: Date): number[] {
+		const tz = data.timezone;
 		return dates.reduce<number[]>((acc, d, i) => {
-			if (
-				d.getDate() === day.getDate() &&
-				d.getMonth() === day.getMonth() &&
-				d.getFullYear() === day.getFullYear() &&
-				(hourlyInterval === 1 || d.getHours() % 3 === 0)
-			) {
+			if (isSameDayInZone(d, day, tz) && (hourlyInterval === 1 || getZonedHour(d, tz) % 3 === 0)) {
 				acc.push(i);
 			}
 			return acc;
@@ -148,12 +138,19 @@
 	let daytimeFlags = $derived(dayIdx.map((idx) => isDaytime(data.hourlyDates[idx])));
 
 	let cellData = $derived(
-		dayIdx.map((idx, i) => ({
-			idx,
-			date: data.hourlyDates[idx],
-			isNow: isCurrentHour(data.hourlyDates[idx], today),
-			isDaytime: daytimeFlags[i]
-		}))
+		dayIdx.map((idx, i) => {
+			const date = data.hourlyDates[idx];
+			const tz = data.timezone;
+			const isNow =
+				formatZoned(date, tz, 'yyyy-MM-dd HH') === formatZoned(today, tz, 'yyyy-MM-dd HH');
+
+			return {
+				idx,
+				date,
+				isNow,
+				isDaytime: daytimeFlags[i]
+			};
+		})
 	);
 
 	let sunrisePercent = $derived(
@@ -195,7 +192,7 @@
 <!-- Header -->
 <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
 	<h3 class="text-lg font-bold">
-		{selectedDay.toLocaleDateString('en-GB', { weekday: 'long' })} – Hourly
+		{formatZoned(selectedDay, data.timezone, 'EEEE')} – Hourly
 		<span class="ml-1 text-xs font-normal text-muted-foreground">({timezoneLabel})</span>
 	</h3>
 	<div class="flex items-center gap-1.5 text-[13px] font-semibold">
@@ -293,10 +290,12 @@
 								style="left:{leftPct}%;width:{widthPct}%"
 							>
 								{#if is3h}
-									{pad(cell.date.getHours())}
+									{formatZoned(cell.date, data.timezone, 'HH')}
 								{:else}
 									<span class="inline-flex items-baseline gap-1">
-										<span class="text-[11px] font-semibold">{pad(cell.date.getHours())}</span>
+										<span class="text-[11px] font-semibold"
+											>{formatZoned(cell.date, data.timezone, 'HH')}</span
+										>
 										<sup
 											class="text-[9px] font-semibold text-muted-foreground leading-none align-baseline"
 											>00</sup