Refator do menu mobile so no Perfil (validacao do padrao):
- Remove o drawer slide-in da esquerda + backdrop + botao "Menu"/
"Configuracoes" no header
- Renderiza <MelissaConfigSidebar> INLINE no topo do .mpr-body em
mobile (.mpr-mobile-config-menu)
- A sidebar contextual (Sua evolucao + Avatar) tambem renderiza
inline em sequencia, abaixo do menu global
- O main com o form fica abaixo de tudo
- Body em mobile vira flex column + overflow-y: auto (scroll externo
unico pra toda a pagina)
Drawer state (drawerOpen/toggle/fechar) e Teleport removidos do
JS+template. Em desktop nada muda — MelissaLayout segue renderizando
a sidebar global fixa na esquerda.
Pendente: aplicar o mesmo pattern nas outras 8 paginas de config se
o usuario validar este formato.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Antes cada pagina nativa de config tinha seu proprio chrome 2-col, e
quando o usuario navegava entre Perfil/Plano/Negocio/Seguranca/Agenda
Config/Bloqueios/Agendador/Pagamento, perdia o contexto do menu.
Agora:
- Catalogo unico em composables/melissaConfigGrupos.js (MELISSA_CONFIG_
GRUPOS + isMelissaConfigSlug helper)
- MelissaConfigSidebar.vue componente standalone com accordion +
navegacao via router.push + destaque do item ativo
- MelissaLayout renderiza `<MelissaConfigSidebar>` em qualquer slug
que esteja em MELISSA_CONFIG_GRUPOS (computed showConfigSidebar)
- CSS var --m-config-aside-left no .win11-root: 296px quando sidebar
visivel, 6px caso contrario
- Todas as 9 paginas nativas (Perfil, Plano, AlterarPlano, Negocio,
Seguranca, Bloqueios, AgendaConfig, Agendador, Pagamento) +
MelissaConfiguracoes ajustam left do inset usando a var
Sidebar tem entrada animada (lift + slide) e usa o pattern do .mcfg-
accordion (head com icone primary + label + desc 2-linhas + badge;
items com hover/active color-mix primary 12-16%).
Proximo passo: limpar o aside redundante interno do MelissaConfiguracoes
+ ajustar MelissaSeguranca pra considerar o aside no min-width 1000.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tira "Pagamento" do MelissaConfiguracoes (era embed cfg-pagamento ->
ConfiguracoesPagamentoPage.vue, 580 linhas). Cria a /melissa/pagamento
nativa Melissa.
Sidebar (mpg-side):
- Card "Resumo" — 5 mini stats coloridos por metodo (Pix verde,
Deposito azul, Dinheiro amarelo, Cartao roxo, Convenio teal),
com label "Ativo" ou "Inativo" + cor da borda quando ativo
- Card "Como funciona" — FAQ (Agendador / Cobranca WhatsApp / Obs)
Main (1-col, sem grid pq cards expandem dinamicamente quando ativos):
- Pix: tipo de chave (Select 5 opcoes) + chave + nome titular
- Deposito/TED: banco (Select 16 bancos BR) + tipo conta + agencia
+ conta + titular + CPF/CNPJ
- Dinheiro: toggle simples
- Cartao: toggle + instrucao opcional
- Convenio: toggle + lista de convenios (Textarea)
- Observacoes: Textarea livre
Cada card com toggle no head + body que expande quando ativo +
botao "Salvar" proprio (saveCard build payload do subset). Quando
inativo, mostra so "Salvar como inativo" pra persistir o desligar.
flex-shrink: 0 nos cards (mesmo padrao do AgendaConfig — conteudo
varia muito).
Logica espelhada do ConfiguracoesPagamentoPage (tabela payment_settings).
Compativel com /configuracoes/pagamento.
Wire-up:
- MelissaLayout: import + render `<MelissaPagamento>` quando
secaoAberta === 'pagamento'
- 'pagamento' adicionado em SECOES + MELISSA_NON_CONFIG_SLUGS
- MelissaConfiguracoes: cfg-pagamento removido de COMPONENT_MAP +
item do grupo Financeiro re-rotulado pra slug 'pagamento' (atalho
pra pagina nativa)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Os cards estavam comprimindo (ficando "pequenos") quando o total
ultrapassava a altura do .mac-main. Causa: flex-shrink: 1 (default)
deixa o flex column comprimir antes de engatar overflow-y: auto.
Fix: flex-shrink: 0 nos .mac-w (main e sidebar). Agora cada card
mantem a altura natural do seu conteudo e o .mac-main scrolla
externamente quando o total passa da viewport.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Remove min-height/max-height/overflow-y das cards (sidebar e main)
em desktop. Agora cada card cresce naturalmente conforme o conteudo
muda (alternar "Diferente por dia" na Jornada, expandir slots no
Online, etc). O scroll externo do .mac-main/.mac-side__scroll cuida
da pagina inteira.
Decisao especifica desta tela — Perfil/Negocio/Plano/AlterarPlano/
Bloqueios/Agendador continuam com cap 300+scroll porque o conteudo
deles e mais homogeneo. Aqui o conteudo da Jornada varia bastante.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Aplica o mesmo pattern dos outros (Perfil/Negocio/Plano):
- Em desktop, cada .mac-main > .mac-w ganha min-height: 300px +
max-height: 100% (do .mac-main).
- Body com flex: 1 + min-height: 0 + overflow-y: auto.
Quando o usuario alterna pra "Diferente por dia" (Jornada), pra
"Personalizar" (Ritmo) ou expande slots (Online), o card cresce ate
o teto do main e depois passa a scrollar internamente em vez de
empurrar os cards seguintes pra fora.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Remover os grupos inteiros tirava o caminho de descoberta via sidebar
de Configuracoes. Agora os items continuam listados, mas as keys
apontam pros slugs nativos (perfil/plano/negocio/seguranca + agenda-
config/bloqueios/online-scheduling).
Quando o user clica, selecionar() empurra a rota /melissa/<slug> e o
MelissaLayout troca pra renderizar a pagina nativa correspondente —
MelissaConfiguracoes desmonta porque isMelissaConfigRoute(slug) retorna
false (slug esta em MELISSA_NON_CONFIG_SLUGS).
Resultado: o user encontra os items no Configuracoes (descoberta) e
ao clicar abre a pagina nativa (UX melhor que embed antigo).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tira "Agenda" do MelissaConfiguracoes (era embed cfg-agenda ->
ConfiguracoesAgendaPage.vue, 1714 linhas). Cria a /melissa/agenda-config
nativa Melissa.
Sidebar (mac-side):
- Card "Status do setup" — 3 status items clicaveis (Jornada/Ritmo/
Online) com icone verde se OK ou amber se pendente + resumo
dinamico + chevron pra ancora
- Card "Como funciona" — FAQ 3-passos (1/2/3) explicando o fluxo
Main (1-col stacked, denso demais pra 50/50):
- Jornada: fuso (timezone Select) + dias da semana (chips toggleaveis)
+ modo igual/diferente (toggle bonito) + horarios (DatePickers timeOnly,
weekdays + sab + dom separados em modo igual; por dia em modo
diferente) + pausas (PausasChipsEditor reaproveitado, globais ou
por dia)
- Ritmo: 5 presets de duracao (30/45/50/60/90 min com gap) + custom
collapse com 2 DatePickers (duracao + intervalo)
- Online: aviso de slots orfaos (dias com slots mas sem jornada) +
toggle ativo + tabs de dia + periodos quick actions (Manha/Tarde/
Noite/Todos/Limpar) + slot chips individuais + info contagem
Cada card com Salvar proprio (saveJornada/saveRitmo/saveOnline). DB:
agenda_configuracoes + agenda_regras_semanais + agenda_online_slots.
Logica de igual/diferente com snapshot preservation, geracao de slots
respeitando jornada+pausas, limpeza automatica de slots orfaos ao
salvar jornada — tudo espelhado do original.
SKIPPED: FullCalendar preview (visite /melissa/agenda real).
Wire-up:
- MelissaLayout: import + render `<MelissaAgendaConfig>` quando
secaoAberta === 'agenda-config'
- 'agenda-config' adicionado em SECOES + MELISSA_NON_CONFIG_SLUGS
- MelissaConfiguracoes: cfg-agenda removido de COMPONENT_MAP +
grupo Agenda inteiro removido (Agenda/Bloqueios/Agendador todos
viraram nativos agora)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Como a pagina e enxuta (so 1 form pequeno + sidebar com info), cabe
bem em tablet portrait. Reduzi o breakpoint mobile pra 768px e
adaptei a formula da largura:
- 768-1012px : full-width (right: 6px)
- 1012-2012px: width fixo 1000px
- >= 2012px : ~50% do viewport (right: 50%)
Formula: right = max(6px, min(50%, calc(100% - 1006px)))
JS _mqMobile tambem atualizado pra (max-width: 767px).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Antes era right: 50% fixo, o que dava ~512px em viewports 1024-1100
(cramped p/ um form de senha + sidebar 320px).
Agora right = min(50%, calc(100% - 1006px)):
- viewport < 2012: page fixa em 1000px (nao shrink)
- viewport >= 2012: page = 50% (sobra mais espaco no lado direito)
Mobile (<1024px) continua full-width via media query existente.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Troca a centralizacao (left: 25% + right: 25%) por alinhamento a
esquerda: left fica em 6px (do inset base) e right: 50% (push do
edge direito pro meio). Pagina passa a ocupar a metade esquerda
do viewport, encostada na borda esquerda.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em desktop a pagina ocupa apenas 50% da largura util (left: 25% +
right: 25%), centralizada. Como Seguranca so tem 1 form pequeno
(Trocar senha + sidebar de info), nao precisa de toda a largura
do viewport. Em mobile mantem 100% (override so na media query
>= 1024px).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em desktop o card .mse-w do main (Trocar senha) ganha:
- max-height: 100% (do .mse-main) — nao passa do viewport
- SEM min-height — altura natural por conteudo
- body com flex: 1 + min-height: 0 + overflow-y: auto pra scroll
interno quando o conteudo (3 inputs + barra de forca + match +
warning + 2 botoes) precisar de mais espaco que o disponivel.
Diferente da sidebar (que mantem min-h 300 pq pode haver pouca info).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Aplica o mesmo fix do MelissaPerfil/Negocio:
- align-items: start no grid (cells nao stretch p/ row height)
- Cards min-height 300px + max-height 100% (do container)
- .mpl-w__body / .map-w__body com flex: 1 + min-height: 0 +
overflow-y: auto (scrollbar fina)
MelissaPlano: vale pros 2 cards do main (Recursos / Historico) e
pros 2 cards da sidebar (Plano atual / Resumo) — quando o user
tem features longas ou muitos eventos, scroll interno engata.
MelissaAlterarPlano: aplicado SO na sidebar (Plano atual / Filtros).
Os plan cards do main (.map-plan) ficam fora — sao product cards
com layout proprio (preco grande + 3 CTAs).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em desktop os cards ficavam com altura natural do conteudo, e o
.mpr-main / .mng-main scrollava externamente. Quando o usuario
adicionava redes sociais (ou customs), o card crescia, empurrava a
row do grid e o conteudo novo ficava fora do viewport sem feedback
de scroll claro.
Fix:
- align-items: start no grid (cells nao stretch p/ row height)
- Cada card min-height: 300px + max-height: 100% (do container)
- .mpr-w__body / .mng-w__body com flex: 1 + min-height: 0 +
overflow-y: auto (scrollbar fina)
- Vale tanto pros cards do main (Identidade/Contato/Bio/Redes etc)
quanto pros da sidebar (Sua evolucao/presenca + Avatar/Logomarca)
que tinham o mesmo problema com badges/dicas
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Substitui o redirect pra /therapist/upgrade (que sai do overlay
Melissa) por uma pagina nativa em /melissa/alterar-plano com o
mesmo chrome 2-col das outras.
Sidebar (map-side):
- Card "Plano atual" — nome destacado em primary box + key + valor
+ status; ou empty state se nao tem plano pessoal
- Card "Filtros" — busca por nome/key/desc + chips Mensal/Anual
- Footer: botao "Voltar pro Meu Plano"
Main:
- Grid responsivo 1/2/3 cols (mobile/md/xl) de plan cards
- Cada card: nome + key (mono) + tag "Atual" se for o plano atual,
descricao, preco grande (do interval selecionado), CTA primario
"Escolher mensal/anual" + 2 botoes secundarios (Mensal | Anual)
cada um mostrando seu preco abaixo do label
- Card destacado com border primary se for o plano atual
- Empty state: filtro vazio com botao "Limpar busca"
Logica:
- preflight: valida sessao + plano + interval + preco ativo + nao ja
estar nesse plano/intervalo
- choosePlan: se ja tem subscription -> RPC change_subscription_plan
+ update do interval; se nao tem -> insert manual em subscriptions.
Apos sucesso, emit('goto', 'plano') volta pro MelissaPlano com
estado fresh.
Wire-up:
- MelissaLayout: import + render `<MelissaAlterarPlano>` com
@goto="abrirSecao"
- 'alterar-plano' adicionado em SECOES + MELISSA_NON_CONFIG_SLUGS
- MelissaPlano.goUpgrade() agora router.push pra Melissa(secao=alterar-plano)
em vez de /therapist/upgrade
Espelha o TherapistUpgradePage.vue (subscriptions + plans target=therapist
+ plan_prices + RPC change_subscription_plan), compativel com fluxo legacy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tira "Meu Plano" do MelissaConfiguracoes (era embed cfg-plano ->
TherapistMeuPlanoPage.vue) e cria a /melissa/plano como pagina
nativa Melissa no padrao das outras 2-col.
Sidebar (mpl-side):
- Card "Plano atual" — nome destacado + valor + status + ciclo
+ proxima renovacao (com badge cancelamento agendado vs auto) +
descricao do plano
- Card "Resumo" — mini-stats: Recursos / Eventos / Renova-Encerra +
ID da assinatura
- Footer: botao "Alterar plano" (router.push /therapist/upgrade)
Main:
- Card "Seu plano inclui" — features agrupadas por modulo (a partir
do prefix antes do . ou _ na key), cada item com check verde +
key + descricao em 1 linha (ellipsis), grid 1-2 cols
- Card "Historico" — subscription_events com tag de tipo + before
-> after dos plan_ids + autor (profiles join) + reason + metadata
(max 50 eventos)
Estados:
- Loading: skeletons na sidebar + main
- Sem assinatura: empty state grande no main com CTA "Ver planos",
empty compacto na sidebar
- Erro: toast (mesma logica do TherapistMeuPlanoPage)
Wire-up:
- MelissaLayout: import + render `<MelissaPlano v-if=secaoAberta=='plano'>`
- 'plano' sai de MELISSA_CONFIG_ALIASES, entra em MELISSA_NON_CONFIG_SLUGS
- SECOES.plano descricao atualizada (Assinatura, recursos, historico)
- MelissaConfiguracoes: cfg-plano removido de COMPONENT_MAP,
ROUTE_ALIASES e do grupo "Conta" (continua com Negocio + Seguranca)
Logica de fetch espelhada do TherapistMeuPlanoPage (subscriptions +
plans + plan_prices + plan_features + features + subscription_events
+ profiles), compativel com a /therapist/meu-plano legacy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Espelha o pattern do MelissaPacientes (.mp-w dentro de .mp-side):
sidebar tem bg --m-bg-soft e os cards .mpr-w--side ganham bg
--m-bg-medium pra destacar com contraste sutil. Antes ambos eram
soft e os cards sumiam contra o fundo.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Remove o display: none do span do .mpr-act-btn--primary em mobile.
Salvar e acao primaria importante o suficiente pra ocupar espaco
do label + icone no header.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em mobile cada .mpr-w no main vira flex: 0 0 auto + height: auto +
align-self: stretch. Garante que cada card ocupa exatamente a
altura do seu conteudo sem ser comprimido nem esticado pelo flex
column do .mpr-main.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Cada card .mpr-w agora segue o mesmo padrao visual do MelissaFinanceiro:
- Head: icon-box 36x36 com bg primary-tint + titulo + subtitulo
- Border-bottom separando head do body
- Body wrappado em .mpr-w__body com padding 14px e gap 12px
- Box-shadow elevando o card sobre o bg da sidebar/main
Subtitulos novos por card:
- Sua evolucao : Nivel, conquistas e pendencias
- Avatar : Foto exibida no menu e cabecalho
- Identidade : Nome, apelido e descricao profissional
- Contato : WhatsApp e e-mail de login
- Bio : Apresentacao curta para o seu perfil publico
- Sites e Redes : Site, redes sociais e links customizados
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
Tira "Meu Perfil" do MelissaConfiguracoes (era embed cfg-perfil ->
ProfilePage.vue) e cria a /melissa/perfil como pagina nativa Melissa
no padrao das outras 2-col (sidebar + main).
Sidebar (mpr-side):
- Card "Sua evolucao" — gamificacao: nivel atual + barra de progresso
+ XP-to-next + 7 badges (earned/locked) + dicas do que falta
- Card "Avatar" — preview + upload (5MB max) + remover
- Footer: botao "Sair da conta" (com Confirm dialog)
Main:
- Card Identidade: full_name + nickname + work_description (+ outro)
- Card Contato: phone (mask BR) + email read-only
- Card Bio: textarea
- Card Sites e Redes: site/IG/YT/FB/X + customSocials (add/remove)
O que ficou de fora (vs ProfilePage.vue):
- Aparencia (tema/cores) — vive no MelissaConfiguracoes Layout Melissa
- Layout Variant (Rail/Classic/Melissa) — irrelevante dentro do Melissa
- Trocar senha — empurrado pro cfg-seguranca
- Preferencias (idioma/timezone/notifs) — fora de escopo do MVP
Wire-up:
- MelissaLayout: import + render `<MelissaPerfil v-if=secaoAberta=='perfil'>`
- 'perfil' sai de MELISSA_CONFIG_ALIASES, entra em MELISSA_NON_CONFIG_SLUGS
- SECOES.perfil descricao atualizada
- MelissaConfiguracoes: cfg-perfil removido de COMPONENT_MAP, ROUTE_ALIASES
e do grupo "Conta" (continua com Plano + Negocio + Seguranca)
Logica de load/save espelhada do ProfilePage (auth.user_metadata +
profiles + storage avatars), compativel com a /account/perfil legacy.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adiciona display: flex + flex-direction: column + gap: 8px no
.p-accordion pra os AccordionPanels nao colarem um no outro
quando todos estao fechados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Volta -webkit-line-clamp: 2 no .mcfg-grp-desc e
.mcfg-nav-item__desc — descricao quebra em 2 linhas se precisar
ao inves de cortar com ellipsis em 1 linha.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Restaura label + desc tanto no header do grupo quanto no sub-item,
com altura confortavel (min-height 44px no item). Optimizacoes
mantidas pra evitar lag:
- Sem -webkit-line-clamp (custoso com o backdrop-filter do parent);
desc 1 linha com text-overflow: ellipsis
- Icone inline (16-18px, sem caixa 32x32 + box-shadow transition)
- Sem transition de color-mix em hover
Hover/active continuam com cor primary (12-16%). Desc no hover/active
ganha tom misturado primary 70% pra ficar legivel sem competir com
o label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Continua usando o <Accordion> do PrimeVue, mas DOM/CSS bem mais leves:
- Header: icone inline + label + badge (era icone 36x36 caixa
centralizada + label + desc 2-linhas + badge)
- Sub-itens: botao denso 1-linha (icone + label, desc vai pro
title="" como tooltip nativo)
- Removidas transitions de box-shadow e color-mix nos hovers
(eram custosas com o backdrop-filter blur do parent)
- Removidas as line-clamp 2-linhas em cada item (~30 itens
abertos = ~30 layouts caros)
- Hover/active dos sub-itens com color-mix(--p-primary-color),
alinhado com o padrao do MelissaMenu (.mm-foot-item)
- Padding compactado, gap entre items 1px (era 6px)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Antes a sidebar tinha 4 items (Aparencia / Plano de fundo / Relogio /
Cronometro), cada um abria uma sessao separada. Agora vira 1 unico
item "Layout Melissa" com os 4 cards stackeados em uma tela so.
- grupos[0].items reduzido pra 1 entrada (key: aparencia, label:
Layout Melissa)
- INLINE_KEYS so tem 'aparencia' agora
- DEPRECATED_ALIASES adicionado: /melissa/fundo, /melissa/relogio,
/melissa/cronometro -> 'aparencia' (URLs antigas continuam abrindo
a tela unificada)
- Template: 4 v-if/v-else-if -> 1 <template v-if> com os 4 .mcfg-w
como siblings
- MelissaLayout SECOES.aparencia label: "Configuracoes do Melissa"
-> "Layout Melissa" (icon palette)
- MelissaMenu CATEGORIAS aparencia label idem
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Se o termo bate com o label da categoria (ex: "financeiro"),
inclui todos os sub-itens dessa categoria nos resultados. Antes
so casava por label do sub-item.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Input com pi-search a esquerda + botao limpar a direita. Quando
query tem texto, substitui a lista de categorias por uma lista
flat de sub-itens que casam (com nome da categoria a direita
como breadcrumb). Click no resultado dispara clicarSubItem (mesma
logica de navegacao) e limpa o termo. Empty state pra "nenhum
resultado".
Visual segue mm-aside: bg --m-bg-soft, border --m-border, focus
border --p-primary-color. Hover dos resultados usa color-mix
primary 12% (mesmo pattern do .mm-foot-item).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Cada .mm-cat (exceto a ultima) ganha um ::after de 1px que sai
colado na borda esquerda e some no meio via linear-gradient
(--m-border-strong -> transparent). Da uma separacao visual
sutil sem precisar de border-bottom solido.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
.mm-sub__icon e .mm-link-row__icon agora usam --p-primary-color
em vez de --m-text-muted.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hover e is-active dos .mm-foot-item agora usam --p-primary-color (text +
icone + bg color-mix 12-16%). Trocado "Meus Planos" -> "Meu Plano"
(singular). Cada item ganha is-active baseado em props.secaoAtiva
(perfil/plano/negocio/seguranca), Modo escuro fica is-active quando
isDarkTheme = true, Cores do Tema mantem is-active baseado em
themeViewActive.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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>
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>
Em mobile cada .mf-card tem min/max-height 300px com scroll no body
(flex: 1 + min-height: 0 + overflow-y: auto). Garante que o "Ultimos
lancamentos" fique visivel e cada card tenha altura previsivel sem
consumir toda a altura do .mf-body. Chart wrap vira flex: 1 dentro
do body de 300px - head.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Em mobile reseta flex: 1 dos cards do row 50/50 (chart + projecao)
pra altura natural. O flex: 1 do desktop fazia os cards consumirem
toda a altura do .mf-body e empurrar o "Ultimos lancamentos" pra
fora do scroll visivel. Agora todos sizam por content em mobile.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wrappa "Receita x Despesa" e "Projecao de Caixa" em .mf-cards-row
flex 50/50 lado a lado em desktop (alturas iguais via align-items:
stretch + body flex: 1 com scroll interno). "Ultimos lancamentos"
fica full-width abaixo.
Mobile empilha (column), chart wrap volta pra altura fixa 240px,
body sem scroll interno (.mf-body ja scrolla).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Inverte a ordem dentro do .mr-charts-row via flex order — "Sessoes no
periodo" (tabela) em 1o lugar, "Sessoes por mes/semana" (chart) em 2o.
Vale pra desktop (esquerda/direita) e mobile (em cima/embaixo).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wrappa "Sessoes por mes/semana" e "Sessoes no periodo" em .mr-charts-row
flex 50/50 lado a lado em desktop. Mobile empilha (column) e a tabela
ganha min-height: 360px pra nao colapsar pra ~50px em telas curtas.
Chart wrap/skel viram flex: 1 dentro do card-chart pra acompanhar a
altura compartilhada da row.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
No mobile o botao "Menu Lancamentos/Notificacoes/etc" ja indica a sessao,
entao o pi-list/pi-bell ao lado do contador era redundante. Adiciona
.<prefix>-page__title-icon { display: none; } no @media max-width: 1023px.
Em MelissaConversas usa > i:first-child (icone nao tem classe dedicada).
Pages: FinanceiroLancamentos, Compromissos, Documentos, CadastrosRecebidos,
Conversas, AgendamentosRecebidos, Financeiro, Grupos, Notificacoes, Tags,
Medicos, Relatorios, Recorrencias.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Refator do mobile drawer em todas as Melissa Pages com sidebar:
scroll move pra dentro de .xx-side__scroll (flex: 1 + min-height: 0)
e o __footer vira flex-shrink: 0 last child de flex column. Espelha
o pattern do AppMenu/layout-sidebar Rail. Substitui o sticky/margin:auto
que falhava quando o conteudo era pequeno (deixava espaco vazio sob
o "Limpar filtros").
Pages: Compromissos, Conversas, Documentos, FinanceiroLancamentos,
Grupos, Medicos, Notificacoes, Pacientes, Recorrencias, Relatorios, Tags.
Pacientes (caso especial): mp-quick fixo no topo (max-height: 50%)
+ mp-side flex: 1 com scroll/footer interno.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Tres ajustes globais nas Melissa Pages com sidebar:
1) FOOTER "Limpar filtros" colado no bottom do drawer mobile
Problema: o sticky bottom precisa que algum container parent
tenha altura definida e overflow. No drawer, o `.xx-side` tinha
`height: auto` — entao o footer ficava no fluxo natural (logo
apos os cards) mesmo com pouco conteudo, em vez de empurrado pro
bottom do drawer.
Fix: `.xx-mobile-drawer__scroll .xx-side` ganha
`flex: 1; min-height: 0; display: flex; flex-direction: column`
pra ocupar altura disponivel; o `.xx-side__footer` ganha
`margin: auto -12px -24px` (margin-top: auto empurra pro fim).
Sticky bottom continua pro caso de scroll com muito conteudo.
Aplicado em: Compromissos, Grupos, Tags, Medicos, Conversas,
Recorrencias, Pacientes (caso especial — separa .mp-side de
.mp-quick), Cadastros Recebidos, FinanceiroLancamentos.
2) DRAWER MOBILE adicionado em Notificacoes, Documentos e
Relatorios (estavam com sidebar virando topo via max-height
50vh — faltava o pattern oficial das demais Melissa Pages).
Pattern aplicado:
- Aside host com id="<prefix>-mobile-drawer-target" + Transition
backdrop com fade
- Botao "Menu <Secao>" no header (esquerda do titulo)
- <Teleport :disabled="!isMobile"> envolvendo a sidebar
- Script: drawerOpen + isMobile + matchMedia listener registrado
no onMounted, removido no onBeforeUnmount
- CSS completo: .xx-mobile-drawer (fixed, transform translateX),
__scroll (overflow + padding), __backdrop (rgba 0.45 + blur),
overrides quando teleportada (sidebar perde bg/border-right,
footer vira sticky bottom com margin-top auto)
3) Botao "Menu" passa a ter sufixo da pagina:
- "Menu Lancamentos" (FinanceiroLancamentos)
- "Menu Notificacoes" (Notificacoes)
- "Menu Documentos" (Documentos)
- "Menu Relatorios" (Relatorios)
- "Menu Agendamentos" (AgendamentosRecebidos — corrigido tambem)
4) Bug de "lista vazia ao carregar via URL direto":
FinanceiroLancamentos e Relatorios usam composables que dependem
de tenantStore.activeTenantId. Quando aberta direto via URL
(sem navegar pelo menu), o tenantStore pode nao estar inicializado
ainda — entao fetchRecords() / loadSessions() retornam vazio.
Fix: adicionar `await tenantStore.ensureLoaded()` no onMounted
antes do fetch. Ja era pattern usado em outras Melissa Pages
(Compromissos, etc).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Leonardo