From 313b8180c0d1a306a53cf6a3e4b7f15d14a7aef0 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 4 Sep 2025 10:38:57 +0200
Subject: [PATCH] feat: enhance CommandPalette and MessageContainer with
 improved styling and interactivity; update localization messages for clarity

---
 app/components/chat/CommandPalette.vue   | 2 ++
 app/components/chat/MessageContainer.vue | 8 ++++----
 app/components/tool/Activity.vue         | 6 +++---
 app/pages/index.vue                      | 2 +-
 locales/en.json                          | 2 +-
 locales/es.json                          | 8 ++++----
 locales/fr.json                          | 8 ++++----
 7 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index 5aa743a..9ec8539 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/app/components/chat/CommandPalette.vue
@@ -152,6 +152,7 @@ const commandPaletteUi = {
             :icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
             color="neutral"
             variant="outline"
+            class="cursor-pointer"
             size="xl"
             @click.prevent="toggleDark"
           />
@@ -159,6 +160,7 @@ const commandPaletteUi = {
             icon="i-ph-translate-duotone"
             color="neutral"
             variant="outline"
+            class="cursor-pointer"
             size="xl"
             @click.prevent="changeLocale(currentLocale!.code === 'en' ? 'fr' : currentLocale!.code === 'fr' ? 'es' : 'en')"
           />
diff --git a/app/components/chat/MessageContainer.vue b/app/components/chat/MessageContainer.vue
index 4c1c84f..08a97d7 100644
--- a/app/components/chat/MessageContainer.vue
+++ b/app/components/chat/MessageContainer.vue
@@ -28,7 +28,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       {{ formatted }}
     </div>
   </div>
-  <div v-else class="group space-y-2 duration-200">
+  <div v-else class="group space-y-2 duration-200 relative">
     <div class="flex flex-col-reverse gap-2 items-start md:flex-row-reverse">
       <UCard
         v-if="message.state === ChatState.LOADING && message.fetchStates && message.fetchStates.length > 0"
@@ -90,12 +90,12 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
           {{ message }}
         </div>
       </UCard>
-      <div class="flex items-center gap-2">
-        <UAvatar src="/arthur.webp" size="lg" />
+      <div class="flex items-center gap-2 lg:absolute lg:-left-12">
+        <UAvatar src="/arthur.webp" size="lg" class="shadow-lg" />
         <span class="md:hidden">Arthur DANJOU</span>
       </div>
     </div>
-    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start ml-12">
+    <div class="text-muted opacity-0 group-hover:opacity-80 duration-500 flex text-xs italic justify-start">
       {{ formatted }}
     </div>
   </div>
diff --git a/app/components/tool/Activity.vue b/app/components/tool/Activity.vue
index 0782103..118ce56 100644
--- a/app/components/tool/Activity.vue
+++ b/app/components/tool/Activity.vue
@@ -107,14 +107,14 @@ const getActivity = computed(() => {
               {{ getActivity.state!.split(' ').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') }}
             </div>
             <div>{{ getActivity.project }}</div>
-            <div class="italic text-xs">
-              {{ getActivity.start.ago }}
-            </div>
           </div>
 
           <template #footer>
             <div class="flex justify-end text-sm">
               <i18n-t keypath="tool.activity.started" tag="p">
+                <template #ago>
+                  {{ getActivity.start.ago }}
+                </template>
                 <template #date>
                   {{ getActivity.start.formated.date }}
                 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index cd9b4f0..3c94d3e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,7 +34,7 @@ watch(
         scale: 1,
         transition: {
           delay: 1800,
-          ease: 'easeInOut',
+          ease: 'easeIn',
         },
       }"
       :active="messages.length > 0"
diff --git a/locales/en.json b/locales/en.json
index f5a5493..6d28dd4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -133,7 +133,7 @@
         "offline": "I'm offline 🫥",
         "idling": "I'm sleeping 😴"
       },
-      "started": "Started the {date} at {hour}",
+      "started": "Started {ago}, the {date} at {hour}",
       "secret": "Secret Project"
     },
     "location": "I'm currently based in {location}. See below for more details.",
diff --git a/locales/es.json b/locales/es.json
index ea5f9b7..3916d7e 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -26,15 +26,15 @@
       "prompt": "¿Cómo puedo cambiar el tema?"
     },
     "stats": {
-      "label": "Ver estadísticas",
+      "label": "Estadística de desarrollo",
       "prompt": "¿Cómo puedo ver las estadísticas sobre Arthur?"
     },
     "weather": {
-      "label": "Ver el clima",
+      "label": "Clima",
       "prompt": "¿Cómo puedo ver las condiciones climáticas cerca de Arthur?"
     },
     "location": {
-      "label": "Ver ubicación",
+      "label": "Ubicación",
       "prompt": "¿Cómo puedo ver la ubicación de Arthur?"
     },
     "language": {
@@ -133,7 +133,7 @@
         "offline": "Estoy desconectado 🫥",
         "idling": "Estoy durmiendo 😴"
       },
-      "started": "Comenzado el {date} a {hour}",
+      "started": "Comenzó {ago}, el {date} en {hour}",
       "secret": "Proyecto Secreto"
     },
     "location": "Actualmente estoy basado en {location}. Consulta más detalles a continuación.",
diff --git a/locales/fr.json b/locales/fr.json
index fe29417..15621ea 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -26,15 +26,15 @@
       "prompt": "Comment puis-je changer le thème ?"
     },
     "stats": {
-      "label": "Voir les statistiques",
+      "label": "Statistiques de développement",
       "prompt": "Comment puis-je voir les statistiques concernant Arthur ?"
     },
     "weather": {
-      "label": "Voir la météo",
+      "label": "Météo",
       "prompt": "Comment puis-je voir les conditions météorologiques près d'Arthur ?"
     },
     "location": {
-      "label": "Voir la localisation",
+      "label": "Localisation",
       "prompt": "Comment puis-je voir la localisation d'Arthur ?"
     },
     "language": {
@@ -133,7 +133,7 @@
         "offline": "Je suis déconnecté 🫥",
         "idling": "Je dors 😴"
       },
-      "started": "Commencé le {date} à {hour}",
+      "started": "Commencé {ago}, le {date} à {hour}",
       "secret": "Projet Secret"
     },
     "location": "Je suis actuellement basé à {location}. Voir ci-dessous pour plus de détails.",