308 lines
9.4 KiB
Vue
308 lines
9.4 KiB
Vue
<template>
|
|
<HoppSmartModal
|
|
v-if="show"
|
|
styles="sm:max-w-lg"
|
|
full-width
|
|
@close="closeSpotlightModal"
|
|
>
|
|
<template #body>
|
|
<div class="flex flex-col border-b border-divider transition">
|
|
<div class="flex items-center">
|
|
<input
|
|
id="command"
|
|
v-model="search"
|
|
v-focus
|
|
type="text"
|
|
autocomplete="off"
|
|
name="command"
|
|
:placeholder="`${t('app.type_a_command_search')}`"
|
|
class="flex flex-1 bg-transparent px-6 pt-5 pb-3 text-base text-secondaryDark"
|
|
/>
|
|
<HoppSmartSpinner v-if="searchSession?.loading" class="mr-6" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="searchSession && search.length > 0"
|
|
class="flex flex-1 flex-col divide-y divide-dividerLight overflow-y-auto border-b border-divider"
|
|
>
|
|
<div
|
|
v-for="([sectionID, sectionResult], sectionIndex) in scoredResults"
|
|
:key="`section-${sectionID}`"
|
|
class="flex flex-col"
|
|
>
|
|
<h5
|
|
class="sticky top-0 z-10 bg-primaryContrast px-6 py-2 text-secondaryLight"
|
|
>
|
|
{{ sectionResult.title }}
|
|
</h5>
|
|
<AppSpotlightEntry
|
|
v-for="(result, entryIndex) in sectionResult.results"
|
|
:key="`result-${result.id}`"
|
|
:entry="result"
|
|
:active="isEqual(selectedEntry, [sectionIndex, entryIndex])"
|
|
@mouseover="onMouseOver($event, sectionIndex, entryIndex)"
|
|
@action="runAction(sectionID, result)"
|
|
/>
|
|
</div>
|
|
<HoppSmartPlaceholder
|
|
v-if="search.length > 0 && scoredResults.length === 0"
|
|
:text="`${t('state.nothing_found')} ‟${search}”`"
|
|
>
|
|
<template #icon>
|
|
<icon-lucide-search class="svg-icons opacity-75" />
|
|
</template>
|
|
<template #body>
|
|
<HoppButtonSecondary
|
|
:label="t('action.clear')"
|
|
outline
|
|
@click="search = ''"
|
|
/>
|
|
</template>
|
|
</HoppSmartPlaceholder>
|
|
</div>
|
|
<div
|
|
class="flex flex-shrink-0 justify-between overflow-auto whitespace-nowrap p-4 text-tiny text-secondaryLight <sm:hidden"
|
|
>
|
|
<div class="flex items-center">
|
|
<kbd class="shortcut-key">↑</kbd>
|
|
<kbd class="shortcut-key">↓</kbd>
|
|
<span class="mx-2 truncate">
|
|
{{ t("action.to_navigate") }}
|
|
</span>
|
|
<kbd class="shortcut-key">↩</kbd>
|
|
<span class="ml-2 truncate">
|
|
{{ t("action.to_select") }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<kbd class="shortcut-key">ESC</kbd>
|
|
<span class="ml-2 truncate">
|
|
{{ t("action.to_close") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</HoppSmartModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from "@composables/i18n"
|
|
import { useService } from "dioc/vue"
|
|
import { isEqual } from "lodash-es"
|
|
import { computed, ref, watch } from "vue"
|
|
import { platform } from "~/platform"
|
|
import { HoppSpotlightSessionEventData } from "~/platform/analytics"
|
|
import {
|
|
SpotlightSearchState,
|
|
SpotlightSearcherResult,
|
|
SpotlightService,
|
|
} from "~/services/spotlight"
|
|
import { CollectionsSpotlightSearcherService } from "~/services/spotlight/searchers/collections.searcher"
|
|
import {
|
|
EnvironmentsSpotlightSearcherService,
|
|
SwitchEnvSpotlightSearcherService,
|
|
} from "~/services/spotlight/searchers/environment.searcher"
|
|
import { GeneralSpotlightSearcherService } from "~/services/spotlight/searchers/general.searcher"
|
|
import { HistorySpotlightSearcherService } from "~/services/spotlight/searchers/history.searcher"
|
|
import { InterceptorSpotlightSearcherService } from "~/services/spotlight/searchers/interceptor.searcher"
|
|
import { MiscellaneousSpotlightSearcherService } from "~/services/spotlight/searchers/miscellaneous.searcher"
|
|
import { NavigationSpotlightSearcherService } from "~/services/spotlight/searchers/navigation.searcher"
|
|
import { RequestSpotlightSearcherService } from "~/services/spotlight/searchers/request.searcher"
|
|
import { ResponseSpotlightSearcherService } from "~/services/spotlight/searchers/response.searcher"
|
|
import { SettingsSpotlightSearcherService } from "~/services/spotlight/searchers/settings.searcher"
|
|
import { TabSpotlightSearcherService } from "~/services/spotlight/searchers/tab.searcher"
|
|
import { UserSpotlightSearcherService } from "~/services/spotlight/searchers/user.searcher"
|
|
import {
|
|
SwitchWorkspaceSpotlightSearcherService,
|
|
WorkspaceSpotlightSearcherService,
|
|
} from "~/services/spotlight/searchers/workspace.searcher"
|
|
|
|
const t = useI18n()
|
|
|
|
const props = defineProps<{
|
|
show: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: "hide-modal"): void
|
|
}>()
|
|
|
|
const spotlightService = useService(SpotlightService)
|
|
|
|
useService(HistorySpotlightSearcherService)
|
|
useService(UserSpotlightSearcherService)
|
|
useService(NavigationSpotlightSearcherService)
|
|
useService(SettingsSpotlightSearcherService)
|
|
useService(CollectionsSpotlightSearcherService)
|
|
useService(MiscellaneousSpotlightSearcherService)
|
|
useService(TabSpotlightSearcherService)
|
|
useService(GeneralSpotlightSearcherService)
|
|
useService(ResponseSpotlightSearcherService)
|
|
useService(RequestSpotlightSearcherService)
|
|
useService(EnvironmentsSpotlightSearcherService)
|
|
useService(SwitchEnvSpotlightSearcherService)
|
|
useService(WorkspaceSpotlightSearcherService)
|
|
useService(SwitchWorkspaceSpotlightSearcherService)
|
|
useService(InterceptorSpotlightSearcherService)
|
|
|
|
platform.spotlight?.additionalSearchers?.forEach((searcher) =>
|
|
useService(searcher)
|
|
)
|
|
|
|
const search = ref("")
|
|
|
|
const searchSession = ref<SpotlightSearchState>()
|
|
const stopSearchSession = ref<() => void>()
|
|
|
|
const scoredResults = computed(() =>
|
|
Object.entries(searchSession.value?.results ?? {}).sort(
|
|
([, sectionA], [, sectionB]) => sectionB.avgScore - sectionA.avgScore
|
|
)
|
|
)
|
|
|
|
const { selectedEntry } = newUseArrowKeysForNavigation()
|
|
|
|
watch(
|
|
() => props.show,
|
|
(show) => {
|
|
search.value = ""
|
|
|
|
if (show) {
|
|
const [session, onSessionEnd] =
|
|
spotlightService.createSearchSession(search)
|
|
|
|
searchSession.value = session.value
|
|
stopSearchSession.value = onSessionEnd
|
|
} else {
|
|
stopSearchSession.value?.()
|
|
stopSearchSession.value = undefined
|
|
searchSession.value = undefined
|
|
}
|
|
}
|
|
)
|
|
|
|
function runAction(searcherID: string, result: SpotlightSearcherResult) {
|
|
spotlightService.selectSearchResult(searcherID, result)
|
|
emit("hide-modal")
|
|
}
|
|
|
|
let lastMousePosition: { x: number; y: number }
|
|
|
|
const onMouseOver = (
|
|
e: MouseEvent,
|
|
sectionIndex: number,
|
|
entryIndex: number
|
|
) => {
|
|
const mousePosition = {
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
}
|
|
|
|
// if the position is same, do nothing
|
|
if (isEqual(lastMousePosition, mousePosition)) return
|
|
selectedEntry.value = [sectionIndex, entryIndex]
|
|
lastMousePosition = mousePosition
|
|
}
|
|
|
|
function newUseArrowKeysForNavigation() {
|
|
const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex]
|
|
|
|
watch(search, () => {
|
|
selectedEntry.value = [0, 0]
|
|
})
|
|
|
|
const onArrowDown = () => {
|
|
// If no entries, do nothing
|
|
if (scoredResults.value.length === 0) return
|
|
|
|
const [sectionIndex, entryIndex] = selectedEntry.value
|
|
|
|
const [, section] = scoredResults.value[sectionIndex]
|
|
|
|
if (entryIndex < section.results.length - 1) {
|
|
selectedEntry.value = [sectionIndex, entryIndex + 1]
|
|
} else if (sectionIndex < scoredResults.value.length - 1) {
|
|
selectedEntry.value = [sectionIndex + 1, 0]
|
|
} else {
|
|
selectedEntry.value = [0, 0]
|
|
}
|
|
}
|
|
|
|
const onArrowUp = () => {
|
|
// If no entries, do nothing
|
|
if (scoredResults.value.length === 0) return
|
|
|
|
const [sectionIndex, entryIndex] = selectedEntry.value
|
|
|
|
if (entryIndex > 0) {
|
|
selectedEntry.value = [sectionIndex, entryIndex - 1]
|
|
} else if (sectionIndex > 0) {
|
|
const [, section] = scoredResults.value[sectionIndex - 1]
|
|
selectedEntry.value = [sectionIndex - 1, section.results.length - 1]
|
|
} else {
|
|
selectedEntry.value = [
|
|
scoredResults.value.length - 1,
|
|
scoredResults.value[scoredResults.value.length - 1][1].results.length -
|
|
1,
|
|
]
|
|
}
|
|
}
|
|
|
|
const onEnter = () => {
|
|
// If no entries, do nothing
|
|
if (scoredResults.value.length === 0) return
|
|
|
|
const [sectionIndex, entryIndex] = selectedEntry.value
|
|
const [sectionID, section] = scoredResults.value[sectionIndex]
|
|
const result = section.results[entryIndex]
|
|
|
|
runAction(sectionID, result)
|
|
}
|
|
|
|
function handleKeyPress(e: KeyboardEvent) {
|
|
if (e.key === "ArrowUp") {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
onArrowUp()
|
|
} else if (e.key === "ArrowDown") {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
onArrowDown()
|
|
} else if (e.key === "Enter") {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
onEnter()
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => props.show,
|
|
(show) => {
|
|
if (show) {
|
|
window.addEventListener("keydown", handleKeyPress)
|
|
} else {
|
|
window.removeEventListener("keydown", handleKeyPress)
|
|
}
|
|
}
|
|
)
|
|
|
|
return { selectedEntry }
|
|
}
|
|
|
|
function closeSpotlightModal() {
|
|
const analyticsData: HoppSpotlightSessionEventData = {
|
|
action: "close",
|
|
searcherID: null,
|
|
rank: null,
|
|
}
|
|
|
|
// Sets the action indicating `close` and rank as `null` in the state for analytics event logging
|
|
spotlightService.setAnalyticsData(analyticsData)
|
|
|
|
emit("hide-modal")
|
|
}
|
|
</script>
|