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>
+              <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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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>
--- 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,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
--- 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,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>
--- 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,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>