Add Authentik integration UI components

- Create useAuthentik composable to read headers
- Add UserAvatar component with avatar and user info
- Add StatusBadges for auth/connection status
- Add ActionButtons for logout and profile
- Add UserMetadata component with full user details
- Integrate all components in main page
- Use Nuxt UI components throughout

nuxt4/composables/useAuthentik.ts

@@ -0,0 +1,51 @@
+/**
+ * Composable para leer información de usuario de Authentik
+ * Los headers son inyectados por Authentik Proxy Outpost
+ */
+export const useAuthentik = () => {
+  const headers = useRequestHeaders()
+
+  const user = computed(() => {
+    const username = headers['x-authentik-username']
+    const email = headers['x-authentik-email']
+    const name = headers['x-authentik-name']
+    const groups = headers['x-authentik-groups']
+    const uid = headers['x-authentik-uid']
+
+    // Si no hay username, el usuario no está autenticado
+    if (!username) {
+      return null
+    }
+
+    return {
+      username,
+      email,
+      name,
+      groups: groups ? groups.split('|') : [],
+      uid,
+      // Generar avatar URL usando UI Avatars
+      avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
+    }
+  })
+
+  const isAuthenticated = computed(() => !!user.value)
+
+  const logout = () => {
+    // Authentik Proxy Outpost maneja el logout
+    // Redirigir a /outpost.goauthentik.io/sign_out
+    navigateTo('/outpost.goauthentik.io/sign_out', { external: true })
+  }
+
+  const goToProfile = () => {
+    // URL de perfil de Authentik
+    const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
+    navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
+  }
+
+  return {
+    user,
+    isAuthenticated,
+    logout,
+    goToProfile
+  }
+}