From 827f2157fa406c5ea349b3343fc95d49002160b7 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 20 Dec 2021 00:22:31 +0530
Subject: [PATCH] feat: quick shortcut key for menu items

---
 .../assets/icons/user-minus.svg               |   5 +
 .../hoppscotch-app/assets/icons/user-x.svg    |   6 +
 .../hoppscotch-app/assets/scss/styles.scss    |   9 +-
 .../hoppscotch-app/assets/scss/themes.scss    |   2 +-
 .../hoppscotch-app/components/app/Footer.vue  |  30 +++-
 .../hoppscotch-app/components/app/Header.vue  |  52 ++++--
 .../components/app/PowerSearchEntry.vue       |   2 +-
 .../components/app/ShortcutsEntry.vue         |   2 +-
 .../components/button/Primary.vue             |   2 +-
 .../components/button/Secondary.vue           |   2 +-
 .../collections/graphql/Collection.vue        |  80 +++++----
 .../components/collections/graphql/Folder.vue |  76 +++++----
 .../collections/graphql/Request.vue           |  92 ++++++-----
 .../components/collections/my/Collection.vue  |  82 ++++++----
 .../components/collections/my/Folder.vue      |  86 ++++++----
 .../components/collections/my/Request.vue     | 104 +++++++-----
 .../collections/teams/Collection.vue          |  85 +++++-----
 .../components/collections/teams/Folder.vue   |  89 +++++-----
 .../components/collections/teams/Request.vue  |  57 ++++---
 .../components/environments/Environment.vue   |  86 ++++++----
 .../components/firebase/Logout.vue            |   8 +-
 .../components/http/Request.vue               | 152 ++++++++++--------
 .../hoppscotch-app/components/smart/Item.vue  |  13 ++
 .../hoppscotch-app/components/teams/Edit.vue  |   2 +-
 .../hoppscotch-app/components/teams/Team.vue  |  92 +++++++----
 25 files changed, 749 insertions(+), 467 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/user-minus.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/user-x.svg

diff --git a/packages/hoppscotch-app/assets/icons/user-minus.svg b/packages/hoppscotch-app/assets/icons/user-minus.svg
new file mode 100644
index 000000000..934ad56ae
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/user-minus.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
+  <circle cx="8.5" cy="7" r="4"></circle>
+  <line x1="23" y1="11" x2="17" y2="11"></line>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/icons/user-x.svg b/packages/hoppscotch-app/assets/icons/user-x.svg
new file mode 100644
index 000000000..39f26e4f0
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/user-x.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
+  <circle cx="8.5" cy="7" r="4"></circle>
+  <line x1="18" y1="8" x2="23" y2="13"></line>
+  <line x1="23" y1="8" x2="18" y2="13"></line>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 57f74006b..2fa853337 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -446,13 +446,14 @@ pre.ace_editor {
 }
 
 .shortcut-key {
+  @apply inline-flex;
   @apply font-sans;
-  @apply bg-dividerLight;
+  @apply font-medium;
+  @apply text-tiny;
+  @apply bg-divider;
   @apply rounded;
   @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
+  @apply px-1;
 }
 
 @media (max-width: 767px) {
diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index 5e5c0dc8b..19bfffeef 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -28,7 +28,7 @@
   --secondary-color: theme("colors.true-gray.500");
   --secondary-light-color: theme("colors.true-gray.400");
   --secondary-dark-color: theme("colors.true-gray.900");
-  --divider-color: theme("colors.true-gray.200");
+  --divider-color: theme("colors.gray.100");
   --divider-light-color: theme("colors.true-gray.100");
   --divider-dark-color: theme("colors.true-gray.300");
   --error-color: theme("colors.yellow.100");
diff --git a/packages/hoppscotch-app/components/app/Footer.vue b/packages/hoppscotch-app/components/app/Footer.vue
index 9fdc06d7e..b57b7ff41 100644
--- a/packages/hoppscotch-app/components/app/Footer.vue
+++ b/packages/hoppscotch-app/components/app/Footer.vue
@@ -31,6 +31,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -39,17 +40,28 @@
                 :label="`${t('app.help')}`"
               />
             </template>
-            <div class="flex flex-col">
+            <div
+              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()"
+            >
               <SmartItem
+                ref="documentation"
                 svg="book"
                 :label="`${t('app.documentation')}`"
                 to="https://docs.hoppscotch.io"
                 blank
+                :shortcut="['D']"
                 @click.native="$refs.options.tippy().hide()"
               />
               <SmartItem
+                ref="shortcuts"
                 svg="zap"
                 :label="`${t('app.keyboard_shortcuts')}`"
+                :shortcut="['S']"
                 @click.native="
                   () => {
                     showShortcuts = true
@@ -58,15 +70,10 @@
                 "
               />
               <SmartItem
-                svg="gift"
-                :label="`${t('app.whats_new')}`"
-                to="https://docs.hoppscotch.io/changelog"
-                blank
-                @click.native="$refs.options.tippy().hide()"
-              />
-              <SmartItem
+                ref="chat"
                 svg="message-circle"
                 :label="`${t('app.chat_with_us')}`"
+                :shortcut="['C']"
                 @click.native="
                   () => {
                     chatWithUs()
@@ -106,6 +113,13 @@
                 blank
                 @click.native="$refs.options.tippy().hide()"
               />
+              <SmartItem
+                svg="gift"
+                :label="`${t('app.whats_new')}`"
+                to="https://docs.hoppscotch.io/changelog"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
               <!-- <SmartItem :label="t('app.status')" /> -->
               <div class="flex opacity-50 py-2 px-4">
                 {{ `${t("app.name")} ${t("app.version")}` }}
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index cfb25119d..2d4f19fd9 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -57,7 +57,14 @@
             @click.native="showTeamsModal = true"
           />
           <span class="px-2">
-            <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+            <tippy
+              ref="user"
+              interactive
+              trigger="click"
+              theme="popover"
+              arrow
+              :on-shown="() => $refs.tippyActions.focus()"
+            >
               <template #trigger>
                 <ProfilePicture
                   v-if="currentUser.photoURL"
@@ -78,19 +85,36 @@
                   svg="user"
                 />
               </template>
-              <SmartItem
-                to="/profile"
-                svg="user"
-                :label="t('navigation.profile')"
-                @click.native="$refs.user.tippy().hide()"
-              />
-              <SmartItem
-                to="/settings"
-                svg="settings"
-                :label="t('navigation.settings')"
-                @click.native="$refs.user.tippy().hide()"
-              />
-              <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+              <div
+                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()"
+              >
+                <SmartItem
+                  ref="profile"
+                  to="/profile"
+                  svg="user"
+                  :label="t('navigation.profile')"
+                  :shortcut="['↩']"
+                  @click.native="$refs.user.tippy().hide()"
+                />
+                <SmartItem
+                  ref="settings"
+                  to="/settings"
+                  svg="settings"
+                  :label="t('navigation.settings')"
+                  :shortcut="['S']"
+                  @click.native="$refs.user.tippy().hide()"
+                />
+                <FirebaseLogout
+                  ref="logout"
+                  :shortcut="['L']"
+                  @confirm-logout="$refs.user.tippy().hide()"
+                />
+              </div>
             </tippy>
           </span>
         </div>
diff --git a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
index 526e3dbf4..c510e39d7 100644
--- a/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearchEntry.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="cursor-pointer flex flex-1 py-2 px-6 transition items-center search-entry focus:outline-none"
+    class="cursor-pointer flex flex-1 py-3 px-6 transition items-center search-entry focus:outline-none"
     :class="{ active: active }"
     tabindex="-1"
     @click="$emit('action', shortcut.action)"
diff --git a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
index 4c303f972..28c9942b3 100644
--- a/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
+++ b/packages/hoppscotch-app/components/app/ShortcutsEntry.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center">
+  <div class="flex py-1 items-center">
     <span class="flex flex-1 mr-4">
       {{ t(shortcut.label) }}
     </span>
diff --git a/packages/hoppscotch-app/components/button/Primary.vue b/packages/hoppscotch-app/components/button/Primary.vue
index b87285cc5..b0b33d4b8 100644
--- a/packages/hoppscotch-app/components/button/Primary.vue
+++ b/packages/hoppscotch-app/components/button/Primary.vue
@@ -56,7 +56,7 @@
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+          class="shortcut-key !bg-accentLight"
         >
           {{ key }}
         </kbd>
diff --git a/packages/hoppscotch-app/components/button/Secondary.vue b/packages/hoppscotch-app/components/button/Secondary.vue
index 7daae1c50..ada40b042 100644
--- a/packages/hoppscotch-app/components/button/Secondary.vue
+++ b/packages/hoppscotch-app/components/button/Secondary.vue
@@ -55,7 +55,7 @@
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="bg-dividerLight rounded text-secondaryLight ml-1 px-1 inline-flex"
+          class="shortcut-key"
         >
           {{ key }}
         </kbd>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index 52700a9d9..6c38c426b 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -47,6 +47,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -55,38 +56,53 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="folder-plus"
-              :label="`${$t('folder.new')}`"
-              @click.native="
-                () => {
-                  $emit('add-folder', {
-                    path: `${collectionIndex}`,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="edit"
-              :label="`${$t('action.edit')}`"
-              @click.native="
-                () => {
-                  $emit('edit-collection')
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="`${$t('action.delete')}`"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="`${$t('folder.new')}`"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', {
+                      path: `${collectionIndex}`,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="`${$t('action.edit')}`"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-collection')
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index 7483dc39f..e6e7b5998 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -43,6 +43,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -51,36 +52,51 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="folder-plus"
-              :label="`${$t('folder.new')}`"
-              @click.native="
-                () => {
-                  $emit('add-folder', { folder, path: folderPath })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="edit"
-              :label="`${$t('action.edit')}`"
-              @click.native="
-                () => {
-                  $emit('edit-folder', { folder, folderPath })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="`${$t('action.delete')}`"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="`${$t('folder.new')}`"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', { folder, path: folderPath })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="`${$t('action.edit')}`"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-folder', { folder, folderPath })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/graphql/Request.vue b/packages/hoppscotch-app/components/collections/graphql/Request.vue
index 3ef1b9b24..28c6f0d20 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -43,6 +43,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -51,44 +52,59 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="edit"
-              :label="`${$t('action.edit')}`"
-              @click.native="
-                () => {
-                  $emit('edit-request', {
-                    request,
-                    requestIndex,
-                    folderPath,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="copy"
-              :label="`${$t('action.duplicate')}`"
-              @click.native="
-                () => {
-                  $emit('duplicate-request', {
-                    request,
-                    requestIndex,
-                    folderPath,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="`${$t('action.delete')}`"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="`${$t('action.edit')}`"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-request', {
+                      request,
+                      requestIndex,
+                      folderPath,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="duplicate"
+                svg="copy"
+                :label="`${$t('action.duplicate')}`"
+                :shortcut="['D']"
+                @click.native="
+                  () => {
+                    $emit('duplicate-request', {
+                      request,
+                      requestIndex,
+                      folderPath,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 9a651b665..6b2d745f0 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -65,6 +65,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -73,39 +74,54 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="folder-plus"
-              :label="$t('folder.new')"
-              @click.native="
-                () => {
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                () => {
-                  $emit('edit-collection')
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="$t('folder.new')"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', {
+                      folder: collection,
+                      path: `${collectionIndex}`,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-collection')
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 395468a7d..01d1776e7 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -43,6 +43,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -51,41 +52,56 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="folder-plus"
-              :label="$t('folder.new')"
-              @click.native="
-                () => {
-                  $emit('add-folder', { folder, path: folderPath })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                () => {
-                  $emit('edit-folder', {
-                    folder,
-                    folderIndex,
-                    collectionIndex,
-                    folderPath,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="$t('folder.new')"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', { folder, path: folderPath })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-folder', {
+                      folder,
+                      folderIndex,
+                      collectionIndex,
+                      folderPath,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 50122331b..1e6aa77c2 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -59,6 +59,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -67,50 +68,65 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                () => {
-                  $emit('edit-request', {
-                    collectionIndex,
-                    folderIndex,
-                    folderName,
-                    request,
-                    requestIndex,
-                    folderPath,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="copy"
-              :label="$t('action.duplicate')"
-              @click.native="
-                () => {
-                  $emit('duplicate-request', {
-                    collectionIndex,
-                    folderIndex,
-                    folderName,
-                    request,
-                    requestIndex,
-                    folderPath,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-request', {
+                      collectionIndex,
+                      folderIndex,
+                      folderName,
+                      request,
+                      requestIndex,
+                      folderPath,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="duplicate"
+                svg="copy"
+                :label="$t('action.duplicate')"
+                :shortcut="['D']"
+                @click.native="
+                  () => {
+                    $emit('duplicate-request', {
+                      collectionIndex,
+                      folderIndex,
+                      folderName,
+                      request,
+                      requestIndex,
+                      folderPath,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 67256025b..f917c7fc2 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -66,6 +66,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -74,42 +75,54 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="folder-plus"
-              :label="$t('folder.new')"
-              @click.native="
-                () => {
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                () => {
-                  $emit('edit-collection')
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="$t('folder.new')"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', {
+                      folder: collection,
+                      path: `${collectionIndex}`,
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-collection')
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 57b435369..f33000be7 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -45,6 +45,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -53,44 +54,56 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="folder-plus"
-              :label="$t('folder.new')"
-              @click.native="
-                () => {
-                  $emit('add-folder', { folder, path: folderPath })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                () => {
-                  $emit('edit-folder', {
-                    folder,
-                    folderIndex,
-                    collectionIndex,
-                    folderPath: '',
-                  })
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
-            <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                () => {
-                  confirmRemove = true
-                  $refs.options.tippy().hide()
-                }
-              "
-            />
+            <div
+              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()"
+            >
+              <SmartItem
+                ref="folder"
+                svg="folder-plus"
+                :label="$t('folder.new')"
+                :shortcut="['N']"
+                @click.native="
+                  () => {
+                    $emit('add-folder', { folder, path: folderPath })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  () => {
+                    $emit('edit-folder', {
+                      folder,
+                      folderIndex,
+                      collectionIndex,
+                      folderPath: '',
+                    })
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  () => {
+                    confirmRemove = true
+                    $refs.options.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index 0484faec6..821488cd8 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -59,6 +59,7 @@
             trigger="click"
             theme="popover"
             arrow
+            :on-shown="() => $refs.tippyActions.focus()"
           >
             <template #trigger>
               <ButtonSecondary
@@ -67,28 +68,40 @@
                 svg="more-vertical"
               />
             </template>
-            <SmartItem
-              svg="edit"
-              :label="$t('action.edit')"
-              @click.native="
-                $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
-                  request,
-                  requestIndex,
-                })
-                $refs.options.tippy().hide()
-              "
-            />
-            <SmartItem
-              svg="trash-2"
-              :label="$t('action.delete')"
-              @click.native="
-                confirmRemove = true
-                $refs.options.tippy().hide()
-              "
-            />
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.e="$refs.edit.$el.click()"
+              @keyup.delete="$refs.delete.$el.click()"
+            >
+              <SmartItem
+                ref="edit"
+                svg="edit"
+                :label="$t('action.edit')"
+                :shortcut="['E']"
+                @click.native="
+                  $emit('edit-request', {
+                    collectionIndex,
+                    folderIndex,
+                    folderName,
+                    request,
+                    requestIndex,
+                  })
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                ref="delete"
+                svg="trash-2"
+                :label="$t('action.delete')"
+                :shortcut="['⌫']"
+                @click.native="
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                "
+              />
+            </div>
           </tippy>
         </span>
       </div>
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index c62590ded..0f6bd93b8 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -18,7 +18,14 @@
       </span>
     </span>
     <span>
-      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+      <tippy
+        ref="options"
+        interactive
+        trigger="click"
+        theme="popover"
+        arrow
+        :on-shown="() => $refs.tippyActions.focus()"
+      >
         <template #trigger>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -26,37 +33,54 @@
             svg="more-vertical"
           />
         </template>
-        <SmartItem
-          svg="edit"
-          :label="`${$t('action.edit')}`"
-          @click.native="
-            () => {
-              $emit('edit-environment')
-              $refs.options.tippy().hide()
-            }
+        <div
+          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="
+            !(environmentIndex === 'Global') ? $refs.delete.$el.click() : null
           "
-        />
-        <SmartItem
-          svg="copy"
-          :label="`${$t('action.duplicate')}`"
-          @click.native="
-            () => {
-              duplicateEnvironment()
-              $refs.options.tippy().hide()
-            }
-          "
-        />
-        <SmartItem
-          v-if="!(environmentIndex === 'Global')"
-          svg="trash-2"
-          :label="`${$t('action.delete')}`"
-          @click.native="
-            () => {
-              confirmRemove = true
-              $refs.options.tippy().hide()
-            }
-          "
-        />
+        >
+          <SmartItem
+            ref="edit"
+            svg="edit"
+            :label="`${$t('action.edit')}`"
+            :shortcut="['E']"
+            @click.native="
+              () => {
+                $emit('edit-environment')
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            ref="duplicate"
+            svg="copy"
+            :label="`${$t('action.duplicate')}`"
+            :shortcut="['D']"
+            @click.native="
+              () => {
+                duplicateEnvironment()
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+          <SmartItem
+            v-if="!(environmentIndex === 'Global')"
+            ref="delete"
+            svg="trash-2"
+            :label="`${$t('action.delete')}`"
+            :shortcut="['⌫']"
+            @click.native="
+              () => {
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              }
+            "
+          />
+        </div>
       </tippy>
     </span>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/firebase/Logout.vue b/packages/hoppscotch-app/components/firebase/Logout.vue
index 58fbd03c4..b20273535 100644
--- a/packages/hoppscotch-app/components/firebase/Logout.vue
+++ b/packages/hoppscotch-app/components/firebase/Logout.vue
@@ -1,9 +1,11 @@
 <template>
-  <div class="flex">
+  <div class="flex" @click="$refs.logout.$el.click()">
     <SmartItem
+      ref="logout"
       svg="log-out"
       :label="`${$t('auth.logout')}`"
       :outline="outline"
+      :shortcut="shortcut"
       @click.native="
         () => {
           $emit('confirm-logout')
@@ -30,6 +32,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 646a9ea5b..c7db154d1 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -69,41 +69,56 @@
           trigger="click"
           theme="popover"
           arrow
+          :on-shown="() => $refs.sendTippyActions.focus()"
         >
           <template #trigger>
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
-          <SmartItem
-            :label="`${t('import.curl')}`"
-            svg="file-code"
-            @click.native="
-              () => {
-                showCurlImportModal = !showCurlImportModal
-                sendOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            :label="`${t('show.code')}`"
-            svg="code-2"
-            @click.native="
-              () => {
-                showCodegenModal = !showCodegenModal
-                sendOptions.tippy().hide()
-              }
-            "
-          />
-          <SmartItem
-            ref="clearAll"
-            :label="`${t('action.clear_all')}`"
-            svg="rotate-ccw"
-            @click.native="
-              () => {
-                clearContent()
-                sendOptions.tippy().hide()
-              }
-            "
-          />
+          <div
+            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()"
+          >
+            <SmartItem
+              ref="import"
+              :label="`${t('import.curl')}`"
+              svg="file-code"
+              :shortcut="['C']"
+              @click.native="
+                () => {
+                  showCurlImportModal = !showCurlImportModal
+                  sendOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              ref="show"
+              :label="`${t('show.code')}`"
+              svg="code-2"
+              :shortcut="['S']"
+              @click.native="
+                () => {
+                  showCodegenModal = !showCodegenModal
+                  sendOptions.tippy().hide()
+                }
+              "
+            />
+            <SmartItem
+              ref="clearAll"
+              :label="`${t('action.clear_all')}`"
+              svg="rotate-ccw"
+              :shortcut="['⌫']"
+              @click.native="
+                () => {
+                  clearContent()
+                  sendOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
       <ButtonSecondary
@@ -124,6 +139,7 @@
           trigger="click"
           theme="popover"
           arrow
+          :on-shown="() => $refs.saveTippyActions.focus()"
         >
           <template #trigger>
             <ButtonSecondary
@@ -132,38 +148,48 @@
               class="rounded rounded-l-none"
             />
           </template>
-          <input
-            id="request-name"
-            v-model="requestName"
-            :placeholder="`${t('request.name')}`"
-            name="request-name"
-            type="text"
-            autocomplete="off"
-            class="mb-2 input"
-            @keyup.enter="saveOptions.tippy().hide()"
-          />
-          <SmartItem
-            ref="copyRequest"
-            :label="shareButtonText"
-            :svg="copyLinkIcon"
-            :loading="fetchingShareLink"
-            @click.native="
-              () => {
-                copyRequest()
-              }
-            "
-          />
-          <SmartItem
-            ref="saveRequest"
-            :label="`${t('request.save_as')}`"
-            svg="folder-plus"
-            @click.native="
-              () => {
-                showSaveRequestModal = true
-                saveOptions.tippy().hide()
-              }
-            "
-          />
+          <div
+            ref="saveTippyActions"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            @keyup.c="$refs.copyRequest.$el.click()"
+            @keyup.s="$refs.saveRequest.$el.click()"
+          >
+            <input
+              id="request-name"
+              v-model="requestName"
+              :placeholder="`${t('request.name')}`"
+              name="request-name"
+              type="text"
+              autocomplete="off"
+              class="mb-2 input"
+              @keyup.enter="saveOptions.tippy().hide()"
+            />
+            <SmartItem
+              ref="copyRequest"
+              :label="shareButtonText"
+              :svg="copyLinkIcon"
+              :loading="fetchingShareLink"
+              :shortcut="['C']"
+              @click.native="
+                () => {
+                  copyRequest()
+                }
+              "
+            />
+            <SmartItem
+              ref="saveRequest"
+              :label="`${t('request.save_as')}`"
+              svg="folder-plus"
+              :shortcut="['S']"
+              @click.native="
+                () => {
+                  showSaveRequestModal = true
+                  saveOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
     </div>
diff --git a/packages/hoppscotch-app/components/smart/Item.vue b/packages/hoppscotch-app/components/smart/Item.vue
index 39cd0841c..1497c14f3 100644
--- a/packages/hoppscotch-app/components/smart/Item.vue
+++ b/packages/hoppscotch-app/components/smart/Item.vue
@@ -64,6 +64,15 @@
     >
       {{ infoIcon }}
     </i>
+    <div v-if="shortcut.length" class="ml-2">
+      <kbd
+        v-for="(key, index) in shortcut"
+        :key="`key-${index}`"
+        class="shortcut-key -mr-2"
+      >
+        {{ key }}
+      </kbd>
+    </div>
   </SmartLink>
 </template>
 
@@ -116,6 +125,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
     active: {
       type: Boolean,
       default: false,
diff --git a/packages/hoppscotch-app/components/teams/Edit.vue b/packages/hoppscotch-app/components/teams/Edit.vue
index 597d03d9f..9a54d1261 100644
--- a/packages/hoppscotch-app/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/components/teams/Edit.vue
@@ -153,7 +153,7 @@
                   id="member"
                   v-tippy="{ theme: 'tooltip' }"
                   :title="t('action.remove')"
-                  svg="trash"
+                  svg="user-minus"
                   color="red"
                   @click.native="removeExistingTeamMember(member.userID)"
                 />
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 93003f14c..cbbec0540 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -67,7 +67,14 @@
         />
       </span>
       <span>
-        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        <tippy
+          ref="options"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+          :on-shown="() => $refs.tippyActions.focus()"
+        >
           <template #trigger>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
@@ -75,39 +82,60 @@
               svg="more-vertical"
             />
           </template>
-          <SmartItem
-            v-if="team.myRole === 'OWNER'"
-            svg="edit"
-            :label="t('action.edit')"
-            @click.native="
-              () => {
-                $emit('edit-team')
-                $refs.options.tippy().hide()
-              }
+          <div
+            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
             "
-          />
-          <SmartItem
-            v-if="team.myRole === 'OWNER'"
-            svg="trash-2"
-            :label="t('action.delete')"
-            @click.native="
-              () => {
-                confirmRemove = true
-                $refs.options.tippy().hide()
-              }
+            @keyup.x="
+              !(team.myRole === 'OWNER' && team.ownersCount == 1)
+                ? $refs.exit.$el.click()
+                : null
             "
-          />
-          <SmartItem
-            v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-            svg="trash"
-            :label="t('team.exit')"
-            @click.native="
-              () => {
-                confirmExit = true
-                $refs.options.tippy().hide()
-              }
-            "
-          />
+          >
+            <SmartItem
+              v-if="team.myRole === 'OWNER'"
+              ref="edit"
+              svg="edit"
+              :label="t('action.edit')"
+              :shortcut="['E']"
+              @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()
+                }
+              "
+            />
+            <SmartItem
+              v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+              ref="exit"
+              svg="user-x"
+              :label="t('team.exit')"
+              :shortcut="['X']"
+              @click.native="
+                () => {
+                  confirmExit = true
+                  $refs.options.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
     </div>