From e344661d4d30c3e61f675ff0c0df974257b94c03 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 14:14:28 -0300
Subject: [PATCH] MelissaMenu: categoria abre alinhada com a secao ativa

Antes o menu sempre abria em "Agenda e Pacientes" (CATEGORIAS[0]).
Agora resolve qual categoria contem o sub-item secaoAtiva e abre
direto nela: ex. estando em /melissa/financeiro-lancamentos, o menu
abre ja em "Financeiro". Sem secaoAtiva (resumo), mantem default
agenda-pacientes.

Watcher em props.secaoAtiva sincroniza o destaque se o user troca de
sessao com o menu aberto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/layout/melissa/MelissaMenu.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/layout/melissa/MelissaMenu.vue b/src/layout/melissa/MelissaMenu.vue
index c822284..2234adc 100644
--- a/src/layout/melissa/MelissaMenu.vue
+++ b/src/layout/melissa/MelissaMenu.vue
@@ -18,7 +18,7 @@
  *   - select(key) — sub-item clicado (parent decide navegação)
  *   - close — clique fora ou X
  */
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { sessionUser, sessionRole } from '@/app/session';
 import { supabase } from '@/lib/supabase/client';
@@ -27,7 +27,7 @@ import { useLayout } from '@/layout/composables/layout';
 import { useUserSettingsPersistence } from '@/composables/useUserSettingsPersistence';
 import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
 
-defineProps({
+const props = defineProps({
     secaoAtiva: { type: String, default: null }
 });
 
@@ -173,9 +173,32 @@ const CATEGORIAS = [
 ];
 
 // ── Estado ──────────────────────────────────────────────────────
-const selectedKey = ref(CATEGORIAS[0].key); // primeira categoria por default
+// Resolve a categoria que contem o sub-item ativo. Se nenhum casa,
+// volta pra primeira (agenda-pacientes) — comportamento default.
+function categoryKeyFor(itemKey) {
+    if (!itemKey) return null;
+    for (const cat of CATEGORIAS) {
+        for (const group of cat.groups) {
+            if (group.items.some((it) => it.key === itemKey)) return cat.key;
+        }
+    }
+    return null;
+}
+
+const selectedKey = ref(categoryKeyFor(props.secaoAtiva) || CATEGORIAS[0].key);
 const copiado = ref(false);
 
+// Sincroniza o destaque com a sessao ativa — se o user troca de
+// "Lancamentos" pra "Agenda" sem fechar o menu, o selecionado
+// acompanha a sessao corrente.
+watch(
+    () => props.secaoAtiva,
+    (val) => {
+        const cat = categoryKeyFor(val);
+        if (cat) selectedKey.value = cat;
+    }
+);
+
 // Drill-down mobile: false = lista de categorias, true = sub-itens da
 // categoria escolhida. CSS controla visibilidade via translateX em <lg.
 // Em desktop o flag é ignorado (ambas colunas sempre visíveis).