From 3b745868b2f40c2ec496bb9ca82476cd654c8b55 Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 21 Oct 2025 12:22:22 +0530
Subject: [PATCH] feat(app): add mobile settings button

---
 src/components/EmptyChat.tsx                  |  5 ++---
 .../Settings/SettingsButtonMobile.tsx         | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Settings/SettingsButtonMobile.tsx

diff --git a/src/components/EmptyChat.tsx b/src/components/EmptyChat.tsx
index e40a338..d9b6686 100644
--- a/src/components/EmptyChat.tsx
+++ b/src/components/EmptyChat.tsx
@@ -4,14 +4,13 @@ import { File } from './ChatWindow';
 import Link from 'next/link';
 import WeatherWidget from './WeatherWidget';
 import NewsArticleWidget from './NewsArticleWidget';
+import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
 
 const EmptyChat = () => {
   return (
     <div className="relative">
       <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
-        <Link href="/settings">
-          <Settings className="cursor-pointer lg:hidden" />
-        </Link>
+        <SettingsButtonMobile />
       </div>
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
         <div className="flex flex-col items-center justify-center w-full space-y-8">
diff --git a/src/components/Settings/SettingsButtonMobile.tsx b/src/components/Settings/SettingsButtonMobile.tsx
new file mode 100644
index 0000000..fec3e4d
--- /dev/null
+++ b/src/components/Settings/SettingsButtonMobile.tsx
@@ -0,0 +1,21 @@
+import { Settings } from 'lucide-react';
+import { useState } from 'react';
+import SettingsDialogue from './SettingsDialogue';
+import { AnimatePresence } from 'framer-motion';
+
+const SettingsButtonMobile = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <button className="lg:hidden" onClick={() => setIsOpen(true)}>
+        <Settings />
+      </button>
+      <AnimatePresence>
+        {isOpen && <SettingsDialogue isOpen={isOpen} setIsOpen={setIsOpen} />}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default SettingsButtonMobile;