From 2c2bc141e8b06037694d23cdfa0eebe87585da34 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 21 Dec 2021 06:40:39 +0530
Subject: [PATCH] fix: move search from header to footer - fixed #2033

---
 packages/hoppscotch-app/components/app/Footer.vue  |  6 ++++++
 packages/hoppscotch-app/components/app/Header.vue  |  9 ++-------
 .../components/graphql/RequestOptions.vue          | 14 ++++++++++++++
 .../helpers/backend/types/TeamName.ts              |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 34e201560..c8f4b7cd5 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -168,6 +168,7 @@
     </div>
     <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
     <AppShare :show="showShare" @hide-modal="showShare = false" />
+    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
   </div>
 </template>
 
@@ -181,6 +182,7 @@ import { useI18n } from "~/helpers/utils/composables"
 const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
+const showSearch = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
@@ -190,6 +192,10 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
+defineActionHandler("modals.search.toggle", () => {
+  showSearch.value = !showSearch.value
+})
+
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
 const ZEN_MODE = useSetting("ZEN_MODE")
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index fc1ee2a57..fe368da9f 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -25,7 +25,7 @@
           :title="`${t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click.native="showSearch = true"
+          @click.native="invokeAction('modals.search.toggle')"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -124,7 +124,6 @@
     <AppAnnouncement v-if="!isOnLine" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
   </div>
 </template>
@@ -139,7 +138,7 @@ import {
   useI18n,
   useToast,
 } from "~/helpers/utils/composables"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineActionHandler, invokeAction } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -153,7 +152,6 @@ const toast = useToast()
 const showInstallPrompt = ref(() => Promise.resolve()) // Async no-op till it is initialized
 
 const showSupport = ref(false)
-const showSearch = ref(false)
 const showLogin = ref(false)
 const showTeamsModal = ref(false)
 
@@ -164,9 +162,6 @@ const currentUser = useReadonlyStream(probableUser$, null)
 defineActionHandler("modals.support.toggle", () => {
   showSupport.value = !showSupport.value
 })
-defineActionHandler("modals.search.toggle", () => {
-  showSearch.value = !showSearch.value
-})
 
 onMounted(() => {
   window.addEventListener("online", () => {
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index fb5cc8044..b5bfe60ff 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -15,6 +15,10 @@
           </label>
           <div class="flex">
             <ButtonSecondary
+              v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+              :title="`${t(
+                'request.run'
+              )} <kbd>${getSpecialKey()}</kbd><kbd>G</kbd>`"
               :label="`${t('request.run')}`"
               svg="play"
               class="rounded-none !text-accent !hover:text-accentDark"
@@ -22,6 +26,10 @@
             />
             <ButtonSecondary
               ref="saveRequest"
+              v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
+              :title="`${t(
+                'request.save'
+              )} <kbd>${getSpecialKey()}</kbd><kbd>S</kbd>`"
               :label="`${t('request.save')}`"
               svg="save"
               class="rounded-none"
@@ -296,6 +304,8 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
 import queryCompleter from "~/helpers/editor/completion/gqlQuery"
+import { defineActionHandler } from "~/helpers/actions"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 
@@ -576,4 +586,8 @@ const clearGQLQuery = () => {
 const clearGQLVariables = () => {
   variableString.value = ""
 }
+
+defineActionHandler("request.send-cancel", runQuery)
+defineActionHandler("request.save", saveRequest)
+defineActionHandler("request.reset", clearGQLQuery)
 </script>
diff --git a/packages/hoppscotch-app/helpers/backend/types/TeamName.ts b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
index 0f981db0d..bbcdb6c0a 100644
--- a/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
+++ b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
@@ -6,7 +6,7 @@ interface TeamNameBrand {
 
 export const TeamNameCodec = t.brand(
   t.string,
-  (x): x is t.Branded<string, TeamNameBrand> => x.trim().length > 6,
+  (x): x is t.Branded<string, TeamNameBrand> => x.trim().length >= 6,
   "TeamName"
 )