zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show rain icon for likely hourly precipitation
All checks were successful
CI / Lint, typecheck and build (push) Successful in 9m55s
Details

Browse Source
This commit is contained in:
zv
2026-06-14 12:52:42 +02:00
parent bc8c346a7b
commit d572c9cc53
3 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/forecast/day-forecast-modal.tsx
View File

@@ -13,6 +13,7 @@ import {
formatForecastRainfall,
formatForecastTemperature,
formatForecastWind,
getEffectiveHourlyWeatherCode,
getForecastCondition,
isForecastNight,
} from "@/lib/forecast-utils";
@@ -150,21 +151,24 @@ export function DayForecastModal({
<h3 className="text-sm font-semibold">{t("forecast.hourlyForDay")}</h3>
<div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5">
<ul className="flex min-w-max gap-2">
{hours.map((hour) => (
<li
key={hour.time}
className="w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center"
title={getForecastCondition(hour.weatherCode, language)}
>
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
<ForecastIcon code={hour.weatherCode} isNight={isForecastNight(hour.time, day)} className="mx-auto my-3 size-6 text-accent" />
<p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language, temperatureUnit)}</p>
<p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent">
<Droplets className="size-3" />
{hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
</p>
</li>
))}
{hours.map((hour) => {
const weatherCode = getEffectiveHourlyWeatherCode(hour);
return (
<li
key={hour.time}
className="w-[5.2rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center"
title={getForecastCondition(weatherCode, language)}
>
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
<ForecastIcon code={weatherCode} isNight={isForecastNight(hour.time, day)} className="mx-auto my-3 size-6 text-accent" />
<p className="text-lg font-semibold tracking-tight">{formatForecastTemperature(hour.temperature, language, temperatureUnit)}</p>
<p className="mt-2 flex items-center justify-center gap-1 text-[0.66rem] text-accent">
<Droplets className="size-3" />
{hour.precipitationProbability === null ? "—" : `${hour.precipitationProbability}%`}
</p>
</li>
);
})}
</ul>
</div>
</Card>