Merge branch 'main' into feat/bulk-edit

README.md

@@ -197,6 +197,8 @@ _Official proxy server is hosted by Hoppscotch - **[GitHub](https://github.com/h
 
 🌎 **i18n:** Experience the app in your own language.
 
+Help us to translate Hoppscotch. Please read [`TRANSLATIONS`](TRANSLATIONS.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
+
 📦 **Add-ons:** Official add-ons for hoppscotch.
 
 - **[Proxy](https://github.com/hoppscotch/proxyscotch)** - A simple proxy server created for Hoppscotch

components/app/Header.vue

@@ -9,7 +9,7 @@
           label="HOPPSCOTCH"
           to="/"
         />
-        <AppGitHubStarButton class="mt-1.5 transition" />
+        <AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
       </div>
       <div class="space-x-2 inline-flex items-center">
         <ButtonSecondary
@@ -20,13 +20,13 @@
           class="rounded"
           @click.native="showInstallPrompt()"
         />
-        <!-- <ButtonSecondary
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${$t('app.search')} <kbd>/</kbd>`"
           svg="search"
           class="rounded"
           @click.native="showSearch = true"
-        /> -->
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="`${$t('support.title')} <kbd>?</kbd>`"
@@ -83,7 +83,7 @@
     <AppAnnouncement v-if="!isOnLine" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" /> -->
+    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
   </div>
 </template>
 
@@ -98,19 +98,19 @@ import { defineActionHandler } from "~/helpers/actions"
 export default defineComponent({
   setup() {
     const showSupport = ref(false)
-    // const showSearch = ref(false)
+    const showSearch = ref(false)
 
     defineActionHandler("modals.support.toggle", () => {
       showSupport.value = !showSupport.value
     })
-    // defineActionHandler("modals.search.toggle", () => {
+    defineActionHandler("modals.search.toggle", () => {
-    //   showSearch.value = !showSearch.value
+      showSearch.value = !showSearch.value
-    // })
+    })
 
     return {
       currentUser: useReadonlyStream(currentUser$, null),
       showSupport,
-      // showSearch,
+      showSearch,
     }
   },
   data() {

components/app/Lunr.vue

@@ -0,0 +1,59 @@
+<template>
+  <div key="outputHash">
+    <AppSearchEntry
+      v-for="(shortcut, shortcutIndex) in searchResults"
+      :key="`shortcut-${shortcutIndex}`"
+      :ref="`item-${shortcutIndex}`"
+      :shortcut="shortcut"
+      @action="$emit('action', shortcut.action)"
+    />
+    <div
+      v-if="searchResults.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ search }}"
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
+import lunr from "lunr"
+
+const props = defineProps<{
+  input: Record<string, any>[]
+  search: string
+}>()
+
+const transformedInput = computed(() =>
+  props.input.map((val, i) => {
+    return {
+      __id: i,
+      ...val,
+    }
+  })
+)
+
+const firstInput = computed(() =>
+  transformedInput.value.length > 0 ? transformedInput.value[0] : {}
+)
+
+const idx = computed(() => {
+  return lunr(function () {
+    this.ref("__id")
+
+    Object.keys(firstInput.value).forEach((key) => this.field(key), this)
+
+    transformedInput.value.forEach((doc) => {
+      this.add(doc)
+    }, this)
+  })
+})
+
+const searchResults = computed(() =>
+  idx.value.search(`${props.search}*`).map((result) => props.input[+result.ref])
+)
+</script>

components/app/Search.vue

@@ -1,24 +1,31 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" full-width @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"
         v-model="search"
         v-focus
         type="text"
+        autocomplete="off"
         name="command"
         :placeholder="$t('app.type_a_command_search')"
         class="
           bg-transparent
           border-b border-dividerLight
+          flex flex-shrink-0
           text-secondaryDark text-base
-          leading-normal
+          p-6
-          px-4
-          pt-2
-          pb-6
         "
       />
+      <AppLunr
+        v-if="search"
+        log
+        :input="lunr"
+        :search="search"
+        @action="runAction"
+      />
       <div
+        v-else
         class="
           divide-y divide-dividerLight
           flex flex-col
@@ -28,96 +35,44 @@
           hide-scrollbar
         "
       >
-        <div
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
-          v-for="(map, mapIndex) in filteredMappings"
+          <h5 class="my-2 text-secondaryLight py-2 px-6">
-          :key="`map-${mapIndex}`"
-        >
-          <h5 class="my-2 text-secondaryLight py-2 px-4">
             {{ $t(map.section) }}
           </h5>
-          <div
+          <AppSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            class="
+            :shortcut="shortcut"
-              rounded
+            @action="runAction"
-              cursor-pointer
+          />
-              flex
-              py-2
-              px-4
-              transition
-              items-center
-              group
-              hover:bg-primaryLight
-            "
-            @click="
-              runAction(shortcut.action)
-              hideModal()
-            "
-          >
-            <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
-              {{ shortcut.icon }}
-            </i>
-            <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
-              {{ $t(shortcut.label) }}
-            </span>
-            <span
-              v-for="(key, keyIndex) in shortcut.keys"
-              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
-              class="shortcut-key"
-            >
-              {{ key }}
-            </span>
-          </div>
         </div>
       </div>
     </template>
   </SmartModal>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
-import { invokeAction } from "~/helpers/actions"
+import { HoppAction, invokeAction } from "~/helpers/actions"
-import { spotlight } from "~/helpers/shortcuts"
+import { spotlight as mappings, lunr } from "~/helpers/shortcuts"
 
-export default defineComponent({
+defineProps<{
-  props: {
+  show: boolean
-    show: Boolean,
+}>()
-  },
-  data() {
-    return {
-      search: "",
-      mappings: spotlight,
-    }
-  },
-  computed: {
-    filteredMappings() {
-      return this.mappings.filter((mapping) =>
-        mapping.shortcuts.some((shortcut) =>
-          shortcut.keywords.some((keyword) =>
-            keyword.toLowerCase().includes(this.search.toLowerCase())
-          )
-        )
-      )
-    },
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-    runAction(command) {
-      invokeAction(command, "path_from_invokeAction")
-    },
-  },
-})
-</script>
 
-<style lang="scss" scoped>
+const emit = defineEmits<{
-.shortcut-key {
+  (e: "hide-modal"): void
-  @apply bg-dividerLight;
+}>()
-  @apply rounded;
+
-  @apply ml-2;
+const search = ref("")
-  @apply py-1;
+
-  @apply px-2;
+const hideModal = () => {
-  @apply inline-flex;
+  search.value = ""
+  emit("hide-modal")
 }
-</style>
+
+const runAction = (command: HoppAction) => {
+  invokeAction(command)
+  hideModal()
+}
+</script>

components/app/SearchEntry.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="
+      cursor-pointer
+      flex
+      py-2
+      px-6
+      transition
+      items-center
+      group
+      hover:bg-primaryLight
+      focus:outline-none
+      focus-visible:bg-primaryLight
+    "
+    tabindex="0"
+    @click="$emit('action', shortcut.action)"
+    @keydown.enter="$emit('action', shortcut.action)"
+  >
+    <SmartIcon
+      class="
+        mr-4
+        opacity-75
+        transition
+        svg-icons
+        group-hover:opacity-100
+        group-focus:opacity-100
+      "
+      :name="shortcut.icon"
+    />
+    <span
+      class="
+        flex flex-1
+        mr-4
+        transition
+        group-hover:text-secondaryDark
+        group-focus:text-secondaryDark
+      "
+    >
+      {{ $t(shortcut.label) }}
+    </span>
+    <span
+      v-for="(key, keyIndex) in shortcut.keys"
+      :key="`key-${keyIndex}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  shortcut: Object
+}>()
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>

components/app/Shortcuts.vue

@@ -19,11 +19,11 @@
           <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
         </div>
       </div>
-      <div class="bg-primary border-b border-dividerLight">
+      <!-- <div class="bg-primary border-b border-dividerLight">
         <div class="flex flex-col my-4 mx-6">
           <input
             v-model="filterText"
-            type="search"
+            type="search" autocomplete="off"
             class="
               bg-primaryLight
               border border-dividerLight
@@ -37,7 +37,7 @@
             :placeholder="$t('action.search')"
           />
         </div>
-      </div>
+      </div> -->
       <div
         class="
           divide-y divide-dividerLight
@@ -86,7 +86,7 @@ export default defineComponent({
   },
   data() {
     return {
-      filterText: "",
+      // filterText: "",
       mappings: shortcuts,
     }
   },

components/collections/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">

components/collections/AddFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">

components/collections/ChooseType.vue

@@ -16,6 +16,7 @@
             <select
               id="team"
               type="text"
+              autocomplete="off"
               autofocus
               class="
                 bg-transparent

components/collections/Edit.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">

components/collections/EditFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">

components/collections/EditRequest.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">

components/collections/ImportExport.vue

@@ -127,6 +127,7 @@
         <div class="select-wrapper">
           <select
             type="text"
+            autocomplete="off"
             class="select"
             autofocus
             @change="

components/collections/SaveRequest.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">

components/collections/graphql/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">

components/collections/graphql/AddFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">

components/collections/graphql/Edit.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">

components/collections/graphql/EditFolder.vue

@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">

components/collections/graphql/EditRequest.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">

components/collections/graphql/index.vue

@@ -18,6 +18,7 @@
         v-if="showCollActions"
         v-model="filterText"
         type="search"
+        autocomplete="off"
         :placeholder="$t('action.search')"
         class="bg-transparent flex w-full py-2 px-4"
       />

components/collections/index.vue

@@ -20,6 +20,7 @@
         <input
           v-model="filterText"
           type="search"
+          autocomplete="off"
           :placeholder="$t('action.search')"
           class="bg-transparent flex w-full py-2 pr-2 pl-4"
         />

components/environments/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">

components/environments/Edit.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             :disabled="editingEnvironmentIndex === 'Global'"
             @keyup.enter="saveEnvironment"
           />

components/firebase/Login.vue

@@ -35,7 +35,7 @@
             placeholder=" "
             type="email"
             name="email"
-            autocomplete="email"
+            autocomplete="off"
             required
             spellcheck="false"
             autofocus

components/graphql/Request.vue

@@ -6,6 +6,7 @@
         v-model="url"
         v-focus
         type="url"
+        autocomplete="off"
         spellcheck="false"
         class="
           bg-primaryLight

components/graphql/RequestOptions.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
+    <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
         <AppSection label="query">
           <div

components/graphql/Sidebar.vue

@@ -1,12 +1,13 @@
 <template>
   <aside>
-    <SmartTabs styles="sticky z-10 top-0">
+    <SmartTabs styles="sticky bg-primary z-10 top-0">
       <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
         <AppSection label="docs">
           <div class="bg-primary flex top-sidebarPrimaryStickyFold z-10 sticky">
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
+              autocomplete="off"
               :placeholder="$t('action.search')"
               class="bg-transparent flex w-full p-4 py-2"
             />
@@ -22,7 +23,7 @@
           </div>
           <SmartTabs
             ref="gqlTabs"
-            styles="border-t border-dividerLight sticky z-10 top-sidebarSecondaryStickyFold"
+            styles="border-t border-dividerLight bg-primary sticky z-10 top-sidebarSecondaryStickyFold"
           >
             <div class="gqlTabs">
               <SmartTab

components/history/index.vue

@@ -13,6 +13,7 @@
       <input
         v-model="filterText"
         type="search"
+        autocomplete="off"
         class="bg-transparent flex w-full p-4 py-2"
         :placeholder="$t('action.search')"
       />

components/http/Request.vue

@@ -84,6 +84,7 @@
           "
           name="url"
           type="text"
+          autocomplete="off"
           spellcheck="false"
           :placeholder="$t('request.url')"
           autofocus
@@ -166,6 +167,7 @@
             :placeholder="$t('request.name')"
             name="request-name"
             type="text"
+            autocomplete="off"
             class="mb-2 input"
             @keyup.enter="saveOptions.tippy().hide()"
           />

components/lenses/ResponseBodyRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
+  <SmartTabs styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.renderer"

components/realtime/Mqtt.vue

@@ -11,6 +11,7 @@
                   v-model="url"
                   v-focus
                   type="url"
+                  autocomplete="off"
                   spellcheck="false"
                   class="
                     bg-primaryLight
@@ -69,6 +70,7 @@
             class="input"
             :placeholder="$t('mqtt.topic_name')"
             type="text"
+            autocomplete="off"
             spellcheck="false"
           />
         </div>
@@ -83,6 +85,7 @@
             v-model="msg"
             class="input"
             type="text"
+            autocomplete="off"
             :placeholder="$t('mqtt.message')"
             spellcheck="false"
           />
@@ -112,6 +115,7 @@
             id="sub_topic"
             v-model="sub_topic"
             type="text"
+            autocomplete="off"
             :placeholder="$t('mqtt.topic_name')"
             spellcheck="false"
             class="input"

components/realtime/Socketio.vue

@@ -12,6 +12,7 @@
                     v-model="url"
                     v-focus
                     type="url"
+                    autocomplete="off"
                     spellcheck="false"
                     :class="{ error: !urlValid }"
                     class="
@@ -94,6 +95,7 @@
             name="event_name"
             :placeholder="$t('socketio.event_name')"
             type="text"
+            autocomplete="off"
             :disabled="!connectionState"
           />
         </div>
@@ -123,6 +125,7 @@
                 name="message"
                 :placeholder="$t('count.message', { count: index + 1 })"
                 type="text"
+                autocomplete="off"
                 :disabled="!connectionState"
                 @keyup.enter="connectionState ? sendMessage() : null"
               />

components/realtime/Sse.vue

@@ -9,6 +9,7 @@
               v-model="server"
               v-focus
               type="url"
+              autocomplete="off"
               :class="{ error: !serverValid }"
               class="
                 bg-primaryLight

components/realtime/Websocket.vue

@@ -23,6 +23,7 @@
                     focus-visible:border-dividerDark
                   "
                   type="url"
+                  autocomplete="off"
                   spellcheck="false"
                   :class="{ error: !urlValid }"
                   :placeholder="$t('websocket.url')"
@@ -89,6 +90,7 @@
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
+                autocomplete="off"
               />
               <span>
                 <ButtonSecondary
@@ -174,6 +176,7 @@
             v-model="communication.input"
             name="message"
             type="text"
+            autocomplete="off"
             :disabled="!connectionState"
             :placeholder="$t('websocket.message')"
             class="input"

components/smart/AutoComplete.vue

@@ -4,6 +4,7 @@
       ref="acInput"
       v-model="text"
       type="text"
+      autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"

components/smart/Modal.vue

@@ -37,7 +37,6 @@
               shadow-lg
               text-left
               w-full
-              p-4
               transform
               transition-all
               inline-block
@@ -46,7 +45,10 @@
               sm:max-w-md sm:align-middle
               md:rounded-lg
             "
-            :class="{ 'mt-24 md:mb-8': placement === 'top' }"
+            :class="[
+              { 'mt-24 md:mb-8': placement === 'top' },
+              { 'p-4': !fullWidth },
+            ]"
           >
             <div
               v-if="title"
@@ -64,7 +66,8 @@
               </span>
             </div>
             <div
-              class="flex flex-col max-h-md py-2 overflow-y-auto hide-scrollbar"
+              class="flex flex-col max-h-md overflow-y-auto hide-scrollbar"
+              :class="{ 'py-2': !fullWidth }"
             >
               <slot name="body"></slot>
             </div>
@@ -115,6 +118,10 @@ export default defineComponent({
       type: String,
       default: "top",
     },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup() {
     const { disableKeybindings, enableKeybindings } = useKeybindingDisabler()

components/smart/Tabs.vue

@@ -69,7 +69,6 @@ export default defineComponent({
   @apply flex;
   @apply whitespace-nowrap;
   @apply overflow-auto;
-  @apply bg-primary;
 
   // &::after {
   //   @apply absolute;

components/smart/Toggle.vue

@@ -6,7 +6,7 @@
     <label ref="toggle" class="toggle" :class="{ on: on }">
       <span class="handle"></span>
     </label>
-    <label class="cursor-pointer pl-0 align-middle truncate">
+    <label class="cursor-pointer pl-0 align-middle">
       <slot></slot>
     </label>
   </div>

components/teams/Add.vue

@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">

components/teams/Edit.vue

@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">

helpers/shortcuts.js

@@ -4,14 +4,14 @@ export default [
   {
     section: "shortcut.general.title",
     shortcuts: [
-      // {
+      {
-      //   keys: ["?"],
+        keys: ["?"],
-      //   label: "shortcut.general.help_menu",
+        label: "shortcut.general.help_menu",
-      // },
+      },
-      // {
+      {
-      //   keys: ["/"],
+        keys: ["/"],
-      //   label: "shortcut.general.command_menu",
+        label: "shortcut.general.command_menu",
-      // },
+      },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
@@ -104,15 +104,15 @@ export default [
       },
     ],
   },
-  // {
+  {
-  //   section: "shortcut.miscellaneous.title",
+    section: "shortcut.miscellaneous.title",
-  //   shortcuts: [
+    shortcuts: [
-  //     {
+      {
-  //       keys: [getPlatformSpecialKey(), "M"],
+        keys: [getPlatformSpecialKey(), "M"],
-  //       label: "shortcut.miscellaneous.invite",
+        label: "shortcut.miscellaneous.invite",
-  //     },
+      },
-  //   ],
+    ],
-  // },
+  },
 ]
 
 export const spotlight = [
@@ -123,27 +123,13 @@ export const spotlight = [
         keys: ["?"],
         label: "shortcut.general.help_menu",
         action: "modals.support.toggle",
-        icon: "support",
+        icon: "life-buoy",
-        keywords: [
-          "help",
-          "support",
-          "documentation",
-          "troubleshooting",
-          "chat",
-          "community",
-          "feedback",
-          "report",
-          "bug",
-          "issue",
-          "ticket",
-        ],
       },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
         action: "flyouts.keybinds.toggle",
-        icon: "keyboard",
+        icon: "zap",
-        keywords: ["keyboard", "shortcuts"],
       },
     ],
   },
@@ -154,68 +140,43 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "←"],
         label: "shortcut.navigation.back",
         action: "navigation.jump.back",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: ["back", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformSpecialKey(), "→"],
         label: "shortcut.navigation.forward",
         action: "navigation.jump.forward",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: ["forward", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
         action: "navigation.jump.rest",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: ["rest", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.jump.graphql",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: ["graphql", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
         action: "navigation.jump.realtime",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: [
-          "realtime",
-          "jump",
-          "page",
-          "navigation",
-          "websocket",
-          "socket",
-          "mqtt",
-          "sse",
-          "go",
-        ],
       },
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
         action: "navigation.jump.documentation",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: ["documentation", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
         action: "navigation.jump.settings",
-        icon: "arrow_forward",
+        icon: "arrow-right",
-        keywords: [
-          "settings",
-          "jump",
-          "page",
-          "navigation",
-          "account",
-          "theme",
-          "go",
-        ],
       },
     ],
   },
@@ -226,9 +187,81 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "M"],
         label: "shortcut.miscellaneous.invite",
         action: "modals.share.toggle",
-        icon: "person_add_alt",
+        icon: "gift",
-        keywords: ["invite", "share", "app", "social"],
       },
     ],
   },
 ]
+
+export const lunr = [
+  {
+    keys: ["?"],
+    label: "shortcut.general.help_menu",
+    action: "modals.support.toggle",
+    icon: "life-buoy",
+    tags: "help support menu discord twitter documentation troubleshooting chat community feedback report bug issue ticket",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "K"],
+    label: "shortcut.general.show_all",
+    action: "flyouts.keybinds.toggle",
+    icon: "zap",
+    tags: "keyboard shortcuts",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "←"],
+    label: "shortcut.navigation.back",
+    action: "navigation.jump.back",
+    icon: "arrow-right",
+    tags: "back jump page navigation go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "→"],
+    label: "shortcut.navigation.forward",
+    action: "navigation.jump.forward",
+    icon: "arrow-right",
+    tags: "forward jump next forward page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "R"],
+    label: "shortcut.navigation.rest",
+    action: "navigation.jump.rest",
+    icon: "arrow-right",
+    tags: "rest jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "Q"],
+    label: "shortcut.navigation.graphql",
+    action: "navigation.jump.graphql",
+    icon: "arrow-right",
+    tags: "graphql jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "W"],
+    label: "shortcut.navigation.realtime",
+    action: "navigation.jump.realtime",
+    icon: "arrow-right",
+    tags: "realtime jump page navigation websocket socket mqtt sse go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "D"],
+    label: "shortcut.navigation.documentation",
+    action: "navigation.jump.documentation",
+    icon: "arrow-right",
+    tags: "documentation jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "S"],
+    label: "shortcut.navigation.settings",
+    action: "navigation.jump.settings",
+    icon: "arrow-right",
+    tags: "settings jump page navigation account theme go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "M"],
+    label: "shortcut.miscellaneous.invite",
+    action: "modals.share.toggle",
+    icon: "gift",
+    tags: "invite share app friends people social",
+  },
+]

nuxt.config.js

@@ -181,7 +181,7 @@ export default {
     position: "bottom-center",
     duration: 3000,
     keepOnHover: true,
-    singleton: true,
+    // singleton: true,
   },
 
   // Google Analytics module configuration (https://github.com/nuxt-community/analytics-module)

package-lock.json

@@ -25,6 +25,7 @@
         "graphql-language-service-interface": "^2.8.4",
         "json-loader": "^0.5.7",
         "lodash": "^4.17.21",
+        "lunr": "^2.3.9",
         "mustache": "^4.2.0",
         "node-interval-tree": "^1.3.3",
         "nuxt": "^2.15.8",
@@ -60,6 +61,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@types/cookie": "^0.4.1",
         "@types/lodash": "^4.14.172",
+        "@types/lunr": "^2.3.4",
         "@types/splitpanes": "^2.2.1",
         "@vue/runtime-dom": "^3.2.6",
         "@vue/test-utils": "^1.2.2",
@@ -8126,6 +8128,12 @@
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
       "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
+    "node_modules/@types/lunr": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.4.tgz",
+      "integrity": "sha512-j4x4XJwZvorEUbA519VdQ5b9AOU9TSvfi8tvxMAfP8XzNLtFex7A8vFQwqOx3WACbV0KMXbACV3cZl4/gynQ7g==",
+      "dev": true
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -23215,6 +23223,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
     "node_modules/magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -42032,6 +42045,12 @@
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
       "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
     },
+    "@types/lunr": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.4.tgz",
+      "integrity": "sha512-j4x4XJwZvorEUbA519VdQ5b9AOU9TSvfi8tvxMAfP8XzNLtFex7A8vFQwqOx3WACbV0KMXbACV3cZl4/gynQ7g==",
+      "dev": true
+    },
     "@types/mdast": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -53735,6 +53754,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
+    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",

package.json

@@ -41,6 +41,7 @@
     "graphql-language-service-interface": "^2.8.4",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",
+    "lunr": "^2.3.9",
     "mustache": "^4.2.0",
     "node-interval-tree": "^1.3.3",
     "nuxt": "^2.15.8",
@@ -76,6 +77,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@types/cookie": "^0.4.1",
     "@types/lodash": "^4.14.172",
+    "@types/lunr": "^2.3.4",
     "@types/splitpanes": "^2.2.1",
     "@vue/runtime-dom": "^3.2.6",
     "@vue/test-utils": "^1.2.2",

pages/index.vue

@@ -4,7 +4,7 @@
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
-          <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
+          <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
             <SmartTab
               :id="'params'"
               :label="$t('tab.parameters')"
@@ -55,7 +55,7 @@
       class="hide-scrollbar !overflow-auto"
     >
       <aside>
-        <SmartTabs styles="sticky z-10 top-0">
+        <SmartTabs styles="sticky bg-primary z-10 top-0">
           <SmartTab :id="'history'" :label="$t('tab.history')" :selected="true">
             <History ref="historyComponent" :page="'rest'" />
           </SmartTab>

pages/realtime.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     class="h-full overflow-hidden"
-    styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
+    styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
   >
     <SmartTab
       id="websocket"

pages/settings.vue

@@ -305,6 +305,7 @@
                   class="input floating-input"
                   placeholder=" "
                   type="url"
+                  autocomplete="off"
                   :disabled="!PROXY_ENABLED"
                 />
                 <label for="url">