feat: refactor uses handling and enhance category structure for improved organization and localization

app/components/chat/MessageContainer.vue

@@ -53,8 +53,17 @@ const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', {
         <div v-else-if="message.type === ChatType.THEME">
           <ToolTheme />
         </div>
-        <div v-else-if="message.type === ChatType.USES">
+        <div v-else-if="message.type === ChatType.HARDWARE">
-          <ToolUses />
+          <ToolUses category="hardware" />
+        </div>
+        <div v-else-if="message.type === ChatType.SOFTWARE">
+          <ToolUses category="software" />
+        </div>
+        <div v-else-if="message.type === ChatType.HOMELAB">
+          <ToolUses category="homelab" />
+        </div>
+        <div v-else-if="message.type === ChatType.IDE">
+          <ToolUses category="ide" />
         </div>
         <div v-else-if="message.type === ChatType.LANGUAGE">
           <ToolLanguage />

app/components/tool/Uses.vue

@@ -1,23 +1,37 @@
 <script lang="ts" setup>
-const { t } = useI18n()
+const props = defineProps({
+  category: {
+    type: String,
+    required: true,
+  },
+})
 
-const { data: items } = await useAsyncData('uses', async () => await queryCollection('uses').all())
+const { t, locale } = useI18n()
-const { data: categories } = await useAsyncData('categories', async () => await queryCollection('usesCategories').all())
+
+const { data: items } = await useAsyncData(`uses-${props.category}`, async () => await queryCollection('uses').where('category', '=', props.category).all())
+const { data: categoryData } = await useAsyncData(`category-${props.category}`, async () => await queryCollection('usesCategories').where('slug', '=', props.category).first())
 </script>
 
 <template>
   <section>
     <div class="prose dark:prose-invert">
-      <p>{{ t('uses') }}</p>
+      <p>{{ t(`uses.${props.category}`) }}</p>
     </div>
-    <div v-if="items" class="space-y-12 mt-4">
+    <div v-if="items && categoryData" class="space-y-12 mt-4">
-      <UsesList v-for="category in categories" :key="category.id" :title="category.name">
+      <USeparator
-        <UsesItem
+        :label="locale === 'en' ? categoryData.name.en : locale === 'es' ? categoryData.name.es : categoryData.name.fr"
-          v-for="(item, id) in items.filter(item => item.category === String(category.meta.title).toLowerCase())"
+        size="xs"
-          :key="id"
+      />
-          :item="item"
+      <ul class="space-y-8">
-        />
+        <li v-for="item in items" :key="item.id">
-      </UsesList>
+          <p class="text-base font-semibold">
+            {{ item.name }}
+          </p>
+          <p class="text-sm">
+            {{ locale === 'en' ? item.description.en : locale === 'es' ? item.description.es : item.description.fr }}
+          </p>
+        </li>
+      </ul>
     </div>
   </section>
 </template>

app/components/uses/Item.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import type { UsesItem } from '#components'
-
-defineProps({
-  item: {
-    type: Object as PropType<typeof UsesItem>,
-    required: true,
-  },
-})
-
-const { locale } = useI18n()
-</script>
-
-<template>
-  <li class="prose dark:prose-invert">
-    <p class="text-base font-semibold">
-      {{ item.name }}
-    </p>
-    <p class="text-sm">
-      {{ locale === 'en' ? item.description.en : locale === 'es' ? item.description.es : item.description.fr }}
-    </p>
-  </li>
-</template>

app/components/uses/List.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-defineProps({
-  title: {
-    type: Object as PropType<{ en: string, fr: string, es: string }>,
-    required: true,
-  },
-})
-
-const { locale } = useI18n()
-</script>
-
-<template>
-  <div class="space-y-8">
-    <USeparator
-      :label="locale === 'en' ? title.en : locale === 'es' ? title.es : title.fr"
-      size="xs"
-    />
-    <ul class="space-y-8">
-      <slot />
-    </ul>
-  </div>
-</template>

content.config.ts

@@ -32,7 +32,7 @@ export const collections = {
     type: 'data',
     source: 'uses/categories/*.json',
     schema: z.object({
-      id: z.string(),
+      slug: z.string(),
       name: z.object({
         en: z.string(),
         fr: z.string(),

content/uses/categories/1.hardware.json

@@ -1,5 +1,5 @@
 {
-  "id": "hardware",
+  "slug": "hardware",
   "name": {
     "en": "Hardware",
     "fr": "Matériel",

content/uses/categories/2.software.json

@@ -1,5 +1,5 @@
 {
-  "id": "software",
+  "slug": "software",
   "name": {
     "en": "Software",
     "fr": "Logiciel",

content/uses/categories/3.ide.json

@@ -1,5 +1,5 @@
 {
-  "id": "ide",
+  "slug": "ide",
   "name": {
     "en": "IDE & Font",
     "fr": "IDE & Police",

content/uses/categories/4.homelab.json

@@ -1,5 +1,5 @@
 {
-  "id": "homelab",
+  "slug": "homelab",
   "name": {
     "en": "My personal HomeLab",
     "fr": "Mon HomeLab personnel",

locales/en.json

@@ -25,20 +25,32 @@
       "label": "Change theme",
       "prompt": "How can I change the theme?"
     },
-    "uses": {
+    "homelab": {
-      "label": "View setup",
+      "label": "Homelab stuff",
-      "prompt": "How can I view the setup of Arthur?"
+      "prompt": "How can I view the homelab of Arthur?"
+    },
+    "hardware": {
+      "label": "Hardware setup",
+      "prompt": "How can I view the hardware setup of Arthur?"
+    },
+    "software": {
+      "label": "Softwares and Apps",
+      "prompt": "Which softwares and apps does Arthur use?"
+    },
+    "ide": {
+      "label": "IDEs and Font",
+      "prompt": "Tell me more about the IDE and font that Arthur uses?"
     },
     "stats": {
-      "label": "View statistics",
+      "label": "Dev Statistics",
       "prompt": "How can I view the statistics concerning Arthur?"
     },
     "weather": {
-      "label": "View weather",
+      "label": "Weather",
       "prompt": "How can I view the weather conditions near Arthur?"
     },
     "location": {
-      "label": "View location",
+      "label": "Location",
       "prompt": "How can I view the location of Arthur?"
     },
     "language": {
@@ -125,7 +137,12 @@
       "secret": "Secret Project"
     },
     "location": "I'm currently based in {location}. See below for more details.",
-    "uses": "Here is a comprehensive list of all the software I use, gadgets I love, and other things I recommend.",
+    "uses": {
+      "hardware": "Here is a list of hardware equipment that Arthur uses",
+      "software": "Here is the list of software and applications that Arthur uses",
+      "homelab": "Here is a list of equipment in Arthur's Homelab",
+      "ide": "Here is the list of IDEs and the font that Arthur uses"
+    },
     "contact": "There are different ways to contact me. Here is a list:",
     "duplicated": {
       "title": "⚠️ I detected duplicated messages",

locales/es.json

@@ -25,10 +25,6 @@
       "label": "Cambiar tema",
       "prompt": "¿Cómo puedo cambiar el tema?"
     },
-    "uses": {
-      "label": "Ver la configuración",
-      "prompt": "¿Cómo puedo ver la configuración de Arthur?"
-    },
     "stats": {
       "label": "Ver estadísticas",
       "prompt": "¿Cómo puedo ver las estadísticas sobre Arthur?"
@@ -88,6 +84,22 @@
     "credits": {
       "label": "Créditos",
       "prompt": "¿Cómo se ha hecho este chat?"
+    },
+    "hardware": {
+      "label": "Hardware",
+      "prompt": "¿Cómo puedo ver la configuración de hardware de Arthur?"
+    },
+    "homelab": {
+      "label": "Cosas de Homelab",
+      "prompt": "¿Cómo puedo ver el Homelab de Arthur?"
+    },
+    "ide": {
+      "label": "IDEs y fuente",
+      "prompt": "¿Cuéntame más sobre el IDE y la fuente que usa Arthur?"
+    },
+    "software": {
+      "label": "Softwares y aplicaciones",
+      "prompt": "¿Qué software y aplicaciones usa Arthur?"
     }
   },
   "chat": {
@@ -125,7 +137,6 @@
       "secret": "Proyecto Secreto"
     },
     "location": "Actualmente estoy basado en {location}. Consulta más detalles a continuación.",
-    "uses": "Aquí hay una gran lista de todo el software que uso, gadgets que amo y otras cosas que recomiendo.",
     "contact": "Existen diferentes formas de contactarme. Aquí hay una lista:",
     "duplicated": {
       "title": "⚠️ He detectado mensajes duplicados",
@@ -159,6 +170,12 @@
       "high": "Alto",
       "humidity": "Humedad",
       "wind": "Viento"
+    },
+    "uses": {
+      "homelab": "Aquí hay una lista de equipos en Homelab de Arthur",
+      "hardware": "Aquí hay una lista de equipos de hardware que usa Arthur",
+      "software": "Aquí está la lista de software y aplicaciones que Arthur usa",
+      "ide": "Aquí está la lista de IDES y la fuente que usa Arthur"
     }
   },
   "error": {

locales/fr.json

@@ -25,10 +25,6 @@
       "label": "Changer de thème",
       "prompt": "Comment puis-je changer le thème ?"
     },
-    "uses": {
-      "label": "Voir la configuration",
-      "prompt": "Comment puis-je voir la configuration d'Arthur ?"
-    },
     "stats": {
       "label": "Voir les statistiques",
       "prompt": "Comment puis-je voir les statistiques concernant Arthur ?"
@@ -88,6 +84,22 @@
     "credits": {
       "label": "Crédits",
       "prompt": "Comment est réalisé ce chat ?"
+    },
+    "hardware": {
+      "label": "Hardware",
+      "prompt": "Comment puis-je afficher la configuration matérielle d'Arthur?"
+    },
+    "homelab": {
+      "label": "Homelab stuff",
+      "prompt": "Comment puis-je voir le Homelab d'Arthur?"
+    },
+    "ide": {
+      "label": "Ide et police",
+      "prompt": "Dites-moi plus sur l'IDE et la police qu'Arthur utilise?"
+    },
+    "software": {
+      "label": "Logiciels et applications",
+      "prompt": "Quels logiciels et applications Arthur utilise-t-il?"
     }
   },
   "chat": {
@@ -125,7 +137,6 @@
       "secret": "Projet Secret"
     },
     "location": "Je suis actuellement basé à {location}. Voir ci-dessous pour plus de détails.",
-    "uses": "Voici une grande liste de tous mes logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande.",
     "contact": "Il existe différentes façons de me contacter. Voici une liste :",
     "duplicated": {
       "title": "⚠️ J'ai détecté des messages dupliqués",
@@ -159,6 +170,12 @@
       "high": "Haut",
       "humidity": "Humidité",
       "wind": "Vent"
+    },
+    "uses": {
+      "homelab": "Voici une liste d'équipements dans HomeLab d'Arthur",
+      "hardware": "Voici une liste d'équipements matériels qu'Arthur utilise",
+      "ide": "Voici la liste des ides et la police qu'Arthur utilise",
+      "software": "Voici la liste des logiciels et applications qu'Arthur utilise"
     }
   },
   "error": {

types/chat.ts

@@ -10,7 +10,10 @@ export enum ChatType {
   EXPERIENCES = 'experiences',
   SKILLS = 'skills',
   HOBBIES = 'hobbies',
-  USES = 'uses',
+  IDE = 'ide',
+  HARDWARE = 'hardware',
+  SOFTWARE = 'software',
+  HOMELAB = 'homelab',
   STATUS = 'status',
   CREDITS = 'credits',
   CONTACT = 'contact',
@@ -176,11 +179,32 @@ export const ChatMessages = [
         fetchStates: [ChatFetchState.CHECKING],
       },
       {
-        label: 'command.uses.label',
+        label: 'command.hardware.label',
         icon: 'i-ph-chalkboard-simple-duotone',
-        prompt: 'command.uses.prompt',
+        prompt: 'command.hardware.prompt',
-        type: ChatType.USES,
+        type: ChatType.HARDWARE,
-        fetchStates: [ChatFetchState.FETCHING, ChatFetchState.GENERATING],
+        fetchStates: [ChatFetchState.FETCHING],
+      },
+      {
+        label: 'command.software.label',
+        icon: 'i-ph-chalkboard-simple-duotone',
+        prompt: 'command.software.prompt',
+        type: ChatType.SOFTWARE,
+        fetchStates: [ChatFetchState.FETCHING],
+      },
+      {
+        label: 'command.homelab.label',
+        icon: 'i-ph-chalkboard-simple-duotone',
+        prompt: 'command.homelab.prompt',
+        type: ChatType.HOMELAB,
+        fetchStates: [ChatFetchState.FETCHING],
+      },
+      {
+        label: 'command.ide.label',
+        icon: 'i-ph-chalkboard-simple-duotone',
+        prompt: 'command.ide.prompt',
+        type: ChatType.IDE,
+        fetchStates: [ChatFetchState.FETCHING],
       },
     ].sort((a, b) => a.label.localeCompare(b.label)),
   },