feat: enhance CommandPalette UI, add Main component, and update localization for better user experience

app/components/chat/CommandPalette.vue

@@ -60,7 +60,7 @@ const commandPaletteUi = {
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
           <UButton
             :label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
-            variant="solid"
+            variant="outline"
             color="neutral"
             size="xl"
             icon="i-ph-paper-plane-tilt-duotone"
@@ -68,8 +68,8 @@ const commandPaletteUi = {
             :disabled="loading"
           >
             <template #trailing>
-              <UKbd value="meta" color="neutral" />
-              <UKbd value="enter" color="neutral" />
+              <UKbd value="meta" color="info" />
+              <UKbd value="enter" color="info" />
             </template>
           </UButton>
 
@@ -78,30 +78,41 @@ const commandPaletteUi = {
               close
               :ui="commandPaletteUi"
               :groups="messages"
+              :autofocus="false"
+              icon="i-ph-paper-plane-tilt-duotone"
+              :placeholder="t('palette.cmd.placeholder')"
               @update:model-value="onSelect"
               @update:open="openMessageModal = $event"
             >
               <template #item="{ item }">
-                <div class="relative flex items-center justify-between w-full p-1">
+                <div class="relative flex flex-col sm:flex-row sm:justify-between sm:items-center w-full cursor-pointer my-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" />
-                      <span>{{ t(item.label) }}</span>
-                    </div>
+                    <UIcon :name="item.icon!" size="20" />
+                    <span>{{ t(item.label) }}</span>
                   </div>
-                  <span class="text-muted text-xs font-medium">
+                  <div class="text-muted text-xs font-medium">
                     {{ t(item.prompt) }}
-                  </span>
+                  </div>
+                </div>
+              </template>
+              <template #group-arthur="{ group }">
+                <div>
+                  {{ t(group) }}
                 </div>
               </template>
               <template #footer>
                 <div class="flex items-center justify-between gap-2">
-                  <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
+                  <div class="flex items-center gap-1">
+                    <UIcon name="i-simple-icons-nuxtdotjs" class="size-5 ml-1 text-green-500" />
+                    <p class="text-xs font-medium text-dimmed">
+                      {{ t('main.powered') }}
+                    </p>
+                  </div>
                   <div class="flex items-center gap-1">
                     <UButton color="neutral" variant="ghost" :label="t('palette.cmd.send')" class="text-dimmed" size="xs">
                       <template #trailing>
-                        <UKbd value="enter" />
+                        <UKbd value="enter" color="info" />
                       </template>
                     </UButton>
                   </div>

app/components/chat/Main.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="flex flex-col my-16 md:my-32">
+    <h1 class="font-bold text-3xl sm:text-4xl">
+      Welcome to ArtChat
+    </h1>
+    <h3 class="text-3xl sm:text-4xl bg-gradient-to-r from-inverted/40 to-inverted/75 to-50% bg-clip-text text-transparent font-medium">
+      Ask me anything about Arthur DANJOU
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

app/error.vue

@@ -8,10 +8,10 @@ const { t } = useI18n()
       <h1 class="text-center font-serif text-[14rem] italic">
         404
       </h1>
-      <p class="text-center flex gap-1">
+      <p class="text-center flex gap-0.5">
         {{ t('error.main') }}
         <HomeLink label="home" href="/" />
-        <NuxtLink href="/" class="sofia flex gap-1 items-center group">
+        <NuxtLink href="/" class="sofia flex items-center group">
           <span class="duration-300 underline-offset-2 font-semibold text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 group-hover:decoration-black dark:group-hover:decoration-white">
             {{ t('error.redirect') }}
           </span>

app/pages/index.vue

@@ -22,16 +22,8 @@ watch(
 <template>
   <main class="!max-w-none">
     <ChatCommandPalette />
-    <div ref="parents" class="space-y-8 my-32">
-      <ChatMessageContainer
-        :message="{
-          content: 'main.init',
-          id: 0,
-          sender: ChatSender.ARTHUR,
-          state: ChatState.SENT,
-          type: ChatType.INIT,
-        }"
-      />
+    <ChatMain />
+    <div ref="parents" class="space-y-8 my-16 md:my-32">
       <ChatMessageContainer
         :message="{
           id: 0,

locales/en.json

@@ -1,8 +1,8 @@
 {
   "main": {
-    "init": "Hey, welcome to ArtChat. I'm an AI assistant that knows everything about Arthur Danjou. Ask me anything and I'll answer as if I were him!",
     "question": "Awesome! Tell me a bit more about you.",
-    "about": "I'm a student in Mathematics and Statistics at Université Paris-Dauphine in France. With a deep understanding of emerging technologies, I'm at the heart of a rapidly expanding field. My background in mathematics gives me an edge in understanding the concepts and theories behind these technologies and designing them effectively."
+    "about": "I'm a student in Mathematics and Statistics at Université Paris-Dauphine in France. With a deep understanding of emerging technologies, I'm at the heart of a rapidly expanding field. My background in mathematics gives me an edge in understanding the concepts and theories behind these technologies and designing them effectively.",
+    "powered": "Powered by Nuxt"
   },
   "palette": {
     "clear": {
@@ -12,6 +12,7 @@
       "description": "This action cannot be undone."
     },
     "cmd": {
+      "placeholder": "Use the arrow keys to navigate through the preset prompts. Press Enter to send the message.",
       "send": "Send message",
       "sending": "Sending..."
     }

locales/es.json

@@ -1,8 +1,8 @@
 {
   "main": {
-    "init": "Hola, bienvenido a ArtChat. Soy un asistente de IA que sabe todo sobre Arthur Danjou. Hazme preguntas y responderé como si fuera él.",
     "question": "¡Genial! Háblame un poco más sobre ti.",
-    "about": "Soy estudiante de Matemáticas y Estadísticas en la Universidad Paris-Dauphine en Francia. Con una comprensión profunda de las tecnologías emergentes, estoy en el corazón de un campo en rápida expansión. Mi formación en matemáticas me da una ventaja para comprender los conceptos y teorías detrás de estas tecnologías y para diseñarlas de manera efectiva."
+    "about": "Soy estudiante de Matemáticas y Estadísticas en la Universidad Paris-Dauphine en Francia. Con una comprensión profunda de las tecnologías emergentes, estoy en el corazón de un campo en rápida expansión. Mi formación en matemáticas me da una ventaja para comprender los conceptos y teorías detrás de estas tecnologías y para diseñarlas de manera efectiva.",
+    "powered": "Impulsado por Nuxt"
   },
   "palette": {
     "clear": {
@@ -12,6 +12,7 @@
       "description": "Esta acción no se puede deshacer."
     },
     "cmd": {
+      "placeholder": "Use las flechas para navegar entre los prefacios de inmediato. Presione Entrar para enviar el mensaje.",
       "send": "Enviar el mensaje",
       "sending": "Enviando..."
     }

locales/fr.json

@@ -1,8 +1,8 @@
 {
   "main": {
-    "init": "Salut, bienvenue sur ArtChat. Je suis un assistant IA connaissant tout sur Arthur Danjou. Pose moi des questions et j'y répondrai comme si j'étais lui.",
     "question": "Génial ! Parle moi un peu plus de toi.",
-    "about": "Je suis étudiant en Mathématiques et en Statistiques à l'Université Paris-Dauphine en France. Avec une compréhension approfondie des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Mon parcours en mathématiques me donne un avantage pour comprendre les concepts et les théories derrière ces technologies et pour les concevoir efficacement."
+    "about": "Je suis étudiant en Mathématiques et en Statistiques à l'Université Paris-Dauphine en France. Avec une compréhension approfondie des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Mon parcours en mathématiques me donne un avantage pour comprendre les concepts et les théories derrière ces technologies et pour les concevoir efficacement.",
+    "powered": "Propulsé par Nuxt"
   },
   "palette": {
     "clear": {
@@ -12,6 +12,7 @@
       "description": "Cette action ne peut pas être annulée."
     },
     "cmd": {
+      "placeholder": "Utilisez les flèches pour naviguer parmi les prompts préfaits. Appuyez sur Entrer pour envoyer le message.",
       "send": "Envoyer le message",
       "sending": "Envoi..."
     }