fix: Simplificar UI para usar Nuxt UI v3 basico (sin Pro)

app/components/app/ConnectionStatus.vue

@@ -1,23 +1,26 @@
 <template>
-  <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--wa-surface)] border border-[var(--wa-border)]">
+  <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-gray-700 border border-gray-600">
     <span
       class="w-2 h-2 rounded-full"
       :class="statusClass"
     />
-    <span class="text-sm text-[var(--wa-text-muted)]">
+    <span class="text-sm text-gray-300">
       {{ connectedCount }} / {{ totalCount }} conectadas
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-// TODO: Conectar con useInstances cuando esté implementado
-const connectedCount = ref(0)
-const totalCount = ref(0)
+const { instances } = useInstances()
+
+const connectedCount = computed(() =>
+  instances.value.filter(i => i.status === 'connected').length
+)
+const totalCount = computed(() => instances.value.length)
 
 const statusClass = computed(() => {
   if (totalCount.value === 0) return 'bg-gray-500'
-  if (connectedCount.value === totalCount.value) return 'bg-[var(--wa-green-light)]'
+  if (connectedCount.value === totalCount.value) return 'bg-green-500'
   if (connectedCount.value === 0) return 'bg-red-500'
   return 'bg-yellow-500'
 })

app/components/app/UserMenu.vue

@@ -1,36 +1,62 @@
 <template>
-  <UDropdownMenu v-if="user">
+  <div v-if="user" class="relative">
     <UButton
       variant="ghost"
-      class="rounded-full p-0"
+      color="neutral"
+      class="rounded-full p-1"
+      @click="menuOpen = !menuOpen"
     >
-      <UAvatar
-        :src="user.avatar"
-        :alt="user.name || user.username"
-        size="sm"
-      />
+      <div class="w-8 h-8 rounded-full bg-green-600 flex items-center justify-center text-white font-medium">
+        {{ initials }}
+      </div>
     </UButton>
 
-    <template #content>
-      <div class="px-3 py-2 border-b border-[var(--wa-border)]">
-        <p class="font-medium text-[var(--wa-text)]">{{ user.name || user.username }}</p>
-        <p class="text-sm text-[var(--wa-text-muted)]">{{ user.email }}</p>
+    <!-- Dropdown menu -->
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="menuOpen"
+        class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 py-1 z-50"
+      >
+        <div class="px-4 py-2 border-b border-gray-700">
+          <p class="font-medium text-white">{{ user.name || user.username }}</p>
+          <p class="text-sm text-gray-400">{{ user.email }}</p>
+        </div>
+        <button
+          class="w-full px-4 py-2 text-left text-gray-300 hover:bg-gray-700 flex items-center gap-2"
+          @click="logout"
+        >
+          <UIcon name="i-lucide-log-out" class="w-4 h-4" />
+          Cerrar Sesion
+        </button>
       </div>
-
-      <UDropdownMenuItem
-        icon="i-lucide-user"
-        label="Mi Perfil"
-        @click="goToProfile"
-      />
-      <UDropdownMenuItem
-        icon="i-lucide-log-out"
-        label="Cerrar Sesion"
-        @click="logout"
-      />
-    </template>
-  </UDropdownMenu>
+    </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
-const { user, logout, goToProfile } = useAuthentik()
+const { user, logout } = useAuthentik()
+const menuOpen = ref(false)
+
+const initials = computed(() => {
+  if (!user.value) return '?'
+  const name = user.value.name || user.value.username || ''
+  return name.substring(0, 2).toUpperCase()
+})
+
+// Close menu when clicking outside
+onMounted(() => {
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement
+    if (!target.closest('.relative')) {
+      menuOpen.value = false
+    }
+  })
+})
 </script>