Leonardo
f2b15ce0f7
- HANDOFF.md atualizado: bug do chip do cronômetro resolvido em 2026-04-27. Causa-raiz documentada (múltiplos Teleports compartilhando target + Transition>Element v-if gera comment placeholder VNode → emitsOptions:null no shouldUpdateComponent) e fix oficial (Transition envolvendo Teleport). - Backups locais 2026-03-23 removidos do índice (já estavam .gitignored, apenas saneamento). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
207 lines
12 KiB
Markdown
207 lines
12 KiB
Markdown
# HANDOFF — 2026-04-26 (continuação 2026-04-27: bug Teleport resolvido)
|
|
|
|
Documento de continuidade. **Quando voltar, comece lendo esta página.**
|
|
Sessão inteira polindo o Layout Melissa: light mode, integração no /profile,
|
|
Agenda fullscreen, dock taskbar, cadastro de paciente, ações contextuais.
|
|
|
|
---
|
|
|
|
## ✅ BUG RESOLVIDO — chip do cronômetro (2026-04-27)
|
|
|
|
**Era:** dois `<Teleport to=".melissa-dock">` (chip cronômetro + dock contextual)
|
|
com `<Transition>` interno + `v-if` interno apontando pro mesmo target. O slot
|
|
do `<Transition>` colapsava pra comment placeholder VNode quando falsy, e
|
|
esses placeholders ficavam intercalados no array de children do target —
|
|
ao patch/reorder, `shouldUpdateComponent` lia `.component.emitsOptions` em
|
|
nó cujo `.component` foi anulado pelo unmount irmão. Daí `null`.
|
|
|
|
**Fix (pattern oficial Vue):** `<Transition>` envolvendo `<Teleport>`, não o
|
|
contrário. Assim o Teleport some/aparece como unidade, sem deixar placeholder
|
|
no target compartilhado.
|
|
|
|
```vue
|
|
<!-- ❌ ANTES -->
|
|
<Teleport to=".melissa-dock">
|
|
<Transition name="...">
|
|
<Element v-if="cond" />
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
<!-- ✅ DEPOIS -->
|
|
<Transition name="...">
|
|
<Teleport v-if="cond" to=".melissa-dock">
|
|
<Element />
|
|
</Teleport>
|
|
</Transition>
|
|
```
|
|
|
|
Aplicado em `MelissaCronometro.vue:322` e `MelissaAgenda.vue:842`.
|
|
|
|
**Lição persistida:** quando múltiplos Teleports compartilham target, evitar
|
|
`v-if` dentro do Teleport — coloca o `v-if` no próprio Teleport.
|
|
|
|
---
|
|
|
|
## ✅ O que aconteceu hoje (cronologia)
|
|
|
|
### Manhã — Light mode + /profile
|
|
- **Light bloom no MelissaLayout** — gradiente Bloom usa CSS vars (`--bloom-c1/c2/base-1/base-2`) que flipam dark/light. Dark: 400/300/950. Light: 200/100/0. Removido `background-image: none !important`. Corrigido branco-em-branco do clock + ψ + psi-kbd. Panels light com 92% opacity. Classe `win11-has-photo` quando upload de foto.
|
|
- **Layout Melissa em /profile** — 3º card na seção 06 com badge "Em construção" + listras diagonais. Aceita `'melissa'` em `setVariant`/`_loadVariant`/bootstrap. Migration `20260425000001_user_settings_layout_variant_melissa.sql` (já aplicada). **Switch real do app fica pra Fase 5 (A#32 no dev_auditoria_items).**
|
|
- **Cronômetro/Personalização em light** — trocados `color: white` scoped → `var(--m-text)` em `.mc-select`, `.mc-display`, `.mc-btn--secondary`, `.mc-chip`, `.settings-select`, `.settings-test-btn`. Pílula `psi-kbd` ganhou tokens `--m-kbd-bg/--m-kbd-text` (era `rgba(0,0,0,.65)` hardcoded — em light virava preto sobre preto). Shadow do `.psi-btn` suavizada em light.
|
|
- **Ícones tons claros** — bloco de overrides em light mapeia `text-{cor}-200/300/400` → `text-{cor}-600` (17 cores Tailwind: emerald, green, amber, purple, blue, sky, cyan, teal, indigo, violet, pink, rose, red, orange, yellow, fuchsia, lime).
|
|
|
|
### Tarde — Agenda fullscreen
|
|
- **Cores light na MelissaAgenda** — 12 substituições de `color: white` → `var(--m-text)` semântico. Mantido white em `.mini-cal__day.is-hoje` (bg accent saturado). Avatar do paciente: bg `--m-accent-strong` (translúcido, invisível em light) → `--m-accent` (saturado). Tweaks light: shadow suave na `.ma-page`, eventos do FC com `saturate(140%)` + box-shadow leve, cursor "agora" com glow vermelho.
|
|
- **Mini-cal funcionalidades** — click no dia pula o FC (`fcApi().gotoDate`), range visível do FC destacado (`is-in-range` via `viewStart/viewEnd`), dots por evento real do mês (`useMelissaEventosRange(miniRangeStart, miniRangeEnd)` separado), até 3 dots por dia.
|
|
- **Feriados** — `useFeriados` integrado. Cores: nacional=rose, municipal=amber, personalizado=violet. Tooltip combina nome do feriado + count de eventos. Hoje + feriado: ring externo na cor do feriado. Recarrega ao mudar de ano via watch.
|
|
- **Dias fechados** — `useAgendaSettings.workRules` carregado. `workDowSet` computed. Dias fora da jornada → `is-fechado` (cinza apagado). Mutex com feriado (feriado vence cinza). Fallback seg-sex se sem regras.
|
|
- **FC central com feriados** — `fcEvents` agora `[...eventosSemana, ...feriadoFcEvents]` (display:'background' amber suave).
|
|
|
|
### Tarde 2 — Layout estrutural da Agenda
|
|
- **Card `Hoje` mesclado** — antes 2 cards (stats + sessões). Agora 1 só: header + 4 stats + divider + lista de sessões. Count à direita do header.
|
|
- **Card Hoje movido pra esquerda** — sai da col 3 (widgets), vai pro topo da col 1 (sidebar pacientes). Modificador `.ma-w--side` com margem + max-height 50vh + lista interna scrollable.
|
|
- **ProximosFeriadosCard reaproveitado** — entre mini-cal e Hoje na col 3. Override visual (`bg-soft`, `border-color`, `border-radius: 12px`) pra encaixar no glass.
|
|
|
|
### Noite 1 — Dock + cadastro de paciente
|
|
- **Dock taskbar** (`.melissa-dock`) — faixa fixa 76px no bottom, transparente, `position:fixed`. ψ desceu pra `bottom: 10px` (centralizado vertical na faixa). Token `--m-dock-h: 76px`. Páginas reservam space via `inset` (`.ma-page` ajustada). **CSS no `<style>` global** pra evitar perda de scoped em static-hoisted nodes.
|
|
- **Chip cronômetro teleportado** pro dock. Substituído `position:fixed top:1.5rem left:1.5rem` por `position:relative` (filho flex). Aparece após ψ, com gap.
|
|
- **Animação minimize macOS-style** — `isMinimizing` flag + computed `dialogTransitionName` ('minimize' vs 'lift' default). CSS `transform-origin: 96px calc(100% - 38px)` (posição do chip no dock). Scale 1→0.05 + opacity em 340ms cubic-bezier ease-in. Chip-pop com `transition-delay: 120ms` no enter pra dar sensação macOS.
|
|
- **Botão fake "Adicionar paciente"** no topo da lista — tracejado com `+`. Click abre `PatientCreatePopover` (3 opções: rápido/completo/link de cadastro com URL+copy). Reaproveita `PatientCadastroDialog` + `ComponentCadastroRapido`. Emit `patient-created` → MelissaLayout faz `refetchPacientes`.
|
|
- **Pacientes novos no topo** — composable agora retorna `created_at`. Threshold 7 dias. Computed `pacientesFiltrados` particiona em [novos sort desc, resto alfabético]. Visual: `is-novo` bg `--m-accent-soft` + badge "novo" pílula primary.
|
|
|
|
### Noite 2 — Dock contextual ⚠️ INTRODUZIU O BUG PENDENTE
|
|
- **Imports adicionados** no MelissaAgenda: `PatientProntuario`, `useConversationDrawerStore`, `getSessionCounts`. Removido depois: `import Menu from 'primevue/menu'` (auto-import).
|
|
- **State + funções** pra dock contextual: `pacienteSelecionado` computed, `sessionCountsMap` cache, `prontuarioOpen`/`prontuarioPatient`, handlers `abrirSessoes/Whatsapp/Prontuario`, `editarPacienteSelecionado`, `desselecionarPaciente`, `toggleKebab`/`kebabItems`.
|
|
- **Template** — `<button>` do paciente virou `<div>` (não pode ter button-dentro-de-button por causa do kebab `.ma-pat__kebab`). `<Teleport to=".melissa-dock">` com `<Transition name="ma-dock-pop">` mostrando avatar + nome + count + 4 ações + close. `<Menu>` PrimeVue popup. `<PatientProntuario v-if=...>`.
|
|
- **CSS** — `.ma-dock-actions` glass aesthetic (espelha .mc-chip), responsivo (some em ≤ 1024px). `.ma-pat__kebab` só visível em mobile.
|
|
|
|
**Estado pós-implementação:** funcionou inicialmente. Depois de algum HMR, o chip do cronômetro deixou de aparecer. Erro `emitsOptions: null` no console. Tentei 3 fixes sem sucesso. Investigar amanhã.
|
|
|
|
---
|
|
|
|
## 📋 Pendências do dia (não commitado)
|
|
|
|
```
|
|
M HANDOFF.md
|
|
M src/router/routes.misc.js (rota /preview/melissa — do dia 24)
|
|
M src/views/pages/saas/SaasAddonsPage.vue (do dia 24, ainda não commitado)
|
|
M src/views/pages/account/ProfilePage.vue (card Melissa)
|
|
M src/layout/composables/layout.js (variant aceita 'melissa')
|
|
M src/app/bootstrapUserSettings.js (bootstrap aceita 'melissa')
|
|
M src/layout/melissa/MelissaLayout.vue (light bloom + dock + tokens)
|
|
M src/layout/melissa/MelissaCronometro.vue (light + teleport chip + animação minimize)
|
|
M src/layout/melissa/MelissaAgenda.vue (light + mini-cal + feriados + cadastro + dock contextual)
|
|
M src/layout/melissa/composables/useMelissaPacientes.js (created_at)
|
|
?? src/layout/melissa/ (todo o trabalho do dia 24-26)
|
|
?? layout-scratchs/ (rascunhos design Direção A)
|
|
?? database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql
|
|
```
|
|
|
|
**Sugestão de commits separados (ordem):**
|
|
|
|
1. **Fix admin adjust créditos (do dia 24, ainda pendente):**
|
|
```
|
|
Fix admin adjust créditos: clamp silencioso vira erro vermelho
|
|
```
|
|
|
|
2. **Layout Melissa — preview funcional (dia 24):**
|
|
```
|
|
Layout Melissa (Direção B) — preview em /preview/melissa
|
|
```
|
|
|
|
3. **Layout Melissa — Profile + light mode + ícones tons claros (dia 25-26):**
|
|
```
|
|
Melissa: light bloom + opção em /account/profile (Em construção)
|
|
|
|
- Light mode usa CSS vars --bloom-* (tons 200/100/surface-0)
|
|
- Card "Melissa" em /account/profile com badge Em construção
|
|
- Migration: layout_variant aceita 'melissa'
|
|
- Cores light em cronômetro/personalização (color: white → var(--m-text))
|
|
- Ícones text-X-200/300/400 → text-X-600 em light (17 cores)
|
|
- Switch real do app: A#32 (Fase 5)
|
|
```
|
|
|
|
4. **Melissa Agenda — cores light + mini-cal funcional + feriados (dia 26):**
|
|
```
|
|
Melissa Agenda: light + mini-cal completo + feriados + dias fechados
|
|
|
|
- 12 cores white → var(--m-text) na .ma-page e widgets
|
|
- Mini-cal: click pula FC, range visível destacado, dots reais por mês
|
|
- Feriados nacional/municipal/personalizado (rose/amber/violet)
|
|
- Dias fechados (workRules) cinza apagado
|
|
- FC central com feriados como background events
|
|
```
|
|
|
|
5. **Melissa Agenda — layout estrutural (dia 26):**
|
|
```
|
|
Melissa Agenda: card Hoje na sidebar + ProximosFeriadosCard
|
|
|
|
- Card Hoje (stats+sessões) mesclados em um, movidos pra col esquerda
|
|
- ProximosFeriadosCard reaproveitado entre mini-cal e Hoje
|
|
```
|
|
|
|
6. **Melissa — dock + cadastro paciente (dia 26):**
|
|
```
|
|
Melissa: dock taskbar Win11 + cadastro paciente via PatientCreatePopover
|
|
|
|
- .melissa-dock fixed bottom 76px receptor de items teleportados
|
|
- Chip cronômetro teleportado pro dock + animação minimize macOS-style
|
|
- ψ centralizado vertical na faixa (bottom:10px)
|
|
- Botão fake "+" no topo da lista de pacientes abre popover
|
|
- Pacientes novos (7d) no topo + badge "novo"
|
|
```
|
|
|
|
7. **✅ Dock contextual com ações de paciente (bug resolvido 2026-04-27):**
|
|
- Mudanças do MelissaAgenda relacionadas a `.ma-dock-actions`, `Menu kebab`, `PatientProntuario` integration
|
|
- Bug do chip resolvido (Transition envolvendo Teleport)
|
|
```
|
|
Melissa Agenda: dock contextual com ações do paciente selecionado
|
|
```
|
|
|
|
---
|
|
|
|
## 📚 Tracking persistente
|
|
|
|
- **A#32** — Fase 5 router wire-up (ainda pendente, sessão dedicada)
|
|
- **Memória atualizada:** `project_layout_melissa.md` — adicionar nota sobre bug pendente + estado da sessão
|
|
- Adicionar **A#33** amanhã pro bug do chip do cronômetro pendente, depois fechar quando resolvido
|
|
|
|
---
|
|
|
|
## 📦 Setup pra retomar
|
|
|
|
```bash
|
|
# Terminal 1 — functions
|
|
supabase functions serve --no-verify-jwt --env-file supabase/functions/.env
|
|
|
|
# Terminal 2 — vite
|
|
npm run dev
|
|
|
|
# Browser
|
|
http://localhost:5173/preview/melissa # ← Melissa preview
|
|
http://localhost:5173/account/profile # ← /profile com card Melissa
|
|
http://localhost:5173/auth/login # ← Login (dados reais)
|
|
```
|
|
|
|
---
|
|
|
|
## 📌 Próximas opções (escolha amanhã)
|
|
|
|
**A. Resolver bug do chip do cronômetro** ⚠️ prioridade — bloqueia commit do dock contextual
|
|
- Ver hipóteses na seção "BUG PENDENTE" no topo
|
|
- Estratégia recomendada: comentar o `<PatientProntuario>` primeiro, hard refresh, ver se chip volta. Se sim, é o componente. Se não, comentar `<Menu>` kebab. Se não, comentar `<Teleport>` do `.ma-dock-actions`. Isolar a causa.
|
|
|
|
**B. Continuar polindo Melissa**
|
|
- Toolbar custom da Agenda (revisar visual)
|
|
- Stats hoje (interatividade — click filtra?)
|
|
- Evento panel (visual + actions)
|
|
- Drag/resize no FC com persist (Fase 2 do roadmap)
|
|
- Recorrências virtuais (RRULE → ocorrências)
|
|
|
|
**C. Fase 5 (A#32)** — wire-up router pra Layout Melissa virar real
|
|
- Alto risco — sessão dedicada
|
|
- Precisa de Fase 3 antes (split MelissaLayout/MelissaResumo)
|
|
|
|
**D. Voltar pro QA** (Seção 3.4 do roteiro de testes)
|
|
- SLA de conversas + Bot triagem + Lembrar paciente + ...
|