feat: refine CommandPalette item layout and improve placeholder text for better usability

This commit is contained in:
2025-09-03 13:45:46 +02:00
parent 5d9b1080dd
commit 37ff32b080

View File

@@ -78,29 +78,24 @@ const commandPaletteUi = {
close close
:ui="commandPaletteUi" :ui="commandPaletteUi"
:groups="messages" :groups="messages"
:autofocus="false" autofocus="false"
icon="i-ph-paper-plane-tilt-duotone" icon="i-ph-paper-plane-tilt-duotone"
:placeholder="t('palette.cmd.placeholder')" :placeholder="t('palette.cmd.placeholder')"
@update:model-value="onSelect" @update:model-value="onSelect"
@update:open="openMessageModal = $event" @update:open="openMessageModal = $event"
> >
<template #item="{ item }"> <template #item="{ item }">
<div class="relative flex flex-col sm:flex-row sm:justify-between sm:items-center w-full cursor-pointer my-1"> <div class="relative flex flex-col sm:flex-row items-start sm:justify-between sm:items-center w-full cursor-pointer my-1">
<div class="absolute inset-0 -m-1" /> <div class="absolute inset-0 -m-1" />
<div class="flex items-center gap-2.5"> <div class="flex items-center gap-2.5">
<UIcon :name="item.icon!" size="20" /> <UIcon :name="item.icon!" size="20" />
<span>{{ t(item.label) }}</span> <span>{{ t(item.label) }}</span>
</div> </div>
<div class="text-muted text-xs font-medium"> <div class="text-dimmed text-xs font-medium text-start">
{{ t(item.prompt) }} {{ t(item.prompt) }}
</div> </div>
</div> </div>
</template> </template>
<template #group-arthur="{ group }">
<div>
{{ t(group) }}
</div>
</template>
<template #footer> <template #footer>
<div class="flex items-center justify-between gap-2"> <div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">