Roadmap — filtro que mostra o que está ativo

Mockup interativo (pode clicar em tudo): o bloco expansível de /projects/:id/roadmap — RoadmapToolbar.tsx + RoadmapFiltersBar.tsx — redesenhado para ocupar menos altura, dizer no resumo fechado todos os filtros ativos e permitir limpar com 1 toque.

Base origin/main = 2cf472d0 · 14 tarefas de exemplo · debounce de 250 ms igual ao real.

1 · O que dói hoje ANTES

Reprodução fiel do estado atual (estático). O fechado mostra só Zoom · Agrupar — busca, status, prioridade e tag ativos ficam invisíveis. Os 5 controles empilham 1 por linha no mobile (~400 px).

ANTES · mobile 360 · fechado~400px p/ abrir
12 out → 2 nov 2026
Dor A — resumo cego: há 4 filtros ativos (busca “api”, 2 status, Alta, #backend) e o fechado não diz nenhum. Só um contador genérico. O dono não sabe o que está recortando a lista.
ANTES · desktop · aberto (5 controles empilhados)~400px verticais
12 out → 2 nov 2026
Dor B — altura: busca + 3 selects + limpar = 5 linhas full-width. Dor C — sem [x] na busca: para apagar “api” precisa selecionar o texto. Dor D — selects sem preview: “Todos os status” não diz que 2 estão marcados nem quantas tarefas sobram. Dor E — sem contador: ninguém sabe se o recorte deu 3 ou 300 tarefas.

2 · Proposta — resumo que conta tudo DEPOIS · interativo

Pode clicar: digite na busca (debounce 250 ms igual ao real), marque status/prioridade, troque a tag, remova chips, use Limpar. Os dois quadros são independentes. Estado inicial = o exemplo do pedido (busca “api” · 2 status · Alta · #backend).

DEPOIS · mobile 360scroll-x nos filtros
DEPOIS · desktopgrid 2 col
Como ler o fechado: Semana · Status (zoom · agrupar) + 1 token por filtro ativo + contador N de 14 tarefas + Limpar sempre à vista. Fechado com filtro = 1 linha, ~44 px. Aberto = busca (1 linha) + grid de filtros + chips + contador + prévia da lista.

3 · O que muda no código

DorMudançaArquivo
A · resumo cegoResumo fechado vira lista de tokens: zoom · agrupar · cada filtro ativo · contador · Limpar inline. Badge genérico some.RoadmapToolbar.tsx (prop summary pronta do hook)
B · 5 linhasBusca 1 linha com [x]; selects em grid 2 col (desktop) / scroll-x com snap (mobile 360). Aberto cai de ~400 px para ~230 px.RoadmapFiltersBar.tsx (só CSS + botão)
C · busca sem [x]Botão [x] aparece com texto; limpa na hora (cancela o debounce, como o “Limpar filtros” já faz). Indicador “…” durante os 250 ms.RoadmapFiltersBar.tsx (typeSearch + timer existentes)
D · sem previewCada seletor mostra (n) no rótulo; chips removíveis por filtro logo abaixo; “Limpar tudo”.RoadmapFiltersBar.tsx + hasFilters (já existe em roadmapGroups.ts)
E · sem contador“N de M tarefas” com aria-live no painel + repetido no resumo fechado. Hook já tem items.length.useRoadmapView.ts (expõe total) · zero chamada nova à API
URL intactaNada muda no esquema: roadmapUrl.ts não precisa de alteração — link copiado continua levando o recorte.lib/roadmapUrl.ts (intocado)
Fase 2 (opcional, precisa de API): contagem por opção dentro dos seletores — ex. “Em andamento (5)”. Hoje a janela da API não devolve esses agregados; dá para fazer depois sem redesenhar nada (só o miolo do dropdown).