i18n: ProjectListView traducido

src/views/ProjectListView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from "vue"
+import { useI18n } from "vue-i18n"
 import { useProjectsStore } from "@/stores/projects"
 import { IconFolder, IconExclamationCircle } from "@tabler/icons-vue"
 import {
@@ -11,6 +12,7 @@ import {
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
 
+const { t } = useI18n()
 const projects = useProjectsStore()
 
 const emit = defineEmits<{
@@ -35,13 +37,13 @@ function getStatusVariant(status?: string) {
   <div class="flex flex-col gap-6 px-4 lg:px-6">
     <div class="flex items-center justify-between">
       <div>
-        <h2 class="text-2xl font-bold tracking-tight">Proyectos</h2>
+        <h2 class="text-2xl font-bold tracking-tight">{{ t('projects.title') }}</h2>
         <p class="text-muted-foreground">
-          Proyectos asignados en KAPPA
+          {{ t('projects.subtitle') }}
         </p>
       </div>
       <Badge variant="outline" class="text-sm">
-        {{ projects.count }} proyecto{{ projects.count !== 1 ? 's' : '' }}
+        {{ t('projects.countLabel', { count: projects.count }) }}
       </Badge>
     </div>
 
@@ -58,22 +60,22 @@ function getStatusVariant(status?: string) {
     <!-- Error -->
     <div v-else-if="projects.error" class="flex flex-col items-center gap-3 py-12 text-center">
       <IconExclamationCircle class="size-10 text-destructive" />
-      <p class="text-lg font-medium">Error al cargar proyectos</p>
+      <p class="text-lg font-medium">{{ t('projects.loadError') }}</p>
       <p class="text-sm text-muted-foreground">{{ projects.error }}</p>
       <button
         class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
         @click="projects.fetchProjects()"
       >
-        Reintentar
+        {{ t('common.retry') }}
       </button>
     </div>
 
     <!-- Empty -->
     <div v-else-if="projects.count === 0" class="flex flex-col items-center gap-3 py-12 text-center">
       <IconFolder class="size-10 text-muted-foreground" />
-      <p class="text-lg font-medium">Sin proyectos asignados</p>
+      <p class="text-lg font-medium">{{ t('projects.emptyTitle') }}</p>
       <p class="text-sm text-muted-foreground">
-        No tienes proyectos activos en KAPPA.
+        {{ t('projects.emptyDescription') }}
       </p>
     </div>
 
@@ -91,14 +93,14 @@ function getStatusVariant(status?: string) {
         <CardHeader>
           <div class="flex items-start justify-between gap-2">
             <CardTitle class="text-base">
-              {{ p.initiative_name || p.name || `Proyecto ${p.id}` }}
+              {{ p.initiative_name || p.name || t('projects.unnamedFallback', { id: p.id }) }}
             </CardTitle>
             <Badge :variant="getStatusVariant(p.status)">
               {{ p.status || 'active' }}
             </Badge>
           </div>
           <CardDescription class="line-clamp-2">
-            {{ p.description || 'Sin descripción' }}
+            {{ p.description || t('projects.noDescription') }}
           </CardDescription>
           <div v-if="p.key" class="flex items-center gap-2 pt-1">
             <Badge variant="secondary" class="font-mono text-xs">