diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue index 7ceb507..41a3acf 100644 --- a/nuxt4/app/components/UserHeader.vue +++ b/nuxt4/app/components/UserHeader.vue @@ -21,21 +21,16 @@ -

{{ user?.email }}

+
+

{{ user?.email }}

- -
- + + + + {{ currentPresenceLabel }} +
+
const { user } = useAuthentik() const { isNight, toggleTheme } = useTheme() -const { status: presenceStatus, setStatus: setPresenceStatus, initActivityListeners } = usePresence() +const { status: presenceStatus, initActivityListeners } = usePresence() // Emits defineEmits(['edit-profile']) @@ -77,13 +72,17 @@ onMounted(() => { initActivityListeners() }) -// Estados disponibles para el selector -const presenceOptions = [ - { value: 'online', label: 'Disponible', icon: 'i-heroicons-check-circle' }, - { value: 'away', label: 'Ausente', icon: 'i-heroicons-clock' }, - { value: 'busy', label: 'Ocupado', icon: 'i-heroicons-minus-circle' }, - { value: 'offline', label: 'Desconectado', icon: 'i-heroicons-x-circle' } -] +// Mapeo de estados (solo para mostrar, no para cambiar) +const presenceMap = { + online: { label: 'Disponible', icon: 'i-heroicons-check-circle' }, + away: { label: 'Ausente', icon: 'i-heroicons-clock' }, + busy: { label: 'Ocupado', icon: 'i-heroicons-minus-circle' }, + offline: { label: 'Desconectado', icon: 'i-heroicons-x-circle' } +} + +// Estado actual (computed) +const currentPresenceLabel = computed(() => presenceMap[presenceStatus.value]?.label || 'Disponible') +const currentPresenceIcon = computed(() => presenceMap[presenceStatus.value]?.icon || 'i-heroicons-check-circle')