mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-13 23:53:05 +00:00
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:
parent
6c6a33d89f
commit
0bedd12482
3 changed files with 197 additions and 6 deletions
85
docs/plans/espacamento-strip-acoes-inicio.md
Normal file
85
docs/plans/espacamento-strip-acoes-inicio.md
Normal 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
|
||||
98
docs/plans/polimento-resultados-busca-inicio.md
Normal file
98
docs/plans/polimento-resultados-busca-inicio.md
Normal 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
Loading…
Reference in a new issue