refactor: improved popover actions, key bindings

packages/hoppscotch-app/src/components/graphql/Authorization.vue

@@ -8,20 +8,19 @@
           {{ t("authorization.type") }}
         </label>
         <tippy
-          ref="authTypeOptions"
           interactive
           trigger="click"
           theme="popover"
-          arrow
+          :on-shown="() => tippyActions.focus()"
         >
           <span class="select-wrapper">
             <ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
           </span>
           <template #content="{ hide }">
             <div
-              class="flex flex-col space-y-1"
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
               tabindex="0"
-              role="menu"
               @keyup.escape="hide()"
             >
               <SmartItem
@@ -175,11 +174,10 @@
                 {{ t("authorization.pass_key_by") }}
               </label>
               <tippy
-                ref="addToOptions"
                 interactive
                 trigger="click"
                 theme="popover"
-                arrow
+                :on-shown="() => authTippyActions.focus()"
               >
                 <span class="select-wrapper">
                   <ButtonSecondary
@@ -189,9 +187,9 @@
                 </span>
                 <template #content="{ hide }">
                   <div
-                    class="flex flex-col"
+                    ref="authTippyActions"
+                    class="flex flex-col focus:outline-none"
                     tabindex="0"
-                    role="menu"
                     @keyup.escape="hide()"
                   >
                     <SmartItem
@@ -301,6 +299,8 @@ const clearContent = () => {
     authActive: true,
   }
 }
-const authTypeOptions = ref<any | null>(null)
-const addToOptions = ref<any | null>(null)
+
+// Template refs
+const tippyActions = ref<any | null>(null)
+const authTippyActions = ref<any | null>(null)
 </script>

packages/hoppscotch-app/src/components/graphql/Response.vue

@@ -23,14 +23,18 @@
             @click.prevent="linewrapEnabled = !linewrapEnabled"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.download_file')"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="`${t(
+              'action.download_file'
+            )} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
             :icon="downloadResponseIcon"
             @click="downloadResponse"
           />
           <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.copy')"
+            v-tippy="{ theme: 'tooltip', allowHTML: true }"
+            :title="`${t(
+              'action.copy'
+            )} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
             :icon="copyResponseIcon"
             @click="copyResponse"
           />
@@ -86,6 +90,8 @@ import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { gqlResponse$ } from "~/newstore/GQLSession"
+import { defineActionHandler } from "~/helpers/actions"
+import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 
 const t = useI18n()
 
@@ -141,4 +147,7 @@ const downloadResponse = () => {
     URL.revokeObjectURL(url)
   }, 1000)
 }
+
+defineActionHandler("response.file.download", () => downloadResponse())
+defineActionHandler("response.copy", () => copyResponse())
 </script>