Fix: Move composables and components into app/ directory

- Resolve SSR error "useAuthentik is not defined"
- Follow Nuxt 4 directory structure conventions
- When app/ exists, all app directories must be inside it
- This enables proper auto-import of composables

nuxt4/app/components/auth/ActionButtons.vue

@@ -0,0 +1,34 @@
+<template>
+  <UCard class="w-full">
+    <div class="flex flex-wrap gap-3">
+      <!-- Botón de perfil -->
+      <UButton
+        color="primary"
+        size="lg"
+        @click="goToProfile"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-user-circle" />
+        </template>
+        Ver Perfil
+      </UButton>
+
+      <!-- Botón de logout -->
+      <UButton
+        color="error"
+        size="lg"
+        variant="soft"
+        @click="logout"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-arrow-right-on-rectangle" />
+        </template>
+        Cerrar Sesión
+      </UButton>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { logout, goToProfile } = useAuthentik()
+</script>

nuxt4/app/components/auth/StatusBadges.vue

@@ -0,0 +1,46 @@
+<template>
+  <UCard class="w-full">
+    <div class="flex flex-wrap gap-2">
+      <!-- Estado de autenticación -->
+      <UBadge
+        :color="isAuthenticated ? 'success' : 'error'"
+        size="lg"
+        variant="subtle"
+      >
+        <template #leading>
+          <UIcon :name="isAuthenticated ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" />
+        </template>
+        {{ isAuthenticated ? 'Autenticado' : 'No autenticado' }}
+      </UBadge>
+
+      <!-- Estado de conexión -->
+      <UBadge
+        color="success"
+        size="lg"
+        variant="subtle"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-signal" />
+        </template>
+        Conectado
+      </UBadge>
+
+      <!-- Número de grupos -->
+      <UBadge
+        v-if="user"
+        color="primary"
+        size="lg"
+        variant="subtle"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-user-group" />
+        </template>
+        {{ user.groups.length }} {{ user.groups.length === 1 ? 'Grupo' : 'Grupos' }}
+      </UBadge>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user, isAuthenticated } = useAuthentik()
+</script>

nuxt4/app/components/auth/UserAvatar.vue

@@ -0,0 +1,20 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <div class="flex items-center gap-4">
+      <UAvatar
+        :src="user.avatar"
+        :alt="user.name || user.username"
+        size="xl"
+      />
+      <div class="flex-1">
+        <h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>

nuxt4/app/components/auth/UserMetadata.vue

@@ -0,0 +1,73 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <template #header>
+      <h3 class="font-semibold text-lg flex items-center gap-2">
+        <UIcon name="i-heroicons-information-circle" />
+        Metadatos del Usuario
+      </h3>
+    </template>
+
+    <div class="space-y-3">
+      <!-- Username -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
+          <p class="font-medium">{{ user.username }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
+          <p class="font-medium">{{ user.email }}</p>
+        </div>
+      </div>
+
+      <!-- Nombre completo -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
+          <p class="font-medium">{{ user.name || 'No especificado' }}</p>
+        </div>
+      </div>
+
+      <!-- UID -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
+          <p class="font-mono text-sm">{{ user.uid }}</p>
+        </div>
+      </div>
+
+      <!-- Grupos -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="group in user.groups"
+              :key="group"
+              color="primary"
+              variant="soft"
+            >
+              {{ group }}
+            </UBadge>
+            <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
+              Sin grupos
+            </UBadge>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>