From a5c1db6fcf416fa81280a7ff6617e10f99af77bb Mon Sep 17 00:00:00 2001
From: flycran <86134803+flycran@users.noreply.github.com>
Date: Sun, 26 Mar 2023 02:35:17 +0800
Subject: [PATCH] Fold menu options (#82)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 增加折叠MenuOptions功能

* 增加折叠MenuOptions功能

* 改用tailwindcss编写样式

* 解构useState并显式标注类型

* 修改折叠图标的hover样式

* 为折叠状态添加持久化

* fix: bug

* rename foldMenuOptions to hideMenuOptions

* change file location

* transition + styling

* reordering

* update link

---------

Co-authored-by: Jing Hua <59118459+ztjhz@users.noreply.github.com>
---
 src/assets/icons/ArrowBottom.tsx              | 19 +++++++++++++++
 .../Menu/MenuOptions/CollapseOptions.tsx      | 22 ++++++++++++++++++
 src/components/Menu/MenuOptions/Me.tsx        |  2 +-
 .../Menu/MenuOptions/MenuOptions.tsx          | 23 +++++++++++++------
 src/store/config-slice.ts                     |  9 ++++++++
 src/store/store.ts                            |  1 +
 6 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/icons/ArrowBottom.tsx
 create mode 100644 src/components/Menu/MenuOptions/CollapseOptions.tsx

diff --git a/src/assets/icons/ArrowBottom.tsx b/src/assets/icons/ArrowBottom.tsx
new file mode 100644
index 0000000..d895f3b
--- /dev/null
+++ b/src/assets/icons/ArrowBottom.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const ArrowBottom = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      viewBox='0 0 1024 1024'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      className='h-4 w-4'
+      width='1em'
+      height='1em'
+      {...props}
+    >
+      <path d='M140.16 332.16a40.96 40.96 0 0 0 0 58.24l343.04 338.56a40.96 40.96 0 0 0 58.24 0l342.4-338.56a40.96 40.96 0 1 0-58.24-58.24L512 640 197.76 332.16a40.96 40.96 0 0 0-57.6 0z'></path>
+    </svg>
+  );
+};
+
+export default ArrowBottom;
diff --git a/src/components/Menu/MenuOptions/CollapseOptions.tsx b/src/components/Menu/MenuOptions/CollapseOptions.tsx
new file mode 100644
index 0000000..5dce716
--- /dev/null
+++ b/src/components/Menu/MenuOptions/CollapseOptions.tsx
@@ -0,0 +1,22 @@
+import ArrowBottom from '@icon/ArrowBottom';
+import useStore from '@store/store';
+
+const CollapseOptions = () => {
+  const setHideMenuOptions = useStore((state) => state.setHideMenuOptions);
+  const hideMenuOptions = useStore((state) => state.hideMenuOptions);
+
+  return (
+    <div
+      className={`fill-white hover:bg-gray-500/10 transition-colors duration-200 px-3 rounded-md cursor-pointer flex justify-center`}
+      onClick={() => setHideMenuOptions(!hideMenuOptions)}
+    >
+      <ArrowBottom
+        className={`h-3 w-3 transition-all duration-100 ${
+          hideMenuOptions ? 'rotate-180' : ''
+        }`}
+      />
+    </div>
+  );
+};
+
+export default CollapseOptions;
diff --git a/src/components/Menu/MenuOptions/Me.tsx b/src/components/Menu/MenuOptions/Me.tsx
index fdc0911..656d2f0 100644
--- a/src/components/Menu/MenuOptions/Me.tsx
+++ b/src/components/Menu/MenuOptions/Me.tsx
@@ -8,7 +8,7 @@ const Me = () => {
   return (
     <a
       className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
-      href='https://github.com/ztjhz'
+      href='https://github.com/ztjhz/BetterChatGPT'
       target='_blank'
     >
       <HeartIcon />
diff --git a/src/components/Menu/MenuOptions/MenuOptions.tsx b/src/components/Menu/MenuOptions/MenuOptions.tsx
index ee3d1f7..aa76092 100644
--- a/src/components/Menu/MenuOptions/MenuOptions.tsx
+++ b/src/components/Menu/MenuOptions/MenuOptions.tsx
@@ -1,22 +1,31 @@
 import React from 'react';
+import useStore from '@store/store';
 
-import Account from './Account';
 import ClearConversation from './ClearConversation';
 import Api from './Api';
 import Me from './Me';
 import AboutMenu from '@components/AboutMenu';
 import ImportExportChat from '@components/ImportExportChat';
 import SettingsMenu from '@components/SettingsMenu';
+import CollapseOptions from './CollapseOptions';
 
 const MenuOptions = () => {
+  const hideMenuOptions = useStore((state) => state.hideMenuOptions);
   return (
     <>
-      <AboutMenu />
-      <ClearConversation />
-      <ImportExportChat />
-      <Api />
-      <SettingsMenu />
-      <Me />
+      <CollapseOptions />
+      <div
+        className={`${
+          hideMenuOptions ? 'max-h-0' : 'max-h-full'
+        } overflow-hidden transition-all`}
+      >
+        <AboutMenu />
+        <ClearConversation />
+        <ImportExportChat />
+        <Api />
+        <SettingsMenu />
+        <Me />
+      </div>
     </>
   );
 };
diff --git a/src/store/config-slice.ts b/src/store/config-slice.ts
index 30418a8..557f8a6 100644
--- a/src/store/config-slice.ts
+++ b/src/store/config-slice.ts
@@ -7,6 +7,7 @@ export interface ConfigSlice {
   openConfig: boolean;
   theme: Theme;
   autoTitle: boolean;
+  hideMenuOptions: boolean;
   defaultChatConfig: ConfigInterface;
   defaultSystemMessage: string;
   setOpenConfig: (openConfig: boolean) => void;
@@ -14,11 +15,13 @@ export interface ConfigSlice {
   setAutoTitle: (autoTitle: boolean) => void;
   setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void;
   setDefaultSystemMessage: (defaultSystemMessage: string) => void;
+  setHideMenuOptions: (hideMenuOptions: boolean) => void;
 }
 
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   openConfig: false,
   theme: 'dark',
+  hideMenuOptions: false,
   autoTitle: false,
   defaultChatConfig: _defaultChatConfig,
   defaultSystemMessage: _defaultSystemMessage,
@@ -52,4 +55,10 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       defaultSystemMessage: defaultSystemMessage,
     }));
   },
+  setHideMenuOptions: (hideMenuOptions: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      hideMenuOptions: hideMenuOptions,
+    }));
+  },
 });
diff --git a/src/store/store.ts b/src/store/store.ts
index e0be14d..dcce788 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -55,6 +55,7 @@ const useStore = create<StoreState>()(
         prompts: state.prompts,
         defaultChatConfig: state.defaultChatConfig,
         defaultSystemMessage: state.defaultSystemMessage,
+        hideMenuOptions: state.hideMenuOptions,
         firstVisit: state.firstVisit,
       }),
       version: 6,