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>
+              <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 @confirm-logout="$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,9 +56,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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', {
@@ -68,8 +79,10 @@
                 "
               />
               <SmartItem
+                ref="edit"
                 svg="edit"
                 :label="`${$t('action.edit')}`"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-collection')
@@ -78,8 +91,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -87,6 +102,7 @@
                   }
                 "
               />
+            </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,9 +52,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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 })
@@ -62,8 +73,10 @@
                 "
               />
               <SmartItem
+                ref="edit"
                 svg="edit"
                 :label="`${$t('action.edit')}`"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-folder', { folder, folderPath })
@@ -72,8 +85,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -81,6 +96,7 @@
                   }
                 "
               />
+            </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,9 +52,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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', {
@@ -66,8 +77,10 @@
                 "
               />
               <SmartItem
+                ref="duplicate"
                 svg="copy"
                 :label="`${$t('action.duplicate')}`"
+                :shortcut="['D']"
                 @click.native="
                   () => {
                     $emit('duplicate-request', {
@@ -80,8 +93,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="`${$t('action.delete')}`"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -89,6 +104,7 @@
                   }
                 "
               />
+            </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,9 +74,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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', {
@@ -87,8 +98,10 @@
                 "
               />
               <SmartItem
+                ref="edit"
                 svg="edit"
                 :label="$t('action.edit')"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-collection')
@@ -97,8 +110,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="$t('action.delete')"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -106,6 +121,7 @@
                   }
                 "
               />
+            </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,9 +52,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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 })
@@ -62,8 +73,10 @@
                 "
               />
               <SmartItem
+                ref="edit"
                 svg="edit"
                 :label="$t('action.edit')"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-folder', {
@@ -77,8 +90,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="$t('action.delete')"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -86,6 +101,7 @@
                   }
                 "
               />
+            </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,9 +68,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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', {
@@ -85,8 +96,10 @@
                 "
               />
               <SmartItem
+                ref="duplicate"
                 svg="copy"
                 :label="$t('action.duplicate')"
+                :shortcut="['D']"
                 @click.native="
                   () => {
                     $emit('duplicate-request', {
@@ -102,8 +115,10 @@
                 "
               />
               <SmartItem
+                ref="delete"
                 svg="trash-2"
                 :label="$t('action.delete')"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -111,6 +126,7 @@
                   }
                 "
               />
+            </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,10 +75,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="folder"
                 svg="folder-plus"
                 :label="$t('folder.new')"
+                :shortcut="['N']"
                 @click.native="
                   () => {
                     $emit('add-folder', {
@@ -89,9 +99,10 @@
                 "
               />
               <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="edit"
                 svg="edit"
                 :label="$t('action.edit')"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-collection')
@@ -100,9 +111,10 @@
                 "
               />
               <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="delete"
                 svg="trash-2"
                 :label="$t('action.delete')"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -110,6 +122,7 @@
                   }
                 "
               />
+            </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,10 +54,19 @@
                 svg="more-vertical"
               />
             </template>
+            <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
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="folder"
                 svg="folder-plus"
                 :label="$t('folder.new')"
+                :shortcut="['N']"
                 @click.native="
                   () => {
                     $emit('add-folder', { folder, path: folderPath })
@@ -65,9 +75,10 @@
                 "
               />
               <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="edit"
                 svg="edit"
                 :label="$t('action.edit')"
+                :shortcut="['E']"
                 @click.native="
                   () => {
                     $emit('edit-folder', {
@@ -81,9 +92,10 @@
                 "
               />
               <SmartItem
-              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                ref="delete"
                 svg="trash-2"
                 :label="$t('action.delete')"
+                :shortcut="['⌫']"
                 @click.native="
                   () => {
                     confirmRemove = true
@@ -91,6 +103,7 @@
                   }
                 "
               />
+            </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,9 +68,18 @@
                 svg="more-vertical"
               />
             </template>
+            <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,
@@ -82,13 +92,16 @@
                 "
               />
               <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,9 +33,21 @@
             svg="more-vertical"
           />
         </template>
+        <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
+            ref="edit"
             svg="edit"
             :label="`${$t('action.edit')}`"
+            :shortcut="['E']"
             @click.native="
               () => {
                 $emit('edit-environment')
@@ -37,8 +56,10 @@
             "
           />
           <SmartItem
+            ref="duplicate"
             svg="copy"
             :label="`${$t('action.duplicate')}`"
+            :shortcut="['D']"
             @click.native="
               () => {
                 duplicateEnvironment()
@@ -48,8 +69,10 @@
           />
           <SmartItem
             v-if="!(environmentIndex === 'Global')"
+            ref="delete"
             svg="trash-2"
             :label="`${$t('action.delete')}`"
+            :shortcut="['⌫']"
             @click.native="
               () => {
                 confirmRemove = true
@@ -57,6 +80,7 @@
               }
             "
           />
+        </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,13 +69,24 @@
           trigger="click"
           theme="popover"
           arrow
+          :on-shown="() => $refs.sendTippyActions.focus()"
         >
           <template #trigger>
             <ButtonPrimary class="rounded-l-none" filled svg="chevron-down" />
           </template>
+          <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
@@ -84,8 +95,10 @@
               "
             />
             <SmartItem
+              ref="show"
               :label="`${t('show.code')}`"
               svg="code-2"
+              :shortcut="['S']"
               @click.native="
                 () => {
                   showCodegenModal = !showCodegenModal
@@ -97,6 +110,7 @@
               ref="clearAll"
               :label="`${t('action.clear_all')}`"
               svg="rotate-ccw"
+              :shortcut="['⌫']"
               @click.native="
                 () => {
                   clearContent()
@@ -104,6 +118,7 @@
                 }
               "
             />
+          </div>
         </tippy>
       </span>
       <ButtonSecondary
@@ -124,6 +139,7 @@
           trigger="click"
           theme="popover"
           arrow
+          :on-shown="() => $refs.saveTippyActions.focus()"
         >
           <template #trigger>
             <ButtonSecondary
@@ -132,6 +148,13 @@
               class="rounded rounded-l-none"
             />
           </template>
+          <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"
@@ -147,6 +170,7 @@
               :label="shareButtonText"
               :svg="copyLinkIcon"
               :loading="fetchingShareLink"
+              :shortcut="['C']"
               @click.native="
                 () => {
                   copyRequest()
@@ -157,6 +181,7 @@
               ref="saveRequest"
               :label="`${t('request.save_as')}`"
               svg="folder-plus"
+              :shortcut="['S']"
               @click.native="
                 () => {
                   showSaveRequestModal = true
@@ -164,6 +189,7 @@
                 }
               "
             />
+          </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,10 +82,26 @@
               svg="more-vertical"
             />
           </template>
+          <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
+            "
+            @keyup.x="
+              !(team.myRole === 'OWNER' && team.ownersCount == 1)
+                ? $refs.exit.$el.click()
+                : null
+            "
+          >
             <SmartItem
               v-if="team.myRole === 'OWNER'"
+              ref="edit"
               svg="edit"
               :label="t('action.edit')"
+              :shortcut="['E']"
               @click.native="
                 () => {
                   $emit('edit-team')
@@ -88,8 +111,10 @@
             />
             <SmartItem
               v-if="team.myRole === 'OWNER'"
+              ref="delete"
               svg="trash-2"
               :label="t('action.delete')"
+              :shortcut="['⌫']"
               @click.native="
                 () => {
                   confirmRemove = true
@@ -99,8 +124,10 @@
             />
             <SmartItem
               v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-            svg="trash"
+              ref="exit"
+              svg="user-x"
               :label="t('team.exit')"
+              :shortcut="['X']"
               @click.native="
                 () => {
                   confirmExit = true
@@ -108,6 +135,7 @@
                 }
               "
             />
+          </div>
         </tippy>
       </span>
     </div>