feat: add weather unit preferences

components/weather/location-search.tsx

@@ -7,6 +7,7 @@ import { useLocationSearch } from "@/hooks/use-location-search";
 import { useI18n } from "@/lib/i18n";
 import { createSelectedLocation, locateSynopStations } from "@/lib/location-utils";
 import { useWeatherStore } from "@/lib/store";
+import { formatDistance } from "@/lib/weather-utils";
 import type { MeteoStationPosition, SynopStation } from "@/types/imgw";
 import type { SelectedLocation } from "@/types/location";
 
@@ -21,6 +22,7 @@ export function LocationSearch({
   const [query, setQuery] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const selectedLocation = useWeatherStore((state) => state.selectedLocation);
+  const distanceUnit = useWeatherStore((state) => state.distanceUnit);
   const selectLocation = useWeatherStore((state) => state.selectLocation);
   const { data: locations, isFetching, isError } = useLocationSearch(query, language);
   const locatedStations = useMemo(() => locateSynopStations(stations, positions), [positions, stations]);
@@ -112,7 +114,7 @@ export function LocationSearch({
                         {t("location.nearest")}
                         <br />
                         <strong className="font-semibold text-foreground">
-                          {selected.stationName} · {selected.distanceKm} km
+                          {selected.stationName} · {formatDistance(selected.distanceKm, language, distanceUnit)}
                         </strong>
                       </span>
                     ) : (
@@ -135,7 +137,7 @@ export function LocationSearch({
               ? t("location.currentSource", {
                   location: selectedLocation.name,
                   station: selectedLocation.stationName,
-                  distance: selectedLocation.distanceKm,
+                  distance: formatDistance(selectedLocation.distanceKm, language, distanceUnit),
                 })
               : t("location.currentSourceGlobal", { location: selectedLocation.name })}
           </p>