carousel, agenda arquivados, agenda cor, agenda arquivados, grupos pacientes, pacientes arquivados - desativados, sessoes verificadas, ajuste notificações, Prontuario, Agenda Animation, Menu Profile, bagdes Profile, Offline

src/layout/AppRail.vue

@@ -1,19 +1,15 @@
 <!-- src/layout/AppRail.vue — Mini icon rail (Layout 2) -->
 <script setup>
 import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
-import Popover from 'primevue/popover'
-import Button  from 'primevue/button'
+import { useMenuStore }       from '@/stores/menuStore'
+import { useLayout }          from './composables/layout'
+import { sessionUser }        from '@/app/session'
 
-import { useMenuStore }    from '@/stores/menuStore'
-import { useLayout }       from './composables/layout'
-import { sessionUser }     from '@/app/session'
-import { supabase }        from '@/lib/supabase/client'
+import AppMenuFooterPanel from './AppMenuFooterPanel.vue'
 
 const menuStore = useMenuStore()
-const { layoutConfig, layoutState, isDesktop } = useLayout()
-const router = useRouter()
+const { layoutState } = useLayout()
 
 // ── Seções do rail (derivadas do model) ─────────────────────
 const railSections = computed(() => {
@@ -38,7 +34,6 @@ const initials  = computed(() => {
   const b = parts.length > 1 ? parts[parts.length - 1][0] : ''
   return (a + b).toUpperCase()
 })
-
 const userName = computed(() => sessionUser.value?.user_metadata?.full_name || sessionUser.value?.email || 'Conta')
 
 // ── Início (fixo) ────────────────────────────────────────────
@@ -74,20 +69,9 @@ function isActiveSectionOrChild (section) {
   })
 }
 
-// ── Popover do usuário (rodapé) ───────────────────────────────
-const userPop = ref(null)
-function toggleUserPop (e) { userPop.value?.toggle(e) }
-
-function goTo (path) {
-  try { userPop.value?.hide() } catch {}
-  router.push(path)
-}
-
-async function signOut () {
-  try { userPop.value?.hide() } catch {}
-  try { await supabase.auth.signOut() } catch {}
-  router.push('/auth/login')
-}
+// ── Menu do usuário (rodapé) ─────────────────────────────────
+const footerPanel = ref(null)
+function toggleUserMenu (e) { footerPanel.value?.toggle(e) }
 </script>
 
 <template>
@@ -131,47 +115,26 @@ async function signOut () {
         class="w-9 h-9 rounded-[10px] grid place-items-center border-none bg-transparent text-[var(--text-color-secondary)] cursor-pointer text-[0.875rem] shrink-0 transition-[background,color,transform] duration-150 hover:bg-[var(--surface-ground)] hover:text-[var(--text-color)] hover:scale-105"
         v-tooltip.right="{ value: 'Configurações', showDelay: 0 }"
         aria-label="Configurações"
-        @click="goTo('/configuracoes')"
+        @click="$router.push('/configuracoes')"
       >
         <i class="pi pi-fw pi-cog" />
       </button>
 
-      <!-- Avatar / user -->
+      <!-- Avatar — trigger do menu de usuário -->
       <button
         class="w-9 h-9 rounded-[10px] border-none cursor-pointer overflow-hidden shrink-0 bg-[var(--surface-ground)] grid place-items-center transition-[transform,box-shadow] duration-150 hover:scale-105 hover:shadow-[0_0_0_2px_var(--primary-color)]"
         v-tooltip.right="{ value: userName, showDelay: 0 }"
         :aria-label="userName"
-        @click="toggleUserPop"
+        @click="toggleUserMenu"
       >
         <img v-if="avatarUrl" :src="avatarUrl" class="w-full h-full object-cover" :alt="userName" />
         <span v-else class="text-[1rem] font-bold text-[var(--text-color)]">{{ initials }}</span>
       </button>
     </div>
 
-    <!-- ── Popover usuário ────────────────────────────────── -->
-    <Popover ref="userPop" appendTo="body">
-      <div class="min-w-[210px] p-1 flex flex-col gap-0.5">
-        <div class="flex items-center gap-2.5 px-2.5 py-2 pb-2.5">
-          <div class="w-9 h-9 rounded-[9px] overflow-hidden shrink-0 bg-[var(--surface-ground)] grid place-items-center border border-[var(--surface-border)]">
-            <img v-if="avatarUrl" :src="avatarUrl" class="w-full h-full object-cover" />
-            <span v-else class="text-[1rem] font-bold text-[var(--text-color)]">{{ initials }}</span>
-          </div>
-          <div class="min-w-0">
-            <div class="text-[0.83rem] font-semibold text-[var(--text-color)] truncate">{{ userName }}</div>
-            <div class="text-[0.68rem] text-[var(--text-color-secondary)] truncate">{{ sessionUser?.email }}</div>
-          </div>
-        </div>
+    <!-- ── Menu de usuário (popup via AppMenuFooterPanel) ── -->
+    <AppMenuFooterPanel ref="footerPanel" variant="rail" />
 
-        <div class="h-px bg-[var(--surface-border)] my-0.5" />
-
-        <Button label="Meu Perfil" icon="pi pi-user"   text class="w-full justify-start" @click="goTo('/account/profile')" />
-        <Button label="Segurança"  icon="pi pi-shield" text class="w-full justify-start" @click="goTo('/account/security')" />
-
-        <div class="h-px bg-[var(--surface-border)] my-0.5" />
-
-        <Button label="Sair" icon="pi pi-sign-out" severity="danger" text class="w-full justify-start" @click="signOut" />
-      </div>
-    </Popover>
   </aside>
 </template>