mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 15:54:03 +01:00
feat: refine CommandPalette item layout and improve placeholder text for better usability
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user