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/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>