FLA v4b — Links-only (Option B)

Contexto

Protótipo da Opção B (Links-only) do FIN-11. Abandona completamente o padrão de collapsibles — tudo vira link no estilo "Additional Information", com indicador de contador/empty, e click sempre abre modal.

Consistência máxima — todo item do sidepanel tem o mesmo comportamento: click → modal
Contador visível no link quando houver itens
Empty state com label "empty / leer" — click leva pra adicionar
Read-only com lock icon (mesmo padrão)
Preview opcional de 1 linha para text-only (trade-off de espaço)

Filled · com contador

Link mostra label + contador inline · click abre modal com lista

chat_bubble_outline Kommentare 3 chevron_right gavel Decisions 2 chevron_right pending_actions Pendencies 5 chevron_right

💬 Contador em badge teal. Click = modal com lista completa.

Empty · label "leer"

Sem contador · label "leer" · click ainda leva pra adicionar no modal

chat_bubble_outline Kommentare — leer chevron_right sticky_note_2 Interne Notizen — leer chevron_right pending_actions Pendencies — leer chevron_right

🟢 "— leer" é explícito. Usuário sabe que está vazio sem precisar clicar.

Read-only

Com lock icon · hover neutro · click abre modal view-only

schedule Antragstatus-Historie 5 lock_outline chevron_right history Versions 4 lock_outline chevron_right folder_open Dossier 12 lock_outline chevron_right

🔒 Lock icon + counter muted (cinza). Hover neutro (não vira teal). Modal só de leitura.

Com preview de 1 linha (opcional)

Text-only pode mostrar preview truncado abaixo do label · trade-off de espaço

sticky_note_2 Interne Notizen Kunde hat bereits Beziehung mit der Bank seit 2018… chevron_right description Kreditzweck Investitionen für Ausbau der Produktionshalle chevron_right

🟦 Preview dá contexto rápido sem precisar abrir modal. Custo: ~20px a mais de altura por link.

⬆️ Exemplo de sidepanel completo na Opção B. Tudo segue o mesmo padrão: ícone → label → [contador/preview/empty] → chevron. Zero collapsibles, zero estados de expansão, 100% previsível.

Critério	A Smart Collapsibles	B Links-only
Consistência visual	Média — 3+ tipos de interação (expand, edit, modal)	Alta — 1 padrão único: click → modal
Cliques pra ler conteúdo	1 (expand inline)	1 (abre modal)
Cliques pra editar	2 (expand + Edit) ou 1 (A2)	1 (abre modal com editor)
Preview rápido no sidepanel	Possível — expand inline mostra tudo	Limitado — só 1 linha de preview ou contador
Espaço vertical ocupado	Variável — depende de quantos estão abertos	Fixo — sempre previsível
Scroll do sidepanel	Instável — abrir collapsible pode mover resto	Estável — modal não afeta layout
Acessibilidade	Complexidade: expand ≠ activate ≠ edit	Padrão link + dialog, bem suportado por screen readers
Custo de implementação	Alto — componente stateful, múltiplos modos	Baixo — componente stateless simples
Contexto compartilhado (ler enquanto edita)	Sim — expand inline deixa resto do sidepanel visível	Parcial — modal bloqueia visão do resto
Compatibilidade com IA rearchitecture (FIN-12)	Precisa estados por role/contexto	Qualquer item aparece/desaparece sem layout break

Recomendação inicial

Opção B (Links-only) tem vantagem estratégica por 4 motivos:

Consistência é o maior ganho — usuário aprende 1 padrão e aplica em tudo
Estabilidade de layout — sidepanel não "pula" quando algo abre/fecha
Sinergia com FIN-12 — painéis condicionais (por role ou por contexto) aparecem/desaparecem sem quebrar visual
Manutenção mais barata — menos estados para testar e manter

O trade-off é perder o "expand inline" como preview rápido. Mitigação: preview de 1 linha para text-only + contador para multi-item resolvem o caso de uso "quero saber se tem conteúdo e um resumo" sem precisar abrir modal.

Híbrido possível? Sim — por exemplo, usar Opção A apenas para Kommentare (onde preview inline é realmente útil para ler sem perder contexto) e Opção B para todo o resto. Mas isso reintroduz a inconsistência que a Opção B resolve. Recomendação: ir B puro primeiro, só fazer exceções se feedback real do walkthrough justificar.