feat: spotlight collection searcher (#3262)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-common/src/components/app/spotlight/entry/GQLRequest.vue

@@ -0,0 +1,65 @@
+<template>
+  <span class="flex flex-1 space-x-2 items-center">
+    <template v-for="(folder, index) in pathFolders" :key="index">
+      <span class="block" :class="{ truncate: index !== 0 }">
+        {{ folder.name }}
+      </span>
+      <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    </template>
+    <span v-if="request" class="block">
+      {{ request.name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { computed } from "vue"
+import { graphqlCollectionStore } from "~/newstore/collections"
+
+const props = defineProps<{
+  folderPath: string
+}>()
+
+const pathFolders = computed(() => {
+  try {
+    const folderIndicies = props.folderPath
+      .split("/")
+      .slice(0, -1)
+      .map((x) => parseInt(x))
+
+    const pathItems: HoppCollection<HoppGQLRequest>[] = []
+
+    let currentFolder =
+      graphqlCollectionStore.value.state[folderIndicies.shift()!]
+
+    pathItems.push(currentFolder)
+
+    while (folderIndicies.length > 0) {
+      const folderIndex = folderIndicies.shift()!
+
+      const folder = currentFolder.folders[folderIndex]
+      pathItems.push(folder)
+
+      currentFolder = folder
+    }
+
+    return pathItems
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+})
+
+const request = computed(() => {
+  try {
+    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
+
+    return pathFolders.value[pathFolders.value.length - 1].requests[
+      requestIndex
+    ]
+  } catch (e) {
+    return null
+  }
+})
+</script>

packages/hoppscotch-common/src/components/app/spotlight/entry/RESTRequest.vue

@@ -0,0 +1,71 @@
+<template>
+  <span class="flex flex-1 items-center space-x-2">
+    <template v-for="(folder, index) in pathFolders" :key="index">
+      <span class="block" :class="{ truncate: index !== 0 }">
+        {{ folder.name }}
+      </span>
+      <icon-lucide-chevron-right class="flex flex-shrink-0" />
+    </template>
+    <span
+      v-if="request"
+      class="font-semibold truncate text-tiny flex flex-shrink-0 border border-dividerDark rounded-md px-1"
+      :class="getMethodLabelColorClassOf(request)"
+    >
+      {{ request.method.toUpperCase() }}
+    </span>
+    <span v-if="request" class="block">
+      {{ request.name }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { computed } from "vue"
+import { restCollectionStore } from "~/newstore/collections"
+import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
+
+const props = defineProps<{
+  folderPath: string
+}>()
+
+const pathFolders = computed(() => {
+  try {
+    const folderIndicies = props.folderPath
+      .split("/")
+      .slice(0, -1)
+      .map((x) => parseInt(x))
+
+    const pathItems: HoppCollection<HoppRESTRequest>[] = []
+
+    let currentFolder = restCollectionStore.value.state[folderIndicies.shift()!]
+    pathItems.push(currentFolder)
+
+    while (folderIndicies.length > 0) {
+      const folderIndex = folderIndicies.shift()!
+
+      const folder = currentFolder.folders[folderIndex]
+      pathItems.push(folder)
+
+      currentFolder = folder
+    }
+
+    return pathItems
+  } catch (e) {
+    console.error(e)
+    return []
+  }
+})
+
+const request = computed(() => {
+  try {
+    const requestIndex = parseInt(props.folderPath.split("/").at(-1)!)
+
+    return pathFolders.value[pathFolders.value.length - 1].requests[
+      requestIndex
+    ]
+  } catch (e) {
+    return null
+  }
+})
+</script>

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -97,6 +97,7 @@ import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/
 import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
 import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
 import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
+import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
 
 const t = useI18n()
 
@@ -114,6 +115,7 @@ useService(HistorySpotlightSearcherService)
 useService(UserSpotlightSearcherService)
 useService(NavigationSpotlightSearcherService)
 useService(SettingsSpotlightSearcherService)
+useService(CollectionsSpotlightSearcherService)
 
 const search = ref("")