From d937e537b9f6f8912bf8661f0c4fd336578ff2f3 Mon Sep 17 00:00:00 2001
From: tanchekwei <weiwei1@live.com.my>
Date: Fri, 15 Mar 2024 20:33:52 +0800
Subject: [PATCH] Use modifier + f11 to hide both menu bar and app bar Able to
 show app bar but hide menu bar via setting

---
 src/App.vue                                   | 253 ++++++++++--------
 src/background.js                             |   4 +
 .../BotSettings/CommonBotSettings.vue         |  17 +-
 src/components/BotSettings/settings.const.js  |   1 +
 src/components/SettingsModal.vue              |  26 +-
 .../ShortcutGuide/shortcut.const.js           |  11 +
 src/main.js                                   |   1 +
 src/store/index.js                            |   7 +
 8 files changed, 205 insertions(+), 115 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4fc29709b3..fcce095d0b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,118 +6,132 @@
         v-model:open="isChatDrawerOpen"
         @focus-textarea="focusPromptTextarea"
       ></ChatDrawer>
-      <v-main class="content">
-        <v-app-bar class="header-content pa-0">
-          <!-- Start Header  -->
-          <div class="header-content" v-show="isSelectedResponsesEmpty">
-            <v-app-bar-nav-icon
-              :id="SHORTCUT_CHAT_DRAWER.elementId"
-              variant="text"
-              @click.stop="isChatDrawerOpen = !isChatDrawerOpen"
-              @shortkey="isChatDrawerOpen = !isChatDrawerOpen"
-              v-shortkey="SHORTCUT_CHAT_DRAWER.key"
-            >
-            </v-app-bar-nav-icon>
-            <img
-              :class="{ 'dark-png': store.state.theme === Theme.DARK }"
-              class="logo"
-              src="@/assets/logo-banner.png"
-              alt="ChatALL"
-            />
-          </div>
-          <div
-            class="column-icons header-content"
-            v-show="isSelectedResponsesEmpty"
-          >
-            <img
-              v-for="columnCount in 3"
-              :id="`column-${columnCount}`"
-              :key="columnCount"
-              :src="getColumnImage(columnCount)"
-              @click="changeColumns(columnCount)"
-              @shortkey="changeColumns(columnCount)"
-              v-shortkey="[`f${columnCount}`]"
-              :class="{
-                selected: columns === columnCount,
-                'dark-png': store.state.theme === Theme.DARK,
-              }"
-            />
-          </div>
-          <div
-            class="header-content"
-            style="padding-right: 16px"
-            v-show="isSelectedResponsesEmpty"
-          >
-            <v-icon
-              :id="SHORTCUT_FIND.elementId"
-              class="cursor-pointer"
-              color="primary"
-              icon="mdi-magnify"
-              size="x-large"
-              @click="openFind()"
-            ></v-icon>
-            <v-icon
-              v-shortkey="SHORTCUT_CLEAR_MESSAGES.key"
-              @shortkey="clearMessages"
-              :id="SHORTCUT_CLEAR_MESSAGES.elementId"
-              class="cursor-pointer"
-              color="primary"
-              icon="mdi-broom"
-              size="x-large"
-              @click="clearMessages()"
-            ></v-icon>
-            <v-icon
-              v-shortkey="SHORTCUT_SETTINGS.key"
-              @shortkey="openSettingsModal"
-              :id="SHORTCUT_SETTINGS.elementId"
-              class="cursor-pointer"
-              color="primary"
-              icon="mdi-cog"
-              size="x-large"
-              @click="openSettingsModal()"
-            ></v-icon>
-            <v-icon
-              v-shortkey="SHORTCUT_SHORTCUT_GUIDE.key"
-              @shortkey="toggleShortcutGuide"
-              :id="SHORTCUT_SHORTCUT_GUIDE.elementId"
-              class="cursor-pointer"
-              color="primary"
-              icon="mdi-help"
-              size="x-large"
-              @click="toggleShortcutGuide()"
-            ></v-icon>
-          </div>
-          <!-- End Header  -->
-          <!-- Start Selected Responses  -->
-          <div
-            class="header-content pr-3"
-            style="text-wrap: nowrap"
-            v-show="!isSelectedResponsesEmpty"
+      <v-main class="content" :class="{ paddingTopZero: !isShowAppBar }">
+        <v-slide-y-transition>
+          <v-app-bar
+            :id="SHORTCUT_APP_BAR.elementId"
+            @shortkey="
+              isShowAppBar = !isShowAppBar;
+              ipcRenderer.invoke('set-is-show-menu-bar', isShowAppBar);
+            "
+            v-shortkey="SHORTCUT_APP_BAR.key"
+            v-show="isShowAppBar"
+            :style="{
+              transform: isShowAppBar ? 'translateY(0)' : 'translateY(-100%)',
+            }"
+            class="header-content pa-0"
           >
-            <v-btn icon color="primary" @click="deselectAll">
-              <v-icon>mdi-arrow-left</v-icon>
-            </v-btn>
-            {{
-              $t("header.selectedResponsesCount", {
-                selectedCount: store.state.selectedResponses.length,
-              })
-            }}
-          </div>
-          <div
-            class="header-content overflow-auto"
-            v-show="!isSelectedResponsesEmpty"
-          >
-            <v-btn
-              v-for="action in userActions"
-              color="primary"
-              class="no-text-transform"
-              :text="action.name"
-              :key="action.index"
-              @click="callAction(action)"
-            ></v-btn>
-          </div>
-          <!-- End Selected Responses  -->
-        </v-app-bar>
+            <!-- Start Header  -->
+            <div class="header-content" v-show="isSelectedResponsesEmpty">
+              <v-app-bar-nav-icon
+                :id="SHORTCUT_CHAT_DRAWER.elementId"
+                variant="text"
+                @click.stop="isChatDrawerOpen = !isChatDrawerOpen"
+                @shortkey="isChatDrawerOpen = !isChatDrawerOpen"
+                v-shortkey="SHORTCUT_CHAT_DRAWER.key"
+              >
+              </v-app-bar-nav-icon>
+              <img
+                :class="{ 'dark-png': store.state.theme === Theme.DARK }"
+                class="logo"
+                src="@/assets/logo-banner.png"
+                alt="ChatALL"
+              />
+            </div>
+            <div
+              class="column-icons header-content"
+              v-show="isSelectedResponsesEmpty"
+            >
+              <img
+                v-for="columnCount in 3"
+                :id="`column-${columnCount}`"
+                :key="columnCount"
+                :src="getColumnImage(columnCount)"
+                @click="changeColumns(columnCount)"
+                @shortkey="changeColumns(columnCount)"
+                v-shortkey="[`f${columnCount}`]"
+                :class="{
+                  selected: columns === columnCount,
+                  'dark-png': store.state.theme === Theme.DARK,
+                }"
+              />
+            </div>
+            <div
+              class="header-content"
+              style="padding-right: 16px"
+              v-show="isSelectedResponsesEmpty"
+            >
+              <v-icon
+                :id="SHORTCUT_FIND.elementId"
+                class="cursor-pointer"
+                color="primary"
+                icon="mdi-magnify"
+                size="x-large"
+                @click="openFind()"
+              ></v-icon>
+              <v-icon
+                v-shortkey="SHORTCUT_CLEAR_MESSAGES.key"
+                @shortkey="clearMessages"
+                :id="SHORTCUT_CLEAR_MESSAGES.elementId"
+                class="cursor-pointer"
+                color="primary"
+                icon="mdi-broom"
+                size="x-large"
+                @click="clearMessages()"
+              ></v-icon>
+              <v-icon
+                v-shortkey="SHORTCUT_SETTINGS.key"
+                @shortkey="openSettingsModal"
+                :id="SHORTCUT_SETTINGS.elementId"
+                class="cursor-pointer"
+                color="primary"
+                icon="mdi-cog"
+                size="x-large"
+                @click="openSettingsModal()"
+              ></v-icon>
+              <v-icon
+                v-shortkey="SHORTCUT_SHORTCUT_GUIDE.key"
+                @shortkey="toggleShortcutGuide"
+                :id="SHORTCUT_SHORTCUT_GUIDE.elementId"
+                class="cursor-pointer"
+                color="primary"
+                icon="mdi-help"
+                size="x-large"
+                @click="toggleShortcutGuide()"
+              ></v-icon>
+            </div>
+            <!-- End Header  -->
+            <!-- Start Selected Responses  -->
+            <div
+              class="header-content pr-3"
+              style="text-wrap: nowrap"
+              v-show="!isSelectedResponsesEmpty"
+            >
+              <v-btn icon color="primary" @click="deselectAll">
+                <v-icon>mdi-arrow-left</v-icon>
+              </v-btn>
+              {{
+                $t("header.selectedResponsesCount", {
+                  selectedCount: store.state.selectedResponses.length,
+                })
+              }}
+            </div>
+            <div
+              class="header-content overflow-auto"
+              v-show="!isSelectedResponsesEmpty"
+            >
+              <v-btn
+                v-for="action in userActions"
+                color="primary"
+                class="no-text-transform"
+                :text="action.name"
+                :key="action.index"
+                @click="callAction(action)"
+              ></v-btn>
+            </div>
+            <!-- End Selected Responses  -->
+          </v-app-bar>
+        </v-slide-y-transition>
         <FindModal ref="findRef"></FindModal>
 
         <ChatMessages :chat="currentChat" :columns="columns"></ChatMessages>
@@ -157,6 +171,7 @@ import {
   SHORTCUT_SHORTCUT_GUIDE,
   SHORTCUT_CLEAR_MESSAGES,
   SHORTCUT_CHAT_DRAWER,
+  SHORTCUT_APP_BAR,
 } from "./components/ShortcutGuide/shortcut.const";
 
 import i18n from "./i18n";
@@ -208,6 +223,7 @@ const shortcutGuideRef = ref(null);
 const isShortcutGuideOpen = ref(false);
 const isSettingsOpen = ref(false);
 const isChatDrawerOpen = ref(store.state.isChatDrawerOpen);
+const isShowAppBar = ref(store.state.general.isShowAppBar);
 const chatDrawerRef = ref();
 const isSelectedResponsesEmpty = ref(true);
 const isChatActionOpen = ref(false);
@@ -236,9 +252,10 @@ function openFind() {
 }
 
 function toggleShortcutGuide() {
-  if (!isChatDrawerOpen.value) {
+  if (!isChatDrawerOpen.value || !isShowAppBar.value) {
     // open chat drawer to show new chat shortcut
     isChatDrawerOpen.value = true;
+    isShowAppBar.value = true;
     setTimeout(() => {
       shortcutGuideRef.value.toggleShortcutGuide();
     }, 200);
@@ -281,6 +298,15 @@ watch(
   },
 );
 
+watch(
+  () => isShowAppBar.value,
+  () =>
+    store.commit("setGeneral", {
+      isShowAppBar: isShowAppBar.value,
+      isShowMenuBar: isShowAppBar.value,
+    }),
+);
+
 function getColumnImage(columnCount) {
   return require(`@/assets/column-${columnCount}.svg`);
 }
@@ -391,4 +417,7 @@ img.selected {
 .no-text-transform {
   text-transform: none !important;
 }
+.paddingTopZero {
+  padding-top: 0!important;
+}
 </style>
diff --git a/src/background.js b/src/background.js
index ef8f5911d4..a8d7c1650e 100644
--- a/src/background.js
+++ b/src/background.js
@@ -365,6 +365,10 @@ ipcMain.handle("save-proxy-and-restart", async () => {
 });
 // Proxy Setting End
 
+ipcMain.handle("set-is-show-menu-bar", (_, isShowMenuBar) => {
+  mainWindow.setMenuBarVisibility(isShowMenuBar);
+});
+
 ipcMain.handle("get-cookies", async (event, filter) => {
   return await getCookies(filter);
 });
diff --git a/src/components/BotSettings/CommonBotSettings.vue b/src/components/BotSettings/CommonBotSettings.vue
index b772e469c1..6a5b7ef01a 100644
--- a/src/components/BotSettings/CommonBotSettings.vue
+++ b/src/components/BotSettings/CommonBotSettings.vue
@@ -24,7 +24,7 @@
         "
       ></v-text-field>
       <v-select
-        v-if="setting.type === Type.Select"
+        v-else-if="setting.type === Type.Select"
         v-model="settingState[setting.name]"
         outlined
         dense
@@ -78,7 +78,7 @@
         </template>
       </v-slider>
       <v-combobox
-        v-if="setting.type === Type.Combobox"
+        v-else-if="setting.type === Type.Combobox"
         v-model="settingState[setting.name]"
         outlined
         dense
@@ -90,6 +90,19 @@
           store.commit(mutationType, { [setting.name]: $event })
         "
       ></v-combobox>
+      <v-checkbox
+        v-else-if="setting.type === Type.Checkbox"
+        v-model="settingState[setting.name]"
+        outlined
+        dense
+        color="primary"
+        :label="setting.label"
+        :placeholder="setting.placeholder"
+        :hide-details="setting.hideDetails"
+        @update:model-value="
+          store.commit(mutationType, { [setting.name]: $event })
+        "
+      ></v-checkbox>
     </template>
   </v-list-item>
 </template>
diff --git a/src/components/BotSettings/settings.const.js b/src/components/BotSettings/settings.const.js
index 3a9eed47eb..cf04b5c51c 100644
--- a/src/components/BotSettings/settings.const.js
+++ b/src/components/BotSettings/settings.const.js
@@ -3,4 +3,5 @@ export const Type = {
   Slider: 1,
   Select: 2,
   Combobox: 3,
+  Checkbox: 4,
 };
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index a15aadbb6a..bf33b53ec8 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -59,6 +59,11 @@
                     @update:model-value="setCurrentMode($event)"
                   ></v-select>
                 </v-list-item>
+                <CommonBotSettings
+                  :settings="settings"
+                  brand-id="general"
+                  mutation-type="setGeneral"
+                ></CommonBotSettings>
               </div>
 
               <div v-if="tab == 'proxy'">
@@ -84,13 +89,15 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { useTheme } from "vuetify";
+import { Type } from "@/components/BotSettings/settings.const";
 
 import ProxySettings from "@/components/ProxySetting.vue";
 import ChatSettings from "@/components/ChatSetting.vue";
+import CommonBotSettings from "@/components/BotSettings/CommonBotSettings.vue";
 
 import ChatGPTBotSettings from "@/components/BotSettings/ChatGPTBotSettings.vue";
 import OpenAIAPIBotSettings from "@/components/BotSettings/OpenAIAPIBotSettings.vue";
@@ -196,6 +203,23 @@ const closeDialog = () => {
   emit("update:open", false);
   emit("done");
 };
+
+const settings = [
+  {
+    type: Type.Checkbox,
+    name: "isShowMenuBar",
+    label: "Show Menu Bar",
+  },
+];
+
+watch(
+  () => store.state.general.isShowMenuBar,
+  () =>
+    ipcRenderer.invoke(
+      "set-is-show-menu-bar",
+      store.state.general.isShowMenuBar,
+    ),
+);
 </script>
 
 <style scoped>
diff --git a/src/components/ShortcutGuide/shortcut.const.js b/src/components/ShortcutGuide/shortcut.const.js
index c566480275..7bb84fd0f6 100644
--- a/src/components/ShortcutGuide/shortcut.const.js
+++ b/src/components/ShortcutGuide/shortcut.const.js
@@ -93,6 +93,16 @@ export const SHORTCUT_PROMPT_MANAGEMENT = {
   flexDirection: "column",
 };
 
+export const SHORTCUT_APP_BAR = {
+  elementId: "app-bar",
+  key: [modifier, "f11"],
+  offset: {
+    top: 20,
+    left: -200,
+  },
+  alignHorizontallyCenter: true,
+};
+
 export const SHORTCUT_LIST = [
   SHORTCUT_FIND,
   SHORTCUT_SETTINGS,
@@ -104,6 +114,7 @@ export const SHORTCUT_LIST = [
   SHORTCUT_NEW_CHAT,
   SHORTCUT_PROMPT_MANAGEMENT,
   SHORTCUT_PROMPT_PRE_NEXT,
+  SHORTCUT_APP_BAR,
   {
     elementId: "column-1",
     key: ["f1"],
diff --git a/src/main.js b/src/main.js
index 0297b1b4cb..8712372f73 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,7 @@ await Chats.addFirstChatIfEmpty();
 const defaultTheme = await resolveTheme(store.state.mode, ipcRenderer);
 store.commit("setTheme", defaultTheme);
 applyTheme(defaultTheme);
+ipcRenderer.invoke("set-is-show-menu-bar", store.state.general.isShowMenuBar);
 
 const vuetify = createVuetify({
   components: { ...components },
diff --git a/src/store/index.js b/src/store/index.js
index 150aff230a..2eb635f3d4 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -114,6 +114,10 @@ export default createStore({
     chat: {
       updateDebounceInterval: 100,
     },
+    general: {
+      isShowMenuBar: true,
+      isShowAppBar: true,
+    },
   },
   mutations: {
     changeColumns(state, n) {
@@ -254,6 +258,9 @@ export default createStore({
     setMode(state, mode) {
       state.mode = mode;
     },
+    setGeneral(state, values) {
+      state.general = { ...state.general, ...values };
+    },
     createChat(state) {
       const { favBots } = state.chats[state.currentChatIndex];
       const chatIndex =