feat: quick shortcut key for menu items

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

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>

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>