feat: enhance chat UI and add location component with images

app/components/chat/CommandPalette.vue

@@ -49,16 +49,16 @@ const commandPaletteUi = {
       <UModal v-model:open="openMessageModal" :ui="modalUi">
         <UButton
           :label="loading ? t('cmd.sending') : t('cmd.send')"
-          variant="solid"
+          variant="outline"
           color="neutral"
           size="xl"
           icon="i-ph-paper-plane-tilt-duotone"
-          class="rounded-full"
+          class="rounded-full cursor-pointer"
           :disabled="loading"
         >
           <template #trailing>
-            <UKbd value="meta" />
-            <UKbd value="enter" />
+            <UKbd value="meta" color="neutral" />
+            <UKbd value="enter" color="neutral" />
           </template>
         </UButton>
 
@@ -106,7 +106,7 @@ const commandPaletteUi = {
       >
         <UButton
           :label="t('clear.button')"
-          variant="solid"
+          variant="subtle"
           color="error"
           leading-icon="i-ph-trash-duotone"
           size="xl"
@@ -114,8 +114,8 @@ const commandPaletteUi = {
           :disabled="storeMessages.length === 0"
         >
           <template #trailing>
-            <UKbd value="meta" />
-            <UKbd value="D" />
+            <UKbd value="meta" color="error" />
+            <UKbd value="D" color="error" />
           </template>
         </UButton>
 

app/components/chat/MessageContainer.vue

@@ -32,7 +32,7 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
       {{ formatted }}
     </div>
   </div>
-  <div v-else>
+  <div v-else class="group space-y-2">
     <div class="flex flex-col-reverse gap-4 items-start md:flex-row-reverse">
       <UCard
         v-if="message.state === ChatState.LOADING && message.fetchStates && message.fetchStates.length > 0"
@@ -69,6 +69,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.WEATHER">
           <ToolWeather />
         </div>
+        <div v-else-if="message.type === ChatType.LOCATION">
+          <ToolLocation />
+        </div>
         <div v-else>
           {{ message }}
         </div>

app/components/tool/Activity.vue

@@ -93,7 +93,7 @@ const getActivity = computed(() => {
       </UTooltip>
     </div>
     <ClientOnly>
-      <UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex gap-8 items-center' }">
+      <UCard v-if="getActivity" variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex gap-8 items-center' }">
         <UIcon
           :name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
           size="64"
@@ -150,7 +150,7 @@ const getActivity = computed(() => {
 {
   "en": {
     "offline": "I'm currently offline. Come back later to see what I'm working on. {maths}",
-    "working": "I'm actually online!",
+    "working": "I'm actually online! Check what I'm working on just below.",
     "idling": "I'm idling on my computer with {editor} running in background.",
     "maths": "I am probably doing some maths or sleeping.",
     "tooltip": {
@@ -163,7 +163,7 @@ const getActivity = computed(() => {
   },
   "fr": {
     "offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille. {maths}",
-    "working": "Je travaille actuellement en ligne !",
+    "working": "Je suis actuellement en ligne ! Découvrez ce sur quoi je travaille juste en dessous.",
     "idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
     "maths": "Je suis probablement en train de faire des maths ou en train de dormir.",
     "tooltip": {
@@ -176,7 +176,7 @@ const getActivity = computed(() => {
   },
   "es": {
     "offline": "Ahora mismo estoy desconectado. Vuelve más tarde para ver en lo que estoy trabajando. {maths}",
-    "working": "Estoy trabajando en línea.",
+    "working": "Estoy trabajando en línea. ¡Mira lo que estoy haciendo justo debajo!",
     "idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
     "maths": "Estoy probablemente haciendo matemáticas o durmiendo.",
     "tooltip": {

app/components/tool/Contact.vue

@@ -19,7 +19,7 @@ const { t } = useI18n({ useScope: 'local' })
           variant="subtle"
           color="neutral"
           target="_blank"
-          class=""
+          class="m-1 shadow-sm"
           :href="social.to"
           :aria-label="social.label"
         />

app/components/tool/Language.vue

@@ -35,7 +35,7 @@ defineShortcuts({
       </ul>
     </div>
     <ClientOnly>
-      <UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex justify-between items-center gap-2' }">
+      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center gap-2' }">
         <p class="block">
           {{ t('change') }}
         </p>

app/components/tool/Location.vue

@@ -1,13 +1,35 @@
 <script lang="ts" setup>
-
+useI18n({ useScope: 'local' })
 </script>
 
 <template>
-  <div>
-    <!-- TODO: Implement location component -->
-  </div>
+  <section>
+    <div class="prose dark:prose-invert mb-4">
+      <i18n-t keypath="location" tag="p">
+        <template #location>
+          <strong>Paris, France 🇫🇷</strong>
+        </template>
+      </i18n-t>
+    </div>
+    <div class="md:max-w-2/3 shadow-lg rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative z-10">
+      <NuxtImg class="rounded-xl" src="/location.png" />
+      <div class="size-14 rounded-full border-2 border-black absolute z-50 top-2/5 -translate-y-1/2 left-1/5 -translate-x-1/2 animate-bounce">
+        <NuxtImg src="/arthur pro.webp" class="rounded-full" />
+      </div>
+    </div>
+  </section>
 </template>
 
-<style lang="scss">
-
-</style>
+<i18n lang="json">
+{
+  "en": {
+    "location": "I'm currently based in {location}. See below for more details."
+  },
+  "fr": {
+    "location": "Je suis actuellement basé à {location}. Voir ci-dessous pour plus de détails."
+  },
+  "es": {
+    "location": "Actualmente estoy basado en {location}. Consulta más detalles a continuación."
+  }
+}
+</i18n>

app/components/tool/Theme.vue

@@ -75,7 +75,7 @@ defineShortcuts({
       </ul>
     </div>
     <ClientOnly>
-      <UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex justify-between items-center' }">
+      <UCard variant="outline" class="md:max-w-1/2 m-1 shadow-sm" :ui="{ body: 'flex justify-between items-center' }">
         <div class="flex items-center gap-2">
           <UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
           <UIcon v-else name="i-ph-sun-duotone" size="24" />

app/components/tool/Weather.vue

@@ -8,7 +8,7 @@ const { data: weather } = await useAsyncData<Weather>('weather', () =>
 </script>
 
 <template>
-  <UCard v-if="weather" variant="outline" class="md:max-w-2/3">
+  <UCard v-if="weather" variant="outline" class="md:max-w-2/3 m-1 shadow-sm">
     <template #header>
       <div class="flex gap-4 items-center">
         <UIcon name="i-ph-cloud-duotone" size="24" />