Merge branch 'main' into feat/bulk-edit

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", () => {
-    //   showSearch.value = !showSearch.value
-    // })
+    defineActionHandler("modals.search.toggle", () => {
+      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
-          px-4
-          pt-2
-          pb-6
+          p-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
-          v-for="(map, mapIndex) in filteredMappings"
-          :key="`map-${mapIndex}`"
-        >
-          <h5 class="my-2 text-secondaryLight py-2 px-4">
+        <div v-for="(map, mapIndex) in mappings" :key="`map-${mapIndex}`">
+          <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="
-              rounded
-              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>
+            :shortcut="shortcut"
+            @action="runAction"
+          />
         </div>
       </div>
     </template>
   </SmartModal>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import { invokeAction } from "~/helpers/actions"
-import { spotlight } from "~/helpers/shortcuts"
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { HoppAction, invokeAction } from "~/helpers/actions"
+import { spotlight as mappings, lunr } from "~/helpers/shortcuts"
 
-export default defineComponent({
-  props: {
-    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>
+defineProps<{
+  show: boolean
+}>()
 
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const search = ref("")
+
+const hideModal = () => {
+  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">