From eb42759979677ef558034294b3d264f3ac04a1a4 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Fri, 22 May 2026 11:40:48 -0300
Subject: [PATCH] melissa/settings+ajuda: fechar ao clicar fora

Popover Personalizar (cog) e drawer de Ajuda agora fecham quando o
user clica em qualquer lugar fora do panel. Listener mousedown em
capture, watch em open pra anexar/desanexar; ignora o proprio botao
trigger (data-ajuda-toggle pro ajuda; cogBtnEl ref pro settings) pra
nao fazer close+reopen. Tambem flipa o panel do settings de top-12
pra bottom-12 (cog agora vive no bottom da .melissa-tray).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/AjudaDrawer.vue              | 20 +++++++++++++++++++-
 src/layout/AppTopbar.vue                    |  5 +++--
 src/layout/melissa/MelissaSettingsPanel.vue |  2 +-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/AjudaDrawer.vue b/src/components/AjudaDrawer.vue
index 259ba8c..c34b0cd 100644
--- a/src/components/AjudaDrawer.vue
+++ b/src/components/AjudaDrawer.vue
@@ -15,7 +15,7 @@
 |--------------------------------------------------------------------------
 -->
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useAjuda } from '@/composables/useAjuda';
 
@@ -73,6 +73,24 @@ function fechar() {
     faqAbertos.value = {};
     closeDrawer();
 }
+
+// ── Fechar ao clicar fora ─────────────────────────────────────
+// Listener so existe enquanto o drawer esta aberto. Clique nos botoes
+// que abrem/fecham o drawer (marcados com data-ajuda-toggle) sao
+// ignorados — senao fecha aqui e o @click reabre.
+function onDocMouseDown(e) {
+    if (!drawerOpen.value) return;
+    const t = e.target;
+    if (!(t instanceof Element)) return;
+    if (t.closest('.ajuda-panel')) return;        // dentro do drawer
+    if (t.closest('[data-ajuda-toggle]')) return; // botao trigger
+    closeDrawer();
+}
+watch(drawerOpen, (open) => {
+    if (open) document.addEventListener('mousedown', onDocMouseDown, true);
+    else document.removeEventListener('mousedown', onDocMouseDown, true);
+});
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocMouseDown, true));
 // ── Highlight de elemento na página ──────────────────────────
 async function handleDocClick(e) {
     const anchor = e.target.closest('a[data-highlight]');
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 69f939a..b5ef568 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -620,8 +620,9 @@ onMounted(async () => {
                 <NotificationDrawer />
             </div>
 
-            <!-- Ajuda -->
-            <button type="button" class="rail-topbar__btn" :class="{ 'rail-topbar__btn--active': ajudaDrawerOpen }" :title="ajudaDrawerOpen ? 'Fechar ajuda' : 'Ajuda'" @click="toggleAjuda">
+            <!-- Ajuda — data-ajuda-toggle ignora este botao no
+                 click-outside do AjudaDrawer (senao fecha + reabre). -->
+            <button type="button" class="rail-topbar__btn" :class="{ 'rail-topbar__btn--active': ajudaDrawerOpen }" :title="ajudaDrawerOpen ? 'Fechar ajuda' : 'Ajuda'" data-ajuda-toggle @click="toggleAjuda">
                 <i class="pi pi-question-circle" />
             </button>
 
diff --git a/src/layout/melissa/MelissaSettingsPanel.vue b/src/layout/melissa/MelissaSettingsPanel.vue
index 48ea11a..4af129f 100644
--- a/src/layout/melissa/MelissaSettingsPanel.vue
+++ b/src/layout/melissa/MelissaSettingsPanel.vue
@@ -125,7 +125,7 @@ function onClearBg() {
 </script>
 
 <template>
-    <div class="glass-panel mp-panel absolute top-12 right-0 w-72">
+    <div class="glass-panel mp-panel absolute bottom-12 right-0 w-72">
         <!-- Cabecalho fixo -->
         <header class="mp-head">
             <div class="mp-head__title">