fix: respect WIP design guidelines in command palette

Author: serhalp

app/components/CommandPalette.client.vue

@@ -213,11 +213,11 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
         {{ statusMessage }}
       </p>
 
-      <div class="border-b border-border px-4 py-4 sm:px-6">
+      <div class="border-b border-border/70 bg-bg-subtle/60 px-4 py-4 sm:px-5">
         <button
           v-if="isLanguageView"
           type="button"
-          class="mb-3 inline-flex items-center gap-2 rounded-md px-2 py-1 font-mono text-xs text-fg-muted transition-colors duration-150 hover:text-fg focus-visible:outline-accent/70"
+          class="mb-3 inline-flex min-h-9 items-center gap-2 rounded-lg border border-transparent px-2.5 py-1.5 text-sm text-fg-muted lowercase transition-colors duration-150 hover:border-border/70 hover:bg-bg hover:text-fg focus-visible:outline-accent/70"
           @click="handleBack"
         >
           <span class="i-lucide:arrow-left rtl-flip inline-block h-3.5 w-3.5" aria-hidden="true" />
@@ -240,26 +240,32 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
 
       <div
         :id="resultsId"
-        class="max-h-[60vh] overflow-y-auto px-2 py-3 sm:px-3"
+        class="max-h-[60vh] overflow-y-auto bg-bg-muted/30 px-2 py-2 sm:px-3 sm:py-3"
         :aria-label="$t('command_palette.results_label')"
         role="region"
       >
-        <p v-if="!hasResults" class="px-3 py-6 text-center text-sm text-fg-muted">
-          {{ $t('command_palette.empty') }}
-        </p>
-        <p v-if="!hasResults && trimmedQuery" class="px-3 pb-6 text-center text-sm text-fg-subtle">
-          {{ $t('command_palette.empty_search_hint', { query: trimmedQuery }) }}
-        </p>
+        <div
+          v-if="!hasResults"
+          class="mx-1 rounded-xl border border-border/70 bg-bg-subtle/70 px-4 py-8 text-center sm:mx-0"
+        >
+          <p class="text-base text-fg-muted lowercase">
+            {{ $t('command_palette.empty') }}
+          </p>
+          <p v-if="trimmedQuery" class="mt-2 text-sm text-fg-subtle">
+            {{ $t('command_palette.empty_search_hint', { query: trimmedQuery }) }}
+          </p>
+        </div>
 
         <div v-else class="flex flex-col gap-3">
           <section
             v-for="group in groupedCommands"
             :key="group.id"
             :aria-labelledby="`${dialogId}-group-${group.id}`"
+            class="rounded-xl border border-border/70 bg-bg-subtle/70 p-1 sm:p-1.5"
           >
             <h3
               :id="`${dialogId}-group-${group.id}`"
-              class="px-3 pb-1 text-xs font-mono uppercase tracking-wide text-fg-subtle"
+              class="px-3 pb-2 pt-2 text-sm uppercase tracking-[0.14em] text-fg-subtle"
             >
               {{ group.label }}
             </h3>
@@ -268,10 +274,10 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
               <li v-for="command in group.items" :key="command.id">
                 <button
                   type="button"
-                  class="w-full cursor-pointer rounded-lg border border-transparent px-3 py-3 text-start transition-colors duration-150 hover:border-border hover:bg-bg-subtle focus-visible:outline-accent/70"
+                  class="min-h-12 w-full cursor-pointer rounded-lg border border-transparent px-3 py-2.5 text-start transition-colors duration-150 hover:border-border/80 hover:bg-bg focus-visible:outline-accent/70"
                   :class="
                     activeIndex === (commandIndexMap.get(command.id) ?? -1)
-                      ? 'border-border bg-bg-subtle'
+                      ? 'border-border/80 bg-bg'
                       : ''
                   "
                   data-command-item="true"
@@ -287,19 +293,19 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
                       aria-hidden="true"
                     />
                     <span class="min-w-0 flex-1">
-                      <span class="block truncate text-sm font-medium text-fg">
+                      <span class="block truncate text-base text-fg lowercase">
                         {{ command.label }}
                       </span>
                     </span>
                     <span
                       v-if="command.badge"
-                      class="rounded border border-border bg-bg px-2 py-0.5 text-xs font-mono text-fg-muted"
+                      class="hidden rounded-lg border border-border/70 bg-bg px-2.5 py-1 text-sm text-fg-muted lowercase sm:inline-flex"
                     >
                       {{ command.badge }}
                     </span>
                     <span
                       v-if="command.active"
-                      class="rounded border border-accent/30 bg-accent/10 px-2 py-0.5 text-xs font-mono text-accent"
+                      class="hidden rounded-lg border border-accent/30 bg-accent/10 px-2.5 py-1 text-sm text-accent lowercase sm:inline-flex"
                     >
                       {{ command.activeLabel || $t('command_palette.current') }}
                     </span>