From 334bd93099e1bbfb37aa660c633e092444c74b6c Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Thu, 4 Sep 2025 13:50:07 +0200
Subject: [PATCH] feat: add tooltips for navigation and action buttons in
 CommandPalette; update localization files for new tooltip texts

---
 app/components/chat/CommandPalette.vue | 165 ++++++++++++++++---------
 app/pages/index.vue                    |   3 +
 locales/en.json                        |   8 ++
 locales/es.json                        |   8 ++
 locales/fr.json                        |   8 ++
 5 files changed, 136 insertions(+), 56 deletions(-)

diff --git a/app/components/chat/CommandPalette.vue b/app/components/chat/CommandPalette.vue
index dcbb37f..d832fea 100644
--- a/app/components/chat/CommandPalette.vue
+++ b/app/components/chat/CommandPalette.vue
@@ -61,6 +61,12 @@ function up() {
 function down() {
   window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
 }
+
+const toolTipContent = {
+  align: 'center',
+  side: 'top',
+  sideOffset: 0,
+}
 </script>
 
 <template>
@@ -71,41 +77,64 @@ function down() {
     <UCard variant="outline" class="rounded-xl shadow-lg w-full" :ui="{ body: 'p-2 sm:p-2 flex gap-2 w-full' }">
       <ClientOnly>
         <UFieldGroup v-if="active" class="flex items-center justify-center">
-          <UButton
-            icon="i-ph-arrow-fat-up-duotone"
-            color="neutral"
-            variant="outline"
-            class="cursor-pointer"
-            size="xl"
-            @click.prevent="up"
-          />
-          <UButton
-            icon="i-ph-arrow-fat-down-duotone"
-            color="neutral"
-            variant="outline"
-            class="cursor-pointer"
-            size="xl"
-            @click.prevent="down"
-          />
+          <UTooltip
+            :text="t('palette.tooltip.up')"
+            arrow
+            :content="toolTipContent"
+            :delay-duration="0"
+          >
+            <UButton
+              icon="i-ph-arrow-fat-up-duotone"
+              color="neutral"
+              variant="outline"
+              class="cursor-pointer"
+              size="xl"
+              @click.prevent="up"
+            />
+          </UTooltip>
+
+          <UTooltip
+            :text="t('palette.tooltip.down')"
+            arrow
+            :content="toolTipContent"
+            :delay-duration="0"
+          >
+            <UButton
+              icon="i-ph-arrow-fat-down-duotone"
+              color="neutral"
+              variant="outline"
+              class="cursor-pointer"
+              size="xl"
+              @click.prevent="down"
+            />
+          </UTooltip>
         </UFieldGroup>
       </ClientOnly>
       <UFieldGroup class="w-full">
         <UModal v-model:open="openMessageModal" :ui="modalUi" title="Hey" description="Hey">
-          <UButton
-            :label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
-            variant="outline"
-            color="neutral"
-            size="xl"
-            icon="i-ph-paper-plane-tilt-duotone"
-            class="rounded-lg cursor-pointer p-2 w-full justify-center"
-            :disabled="loading"
+          <UTooltip
+            :text="t('palette.tooltip.send')"
+            arrow
+            :content="toolTipContent"
+            :kbds="['enter']"
+            :delay-duration="0"
           >
-            <template #trailing>
-              <div class="hidden md:flex px-2 items-center">
-                <UKbd value="enter" color="info" />
-              </div>
-            </template>
-          </UButton>
+            <UButton
+              :label="loading ? t('palette.cmd.sending') : t('palette.cmd.send')"
+              variant="outline"
+              color="neutral"
+              size="xl"
+              icon="i-ph-paper-plane-tilt-duotone"
+              class="rounded-lg cursor-pointer p-2 w-full justify-center"
+              :disabled="loading"
+            >
+              <template #trailing>
+                <div class="hidden md:flex px-2 items-center">
+                  <UKbd value="enter" color="info" />
+                </div>
+              </template>
+            </UButton>
+          </UTooltip>
 
           <template #content>
             <UCommandPalette
@@ -156,15 +185,23 @@ function down() {
           :title="t('palette.clear.title')"
           :description="t('palette.clear.description')"
         >
-          <UButton
-            variant="subtle"
-            color="error"
-            leading-icon="i-ph-trash-duotone"
-            size="xl"
-            class="rounded-lg"
-            :class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
-            :disabled="storeMessages.length === 0"
-          />
+          <UTooltip
+            :text="t('palette.tooltip.clear')"
+            arrow
+            :content="toolTipContent"
+            :kbds="['meta', 'D']"
+            :delay-duration="0"
+          >
+            <UButton
+              variant="subtle"
+              color="error"
+              leading-icon="i-ph-trash-duotone"
+              size="xl"
+              class="rounded-lg"
+              :class="storeMessages.length !== 0 ? 'cursor-pointer' : 'cursor-default'"
+              :disabled="storeMessages.length === 0"
+            />
+          </UTooltip>
 
           <template #footer="{ close }">
             <UFieldGroup>
@@ -175,23 +212,39 @@ function down() {
         </UModal>
       </UFieldGroup>
       <ClientOnly>
-        <UFieldGroup class="flex items-center justify-center" :orientation="active ? 'horizontal' : 'vertical'">
-          <UButton
-            :icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
-            color="neutral"
-            variant="outline"
-            class="cursor-pointer"
-            size="xl"
-            @click.prevent="toggleDark"
-          />
-          <UButton
-            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')"
-          />
+        <UFieldGroup class="flex items-center justify-center">
+          <UTooltip
+            :text="t('palette.tooltip.theme')"
+            arrow
+            :content="toolTipContent"
+            :kbds="['T']"
+            :delay-duration="0"
+          >
+            <UButton
+              :icon="dark ? 'i-ph-moon-duotone' : 'i-ph-sun-duotone'"
+              color="neutral"
+              variant="outline"
+              class="cursor-pointer"
+              size="xl"
+              @click.prevent="toggleDark"
+            />
+          </UTooltip>
+          <UTooltip
+            :text="t('palette.tooltip.language')"
+            arrow
+            :content="toolTipContent"
+            :kbds="['L']"
+            :delay-duration="0"
+          >
+            <UButton
+              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')"
+            />
+          </UTooltip>
         </UFieldGroup>
       </ClientOnly>
     </UCard>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c690714..22c7e9b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -47,6 +47,7 @@ watch(
     <ChatMain />
     <div ref="parents" class="space-y-4 my-32">
       <ChatMessageContainer
+        :id="99999999998"
         v-motion
         :initial="{
           opacity: 0,
@@ -71,6 +72,7 @@ watch(
         }"
       />
       <ChatMessageContainer
+        :id="99999999999"
         v-motion
         :initial="{
           opacity: 0,
@@ -96,6 +98,7 @@ watch(
       />
       <ChatMessageContainer
         v-for="message in messages"
+        :id="message.id"
         :key="message.id"
         v-motion
         :message="message"
diff --git a/locales/en.json b/locales/en.json
index baf9ddf..b6a157d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -15,6 +15,14 @@
       "placeholder": "Use the arrow keys to navigate through the preset prompts. Press Enter to send the message.",
       "send": "Send new message",
       "sending": "Sending..."
+    },
+    "tooltip": {
+      "up": "Go to the previous message",
+      "down": "Go to the next message",
+      "send": "Send a new predefined message",
+      "clear": "Delete all messages",
+      "theme": "Change the theme",
+      "language": "Change the language"
     }
   },
   "command": {
diff --git a/locales/es.json b/locales/es.json
index da37c8a..e70077d 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -15,6 +15,14 @@
       "placeholder": "Use las flechas para navegar entre los prefacios de inmediato. Presione Entrar para enviar el mensaje.",
       "send": "Enviar un nuevo mensaje",
       "sending": "Enviando..."
+    },
+    "tooltip": {
+      "up": "Ir al mensaje anterior",
+      "down": "Ir al siguiente mensaje",
+      "send": "Enviar un nuevo mensaje predefinido",
+      "clear": "Eliminar todos los mensajes",
+      "theme": "Cambiar el tema",
+      "language": "Cambiar la language"
     }
   },
   "command": {
diff --git a/locales/fr.json b/locales/fr.json
index 346445b..51f7760 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -15,6 +15,14 @@
       "placeholder": "Utilisez les flèches pour naviguer parmi les prompts préfaits. Appuyez sur Entrer pour envoyer le message.",
       "send": "Envoyer un nouveau message",
       "sending": "Envoi en cours..."
+    },
+    "tooltip": {
+      "up": "Aller au message précédent",
+      "down": "Aller au message suivant",
+      "send": "Envoyer un nouveau message prédéfini",
+      "clear": "Supprimer tous les messages",
+      "theme": "Changer le thème",
+      "language": "Changer la langue"
     }
   },
   "command": {