feat(weather): add other measurement units, closes #821 #790

Author: ItzCrazyKns

src/app/api/weather/route.ts

@@ -1,6 +1,7 @@
 export const POST = async (req: Request) => {
   try {
-    const body: { lat: number; lng: number } = await req.json();
+    const body: { lat: number; lng: number; temperatureUnit: 'C' | 'F' } =
+      await req.json();
 
     if (!body.lat || !body.lng) {
       return Response.json(
@@ -12,7 +13,7 @@ export const POST = async (req: Request) => {
     }
 
     const res = await fetch(
-      `https://api.open-meteo.com/v1/forecast?latitude=${body.lat}&longitude=${body.lng}&current=weather_code,temperature_2m,is_day,relative_humidity_2m,wind_speed_10m&timezone=auto`,
+      `https://api.open-meteo.com/v1/forecast?latitude=${body.lat}&longitude=${body.lng}&current=weather_code,temperature_2m,is_day,relative_humidity_2m,wind_speed_10m&timezone=auto${body.temperatureUnit === 'C' ? '' : '&temperature_unit=fahrenheit'}`,
     );
 
     const data = await res.json();
@@ -33,12 +34,14 @@ export const POST = async (req: Request) => {
       humidity: number;
       windSpeed: number;
       icon: string;
+      temperatureUnit: 'C' | 'F';
     } = {
       temperature: data.current.temperature_2m,
       condition: '',
       humidity: data.current.relative_humidity_2m,
       windSpeed: data.current.wind_speed_10m,
       icon: '',
+      temperatureUnit: body.temperatureUnit,
     };
 
     const code = data.current.weather_code;

src/app/settings/page.tsx

@@ -148,6 +148,7 @@ const Page = () => {
   const [automaticImageSearch, setAutomaticImageSearch] = useState(false);
   const [automaticVideoSearch, setAutomaticVideoSearch] = useState(false);
   const [systemInstructions, setSystemInstructions] = useState<string>('');
+  const [temperatureUnit, setTemperatureUnit] = useState<'C' | 'F'>('C');
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -210,6 +211,8 @@ const Page = () => {
 
       setSystemInstructions(localStorage.getItem('systemInstructions')!);
 
+      setTemperatureUnit(localStorage.getItem('temperatureUnit')! as 'C' | 'F');
+
       setIsLoading(false);
     };
 
@@ -368,6 +371,8 @@ const Page = () => {
         localStorage.setItem('embeddingModel', value);
       } else if (key === 'systemInstructions') {
         localStorage.setItem('systemInstructions', value);
+      } else if (key === 'temperatureUnit') {
+        localStorage.setItem('temperatureUnit', value.toString());
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -416,13 +421,35 @@ const Page = () => {
       ) : (
         config && (
           <div className="flex flex-col space-y-6 pb-28 lg:pb-8">
-            <SettingsSection title="Appearance">
+            <SettingsSection title="Preferences">
               <div className="flex flex-col space-y-1">
                 <p className="text-black/70 dark:text-white/70 text-sm">
                   Theme
                 </p>
                 <ThemeSwitcher />
               </div>
+              <div className="flex flex-col space-y-1">
+                <p className="text-black/70 dark:text-white/70 text-sm">
+                  Temperature Unit
+                </p>
+                <Select
+                  value={temperatureUnit ?? undefined}
+                  onChange={(e) => {
+                    setTemperatureUnit(e.target.value as 'C' | 'F');
+                    saveConfig('temperatureUnit', e.target.value);
+                  }}
+                  options={[
+                    {
+                      label: 'Celsius',
+                      value: 'C',
+                    },
+                    {
+                      label: 'Fahrenheit',
+                      value: 'F',
+                    },
+                  ]}
+                />
+              </div>
             </SettingsSection>
 
             <SettingsSection title="Automatic Search">
@@ -516,7 +543,7 @@ const Page = () => {
             <SettingsSection title="System Instructions">
               <div className="flex flex-col space-y-4">
                 <Textarea
-                  value={systemInstructions}
+                  value={systemInstructions ?? undefined}
                   isSaving={savingStates['systemInstructions']}
                   onChange={(e) => {
                     setSystemInstructions(e.target.value);

src/components/WeatherWidget.tsx

@@ -9,7 +9,9 @@ const WeatherWidget = () => {
     humidity: 0,
     windSpeed: 0,
     icon: '',
+    temperatureUnit: 'C',
   });
+
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
@@ -73,6 +75,7 @@ const WeatherWidget = () => {
         body: JSON.stringify({
           lat: location.latitude,
           lng: location.longitude,
+          temperatureUnit: localStorage.getItem('temperatureUnit') ?? 'C',
         }),
       });
 
@@ -91,6 +94,7 @@ const WeatherWidget = () => {
         humidity: data.humidity,
         windSpeed: data.windSpeed,
         icon: data.icon,
+        temperatureUnit: data.temperatureUnit,
       });
       setLoading(false);
     });
@@ -125,7 +129,7 @@ const WeatherWidget = () => {
               className="h-10 w-auto"
             />
             <span className="text-base font-semibold text-black dark:text-white">
-              {data.temperature}°C
+              {data.temperature}°{data.temperatureUnit}
             </span>
           </div>
           <div className="flex flex-col justify-between flex-1 h-full py-1">