From 684f673cc18fa11e5853c283a11dccedc5ad15b6 Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 14:16:01 -0300
Subject: [PATCH] MelissaMenu: switch on/off no Modo escuro

Substitui o pill "Ligado/Desligado" por um switch CSS visual (track
+ thumb que desliza). Usa --p-primary-color quando ligado. O button
mantem o toggleDarkAndPersist no click + aria-pressed pra leitor de
tela. Switch tem aria-hidden pq a semantica vive no botao.

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

diff --git a/src/layout/melissa/MelissaMenu.vue b/src/layout/melissa/MelissaMenu.vue
index 2234adc..9cea884 100644
--- a/src/layout/melissa/MelissaMenu.vue
+++ b/src/layout/melissa/MelissaMenu.vue
@@ -420,10 +420,18 @@ async function sair() {
                         <button class="mm-foot-item" @click="goSeguranca">
                             <i class="pi pi-shield" /><span>Segurança</span>
                         </button>
-                        <button class="mm-foot-item" @click="toggleDarkAndPersist">
+                        <button
+                            class="mm-foot-item"
+                            :aria-pressed="isDarkTheme"
+                            @click="toggleDarkAndPersist"
+                        >
                             <i :class="isDarkTheme ? 'pi pi-sun' : 'pi pi-moon'" />
                             <span>Modo escuro</span>
-                            <span class="mm-foot-item__hint">{{ isDarkTheme ? 'Ligado' : 'Desligado' }}</span>
+                            <span
+                                class="mm-toggle"
+                                :class="{ 'is-on': isDarkTheme }"
+                                aria-hidden="true"
+                            />
                         </button>
                         <button
                             class="mm-foot-item"
@@ -823,6 +831,35 @@ async function sair() {
     border-radius: 999px;
 }
 
+/* Switch on/off (modo escuro) — usa as cores do tema */
+.mm-toggle {
+    flex: none !important;
+    width: 32px;
+    height: 18px;
+    background: var(--m-border-strong, var(--m-border));
+    border-radius: 999px;
+    position: relative;
+    transition: background-color 200ms ease;
+}
+.mm-toggle::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    transition: transform 200ms ease;
+}
+.mm-toggle.is-on {
+    background: var(--p-primary-color);
+}
+.mm-toggle.is-on::after {
+    transform: translateX(14px);
+}
+
 /* User row */
 .mm-user {
     display: flex;