feat: add Hobbies section with dynamic content; update localization for hobbies in English, Spanish, and French

app/components/chat/MessageContainer.vue

@@ -92,6 +92,9 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.WRITINGS">
           <ToolWritings />
         </div>
+        <div v-else-if="message.type === ChatType.HOBBIES">
+          <ToolHobbies />
+        </div>
         <div v-else>
           {{ message }}
         </div>

app/components/tool/Contact.vue

@@ -6,24 +6,23 @@ const { t } = useI18n()
 
 <template>
   <section>
-    <div>
-      <p class="prose dark:prose-invert">
-        {{ t('tool.contact') }}
-      </p>
-      <div class="flex gap-2 flex-wrap my-2">
-        <UButton
-          v-for="social in socials"
-          :key="social.label"
-          :icon="social.icon"
-          :label="social.label"
-          variant="subtle"
-          color="neutral"
-          target="_blank"
-          class="m-1 shadow-sm bg-white dark:bg-neutral-900"
-          :href="social.to"
-          :aria-label="social.label"
-        />
-      </div>
+    <p class="prose dark:prose-invert">
+      {{ t('tool.contact') }}
+    </p>
+    <div class="flex gap-2 flex-wrap my-2">
+      <UButton
+        v-for="social in socials"
+        :key="social.label"
+        :icon="social.icon"
+        :label="social.label"
+        variant="subtle"
+        color="neutral"
+        target="_blank"
+        size="xl"
+        class="m-1 shadow-sm bg-white dark:bg-neutral-900"
+        :href="social.to"
+        :aria-label="social.label"
+      />
     </div>
   </section>
 </template>

app/components/tool/Hobbies.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+</script>
+
+<template>
+  <section>
+    <p class="prose dark:prose-invert">
+      {{ t('tool.hobbies') }}
+    </p>
+  </section>
+</template>