From f94ee7c73fff5a889c262a5f72660b3f9bb8673b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 20 Dec 2021 14:40:38 +0530
Subject: [PATCH] refactor: remove shortcut hints in mobile devices

---
 .../hoppscotch-app/assets/scss/styles.scss    |  3 +-
 .../hoppscotch-app/components/app/Footer.vue  | 32 ++++++----
 .../hoppscotch-app/components/app/Header.vue  | 24 ++++---
 .../components/app/PowerSearch.vue            | 60 +++++++++---------
 .../components/button/Primary.vue             |  2 +-
 .../components/button/Secondary.vue           |  2 +-
 .../collections/graphql/Collection.vue        | 32 ++++++----
 .../components/collections/graphql/Folder.vue | 32 ++++++----
 .../collections/graphql/Request.vue           | 30 ++++++---
 .../components/collections/my/Collection.vue  | 38 +++++++-----
 .../components/collections/my/Folder.vue      | 58 ++++++++++-------
 .../components/collections/my/Request.vue     | 32 ++++++----
 .../collections/teams/Collection.vue          | 62 ++++++++++++-------
 .../components/collections/teams/Folder.vue   | 44 ++++++++-----
 .../components/collections/teams/Request.vue  | 41 +++++++-----
 .../components/environments/Environment.vue   | 30 ++++++---
 .../components/http/Authorization.vue         | 46 +++++++++-----
 .../components/http/Request.vue               | 29 ++++++---
 .../components/profile/Picture.vue            |  7 ++-
 .../components/smart/AutoComplete.vue         |  1 -
 .../hoppscotch-app/components/smart/Item.vue  |  4 +-
 .../hoppscotch-app/components/teams/Team.vue  | 52 +++++++++-------
 packages/hoppscotch-app/pages/profile.vue     |  2 +-
 23 files changed, 410 insertions(+), 253 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 2fa853337..c71d63167 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -148,7 +148,8 @@ a {
   font-size: 88%;
 
   kbd {
-    @apply inline-flex;
+    @apply hidden;
+    @apply sm:inline-flex;
     @apply font-sans;
     @apply bg-gray-500;
     @apply bg-opacity-45;
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index b57b7ff41..34e201560 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -31,7 +31,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -44,9 +44,10 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.d="$refs.documentation.$el.click()"
-              @keyup.s="$refs.shortcuts.$el.click()"
-              @keyup.c="$refs.chat.$el.click()"
+              @keyup.d="documentation.$el.click()"
+              @keyup.s="shortcuts.$el.click()"
+              @keyup.c="chat.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
                 ref="documentation"
@@ -55,7 +56,7 @@
                 to="https://docs.hoppscotch.io"
                 blank
                 :shortcut="['D']"
-                @click.native="$refs.options.tippy().hide()"
+                @click.native="options.tippy().hide()"
               />
               <SmartItem
                 ref="shortcuts"
@@ -65,7 +66,7 @@
                 @click.native="
                   () => {
                     showShortcuts = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -77,7 +78,7 @@
                 @click.native="
                   () => {
                     chatWithUs()
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -87,14 +88,14 @@
                 :label="`${t('app.github')}`"
                 to="https://github.com/hoppscotch/hoppscotch"
                 blank
-                @click.native="$refs.options.tippy().hide()"
+                @click.native="options.tippy().hide()"
               />
               <SmartItem
                 svg="twitter"
                 :label="`${t('app.twitter')}`"
                 to="https://hoppscotch.io/twitter"
                 blank
-                @click.native="$refs.options.tippy().hide()"
+                @click.native="options.tippy().hide()"
               />
               <SmartItem
                 svg="user-plus"
@@ -102,7 +103,7 @@
                 @click.native="
                   () => {
                     showShare = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -111,14 +112,14 @@
                 :label="`${t('app.terms_and_privacy')}`"
                 to="https://docs.hoppscotch.io/privacy"
                 blank
-                @click.native="$refs.options.tippy().hide()"
+                @click.native="options.tippy().hide()"
               />
               <SmartItem
                 svg="gift"
                 :label="`${t('app.whats_new')}`"
                 to="https://docs.hoppscotch.io/changelog"
                 blank
-                @click.native="$refs.options.tippy().hide()"
+                @click.native="options.tippy().hide()"
               />
               <!-- <SmartItem :label="t('app.status')" /> -->
               <div class="flex opacity-50 py-2 px-4">
@@ -222,4 +223,11 @@ const nativeShare = () => {
 const chatWithUs = () => {
   showChat()
 }
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const documentation = ref<any | null>(null)
+const shortcuts = ref<any | null>(null)
+const chat = ref<any | null>(null)
+const options = ref<any | null>(null)
 </script>
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 2d4f19fd9..fc1ee2a57 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -58,12 +58,12 @@
           />
           <span class="px-2">
             <tippy
-              ref="user"
+              ref="options"
               interactive
               trigger="click"
               theme="popover"
               arrow
-              :on-shown="() => $refs.tippyActions.focus()"
+              :on-shown="() => tippyActions.focus()"
             >
               <template #trigger>
                 <ProfilePicture
@@ -89,9 +89,10 @@
                 ref="tippyActions"
                 class="flex flex-col focus:outline-none"
                 tabindex="0"
-                @keyup.enter="$refs.profile.$el.click()"
-                @keyup.s="$refs.settings.$el.click()"
-                @keyup.l="$refs.logout.$el.click()"
+                @keyup.enter="profile.$el.click()"
+                @keyup.s="settings.$el.click()"
+                @keyup.l="logout.$el.click()"
+                @keyup.escape="options.tippy().hide()"
               >
                 <SmartItem
                   ref="profile"
@@ -99,7 +100,7 @@
                   svg="user"
                   :label="t('navigation.profile')"
                   :shortcut="['↩']"
-                  @click.native="$refs.user.tippy().hide()"
+                  @click.native="options.tippy().hide()"
                 />
                 <SmartItem
                   ref="settings"
@@ -107,12 +108,12 @@
                   svg="settings"
                   :label="t('navigation.settings')"
                   :shortcut="['S']"
-                  @click.native="$refs.user.tippy().hide()"
+                  @click.native="options.tippy().hide()"
                 />
                 <FirebaseLogout
                   ref="logout"
                   :shortcut="['L']"
-                  @confirm-logout="$refs.user.tippy().hide()"
+                  @confirm-logout="options.tippy().hide()"
                 />
               </div>
             </tippy>
@@ -203,4 +204,11 @@ onMounted(() => {
     })
   }
 })
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const profile = ref<any | null>(null)
+const settings = ref<any | null>(null)
+const logout = ref<any | null>(null)
+const options = ref<any | null>(null)
 </script>
diff --git a/packages/hoppscotch-app/components/app/PowerSearch.vue b/packages/hoppscotch-app/components/app/PowerSearch.vue
index 6c52873d5..e3aa8524e 100644
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -6,35 +6,37 @@
     @close="$emit('hide-modal')"
   >
     <template #body>
-      <input
-        id="command"
-        v-model="search"
-        v-focus
-        type="text"
-        autocomplete="off"
-        name="command"
-        :placeholder="`${t('app.type_a_command_search')}`"
-        class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
-      />
-      <div
-        class="border-b border-dividerLight flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar"
-      >
-        <div class="flex items-center">
-          <kbd class="shortcut-key">↑</kbd>
-          <kbd class="shortcut-key">↓</kbd>
-          <span class="ml-2 truncate">
-            {{ t("action.to_navigate") }}
-          </span>
-          <kbd class="shortcut-key">↩</kbd>
-          <span class="ml-2 truncate">
-            {{ t("action.to_select") }}
-          </span>
-        </div>
-        <div class="flex items-center">
-          <kbd class="shortcut-key">ESC</kbd>
-          <span class="ml-2 truncate">
-            {{ t("action.to_close") }}
-          </span>
+      <div class="flex flex-col border-b border-dividerLight">
+        <input
+          id="command"
+          v-model="search"
+          v-focus
+          type="text"
+          autocomplete="off"
+          name="command"
+          :placeholder="`${t('app.type_a_command_search')}`"
+          class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
+        />
+        <div
+          class="flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar <sm:hidden"
+        >
+          <div class="flex items-center">
+            <kbd class="shortcut-key">↑</kbd>
+            <kbd class="shortcut-key">↓</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_navigate") }}
+            </span>
+            <kbd class="shortcut-key">↩</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_select") }}
+            </span>
+          </div>
+          <div class="flex items-center">
+            <kbd class="shortcut-key">ESC</kbd>
+            <span class="ml-2 truncate">
+              {{ t("action.to_close") }}
+            </span>
+          </div>
         </div>
       </div>
       <AppFuse
diff --git a/packages/hoppscotch-app/components/button/Primary.vue b/packages/hoppscotch-app/components/button/Primary.vue
index b0b33d4b8..a6049367c 100644
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -52,7 +52,7 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2">
+      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
diff --git a/packages/hoppscotch-app/components/button/Secondary.vue b/packages/hoppscotch-app/components/button/Secondary.vue
index ada40b042..7d8218028 100644
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -51,7 +51,7 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2">
+      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index 6c38c426b..0e2052e44 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -47,7 +47,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -60,12 +60,13 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
                 :label="`${$t('folder.new')}`"
                 :shortcut="['N']"
@@ -74,7 +75,7 @@
                     $emit('add-folder', {
                       path: `${collectionIndex}`,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -86,19 +87,19 @@
                 @click.native="
                   () => {
                     $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -174,7 +175,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import {
   removeGraphqlCollection,
   moveGraphqlRequest,
@@ -190,6 +191,15 @@ export default defineComponent({
     doc: Boolean,
     isFiltered: Boolean,
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       showChildren: false,
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index e6e7b5998..b3d6c506e 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -43,7 +43,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -56,19 +56,20 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
                 :label="`${$t('folder.new')}`"
                 :shortcut="['N']"
                 @click.native="
                   () => {
                     $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -80,19 +81,19 @@
                 @click.native="
                   () => {
                     $emit('edit-folder', { folder, folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -171,7 +172,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
 export default defineComponent({
@@ -187,6 +188,15 @@ export default defineComponent({
     doc: Boolean,
     isFiltered: Boolean,
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       showChildren: false,
diff --git a/packages/hoppscotch-app/components/collections/graphql/Request.vue b/packages/hoppscotch-app/components/collections/graphql/Request.vue
index 28c6f0d20..049da54f9 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -7,7 +7,7 @@
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -43,7 +43,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -56,9 +56,10 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.d="$refs.duplicate.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.d="duplicate.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
                 ref="edit"
@@ -72,7 +73,7 @@
                       requestIndex,
                       folderPath,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -88,19 +89,19 @@
                       requestIndex,
                       folderPath,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -119,7 +120,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
@@ -135,6 +136,15 @@ export default defineComponent({
     requestIndex: { type: Number, default: null },
     doc: Boolean,
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      duplicate: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       dragging: false,
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 6b2d745f0..c8ae445bc 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -65,7 +65,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -78,12 +78,13 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
                 :label="$t('folder.new')"
                 :shortcut="['N']"
@@ -93,7 +94,7 @@
                       folder: collection,
                       path: `${collectionIndex}`,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -105,19 +106,19 @@
                 @click.native="
                   () => {
                     $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="$t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -182,7 +183,7 @@
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.collection')"
+            :alt="`${$t('empty.collection')}`"
           />
           <span class="text-center">
             {{ $t("empty.collection") }}
@@ -199,8 +200,8 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { moveRESTRequest } from "~/newstore/collections"
 
 export default defineComponent({
@@ -214,6 +215,15 @@ export default defineComponent({
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       showChildren: false,
@@ -226,7 +236,7 @@ export default defineComponent({
     }
   },
   computed: {
-    isSelected() {
+    isSelected(): boolean {
       return (
         this.picked &&
         this.picked.pickedType === "my-collection" &&
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 01d1776e7..f25334f73 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
-          :title="$t('folder.new')"
+          :title="t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="$emit('add-folder', { folder, path: folderPath })"
         />
@@ -43,12 +43,12 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.more')"
+                :title="t('action.more')"
                 svg="more-vertical"
               />
             </template>
@@ -56,26 +56,27 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
-                :label="$t('folder.new')"
+                :label="t('folder.new')"
                 :shortcut="['N']"
                 @click.native="
                   () => {
                     $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
                 ref="edit"
                 svg="edit"
-                :label="$t('action.edit')"
+                :label="t('action.edit')"
                 :shortcut="['E']"
                 @click.native="
                   () => {
@@ -85,19 +86,19 @@
                       collectionIndex,
                       folderPath,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
-                :label="$t('action.delete')"
+                :label="t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -162,25 +163,26 @@
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.folder')"
+            :alt="`${t('empty.folder')}`"
           />
           <span class="text-center">
-            {{ $t("empty.folder") }}
+            {{ t("empty.folder") }}
           </span>
         </div>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_folder')"
+      :title="t('confirm.remove_folder')"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { useI18n } from "~/helpers/utils/composables"
 import {
   removeRESTFolder,
   removeRESTRequest,
@@ -200,6 +202,18 @@ export default defineComponent({
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    const t = useI18n()
+
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+      t,
+    }
+  },
   data() {
     return {
       showChildren: false,
@@ -210,7 +224,7 @@ export default defineComponent({
     }
   },
   computed: {
-    isSelected() {
+    isSelected(): boolean {
       return (
         this.picked &&
         this.picked.pickedType === "my-folder" &&
@@ -248,7 +262,7 @@ export default defineComponent({
         this.$emit("select", { picked: null })
       }
       removeRESTFolder(this.folderPath)
-      this.$toast.success(this.$t("state.deleted"))
+      this.$toast.success(`${this.$t("state.deleted")}`)
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging
diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 1e6aa77c2..3cff30858 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -7,7 +7,7 @@
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -72,9 +72,10 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.d="$refs.duplicate.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.d="duplicate.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
                 ref="edit"
@@ -91,7 +92,7 @@
                       requestIndex,
                       folderPath,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -110,19 +111,19 @@
                       requestIndex,
                       folderPath,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="$t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -140,8 +141,8 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -168,6 +169,11 @@ export default defineComponent({
     const active = useReadonlyStream(restSaveContext$, null)
     return {
       active,
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      duplicate: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
     }
   },
   data() {
@@ -184,7 +190,7 @@ export default defineComponent({
     }
   },
   computed: {
-    isSelected() {
+    isSelected(): boolean {
       return (
         this.picked &&
         this.picked.pickedType === "my-request" &&
@@ -235,7 +241,7 @@ export default defineComponent({
         requestIndex: this.$props.requestIndex,
       })
     },
-    getRequestLabelColor(method) {
+    getRequestLabelColor(method: string): string {
       return (
         this.requestMethodLabels[method.toLowerCase()] ||
         this.requestMethodLabels.default
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index f917c7fc2..20e9febc5 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -32,7 +32,7 @@
         <ButtonSecondary
           v-if="doc && !selected"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import.title')"
+          :title="t('import.title')"
           svg="circle"
           color="green"
           @click.native="$emit('select-collection')"
@@ -40,7 +40,7 @@
         <ButtonSecondary
           v-if="doc && selected"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('action.remove')"
+          :title="t('action.remove')"
           svg="check-circle"
           color="green"
           @click.native="$emit('unselect-collection')"
@@ -49,7 +49,7 @@
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tippy="{ theme: 'tooltip' }"
           svg="folder-plus"
-          :title="$t('folder.new')"
+          :title="t('folder.new')"
           class="hidden group-hover:inline-flex"
           @click.native="
             $emit('add-folder', {
@@ -66,12 +66,12 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('action.more')"
+                :title="t('action.more')"
                 svg="more-vertical"
               />
             </template>
@@ -79,14 +79,15 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
-                :label="$t('folder.new')"
+                :label="t('folder.new')"
                 :shortcut="['N']"
                 @click.native="
                   () => {
@@ -94,31 +95,31 @@
                       folder: collection,
                       path: `${collectionIndex}`,
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
                 ref="edit"
                 svg="edit"
-                :label="$t('action.edit')"
+                :label="t('action.edit')"
                 :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-collection')
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
-                :label="$t('action.delete')"
+                :label="t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -181,27 +182,28 @@
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.collection')"
+            :alt="`${t('empty.collection')}`"
           />
           <span class="text-center">
-            {{ $t("empty.collection") }}
+            {{ t("empty.collection") }}
           </span>
         </div>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('confirm.remove_collection')"
+      :title="t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
+import { useI18n } from "~/helpers/utils/composables"
 
 export default defineComponent({
   props: {
@@ -214,6 +216,18 @@ export default defineComponent({
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    const t = useI18n()
+
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+      t,
+    }
+  },
   data() {
     return {
       showChildren: false,
@@ -226,7 +240,7 @@ export default defineComponent({
     }
   },
   computed: {
-    isSelected() {
+    isSelected(): boolean {
       return (
         this.picked &&
         this.picked.pickedType === "teams-collection" &&
@@ -281,7 +295,7 @@ export default defineComponent({
         this.collection.id
       )()
       if (E.isLeft(moveRequestResult))
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
     },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index f33000be7..6d8e8f4ff 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -8,7 +8,7 @@
       @drop="dragging = false"
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
@@ -45,7 +45,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -58,19 +58,20 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.n="$refs.folder.$el.click()"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.n="folderAction.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
-                ref="folder"
+                ref="folderAction"
                 svg="folder-plus"
                 :label="$t('folder.new')"
                 :shortcut="['N']"
                 @click.native="
                   () => {
                     $emit('add-folder', { folder, path: folderPath })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -87,19 +88,19 @@
                       collectionIndex,
                       folderPath: '',
                     })
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="$t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
-                    $refs.options.tippy().hide()
+                    options.tippy().hide()
                   }
                 "
               />
@@ -160,7 +161,7 @@
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.folder')"
+            :alt="`${$t('empty.folder')}`"
           />
           <span class="text-center">
             {{ $t("empty.folder") }}
@@ -177,8 +178,8 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { moveRESTTeamRequest } from "~/helpers/backend/mutations/TeamRequest"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -196,6 +197,15 @@ export default defineComponent({
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      folderAction: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       showChildren: false,
@@ -206,7 +216,7 @@ export default defineComponent({
     }
   },
   computed: {
-    isSelected() {
+    isSelected(): boolean {
       return (
         this.picked &&
         this.picked.pickedType === "teams-folder" &&
@@ -247,11 +257,11 @@ export default defineComponent({
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {
-            this.$toast.success(this.$t("state.deleted"))
+            this.$toast.success(`${this.$t("state.deleted")}`)
             this.$emit("update-team-collections")
           })
           .catch((e) => {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            this.$toast.error(`${this.$t("error.something_went_wrong")}`)
             console.error(e)
           })
         this.$emit("update-team-collections")
@@ -268,7 +278,7 @@ export default defineComponent({
         this.folder.id
       )()
       if (E.isLeft(moveRequestResult))
-        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.$toast.error(`${this.$t("error.something_went_wrong")}`)
     },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
       this.$emit("remove-request", {
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index 821488cd8..73f227107 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -7,7 +7,7 @@
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
-      @contextmenu.prevent="$refs.options.tippy().show()"
+      @contextmenu.prevent="options.tippy().show()"
     >
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
@@ -59,7 +59,7 @@
             trigger="click"
             theme="popover"
             arrow
-            :on-shown="() => $refs.tippyActions.focus()"
+            :on-shown="() => tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -72,8 +72,9 @@
               ref="tippyActions"
               class="flex flex-col focus:outline-none"
               tabindex="0"
-              @keyup.e="$refs.edit.$el.click()"
-              @keyup.delete="$refs.delete.$el.click()"
+              @keyup.e="edit.$el.click()"
+              @keyup.delete="deleteAction.$el.click()"
+              @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
                 ref="edit"
@@ -81,24 +82,28 @@
                 :label="$t('action.edit')"
                 :shortcut="['E']"
                 @click.native="
-                  $emit('edit-request', {
-                    collectionIndex,
-                    folderIndex,
-                    folderName,
-                    request,
-                    requestIndex,
-                  })
-                  $refs.options.tippy().hide()
+                  () => {
+                    $emit('edit-request', {
+                      collectionIndex,
+                      folderIndex,
+                      folderName,
+                      request,
+                      requestIndex,
+                    })
+                    options.tippy().hide()
+                  }
                 "
               />
               <SmartItem
-                ref="delete"
+                ref="deleteAction"
                 svg="trash-2"
                 :label="$t('action.delete')"
                 :shortcut="['⌫']"
                 @click.native="
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
+                  () => {
+                    confirmRemove = true
+                    options.tippy().hide()
+                  }
                 "
               />
             </div>
@@ -116,7 +121,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { translateToNewRequest } from "@hoppscotch/data"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
@@ -142,6 +147,10 @@ export default defineComponent({
     const active = useReadonlyStream(restSaveContext$, null)
     return {
       active,
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
     }
   },
   data() {
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index 0f6bd93b8..a711cbce9 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex items-stretch group"
-    @contextmenu.prevent="$refs.options.tippy().show()"
+    @contextmenu.prevent="options.tippy().show()"
   >
     <span
       class="cursor-pointer flex px-4 items-center justify-center"
@@ -24,7 +24,7 @@
         trigger="click"
         theme="popover"
         arrow
-        :on-shown="() => $refs.tippyActions.focus()"
+        :on-shown="() => tippyActions.focus()"
       >
         <template #trigger>
           <ButtonSecondary
@@ -37,11 +37,12 @@
           ref="tippyActions"
           class="flex flex-col focus:outline-none"
           tabindex="0"
-          @keyup.e="$refs.edit.$el.click()"
-          @keyup.d="$refs.duplicate.$el.click()"
+          @keyup.e="edit.$el.click()"
+          @keyup.d="duplicate.$el.click()"
           @keyup.delete="
-            !(environmentIndex === 'Global') ? $refs.delete.$el.click() : null
+            !(environmentIndex === 'Global') ? deleteAction.$el.click() : null
           "
+          @keyup.escape="options.tippy().hide()"
         >
           <SmartItem
             ref="edit"
@@ -51,7 +52,7 @@
             @click.native="
               () => {
                 $emit('edit-environment')
-                $refs.options.tippy().hide()
+                options.tippy().hide()
               }
             "
           />
@@ -63,20 +64,20 @@
             @click.native="
               () => {
                 duplicateEnvironment()
-                $refs.options.tippy().hide()
+                options.tippy().hide()
               }
             "
           />
           <SmartItem
             v-if="!(environmentIndex === 'Global')"
-            ref="delete"
+            ref="deleteAction"
             svg="trash-2"
             :label="`${$t('action.delete')}`"
             :shortcut="['⌫']"
             @click.native="
               () => {
                 confirmRemove = true
-                $refs.options.tippy().hide()
+                options.tippy().hide()
               }
             "
           />
@@ -93,7 +94,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 import {
   deleteEnvironment,
   duplicateEnvironment,
@@ -111,6 +112,15 @@ export default defineComponent({
       default: null,
     },
   },
+  setup() {
+    return {
+      tippyActions: ref<any | null>(null),
+      options: ref<any | null>(null),
+      edit: ref<any | null>(null),
+      duplicate: ref<any | null>(null),
+      deleteAction: ref<any | null>(null),
+    }
+  },
   data() {
     return {
       confirmRemove: false,
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 61043e534..c5bcb8d90 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -30,8 +30,10 @@
                 : 'radio_button_unchecked'
             "
             @click.native="
-              authType = 'none'
-              $refs.authTypeOptions.tippy().hide()
+              () => {
+                authType = 'none'
+                authTypeOptions.tippy().hide()
+              }
             "
           />
           <SmartItem
@@ -42,8 +44,10 @@
                 : 'radio_button_unchecked'
             "
             @click.native="
-              authType = 'basic'
-              $refs.authTypeOptions.tippy().hide()
+              () => {
+                authType = 'basic'
+                authTypeOptions.tippy().hide()
+              }
             "
           />
           <SmartItem
@@ -54,8 +58,10 @@
                 : 'radio_button_unchecked'
             "
             @click.native="
-              authType = 'bearer'
-              $refs.authTypeOptions.tippy().hide()
+              () => {
+                authType = 'bearer'
+                authTypeOptions.tippy().hide()
+              }
             "
           />
           <SmartItem
@@ -66,8 +72,10 @@
                 : 'radio_button_unchecked'
             "
             @click.native="
-              authType = 'oauth-2'
-              $refs.authTypeOptions.tippy().hide()
+              () => {
+                authType = 'oauth-2'
+                authTypeOptions.tippy().hide()
+              }
             "
           />
           <SmartItem
@@ -78,8 +86,10 @@
                 : 'radio_button_unchecked'
             "
             @click.native="
-              authType = 'api-key'
-              $refs.authTypeOptions.tippy().hide()
+              () => {
+                authType = 'api-key'
+                authTypeOptions.tippy().hide()
+              }
             "
           />
         </tippy>
@@ -215,8 +225,10 @@
                 "
                 :label="'Headers'"
                 @click.native="
-                  addTo = 'Headers'
-                  $refs.addToOptions.tippy().hide()
+                  () => {
+                    addTo = 'Headers'
+                    addToOptions.tippy().hide()
+                  }
                 "
               />
               <SmartItem
@@ -227,8 +239,10 @@
                 "
                 :label="'Query params'"
                 @click.native="
-                  addTo = 'Query params'
-                  $refs.addToOptions.tippy().hide()
+                  () => {
+                    addTo = 'Query params'
+                    addToOptions.tippy().hide()
+                  }
                 "
               />
             </tippy>
@@ -253,7 +267,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref } from "@nuxtjs/composition-api"
+import { computed, defineComponent, ref, Ref } from "@nuxtjs/composition-api"
 import {
   HoppRESTAuthBasic,
   HoppRESTAuthBearer,
@@ -314,6 +328,8 @@ export default defineComponent({
       apiKey,
       apiValue,
       addTo,
+      authTypeOptions: ref<any | null>(null),
+      addToOptions: ref<any | null>(null),
     }
   },
 })
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index c7db154d1..5201ee9c0 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -69,7 +69,7 @@
           trigger="click"
           theme="popover"
           arrow
-          :on-shown="() => $refs.sendTippyActions.focus()"
+          :on-shown="() => sendTippyActions.focus()"
         >
           <template #trigger>
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
@@ -78,12 +78,13 @@
             ref="sendTippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
-            @keyup.c="$refs.import.$el.click()"
-            @keyup.s="$refs.show.$el.click()"
-            @keyup.delete="$refs.clearAll.$el.click()"
+            @keyup.c="curl.$el.click()"
+            @keyup.s="show.$el.click()"
+            @keyup.delete="clearAll.$el.click()"
+            @keyup.escape="sendOptions.tippy().hide()"
           >
             <SmartItem
-              ref="import"
+              ref="curl"
               :label="`${t('import.curl')}`"
               svg="file-code"
               :shortcut="['C']"
@@ -139,7 +140,7 @@
           trigger="click"
           theme="popover"
           arrow
-          :on-shown="() => $refs.saveTippyActions.focus()"
+          :on-shown="() => saveTippyActions.focus()"
         >
           <template #trigger>
             <ButtonSecondary
@@ -152,8 +153,9 @@
             ref="saveTippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
-            @keyup.c="$refs.copyRequest.$el.click()"
-            @keyup.s="$refs.saveRequest.$el.click()"
+            @keyup.c="copyRequestAction.$el.click()"
+            @keyup.s="saveRequestAction.$el.click()"
+            @keyup.escape="saveOptions.tippy().hide()"
           >
             <input
               id="request-name"
@@ -166,7 +168,7 @@
               @keyup.enter="saveOptions.tippy().hide()"
             />
             <SmartItem
-              ref="copyRequest"
+              ref="copyRequestAction"
               :label="shareButtonText"
               :svg="copyLinkIcon"
               :loading="fetchingShareLink"
@@ -178,7 +180,7 @@
               "
             />
             <SmartItem
-              ref="saveRequest"
+              ref="saveRequestAction"
               :label="`${t('request.save_as')}`"
               svg="folder-plus"
               :shortcut="['S']"
@@ -279,6 +281,13 @@ const hasNavigatorShare = !!navigator.share
 const methodOptions = ref<any | null>(null)
 const saveOptions = ref<any | null>(null)
 const sendOptions = ref<any | null>(null)
+const sendTippyActions = ref<any | null>(null)
+const saveTippyActions = ref<any | null>(null)
+const curl = ref<any | null>(null)
+const show = ref<any | null>(null)
+const clearAll = ref<any | null>(null)
+const copyRequestAction = ref<any | null>(null)
+const saveRequestAction = ref<any | null>(null)
 
 // Update Nuxt Loading bar
 watch(loading, () => {
diff --git a/packages/hoppscotch-app/components/profile/Picture.vue b/packages/hoppscotch-app/components/profile/Picture.vue
index 266bce2d7..c2d0f685e 100644
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
+  <div
+    tabindex="0"
+    class="cursor-pointer flex rounded-full h-5 w-5 relative items-center justify-center focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+  >
     <img
-      class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute"
+      class="bg-primaryDark rounded-full object-cover object-center h-5 w-5 transition absolute"
       :src="url"
       :alt="alt"
       loading="lazy"
diff --git a/packages/hoppscotch-app/components/smart/AutoComplete.vue b/packages/hoppscotch-app/components/smart/AutoComplete.vue
index 5e65a852b..a89e18684 100644
--- a/packages/hoppscotch-app/components/smart/AutoComplete.vue
+++ b/packages/hoppscotch-app/components/smart/AutoComplete.vue
@@ -8,7 +8,6 @@
       :placeholder="placeholder"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
-      :autocorrect="spellcheck"
       :class="styles"
       @input="updateSuggestions"
       @keyup="updateSuggestions"
diff --git a/packages/hoppscotch-app/components/smart/Item.vue b/packages/hoppscotch-app/components/smart/Item.vue
index 1497c14f3..54ffe0c41 100644
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -64,7 +64,7 @@
     >
       {{ infoIcon }}
     </i>
-    <div v-if="shortcut.length" class="ml-2">
+    <div v-if="shortcut.length" class="ml-2 <sm:hidden">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"
@@ -76,7 +76,7 @@
   </SmartLink>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
 
 export default defineComponent({
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index cbbec0540..77db69d60 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="border border-divider rounded flex flex-col flex-1"
-    @contextmenu.prevent="!compact ? $refs.options.tippy().show() : null"
+    @contextmenu.prevent="!compact ? options.tippy().show() : null"
   >
     <div
       class="flex flex-1 items-start"
@@ -73,7 +73,7 @@
           trigger="click"
           theme="popover"
           arrow
-          :on-shown="() => $refs.tippyActions.focus()"
+          :on-shown="() => tippyActions.focus()"
         >
           <template #trigger>
             <ButtonSecondary
@@ -86,15 +86,16 @@
             ref="tippyActions"
             class="flex flex-col focus:outline-none"
             tabindex="0"
-            @keyup.e="team.myRole === 'OWNER' ? $refs.edit.$el.click() : null"
-            @keyup.delete="
-              team.myRole === 'OWNER' ? $refs.delete.$el.click() : null
-            "
+            @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
             @keyup.x="
               !(team.myRole === 'OWNER' && team.ownersCount == 1)
-                ? $refs.exit.$el.click()
+                ? exit.$el.click()
                 : null
             "
+            @keyup.delete="
+              team.myRole === 'OWNER' ? deleteAction.$el.click() : null
+            "
+            @keyup.escape="options.tippy().hide()"
           >
             <SmartItem
               v-if="team.myRole === 'OWNER'"
@@ -105,20 +106,7 @@
               @click.native="
                 () => {
                   $emit('edit-team')
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              v-if="team.myRole === 'OWNER'"
-              ref="delete"
-              svg="trash-2"
-              :label="t('action.delete')"
-              :shortcut="['⌫']"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
+                  options.tippy().hide()
                 }
               "
             />
@@ -131,7 +119,20 @@
               @click.native="
                 () => {
                   confirmExit = true
-                  $refs.options.tippy().hide()
+                  options.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              v-if="team.myRole === 'OWNER'"
+              ref="deleteAction"
+              svg="trash-2"
+              :label="t('action.delete')"
+              :shortcut="['⌫']"
+              @click.native="
+                () => {
+                  confirmRemove = true
+                  options.tippy().hide()
                 }
               "
             />
@@ -227,4 +228,11 @@ const exitTeam = () => {
 const noPermission = () => {
   toast.error(`${t("profile.no_permission")}`)
 }
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const options = ref<any | null>(null)
+const edit = ref<any | null>(null)
+const deleteAction = ref<any | null>(null)
+const exit = ref<any | null>(null)
 </script>
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 63a476e21..2708d4c05 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -32,7 +32,7 @@
                 v-if="currentUser.photoURL"
                 :src="currentUser.photoURL"
                 class="rounded-lg h-16 ring-primary ring-4 w-16"
-                :alt="currentUser.displayName"
+                :alt="`${currentUser.displayName}`"
               />
               <SmartIcon v-else name="user" class="svg-icons" />
               <div class="ml-4">