Layout 100%, Notificações, SetupWizard

src/components/AjudaDrawer.vue

@@ -2,10 +2,11 @@
 <!-- Painel de ajuda lateral — home com sessão/docs/faq + navegação interna + votação -->
 <script setup>
 import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useAjuda } from '@/composables/useAjuda'
 
-const route = useRoute()
+const route  = useRoute()
+const router = useRouter()
 
 const {
   sessionDocs, sessionFaq,
@@ -64,6 +65,50 @@ function fechar () {
   faqAbertos.value = {}
   closeDrawer()
 }
+// ── Highlight de elemento na página ──────────────────────────
+async function handleDocClick (e) {
+  const anchor = e.target.closest('a[data-highlight]')
+  if (!anchor) return
+
+  e.preventDefault()
+  const targetId    = anchor.getAttribute('data-highlight')
+  const targetRoute = anchor.getAttribute('data-route') || null
+
+  // Navega para outra rota se necessário (drawer permanece aberto)
+  if (targetRoute && route.path !== targetRoute) {
+    await router.push(targetRoute)
+    // Aguarda a rota e o DOM renderizarem com drawer ainda visível
+    await new Promise(r => setTimeout(r, 500))
+  }
+
+  // Scroll + highlight
+  await scrollAndHighlight(targetId)
+}
+
+async function scrollAndHighlight (id) {
+  // Tenta encontrar o elemento (pode ainda não ter montado)
+  let attempts = 0
+  let el = null
+  while (!el && attempts < 10) {
+    el = document.getElementById(id)
+    if (!el) await new Promise(r => setTimeout(r, 100))
+    attempts++
+  }
+  if (!el) return
+
+  // Scroll suave até o elemento
+  el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+  // Aguarda o scroll terminar
+  await new Promise(r => setTimeout(r, 500))
+
+  // Adiciona classe de highlight e remove depois da animação
+  el.classList.add('notif-card--highlight')
+  el.addEventListener('animationend', () => {
+    el.classList.remove('notif-card--highlight')
+  }, { once: true })
+}
+
 </script>
 
 <template>
@@ -106,7 +151,7 @@ function fechar () {
           <div class="doc-view">
 
             <!-- Conteúdo -->
-            <div v-if="docAtual?.conteudo" class="doc-conteudo ql-content" v-html="docAtual.conteudo" />
+            <div v-if="docAtual?.conteudo" class="doc-conteudo ql-content" v-html="docAtual.conteudo" @click="handleDocClick" />
 
             <!-- Mídias -->
             <template v-if="docAtual?.medias?.length">
@@ -135,7 +180,7 @@ function fechar () {
                   </button>
                   <Transition name="expand">
                     <div v-if="faqAbertos[item.id] && item.resposta"
-                         class="faq-resposta ql-content" v-html="item.resposta" />
+                         class="faq-resposta ql-content" v-html="item.resposta" @click="handleDocClick" />
                   </Transition>
                 </div>
               </div>
@@ -298,7 +343,7 @@ function fechar () {
                   </button>
                   <Transition name="expand">
                     <div v-if="faqAbertos[item.id] && item.resposta"
-                         class="faq-resposta ql-content" v-html="item.resposta" />
+                         class="faq-resposta ql-content" v-html="item.resposta" @click="handleDocClick" />
                   </Transition>
                 </div>
               </div>
@@ -326,7 +371,7 @@ function fechar () {
                   </button>
                   <Transition name="expand">
                     <div v-if="faqAbertos[item.id] && item.resposta"
-                         class="faq-resposta ql-content" v-html="item.resposta" />
+                         class="faq-resposta ql-content" v-html="item.resposta" @click="handleDocClick" />
                   </Transition>
                 </div>
               </div>
@@ -705,6 +750,34 @@ function fechar () {
   font-weight: 400;
 }
 
+/* ── Links de highlight ──────────────────────────────────────── */
+.doc-conteudo.ql-content :deep(a[data-highlight]),
+.faq-resposta.ql-content :deep(a[data-highlight]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: 600;
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
+  transition: background 0.15s;
+  cursor: pointer;
+  font-size: 0.82rem;
+}
+.doc-conteudo.ql-content :deep(a[data-highlight]:hover),
+.faq-resposta.ql-content :deep(a[data-highlight]:hover) {
+  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
+}
+.doc-conteudo.ql-content :deep(a[data-highlight]::before),
+.faq-resposta.ql-content :deep(a[data-highlight]::before) {
+  content: "↗";
+  font-size: 0.7rem;
+  opacity: 0.7;
+}
+
 /* ── Expand transition ───────────────────────────────────────── */
 .expand-enter-active,
 .expand-leave-active {