From 99fc13006198db640a547c09061a6436b0626d7b Mon Sep 17 00:00:00 2001
From: Chuck <403chuck@gmail.com>
Date: Mon, 3 Jun 2024 17:13:44 +0800
Subject: [PATCH] feat: support settings on mobile device

---
 ui/components/EmptyChat.tsx     |  4 ++--
 ui/components/SettingsEntry.tsx | 23 +++++++++++++++++++++++
 ui/components/Sidebar.tsx       | 15 +++------------
 3 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 ui/components/SettingsEntry.tsx

diff --git a/ui/components/EmptyChat.tsx b/ui/components/EmptyChat.tsx
index 2aade48..e627a0a 100644
--- a/ui/components/EmptyChat.tsx
+++ b/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">
diff --git a/ui/components/SettingsEntry.tsx b/ui/components/SettingsEntry.tsx
new file mode 100644
index 0000000..4b8b1e2
--- /dev/null
+++ b/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;
diff --git a/ui/components/Sidebar.tsx b/ui/components/Sidebar.tsx
index 7b3e971..76790ac 100644
--- a/ui/components/Sidebar.tsx
+++ b/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 ThemeSwitcher from './theme/Switcher';
+import SettingsEntry from './SettingsEntry';
 
 const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
   return (
@@ -68,15 +67,7 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
             ))}
           </VerticalIconContainer>
 
-          <Settings
-            onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-            className="cursor-pointer"
-          />
-
-          <SettingsDialog
-            isOpen={isSettingsOpen}
-            setIsOpen={setIsSettingsOpen}
-          />
+          <SettingsEntry />
         </div>
       </div>