chore: add prettier formatting

components/hydro/hydro-page.tsx

@@ -17,10 +17,14 @@ export function HydroPage() {
   const { data: stations, isPending, isError, refetch } = useHydroStations();
   const [query, setQuery] = useState("");
   const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
-  const filteredStations = useMemo(() => (stations ?? []).filter((station) => {
-    const haystack = `${station.name} ${station.river ?? ""} ${station.province ?? ""}`.toLocaleLowerCase(locale);
-    return haystack.includes(query.trim().toLocaleLowerCase(locale));
-  }), [locale, query, stations]);
+  const filteredStations = useMemo(
+    () =>
+      (stations ?? []).filter((station) => {
+        const haystack = `${station.name} ${station.river ?? ""} ${station.province ?? ""}`.toLocaleLowerCase(locale);
+        return haystack.includes(query.trim().toLocaleLowerCase(locale));
+      }),
+    [locale, query, stations],
+  );
 
   if (isPending) return <PageLoadingSkeleton />;
   if (isError) return <ErrorState onRetry={() => refetch()} description={t("hydro.error")} />;
@@ -34,13 +38,38 @@ export function HydroPage() {
       <label className="glass relative block rounded-panel p-3">
         <span className="sr-only">{t("hydro.searchLabel")}</span>
         <Search className="pointer-events-none absolute left-6 top-1/2 size-4 -translate-y-1/2 text-muted" />
-        <input value={query} onChange={(event) => { setQuery(event.target.value); setVisibleCount(PAGE_SIZE); }} placeholder={t("hydro.searchPlaceholder")} className="w-full rounded-card border border-border/70 bg-surface-raised/80 py-3 pl-10 pr-4 text-base placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:text-sm" />
+        <input
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setVisibleCount(PAGE_SIZE);
+          }}
+          placeholder={t("hydro.searchPlaceholder")}
+          className="w-full rounded-card border border-border/70 bg-surface-raised/80 py-3 pl-10 pr-4 text-base placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:text-sm"
+        />
       </label>
-      <p className="text-xs text-muted">{t("hydro.results", { total: filteredStations.length, visible: Math.min(visibleCount, filteredStations.length) })}</p>
-      {!filteredStations.length ? <EmptyState icon={Waves} title={t("stations.emptyTitle")} description={t("hydro.emptyDescription")} /> : (
+      <p className="text-xs text-muted">
+        {t("hydro.results", {
+          total: filteredStations.length,
+          visible: Math.min(visibleCount, filteredStations.length),
+        })}
+      </p>
+      {!filteredStations.length ? (
+        <EmptyState icon={Waves} title={t("stations.emptyTitle")} description={t("hydro.emptyDescription")} />
+      ) : (
         <>
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">{filteredStations.slice(0, visibleCount).map((station, index) => <HydroStationCard key={station.id} station={station} index={index} />)}</div>
-          {visibleCount < filteredStations.length && <div className="flex justify-center pt-2"><Button variant="glass" onClick={() => setVisibleCount((count) => count + PAGE_SIZE)}>{t("hydro.more")}</Button></div>}
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredStations.slice(0, visibleCount).map((station, index) => (
+              <HydroStationCard key={station.id} station={station} index={index} />
+            ))}
+          </div>
+          {visibleCount < filteredStations.length && (
+            <div className="flex justify-center pt-2">
+              <Button variant="glass" onClick={() => setVisibleCount((count) => count + PAGE_SIZE)}>
+                {t("hydro.more")}
+              </Button>
+            </div>
+          )}
         </>
       )}
     </div>

components/hydro/hydro-station-card.tsx

@@ -12,20 +12,38 @@ export function HydroStationCard({ station, index = 0 }: { station: HydroStation
   const { language, t } = useI18n();
   const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
   return (
-    <motion.article initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: Math.min(index * 0.02, 0.3), duration: 0.3 }}>
+    <motion.article
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: Math.min(index * 0.02, 0.3), duration: 0.3 }}
+    >
       <Card className="h-full p-4 transition duration-300 hover:-translate-y-1 hover:bg-surface-raised/90">
         <div>
           <div>
             <h2 className="font-semibold tracking-tight">{station.name}</h2>
-            <p className="mt-1 flex items-center gap-1 text-xs text-muted"><MapPin className="size-3" />{station.river ?? t("hydro.riverUnavailable")}{station.province ? ` · ${station.province}` : ""}</p>
+            <p className="mt-1 flex items-center gap-1 text-xs text-muted">
+              <MapPin className="size-3" />
+              {station.river ?? t("hydro.riverUnavailable")}
+              {station.province ? ` · ${station.province}` : ""}
+            </p>
           </div>
         </div>
         <div className="mt-5 grid grid-cols-3 gap-2">
-          <HydroMetric icon={Droplets} label={t("hydro.level")} value={formatWaterLevel(station.waterLevel, language)} />
-          <HydroMetric icon={Thermometer} label={t("hydro.water")} value={formatTemperature(station.waterTemperature, language, temperatureUnit)} />
+          <HydroMetric
+            icon={Droplets}
+            label={t("hydro.level")}
+            value={formatWaterLevel(station.waterLevel, language)}
+          />
+          <HydroMetric
+            icon={Thermometer}
+            label={t("hydro.water")}
+            value={formatTemperature(station.waterTemperature, language, temperatureUnit)}
+          />
           <HydroMetric icon={Activity} label={t("hydro.flow")} value={formatFlow(station.flow, language)} />
         </div>
-        <p className="mt-4 text-[0.7rem] text-muted">{t("hydro.levelMeasurement", { date: formatDateTime(station.waterLevelMeasuredAt, language) })}</p>
+        <p className="mt-4 text-[0.7rem] text-muted">
+          {t("hydro.levelMeasurement", { date: formatDateTime(station.waterLevelMeasuredAt, language) })}
+        </p>
       </Card>
     </motion.article>
   );
@@ -34,8 +52,13 @@ export function HydroStationCard({ station, index = 0 }: { station: HydroStation
 function HydroMetric({ icon: Icon, label, value }: { icon: typeof Droplets; label: string; value: string }) {
   return (
     <div className="rounded-card bg-surface-muted/60 p-2.5">
-      <p className="flex items-center gap-1 text-[0.65rem] text-muted"><Icon className="size-3" />{label}</p>
-      <p className="mt-1.5 truncate text-xs font-semibold" title={value}>{value}</p>
+      <p className="flex items-center gap-1 text-[0.65rem] text-muted">
+        <Icon className="size-3" />
+        {label}
+      </p>
+      <p className="mt-1.5 truncate text-xs font-semibold" title={value}>
+        {value}
+      </p>
     </div>
   );
 }