elk/components/command/CommandPanel.vue

247 lines
5.8 KiB
Vue
Raw Normal View History

<script setup lang="ts">
2023-01-07 14:52:58 +00:00
import type { SearchResult as SearchResultType } from '~/composables/masto/search'
import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
2022-12-09 21:18:21 +00:00
const emit = defineEmits<{
(event: 'close'): void
}>()
const registry = useCommandRegistry()
2022-12-28 16:29:07 +00:00
const router = useRouter()
const inputEl = $ref<HTMLInputElement>()
const resultEl = $ref<HTMLDivElement>()
2022-12-09 21:18:21 +00:00
const scopes = $ref<CommandScope[]>([])
let input = $(commandPanelInput)
2022-12-09 21:18:21 +00:00
onMounted(() => {
inputEl?.focus()
})
const commandMode = $computed(() => input.startsWith('>'))
2022-12-28 16:29:07 +00:00
const query = $computed(() => commandMode ? '' : input.trim())
const { accounts, hashtags, loading } = useSearch($$(query))
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
return {
index: 0,
type: 'search',
search,
onActivate: () => router.push(search.to),
}
}
2022-12-28 16:29:07 +00:00
const searchResult = $computed<QueryResult>(() => {
if (query.length === 0 || loading.value)
return { length: 0, items: [], grouped: {} as any }
2023-01-05 16:48:20 +00:00
// TODO extract this scope
// duplicate in SearchWidget.vue
2023-01-07 14:52:58 +00:00
const hashtagList = hashtags.value.slice(0, 3).map(toSearchQueryResultItem)
const accountList = accounts.value.map(toSearchQueryResultItem)
2022-12-28 16:29:07 +00:00
const grouped: QueryResult['grouped'] = new Map()
grouped.set('Hashtags', hashtagList)
grouped.set('Users', accountList)
let index = 0
for (const items of grouped.values()) {
for (const item of items)
item.index = index++
}
return {
grouped,
items: [...hashtagList, ...accountList],
length: hashtagList.length + accountList.length,
}
})
const result = $computed<QueryResult>(() => commandMode
2023-01-10 07:24:14 +00:00
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
2022-12-28 16:29:07 +00:00
: searchResult,
)
const isMac = useIsMac()
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
let active = $ref(0)
watch($$(result), (n, o) => {
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
active = 0
})
function findItemEl(index: number) {
return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
}
function onCommandActivate(item: QueryResultItem) {
if (item.onActivate) {
item.onActivate()
2022-12-09 21:18:21 +00:00
emit('close')
}
else if (item.onComplete) {
scopes.push(item.onComplete())
2023-01-10 07:24:14 +00:00
input = '> '
}
}
function onCommandComplete(item: QueryResultItem) {
if (item.onComplete) {
scopes.push(item.onComplete())
2023-01-10 07:24:14 +00:00
input = '> '
}
else if (item.onActivate) {
item.onActivate()
2022-12-28 16:29:07 +00:00
emit('close')
}
}
function intoView(index: number) {
const el = findItemEl(index)
if (el)
el.scrollIntoView({ block: 'nearest' })
}
function setActive(index: number) {
const len = result.length
active = (index + len) % len
intoView(active)
}
function onKeyDown(e: KeyboardEvent) {
switch (e.key) {
case 'p':
case 'ArrowUp': {
if (e.key === 'p' && !e.ctrlKey)
break
e.preventDefault()
setActive(active - 1)
break
}
case 'n':
case 'ArrowDown': {
if (e.key === 'n' && !e.ctrlKey)
break
e.preventDefault()
setActive(active + 1)
break
}
case 'Home': {
e.preventDefault()
active = 0
intoView(active)
break
}
case 'End': {
e.preventDefault()
setActive(result.length - 1)
break
}
case 'Enter': {
e.preventDefault()
const cmd = result.items[active]
if (cmd)
onCommandActivate(cmd)
break
}
case 'Tab': {
e.preventDefault()
const cmd = result.items[active]
if (cmd)
onCommandComplete(cmd)
break
}
case 'Backspace': {
if (input === '>' && scopes.length) {
e.preventDefault()
scopes.pop()
}
break
}
}
}
</script>
<template>
2022-12-09 21:18:21 +00:00
<div class="flex flex-col w-50vw max-w-180 h-50vh max-h-120">
<!-- Input -->
<label class="flex mx-3 my-1 items-center">
<div mx-1 i-ri:search-line />
<div v-for="scope in scopes" :key="scope.id" class="flex items-center mx-1 gap-2">
<div class="text-sm">{{ scope.display }}</div>
<span class="text-secondary">/</span>
</div>
<input
ref="inputEl"
v-model="input"
class="focus:outline-none flex-1 p-2 rounded bg-base"
placeholder="Search"
@keydown="onKeyDown"
>
2022-12-09 21:18:21 +00:00
<CommandKey name="Escape" />
</label>
2022-12-09 21:18:21 +00:00
<div class="w-full border-b-1 border-base" />
2022-12-09 21:18:21 +00:00
<!-- Results -->
<div ref="resultEl" class="flex-1 mx-1 overflow-y-auto">
2022-12-28 16:29:07 +00:00
<template v-if="loading">
<SearchResultSkeleton />
<SearchResultSkeleton />
<SearchResultSkeleton />
</template>
<template v-else-if="result.length">
<template v-for="[scope, group] in result.grouped" :key="scope">
<div class="mt-2 px-2 py-1 text-sm text-secondary">
{{ scope }}
2022-12-09 21:18:21 +00:00
</div>
2022-12-28 16:29:07 +00:00
<template v-for="item in group" :key="item.index">
<SearchResult v-if="item.type === 'search'" :active="active === item.index" :result="item.search" />
<CommandItem v-else :index="item.index" :cmd="item.cmd" :active="active === item.index" @activate="onCommandActivate(item)" />
</template>
2022-12-09 21:18:21 +00:00
</template>
</template>
2022-12-28 16:29:07 +00:00
<div v-else p5 text-center text-secondary italic>
{{
2023-01-09 08:36:24 +00:00
input.trim().length
2022-12-28 16:29:07 +00:00
? $t('common.not_found')
: $t('search.search_desc')
}}
</div>
2022-12-09 21:18:21 +00:00
</div>
2022-12-09 21:18:21 +00:00
<div class="w-full border-b-1 border-base" />
2022-12-09 21:18:21 +00:00
<!-- Footer -->
<div class="flex items-center px-3 py-1 text-xs">
<div i-ri:lightbulb-flash-line /> Tip: Use
<CommandKey :name="`${modifierKeyName}+K`" /> to search,
<CommandKey :name="`${modifierKeyName}+/`" /> to activate command mode.
</div>
2022-12-09 21:18:21 +00:00
</div>
</template>