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

fix: show night icons for hourly forecast
All checks were successful
CI / Lint, typecheck and build (push) Successful in 10m2s
Details

Browse Source
This commit is contained in:
zv
2026-06-13 21:27:41 +02:00
parent 83c0657296
commit 5a8e39dbe2
4 changed files with 58 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/forecast/forecast-panel.tsx
View File

@@ -17,9 +17,11 @@ import {
formatForecastRainfall,
formatForecastTemperature,
formatForecastWind,
getDailyForecastForHour,
getForecastCondition,
getHourlyForecastForDay,
getUpcomingHourlyForecast,
isForecastNight,
} from "@/lib/forecast-utils";
import { useWeatherStore } from "@/lib/store";
import type { DailyForecast, HourlyForecast } from "@/types/forecast";
@@ -153,35 +155,38 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
<h3 className="flex items-center gap-2 text-sm font-semibold"><Clock3 className="size-4 text-accent" />{t("forecast.hourly")}</h3>
<div className="weather-scrollbar -mx-4 mt-4 overflow-x-auto px-4 pb-2 sm:-mx-5 sm:px-5 lg:mt-5">
<ul className="flex min-w-max gap-2">
{upcomingHours.map((hour, index) => (
<motion.li
key={hour.time}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: Math.min(index * 0.018, 0.3), duration: 0.25 }}
className="w-[4.6rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center lg:w-[5.5rem] lg:py-4"
title={getForecastCondition(hour.weatherCode, language)}
>
<p className="text-xs font-medium text-muted">{formatHour(hour.time)}</p>
<ForecastIcon code={hour.weatherCode} 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>
<div className="mt-3 hidden space-y-1.5 border-t border-border/65 pt-3 text-[0.66rem] text-muted lg:block">
<p className="flex items-center justify-center gap-1" title={t("forecast.apparentTemperature")}>
<ThermometerSun className="size-3 text-accent" />
{formatForecastTemperature(hour.feelsLike, language, temperatureUnit)}
</p>
<p className="flex items-center justify-center gap-1" title={t("weather.wind")}>
<Wind className="size-3 text-accent" />
{formatForecastWind(hour.windSpeed, language, windSpeedUnit)}
</p>
<p className="flex items-center justify-center gap-1" title={t("forecast.precipitation")}>
<CloudRain className="size-3 text-accent" />
{formatForecastRainfall(hour.precipitation, language)}
</p>
</div>
</motion.li>
))}
{upcomingHours.map((hour, index) => {
const day = getDailyForecastForHour(forecast.daily, hour.time);
return (
<motion.li
key={hour.time}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: Math.min(index * 0.018, 0.3), duration: 0.25 }}
className="w-[4.6rem] rounded-card border border-border/60 bg-surface-muted/55 px-2 py-3 text-center lg:w-[5.5rem] lg:py-4"
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>
<div className="mt-3 hidden space-y-1.5 border-t border-border/65 pt-3 text-[0.66rem] text-muted lg:block">
<p className="flex items-center justify-center gap-1" title={t("forecast.apparentTemperature")}>
<ThermometerSun className="size-3 text-accent" />
{formatForecastTemperature(hour.feelsLike, language, temperatureUnit)}
</p>
<p className="flex items-center justify-center gap-1" title={t("weather.wind")}>
<Wind className="size-3 text-accent" />
{formatForecastWind(hour.windSpeed, language, windSpeedUnit)}
</p>
<p className="flex items-center justify-center gap-1" title={t("forecast.precipitation")}>
<CloudRain className="size-3 text-accent" />
{formatForecastRainfall(hour.precipitation, language)}
</p>
</div>
</motion.li>
);
})}
</ul>
</div>
<HourlyForecastSummary hours={upcomingHours} />