From f2fd2e4722e3ab86603d9faf0e205b833d6a83de Mon Sep 17 00:00:00 2001
From: Leonardo <lmnohama@gmail.com>
Date: Wed, 6 May 2026 15:14:49 -0300
Subject: [PATCH] MelissaPerfil: scroll mobile + ancoras nos badges + email
 placeholder + 50/50 desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Mobile scroll fix: .mpr-main ganha min-height: 0 (faltava pra
   permitir shrink dentro do flex column do .mpr-body em mobile, sem
   isso o overflow-y: auto nao engatava).

2. Badges e dicas viraram <button> com @click que rola pra sessao
   correspondente do form (Identidade / Avatar / Bio / Contato /
   Redes). Em mobile o drawer fecha antes do scroll (exceto Avatar,
   que vive na propria sidebar). Cada card .mpr-w ganhou id pra
   ancora (mpr-sec-*).

3. Email readonly recebe placeholder=" " (espaco) — sem ele o
   FloatLabel variant=on ficava em cima do email enquanto o user
   nao tinha foco, pq :placeholder-shown nao aplica.

4. Desktop (>=1024px): .mpr-main vira grid 2 colunas (50/50). Os 4
   cards (Identidade, Contato, Bio, Redes) ficam lado a lado em
   pares. Internal .mpr-grid colapsa pra 1 col nesse modo, e
   .mpr-field--half passa a span 1/-1 — evita ficar cramped em
   metade da largura.

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

diff --git a/src/layout/melissa/MelissaPerfil.vue b/src/layout/melissa/MelissaPerfil.vue
index 4ffd232..6e8f62f 100644
--- a/src/layout/melissa/MelissaPerfil.vue
+++ b/src/layout/melissa/MelissaPerfil.vue
@@ -15,7 +15,7 @@
  * Logica de load/save espelhada do ProfilePage.vue (mesmas tabelas
  * profiles + user_settings + auth.user_metadata, mesmo bucket avatars).
  */
-import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import { useRouter } from 'vue-router';
@@ -402,6 +402,34 @@ async function saveAll() {
     }
 }
 
+// ── Ancoras: badge/dica leva pra sessao do form ────────────
+const SECTION_BY_FIELD = {
+    full_name:        'identidade',
+    nickname:         'identidade',
+    work_description: 'identidade',
+    name:             'identidade',
+    nick:             'identidade',
+    work:             'identidade',
+    avatar:           'avatar',
+    photo:            'avatar',
+    bio:              'bio',
+    phone:            'contato',
+    social:           'redes'
+};
+
+function scrollToSection(field) {
+    const sec = SECTION_BY_FIELD[field];
+    if (!sec) return;
+    // Avatar fica na sidebar; em mobile mantem o drawer aberto (e nao scrolla
+    // o main, pq a sessao nao existe no main).
+    const isAvatar = sec === 'avatar';
+    if (isMobile.value && !isAvatar) drawerOpen.value = false;
+    nextTick(() => {
+        const target = document.getElementById('mpr-sec-' + sec);
+        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+}
+
 // ── Sair da conta ──────────────────────────────────────────
 function confirmSignOut() {
     confirm.require({
@@ -557,34 +585,38 @@ onBeforeUnmount(() => {
                             <!-- Badges -->
                             <div class="mpr-badges-head">Conquistas</div>
                             <div class="mpr-badges">
-                                <div
+                                <button
                                     v-for="badge in badges"
                                     :key="badge.key"
+                                    type="button"
                                     class="mpr-badge"
                                     :class="badge.earned ? 'is-earned' : 'is-locked'"
                                     v-tooltip.top="badge.earned ? badge.label : 'Bloqueado — ' + badge.label"
+                                    @click="scrollToSection(badge.key)"
                                 >
                                     <span class="mpr-badge__icon">{{ badge.icon }}</span>
                                     <span class="mpr-badge__label">{{ badge.label }}</span>
-                                </div>
+                                </button>
                             </div>
 
                             <!-- Dicas (campos faltando) -->
                             <div v-if="progressSuggestions.length" class="mpr-tips">
                                 <div class="mpr-tips__head">O que falta</div>
-                                <span
+                                <button
                                     v-for="(tip, i) in progressSuggestions"
                                     :key="i"
+                                    type="button"
                                     class="mpr-tip"
+                                    @click="scrollToSection(tip.key)"
                                 >
                                     <i :class="tip.icon" />
                                     {{ tip.text }}
-                                </span>
+                                </button>
                             </div>
                         </div>
 
                         <!-- Card: Avatar -->
-                        <div class="mpr-w mpr-w--side">
+                        <div id="mpr-sec-avatar" class="mpr-w mpr-w--side">
                             <div class="mpr-w__head">
                                 <span class="mpr-w__title">
                                     <i class="pi pi-image" /> Avatar
@@ -642,7 +674,7 @@ onBeforeUnmount(() => {
 
                 <template v-else>
                     <!-- ── Identidade ── -->
-                    <div class="mpr-w">
+                    <div id="mpr-sec-identidade" class="mpr-w">
                         <div class="mpr-w__head">
                             <span class="mpr-w__title">
                                 <i class="pi pi-id-card" /> Identidade
@@ -712,7 +744,7 @@ onBeforeUnmount(() => {
                     </div>
 
                     <!-- ── Contato ── -->
-                    <div class="mpr-w">
+                    <div id="mpr-sec-contato" class="mpr-w">
                         <div class="mpr-w__head">
                             <span class="mpr-w__title">
                                 <i class="pi pi-phone" /> Contato
@@ -740,6 +772,7 @@ onBeforeUnmount(() => {
                                         id="mpr_email"
                                         :value="userEmail"
                                         readonly
+                                        placeholder=" "
                                         class="w-full"
                                     />
                                     <label for="mpr_email">E-mail (login)</label>
@@ -750,7 +783,7 @@ onBeforeUnmount(() => {
                     </div>
 
                     <!-- ── Bio ── -->
-                    <div class="mpr-w">
+                    <div id="mpr-sec-bio" class="mpr-w">
                         <div class="mpr-w__head">
                             <span class="mpr-w__title">
                                 <i class="pi pi-pencil" /> Bio
@@ -770,7 +803,7 @@ onBeforeUnmount(() => {
                     </div>
 
                     <!-- ── Sites e Redes ── -->
-                    <div class="mpr-w">
+                    <div id="mpr-sec-redes" class="mpr-w">
                         <div class="mpr-w__head">
                             <span class="mpr-w__title">
                                 <i class="pi pi-share-alt" /> Sites e Redes
@@ -1043,6 +1076,7 @@ onBeforeUnmount(() => {
 .mpr-main {
     flex: 1;
     min-width: 0;
+    min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 16px;
@@ -1058,6 +1092,23 @@ onBeforeUnmount(() => {
     border-radius: 3px;
 }
 
+/* Desktop (>=1024px): cards em 2 colunas (50/50). Internal grid
+   colapsa pra 1 col pra nao ficar cramped. */
+@media (min-width: 1024px) {
+    .mpr-main {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        align-content: start;
+    }
+    .mpr-main .mpr-grid {
+        grid-template-columns: 1fr;
+    }
+    .mpr-main .mpr-field--half {
+        grid-column: 1 / -1;
+    }
+}
+
 /* ═══════ Card-base (mpr-w) ═══════ */
 .mpr-w {
     background: var(--m-bg-medium);
@@ -1183,7 +1234,11 @@ onBeforeUnmount(() => {
     border-radius: 999px;
     border: 1px solid var(--m-border);
     font-size: 0.7rem;
+    font-family: inherit;
+    cursor: pointer;
+    transition: transform 120ms ease, background-color 120ms ease;
 }
+.mpr-badge:hover { transform: translateY(-1px); }
 .mpr-badge.is-earned {
     background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
     border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
@@ -1222,6 +1277,15 @@ onBeforeUnmount(() => {
     border: 1px solid var(--m-border);
     color: var(--m-text-muted);
     font-size: 0.72rem;
+    font-family: inherit;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.mpr-tip:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
+    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
+    color: var(--p-primary-color);
 }
 .mpr-tip > i { font-size: 0.7rem; color: var(--p-primary-color); }