feat: local time (#7)

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#7

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

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
+	import { formatZoned, getRelativeDayLabel, isSameDayInZone } from '$lib/utils/date';
+
 	import { getTempStyle } from '../../utils/colors';
 	import weatherCodes from '../../utils/weather-codes';
-	import { type FetchedDaily, type WeatherUnits, getDayLabel, getWindArrowRotation } from './types';
+	import { type FetchedDaily, type WeatherUnits, getWindArrowRotation } from './types';
 
 	interface Props {
 		daily: FetchedDaily | null;
@@ -14,8 +16,6 @@
 
 	let { daily, selectedDay, units, onSelectDay }: Props = $props();
 
-	const today = new Date();
-
 	function getDaylightSeconds(index: number): number {
 		if (!daily) return 0;
 		const sunriseTs = daily.daily.sunrise[index];
@@ -43,7 +43,7 @@
 	<div class="flex gap-1 overflow-x-auto pb-1" style="scrollbar-width: thin">
 		{#if daily}
 			{#each daily.dailyDates as time, index (index)}
-				{@const selected = time.getDate() === selectedDay.getDate()}
+				{@const selected = isSameDayInZone(time, selectedDay, daily.timezone)}
 				{@const tempMax = daily.daily.temperature_2m_max[index]}
 				{@const tempMin = daily.daily.temperature_2m_min[index]}
 				{@const wCode = daily.daily.weather_code[index]}
@@ -68,10 +68,10 @@
 					>
 						<!-- Day label -->
 						<span class="text-sm font-bold tracking-wide">
-							{time.toLocaleDateString('en-GB', { weekday: 'short' }).toUpperCase()}
+							{formatZoned(time, daily.timezone, 'EEE').toUpperCase()}
 						</span>
 						<span class="text-[11px] text-muted-foreground">
-							{getDayLabel(time, today)}
+							{getRelativeDayLabel(time, daily.timezone)}
 						</span>
 
 						<!-- Weather icon -->