From 4a3624b231d3e1f4f63f619c9e4013e66d2156a2 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 13:07:52 -0600
Subject: [PATCH] Add SessionStatusButton to navbar

- Add AuthSessionStatusButton to dashboard layout navbar
- Redesign button as compact icon button for navbar integration
- Button checks session status against Authentik in real-time
- Styled to match navbar aesthetic with hover effects
---
 .../app/components/auth/SessionStatusButton.vue | 17 ++++++++++-------
 nuxt4-app/app/layouts/dashboard.vue             |  1 +
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/nuxt4-app/app/components/auth/SessionStatusButton.vue b/nuxt4-app/app/components/auth/SessionStatusButton.vue
index 68b6465..c273f27 100644
--- a/nuxt4-app/app/components/auth/SessionStatusButton.vue
+++ b/nuxt4-app/app/components/auth/SessionStatusButton.vue
@@ -1,14 +1,17 @@
 <template>
   <UButton
-    color="info"
-    size="lg"
-    variant="soft"
+    color="neutral"
+    variant="ghost"
+    square
     @click="handleClick"
+    :ui="{
+      rounded: 'rounded-full',
+      padding: { sm: 'p-1.5' }
+    }"
+    class="relative hover:bg-gray-100/80 dark:hover:bg-gray-800/80 transition-all duration-300"
+    title="Verificar estado de sesión"
   >
-    <template #leading>
-      <UIcon name="i-heroicons-information-circle" />
-    </template>
-    Estado de Sesión
+    <UIcon name="i-heroicons-information-circle" class="size-5" />
   </UButton>
 </template>
 
diff --git a/nuxt4-app/app/layouts/dashboard.vue b/nuxt4-app/app/layouts/dashboard.vue
index 24a8cac..98d8397 100644
--- a/nuxt4-app/app/layouts/dashboard.vue
+++ b/nuxt4-app/app/layouts/dashboard.vue
@@ -16,6 +16,7 @@
             <template #trailing>
               <UBadge variant="subtle" label="Supabase" class="uppercase tracking-wide" />
               <UBadge variant="subtle" label="Solo lectura" class="uppercase tracking-wide" />
+              <AuthSessionStatusButton />
               <UserMenu />
             </template>
           </UDashboardNavbar>