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

2026-01-14 18:59:54 +01:00 · 2025-09-03 18:40:47 +02:00
parent 8857b53854
commit e7b3e5fcc4
13 changed files with 139 additions and 86 deletions
--- a/app/components/chat/MessageContainer.vue
+++ b/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">
-          <ToolUses />
+        <div v-else-if="message.type === ChatType.HARDWARE">
+          <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 />
--- a/app/components/tool/Uses.vue
+++ b/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 { data: categories } = await useAsyncData('categories', async () => await queryCollection('usesCategories').all())
+const { t, locale } = useI18n()
+
+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">
-      <UsesList v-for="category in categories" :key="category.id" :title="category.name">
-        <UsesItem
-          v-for="(item, id) in items.filter(item => item.category === String(category.meta.title).toLowerCase())"
-          :key="id"
-          :item="item"
-        />
-      </UsesList>
+    <div v-if="items && categoryData" class="space-y-12 mt-4">
+      <USeparator
+        :label="locale === 'en' ? categoryData.name.en : locale === 'es' ? categoryData.name.es : categoryData.name.fr"
+        size="xs"
+      />
+      <ul class="space-y-8">
+        <li v-for="item in items" :key="item.id">
+          <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>
--- a/app/components/uses/Item.vue
+++ b/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>
--- a/app/components/uses/List.vue
+++ b/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>
--- a/content.config.ts
+++ b/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(),
--- a/content/uses/categories/1.hardware.json
+++ b/content/uses/categories/1.hardware.json
@@ -1,5 +1,5 @@
 {
-  "id": "hardware",
+  "slug": "hardware",
  "name": {
    "en": "Hardware",
    "fr": "Matériel",
--- a/content/uses/categories/2.software.json
+++ b/content/uses/categories/2.software.json
@@ -1,5 +1,5 @@
 {
-  "id": "software",
+  "slug": "software",
  "name": {
    "en": "Software",
    "fr": "Logiciel",
--- a/content/uses/categories/3.ide.json
+++ b/content/uses/categories/3.ide.json
@@ -1,5 +1,5 @@
 {
-  "id": "ide",
+  "slug": "ide",
  "name": {
    "en": "IDE & Font",
    "fr": "IDE & Police",
--- a/content/uses/categories/4.homelab.json
+++ b/content/uses/categories/4.homelab.json
@@ -1,5 +1,5 @@
 {
-  "id": "homelab",
+  "slug": "homelab",
  "name": {
    "en": "My personal HomeLab",
    "fr": "Mon HomeLab personnel",
--- a/locales/en.json
+++ b/locales/en.json
@@ -25,20 +25,32 @@
      "label": "Change theme",
      "prompt": "How can I change the theme?"
    },
-    "uses": {
-      "label": "View setup",
-      "prompt": "How can I view the setup of Arthur?"
+    "homelab": {
+      "label": "Homelab stuff",
+      "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",
--- a/locales/es.json
+++ b/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": {
--- a/locales/fr.json
+++ b/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": {
--- a/types/chat.ts
+++ b/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',
-        type: ChatType.USES,
-        fetchStates: [ChatFetchState.FETCHING, ChatFetchState.GENERATING],
+        prompt: 'command.hardware.prompt',
+        type: ChatType.HARDWARE,
+        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)),
  },