refactor: remove shortcut hints in mobile devices

2021-12-20 14:40:38 +05:30
parent fac1288ef2
commit f94ee7c73f
23 changed files with 410 additions and 253 deletions
--- 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;
--- 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>
--- 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>
--- 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
--- 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}`"
--- 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}`"
--- 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,
--- 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,
--- 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,
--- 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" &&
--- 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
--- 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
--- 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", {
--- 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", {
--- 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() {
--- 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,
--- 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),
    }
  },
 })
--- 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, () => {
--- 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"
--- 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"
--- 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({
--- 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>
--- 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">