docs(B71–B72): register home search polish and action strip gap.

Captures field feedback on search result bullets, group title, full-bleed hover, and tighter action strip spacing in UX-1.
This commit is contained in:
Francisco Ignácio Fontoura Solla 2026-07-29 22:12:35 -03:00
parent 6c6a33d89f
commit 0bedd12482
3 changed files with 197 additions and 6 deletions

View file

@ -0,0 +1,85 @@
# Reduzir espaçamento horizontal da strip de ações do Início
Status: rascunho
Atualizado em: 2026-07-29
Item do roadmap: [docs/roadmap.md](../roadmap.md) (Trilha B — **B72**; chassis UX-1 / pós-B58)
Impeccable: B — uma linha de layout em `CampaignHomeActionStrip`
Appetite: ~0,25 dia eng (token Tailwind; sem migration, action ou URL)
Responsável: —
## Design (Impeccable)
Âncoras: `PRODUCT.md` / `DESIGN.md` · tema `campaign`.
Na implementação: craft compacto → critique → polish (checar 6 ícones staff no iPhone estreito + pan B67 ✓).
Brief compacto:
- **Persona:** assessor/CG escolhendo ação rápida na faixa horizontal.
- **Job principal:** ver mais ações por viewport sem perder alvo de toque.
- **Estratégia de cor:** inalterada (B58 ✓).
- **Anti-goals:** comprimir até labels de duas linhas colidirem; remover `snap-x` ou pan.
## Dados → decisão → apresentação
Dados: N/A — superfície de atalhos, sem métricas.
## Contexto
**B45 ✓** + **B58 ✓** + **B67 ✓** montaram `CampaignHomeActionStrip` com `gap-6` entre itens do `<ul>` (`src/components/campaign/dashboard/CampaignHomeActionStrip.tsx`, linha ~141). Feedback 2026-07-29: distância horizontal entre botões de ação **grande demais** no mobile — a strip parece esparça e exige mais pan para ver as seis ações staff.
## Objetivos
- Reduzir `gap` horizontal da lista (recomendação inicial: `gap-6` → `gap-3` ou `gap-4`; validar no critique que rótulos de duas linhas em `w-[4.75rem]` não colidem).
- Manter: `snap-x`, `[touch-action:pan-x]`, scrollbar oculta, drag fine-pointer (B67), escala no círculo (B58).
- Atualizar e2e `campaignHomeActions.e2e.spec.ts` só se assertar distância/posição (improvável).
- Sem migration, collection, server action ou mudança de catálogo `campaignHomeActions.ts`.
## Decisões travadas
- **Só `gap`, não largura do botão.** `CampaignHomeActionButton` mantém `w-[4.75rem]` e círculo 48px. **Rejeitado:** encolher círculo abaixo de 44px (SC 2.5.5).
- **Mesmo gap em coarse e fine.** **Rejeitado:** `gap-3` só no mobile — inconsistência visual desktop/mobile sem ganho claro.
## Questões em aberto
- **Valor final do gap?** **Opções:** A `gap-3` (12px) | B `gap-4` (16px). **Recomendação:** **B** — metade do atual sem apertar demais labels de duas linhas; critique pode ajustar para A se ainda parecer largo.
## Abordagem proposta
```mermaid
flowchart LR
Strip["CampaignHomeActionStrip<br/>ul gap-4"]
Btn["CampaignHomeActionButton × N"]
Strip --> Btn
```
Componentes:
- **`CampaignHomeActionStrip.tsx`**: alterar classe `gap-6` → `gap-4` (ou valor escolhido no critique).
- **Migration:** Sem migration.
## Dependências
- Soft: **B44 ✓**, **B58 ✓**, **B67 ✓** (strip estável). Nenhuma dura.
## Não escopo
- Novos rótulos, animação, thumb-zone (**B65**), resultados de busca (**B71**).
## Rabbit holes
- **Responsivo `gap-3 md:gap-6`.** Mitigação: um valor único salvo pedido explícito pós-critique.
## Adiado com gatilho
Nenhum neste item.
## Referências
- `src/components/campaign/dashboard/CampaignHomeActionStrip.tsx`
- `src/components/campaign/dashboard/CampaignHomeActionButton.tsx`
- `docs/plans/polimento-strip-acoes-inicio.md` (B58)
- `docs/plans/restaurar-pan-strip-acoes-inicio.md` (B67)
- `tests/e2e/campaignHomeActions.e2e.spec.ts`
Qualidade de decisão: 5/5

View file

@ -0,0 +1,98 @@
# Polimento visual dos resultados de busca no Início
Status: rascunho
Atualizado em: 2026-07-29
Item do roadmap: [docs/roadmap.md](../roadmap.md) (Trilha B — **B71**; chassis UX-1 / pós-B48)
Impeccable: B — encaixe em `HomeSearchMunicipalityGroup` + `HomeSearchHitRow` (B48 ✓)
Appetite: ~0,25–0,5 dia eng (CSS/markup; sem migration, action ou rota)
Responsável: —
## Design (Impeccable)
Âncoras: `PRODUCT.md` / `DESIGN.md` (register product) · tema `data-theme='campaign'`.
Na implementação (`implement-roadmap-item`): craft compacto → critique → polish (validar Brave PWA mobile + Safari iOS).
Brief compacto:
- **Persona / contexto:** staff no ritual de busca do Início (mobile PWA ou desktop) — quer ler hits sem ruído visual.
- **Job principal:** escanear municípios/TIs e tocar o certo; o grupo “Municípios” é rótulo, não cabeçalho de seção.
- **Estratégia de cor:** Restrained — título `text-muted-foreground` menor; hover `bg-muted` em faixa full-bleed.
- **Edit where you see:** não — só navegação por `Link`.
- **Anti-goals:** card com borda por linha (já rejeitado no B48); título em CAPS tipo dashboard SaaS; bullets herdados do site público.
## Dados → decisão → apresentação
Dados: N/A — lista de navegação; votos 2022 à direita permanecem como no B48 (readout A11 / rollup TI).
## Contexto
**B48 ✓** entregou `HomeSearchMunicipalityGroup` e `HomeSearchHitRow`. Feedback de campo (2026-07-29, PWA mobile Brave):
1. **Bullets** nas linhas de resultado — o `<ul>` não declara `list-none`; o reset global de `ul` em `src/app/(frontend)/styles.css` (`my-6 ml-6 list-disc`) vaza para superfícies da campanha (precedente já citado no E11: fatores em lista precisaram de reset explícito). Safari pode mascarar; Brave mobile não.
2. **Título do grupo** “MUNICÍPIOS” (uppercase + tracking) parece separador forte; pedido: **“Municipios”** (só primeira letra maiúscula), menor, sem linha horizontal, menos espaço até a primeira linha.
3. **Hover/focus** do hit não preenche a largura útil — o `hover:bg-muted/60` fica na caixa do `Link` dentro do padding do scroll (`p-4` no layout `(app)`), não de borda a borda da viewport.
## Objetivos
- Remover marcadores de lista: `list-none m-0 p-0` no `<ul>` (e `list-none` nos `<li>` se necessário); zerar margens herdadas (`my-6 ml-6`, `[&>li]:mt-2`).
- Título do grupo de busca (`resultKind === 'search'` → “Municípios”; suggest → “Sugestões” inalterado): **sentence case** (“Municípios” com acento), `text-[11px]` ou `text-xs` sem `uppercase`/`tracking-wide`, peso normal ou `font-medium` discreto; reduzir `gap` entre título e lista (`gap-0.5` ou equivalente); **sem** `border-b`, `Separator` ou pseudo-elemento de linha.
- Linha de hit: faixa de hover/focus **full-bleed** na área de conteúdo — padrão `-mx-4 px-4 md:-mx-6 md:px-6` no wrapper da linha (espelha `p-4`/`md:p-6` de `campanha/(app)/layout.tsx`) para o fundo ir de borda a borda da tela no mobile; manter alinhamento do texto com o input de busca.
- Regressão visual: desktop Safari + mobile Brave PWA; e2e existente de busca (`campaignHomeSearch` ou equivalente) continua verde.
- Sem migration, collection, server action ou mudança de contrato JSON.
## Decisões travadas
- **Corrigir no componente, não no reset global de `ul`.** O leak do `styles.css` do frontend é conhecido; resetar `ul` no tema campanha é escopo maior (R6). **Rejeitado:** alterar `styles.css` neste slice.
- **Full-bleed só na faixa interativa**, não mover o bloco inteiro de resultados para fora do padding — texto alinhado ao campo de busca. **Rejeitado:** `width: 100vw` sem compensar padding (cria scroll horizontal).
- **“Municipios” = “Municípios”** (grafia correta pt-BR; pedido era capitalização, não remover acento). **Rejeitado:** string sem acento.
- **i18n:** strings visíveis em pt-BR; identificadores de componente em inglês.
## Questões em aberto
- **Cantos arredondados no hover full-bleed?** **Opções:** A sem `rounded` na faixa | B `rounded-none` explícito | C manter `rounded-md` só no desktop. **Recomendação:** **A/B** — faixa reta de borda a borda no mobile; no desktop o bleed já é menor visualmente.
## Abordagem proposta
```mermaid
flowchart LR
G["HomeSearchMunicipalityGroup<br/>título + ul list-none"]
R["HomeSearchHitRow<br/>bleed wrapper + Link hover"]
G --> R
```
Componentes:
- **`HomeSearchMunicipalityGroup.tsx`**: classes do `<h2>` e do `<section>`; `ul` com `list-none m-0 p-0`.
- **`HomeSearchHitRow.tsx`**: wrapper externo com margem negativa + padding compensatório; `hover:bg-muted/60` (ou token equivalente) na faixa inteira; `focus-visible` alinhado ao mesmo retângulo.
- **Testes:** unit snapshot de classes (opcional) ou e2e tocando uma linha de resultado; atualizar se assert de título uppercase existir.
- **Migration:** Sem migration.
## Dependências
- Dura: **B48 ✓** (grupo e linha existem). Soft: **B47 ✓** (slot de resultados). Não bloqueia **B49–B55** — outros grupos devem herdar o mesmo `HomeSearchHitRow` quando chegarem.
## Não escopo
- Layout grid/cap de resultados → **B54**. Sugestões empty → **B68 ✓**. Modo focado / animação → **B66**. Espaçamento da strip de ações → **B72**.
## Rabbit holes
- **Reset global de tipografia no tema campanha.** Mitigação: `list-none` local; adiar escopo R6.
- **Bleed diferente por breakpoint sem medir padding do layout.** Mitigação: espelhar exatamente `p-4` / `md:p-6` do `(app)/layout.tsx`.
## Adiado com gatilho
Nenhum neste item.
## Referências
- `docs/roadmap.md` (UX-1, B48)
- `src/components/campaign/dashboard/HomeSearchMunicipalityGroup.tsx`
- `src/components/campaign/dashboard/HomeSearchHitRow.tsx`
- `src/app/(frontend)/styles.css` (reset global `ul`)
- `src/app/(campaign)/campanha/(app)/layout.tsx` (padding do scroll)
- `docs/plans/busca-global-resultados-municipios.md` (B48 — anti-goals de card/CAPS)
- AGENTS.md — naming; Feel the action (hover imediato)
Qualidade de decisão: 4/5

File diff suppressed because one or more lines are too long