feat: add weather toggle in settings

src/app/settings/page.tsx

@@ -27,6 +27,7 @@ interface SettingsType {
   customOpenaiApiKey: string;
   customOpenaiApiUrl: string;
   customOpenaiModelName: string;
+  weatherWidgetEnabled?: boolean;
 }
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -151,6 +152,7 @@ const Page = () => {
   const [measureUnit, setMeasureUnit] = useState<'Imperial' | 'Metric'>(
     'Metric',
   );
+  const [weatherWidgetEnabled, setWeatherWidgetEnabled] = useState<boolean>(true);
   const [savingStates, setSavingStates] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
@@ -217,6 +219,12 @@ const Page = () => {
         localStorage.getItem('measureUnit')! as 'Imperial' | 'Metric',
       );
 
+      setWeatherWidgetEnabled(
+        localStorage.getItem('weatherWidgetEnabled') === null
+          ? true
+          : localStorage.getItem('weatherWidgetEnabled') === 'true',
+      );
+
       setIsLoading(false);
     };
 
@@ -377,6 +385,8 @@ const Page = () => {
         localStorage.setItem('systemInstructions', value);
       } else if (key === 'measureUnit') {
         localStorage.setItem('measureUnit', value.toString());
+      } else if (key === 'weatherWidgetEnabled') {
+        localStorage.setItem('weatherWidgetEnabled', value.toString());
       }
     } catch (err) {
       console.error('Failed to save:', err);
@@ -454,6 +464,43 @@ const Page = () => {
                   ]}
                 />
               </div>
+
+              <div className="flex flex-col space-y-1">
+                <p className="text-black/70 dark:text-white/70 text-sm">
+                  Show Weather Widget
+                </p>
+                <div className="flex items-center justify-between p-3 bg-light-secondary dark:bg-dark-secondary rounded-lg hover:bg-light-200 dark:hover:bg-dark-200 transition-colors">
+                  <div className="flex items-center space-x-3">
+                    <div className="p-2 bg-light-200 dark:bg-dark-200 rounded-lg">
+                      <SettingsIcon size={18} className="text-black/70 dark:text-white/70" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-black/90 dark:text-white/90 font-medium">Weather Widget</p>
+                      <p className="text-xs text-black/60 dark:text-white/60 mt-0.5">
+                        Show the weather widget on the Home Page
+                      </p>
+                    </div>
+                  </div>
+                  <Switch
+                    checked={weatherWidgetEnabled}
+                    onChange={(checked) => {
+                      setWeatherWidgetEnabled(checked);
+                      saveConfig('weatherWidgetEnabled', checked);
+                    }}
+                    className={cn(
+                      weatherWidgetEnabled ? 'bg-[#24A0ED]' : 'bg-light-200 dark:bg-dark-200',
+                      'relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none',
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        weatherWidgetEnabled ? 'translate-x-6' : 'translate-x-1',
+                        'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+                      )}
+                    />
+                  </Switch>
+                </div>
+              </div>
             </SettingsSection>
 
             <SettingsSection title="Automatic Search">

src/components/EmptyChat.tsx

@@ -1,4 +1,6 @@
+'use client';
 import { Settings } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import EmptyChatMessageInput from './EmptyChatMessageInput';
 import { File } from './ChatWindow';
 import Link from 'next/link';
@@ -26,6 +28,11 @@ const EmptyChat = ({
   files: File[];
   setFiles: (files: File[]) => void;
 }) => {
+  const [weatherEnabled, setWeatherEnabled] = useState(true);
+  useEffect(() => {
+    const item = localStorage.getItem('weatherWidgetEnabled');
+    setWeatherEnabled(item === null ? true : item === 'true');
+  }, []);
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
@@ -51,9 +58,11 @@ const EmptyChat = ({
           />
         </div>
         <div className="flex flex-col w-full gap-4 mt-2 sm:flex-row sm:justify-center">
+          {weatherEnabled && (
             <div className="flex-1 w-full">
               <WeatherWidget />
             </div>
+          )}
           <div className="flex-1 w-full">
             <NewsArticleWidget />
           </div>

src/components/WeatherWidget.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { Cloud, Sun, CloudRain, CloudSnow, Wind } from 'lucide-react';
 import { useEffect, useState } from 'react';