FLA v4a — Smart Collapsibles (Option A)

Contexto

Protótipo da Opção A (Collapsibles inteligentes) do FIN-11. Mantém o padrão de collapsibles do v3, mas adiciona:

Contador de itens no header quando houver (ex: "Kommentare (3)")
Estado vazio claramente indicado — não faz o usuário clicar pra ver "nada"; em vez disso, o empty state tem CTA pra adicionar direto
Read-only diferenciado visualmente (ícone de lock, sem hover de edit)
3 sub-variantes (A1/A2/A3) para o caso complicado de "text-only que abre modal de edição"

Multi-item · filled · editable

Collapsible com contador · expand inline mostra lista · hover mostra "edit" pencil

Kommentare zum Antrag3 edit expand_more

Andreas Graf09.04, 14:22

Kreditbetrag bestätigt nach Rücksprache mit Kunde.

Sandra Harries08.04, 10:15

Sicherheiten geprüft — ok.

Niklaus Hug07.04, 16:48

Bitte Dokumentation nachreichen.

💬 Contador visível no header. Click no header expande. Pencil edit aparece no hover.

Empty · add CTA

Sem itens · contador muted · click leva direto pra adicionar (não expande)

Kommentare zum Antrag0 add_circle_outline

Interne Notizen0 add_circle_outline

🟢 Empty é clicável mas abre modal "add" direto. Sem arrow. Contador muted (cinza) em vez de azul.

Read-only · filled

Com contador e lock · expand inline · sem edit pencil

Antragstatus-Historie5lock_outline expand_more

In Erfassung06.04, 09:00

In Prüfung08.04, 11:30

Zurückgewiesen BO09.04, 15:12

Überarbeitet10.04, 08:45

In Arbeit10.04, 10:22

🔒 Lock icon sinaliza read-only. Sem pencil no hover. Expand normal.

Caso complicado: Interne Notizen, Kreditzweck são text-only — o "conteúdo" é um bloco de texto único, e a interação real é editar (no modal). Não faz sentido "expandir" se expandir só mostra texto que não pode ser editado inline. Três abordagens:

A1 Preview + expand + edit button

Header mostra preview truncado · click expande inline (read view) · botão "Edit" abre modal

Interne Notizeni expand_more

Kunde hat bereits Beziehung mit der Bank seit 2018. Sicherheiten wurden intern geprüft und entsprechen den Anforderungen. Risikobewertung durch das Credit Office zeigt ein moderates Profil, Empfehlung zur Genehmigung unter Standardbedingungen.

🟦 Duas interações: expand (read) + Edit button (modal). Preserva consistência com multi-item collapsibles, mas 2 cliques pra editar.

A2 Preview + click direto → modal

Header mostra preview inline · click abre modal diretamente (sem expand intermediário)

Interne Notizeni Kunde hat bereits Beziehung mit der Bank seit 2018. Sicherheiten wurden… chevron_right

🟢 Preview sempre visível no header. 1 click = modal. Mais rápido. Mas quebra padrão do collapsible (não expande).

A3 Híbrido · multi-item vs text-only

Multi-item expande inline (A-base) · Text-only vira link estilo B (melhor tool pra cada trabalho)

Kommentare3 edit expand_more

Andreas

Betrag bestätigt…

Interne Notizen chevron_right

Kreditzweck chevron_right

🟣 Dois tipos visuais distintos: collapsibles (multi-item) + links (text-only). Honesto com a intenção de cada, mas quebra consistência visual.

Critério	A1 Expand inline + Edit	A2 Preview + click modal	A3 Híbrido
Consistência visual	Alta — todos os painéis são collapsibles	Média — collapsibles "que não expandem"	Baixa — 2 tipos visuais misturados
Cliques pra editar	2 (expand + Edit)	1 (direto modal)	1 (direto modal)
Preview no sidepanel	Só depois de expandir	Sempre visível	Só pra multi-item
Clareza de intenção	Média — "por que 2 ações?"	Alta — click = editar	Alta — cada tipo deixa claro o que faz
Espaço ocupado	Variável (expand grande)	Fixo (preview 1-2 linhas)	Mínimo (text-only = 1 linha)
Quando usar	Se preview expandido é útil como "read deep"	Se editar é a ação principal e preview basta	Se multi-item e text-only merecem tratamentos distintos

Recomendação inicial

A2 é o melhor balanço: 1 click pra editar (ação principal), preview sempre visível (não precisa expandir pra "ver"), mantém o visual de collapsible (chevron indica interação, mas não expansão). O único compromisso é que o chevron "mente" um pouco — indica interação mas não expande. Aceitável se todos os text-only seguirem o padrão.

A3 é tecnicamente o mais "correto" (cada tipo com seu visual), mas perde a consistência — "por que este painel tem expand e aquele não?". Se o walkthrough validar que inconsistência não incomoda, A3 é a escolha ideal.

A1 fica descartado a menos que o "read view expandido" tenha valor específico que Sandra/Niklaus queiram preservar (ex: ver o texto sem abrir modal que bloqueia o resto do sidepanel).