diff --git a/docs/superpowers/specs/2026-08-20-log-secoes-escondidas-design.md b/docs/superpowers/specs/2026-08-20-log-secoes-escondidas-design.md new file mode 100644 index 0000000..f1aae13 --- /dev/null +++ b/docs/superpowers/specs/2026-08-20-log-secoes-escondidas-design.md @@ -0,0 +1,66 @@ +# Log: seções escondidas por padrão, com clique para abrir + +## Contexto + +A tela `/log` mostra duas tabelas: "Ações no painel" (histórico de ações do +painel, já limitado aos 20 registros mais recentes) e "Envios automáticos de +chave (n8n)" (log dos envios automáticos de chave via WhatsApp, sem limite). +Como ambas aparecem sempre expandidas, a tela fica grande e atrapalha quando +o usuário só quer olhar rapidamente um dos dois logs. + +## Objetivo + +Cada seção da tela `/log` deve começar **escondida** (fechada) ao carregar a +página, exigindo um clique para expandir. Isso facilita, por exemplo, olhar +só o log de envios de chave sem precisar rolar past o log inteiro do painel. + +## Design + +**Estrutura:** cada seção (`Ações no painel` e `Envios automáticos de chave +(n8n)`) é envolvida em um elemento `
` HTML +nativo, **fechado por padrão** (sem o atributo `open`). A ordem das seções +não muda: Ações no painel primeiro, Envios automáticos de chave embaixo. + +**Controles (dois, redundantes, ambos alternam o mesmo estado):** +- O título da seção (dentro de ``) é clicável — clicar nele + abre/fecha a seção. Uma seta (▸ fechado / ▾ aberto) ao lado do título + indica visualmente o estado atual. +- Um botão no estilo dos demais botões do painel (`Mostrar` / `Ocultar`) + fica ao lado do título, dentro do mesmo ``. Como ele está dentro + do ``, clicar nele já aciona o toggle nativo do `
` — + não precisa de lógica de toggle separada. Um script pequeno escuta o + evento `toggle` de cada `
` e só atualiza o texto do botão + (`Mostrar`↔`Ocultar`) e o atributo `aria-expanded`, para acessibilidade. + +**Estado não é persistido:** toda vez que a página `/log` é carregada, as +duas seções começam fechadas — não guarda se o usuário tinha deixado aberta +antes (sem localStorage, sem cookie, sem parâmetro de URL). Simplicidade, +sem necessidade adicional hoje. + +**Sem mudança de comportamento:** os dados carregados por seção (limite de +20 em "Ações no painel", botão "Limpar log" restrito a administradores +dentro dessa seção, listagem de envios do n8n) continuam exatamente como +estão hoje — só o wrapper de exibição (fechado/aberto) muda. + +## Fora de escopo + +- Lembrar o estado aberto/fechado entre recarregamentos de página. +- Abrir automaticamente alguma seção por padrão (as duas começam fechadas). +- Qualquer mudança nos dados exibidos, na paginação, no limite de 20 ou no + botão de limpar log. + +## Arquivos afetados + +- `app/templates/log.html` — envolver cada seção em `
`/``, + adicionar o botão Mostrar/Ocultar e a seta indicadora dentro do `summary`. +- `app/static/estilo.css` — estilo do `
`/`` (remoção do + marcador padrão do navegador, seta customizada que gira com `[open]`, + espaçamento do botão dentro do `summary`). +- Um pequeno `