refactor: move shortcuts to use minisearch

packages/hoppscotch-common/src/components.d.ts

@@ -131,7 +131,6 @@ declare module '@vue/runtime-core' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideRefreshCcw: typeof import('~icons/lucide/refresh-ccw')['default']
     IconLucideRefreshCw: typeof import('~icons/lucide/refresh-cw')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']

packages/hoppscotch-common/src/components/app/Shortcuts.vue

@@ -14,46 +14,18 @@
           />
         </div>
       </div>
-      <div v-if="filterText" class="flex flex-col divide-y divide-dividerLight">
+      <div class="flex flex-col divide-y divide-dividerLight">
-        <details
+        <HoppSmartPlaceholder v-if="isEmpty(shortcutsResults)">
-          v-for="(map, mapIndex) in searchResults"
-          :key="`map-${mapIndex}`"
-          class="flex flex-col"
-          open
-        >
-          <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
-          >
-            <icon-lucide-chevron-right class="mr-2 indicator" />
-            <span
-              class="font-semibold truncate capitalize-first text-secondaryDark"
-            >
-              {{ t(map.item.section) }}
-            </span>
-          </summary>
-          <div class="flex flex-col px-6 pb-4 space-y-2">
-            <AppShortcutsEntry
-              v-for="(shortcut, index) in map.item.shortcuts"
-              :key="`shortcut-${index}`"
-              :shortcut="shortcut"
-            />
-          </div>
-        </details>
-        <HoppSmartPlaceholder
-          v-if="searchResults.length === 0"
-          :text="`${t('state.nothing_found')} ‟${filterText}”`"
-        >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
           <span class="my-2 text-center flex flex-col">
             {{ t("state.nothing_found") }}
             <span class="break-all">"{{ filterText }}"</span>
           </span>
         </HoppSmartPlaceholder>
-      </div>
-      <div v-else class="flex flex-col divide-y divide-dividerLight">
         <details
-          v-for="(map, mapIndex) in mappings"
+          v-for="(sectionResults, sectionTitle) in shortcutsResults"
-          :key="`map-${mapIndex}`"
+          v-else
+          :key="`section-${sectionTitle}`"
           class="flex flex-col"
           open
         >
@@ -64,13 +36,13 @@
             <span
               class="font-semibold truncate capitalize-first text-secondaryDark"
             >
-              {{ t(map.section) }}
+              {{ sectionTitle }}
             </span>
           </summary>
           <div class="flex flex-col px-6 pb-4 space-y-2">
             <AppShortcutsEntry
-              v-for="(shortcut, shortcutIndex) in map.shortcuts"
+              v-for="(shortcut, index) in sectionResults"
-              :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+              :key="`shortcut-${index}`"
               :shortcut="shortcut"
             />
           </div>
@@ -81,10 +53,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
+import { computed, onBeforeMount, ref } from "vue"
-import Fuse from "fuse.js"
+import { ShortcutDef, getShortcuts } from "~/helpers/shortcuts"
-import mappings from "~/helpers/shortcuts"
+import MiniSearch from "minisearch"
 import { useI18n } from "@composables/i18n"
+import { groupBy, isEmpty } from "lodash-es"
 
 const t = useI18n()
 
@@ -92,15 +65,33 @@ defineProps<{
   show: boolean
 }>()
 
-const options = {
+const minisearch = new MiniSearch({
-  keys: ["shortcuts.label"],
+  fields: ["label", "keys", "section"],
-}
+  idField: "label",
+  storeFields: ["label", "keys", "section"],
+  searchOptions: {
+    fuzzy: true,
+    prefix: true,
+  },
+})
 
-const fuse = new Fuse(mappings, options)
+const shortcuts = getShortcuts(t)
+
+onBeforeMount(() => {
+  minisearch.addAllAsync(shortcuts)
+})
 
 const filterText = ref("")
 
-const searchResults = computed(() => fuse.search(filterText.value))
+const shortcutsResults = computed(() => {
+  // If there are no search text, return all the shortcuts
+  const results =
+    filterText.value.length > 0
+      ? minisearch.search(filterText.value)
+      : shortcuts
+
+  return groupBy(results, "section") as Record<string, ShortcutDef[]>
+})
 
 const emit = defineEmits<{
   (e: "close"): void

packages/hoppscotch-common/src/components/app/ShortcutsEntry.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center py-1">
     <span class="flex flex-1 mr-4">
-      {{ t(shortcut.label) }}
+      {{ shortcut.label }}
     </span>
     <kbd
       v-for="(key, index) in shortcut.keys"
@@ -14,14 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "@composables/i18n"
+import { ShortcutDef } from "~/helpers/shortcuts"
-
-const t = useI18n()
 
 defineProps<{
-  shortcut: {
+  shortcut: ShortcutDef
-    label: string
-    keys: string[]
-  }
 }>()
 </script>

packages/hoppscotch-common/src/helpers/shortcuts.ts

@@ -1,315 +1,146 @@
-import IconLifeBuoy from "~icons/lucide/life-buoy"
-import IconZap from "~icons/lucide/zap"
-import IconArrowRight from "~icons/lucide/arrow-right"
-import IconGift from "~icons/lucide/gift"
-import IconMonitor from "~icons/lucide/monitor"
-import IconSun from "~icons/lucide/sun"
-import IconCloud from "~icons/lucide/cloud"
-import IconMoon from "~icons/lucide/moon"
 import { getPlatformAlternateKey, getPlatformSpecialKey } from "./platformutils"
 
-export default [
+export type ShortcutDef = {
-  {
+  label: string
-    section: "shortcut.general.title",
+  keys: string[]
-    shortcuts: [
+  section: string
+}
+
+export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
+  // General
+  return [
     {
+      label: t("shortcut.general.help_menu"),
       keys: ["?"],
-        label: "shortcut.general.help_menu",
+      section: t("shortcut.general.title"),
     },
     {
+      label: t("shortcut.general.command_menu"),
       keys: ["/"],
-        label: "shortcut.general.command_menu",
+      section: t("shortcut.general.title"),
     },
     {
+      label: t("shortcut.general.show_all"),
       keys: [getPlatformSpecialKey(), "K"],
-        label: "shortcut.general.show_all",
+      section: t("shortcut.general.title"),
     },
     {
+      label: t("shortcut.general.close_current_menu"),
       keys: ["ESC"],
-        label: "shortcut.general.close_current_menu",
+      section: t("shortcut.general.title"),
-      },
-    ],
     },
+
+    // Request
     {
-    section: "shortcut.request.title",
+      label: t("shortcut.request.send_request"),
-    shortcuts: [
-      {
       keys: [getPlatformSpecialKey(), "↩"],
-        label: "shortcut.request.send_request",
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformSpecialKey(), "S"],
-        label: "shortcut.request.save_to_collections",
+      label: t("shortcut.request.save_to_collections"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformSpecialKey(), "U"],
-        label: "shortcut.request.copy_request_link",
+      label: t("shortcut.request.copy_request_link"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformSpecialKey(), "I"],
-        label: "shortcut.request.reset_request",
+      label: t("shortcut.request.reset_request"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "↑"],
-        label: "shortcut.request.next_method",
+      label: t("shortcut.request.next_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "↓"],
-        label: "shortcut.request.previous_method",
+      label: t("shortcut.request.previous_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "G"],
-        label: "shortcut.request.get_method",
+      label: t("shortcut.request.get_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "H"],
-        label: "shortcut.request.head_method",
+      label: t("shortcut.request.head_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "P"],
-        label: "shortcut.request.post_method",
+      label: t("shortcut.request.post_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "U"],
-        label: "shortcut.request.put_method",
+      label: t("shortcut.request.put_method"),
+      section: t("shortcut.request.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "X"],
-        label: "shortcut.request.delete_method",
+      label: t("shortcut.request.delete_method"),
+      section: t("shortcut.request.title"),
     },
-    ],
+
-  },
+    // Response
-  {
-    section: "shortcut.response.title",
-    shortcuts: [
     {
       keys: [getPlatformSpecialKey(), "J"],
-        label: "shortcut.response.download",
+      label: t("shortcut.response.download"),
+      section: t("shortcut.response.title"),
     },
     {
       keys: [getPlatformSpecialKey(), "."],
-        label: "shortcut.response.copy",
+      label: t("shortcut.response.copy"),
+      section: t("shortcut.response.title"),
     },
-    ],
+
-  },
+    // Navigation
-  {
-    section: "shortcut.navigation.title",
-    shortcuts: [
     {
       keys: [getPlatformSpecialKey(), "←"],
-        label: "shortcut.navigation.back",
+      label: t("shortcut.navigation.back"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformSpecialKey(), "→"],
-        label: "shortcut.navigation.forward",
+      label: t("shortcut.navigation.forward"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "R"],
-        label: "shortcut.navigation.rest",
+      label: t("shortcut.navigation.rest"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "Q"],
-        label: "shortcut.navigation.graphql",
+      label: t("shortcut.navigation.graphql"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "W"],
-        label: "shortcut.navigation.realtime",
+      label: t("shortcut.navigation.realtime"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "S"],
-        label: "shortcut.navigation.settings",
+      label: t("shortcut.navigation.settings"),
+      section: t("shortcut.navigation.title"),
     },
     {
       keys: [getPlatformAlternateKey(), "M"],
-        label: "shortcut.navigation.profile",
+      label: t("shortcut.navigation.profile"),
+      section: t("shortcut.navigation.title"),
     },
-    ],
-  },
-  {
-    section: "shortcut.miscellaneous.title",
-    shortcuts: [
-      {
-        keys: [getPlatformSpecialKey(), "M"],
-        label: "shortcut.miscellaneous.invite",
-      },
-    ],
-  },
-]
 
-export const spotlight = [
+    // Miscellaneous
-  {
-    section: "app.spotlight",
-    shortcuts: [
-      {
-        keys: ["?"],
-        label: "shortcut.general.help_menu",
-        action: "modals.support.toggle",
-        icon: IconLifeBuoy,
-      },
-      {
-        keys: [getPlatformSpecialKey(), "K"],
-        label: "shortcut.general.show_all",
-        action: "flyouts.keybinds.toggle",
-        icon: IconZap,
-      },
-    ],
-  },
-  {
-    section: "shortcut.navigation.title",
-    shortcuts: [
-      {
-        keys: [getPlatformAlternateKey(), "R"],
-        label: "shortcut.navigation.rest",
-        action: "navigation.jump.rest",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "Q"],
-        label: "shortcut.navigation.graphql",
-        action: "navigation.jump.graphql",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "W"],
-        label: "shortcut.navigation.realtime",
-        action: "navigation.jump.realtime",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "S"],
-        label: "shortcut.navigation.settings",
-        action: "navigation.jump.settings",
-        icon: IconArrowRight,
-      },
-      {
-        keys: [getPlatformAlternateKey(), "M"],
-        label: "shortcut.navigation.profile",
-        action: "navigation.jump.profile",
-        icon: IconArrowRight,
-      },
-    ],
-  },
-  {
-    section: "shortcut.miscellaneous.title",
-    shortcuts: [
     {
       keys: [getPlatformSpecialKey(), "M"],
-        label: "shortcut.miscellaneous.invite",
+      label: t("shortcut.miscellaneous.invite"),
-        action: "modals.share.toggle",
+      section: t("shortcut.miscellaneous.title"),
-        icon: IconGift,
     },
-    ],
+  ]
-  },
+}
-]
-
-export const fuse = [
-  {
-    keys: ["?"],
-    label: "shortcut.general.help_menu",
-    action: "modals.support.toggle",
-    icon: IconLifeBuoy,
-    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: IconZap,
-    tags: ["keyboard", "shortcuts"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "R"],
-    label: "shortcut.navigation.rest",
-    action: "navigation.jump.rest",
-    icon: IconArrowRight,
-    tags: ["rest", "jump", "page", "navigation", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "Q"],
-    label: "shortcut.navigation.graphql",
-    action: "navigation.jump.graphql",
-    icon: IconArrowRight,
-    tags: ["graphql", "jump", "page", "navigation", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "W"],
-    label: "shortcut.navigation.realtime",
-    action: "navigation.jump.realtime",
-    icon: IconArrowRight,
-    tags: [
-      "realtime",
-      "jump",
-      "page",
-      "navigation",
-      "websocket",
-      "socket",
-      "mqtt",
-      "sse",
-      "go",
-    ],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "S"],
-    label: "shortcut.navigation.settings",
-    action: "navigation.jump.settings",
-    icon: IconArrowRight,
-    tags: ["settings", "jump", "page", "navigation", "account", "theme", "go"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "M"],
-    label: "shortcut.navigation.profile",
-    action: "navigation.jump.profile",
-    icon: IconArrowRight,
-    tags: ["profile", "jump", "page", "navigation", "account", "theme", "go"],
-  },
-  {
-    keys: [getPlatformSpecialKey(), "M"],
-    label: "shortcut.miscellaneous.invite",
-    action: "modals.share.toggle",
-    icon: IconGift,
-    tags: ["invite", "share", "app", "friends", "people", "social"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "0"],
-    label: "shortcut.theme.system",
-    action: "settings.theme.system",
-    icon: IconMonitor,
-    tags: ["theme", "system"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "1"],
-    label: "shortcut.theme.light",
-    action: "settings.theme.light",
-    icon: IconSun,
-    tags: ["theme", "light"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "2"],
-    label: "shortcut.theme.dark",
-    action: "settings.theme.dark",
-    icon: IconCloud,
-    tags: ["theme", "dark"],
-  },
-  {
-    keys: [getPlatformAlternateKey(), "3"],
-    label: "shortcut.theme.black",
-    action: "settings.theme.black",
-    icon: IconMoon,
-    tags: ["theme", "black"],
-  },
-]