fix: use IMGW Hybrid for current weather

components/dashboard/dashboard-page.tsx

@@ -11,6 +11,7 @@ import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
 import { ErrorState } from "@/components/states/error-state";
 import { useI18n } from "@/lib/i18n";
 import { useMeteoStationPositions } from "@/hooks/use-meteo-stations";
+import { useCurrentWeather } from "@/hooks/use-current-weather";
 import { ForecastPanel } from "@/components/forecast/forecast-panel";
 import { locateSynopStations } from "@/lib/location-utils";
 
@@ -20,23 +21,26 @@ export function DashboardPage() {
   const { data: positions = [] } = useMeteoStationPositions();
   const selectedStationId = useWeatherStore((state) => state.selectedStationId);
   const selectedLocation = useWeatherStore((state) => state.selectedLocation);
-  if (isPending) return <PageLoadingSkeleton />;
-  if (isError || !stations?.length) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
-  const selectedStation = stations.find((station) => station.id === selectedStationId)
-    ?? stations.find((station) => station.name === DEFAULT_STATION_NAME)
-    ?? stations[0];
-  const activeLocation = selectedLocation?.stationId === selectedStation.id ? selectedLocation : null;
-  const stationPosition = locateSynopStations(stations, positions).find((station) => station.id === selectedStation.id);
+  const selectedStation = stations?.find((station) => station.id === selectedStationId)
+    ?? stations?.find((station) => station.name === DEFAULT_STATION_NAME)
+    ?? stations?.[0];
+  const activeLocation = selectedLocation?.stationId === selectedStation?.id ? selectedLocation : null;
+  const stationPosition = selectedStation
+    ? locateSynopStations(stations ?? [], positions).find((station) => station.id === selectedStation.id)
+    : null;
   const hasActiveLocationCoordinates = Number.isFinite(activeLocation?.latitude) && Number.isFinite(activeLocation?.longitude);
   const forecastLatitude = hasActiveLocationCoordinates ? activeLocation?.latitude : stationPosition?.latitude;
   const forecastLongitude = hasActiveLocationCoordinates ? activeLocation?.longitude : stationPosition?.longitude;
-  const forecastLocationName = hasActiveLocationCoordinates ? activeLocation?.name ?? selectedStation.name : selectedStation.name;
+  const forecastLocationName = hasActiveLocationCoordinates ? activeLocation?.name ?? selectedStation?.name : selectedStation?.name;
+  const { data: currentWeather } = useCurrentWeather(forecastLatitude, forecastLongitude);
+  if (isPending) return <PageLoadingSkeleton />;
+  if (isError || !stations?.length || !selectedStation) return <ErrorState onRetry={() => refetch()} description={t("dashboard.error")} />;
 
   return (
     <div className="space-y-10">
       <LocationSearch stations={stations} positions={positions} />
-      <WeatherHero station={selectedStation} locationName={activeLocation?.name} distanceKm={activeLocation?.distanceKm} />
-      <ForecastPanel latitude={forecastLatitude} longitude={forecastLongitude} locationName={forecastLocationName} />
+      <WeatherHero station={selectedStation} currentWeather={currentWeather} locationName={activeLocation?.name} distanceKm={activeLocation?.distanceKm} />
+      <ForecastPanel latitude={forecastLatitude} longitude={forecastLongitude} locationName={forecastLocationName ?? selectedStation.name} />
       <FavoritesSection stations={stations} />
       <FeaturedStationsSection stations={stations} />
     </div>

components/weather/weather-effects.tsx

@@ -15,9 +15,16 @@ const stars = Array.from({ length: 16 }, (_, index) => ({
   delay: (index % 6) * 0.35,
 }));
 
-export function WeatherEffects({ station, mood }: { station: SynopStation; mood: WeatherMood }) {
+const rainDrops = Array.from({ length: 22 }, (_, index) => ({
+  left: `${(index * 43 + 7) % 101}%`,
+  delay: (index % 9) * 0.18,
+  duration: 0.8 + (index % 4) * 0.14,
+}));
+
+export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
   const reduceMotion = useReducedMotion();
   const isWindy = (station.windSpeed ?? 0) >= 8;
+  const isRaining = (precipitation10m ?? 0) > 0;
 
   return (
     <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
@@ -63,6 +70,23 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
           style={{ top: line.top, width: line.width }}
         />
       ))}
+      {isRaining && rainDrops.map((drop, index) => (
+        <motion.span
+          key={`rain-${index}`}
+          initial={{ y: "-12vh", opacity: 0 }}
+          animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
+          transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
+          className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
+          style={{ left: drop.left }}
+        />
+      ))}
+      {thunderstorm && (
+        <motion.div
+          animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
+          transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
+          className="absolute inset-0 bg-white"
+        />
+      )}
       {mood === "cold" && (
         <div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-cyan-100/20 to-transparent" />
       )}

components/weather/weather-hero.tsx

@@ -15,19 +15,30 @@ import {
   moodGradient,
 } from "@/lib/weather-utils";
 import type { SynopStation } from "@/types/imgw";
+import type { ImgwCurrentWeather } from "@/types/imgw-current";
 import { WeatherIcon } from "@/components/weather/weather-icon";
 import { WeatherEffects } from "@/components/weather/weather-effects";
 import { useI18n } from "@/lib/i18n";
 
-export function WeatherHero({ station, locationName, distanceKm }: { station: SynopStation; locationName?: string; distanceKm?: number }) {
+export function WeatherHero({ station, currentWeather, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; locationName?: string; distanceKm?: number }) {
   const { language, t } = useI18n();
-  const mood = getWeatherMoodFromData(station);
-  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
+  const displayedStation = currentWeather ? {
+    ...station,
+    measuredAt: currentWeather.measuredAt,
+    temperature: currentWeather.temperature,
+    windSpeed: currentWeather.windSpeed,
+    windDirection: currentWeather.windDirection,
+    humidity: currentWeather.humidity,
+    pressure: currentWeather.pressure,
+    rainfall: currentWeather.precipitation10m,
+  } : station;
+  const mood = getWeatherMoodFromData(displayedStation);
+  const feelsLike = currentWeather?.feelsLike ?? calculateFeelsLike(displayedStation.temperature, displayedStation.humidity, displayedStation.windSpeed);
   const metrics = [
-    { icon: Droplets, label: t("weather.humidity"), value: formatHumidity(station.humidity, language) },
-    { icon: Wind, label: t("weather.wind"), value: formatWind(station.windSpeed, null, language) },
-    { icon: Umbrella, label: t("weather.rainfallTotal"), value: formatRainfall(station.rainfall, language) },
-    { icon: Gauge, label: t("weather.pressure"), value: formatPressure(station.pressure, language) },
+    { icon: Droplets, label: t("weather.humidity"), value: formatHumidity(displayedStation.humidity, language) },
+    { icon: Wind, label: t("weather.wind"), value: formatWind(displayedStation.windSpeed, null, language) },
+    { icon: Umbrella, label: currentWeather ? t("weather.rainfall10m") : t("weather.rainfallTotal"), value: formatRainfall(displayedStation.rainfall, language) },
+    { icon: Gauge, label: t("weather.pressure"), value: formatPressure(displayedStation.pressure, language) },
   ];
 
   return (
@@ -37,7 +48,7 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
       transition={{ duration: 0.55, ease: "easeOut" }}
       className={`relative isolate overflow-hidden rounded-[2rem] bg-gradient-to-br ${moodGradient(mood)} px-5 py-6 text-white shadow-[0_24px_75px_rgba(15,23,42,0.24)] sm:px-8 sm:py-8 lg:px-10`}
     >
-      <WeatherEffects station={station} mood={mood} />
+      <WeatherEffects station={displayedStation} mood={mood} precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
       <div className="absolute -right-20 -top-20 size-72 rounded-full bg-white/15 blur-3xl" />
       <div className="absolute -bottom-24 -left-16 size-72 rounded-full bg-cyan-200/15 blur-3xl" />
       <div className="relative z-10">
@@ -48,12 +59,12 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
         <div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
           <div>
             <div className="text-[5.8rem] font-medium leading-[0.85] tracking-[-0.11em] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-[8rem]">
-              {formatTemperature(station.temperature, language)}
+              {formatTemperature(displayedStation.temperature, language)}
             </div>
-            <p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(station, language)}</p>
-            <p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(station.measuredAt, language)}</p>
+            <p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(displayedStation, language, currentWeather?.condition)}</p>
+            <p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}{currentWeather ? ` · ${t("weather.hybridAnalysis")}` : ""}</p>
           </div>
-          <WeatherIcon mood={mood} className="mb-4 size-20 text-white/80 sm:size-28" />
+          <WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-white/80 sm:size-28" />
         </div>
         <div className="mt-8 grid grid-cols-2 gap-2.5 sm:mt-10 lg:grid-cols-4">
           {metrics.map(({ icon: Icon, label, value }) => (
@@ -63,10 +74,10 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
             </div>
           ))}
         </div>
-        {station.windDirection !== null && (
+        {displayedStation.windDirection !== null && (
           <p className="mt-4 flex items-center gap-1.5 text-xs text-white/70">
-            <Navigation className="size-3.5" style={{ transform: `rotate(${station.windDirection}deg)` }} />
-            {t("weather.windDirection")}: {station.windDirection}°
+            <Navigation className="size-3.5" style={{ transform: `rotate(${displayedStation.windDirection}deg)` }} />
+            {t("weather.windDirection")}: {displayedStation.windDirection}°
           </p>
         )}
       </div>

components/weather/weather-icon.tsx

@@ -1,8 +1,9 @@
-import { Cloud, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
+import { Cloud, CloudLightning, CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
 import type { WeatherMood } from "@/types/imgw";
+import type { CurrentWeatherCondition } from "@/types/imgw-current";
 
-export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
-  const Icon = {
+export function WeatherIcon({ mood, condition, className = "" }: { mood: WeatherMood; condition?: CurrentWeatherCondition; className?: string }) {
+  const Icon = condition === "thunderstorm" ? CloudLightning : condition === "rain" ? CloudRain : condition === "snow" ? Snowflake : {
     warm: ThermometerSun,
     cloudy: Cloud,
     wind: Wind,