From 173fe0d7e3e0fb9eb4e8cc6f88eb4e33ccd074ff Mon Sep 17 00:00:00 2001
From: Yifei Zhang <yidadaa@qq.com>
Date: Mon, 20 Mar 2023 16:51:20 +0000
Subject: [PATCH] chore: bigger buttons on mobile device

---
 app/components/button.module.scss |  6 ++++++
 app/components/home.tsx           | 16 +++++++++++-----
 app/components/ui-lib.module.scss |  2 --
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index ec4fc191..b882a0c1 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -30,6 +30,12 @@
   align-items: center;
 }
 
+@media only screen and (max-width: 600px) {
+  .icon-button {
+    padding: 16px;
+  }
+}
+
 @mixin dark-button {
   div:not(:global(.no-dark))>.icon-button-icon {
     filter: invert(0.5);
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 1db1f1ea..e76b96b3 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -198,7 +198,7 @@ export function Chat(props: { showSideBar?: () => void }) {
   return (
     <div className={styles.chat} key={session.id}>
       <div className={styles["window-header"]}>
-        <div className={styles["window-header-title"]}>
+        <div className={styles["window-header-title"]} onClick={props?.showSideBar}>
           <div className={styles["window-header-main-title"]}>{session.topic}</div>
           <div className={styles["window-header-sub-title"]}>
             {Locale.Chat.SubTitle(session.messages.length)}
@@ -343,7 +343,7 @@ function showMemoryPrompt(session: ChatSession) {
 }
 
 export function Home() {
-  const [createNewSession] = useChatStore((state) => [state.newSession]);
+  const [createNewSession, currentIndex, removeSession] = useChatStore((state) => [state.newSession, state.currentSessionIndex, state.removeSession]);
   const loading = !useChatStore?.persist?.hasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);
 
@@ -364,7 +364,6 @@ export function Home() {
     >
       <div
         className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
-        onClick={() => setShowSideBar(false)}
       >
         <div className={styles["sidebar-header"]}>
           <div className={styles["sidebar-title"]}>ChatGPT Next</div>
@@ -378,7 +377,10 @@ export function Home() {
 
         <div
           className={styles["sidebar-body"]}
-          onClick={() => setOpenSettings(false)}
+          onClick={() => {
+            setOpenSettings(false)
+            setShowSideBar(false)
+          }}
         >
           <ChatList />
         </div>
@@ -388,7 +390,11 @@ export function Home() {
             <div className={styles["sidebar-action"] + " " + styles.mobile}>
               <IconButton
                 icon={<CloseIcon />}
-                onClick={() => setShowSideBar(!showSideBar)}
+                onClick={() => {
+                  if (confirm('删除选中的对话？')) {
+                    removeSession(currentIndex)
+                  }
+                }}
               />
             </div>
             <div className={styles["sidebar-action"]}>
diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 1a378141..a3040c34 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -58,8 +58,6 @@
   border: 0;
 }
 
-
-
 .modal-container {
   box-shadow: var(--card-shadow);
   background-color: var(--white);