feat: search in command panel (#576)

components/command/CommandItem.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { ResolvedCommand } from '@/composables/command'
+
+const emits = defineEmits<{
+  (event: 'activate'): void
+}>()
+
+const {
+  cmd,
+  index,
+  active = false,
+} = $defineProps<{
+  cmd: ResolvedCommand
+  index: number
+  active?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="flex px-3 py-2 my-1 items-center rounded-lg hover:bg-active transition-all duration-65 ease-in-out cursor-pointer scroll-m-10"
+    :class="{ 'bg-active': active }"
+    :data-index="index"
+    @click="emits('activate')"
+  >
+    <div v-if="cmd.icon" mr-2 :class="cmd.icon" />
+
+    <div class="flex-1 flex items-baseline gap-2">
+      <div :class="{ 'font-medium': active }">
+        {{ cmd.name }}
+      </div>
+      <div v-if="cmd.description" class="text-xs text-secondary">
+        {{ cmd.description }}
+      </div>
+    </div>
+
+    <div
+      v-if="cmd.onComplete"
+      class="flex items-center gap-1 transition-all duration-65 ease-in-out"
+      :class="active ? 'opacity-100' : 'opacity-0'"
+    >
+      <div class="text-xs text-secondary">
+        {{ $t('command.complete') }}
+      </div>
+      <CommandKey name="Tab" />
+    </div>
+    <div
+      v-if="cmd.onActivate"
+      class="flex items-center gap-1 transition-all duration-65 ease-in-out"
+      :class="active ? 'opacity-100' : 'opacity-0'"
+    >
+      <div class="text-xs text-secondary">
+        {{ $t('command.activate') }}
+      </div>
+      <CommandKey name="Enter" />
+    </div>
+  </div>
+</template>