Feature: Agregar filtros por grupos en lista de aplicaciones

- Toggle buttons en header para filtrar por grupos
- Si no hay grupos seleccionados, se muestran todas las apps
- Grupos de apps ahora aparecen como subtítulo con chips compactos
- UI mejorada con estado activo en botones de filtro
- Mensaje cuando no hay apps en grupos seleccionados

nuxt4/app/components/auth/ApplicationsList.vue

@@ -1,14 +1,30 @@
 <template>
   <UCard>
     <template #header>
-      <div class="flex items-center justify-between">
-        <h3 class="font-semibold text-lg flex items-center gap-2">
-          <UIcon name="i-heroicons-squares-2x2" />
-          Mis Aplicaciones
-        </h3>
-        <UBadge v-if="applications.length > 0" color="primary" variant="soft">
-          {{ applications.length }}
-        </UBadge>
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <h3 class="font-semibold text-lg flex items-center gap-2">
+            <UIcon name="i-heroicons-squares-2x2" />
+            Mis Aplicaciones
+          </h3>
+          <UBadge v-if="filteredApplications.length > 0" color="primary" variant="soft">
+            {{ filteredApplications.length }}
+          </UBadge>
+        </div>
+
+        <!-- Filtros por grupos -->
+        <div v-if="availableGroups.length > 0" class="flex flex-wrap gap-2">
+          <UButton
+            v-for="group in availableGroups"
+            :key="group"
+            size="sm"
+            :color="selectedGroups.includes(group) ? 'primary' : 'neutral'"
+            :variant="selectedGroups.includes(group) ? 'soft' : 'ghost'"
+            @click="toggleGroup(group)"
+          >
+            {{ group }}
+          </UButton>
+        </div>
       </div>
     </template>
 
@@ -27,9 +43,14 @@
       <p class="text-gray-600 dark:text-gray-400">No tienes aplicaciones disponibles</p>
     </div>
 
+    <div v-else-if="filteredApplications.length === 0" class="text-center py-8">
+      <UIcon name="i-heroicons-funnel" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+      <p class="text-gray-600 dark:text-gray-400">No hay aplicaciones en los grupos seleccionados</p>
+    </div>
+
     <div v-else class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
       <a
-        v-for="app in applications"
+        v-for="app in filteredApplications"
         :key="app.pk"
         :href="app.launchUrl"
         :target="app.openInNewTab ? '_blank' : '_self'"
@@ -51,7 +72,7 @@
 
           <div class="flex-1 min-w-0">
             <div class="flex items-start justify-between gap-2">
-              <h4 class="font-semibold text-sm truncate group-hover:text-primary transition-colors">
+              <h4 class="font-semibold text-sm group-hover:text-primary transition-colors">
                 {{ app.name }}
               </h4>
               <UIcon
@@ -61,11 +82,8 @@
               />
             </div>
 
-            <p v-if="app.description" class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
-              {{ app.description }}
-            </p>
-
-            <div v-if="app.group" class="mt-2 flex flex-wrap gap-1">
+            <!-- Grupos como subtítulo con chips compactos -->
+            <div v-if="app.group" class="mt-1 flex flex-wrap gap-1">
               <UBadge
                 v-for="group in app.group.split(',')"
                 :key="group"
@@ -76,6 +94,10 @@
                 {{ group.trim() }}
               </UBadge>
             </div>
+
+            <p v-if="app.description" class="text-xs text-gray-500 dark:text-gray-400 mt-2 line-clamp-2">
+              {{ app.description }}
+            </p>
           </div>
         </div>
       </a>
@@ -100,6 +122,49 @@ const { data: applications, pending, error, refresh } = await useFetch<Applicati
   default: () => []
 })
 
+// Estado de filtros
+const selectedGroups = ref<string[]>([])
+
+// Extraer todos los grupos únicos de las aplicaciones
+const availableGroups = computed(() => {
+  const groups = new Set<string>()
+  applications.value.forEach(app => {
+    if (app.group) {
+      app.group.split(',').forEach(group => {
+        groups.add(group.trim())
+      })
+    }
+  })
+  return Array.from(groups).sort()
+})
+
+// Filtrar aplicaciones según grupos seleccionados
+const filteredApplications = computed(() => {
+  // Si no hay grupos seleccionados, mostrar todas
+  if (selectedGroups.value.length === 0) {
+    return applications.value
+  }
+
+  // Filtrar apps que contengan al menos uno de los grupos seleccionados
+  return applications.value.filter(app => {
+    if (!app.group) return false
+    const appGroups = app.group.split(',').map(g => g.trim())
+    return selectedGroups.value.some(selectedGroup =>
+      appGroups.includes(selectedGroup)
+    )
+  })
+})
+
+// Toggle de selección de grupos
+const toggleGroup = (group: string) => {
+  const index = selectedGroups.value.indexOf(group)
+  if (index === -1) {
+    selectedGroups.value.push(group)
+  } else {
+    selectedGroups.value.splice(index, 1)
+  }
+}
+
 // Refrescar automáticamente cada 5 minutos
 const refreshInterval = setInterval(() => {
   refresh()