feat: support settings on mobile device

ui/components/EmptyChat.tsx

@@ -1,5 +1,5 @@
 import EmptyChatMessageInput from './EmptyChatMessageInput';
-import ThemeSwitcher from './theme/Switcher';
+import SettingsEntry from './SettingsEntry';
 
 const EmptyChat = ({
   sendMessage,
@@ -12,7 +12,7 @@ const EmptyChat = ({
 }) => {
   return (
     <div className="relative">
-      <ThemeSwitcher size={17} className="absolute top-2 right-0 lg:hidden" />
+      <SettingsEntry className="absolute top-4 right-0 lg:hidden" />
 
       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">

ui/components/SettingsEntry.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import SettingsDialog from './SettingsDialog';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const SettingsEntry = ({ className }: InputProps) => {
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  return (
+    <>
+      <Settings
+        onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+        className={cn('cursor-pointer', className)}
+      />
+
+      <SettingsDialog isOpen={isSettingsOpen} setIsOpen={setIsSettingsOpen} />
+    </>
+  );
+};
+
+export default SettingsEntry;

ui/components/Sidebar.tsx

@@ -1,13 +1,12 @@
 'use client';
 
 import { cn } from '@/lib/utils';
-import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
+import { BookOpenText, Home, Search, SquarePen } from 'lucide-react';
 import Link from 'next/link';
 import { useSelectedLayoutSegments } from 'next/navigation';
 import React, { useState, type ReactNode } from 'react';
 import Layout from './Layout';
-import SettingsDialog from './SettingsDialog';
+import SettingsEntry from './SettingsEntry';
-import ThemeSwitcher from './theme/Switcher';
 
 const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
   return (
@@ -68,15 +67,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
             ))}
           </VerticalIconContainer>
 
-          <Settings
+          <SettingsEntry />
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-            className="cursor-pointer"
-          />
-
-          <SettingsDialog
-            isOpen={isSettingsOpen}
-            setIsOpen={setIsSettingsOpen}
-          />
         </div>
       </div>