From 16b9a2b06e603754bb86e3dcf2bf47996001f2c2 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 Aug 2021 23:23:16 +0530
Subject: [PATCH 1/8] feat: search

---
 components/app/Header.vue    |  16 +--
 components/app/Lunr.vue      | 229 +++++++++++++++++++++++++++++++++++
 components/app/Search.vue    |  34 +++---
 components/app/Shortcuts.vue |   6 +-
 helpers/shortcuts.js         | 147 +++++++++++++---------
 package-lock.json            |  15 ++-
 package.json                 |   1 +
 7 files changed, 358 insertions(+), 90 deletions(-)
 create mode 100644 components/app/Lunr.vue

diff --git a/components/app/Header.vue b/components/app/Header.vue
index 8be8e3f4f..927ba78e9 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -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", () => {
-    //   showSearch.value = !showSearch.value
-    // })
+    defineActionHandler("modals.search.toggle", () => {
+      showSearch.value = !showSearch.value
+    })
 
     return {
       currentUser: useReadonlyStream(currentUser$, null),
       showSupport,
-      // showSearch,
+      showSearch,
     }
   },
   data() {
diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
new file mode 100644
index 000000000..3c9eee180
--- /dev/null
+++ b/components/app/Lunr.vue
@@ -0,0 +1,229 @@
+<template>
+  <div key="outputHash">
+    <div
+      v-for="(shortcut, shortcutIndex) in theOutput"
+      :key="`shortcut-${shortcutIndex}`"
+      class="
+        rounded
+        cursor-pointer
+        flex
+        py-2
+        px-4
+        transition
+        items-center
+        group
+        hover:bg-primaryLight
+      "
+      @click="$emit('action', shortcut.action)"
+    >
+      <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="`shortcut-${shortcutIndex}-key-${keyIndex}`"
+        class="shortcut-key"
+      >
+        {{ key }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import lunr from "lunr"
+
+export default {
+  props: {
+    input: {
+      type: Array,
+      required: true,
+    },
+    search: {
+      type: String,
+      default: "",
+    },
+    limit: {
+      type: Number,
+      default: 1000,
+    },
+    stopWords: {
+      type: Boolean,
+      default: false,
+    },
+    log: {
+      type: Boolean,
+      default: false,
+    },
+    fields: {
+      type: Object,
+      default() {
+        if (typeof this.input[0] === "object") {
+          return this.input[0]
+        }
+        return {}
+      },
+    },
+    perpendKey: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      outputHash: "",
+      theOutput: [],
+      cache: {},
+    }
+  },
+  computed: {
+    hashInput() {
+      return this.hashThis(JSON.stringify(this.input))
+    },
+    idx() {
+      if (!this.input[0]) return {}
+      const loaded = this.cache[this.hashInput]
+      return loaded ? lunr.Index.load(loaded) : this.makeIndex(this.hashInput)
+    },
+  },
+  watch: {
+    search: {
+      handler(search = "") {
+        if (
+          (!search.trim() || search === "undefined") &&
+          Array.isArray(this.input)
+        ) {
+          this.$emit("results-length", this.input.length)
+          this.$emit("results", this.input.slice(0, this.limit))
+          this.theOutput = this.input.slice(0, this.limit)
+          return
+        }
+        const update = (output) => {
+          if (output.then) {
+            const that = this
+            return output.then((newOutput) => {
+              const hash = that.hashThis(JSON.stringify(newOutput))
+              if (that.outputHash === hash) return
+              that.outputHash = hash
+              that.$emit("results-length", newOutput.length)
+              that.$emit("results", newOutput.slice(0, that.limit))
+              that.theOutput = newOutput.slice(0, that.limit)
+            })
+          }
+          const hash = this.hashThis(JSON.stringify(output))
+          if (this.outputHash === hash) return
+          this.outputHash = hash
+          try {
+            this.$emit("results-length", output.length)
+            this.$emit("results", output.slice(0, this.limit))
+            this.theOutput = output.slice(0, this.limit)
+          } catch (e) {
+            console.warn(e, "???", output)
+          }
+        }
+        if (this.output.then) {
+          return this.output(search).then(async (output) => {
+            update(await output)
+          })
+        }
+        update(this.output(search))
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async output(search) {
+      const that = this
+      if ((await this.idx) && (await this.idx.search)) {
+        return this.idx.search(`${search}*`).map(function (valu) {
+          return that.input[+valu.ref]
+        }, that)
+      }
+      if (this.idx.then)
+        return this.idx.then((index) => {
+          return index.search(`${search}*`).map(function (valu) {
+            return that.input[+valu.ref]
+          }, that)
+        })
+      // no index
+      return this.input
+    },
+    makeIndex(hashInput) {
+      const that = this
+      if (this.input[0] && this.search) {
+        const first = this.fields
+        // if (this.log) console.log("feilds from ", first)
+
+        const stopWords = this.stopWords
+        const documents = this.input.map(function (val, i) {
+          const doc = {}
+          const seen = []
+          function replacer(key, value) {
+            if (key[0] === "_") {
+              return
+            } else if (typeof value === "object" && value !== null) {
+              if (seen.includes(key)) return
+              else seen.push(key)
+            }
+            return value
+          }
+          Object.keys(val).forEach(function (key) {
+            doc[key] = JSON.stringify(val[key], replacer)
+          })
+          return { __id: i, ...val }
+        })
+        const idx = lunr(function () {
+          this.ref("__id")
+          if (!stopWords) {
+            this.pipeline.remove(lunr.stopWordFilter)
+            this.pipeline.remove(lunr.stemmer)
+          }
+          Object.keys(first).forEach(function (key) {
+            if (key[0] !== "_") {
+              this.field(key)
+            }
+          }, this)
+          documents.forEach(function (doc) {
+            this.add(doc)
+          }, this)
+          // if (that.log) console.log(this)
+        })
+        that.cache[hashInput] = idx.toJSON()
+        return idx
+      } else {
+        return {}
+      }
+    },
+    hashThis(message, n = 8) {
+      if (+n === 0) return message
+      let hash = 0
+      if (message.length === 0) return this.hashThis(this.hex32(hash), n - 1)
+      for (let i = 0; i < message.length; i++) {
+        const char = message.charCodeAt(i)
+        hash = (hash << 5) - hash + char
+        hash = hash & hash // Convert to 32bit integer
+      }
+      return this.hashThis(this.hex32(hash), n - 1)
+    },
+    hex32(val) {
+      val &= 0xffffffff
+      const hex = val.toString(16).toUpperCase()
+      return ("00000000" + hex).slice(-8)
+    },
+  },
+}
+</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>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 9f7d5a51b..dfe9425b7 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -18,7 +18,15 @@
           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,10 +36,7 @@
           hide-scrollbar
         "
       >
-        <div
-          v-for="(map, mapIndex) in filteredMappings"
-          :key="`map-${mapIndex}`"
-        >
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
           <h5 class="my-2 text-secondaryLight py-2 px-4">
             {{ $t(map.section) }}
           </h5>
@@ -49,10 +54,7 @@
               group
               hover:bg-primaryLight
             "
-            @click="
-              runAction(shortcut.action)
-              hideModal()
-            "
+            @click="runAction(shortcut.action)"
           >
             <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
               {{ shortcut.icon }}
@@ -77,7 +79,7 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
-import { spotlight } from "~/helpers/shortcuts"
+import { spotlight, lunr } from "~/helpers/shortcuts"
 
 export default defineComponent({
   props: {
@@ -87,25 +89,17 @@ export default defineComponent({
     return {
       search: "",
       mappings: spotlight,
+      lunr,
     }
   },
-  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")
+      this.search = ""
+      this.hideModal()
     },
   },
 })
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 31afa2fb2..23d9ae372 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -19,7 +19,7 @@
           <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"
@@ -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,
     }
   },
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 57ca92723..97a7c4025 100644
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -4,14 +4,14 @@ export default [
   {
     section: "shortcut.general.title",
     shortcuts: [
-      // {
-      //   keys: ["?"],
-      //   label: "shortcut.general.help_menu",
-      // },
-      // {
-      //   keys: ["/"],
-      //   label: "shortcut.general.command_menu",
-      // },
+      {
+        keys: ["?"],
+        label: "shortcut.general.help_menu",
+      },
+      {
+        keys: ["/"],
+        label: "shortcut.general.command_menu",
+      },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
@@ -104,15 +104,15 @@ export default [
       },
     ],
   },
-  // {
-  //   section: "shortcut.miscellaneous.title",
-  //   shortcuts: [
-  //     {
-  //       keys: [getPlatformSpecialKey(), "M"],
-  //       label: "shortcut.miscellaneous.invite",
-  //     },
-  //   ],
-  // },
+  {
+    section: "shortcut.miscellaneous.title",
+    shortcuts: [
+      {
+        keys: [getPlatformSpecialKey(), "M"],
+        label: "shortcut.miscellaneous.invite",
+      },
+    ],
+  },
 ]
 
 export const spotlight = [
@@ -124,26 +124,12 @@ export const spotlight = [
         label: "shortcut.general.help_menu",
         action: "modals.support.toggle",
         icon: "support",
-        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",
-        keywords: ["keyboard", "shortcuts"],
       },
     ],
   },
@@ -155,67 +141,42 @@ export const spotlight = [
         label: "shortcut.navigation.back",
         action: "navigation.jump.back",
         icon: "arrow_forward",
-        keywords: ["back", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformSpecialKey(), "→"],
         label: "shortcut.navigation.forward",
         action: "navigation.jump.forward",
         icon: "arrow_forward",
-        keywords: ["forward", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
         action: "navigation.jump.rest",
         icon: "arrow_forward",
-        keywords: ["rest", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.jump.graphql",
         icon: "arrow_forward",
-        keywords: ["graphql", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
         action: "navigation.jump.realtime",
         icon: "arrow_forward",
-        keywords: [
-          "realtime",
-          "jump",
-          "page",
-          "navigation",
-          "websocket",
-          "socket",
-          "mqtt",
-          "sse",
-          "go",
-        ],
       },
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
         action: "navigation.jump.documentation",
         icon: "arrow_forward",
-        keywords: ["documentation", "jump", "page", "navigation", "go"],
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
         action: "navigation.jump.settings",
         icon: "arrow_forward",
-        keywords: [
-          "settings",
-          "jump",
-          "page",
-          "navigation",
-          "account",
-          "theme",
-          "go",
-        ],
       },
     ],
   },
@@ -227,8 +188,80 @@ export const spotlight = [
         label: "shortcut.miscellaneous.invite",
         action: "modals.share.toggle",
         icon: "person_add_alt",
-        keywords: ["invite", "share", "app", "social"],
       },
     ],
   },
 ]
+
+export const lunr = [
+  {
+    keys: ["?"],
+    label: "shortcut.general.help_menu",
+    action: "modals.support.toggle",
+    icon: "support",
+    tags: "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",
+    tags: "keyboard shortcuts",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "←"],
+    label: "shortcut.navigation.back",
+    action: "navigation.jump.back",
+    icon: "arrow_forward",
+    tags: "back jump page navigation go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "→"],
+    label: "shortcut.navigation.forward",
+    action: "navigation.jump.forward",
+    icon: "arrow_forward",
+    tags: "forward jump next forward page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "R"],
+    label: "shortcut.navigation.rest",
+    action: "navigation.jump.rest",
+    icon: "arrow_forward",
+    tags: "rest jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "Q"],
+    label: "shortcut.navigation.graphql",
+    action: "navigation.jump.graphql",
+    icon: "arrow_forward",
+    tags: "graphql jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "W"],
+    label: "shortcut.navigation.realtime",
+    action: "navigation.jump.realtime",
+    icon: "arrow_forward",
+    tags: "realtime jump page navigation websocket socket mqtt sse go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "D"],
+    label: "shortcut.navigation.documentation",
+    action: "navigation.jump.documentation",
+    icon: "arrow_forward",
+    tags: "documentation jump page navigation go",
+  },
+  {
+    keys: [getPlatformAlternateKey(), "S"],
+    label: "shortcut.navigation.settings",
+    action: "navigation.jump.settings",
+    icon: "arrow_forward",
+    tags: "settings jump page navigation account theme go",
+  },
+  {
+    keys: [getPlatformSpecialKey(), "M"],
+    label: "shortcut.miscellaneous.invite",
+    action: "modals.share.toggle",
+    icon: "person_add_alt",
+    tags: "invite share app social",
+  },
+]
diff --git a/package-lock.json b/package-lock.json
index 2e84b2b3c..d5af68813 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
   "name": "hoppscotch",
-  "version": "1.12.0",
+  "version": "2.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.12.0",
+      "version": "2.0.0",
       "dependencies": {
         "@apollo/client": "^3.4.8",
         "@nuxtjs/axios": "^5.13.6",
@@ -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",
@@ -22921,6 +22922,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",
@@ -52895,6 +52901,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",
diff --git a/package.json b/package.json
index d800242b5..54173064e 100644
--- a/package.json
+++ b/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",

From 647599e5aaa980a9c9b3b6c38be1bf32190709e0 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 09:44:46 +0530
Subject: [PATCH 2/8] refactor: full-width modal for search, transparent tabs

---
 components/app/Lunr.vue                    | 10 ++---
 components/app/Search.vue                  | 30 +++++++++------
 components/graphql/RequestOptions.vue      |  2 +-
 components/graphql/Sidebar.vue             |  4 +-
 components/lenses/ResponseBodyRenderer.vue |  2 +-
 components/smart/Modal.vue                 | 13 +++++--
 components/smart/Tabs.vue                  |  1 -
 helpers/shortcuts.js                       | 44 +++++++++++-----------
 pages/index.vue                            |  4 +-
 pages/realtime.vue                         |  2 +-
 10 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index 3c9eee180..7dd60e2e2 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -4,7 +4,6 @@
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
       class="
-        rounded
         cursor-pointer
         flex
         py-2
@@ -16,10 +15,11 @@
       "
       @click="$emit('action', shortcut.action)"
     >
-      <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">
+      <SmartIcon
+        class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
+        :name="shortcut.icon"
+      />
+      <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
         {{ $t(shortcut.label) }}
       </span>
       <span
diff --git a/components/app/Search.vue b/components/app/Search.vue
index dfe9425b7..df82cfc90 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
+  <SmartModal v-if="show" full-width @close="$emit('hide-modal')">
     <template #body>
       <input
         id="command"
@@ -11,11 +11,11 @@
         class="
           bg-transparent
           border-b border-dividerLight
+          flex flex-shrink-0
           text-secondaryDark text-base
           leading-normal
-          px-4
-          pt-2
-          pb-6
+          py-4
+          px-6
         "
       />
       <AppLunr
@@ -37,18 +37,17 @@
         "
       >
         <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
-          <h5 class="my-2 text-secondaryLight py-2 px-4">
+          <h5 class="my-2 text-secondaryLight py-2 px-6">
             {{ $t(map.section) }}
           </h5>
           <div
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
             class="
-              rounded
               cursor-pointer
               flex
               py-2
-              px-4
+              px-6
               transition
               items-center
               group
@@ -56,10 +55,19 @@
             "
             @click="runAction(shortcut.action)"
           >
-            <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">
+            <SmartIcon
+              class="
+                mr-4
+                opacity-75
+                transition
+                svg-icons
+                group-hover:opacity-100
+              "
+              :name="shortcut.icon"
+            />
+            <span
+              class="flex flex-1 mr-4 transition group-hover:text-secondaryDark"
+            >
               {{ $t(shortcut.label) }}
             </span>
             <span
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index edfab5ca5..6e79dcd99 100644
--- a/components/graphql/RequestOptions.vue
+++ b/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
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 1de2e324f..e0b796011 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -1,6 +1,6 @@
 <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">
@@ -22,7 +22,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
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 36432fc1b..1dccd74c3 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/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"
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index dc61fe753..5c5bacfa4 100644
--- a/components/smart/Modal.vue
+++ b/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()
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 7ed17f84f..6f229af58 100644
--- a/components/smart/Tabs.vue
+++ b/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;
diff --git a/helpers/shortcuts.js b/helpers/shortcuts.js
index 97a7c4025..01cce5d48 100644
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -123,13 +123,13 @@ export const spotlight = [
         keys: ["?"],
         label: "shortcut.general.help_menu",
         action: "modals.support.toggle",
-        icon: "support",
+        icon: "life-buoy",
       },
       {
         keys: [getPlatformSpecialKey(), "K"],
         label: "shortcut.general.show_all",
         action: "flyouts.keybinds.toggle",
-        icon: "keyboard",
+        icon: "zap",
       },
     ],
   },
@@ -140,43 +140,43 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "←"],
         label: "shortcut.navigation.back",
         action: "navigation.jump.back",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformSpecialKey(), "→"],
         label: "shortcut.navigation.forward",
         action: "navigation.jump.forward",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "R"],
         label: "shortcut.navigation.rest",
         action: "navigation.jump.rest",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "Q"],
         label: "shortcut.navigation.graphql",
         action: "navigation.jump.graphql",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "W"],
         label: "shortcut.navigation.realtime",
         action: "navigation.jump.realtime",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "D"],
         label: "shortcut.navigation.documentation",
         action: "navigation.jump.documentation",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
       {
         keys: [getPlatformAlternateKey(), "S"],
         label: "shortcut.navigation.settings",
         action: "navigation.jump.settings",
-        icon: "arrow_forward",
+        icon: "arrow-right",
       },
     ],
   },
@@ -187,7 +187,7 @@ export const spotlight = [
         keys: [getPlatformSpecialKey(), "M"],
         label: "shortcut.miscellaneous.invite",
         action: "modals.share.toggle",
-        icon: "person_add_alt",
+        icon: "gift",
       },
     ],
   },
@@ -198,70 +198,70 @@ export const lunr = [
     keys: ["?"],
     label: "shortcut.general.help_menu",
     action: "modals.support.toggle",
-    icon: "support",
-    tags: "help support documentation troubleshooting chat community feedback report bug issue ticket",
+    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: "keyboard",
+    icon: "zap",
     tags: "keyboard shortcuts",
   },
   {
     keys: [getPlatformSpecialKey(), "←"],
     label: "shortcut.navigation.back",
     action: "navigation.jump.back",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "back jump page navigation go",
   },
   {
     keys: [getPlatformSpecialKey(), "→"],
     label: "shortcut.navigation.forward",
     action: "navigation.jump.forward",
-    icon: "arrow_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_forward",
+    icon: "arrow-right",
     tags: "rest jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "Q"],
     label: "shortcut.navigation.graphql",
     action: "navigation.jump.graphql",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "graphql jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "W"],
     label: "shortcut.navigation.realtime",
     action: "navigation.jump.realtime",
-    icon: "arrow_forward",
+    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_forward",
+    icon: "arrow-right",
     tags: "documentation jump page navigation go",
   },
   {
     keys: [getPlatformAlternateKey(), "S"],
     label: "shortcut.navigation.settings",
     action: "navigation.jump.settings",
-    icon: "arrow_forward",
+    icon: "arrow-right",
     tags: "settings jump page navigation account theme go",
   },
   {
     keys: [getPlatformSpecialKey(), "M"],
     label: "shortcut.miscellaneous.invite",
     action: "modals.share.toggle",
-    icon: "person_add_alt",
-    tags: "invite share app social",
+    icon: "gift",
+    tags: "invite share app friends people social",
   },
 ]
diff --git a/pages/index.vue b/pages/index.vue
index 03ff139e0..42ceaf1fa 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 2b386c7bd..50b89d445 100644
--- a/pages/realtime.vue
+++ b/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"

From 5bcee265a60611f7fff317ae06a27120d6cae210 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 10:02:19 +0530
Subject: [PATCH 3/8] fix: show empty state for search results, es6

---
 components/app/Lunr.vue   | 29 ++++++++++++++++++-----------
 components/app/Search.vue |  2 +-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index 7dd60e2e2..e827e8f25 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -30,6 +30,15 @@
         {{ key }}
       </span>
     </div>
+    <div
+      v-if="theOutput.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>
 
@@ -138,16 +147,14 @@ export default {
     async output(search) {
       const that = this
       if ((await this.idx) && (await this.idx.search)) {
-        return this.idx.search(`${search}*`).map(function (valu) {
-          return that.input[+valu.ref]
-        }, that)
+        return this.idx
+          .search(`${search}*`)
+          .map(({ ref }) => that.input[+ref], that)
       }
       if (this.idx.then)
-        return this.idx.then((index) => {
-          return index.search(`${search}*`).map(function (valu) {
-            return that.input[+valu.ref]
-          }, that)
-        })
+        return this.idx.then((index) =>
+          index.search(`${search}*`).map(({ ref }) => that.input[+ref], that)
+        )
       // no index
       return this.input
     },
@@ -158,7 +165,7 @@ export default {
         // if (this.log) console.log("feilds from ", first)
 
         const stopWords = this.stopWords
-        const documents = this.input.map(function (val, i) {
+        const documents = this.input.map((val, i) => {
           const doc = {}
           const seen = []
           function replacer(key, value) {
@@ -170,7 +177,7 @@ export default {
             }
             return value
           }
-          Object.keys(val).forEach(function (key) {
+          Object.keys(val).forEach((key) => {
             doc[key] = JSON.stringify(val[key], replacer)
           })
           return { __id: i, ...val }
@@ -211,7 +218,7 @@ export default {
     hex32(val) {
       val &= 0xffffffff
       const hex = val.toString(16).toUpperCase()
-      return ("00000000" + hex).slice(-8)
+      return `00000000${hex}`.slice(-8)
     },
   },
 }
diff --git a/components/app/Search.vue b/components/app/Search.vue
index df82cfc90..e51c9a1b9 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -102,11 +102,11 @@ export default defineComponent({
   },
   methods: {
     hideModal() {
+      this.search = ""
       this.$emit("hide-modal")
     },
     runAction(command) {
       invokeAction(command, "path_from_invokeAction")
-      this.search = ""
       this.hideModal()
     },
   },

From f75b2e26a32e87586acbdb68ca6f59f4f7ae6720 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 12:00:19 +0530
Subject: [PATCH 4/8] chore: cleanup, typescript

---
 components/app/Lunr.vue        | 43 +++--------------------
 components/app/Search.vue      | 63 +++++-----------------------------
 components/app/SearchEntry.vue | 47 +++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 93 deletions(-)
 create mode 100644 components/app/SearchEntry.vue

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index e827e8f25..19e8ec7a3 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -1,35 +1,11 @@
 <template>
   <div key="outputHash">
-    <div
+    <AppSearchEntry
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
-      class="
-        cursor-pointer
-        flex
-        py-2
-        px-4
-        transition
-        items-center
-        group
-        hover:bg-primaryLight
-      "
-      @click="$emit('action', shortcut.action)"
-    >
-      <SmartIcon
-        class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
-        :name="shortcut.icon"
-      />
-      <span class="flex flex-1 mr-4 transition group-hover:text-secondaryDark">
-        {{ $t(shortcut.label) }}
-      </span>
-      <span
-        v-for="(key, keyIndex) in shortcut.keys"
-        :key="`shortcut-${shortcutIndex}-key-${keyIndex}`"
-        class="shortcut-key"
-      >
-        {{ key }}
-      </span>
-    </div>
+      :shortcut="shortcut"
+      @action="$emit('action', shortcut.action)"
+    />
     <div
       v-if="theOutput.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
@@ -223,14 +199,3 @@ export default {
   },
 }
 </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>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index e51c9a1b9..f3964d27f 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -13,9 +13,7 @@
           border-b border-dividerLight
           flex flex-shrink-0
           text-secondaryDark text-base
-          leading-normal
-          py-4
-          px-6
+          p-6
         "
       />
       <AppLunr
@@ -40,53 +38,21 @@
           <h5 class="my-2 text-secondaryLight py-2 px-6">
             {{ $t(map.section) }}
           </h5>
-          <div
+          <AppSearchEntry
             v-for="(shortcut, shortcutIndex) in map.shortcuts"
             :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            class="
-              cursor-pointer
-              flex
-              py-2
-              px-6
-              transition
-              items-center
-              group
-              hover:bg-primaryLight
-            "
-            @click="runAction(shortcut.action)"
-          >
-            <SmartIcon
-              class="
-                mr-4
-                opacity-75
-                transition
-                svg-icons
-                group-hover:opacity-100
-              "
-              :name="shortcut.icon"
-            />
-            <span
-              class="flex flex-1 mr-4 transition 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>
+            :shortcut="shortcut"
+            @action="runAction"
+          />
         </div>
       </div>
     </template>
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { invokeAction } from "~/helpers/actions"
+import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight, lunr } from "~/helpers/shortcuts"
 
 export default defineComponent({
@@ -105,21 +71,10 @@ export default defineComponent({
       this.search = ""
       this.$emit("hide-modal")
     },
-    runAction(command) {
-      invokeAction(command, "path_from_invokeAction")
+    runAction(command: HoppAction) {
+      invokeAction(command)
       this.hideModal()
     },
   },
 })
 </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>
diff --git a/components/app/SearchEntry.vue b/components/app/SearchEntry.vue
new file mode 100644
index 000000000..12275c0c6
--- /dev/null
+++ b/components/app/SearchEntry.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="
+      cursor-pointer
+      flex
+      py-2
+      px-6
+      transition
+      items-center
+      group
+      hover:bg-primaryLight
+    "
+    @click="$emit('action', shortcut.action)"
+  >
+    <SmartIcon
+      class="mr-4 opacity-75 transition svg-icons group-hover:opacity-100"
+      :name="shortcut.icon"
+    />
+    <span class="flex flex-1 mr-4 transition group-hover: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>

From ebd8f43219f8f3a4a420b0053d63cf2556796000 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 13:25:01 +0530
Subject: [PATCH 5/8] refactor: minor ui improvements

---
 README.md                      |  2 ++
 components/app/SearchEntry.vue | 23 +++++++++++++++++++++--
 nuxt.config.js                 |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 87e4787cb..838d11da8 100644
--- a/README.md
+++ b/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
diff --git a/components/app/SearchEntry.vue b/components/app/SearchEntry.vue
index 12275c0c6..2b25f9eff 100644
--- a/components/app/SearchEntry.vue
+++ b/components/app/SearchEntry.vue
@@ -9,14 +9,33 @@
       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"
+      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">
+    <span
+      class="
+        flex flex-1
+        mr-4
+        transition
+        group-hover:text-secondaryDark
+        group-focus:text-secondaryDark
+      "
+    >
       {{ $t(shortcut.label) }}
     </span>
     <span
diff --git a/nuxt.config.js b/nuxt.config.js
index 0554fcf30..95056dbbd 100644
--- a/nuxt.config.js
+++ b/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)

From 04f9428267eee4461a78147d1faa07739065e005 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 16:44:18 +0530
Subject: [PATCH 6/8] feat: disable autocomplete on inputs + keyboard
 navigation focus

---
 components/app/Lunr.vue                       | 26 +++++++++++++++++++
 components/app/Search.vue                     |  1 +
 components/app/Shortcuts.vue                  |  2 +-
 components/collections/Add.vue                |  1 +
 components/collections/AddFolder.vue          |  1 +
 components/collections/ChooseType.vue         |  1 +
 components/collections/Edit.vue               |  1 +
 components/collections/EditFolder.vue         |  1 +
 components/collections/EditRequest.vue        |  1 +
 components/collections/ImportExport.vue       |  1 +
 components/collections/SaveRequest.vue        |  1 +
 components/collections/graphql/Add.vue        |  1 +
 components/collections/graphql/AddFolder.vue  |  1 +
 components/collections/graphql/Edit.vue       |  1 +
 components/collections/graphql/EditFolder.vue |  1 +
 .../collections/graphql/EditRequest.vue       |  1 +
 components/collections/graphql/index.vue      |  1 +
 components/collections/index.vue              |  1 +
 components/environments/Add.vue               |  1 +
 components/environments/Edit.vue              |  1 +
 components/firebase/Login.vue                 |  2 +-
 components/graphql/Request.vue                |  1 +
 components/graphql/Sidebar.vue                |  1 +
 components/history/index.vue                  |  1 +
 components/http/Request.vue                   |  2 ++
 components/realtime/Mqtt.vue                  |  4 +++
 components/realtime/Socketio.vue              |  3 +++
 components/realtime/Sse.vue                   |  1 +
 components/realtime/Websocket.vue             |  3 +++
 components/smart/AutoComplete.vue             |  1 +
 components/teams/Add.vue                      |  1 +
 components/teams/Edit.vue                     |  1 +
 pages/settings.vue                            |  1 +
 33 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index 19e8ec7a3..d7014a0aa 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -3,6 +3,7 @@
     <AppSearchEntry
       v-for="(shortcut, shortcutIndex) in theOutput"
       :key="`shortcut-${shortcutIndex}`"
+      :ref="`item-${shortcutIndex}`"
       :shortcut="shortcut"
       @action="$emit('action', shortcut.action)"
     />
@@ -62,6 +63,7 @@ export default {
       outputHash: "",
       theOutput: [],
       cache: {},
+      currentItem: -1,
     }
   },
   computed: {
@@ -119,6 +121,12 @@ export default {
       immediate: true,
     },
   },
+  mounted() {
+    document.addEventListener("keydown", this.nextItem)
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.nextItem)
+  },
   methods: {
     async output(search) {
       const that = this
@@ -196,6 +204,24 @@ export default {
       const hex = val.toString(16).toUpperCase()
       return `00000000${hex}`.slice(-8)
     },
+    nextItem(e) {
+      if (e.keyCode === 38 && this.currentItem > 0) {
+        e.preventDefault()
+        this.currentItem--
+        this.$nextTick().then(() => {
+          this.$refs[`item-${this.currentItem}`][0].$el.focus()
+        })
+      } else if (
+        e.keyCode === 40 &&
+        this.currentItem < this.theOutput.length - 1
+      ) {
+        e.preventDefault()
+        this.currentItem++
+        this.$nextTick().then(() => {
+          this.$refs[`item-${this.currentItem}`][0].$el.focus()
+        })
+      }
+    },
   },
 }
 </script>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index f3964d27f..2a9048bfe 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -6,6 +6,7 @@
         v-model="search"
         v-focus
         type="text"
+        autocomplete="off"
         name="command"
         :placeholder="$t('app.type_a_command_search')"
         class="
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 23d9ae372..1a27f422f 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -23,7 +23,7 @@
         <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
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 66bdc871c..92133e317 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index a093e5fe6..3517fdc12 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 09077fa12..3bea3010e 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -16,6 +16,7 @@
             <select
               id="team"
               type="text"
+              autocomplete="off"
               autofocus
               class="
                 bg-transparent
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index fedf56d41..54b76f16b 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 96409cb1b..2cee4e9bf 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 7f82aac3b..44e240ed0 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 09036dceb..f21a5c5c9 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -127,6 +127,7 @@
         <div class="select-wrapper">
           <select
             type="text"
+            autocomplete="off"
             class="select"
             autofocus
             @change="
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 9a8722394..f9f39c09c 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveRequestAs"
           />
           <label for="selectLabelSaveReq">
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 86ee7374b..ee92ccb4a 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 5982c6d2e..e507b5c5b 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index eb84632b6..5c34741ab 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index 4f1284d20..1cd14510a 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -13,6 +13,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index ceb6a4797..7846e27e2 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 384b37ee1..6d7dc5074 100644
--- a/components/collections/graphql/index.vue
+++ b/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"
       />
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 90290e708..fa04132dd 100644
--- a/components/collections/index.vue
+++ b/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"
         />
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 989709afb..1575b7e8a 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 9a3fa3333..31bfc0cb4 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             :disabled="editingEnvironmentIndex === 'Global'"
             @keyup.enter="saveEnvironment"
           />
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index 4b6ba1682..1b2fe9925 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -35,7 +35,7 @@
             placeholder=" "
             type="email"
             name="email"
-            autocomplete="email"
+            autocomplete="off"
             required
             spellcheck="false"
             autofocus
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index 235fe1cb9..a84a16459 100644
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -6,6 +6,7 @@
         v-model="url"
         v-focus
         type="url"
+        autocomplete="off"
         spellcheck="false"
         class="
           bg-primaryLight
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index e0b796011..bfc2c69c2 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -7,6 +7,7 @@
             <input
               v-model="graphqlFieldsFilterText"
               type="search"
+              autocomplete="off"
               :placeholder="$t('action.search')"
               class="bg-transparent flex w-full p-4 py-2"
             />
diff --git a/components/history/index.vue b/components/history/index.vue
index 8403421af..6c29119ff 100644
--- a/components/history/index.vue
+++ b/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')"
       />
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 01a5967a9..d99f78666 100644
--- a/components/http/Request.vue
+++ b/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()"
           />
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index f3e09ba89..5ea113fd3 100644
--- a/components/realtime/Mqtt.vue
+++ b/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"
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index b8be272a8..87adacc2c 100644
--- a/components/realtime/Socketio.vue
+++ b/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"
               />
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 8cb614712..3d230dc38 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -9,6 +9,7 @@
               v-model="server"
               v-focus
               type="url"
+              autocomplete="off"
               :class="{ error: !serverValid }"
               class="
                 bg-primaryLight
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index cc36db7c2..121165902 100644
--- a/components/realtime/Websocket.vue
+++ b/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"
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index df33f8aad..402128a2f 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -4,6 +4,7 @@
       ref="acInput"
       v-model="text"
       type="text"
+      autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index d0de68a6e..ef4250007 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -9,6 +9,7 @@
           class="input floating-input"
           placeholder=" "
           type="text"
+          autocomplete="off"
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index ad745eebd..7553acf39 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -10,6 +10,7 @@
             class="input floating-input"
             placeholder=" "
             type="text"
+            autocomplete="off"
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">
diff --git a/pages/settings.vue b/pages/settings.vue
index 1f33cb956..a77c9e3a3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -305,6 +305,7 @@
                   class="input floating-input"
                   placeholder=" "
                   type="url"
+                  autocomplete="off"
                   :disabled="!PROXY_ENABLED"
                 />
                 <label for="url">

From d9547c6654a5f2d0ac91bda0524dbc956b815206 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 29 Aug 2021 17:11:37 +0530
Subject: [PATCH 7/8] fix: mobile responsiveness

---
 components/app/Header.vue   | 2 +-
 components/smart/Toggle.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index 927ba78e9..7d32d2e43 100644
--- a/components/app/Header.vue
+++ b/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
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index 7c45f2b83..4034be402 100644
--- a/components/smart/Toggle.vue
+++ b/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>

From 407a125533586f00cf1b41d12edbec8d7390508a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 30 Aug 2021 11:27:36 +0530
Subject: [PATCH 8/8] feat: search

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 components/app/Lunr.vue   | 240 ++++++--------------------------------
 components/app/Search.vue |  47 ++++----
 package-lock.json         |  13 +++
 package.json              |   1 +
 4 files changed, 72 insertions(+), 229 deletions(-)

diff --git a/components/app/Lunr.vue b/components/app/Lunr.vue
index d7014a0aa..c6f3dcbf3 100644
--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -1,14 +1,14 @@
 <template>
   <div key="outputHash">
     <AppSearchEntry
-      v-for="(shortcut, shortcutIndex) in theOutput"
+      v-for="(shortcut, shortcutIndex) in searchResults"
       :key="`shortcut-${shortcutIndex}`"
       :ref="`item-${shortcutIndex}`"
       :shortcut="shortcut"
       @action="$emit('action', shortcut.action)"
     />
     <div
-      v-if="theOutput.length === 0"
+      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>
@@ -19,209 +19,41 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
 import lunr from "lunr"
 
-export default {
-  props: {
-    input: {
-      type: Array,
-      required: true,
-    },
-    search: {
-      type: String,
-      default: "",
-    },
-    limit: {
-      type: Number,
-      default: 1000,
-    },
-    stopWords: {
-      type: Boolean,
-      default: false,
-    },
-    log: {
-      type: Boolean,
-      default: false,
-    },
-    fields: {
-      type: Object,
-      default() {
-        if (typeof this.input[0] === "object") {
-          return this.input[0]
-        }
-        return {}
-      },
-    },
-    perpendKey: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      outputHash: "",
-      theOutput: [],
-      cache: {},
-      currentItem: -1,
-    }
-  },
-  computed: {
-    hashInput() {
-      return this.hashThis(JSON.stringify(this.input))
-    },
-    idx() {
-      if (!this.input[0]) return {}
-      const loaded = this.cache[this.hashInput]
-      return loaded ? lunr.Index.load(loaded) : this.makeIndex(this.hashInput)
-    },
-  },
-  watch: {
-    search: {
-      handler(search = "") {
-        if (
-          (!search.trim() || search === "undefined") &&
-          Array.isArray(this.input)
-        ) {
-          this.$emit("results-length", this.input.length)
-          this.$emit("results", this.input.slice(0, this.limit))
-          this.theOutput = this.input.slice(0, this.limit)
-          return
-        }
-        const update = (output) => {
-          if (output.then) {
-            const that = this
-            return output.then((newOutput) => {
-              const hash = that.hashThis(JSON.stringify(newOutput))
-              if (that.outputHash === hash) return
-              that.outputHash = hash
-              that.$emit("results-length", newOutput.length)
-              that.$emit("results", newOutput.slice(0, that.limit))
-              that.theOutput = newOutput.slice(0, that.limit)
-            })
-          }
-          const hash = this.hashThis(JSON.stringify(output))
-          if (this.outputHash === hash) return
-          this.outputHash = hash
-          try {
-            this.$emit("results-length", output.length)
-            this.$emit("results", output.slice(0, this.limit))
-            this.theOutput = output.slice(0, this.limit)
-          } catch (e) {
-            console.warn(e, "???", output)
-          }
-        }
-        if (this.output.then) {
-          return this.output(search).then(async (output) => {
-            update(await output)
-          })
-        }
-        update(this.output(search))
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    document.addEventListener("keydown", this.nextItem)
-  },
-  destroyed() {
-    document.removeEventListener("keydown", this.nextItem)
-  },
-  methods: {
-    async output(search) {
-      const that = this
-      if ((await this.idx) && (await this.idx.search)) {
-        return this.idx
-          .search(`${search}*`)
-          .map(({ ref }) => that.input[+ref], that)
-      }
-      if (this.idx.then)
-        return this.idx.then((index) =>
-          index.search(`${search}*`).map(({ ref }) => that.input[+ref], that)
-        )
-      // no index
-      return this.input
-    },
-    makeIndex(hashInput) {
-      const that = this
-      if (this.input[0] && this.search) {
-        const first = this.fields
-        // if (this.log) console.log("feilds from ", first)
+const props = defineProps<{
+  input: Record<string, any>[]
+  search: string
+}>()
 
-        const stopWords = this.stopWords
-        const documents = this.input.map((val, i) => {
-          const doc = {}
-          const seen = []
-          function replacer(key, value) {
-            if (key[0] === "_") {
-              return
-            } else if (typeof value === "object" && value !== null) {
-              if (seen.includes(key)) return
-              else seen.push(key)
-            }
-            return value
-          }
-          Object.keys(val).forEach((key) => {
-            doc[key] = JSON.stringify(val[key], replacer)
-          })
-          return { __id: i, ...val }
-        })
-        const idx = lunr(function () {
-          this.ref("__id")
-          if (!stopWords) {
-            this.pipeline.remove(lunr.stopWordFilter)
-            this.pipeline.remove(lunr.stemmer)
-          }
-          Object.keys(first).forEach(function (key) {
-            if (key[0] !== "_") {
-              this.field(key)
-            }
-          }, this)
-          documents.forEach(function (doc) {
-            this.add(doc)
-          }, this)
-          // if (that.log) console.log(this)
-        })
-        that.cache[hashInput] = idx.toJSON()
-        return idx
-      } else {
-        return {}
-      }
-    },
-    hashThis(message, n = 8) {
-      if (+n === 0) return message
-      let hash = 0
-      if (message.length === 0) return this.hashThis(this.hex32(hash), n - 1)
-      for (let i = 0; i < message.length; i++) {
-        const char = message.charCodeAt(i)
-        hash = (hash << 5) - hash + char
-        hash = hash & hash // Convert to 32bit integer
-      }
-      return this.hashThis(this.hex32(hash), n - 1)
-    },
-    hex32(val) {
-      val &= 0xffffffff
-      const hex = val.toString(16).toUpperCase()
-      return `00000000${hex}`.slice(-8)
-    },
-    nextItem(e) {
-      if (e.keyCode === 38 && this.currentItem > 0) {
-        e.preventDefault()
-        this.currentItem--
-        this.$nextTick().then(() => {
-          this.$refs[`item-${this.currentItem}`][0].$el.focus()
-        })
-      } else if (
-        e.keyCode === 40 &&
-        this.currentItem < this.theOutput.length - 1
-      ) {
-        e.preventDefault()
-        this.currentItem++
-        this.$nextTick().then(() => {
-          this.$refs[`item-${this.currentItem}`][0].$el.focus()
-        })
-      }
-    },
-  },
-}
+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>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 2a9048bfe..dbdd68f38 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -51,31 +51,28 @@
   </SmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
-import { spotlight, lunr } from "~/helpers/shortcuts"
+import { spotlight as mappings, lunr } from "~/helpers/shortcuts"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      search: "",
-      mappings: spotlight,
-      lunr,
-    }
-  },
-  methods: {
-    hideModal() {
-      this.search = ""
-      this.$emit("hide-modal")
-    },
-    runAction(command: HoppAction) {
-      invokeAction(command)
-      this.hideModal()
-    },
-  },
-})
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const search = ref("")
+
+const hideModal = () => {
+  search.value = ""
+  emit("hide-modal")
+}
+
+const runAction = (command: HoppAction) => {
+  invokeAction(command)
+  hideModal()
+}
 </script>
diff --git a/package-lock.json b/package-lock.json
index c4c4b27a7..13bea05f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,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",
@@ -8127,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",
@@ -42038,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",
diff --git a/package.json b/package.json
index 7d2b1316e..1bfe4b707 100644
--- a/package.json
+++ b/package.json
@@ -77,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",