From c92bb2ed1fe203abd9f5cfa72d87056019b81de3 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Sep 2025 12:48:37 +0200
Subject: [PATCH] feat: enhance CommandPalette UI, add Main component, and
 update localization for better user experience

---
 app/components/chat/CommandPalette.vue | 35 +++++++++++++++++---------
 app/components/chat/Main.vue           | 18 +++++++++++++
 app/error.vue                          |  4 +--
 app/pages/index.vue                    | 12 ++-------
 locales/en.json                        |  5 ++--
 locales/es.json                        |  5 ++--
 locales/fr.json                        |  5 ++--
 7 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 app/components/chat/Main.vue

diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index e4d51e5..a2b48a0 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/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>
diff --git a/app/components/chat/Main.vue b/app/components/chat/Main.vue
new file mode 100644
index 0000000..6dc8c75
--- /dev/null
+++ b/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>
diff --git a/app/error.vue b/app/error.vue
index 56e0cb4..3d548f3 100644
--- a/app/error.vue
+++ b/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>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index cd915e6..4728fa0 100644
--- a/app/pages/index.vue
+++ b/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,
diff --git a/locales/en.json b/locales/en.json
index b3f57c9..f9f2bb6 100644
--- a/locales/en.json
+++ b/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..."
     }
diff --git a/locales/es.json b/locales/es.json
index 3440864..8aaa386 100644
--- a/locales/es.json
+++ b/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..."
     }
diff --git a/locales/fr.json b/locales/fr.json
index bf07075..4f12051 100644
--- a/locales/fr.json
+++ b/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..."
     }