better cards, local weather codes

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

@@ -5,6 +5,7 @@
 
 	import { getTempStyle } from '../../utils/colors';
 	import { getWeatherIconName } from '../../utils/weather-codes';
+	import { precipIsSignificant, sunIsSignificant, windIsSignificant } from './significance';
 	import { type FetchedDaily, type WeatherUnits, getWindArrowRotation } from './types';
 
 	interface Props {
@@ -85,30 +86,6 @@
 		if (ratio >= 0.1) return '#fcd34d';
 		return '#d1d5db';
 	}
-
-	// ─── "Is this metric worth highlighting?" thresholds ────────────────────────
-	// Below these, the sun / precip / wind bits are greyed out so a card at a
-	// glance only emphasises what's actually notable that day.
-
-	function sunIsSignificant(sunshineSeconds: number | null, daylightSeconds: number): boolean {
-		if (daylightSeconds <= 0) return false;
-		return (sunshineSeconds ?? 0) / daylightSeconds >= 0.1;
-	}
-
-	function precipIsSignificant(sum: number | null, unit: string): boolean {
-		const min = unit === 'mm' ? 0.1 : 0.005; // anything above a trace
-		return (sum ?? 0) >= min;
-	}
-
-	function windIsSignificant(speed: number | null, gust: number | null, unit: string): boolean {
-		// separate bars: sustained wind ~ a light breeze (~12 km/h), gusts a bit
-		// higher (~22 km/h). If EITHER is met, the whole wind readout is coloured.
-		const windMin = unit === 'ms' ? 3 : unit === 'mph' ? 7 : unit === 'kn' ? 6 : 12;
-		const gustMin = unit === 'ms' ? 6 : unit === 'mph' ? 14 : unit === 'kn' ? 12 : 22;
-		const s = speed != null && !isNaN(speed) ? speed : -Infinity;
-		const g = gust != null && !isNaN(gust) ? gust : -Infinity;
-		return s >= windMin || g >= gustMin;
-	}
 </script>
 
 <!-- Shared filter: erodes the filled weather glyphs slightly so their
@@ -171,6 +148,8 @@
 					{@const tempMax = daily.daily.temperature_2m_max[index]}
 					{@const tempMin = daily.daily.temperature_2m_min[index]}
 					{@const wCode = daily.daily.weather_code[index]}
+					{@const dayCode = daily.dayCodes?.[index] ?? wCode}
+					{@const nightCode = daily.nightCodes?.[index] ?? wCode}
 					{@const sunDuration = daily.daily.sunshine_duration[index]}
 					{@const daylightSec = getDaylightSeconds(index)}
 					{@const sunColor = getSunshineColor(sunDuration, daylightSec)}
@@ -216,7 +195,10 @@
 									style="filter: url(#thin-day-icon)"
 								>
 									<use
-										xlink:href="/images/weather-icons/{getWeatherIconName(wCode, true)}.svg#Layer_1"
+										xlink:href="/images/weather-icons/{getWeatherIconName(
+											dayCode,
+											true
+										)}.svg#Layer_1"
 									></use>
 								</svg>
 								<svg
@@ -226,7 +208,7 @@
 								>
 									<use
 										xlink:href="/images/weather-icons/{getWeatherIconName(
-											wCode,
+											nightCode,
 											false
 										)}.svg#Layer_1"
 									></use>