opendesk

1<template>
2  <div
3    class="flex h-9 w-full min-w-0 items-center rounded-4 px-2 text-sm text-ink-gray-8 leading-snug"
4    :class="{ 'bg-surface-gray-2': active }"
5  >
6    <Avatar
7      v-if="command.avatar"
8      :image="command.avatar.image"
9      :label="command.avatar.label"
10      size="xs"
11      class="me-2.5 shrink-0"
12    />
13    <!-- Boxed to the icon's 3.5 width, so a dot row's title lands on the same axis. -->
14    <span
15      v-else-if="command.dotClass"
16      class="me-2.5 flex size-3.5 shrink-0 items-center justify-center"
17    >
18      <span class="size-2 rounded-full bg-current" :class="command.dotClass" />
19    </span>
20    <component
21      :is="command.icon"
22      v-else-if="command.icon"
23      v-bind="command.iconProps"
24      class="me-2.5 size-3.5 shrink-0"
25      :class="active ? 'text-ink-gray-7' : 'text-ink-gray-5'"
26    />
27
28    <span
29      class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
30    >
31      <template v-for="(run, index) in runs" :key="index">
32        <span v-if="run.match" class="font-medium text-ink-gray-9">{{
33          run.text
34        }}</span>
35        <template v-else>{{ run.text }}</template>
36      </template>
37      <span v-if="command.titleSuffix" class="text-ink-gray-5">{{
38        " " + command.titleSuffix
39      }}</span>
40    </span>
41
42    <span v-if="command.subtitle" class="ms-3 shrink-0 text-xs text-ink-gray-4">
43      {{ command.subtitle }}
44    </span>
45    <LucideCheck
46      v-if="command.checked"
47      class="ms-3 size-3.5 shrink-0 text-ink-gray-7"
48    />
49    <ShortcutKey
50      v-if="command.hint"
51      :keys="shortcutKeys"
52      class="ms-3 shrink-0"
53    />
54    <LucideChevronRight
55      v-if="command.children"
56      class="ms-2 size-3.5 shrink-0 text-ink-gray-4"
57    />
58  </div>
59</template>
60
61<script setup lang="ts">
62import ShortcutKey from "@opendesk/shared/ShortcutKey.vue";
63import { useDevice } from "@/composables";
64import { Avatar } from "frappe-ui";
65import { computed } from "vue";
66import LucideCheck from "~icons/lucide/check";
67import LucideChevronRight from "~icons/lucide/chevron-right";
68import { titleRuns, type Command } from "./paletteTypes";
69
70const props = defineProps<{
71  command: Command;
72  active: boolean;
73}>();
74
75const { metaIcon } = useDevice();
76
77/** One unmatched run for every row without server highlighting. */
78const runs = computed(() =>
79  props.command.marked
80    ? titleRuns(props.command.marked)
81    : [{ text: props.command.title, match: false }]
82);
83
84/** "Mod+Shift+." -> "⌘ Shift ." — ShortcutKey caps each space-separated key. */
85const shortcutKeys = computed(() =>
86  (props.command.hint ?? "")
87    .split("+")
88    .map((key) => (key.toLowerCase() === "mod" ? metaIcon : key))
89    .join(" ")
90);
91</script>
92