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