feat: quick shortcut key for menu items

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>

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>

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-1;
-  @apply px-2;
-  @apply inline-flex;
 }
 
 @media (max-width: 767px) {

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");

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"
+                ref="chat"
-                :label="`${t('app.whats_new')}`"
-                to="https://docs.hoppscotch.io/changelog"
-                blank
-                @click.native="$refs.options.tippy().hide()"
-              />
-              <SmartItem
                 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")}` }}

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
+              <div
-                to="/profile"
+                ref="tippyActions"
-                svg="user"
+                class="flex flex-col focus:outline-none"
-                :label="t('navigation.profile')"
+                tabindex="0"
-                @click.native="$refs.user.tippy().hide()"
+                @keyup.enter="$refs.profile.$el.click()"
-              />
+                @keyup.s="$refs.settings.$el.click()"
-              <SmartItem
+                @keyup.l="$refs.logout.$el.click()"
-                to="/settings"
+              >
-                svg="settings"
+                <SmartItem
-                :label="t('navigation.settings')"
+                  ref="profile"
-                @click.native="$refs.user.tippy().hide()"
+                  to="/profile"
-              />
+                  svg="user"
-              <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+                  :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>

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)"

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>

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>

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>

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
+            <div
-              svg="folder-plus"
+              ref="tippyActions"
-              :label="`${$t('folder.new')}`"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.n="$refs.folder.$el.click()"
-                  $emit('add-folder', {
+              @keyup.e="$refs.edit.$el.click()"
-                    path: `${collectionIndex}`,
+              @keyup.delete="$refs.delete.$el.click()"
-                  })
+            >
-                  $refs.options.tippy().hide()
+              <SmartItem
-                }
+                ref="folder"
-              "
+                svg="folder-plus"
-            />
+                :label="`${$t('folder.new')}`"
-            <SmartItem
+                :shortcut="['N']"
-              svg="edit"
+                @click.native="
-              :label="`${$t('action.edit')}`"
+                  () => {
-              @click.native="
+                    $emit('add-folder', {
-                () => {
+                      path: `${collectionIndex}`,
-                  $emit('edit-collection')
+                    })
-                  $refs.options.tippy().hide()
+                    $refs.options.tippy().hide()
-                }
+                  }
-              "
+                "
-            />
+              />
-            <SmartItem
+              <SmartItem
-              svg="trash-2"
+                ref="edit"
-              :label="`${$t('action.delete')}`"
+                svg="edit"
-              @click.native="
+                :label="`${$t('action.edit')}`"
-                () => {
+                :shortcut="['E']"
-                  confirmRemove = true
+                @click.native="
-                  $refs.options.tippy().hide()
+                  () => {
-                }
+                    $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>

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
+            <div
-              svg="folder-plus"
+              ref="tippyActions"
-              :label="`${$t('folder.new')}`"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.n="$refs.folder.$el.click()"
-                  $emit('add-folder', { folder, path: folderPath })
+              @keyup.e="$refs.edit.$el.click()"
-                  $refs.options.tippy().hide()
+              @keyup.delete="$refs.delete.$el.click()"
-                }
+            >
-              "
+              <SmartItem
-            />
+                ref="folder"
-            <SmartItem
+                svg="folder-plus"
-              svg="edit"
+                :label="`${$t('folder.new')}`"
-              :label="`${$t('action.edit')}`"
+                :shortcut="['N']"
-              @click.native="
+                @click.native="
-                () => {
+                  () => {
-                  $emit('edit-folder', { folder, folderPath })
+                    $emit('add-folder', { folder, path: folderPath })
-                  $refs.options.tippy().hide()
+                    $refs.options.tippy().hide()
-                }
+                  }
-              "
+                "
-            />
+              />
-            <SmartItem
+              <SmartItem
-              svg="trash-2"
+                ref="edit"
-              :label="`${$t('action.delete')}`"
+                svg="edit"
-              @click.native="
+                :label="`${$t('action.edit')}`"
-                () => {
+                :shortcut="['E']"
-                  confirmRemove = true
+                @click.native="
-                  $refs.options.tippy().hide()
+                  () => {
-                }
+                    $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>

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
+            <div
-              svg="edit"
+              ref="tippyActions"
-              :label="`${$t('action.edit')}`"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.e="$refs.edit.$el.click()"
-                  $emit('edit-request', {
+              @keyup.d="$refs.duplicate.$el.click()"
-                    request,
+              @keyup.delete="$refs.delete.$el.click()"
-                    requestIndex,
+            >
-                    folderPath,
+              <SmartItem
-                  })
+                ref="edit"
-                  $refs.options.tippy().hide()
+                svg="edit"
-                }
+                :label="`${$t('action.edit')}`"
-              "
+                :shortcut="['E']"
-            />
+                @click.native="
-            <SmartItem
+                  () => {
-              svg="copy"
+                    $emit('edit-request', {
-              :label="`${$t('action.duplicate')}`"
+                      request,
-              @click.native="
+                      requestIndex,
-                () => {
+                      folderPath,
-                  $emit('duplicate-request', {
+                    })
-                    request,
+                    $refs.options.tippy().hide()
-                    requestIndex,
+                  }
-                    folderPath,
+                "
-                  })
+              />
-                  $refs.options.tippy().hide()
+              <SmartItem
-                }
+                ref="duplicate"
-              "
+                svg="copy"
-            />
+                :label="`${$t('action.duplicate')}`"
-            <SmartItem
+                :shortcut="['D']"
-              svg="trash-2"
+                @click.native="
-              :label="`${$t('action.delete')}`"
+                  () => {
-              @click.native="
+                    $emit('duplicate-request', {
-                () => {
+                      request,
-                  confirmRemove = true
+                      requestIndex,
-                  $refs.options.tippy().hide()
+                      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>

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
+            <div
-              svg="folder-plus"
+              ref="tippyActions"
-              :label="$t('folder.new')"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.n="$refs.folder.$el.click()"
-                  $emit('add-folder', {
+              @keyup.e="$refs.edit.$el.click()"
-                    folder: collection,
+              @keyup.delete="$refs.delete.$el.click()"
-                    path: `${collectionIndex}`,
+            >
-                  })
+              <SmartItem
-                  $refs.options.tippy().hide()
+                ref="folder"
-                }
+                svg="folder-plus"
-              "
+                :label="$t('folder.new')"
-            />
+                :shortcut="['N']"
-            <SmartItem
+                @click.native="
-              svg="edit"
+                  () => {
-              :label="$t('action.edit')"
+                    $emit('add-folder', {
-              @click.native="
+                      folder: collection,
-                () => {
+                      path: `${collectionIndex}`,
-                  $emit('edit-collection')
+                    })
-                  $refs.options.tippy().hide()
+                    $refs.options.tippy().hide()
-                }
+                  }
-              "
+                "
-            />
+              />
-            <SmartItem
+              <SmartItem
-              svg="trash-2"
+                ref="edit"
-              :label="$t('action.delete')"
+                svg="edit"
-              @click.native="
+                :label="$t('action.edit')"
-                () => {
+                :shortcut="['E']"
-                  confirmRemove = true
+                @click.native="
-                  $refs.options.tippy().hide()
+                  () => {
-                }
+                    $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>

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
+            <div
-              svg="folder-plus"
+              ref="tippyActions"
-              :label="$t('folder.new')"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.n="$refs.folder.$el.click()"
-                  $emit('add-folder', { folder, path: folderPath })
+              @keyup.e="$refs.edit.$el.click()"
-                  $refs.options.tippy().hide()
+              @keyup.delete="$refs.delete.$el.click()"
-                }
+            >
-              "
+              <SmartItem
-            />
+                ref="folder"
-            <SmartItem
+                svg="folder-plus"
-              svg="edit"
+                :label="$t('folder.new')"
-              :label="$t('action.edit')"
+                :shortcut="['N']"
-              @click.native="
+                @click.native="
-                () => {
+                  () => {
-                  $emit('edit-folder', {
+                    $emit('add-folder', { folder, path: folderPath })
-                    folder,
+                    $refs.options.tippy().hide()
-                    folderIndex,
+                  }
-                    collectionIndex,
+                "
-                    folderPath,
+              />
-                  })
+              <SmartItem
-                  $refs.options.tippy().hide()
+                ref="edit"
-                }
+                svg="edit"
-              "
+                :label="$t('action.edit')"
-            />
+                :shortcut="['E']"
-            <SmartItem
+                @click.native="
-              svg="trash-2"
+                  () => {
-              :label="$t('action.delete')"
+                    $emit('edit-folder', {
-              @click.native="
+                      folder,
-                () => {
+                      folderIndex,
-                  confirmRemove = true
+                      collectionIndex,
-                  $refs.options.tippy().hide()
+                      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>

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
+            <div
-              svg="edit"
+              ref="tippyActions"
-              :label="$t('action.edit')"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                () => {
+              @keyup.e="$refs.edit.$el.click()"
-                  $emit('edit-request', {
+              @keyup.d="$refs.duplicate.$el.click()"
-                    collectionIndex,
+              @keyup.delete="$refs.delete.$el.click()"
-                    folderIndex,
+            >
-                    folderName,
+              <SmartItem
-                    request,
+                ref="edit"
-                    requestIndex,
+                svg="edit"
-                    folderPath,
+                :label="$t('action.edit')"
-                  })
+                :shortcut="['E']"
-                  $refs.options.tippy().hide()
+                @click.native="
-                }
+                  () => {
-              "
+                    $emit('edit-request', {
-            />
+                      collectionIndex,
-            <SmartItem
+                      folderIndex,
-              svg="copy"
+                      folderName,
-              :label="$t('action.duplicate')"
+                      request,
-              @click.native="
+                      requestIndex,
-                () => {
+                      folderPath,
-                  $emit('duplicate-request', {
+                    })
-                    collectionIndex,
+                    $refs.options.tippy().hide()
-                    folderIndex,
+                  }
-                    folderName,
+                "
-                    request,
+              />
-                    requestIndex,
+              <SmartItem
-                    folderPath,
+                ref="duplicate"
-                  })
+                svg="copy"
-                  $refs.options.tippy().hide()
+                :label="$t('action.duplicate')"
-                }
+                :shortcut="['D']"
-              "
+                @click.native="
-            />
+                  () => {
-            <SmartItem
+                    $emit('duplicate-request', {
-              svg="trash-2"
+                      collectionIndex,
-              :label="$t('action.delete')"
+                      folderIndex,
-              @click.native="
+                      folderName,
-                () => {
+                      request,
-                  confirmRemove = true
+                      requestIndex,
-                  $refs.options.tippy().hide()
+                      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>

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
+            <div
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              ref="tippyActions"
-              svg="folder-plus"
+              class="flex flex-col focus:outline-none"
-              :label="$t('folder.new')"
+              tabindex="0"
-              @click.native="
+              @keyup.n="$refs.folder.$el.click()"
-                () => {
+              @keyup.e="$refs.edit.$el.click()"
-                  $emit('add-folder', {
+              @keyup.delete="$refs.delete.$el.click()"
-                    folder: collection,
+            >
-                    path: `${collectionIndex}`,
+              <SmartItem
-                  })
+                ref="folder"
-                  $refs.options.tippy().hide()
+                svg="folder-plus"
-                }
+                :label="$t('folder.new')"
-              "
+                :shortcut="['N']"
-            />
+                @click.native="
-            <SmartItem
+                  () => {
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                    $emit('add-folder', {
-              svg="edit"
+                      folder: collection,
-              :label="$t('action.edit')"
+                      path: `${collectionIndex}`,
-              @click.native="
+                    })
-                () => {
+                    $refs.options.tippy().hide()
-                  $emit('edit-collection')
+                  }
-                  $refs.options.tippy().hide()
+                "
-                }
+              />
-              "
+              <SmartItem
-            />
+                ref="edit"
-            <SmartItem
+                svg="edit"
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                :label="$t('action.edit')"
-              svg="trash-2"
+                :shortcut="['E']"
-              :label="$t('action.delete')"
+                @click.native="
-              @click.native="
+                  () => {
-                () => {
+                    $emit('edit-collection')
-                  confirmRemove = true
+                    $refs.options.tippy().hide()
-                  $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>

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
+            <div
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              ref="tippyActions"
-              svg="folder-plus"
+              class="flex flex-col focus:outline-none"
-              :label="$t('folder.new')"
+              tabindex="0"
-              @click.native="
+              @keyup.n="$refs.folder.$el.click()"
-                () => {
+              @keyup.e="$refs.edit.$el.click()"
-                  $emit('add-folder', { folder, path: folderPath })
+              @keyup.delete="$refs.delete.$el.click()"
-                  $refs.options.tippy().hide()
+            >
-                }
+              <SmartItem
-              "
+                ref="folder"
-            />
+                svg="folder-plus"
-            <SmartItem
+                :label="$t('folder.new')"
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                :shortcut="['N']"
-              svg="edit"
+                @click.native="
-              :label="$t('action.edit')"
+                  () => {
-              @click.native="
+                    $emit('add-folder', { folder, path: folderPath })
-                () => {
+                    $refs.options.tippy().hide()
-                  $emit('edit-folder', {
+                  }
-                    folder,
+                "
-                    folderIndex,
+              />
-                    collectionIndex,
+              <SmartItem
-                    folderPath: '',
+                ref="edit"
-                  })
+                svg="edit"
-                  $refs.options.tippy().hide()
+                :label="$t('action.edit')"
-                }
+                :shortcut="['E']"
-              "
+                @click.native="
-            />
+                  () => {
-            <SmartItem
+                    $emit('edit-folder', {
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                      folder,
-              svg="trash-2"
+                      folderIndex,
-              :label="$t('action.delete')"
+                      collectionIndex,
-              @click.native="
+                      folderPath: '',
-                () => {
+                    })
-                  confirmRemove = true
+                    $refs.options.tippy().hide()
-                  $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>

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
+            <div
-              svg="edit"
+              ref="tippyActions"
-              :label="$t('action.edit')"
+              class="flex flex-col focus:outline-none"
-              @click.native="
+              tabindex="0"
-                $emit('edit-request', {
+              @keyup.e="$refs.edit.$el.click()"
-                  collectionIndex,
+              @keyup.delete="$refs.delete.$el.click()"
-                  folderIndex,
+            >
-                  folderName,
+              <SmartItem
-                  request,
+                ref="edit"
-                  requestIndex,
+                svg="edit"
-                })
+                :label="$t('action.edit')"
-                $refs.options.tippy().hide()
+                :shortcut="['E']"
-              "
+                @click.native="
-            />
+                  $emit('edit-request', {
-            <SmartItem
+                    collectionIndex,
-              svg="trash-2"
+                    folderIndex,
-              :label="$t('action.delete')"
+                    folderName,
-              @click.native="
+                    request,
-                confirmRemove = true
+                    requestIndex,
-                $refs.options.tippy().hide()
+                  })
-              "
+                  $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>

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
+        <div
-          svg="edit"
+          ref="tippyActions"
-          :label="`${$t('action.edit')}`"
+          class="flex flex-col focus:outline-none"
-          @click.native="
+          tabindex="0"
-            () => {
+          @keyup.e="$refs.edit.$el.click()"
-              $emit('edit-environment')
+          @keyup.d="$refs.duplicate.$el.click()"
-              $refs.options.tippy().hide()
+          @keyup.delete="
-            }
+            !(environmentIndex === 'Global') ? $refs.delete.$el.click() : null
           "
-        />
+        >
-        <SmartItem
+          <SmartItem
-          svg="copy"
+            ref="edit"
-          :label="`${$t('action.duplicate')}`"
+            svg="edit"
-          @click.native="
+            :label="`${$t('action.edit')}`"
-            () => {
+            :shortcut="['E']"
-              duplicateEnvironment()
+            @click.native="
-              $refs.options.tippy().hide()
+              () => {
-            }
+                $emit('edit-environment')
-          "
+                $refs.options.tippy().hide()
-        />
+              }
-        <SmartItem
+            "
-          v-if="!(environmentIndex === 'Global')"
+          />
-          svg="trash-2"
+          <SmartItem
-          :label="`${$t('action.delete')}`"
+            ref="duplicate"
-          @click.native="
+            svg="copy"
-            () => {
+            :label="`${$t('action.duplicate')}`"
-              confirmRemove = true
+            :shortcut="['D']"
-              $refs.options.tippy().hide()
+            @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

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 {

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
+          <div
-            :label="`${t('import.curl')}`"
+            ref="sendTippyActions"
-            svg="file-code"
+            class="flex flex-col focus:outline-none"
-            @click.native="
+            tabindex="0"
-              () => {
+            @keyup.c="$refs.import.$el.click()"
-                showCurlImportModal = !showCurlImportModal
+            @keyup.s="$refs.show.$el.click()"
-                sendOptions.tippy().hide()
+            @keyup.delete="$refs.clearAll.$el.click()"
-              }
+          >
-            "
+            <SmartItem
-          />
+              ref="import"
-          <SmartItem
+              :label="`${t('import.curl')}`"
-            :label="`${t('show.code')}`"
+              svg="file-code"
-            svg="code-2"
+              :shortcut="['C']"
-            @click.native="
+              @click.native="
-              () => {
+                () => {
-                showCodegenModal = !showCodegenModal
+                  showCurlImportModal = !showCurlImportModal
-                sendOptions.tippy().hide()
+                  sendOptions.tippy().hide()
-              }
+                }
-            "
+              "
-          />
+            />
-          <SmartItem
+            <SmartItem
-            ref="clearAll"
+              ref="show"
-            :label="`${t('action.clear_all')}`"
+              :label="`${t('show.code')}`"
-            svg="rotate-ccw"
+              svg="code-2"
-            @click.native="
+              :shortcut="['S']"
-              () => {
+              @click.native="
-                clearContent()
+                () => {
-                sendOptions.tippy().hide()
+                  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
+          <div
-            id="request-name"
+            ref="saveTippyActions"
-            v-model="requestName"
+            class="flex flex-col focus:outline-none"
-            :placeholder="`${t('request.name')}`"
+            tabindex="0"
-            name="request-name"
+            @keyup.c="$refs.copyRequest.$el.click()"
-            type="text"
+            @keyup.s="$refs.saveRequest.$el.click()"
-            autocomplete="off"
+          >
-            class="mb-2 input"
+            <input
-            @keyup.enter="saveOptions.tippy().hide()"
+              id="request-name"
-          />
+              v-model="requestName"
-          <SmartItem
+              :placeholder="`${t('request.name')}`"
-            ref="copyRequest"
+              name="request-name"
-            :label="shareButtonText"
+              type="text"
-            :svg="copyLinkIcon"
+              autocomplete="off"
-            :loading="fetchingShareLink"
+              class="mb-2 input"
-            @click.native="
+              @keyup.enter="saveOptions.tippy().hide()"
-              () => {
+            />
-                copyRequest()
+            <SmartItem
-              }
+              ref="copyRequest"
-            "
+              :label="shareButtonText"
-          />
+              :svg="copyLinkIcon"
-          <SmartItem
+              :loading="fetchingShareLink"
-            ref="saveRequest"
+              :shortcut="['C']"
-            :label="`${t('request.save_as')}`"
+              @click.native="
-            svg="folder-plus"
+                () => {
-            @click.native="
+                  copyRequest()
-              () => {
+                }
-                showSaveRequestModal = true
+              "
-                saveOptions.tippy().hide()
+            />
-              }
+            <SmartItem
-            "
+              ref="saveRequest"
-          />
+              :label="`${t('request.save_as')}`"
+              svg="folder-plus"
+              :shortcut="['S']"
+              @click.native="
+                () => {
+                  showSaveRequestModal = true
+                  saveOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
       </span>
     </div>

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,

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)"
                 />

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
+          <div
-            v-if="team.myRole === 'OWNER'"
+            ref="tippyActions"
-            svg="edit"
+            class="flex flex-col focus:outline-none"
-            :label="t('action.edit')"
+            tabindex="0"
-            @click.native="
+            @keyup.e="team.myRole === 'OWNER' ? $refs.edit.$el.click() : null"
-              () => {
+            @keyup.delete="
-                $emit('edit-team')
+              team.myRole === 'OWNER' ? $refs.delete.$el.click() : null
-                $refs.options.tippy().hide()
-              }
             "
-          />
+            @keyup.x="
-          <SmartItem
+              !(team.myRole === 'OWNER' && team.ownersCount == 1)
-            v-if="team.myRole === 'OWNER'"
+                ? $refs.exit.$el.click()
-            svg="trash-2"
+                : null
-            :label="t('action.delete')"
-            @click.native="
-              () => {
-                confirmRemove = true
-                $refs.options.tippy().hide()
-              }
             "
-          />
+          >
-          <SmartItem
+            <SmartItem
-            v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+              v-if="team.myRole === 'OWNER'"
-            svg="trash"
+              ref="edit"
-            :label="t('team.exit')"
+              svg="edit"
-            @click.native="
+              :label="t('action.edit')"
-              () => {
+              :shortcut="['E']"
-                confirmExit = true
+              @click.native="
-                $refs.options.tippy().hide()
+                () => {
-              }
+                  $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>