Merge pull request #730 from fsolla/plans/plan-issue-43

plan(C139): remove rascunho do C135 (cancelado no lote 2026-08-13)
This commit is contained in:
Francisco Solla 2026-08-13 15:59:00 +00:00 committed by GitHub
commit bef67a7bf6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 0 additions and 622 deletions

View file

@ -1,516 +0,0 @@
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>
UI draft — Pessoas mobile: feed e cards edge-to-edge com edição por bottom drawer e faixa de
status
</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-5xl p-8">
<p class="max-w-xl text-sm text-zinc-400">
Mesa (staff) no celular: o feed de pessoas em /campanha/pessoas é edge-to-edge, o primeiro
card cola no omnibox (chips dentro do campo), cada linha/campo do card abre um bottom drawer
para editar (tap em chip/label/telefone/nome), tocar no vazio do card abre a ficha, e uma
faixa vertical à direita sinaliza o status de liderança. Chips com fundo branco e borda =
pessoa; chips com fundo cinza = município; a linha Assessora pode ter os dois. Cenas: feed
com os estados de status, drawer de linha (municípios), drawer de texto (nome).
</p>
<section data-shot="feed" class="mt-6">
<p class="mb-2 text-xs text-zinc-500">Cena mobile — feed (390px)</p>
<div class="w-[390px] border border-zinc-700 bg-zinc-100 text-zinc-900">
<div class="sticky top-0 z-10 border-b border-zinc-300 bg-zinc-100 px-3 pt-3 pb-1">
<div
class="flex min-h-9 flex-wrap items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2 py-1"
>
<span
class="rounded-full border border-zinc-400 bg-white px-2 py-0.5 text-xs text-zinc-600"
>
Capacidade: Liderança ✕
</span>
<span
class="rounded-full border border-zinc-400 bg-white px-2 py-0.5 text-xs text-zinc-600"
>
Apoio: Engajado ✕
</span>
<span class="text-sm text-zinc-400">Buscar pessoa…</span>
</div>
</div>
<ul class="flex flex-col">
<!-- Engajado: faixa vermelha sólida -->
<li class="relative border-b border-zinc-300 bg-white px-4 py-3">
<span
class="absolute top-0 right-0 h-full w-1.5 bg-red-600"
aria-hidden="true"
></span>
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-xl font-semibold leading-tight">Nome da Pessoa</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
</div>
<div class="flex shrink-0 flex-col items-end gap-1">
<span class="flex gap-2 text-zinc-500">
<span aria-hidden="true">▢</span><span aria-hidden="true">◌</span
><span aria-hidden="true">✕</span>
</span>
<p class="text-sm text-zinc-500">(00) 00000-0000</p>
</div>
</div>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessorado por</span>
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>
Assessor Exemplo
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Pessoa Assessorada</span
>
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Outra Pessoa</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município A</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>+2</span
>
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município B</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município C</span
>
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Dobra em</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município D</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município E</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>+11</span
>
</span>
</div>
</li>
<!-- Lembrança: faixa vermelha 50% -->
<li class="relative border-b border-zinc-300 bg-white px-4 py-3">
<span
class="absolute top-0 right-0 h-full w-1.5 bg-red-300"
aria-hidden="true"
></span>
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-xl font-semibold leading-tight">Outra Pessoa</p>
<p class="truncate text-sm text-zinc-500">Nome de Legenda (PT)</p>
</div>
<div class="flex shrink-0 flex-col items-end gap-1">
<span class="flex gap-2 text-zinc-500">
<span aria-hidden="true">▢</span><span aria-hidden="true">◌</span
><span aria-hidden="true">✕</span>
</span>
<p class="text-sm text-zinc-500">(00) 00000-0000</p>
</div>
</div>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessorado por</span>
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>
Assessor Exemplo
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Pessoa Assessorada</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município A</span
>
</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município B</span
>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Dobra em</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município C</span
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município D</span
>
</span>
</div>
</li>
<!-- A abordar: sem faixa; linhas vazias ficam visíveis -->
<li class="relative border-b border-zinc-300 bg-white px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-xl font-semibold leading-tight">Pessoa a Abordar</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
</div>
<div class="flex shrink-0 flex-col items-end gap-1">
<span class="flex gap-2 text-zinc-500">
<span aria-hidden="true">▢</span><span aria-hidden="true">◌</span
><span aria-hidden="true">✕</span>
</span>
<p class="text-sm text-zinc-500">(00) 00000-0000</p>
</div>
</div>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessorado por</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município B</span
>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Dobra em</span>
<span class="flex flex-wrap gap-1"></span>
</div>
</li>
<!-- Sem liderança: sem faixa -->
<li class="relative border-b border-zinc-300 bg-white px-4 py-3">
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-xl font-semibold leading-tight">Pessoa Sem Liderança</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
</div>
<div class="flex shrink-0 flex-col items-end gap-1">
<span class="flex gap-2 text-zinc-500">
<span aria-hidden="true">▢</span><span aria-hidden="true">◌</span
><span aria-hidden="true">✕</span>
</span>
<p class="text-sm text-zinc-500">(00) 00000-0000</p>
</div>
</div>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessorado por</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município A</span
>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Dobra em</span>
<span class="flex flex-wrap gap-1"></span>
</div>
</li>
<!-- Negativo: sem faixa, card com estilo disabled (ainda interativo) -->
<li class="relative border-b border-zinc-300 bg-white px-4 py-3 opacity-60">
<div class="flex items-start justify-between gap-2">
<div class="min-w-0">
<p class="truncate text-xl font-semibold leading-tight">Pessoa Negativa</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
</div>
<div class="flex shrink-0 flex-col items-end gap-1">
<span class="flex gap-2 text-zinc-500">
<span aria-hidden="true">▢</span><span aria-hidden="true">◌</span
><span aria-hidden="true">✕</span>
</span>
<p class="text-sm text-zinc-500">(00) 00000-0000</p>
</div>
</div>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessorado por</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="flex flex-wrap gap-1"></span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município B</span
>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Dobra em</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município C</span
>
</div>
</li>
</ul>
</div>
</section>
<section data-shot="sheet-municipios" class="mt-6">
<p class="mb-2 text-xs text-zinc-500">
Cena mobile — drawer de linha (municípios de Dobra em) aberto sobre o feed
</p>
<div class="relative w-[390px] border border-zinc-700 bg-zinc-100 text-zinc-900">
<div class="sticky top-0 z-10 border-b border-zinc-300 bg-zinc-100 px-3 pt-3 pb-1">
<div
class="flex min-h-9 flex-wrap items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2 py-1"
>
<span
class="rounded-full border border-zinc-400 bg-white px-2 py-0.5 text-xs text-zinc-600"
>
Apoio: Engajado ✕
</span>
<span class="text-sm text-zinc-400">Buscar pessoa…</span>
</div>
</div>
<div class="px-4 py-3">
<p class="truncate text-xl font-semibold leading-tight">Nome da Pessoa</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Lidera</span>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município B</span
>
</div>
</div>
<div class="absolute inset-0 bg-zinc-900/40"></div>
<div class="absolute inset-x-0 bottom-0 rounded-t-xl border-t border-zinc-300 bg-white">
<div class="mx-auto mt-2 h-1 w-10 rounded-full bg-zinc-300"></div>
<div class="border-b border-zinc-200 px-4 pt-3 pb-3">
<p class="text-base font-semibold">Municípios da dobradinha</p>
<p class="text-sm text-zinc-500">Nome da Pessoa</p>
</div>
<div class="max-h-64 overflow-y-auto px-4 pt-3 pb-2">
<div class="flex flex-col gap-1">
<div
class="flex min-h-11 items-center justify-between gap-2 rounded-md border border-zinc-300 px-2"
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município D</span
>
<span class="text-sm text-zinc-500">✕</span>
</div>
<div
class="flex min-h-11 items-center justify-between gap-2 rounded-md border border-zinc-300 px-2"
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município E</span
>
<span class="text-sm text-zinc-500">✕</span>
</div>
</div>
<div
class="mt-2 flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3 py-2"
>
<span class="text-sm text-zinc-400">Buscar município, território ou ZE…</span>
</div>
<p class="py-2 text-sm text-zinc-400">Sugestões de municípios</p>
<div class="flex flex-col gap-1">
<div class="flex items-start gap-2 rounded-md px-2 py-2 text-sm">
<span class="font-medium text-zinc-700">Território Exemplo</span>
<span class="ml-auto text-xs text-zinc-400">Território · 8 municípios</span>
</div>
<div class="flex items-start gap-2 rounded-md bg-zinc-100 px-2 py-2 text-sm">
<span class="font-medium text-zinc-700">Município Exemplo</span>
<span class="ml-auto text-xs text-zinc-400">Município</span>
</div>
</div>
</div>
<div class="border-t border-zinc-200 px-4 py-3">
<div
class="flex h-11 items-center justify-center rounded-md border border-zinc-300 text-sm font-medium text-zinc-700"
>
Fechar
</div>
</div>
</div>
</div>
</section>
<section data-shot="sheet-assessora" class="mt-6">
<p class="mb-2 text-xs text-zinc-500">
Cena mobile — drawer unificado da linha Assessora (um input busca pessoas e municípios)
</p>
<div class="relative w-[390px] border border-zinc-700 bg-zinc-100 text-zinc-900">
<div class="sticky top-0 z-10 border-b border-zinc-300 bg-zinc-100 px-3 pt-3 pb-1">
<div
class="flex min-h-9 flex-wrap items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2 py-1"
>
<span class="text-sm text-zinc-400">Buscar pessoa…</span>
</div>
</div>
<div class="px-4 py-3">
<p class="truncate text-xl font-semibold leading-tight">Nome da Pessoa</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
<div class="mt-2 flex items-center gap-2">
<span class="w-24 shrink-0 text-[10px] text-zinc-400">Assessora</span>
<span class="flex flex-wrap gap-1">
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Pessoa Assessorada</span
>
<span class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município A</span
>
</span>
</div>
</div>
<div class="absolute inset-0 bg-zinc-900/40"></div>
<div class="absolute inset-x-0 bottom-0 rounded-t-xl border-t border-zinc-300 bg-white">
<div class="mx-auto mt-2 h-1 w-10 rounded-full bg-zinc-300"></div>
<div class="border-b border-zinc-200 px-4 pt-3 pb-3">
<p class="text-base font-semibold">Assessora</p>
<p class="text-sm text-zinc-500">Nome da Pessoa</p>
</div>
<div class="max-h-64 overflow-y-auto px-4 pt-3 pb-2">
<div class="flex flex-col gap-1">
<div
class="flex min-h-11 items-center justify-between gap-2 rounded-md border border-zinc-300 px-2"
>
<span
class="rounded border border-zinc-400 bg-white px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Pessoa Assessorada</span
>
<span class="text-sm text-zinc-500">✕</span>
</div>
<div
class="flex min-h-11 items-center justify-between gap-2 rounded-md border border-zinc-300 px-2"
>
<span
class="rounded bg-zinc-200 px-1.5 py-0.5 text-xs font-semibold text-zinc-600"
>Município A</span
>
<span class="text-sm text-zinc-500">✕</span>
</div>
</div>
<div
class="mt-2 flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-3 py-2"
>
<span class="text-sm text-zinc-400">Buscar pessoa ou município…</span>
</div>
<p class="py-2 text-sm text-zinc-400">Sugestões de pessoas e municípios</p>
<div class="flex flex-col gap-1">
<div class="flex items-start gap-2 rounded-md bg-zinc-100 px-2 py-2 text-sm">
<span class="font-medium text-zinc-700">Pessoa Exemplo</span>
<span class="ml-auto text-xs text-zinc-400">Pessoa</span>
</div>
<div class="flex items-start gap-2 rounded-md px-2 py-2 text-sm">
<span class="font-medium text-zinc-700">Município Exemplo</span>
<span class="ml-auto text-xs text-zinc-400">Município</span>
</div>
<div class="flex items-start gap-2 rounded-md px-2 py-2 text-sm">
<span class="font-medium text-zinc-700">Território Exemplo</span>
<span class="ml-auto text-xs text-zinc-400">Território · 8 municípios</span>
</div>
</div>
</div>
<div class="border-t border-zinc-200 px-4 py-3">
<div
class="flex h-11 items-center justify-center rounded-md border border-zinc-300 text-sm font-medium text-zinc-700"
>
Fechar
</div>
</div>
</div>
</div>
</section>
<section data-shot="sheet-nome" class="mt-6">
<p class="mb-2 text-xs text-zinc-500">
Cena mobile — drawer de texto (edição de nome) aberto sobre o feed
</p>
<div class="relative w-[390px] border border-zinc-700 bg-zinc-100 text-zinc-900">
<div class="sticky top-0 z-10 border-b border-zinc-300 bg-zinc-100 px-3 pt-3 pb-1">
<div
class="flex min-h-9 flex-wrap items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2 py-1"
>
<span class="text-sm text-zinc-400">Buscar pessoa…</span>
</div>
</div>
<div class="px-4 py-3">
<p class="truncate text-xl font-semibold leading-tight">Nome da Pessoa</p>
<p class="truncate text-sm text-zinc-500">Cidade Base</p>
</div>
<div class="absolute inset-0 bg-zinc-900/40"></div>
<div class="absolute inset-x-0 bottom-0 rounded-t-xl border-t border-zinc-300 bg-white">
<div class="mx-auto mt-2 h-1 w-10 rounded-full bg-zinc-300"></div>
<div class="border-b border-zinc-200 px-4 pt-3 pb-3">
<p class="text-base font-semibold">Editar nome</p>
<p class="text-sm text-zinc-500">Nome da Pessoa</p>
</div>
<div class="px-4 pt-4 pb-2">
<div
class="flex min-h-11 items-center rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-700"
>
Nome da Pessoa
<span class="ml-auto h-4 w-px animate-pulse bg-zinc-400"></span>
</div>
<p class="mt-1 text-xs text-zinc-500">Salvo automaticamente ou Salvar ao final.</p>
</div>
<div class="border-t border-zinc-200 px-4 py-3">
<div
class="flex h-11 items-center justify-center rounded-md bg-red-600 text-sm font-semibold text-white"
>
Salvar
</div>
<div
class="mt-2 flex h-11 items-center justify-center rounded-md border border-zinc-300 text-sm font-medium text-zinc-700"
>
Fechar
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>

View file

@ -1,106 +0,0 @@
# Pessoas mobile: feed e cards edge-to-edge com edição por bottom drawer e faixa de status de liderança
Status: rascunho
Atualizado em: 2026-08-11
Issue: #714
Priority: P1
Model: composer-2.5
Impeccable: B — encaixe na tela mobile existente de `/campanha/pessoas` (interação tap→drawer já existe no desktop C116; aqui vira a superfície mobile)
Rascunho UI: docs/plans/pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft.html + PNGs embutidos abaixo
Appetite: ~1–1,5 dia eng; um outcome verificável (feed mobile redesenho + edição por drawer + faixa de status)
Responsável: —
## Intenção
No celular, a lista de pessoas hoje é uma sequência de linhas simples e **só de leitura** (nome, telefone, badges sem interação) — a mesa no campo não consegue fazer nada além de abrir o WhatsApp. O desktop já edita "onde você vê" (C116: chips, nome, telefone, base). O pedido: levar o mesmo princípio ao mobile com um card denso e edge-to-edge — cada linha/campo do card vira uma porta de edição (bottom drawer), o toque no vazio do card abre a ficha, e uma faixa vertical à direita do card comunica o status de liderança de relance (é a leitura que orienta quem abordar no corpo a corpo).
## Persona e fluxo
- **Persona / contexto:** coordenador, candidato e assessor na mesa, no celular (o assessor continua vendo só o recorte da carteira dele e editando só o que a matiz C116 permite).
- **Job principal:** olhar o feed, entender num relance quem está engajado/lembrança e ainda "a abordar", e corrigir um dado (nome, telefone, municípios de uma capacidade) sem sair da lista nem abrir a ficha.
- **Fluxo desejado:** abro `/campanha/pessoas` no celular → o feed é edge-to-edge, o primeiro card cola no omnibox → vejo a faixa de status na direita (sem faixa = sem liderança ou a abordar; vermelho claro = lembrança; vermelho cheio = engajado; card apagado = negativo) → toco num chip de "Dobra em" e o bottom drawer abre com os municípios daquela linha para editar → toco no vazio do card e vou para a ficha da pessoa → toco no telefone e edito o telefone num drawer de texto.
- **Anti-goals de produto:** não é um segundo layout de tabela desktop no mobile (sem headers sortáveis na tela — a ordenação continua no omnibox, C125); não é um cadastro paralelo de pessoa (a ficha continua `Contact`); a faixa de status **não** é editável a partir do card (status continua no fluxo de lideranças).
### Esboço de fluxo (B/C/D)
```text
[/campanha/pessoas mobile] → [feed edge-to-edge, 1º card colado no omnibox]
├─ tap no vazio do card → [/campanha/pessoas/[id] ficha]
├─ tap no chip/label de uma linha (Assessora | Lidera | Dobra em | Assessorado por)
│ → [bottom drawer daquela linha inteira: chips + busca + remover/adicionar]
├─ tap no nome / telefone / base → [bottom drawer de texto do campo]
└─ faixa direita lida no scroll (engajado=cheio · lembrança=50% · negativo=apagado · a abordar/sem liderança=ausente)
```
### Rascunho UI (B/C/D)
![Rascunho UI — feed mobile com estados de status](pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft-feed.png)
![Rascunho UI — drawer de linha (municípios) aberto](pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft-sheet-municipios.png)
![Rascunho UI — drawer unificado da linha Assessora (um input para pessoas e municípios)](pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft-sheet-assessora.png)
![Rascunho UI — drawer de texto (nome) aberto](pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft-sheet-nome.png)
## Objetivo e aceite
- No mobile (`< md`), os cards de pessoa ficam edge-to-edge (sem moldura lateral) e o primeiro card começa colado no omnibox de filtro — mesmo chassi do precedente de municípios.
- **Omnibox:** os chips de filtro ficam **dentro do campo** (ao lado do texto digitado), nunca numa linha abaixo dele — mesmo padrão do chassis compartilhado de hoje.
- Cada card mostra: nome com subtítulo (cidade-base **ou** nome de legenda com partido, quando houver — nunca os dois), ações (convidar quando houver liderança, WhatsApp, apagar para coordenação) no topo à direita, **telefone abaixo das ações** (alinhado à direita), e as quatro linhas **"Assessorado por", "Assessora", "Lidera" e "Dobra em" sempre visíveis** (mesmo vazias, só com o label) com chips (+N para overflow).
- **Linguagem visual dos chips:** fundo branco com borda cinza = **pessoa**; fundo cinza = **município**. A linha "Assessorado por" mostra pessoas; "Lidera" e "Dobra em" mostram municípios; a linha "Assessora" pode mostrar **os dois tipos** — as pessoas que esta pessoa assessora e os municípios da carteira dela (quando staff).
- Tocar em qualquer chip ou no label de uma linha abre o bottom drawer para editar **aquela linha inteira**; tocar no telefone abre o drawer do telefone; no nome, o do nome; na base, o da base — as mesmas escritas e a mesma matiz de permissão do desktop (assessor edita só o que está na carteira; Assessora/Assessorado seguem restritos). A linha "Assessora" abre **um drawer só, com um único input de busca que recebe valores de pessoas e de municípios** (chips atribuídos das duas naturezas listados com remoção).
- Tocar no vazio do card abre a ficha da pessoa (`/campanha/pessoas/[id]`); os elementos interativos interceptam o toque sem navegar.
- Faixa vertical de ~6px na borda direita do card conforme o status de liderança: sem liderança → sem faixa; "A abordar" → sem faixa; "Em disputa" → sem faixa; "Negativo" → sem faixa **e** card com visual desabilitado (mas ainda interativo); "Lembrança" → vermelho claro (~50% de opacidade); "Engajado" → vermelho de destaque do app.
- Desktop (`md+`) intacto: a tabela C116 não muda.
## Dados (intenção)
- **Vou apresentar dados?** Não — a faixa é um código visual de status (comunicação de relance), não métrica. Forma da cor: fixada no aceite acima (produto), os tokens exatos ficam para o plano de implementação.
- **Natureza dupla da linha "Assessora":** a linha mostra pessoas (quem esta pessoa assessora — o inverso da relação de assessorado) e municípios (a carteira dela quando staff). O executor precisa enxergar as duas naturezas no dado de origem da pessoa; o drawer da linha é um só, com **uma busca única** sobre pessoas e municípios (decidido no gate).
## Direção no codebase (hipótese)
- **Áreas prováveis:** `src/app/(campaign)/campanha/(app)/pessoas/page.tsx` (cards mobile atuais `PeopleMobileCards` e matiz de editabilidade C116), `src/components/campaign/people/` (cells C116: `PeopleMunicipalityCell`, `PeopleAssessoradoCell`; `PeopleMunicipalityCellMobile` é substituída), `src/components/campaign/shared/CampaignListSheetHost.tsx` (bottom drawer compartilhado da superfície, hoje escopado à tabela desktop), `src/components/campaign/shared/CampaignListOmnibox.tsx` + scrollport (chassi B196/B184 de omnibox colado/edge-to-edge).
- **Reuso do card mobile de municípios (revisão B193/B196/B200):** `MunicipalityMobileCard.tsx` já resolve a anatomia pedida aqui — **título/subtítulo** do card (`h3` com link esticado `after:inset-0` + subtítulo `text-sm text-muted-foreground`), toque no vazio caindo no link da ficha, **faixa direita via `border-r-[6px] border-r-primary`** (o card de municípios já usa a faixa de 6px para prioridade — mesmo mecanismo da faixa de status de liderança), blocos de chip com label acima, e edição por bottom sheet. Preferência de produto (revisão recente): **reaproveitar esses padrões e seguir progredindo para uma coleção de componentes voltados aos cards mobile de entidades de lista** — o executor deve reutilizar/estender o que já existe em vez de criar um sistema de card paralelo (se algum primitivo precisar sair do card de municípios para ser compartilhado, é direção bem-vinda — decisão do executor).
- **Precedente a olhar:** B196/B184 (omnibox colado + cards edge-to-edge de municípios), B193/B200 (card denso de municípios e sua revisão de encaixes), C116 (cells quiet + drawers por célula), C125 (omnibox mobile), C128 (ciclo de vida de capacidade, em andamento).
- **Risco de acoplamento:** a edição mobile precisa respeitar a **mesma** matiz de acesso do desktop (assessor não edita Assessora/Assessorado; matriz `buildPeopleEditability`); o drawer compartilhado não pode virar "um Drawer por célula" (regra B42/miss #52); leader lockdown não se aplica (a rota é staff-only); mudanças no `MunicipalityMobileCard`/primitivas compartilhadas não podem quebrar a lista de municípios (regressão coberta pelos e2e existentes de municípios).
## Dependências
- **Soft:** C128 (ciclo de vida "qualquer pessoa ganha capacidade") — se estiver em `main` na execução, a linha vazia (ex. "Dobra em" sem chips) abre o drawer para **criar** a capacidade; se não, linhas vazias renderizam só o label, sem drawer.
- **Soft:** C130 (renomear coluna "Aliada em" → "Dobra em" no desktop) — o card adota "Dobra em" de qualquer forma (mock do usuário), e a consistência com o desktop é esperada quando C130 entrar.
## Fora de escopo
- Editar o **status de liderança** a partir do card (faixa é display-only; status continua no fluxo de lideranças/ficha).
- Criar pessoa nova na lista (C132) e "Salvador" agregado no dropdown (C131) — itens próprios da fila.
- Mudar a **coluna "Assessora" da tabela desktop** para também mostrar pessoas — o mock e este item são mobile; o desktop segue como está (C128/C130 cuidam do desktop).
- Polir a ficha `/campanha/pessoas/[id]` — só a navegação por toque no card.
- Mudar o desktop, a ordenação no mobile (C125) ou o omnibox além do necessário para o encaixe do primeiro card.
## Rabbit holes de produto
- **Cada campo vira um sheet próprio de engenharia.** Se alguém "só completar", o nome/telefone/base ganham três drawers com três fluxos de save diferentes. **Corte neste item:** um único drawer de texto por campo (mesma ação de escrita do desktop, mesmo feedback de "Salvo."), sem validação nova além da que já existe nos formulários atuais.
- **Spreadsheet mode mobile.** O pedido é edição por campo tocado — não edição em lote, não "todos os cards editáveis de uma vez". **Corte:** nada além do tap→drawer.
- **Paleta nova para os status.** A faixa usa o vermelho de destaque do app e a mesma cor a 50% — sem criar escala de cores nova nem status colors em outras listas. **Corte:** só o vermelho, só em pessoas.
- **Linhas vazias sempre visíveis inflam o card.** O mock mostra os labels mesmo sem chips; para pessoas com poucas capacidades o card cresce. **Corte:** labels sempre visíveis (são o alvo do toque para adicionar — o "where you see" mobile), chips só quando houver valor.
- **"Assessora" vira duas relações no mesmo drawer.** A linha mistura pessoas e municípios; um sheet que tenta "editar tudo de uma vez" pode acabar em estado de formulário híbrido. **Corte neste item:** um drawer por linha com **um único input** que busca pessoas e municípios no mesmo índice (sugestões rotuladas por natureza) — a máquina de escrita existente por chips, sem submachine nova.
- **Sistema de card paralelo.** O card de municípios já tem título/subtítulo, faixa lateral e sheet-edit; criar o card de pessoas "do zero" duplicaria a anatomia. **Corte:** reusar/extender os padrões de `MunicipalityMobileCard` (e extrair primitivas compartilhadas se fizer sentido na execução) — direção explícita da revisão de UI de municípios (B200).
## Questões em aberto (produto)
_Decididas no gate 2026-08-11 (não reabrir sem evidência nova):_
- **"Em disputa"?** **Decidido:** sem faixa, como "A abordar" — a faixa comunica compromisso; disputa não é compromisso (filtro por status já distingue no omnibox).
- **Linhas de capacidade vazias?** **Decidido:** labels sempre visíveis; tocar abre o drawer (vazio; adicionar vira o ciclo de vida do C128 quando ele estiver em main).
- **Terceiro ícone do mock?** **Decidido:** sem menu ⋮ — as três ações explícitas atuais (convidar/WhatsApp/apagar) no topo do card, telefone abaixo delas.
- **Subtítulo do card?** **Decidido:** cidade-base **ou** nome de legenda "(partido)" quando a pessoa tem (C129) — nunca os dois juntos.
- **Drawer da linha "Assessora" — duas naturezas?** **Decidido:** um drawer só, com **um único input** que recebe valores de pessoas e de municípios (chips das duas naturezas com remoção; sugestões rotuladas por natureza).
## Referências
- Rascunho UI (gate): [pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft.html](pessoas-mobile-feed-cards-edicao-drawer-status-ui-draft.html) + PNGs embutidos acima
- Arquivos para o executor abrir primeiro: `src/app/(campaign)/campanha/(app)/pessoas/page.tsx` (cards + matiz C116), `src/components/campaign/people/PeopleMunicipalityCell.tsx` / `PeopleAssessoradoCell.tsx`, `src/components/campaign/shared/CampaignListSheetHost.tsx`, `src/components/campaign/shared/CampaignListOmnibox.tsx`
- Precedentes: `docs/plans/municipios-mobile-polimento-omnibox-cards.md` (B196/B184), `docs/plans/pessoas-pos-c117-ux.md` (C125), `docs/plans/pessoas-edicao-inplace-lista.md` (C116)
- Card mobile de municípios (reuso direto): `src/components/campaign/municipality/MunicipalityMobileCard.tsx` (título/subtítulo + link esticado + faixa `border-r-[6px]` + sheet-edit) e a revisão B200 dos encaixes
- `AGENTS.md` — modelo Municípios, roles, B42/miss #52 (um drawer por superfície)