feat: quick shortcut key for menu items

2021-12-20 00:22:31 +05:30
parent 39d6b1bfeb
commit 827f2157fa
25 changed files with 749 additions and 467 deletions
--- a/packages/hoppscotch-app/assets/icons/user-minus.svg
+++ 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>
--- a/packages/hoppscotch-app/assets/icons/user-x.svg
+++ 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>
--- 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) {
--- 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");
--- 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")}` }}
--- 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>
--- 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)"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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 {
--- 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>
--- 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,
--- 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)"
                />
--- 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>