Feature: Agregar lista de aplicaciones disponibles para el usuario

- Nuevo endpoint /api/authentik/applications para obtener apps del usuario
- Componente ApplicationsList que muestra apps en grid responsivo
- Filtrado por grupos del usuario (basado en headers de Authentik)
- UI con iconos, badges de grupos y redirección a cada app
- Refresh automático cada 5 minutos

nuxt4/app/app.vue

@@ -14,11 +14,16 @@
         </div>
 
         <!-- Componentes de autenticación -->
-        <div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
+        <div v-if="isAuthenticated" class="space-y-6">
-          <!-- Columna izquierda -->
+          <!-- Lista de aplicaciones (ancho completo) -->
-          <div class="space-y-6">
+          <AuthApplicationsList />
-            <!-- Avatar y datos básicos -->
+
-            <AuthUserAvatar />
+          <!-- Grid de 2 columnas para el resto -->
+          <div class="grid gap-6 lg:grid-cols-2">
+            <!-- Columna izquierda -->
+            <div class="space-y-6">
+              <!-- Avatar y datos básicos -->
+              <AuthUserAvatar />
 
             <!-- Botones de acción individuales -->
             <UCard class="w-full">
@@ -86,6 +91,7 @@
               </div>
             </UCard>
           </div>
+          </div>
         </div>
 
         <!-- Mensaje si no está autenticado -->

nuxt4/app/components/auth/ApplicationsList.vue

@@ -0,0 +1,112 @@
+<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>
+    </template>
+
+    <div v-if="pending" class="flex justify-center py-8">
+      <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary" />
+    </div>
+
+    <div v-else-if="error" class="text-center py-8">
+      <UIcon name="i-heroicons-exclamation-triangle" class="w-12 h-12 mx-auto mb-4 text-error" />
+      <p class="text-error font-semibold">Error al cargar aplicaciones</p>
+      <p class="text-sm text-gray-500 mt-2">{{ error.message }}</p>
+    </div>
+
+    <div v-else-if="applications.length === 0" class="text-center py-8">
+      <UIcon name="i-heroicons-inbox" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+      <p class="text-gray-600 dark:text-gray-400">No tienes aplicaciones disponibles</p>
+    </div>
+
+    <div v-else class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      <a
+        v-for="app in applications"
+        :key="app.pk"
+        :href="app.launchUrl"
+        :target="app.openInNewTab ? '_blank' : '_self'"
+        class="group block p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-primary hover:bg-primary/5 transition-all duration-200"
+      >
+        <div class="flex items-start gap-3">
+          <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+            <UIcon
+              v-if="app.icon"
+              :name="app.icon"
+              class="w-6 h-6 text-primary"
+            />
+            <UIcon
+              v-else
+              name="i-heroicons-cube"
+              class="w-6 h-6 text-primary"
+            />
+          </div>
+
+          <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">
+                {{ app.name }}
+              </h4>
+              <UIcon
+                v-if="app.openInNewTab"
+                name="i-heroicons-arrow-top-right-on-square"
+                class="w-4 h-4 text-gray-400 flex-shrink-0"
+              />
+            </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">
+              <UBadge
+                v-for="group in app.group.split(',')"
+                :key="group"
+                size="xs"
+                color="neutral"
+                variant="soft"
+              >
+                {{ group.trim() }}
+              </UBadge>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Application {
+  pk: string
+  name: string
+  slug: string
+  launchUrl: string
+  description?: string
+  icon?: string
+  publisher?: string
+  group?: string
+  openInNewTab: boolean
+}
+
+const { data: applications, pending, error, refresh } = await useFetch<Application[]>('/api/authentik/applications', {
+  default: () => []
+})
+
+// Refrescar automáticamente cada 5 minutos
+const refreshInterval = setInterval(() => {
+  refresh()
+}, 5 * 60 * 1000)
+
+// Limpiar interval cuando el componente se desmonte
+onUnmounted(() => {
+  clearInterval(refreshInterval)
+})
+</script>

nuxt4/server/api/authentik/applications.ts

@@ -0,0 +1,77 @@
+/**
+ * API endpoint para obtener las aplicaciones de Authentik
+ * Devuelve todas las aplicaciones disponibles
+ */
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  const headers = getRequestHeaders(event)
+
+  // Obtener el username desde los headers de Authentik
+  const username = headers['x-authentik-username']
+  const userGroups = headers['x-authentik-groups']?.split('|').filter(g => g.trim()) || []
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'Usuario no autenticado'
+    })
+  }
+
+  // Obtener la URL y token de Authentik
+  const authentikUrl = config.authentikApiUrl || config.public.authentikUrl
+  const authentikToken = config.authentikApiToken
+
+  if (!authentikToken) {
+    throw createError({
+      statusCode: 500,
+      message: 'Token de Authentik no configurado'
+    })
+  }
+
+  try {
+    const response = await $fetch(`${authentikUrl}/api/v3/core/applications/`, {
+      headers: {
+        'Authorization': `Bearer ${authentikToken}`,
+        'Content-Type': 'application/json'
+      }
+    })
+
+    const apps = response as any
+
+    // Filtrar aplicaciones basándose en grupos (si están definidos)
+    // Si la app no tiene grupos requeridos, está disponible para todos
+    const filteredApps = apps.results.filter((app: any) => {
+      // Si no hay launch_url, probablemente no sea una app accesible
+      if (!app.launch_url) return false
+
+      // Si no tiene grupos definidos, está disponible para todos
+      if (!app.group || app.group.trim() === '') return true
+
+      // Si el usuario es superuser, tiene acceso a todo
+      if (headers['x-authentik-is-superuser'] === 'true') return true
+
+      // Verificar si el usuario tiene alguno de los grupos requeridos
+      const requiredGroups = app.group.split(',').map((g: string) => g.trim())
+      return requiredGroups.some((reqGroup: string) => userGroups.includes(reqGroup))
+    })
+
+    // Mapear a un formato más simple
+    return filteredApps.map((app: any) => ({
+      pk: app.pk,
+      name: app.name,
+      slug: app.slug,
+      launchUrl: app.launch_url,
+      description: app.meta_description,
+      icon: app.meta_icon,
+      publisher: app.meta_publisher,
+      group: app.group,
+      openInNewTab: app.open_in_new_tab
+    }))
+  } catch (error: any) {
+    console.error('Error al obtener aplicaciones de Authentik:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      message: error.message || 'Error al obtener las aplicaciones'
+    })
+  }
+})