feat: build production-ready wtr weather PWA

components/weather/current-conditions-card.tsx

@@ -0,0 +1,24 @@
+import { CloudSun, Droplets, Gauge, Navigation, Thermometer, Umbrella, Wind } from "lucide-react";
+import { calculateFeelsLike, formatHumidity, formatPressure, formatRainfall, formatTemperature, formatWind, getWindDirection } from "@/lib/weather-utils";
+import type { SynopStation } from "@/types/imgw";
+import { MetricCard } from "@/components/weather/metric-card";
+
+export function CurrentConditionsCard({ station }: { station: SynopStation }) {
+  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
+  const metrics = [
+    { icon: Thermometer, label: "Odczuwalna", value: formatTemperature(feelsLike), detail: "Wartość obliczana, gdy warunki na to pozwalają" },
+    { icon: Droplets, label: "Wilgotność", value: formatHumidity(station.humidity), detail: "Wilgotność względna powietrza" },
+    { icon: Gauge, label: "Ciśnienie", value: formatPressure(station.pressure), detail: "Ciśnienie atmosferyczne" },
+    { icon: Wind, label: "Prędkość wiatru", value: formatWind(station.windSpeed), detail: "Bieżący odczyt IMGW" },
+    { icon: Navigation, label: "Kierunek wiatru", value: station.windDirection === null ? "Brak danych" : `${station.windDirection}° ${getWindDirection(station.windDirection)}`, detail: "Kierunek napływu wiatru" },
+    { icon: Umbrella, label: "Suma opadu", value: formatRainfall(station.rainfall), detail: "Suma opadu z pomiaru IMGW" },
+    { icon: CloudSun, label: "Temperatura", value: formatTemperature(station.temperature), detail: "Temperatura powietrza" },
+  ];
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+      {metrics.map((metric, index) => <MetricCard {...metric} index={index} key={metric.label} />)}
+    </div>
+  );
+}
+
+export const WeatherDetailsGrid = CurrentConditionsCard;

components/weather/favorites-section.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Heart } from "lucide-react";
+import { useWeatherStore } from "@/lib/store";
+import type { SynopStation } from "@/types/imgw";
+import { StationCard } from "@/components/weather/station-card";
+
+export function FavoritesSection({ stations }: { stations: SynopStation[] }) {
+  const favoriteIds = useWeatherStore((state) => state.favorites);
+  const favorites = stations.filter((station) => favoriteIds.includes(station.id));
+  if (!favorites.length) return (
+    <section className="glass-subtle rounded-[1.75rem] p-5">
+      <div className="flex items-center gap-2 text-sm font-semibold"><Heart className="size-4 text-rose-500" />Ulubione lokalizacje</div>
+      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">Dodaj stacje do ulubionych, aby mieć ich odczyty pod ręką.</p>
+    </section>
+  );
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center gap-2 text-sm font-semibold"><Heart className="size-4 fill-rose-500 text-rose-500" />Ulubione lokalizacje</div>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">{favorites.map((station, index) => <StationCard key={station.id} station={station} index={index} />)}</div>
+    </section>
+  );
+}

components/weather/metric-card.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { LucideIcon } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+export function MetricCard({ icon: Icon, label, value, detail, index = 0 }: { icon: LucideIcon; label: string; value: string; detail?: string; index?: number }) {
+  return (
+    <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.04, duration: 0.35 }}>
+      <Card className="h-full p-4 sm:p-5">
+        <div className="flex items-center gap-2 text-xs font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+          <Icon className="size-4 text-sky-600 dark:text-sky-300" />
+          {label}
+        </div>
+        <p className="mt-4 text-xl font-semibold tracking-tight">{value}</p>
+        {detail && <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{detail}</p>}
+      </Card>
+    </motion.div>
+  );
+}

components/weather/station-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Droplets, Gauge, Heart, Wind } from "lucide-react";
+import { useWeatherStore } from "@/lib/store";
+import { formatHumidity, formatPressure, formatTemperature, getWeatherMoodFromData } from "@/lib/weather-utils";
+import type { SynopStation } from "@/types/imgw";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { WeatherIcon } from "@/components/weather/weather-icon";
+import { cn } from "@/lib/utils";
+
+export function StationCard({ station, index = 0 }: { station: SynopStation; index?: number }) {
+  const favorites = useWeatherStore((state) => state.favorites);
+  const toggleFavorite = useWeatherStore((state) => state.toggleFavorite);
+  const selectStation = useWeatherStore((state) => state.selectStation);
+  const favorite = favorites.includes(station.id);
+  const mood = getWeatherMoodFromData(station);
+  const compactWind = station.windSpeed === null ? "—" : `${station.windSpeed.toFixed(1)} m/s`;
+  return (
+    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: Math.min(index * 0.025, 0.3), duration: 0.3 }}>
+      <Card className="group relative h-full overflow-hidden p-4 transition duration-300 hover:-translate-y-1 hover:bg-white/60 dark:hover:bg-slate-900/45">
+        <div className="flex items-start justify-between gap-2">
+          <Link href={`/station/${station.id}`} onClick={() => selectStation(station.id)} className="min-w-0 flex-1 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500">
+            <p className="truncate text-sm font-semibold">{station.name}</p>
+            <p className="mt-3 text-4xl font-light tracking-[-0.08em]">{formatTemperature(station.temperature)}</p>
+          </Link>
+          <div className="flex flex-col items-end gap-2">
+            <WeatherIcon mood={mood} className="size-9 text-sky-600 dark:text-sky-300" />
+            <Button variant="ghost" className="size-8 p-0" aria-label={favorite ? `Usuń ${station.name} z ulubionych` : `Dodaj ${station.name} do ulubionych`} onClick={() => toggleFavorite(station.id)}>
+              <Heart className={cn("size-4", favorite && "fill-rose-500 text-rose-500")} />
+            </Button>
+          </div>
+        </div>
+        <Link href={`/station/${station.id}`} onClick={() => selectStation(station.id)} className="mt-4 grid grid-cols-3 gap-2 rounded-lg text-[0.68rem] text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:text-slate-400">
+          <span className="flex items-center gap-1"><Droplets className="size-3" />{formatHumidity(station.humidity)}</span>
+          <span className="flex items-center gap-1"><Wind className="size-3" />{compactWind}</span>
+          <span className="flex items-center gap-1"><Gauge className="size-3" />{station.pressure === null ? "—" : formatPressure(station.pressure).split(" ")[0]}</span>
+        </Link>
+      </Card>
+    </motion.div>
+  );
+}

components/weather/station-detail-page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft, Heart, ShieldCheck } from "lucide-react";
+import { useWeatherStation } from "@/hooks/use-weather-stations";
+import { useWeatherStore } from "@/lib/store";
+import { formatDateTime } from "@/lib/weather-utils";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { WeatherHero } from "@/components/weather/weather-hero";
+import { WeatherDetailsGrid } from "@/components/weather/current-conditions-card";
+import { SnapshotChart } from "@/components/charts/snapshot-chart";
+import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
+import { ErrorState } from "@/components/states/error-state";
+
+export function StationDetailPage({ id }: { id: string }) {
+  const { data: station, isPending, isError, refetch } = useWeatherStation(id);
+  const favoriteIds = useWeatherStore((state) => state.favorites);
+  const toggleFavorite = useWeatherStore((state) => state.toggleFavorite);
+  if (isPending) return <PageLoadingSkeleton />;
+  if (isError || !station) return <ErrorState onRetry={() => refetch()} description="Nie udało się pobrać danych wybranej stacji IMGW." />;
+  const favorite = favoriteIds.includes(station.id);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Link href="/" className="inline-flex items-center gap-2 rounded-full px-1 py-1 text-sm font-medium text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:text-slate-300"><ArrowLeft className="size-4" />Wszystkie stacje</Link>
+        <Button variant="glass" onClick={() => toggleFavorite(station.id)}>
+          <Heart className={cn("size-4", favorite && "fill-rose-500 text-rose-500")} />
+          {favorite ? "Usuń z ulubionych" : "Dodaj do ulubionych"}
+        </Button>
+      </div>
+      <WeatherHero station={station} />
+      <section>
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-300">Stacja {station.name}</p>
+        <h1 className="mt-2 text-2xl font-semibold tracking-tight">Aktualne parametry</h1>
+        <p className="mb-4 mt-1 text-sm leading-6 text-slate-600 dark:text-slate-300">Najnowszy pomiar udostępniony przez IMGW. Brakujące wartości są oznaczone bez uzupełniania ich danymi szacunkowymi.</p>
+        <WeatherDetailsGrid station={station} />
+      </section>
+      <div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
+        <SnapshotChart station={station} />
+        <Card className="p-5">
+          <div className="flex items-center gap-2 text-sky-700 dark:text-sky-300"><ShieldCheck className="size-5" /><p className="text-xs font-semibold uppercase tracking-[0.18em]">Jakość danych</p></div>
+          <h2 className="mt-4 text-xl font-semibold tracking-tight">Ostatni pomiar IMGW</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">Czas poniżej pochodzi bezpośrednio z najnowszego odczytu udostępnionego przez IMGW.</p>
+          <dl className="mt-6 space-y-3 text-sm">
+            <div><dt className="text-slate-500 dark:text-slate-400">Ostatni pomiar</dt><dd className="mt-0.5 font-medium">{formatDateTime(station.measuredAt)}</dd></div>
+            <div><dt className="text-slate-500 dark:text-slate-400">Źródło</dt><dd className="mt-0.5 font-medium">Publiczne API IMGW</dd></div>
+          </dl>
+        </Card>
+      </div>
+    </div>
+  );
+}

components/weather/station-grid.tsx

@@ -0,0 +1,9 @@
+import type { SynopStation } from "@/types/imgw";
+import { StationCard } from "@/components/weather/station-card";
+import { EmptyState } from "@/components/states/empty-state";
+import { SearchX } from "lucide-react";
+
+export function StationGrid({ stations }: { stations: SynopStation[] }) {
+  if (!stations.length) return <EmptyState icon={SearchX} title="Brak pasujących stacji" description="Zmień wyszukiwanie lub wybierz inny filtr." />;
+  return <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">{stations.map((station, index) => <StationCard key={station.id} station={station} index={index} />)}</div>;
+}

components/weather/station-search.tsx

@@ -0,0 +1,35 @@
+import { Search, SlidersHorizontal } from "lucide-react";
+import type { StationFilter, StationSort } from "@/components/weather/stations-explorer";
+
+export function StationSearch({ query, onQueryChange, sort, onSortChange, filter, onFilterChange }: { query: string; onQueryChange: (value: string) => void; sort: StationSort; onSortChange: (value: StationSort) => void; filter: StationFilter; onFilterChange: (value: StationFilter) => void }) {
+  return (
+    <div className="glass grid gap-3 rounded-[1.75rem] p-3 sm:grid-cols-[1fr_auto_auto]">
+      <label className="relative">
+        <span className="sr-only">Szukaj stacji synoptycznej</span>
+        <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
+        <input value={query} onChange={(event) => onQueryChange(event.target.value)} placeholder="Szukaj stacji IMGW…" className="w-full rounded-2xl border border-white/40 bg-white/45 py-3 pl-10 pr-4 text-sm placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-white/5" />
+      </label>
+      <label className="relative">
+        <span className="sr-only">Sortowanie stacji</span>
+        <select value={sort} onChange={(event) => onSortChange(event.target.value as StationSort)} className="w-full appearance-none rounded-2xl border border-white/40 bg-white/45 py-3 pl-4 pr-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
+          <option value="alphabetical">Alfabetycznie</option>
+          <option value="temperature-desc">Temperatura: najwyższa</option>
+          <option value="temperature-asc">Temperatura: najniższa</option>
+          <option value="humidity-desc">Wilgotność: najwyższa</option>
+          <option value="pressure-desc">Ciśnienie: najwyższe</option>
+        </select>
+        <SlidersHorizontal className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
+      </label>
+      <label>
+        <span className="sr-only">Filtr stacji</span>
+        <select value={filter} onChange={(event) => onFilterChange(event.target.value as StationFilter)} className="w-full rounded-2xl border border-white/40 bg-white/45 px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
+          <option value="all">Wszystkie stacje</option>
+          <option value="warmest">Najcieplejsze</option>
+          <option value="coldest">Najzimniejsze</option>
+          <option value="windy">Największy wiatr</option>
+          <option value="rainy">Największy opad</option>
+        </select>
+      </label>
+    </div>
+  );
+}

components/weather/stations-explorer.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { SynopStation } from "@/types/imgw";
+import { StationGrid } from "@/components/weather/station-grid";
+import { StationSearch } from "@/components/weather/station-search";
+
+export type StationSort = "alphabetical" | "temperature-desc" | "temperature-asc" | "humidity-desc" | "pressure-desc";
+export type StationFilter = "all" | "warmest" | "coldest" | "windy" | "rainy";
+
+function compareNumbers(a: number | null, b: number | null, direction: "asc" | "desc") {
+  if (a === null) return 1;
+  if (b === null) return -1;
+  return direction === "asc" ? a - b : b - a;
+}
+
+export function StationsExplorer({ stations }: { stations: SynopStation[] }) {
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<StationSort>("alphabetical");
+  const [filter, setFilter] = useState<StationFilter>("all");
+  const visibleStations = useMemo(() => {
+    const searched = stations.filter((station) => station.name.toLocaleLowerCase("pl").includes(query.trim().toLocaleLowerCase("pl")));
+    const sorted = [...searched].sort((a, b) => {
+      if (sort === "temperature-desc") return compareNumbers(a.temperature, b.temperature, "desc");
+      if (sort === "temperature-asc") return compareNumbers(a.temperature, b.temperature, "asc");
+      if (sort === "humidity-desc") return compareNumbers(a.humidity, b.humidity, "desc");
+      if (sort === "pressure-desc") return compareNumbers(a.pressure, b.pressure, "desc");
+      return a.name.localeCompare(b.name, "pl");
+    });
+    if (filter === "all") return sorted;
+    const key = { warmest: "temperature", coldest: "temperature", windy: "windSpeed", rainy: "rainfall" }[filter] as keyof SynopStation;
+    return [...sorted].sort((a, b) => compareNumbers(a[key] as number | null, b[key] as number | null, filter === "coldest" ? "asc" : "desc")).slice(0, 12);
+  }, [filter, query, sort, stations]);
+
+  return (
+    <section className="space-y-4">
+      <div>
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700 dark:text-sky-300">Stacje synoptyczne</p>
+        <h2 className="mt-2 text-2xl font-semibold tracking-tight">Pogoda w Polsce</h2>
+      </div>
+      <StationSearch query={query} onQueryChange={setQuery} sort={sort} onSortChange={setSort} filter={filter} onFilterChange={setFilter} />
+      <StationGrid stations={visibleStations} />
+    </section>
+  );
+}

components/weather/weather-hero.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Droplets, Gauge, MapPin, Navigation, Umbrella, Wind } from "lucide-react";
+import {
+  calculateFeelsLike,
+  formatDateTime,
+  formatHumidity,
+  formatPressure,
+  formatRainfall,
+  formatTemperature,
+  formatWind,
+  getWeatherDescription,
+  getWeatherMoodFromData,
+  moodGradient,
+} from "@/lib/weather-utils";
+import type { SynopStation } from "@/types/imgw";
+import { WeatherIcon } from "@/components/weather/weather-icon";
+
+export function WeatherHero({ station }: { station: SynopStation }) {
+  const mood = getWeatherMoodFromData(station);
+  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
+  const metrics = [
+    { icon: Droplets, label: "Wilgotność", value: formatHumidity(station.humidity) },
+    { icon: Wind, label: "Wiatr", value: formatWind(station.windSpeed) },
+    { icon: Umbrella, label: "Opad", value: formatRainfall(station.rainfall) },
+    { icon: Gauge, label: "Ciśnienie", value: formatPressure(station.pressure) },
+  ];
+
+  return (
+    <motion.section
+      initial={{ opacity: 0, y: 18 }}
+      animate={{ opacity: 1, y: 0 }}
+      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`}
+    >
+      <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">
+        <div className="flex flex-wrap items-center gap-3">
+          <span className="flex items-center gap-1.5 text-sm font-medium text-white/85"><MapPin className="size-4" />{station.name}</span>
+        </div>
+        <div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
+          <div>
+            <div className="text-[5.8rem] font-extralight leading-[0.85] tracking-[-0.11em] sm:text-[8rem]">
+              {formatTemperature(station.temperature)}
+            </div>
+            <p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(station)}</p>
+            <p className="mt-1 text-sm text-white/75">Odczuwalna {formatTemperature(feelsLike)} · pomiar {formatDateTime(station.measuredAt)}</p>
+          </div>
+          <WeatherIcon mood={mood} 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 }) => (
+            <div key={label} className="rounded-2xl border border-white/20 bg-white/10 p-3.5 backdrop-blur-xl">
+              <div className="flex items-center gap-2 text-xs text-white/70"><Icon className="size-3.5" />{label}</div>
+              <p className="mt-2 text-base font-semibold">{value}</p>
+            </div>
+          ))}
+        </div>
+        {station.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)` }} />
+            Kierunek wiatru: {station.windDirection}°
+          </p>
+        )}
+      </div>
+    </motion.section>
+  );
+}

components/weather/weather-icon.tsx

@@ -0,0 +1,14 @@
+import { CloudRain, CloudSun, MoonStar, Snowflake, Sun, Wind } from "lucide-react";
+import type { WeatherMood } from "@/types/imgw";
+
+export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
+  const Icon = {
+    clear: Sun,
+    rain: CloudRain,
+    wind: Wind,
+    cold: Snowflake,
+    night: MoonStar,
+    mild: CloudSun,
+  }[mood];
+  return <Icon className={className} strokeWidth={1.35} />;
+}