zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add weather unit preferences
Some checks failed
CI / Lint, test, typecheck and build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
zv
2026-07-04 20:16:11 +02:00
parent ab6b7b414f
commit 91acdb39b8
27 changed files with 623 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/forecast/forecast-panel.tsx
View File

@@ -77,6 +77,7 @@ function HourlyForecastSummary({ hours }: { hours: HourlyForecast[] }) {
const { language, t } = useI18n();
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
const minimumTemperature = getMinimum(hours.map((hour) => hour.temperature));
const maximumTemperature = getMaximum(hours.map((hour) => hour.temperature));
const maximumWind = getMaximum(hours.map((hour) => hour.windSpeed));
@@ -102,7 +103,7 @@ function HourlyForecastSummary({ hours }: { hours: HourlyForecast[] }) {
<HourlySummaryMetric
icon={CloudRain}
label={t("forecast.rainfallTotal")}
value={formatForecastRainfall(rainfallTotal, language)}
value={formatForecastRainfall(rainfallTotal, language, precipitationUnit)}
/>
<HourlySummaryMetric
icon={Droplets}
@@ -125,6 +126,7 @@ function DailyForecastRow({
}) {
const { language, locale, t } = useI18n();
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
const label = formatDay(day.date, locale, t("forecast.today"), index);
return (
<motion.li
@@ -144,7 +146,8 @@ function DailyForecastRow({
<div className="flex min-w-0 items-center gap-2">
<ForecastIcon code={day.weatherCode} className="size-6 shrink-0 text-accent" />
<span className="truncate text-xs text-muted">
{getForecastCondition(day.weatherCode, language)} · {formatForecastRainfall(day.precipitation, language)}
{getForecastCondition(day.weatherCode, language)} ·{" "}
{formatForecastRainfall(day.precipitation, language, precipitationUnit)}
</span>
</div>
<span className="hidden items-center gap-1 text-xs text-accent sm:flex">
@@ -177,6 +180,7 @@ export function ForecastPanel({
const { language, t } = useI18n();
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
const { data: forecast, isPending, isError, refetch } = useForecast(latitude, longitude, region);
const [selectedDay, setSelectedDay] = useState<DailyForecast | null>(null);
const closeDayDetails = useCallback(() => setSelectedDay(null), []);
@@ -261,7 +265,7 @@ export function ForecastPanel({
</p>
<p className="flex items-center justify-center gap-1" title={t("forecast.precipitation")}>
<CloudRain className="size-3 text-accent" />
{formatForecastRainfall(hour.precipitation, language)}
{formatForecastRainfall(hour.precipitation, language, precipitationUnit)}
</p>
</div>
</motion.li>