feat: add temperature unit preference

components/charts/day-forecast-charts.tsx

@@ -5,6 +5,8 @@ import { Card } from "@/components/ui/card";
 import { CHART_COLORS } from "@/lib/chart-theme";
 import { useI18n } from "@/lib/i18n";
 import { formatForecastRainfall, formatForecastTemperature } from "@/lib/forecast-utils";
+import { useWeatherStore } from "@/lib/store";
+import { convertTemperature, formatTemperatureValue, getTemperatureUnitLabel } from "@/lib/weather-utils";
 import type { HourlyForecast } from "@/types/forecast";
 
 const INITIAL_CHART_DIMENSION = { width: 1, height: 1 };
@@ -15,13 +17,15 @@ function formatHour(value: string) {
 
 export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
   const { language, t } = useI18n();
+  const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
   const rows = hours.map((hour) => ({
     time: formatHour(hour.time),
-    temperature: hour.temperature,
-    feelsLike: hour.feelsLike,
+    temperature: hour.temperature === null ? null : convertTemperature(hour.temperature, temperatureUnit),
+    feelsLike: hour.feelsLike === null ? null : convertTemperature(hour.feelsLike, temperatureUnit),
     precipitation: hour.precipitation,
     precipitationProbability: hour.precipitationProbability,
   }));
+  const temperatureUnitLabel = getTemperatureUnitLabel(temperatureUnit);
 
   return (
     <div className="grid gap-3 lg:grid-cols-2">
@@ -33,10 +37,14 @@ export function DayForecastCharts({ hours }: { hours: HourlyForecast[] }) {
             <ComposedChart data={rows} margin={{ left: -20, right: 8, top: 8 }}>
               <CartesianGrid stroke={CHART_COLORS.grid} strokeDasharray="4 4" vertical={false} />
               <XAxis dataKey="time" axisLine={false} tickLine={false} interval={3} tick={{ fill: "currentColor", fontSize: 11 }} />
-              <YAxis axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit="°" />
+              <YAxis axisLine={false} tickLine={false} tick={{ fill: "currentColor", fontSize: 11 }} unit={temperatureUnitLabel} />
               <Tooltip
                 contentStyle={{ borderRadius: 14, border: `1px solid ${CHART_COLORS.tooltipBorder}`, background: CHART_COLORS.tooltipBackground, color: CHART_COLORS.tooltipText }}
-                formatter={(value) => [formatForecastTemperature(typeof value === "number" ? value : null, language)]}
+                formatter={(value) => [
+                  typeof value === "number"
+                    ? formatTemperatureValue(value, language, temperatureUnit)
+                    : formatForecastTemperature(null, language, temperatureUnit),
+                ]}
               />
               <Legend wrapperStyle={{ fontSize: "0.72rem" }} />
               <Line type="monotone" dataKey="temperature" name={t("forecast.temperature")} stroke={CHART_COLORS.temperature} strokeWidth={3} dot={false} connectNulls />