fix: show rain icon for likely hourly precipitation

components/forecast/forecast-panel.tsx

@@ -18,6 +18,7 @@ import {
   formatForecastTemperature,
   formatForecastWind,
   getDailyForecastForHour,
+  getEffectiveHourlyWeatherCode,
   getForecastCondition,
   getHourlyForecastForDay,
   getUpcomingHourlyForecast,
@@ -157,6 +158,7 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
                 <ul className="flex min-w-max gap-2">
                   {upcomingHours.map((hour, index) => {
                     const day = getDailyForecastForHour(forecast.daily, hour.time);
+                    const weatherCode = getEffectiveHourlyWeatherCode(hour);
                     return (
                       <motion.li
                         key={hour.time}
@@ -164,10 +166,10 @@ export function ForecastPanel({ latitude, longitude, locationName }: { latitude?
                         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)}
+                        title={getForecastCondition(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" />
+                        <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>
                         <div className="mt-3 hidden space-y-1.5 border-t border-border/65 pt-3 text-[0.66rem] text-muted lg:block">