comparador-notas/UI_REDESIGN.md

UI Redesign — Comparador de Notas

Data: 04/03/2026 Branch: change-ui Base: iced 0.13.1 (Elm architecture) Referência visual: ui-ideia/mockup.html + ui-ideia/design_tokens.json

---

1. Objetivo

Aplicar o visual do mockup (tema dark navy, cards, badges coloridos, progress bars) a todas as telas da aplicação, mantendo a lógica de negócio e a arquitetura Elm intocadas.

---

2. Design Tokens (mapeados para Rust)

Paleta de cores

Token	Hex	Uso
BG	#0F172A	Fundo geral da janela
SURFACE	#1E293B	Cards / containers primários
SURFACE_2	#334155	Cards secundários, cabeçalho de tabela
BORDER	#334155	Bordas de inputs e cards
TEXT	#F1F5F9	Texto principal
TEXT_SECONDARY	#94A3B8	Labels, placeholders, texto muted
TEXT_MUTED	#64748B	Texto desabilitado
PRIMARY	#3B82F6	Botões primários, links, step ativo
PRIMARY_HOVER	#2563EB	Hover em botões primários
SUCCESS	#22C55E	Badge OK, progress bar ≥ 90%
WARNING	#F59E0B	Badge Faltante, progress bar 60–89%
ERROR	#EF4444	Badge Duplicada, progress bar < 60%
OVERLAY	rgba(0,0,0,0.6)	Fundo do modal

Espaçamentos

Token	px
XS	4
SM	8
MD	12
LG	16
XL	24
XXL	32

Border radius

Token	px
SM	4
MD	6
LG	8

---

3. Arquivo de tema: src/ui/theme.rs

Módulo responsável por expor:

• PALETA: constantes Color para todas as cores acima
• Funções de estilo para container::Style, button::Style, text_input::Style, progress_bar::Style
• Nenhuma lógica de negócio — apenas aparência

Estratégia de tema iced

// main.rs — encadear .theme()
iced::application(...)
    .theme(|_app, _| tema_dark())
    .run_with(App::new)

// theme.rs
pub fn tema_dark() -> iced::Theme {
    iced::Theme::custom("dark".to_string(), iced::theme::Palette {
        background: hex("#0F172A"),
        text:       hex("#F1F5F9"),
        primary:    hex("#3B82F6"),
        success:    hex("#22C55E"),
        danger:     hex("#EF4444"),
    })
}

Widgets que precisam de aparência customizada além da paleta (cards, badges) recebem closure .style(|theme| ...) inline ou via função helper em theme.rs.

---

4. Componentes visuais novos / modificados

4.1 Card container

Container com background SURFACE, borda BORDER 1px, radius LG (8px), padding LG (16px).

// theme.rs
pub fn card(theme: &iced::Theme) -> container::Style { ... }
pub fn card_secondary(theme: &iced::Theme) -> container::Style { ... }

4.2 Botão primary

Background PRIMARY, texto TEXT, radius MD (6px), sem borda. Hover: background PRIMARY_HOVER.

4.3 Botão secondary / ghost

Background SURFACE_2, texto TEXT, radius MD.

4.4 Botão danger

Background semi-transparente ERROR (20% alpha), texto ERROR, radius MD.

4.5 Badge de status (inline)

Container com padding [2, 8], radius SM (4px), background 20% alpha da cor semântica. Implementado como container(text(...).size(12)) com style closure.

Status	Cor texto	Background alpha
OK	SUCCESS	20%
Faltante	WARNING	20%
Duplicada	ERROR	20%

4.6 Progress bar por série

Componente progress_bar nativo do iced com style closure que escolhe cor baseada no percentual:

• ≥ 90% → SUCCESS
• 60–89% → WARNING
• < 60% → ERROR

Background da trilha: #111827 (mais escuro que SURFACE).

4.7 Stat cards (tela de resultado)

Row de 3 cards com número grande colorido + label. Componente reutilizável stat_card(valor, label, cor).

4.8 Breadcrumb

Row no topo da janela (exceto Layouts e Analisando). Steps separados por ›. Background SURFACE, padding [8, 16], borda inferior 1px BORDER.

Estado do step	Cor	Tamanho
Ativo	PRIMARY	14px
Concluído	TEXT_SECONDARY	13px
Futuro	TEXT_MUTED	13px

---

5. Telas — mudanças por arquivo

5.1 screens/import.rs

Atual: Coluna plana com título, row de arquivo e row de layout.

Novo:

• Card central (max-width 600px) centrado na tela
• Área de drop zone estilizada com borda tracejada BORDER, radius LG, padding XL
• Ícone 📂 grande + texto instrucional
• Nome do arquivo selecionado com truncamento
• Seção de layout com separador visual
• Botão primary "▶ Configurar Colunas" ocupando largura do card

5.2 screens/selecionar_aba.rs

Atual: Lista de botões idênticos (bug de highlight).

Novo:

• Card com lista de abas scrollável
• Aba selecionada: background PRIMARY (20% alpha), texto PRIMARY, borda PRIMARY
• Aba não selecionada: background SURFACE_2, texto TEXT
• Preview abaixo da lista em card separado

5.3 screens/configuracao_colunas.rs

Atual: Coluna plana de inputs.

Novo:

• Seção de configuração em card SURFACE
• Labels com TEXT_SECONDARY, inputs com fundo BG, borda BORDER
• Campos opcionais: checkbox com estilo consistente + input inline
• Erros em card com borda ERROR (20% alpha)
• Botões na barra inferior fixada: "Voltar" (ghost), "Analisar" (primary), "Reanalisar" (secondary), "Salvar" (ghost)

5.4 screens/resultado.rs

Atual: Coluna de texto puro.

Novo (alinhado ao mockup):

1. Header row: título + botões de ação à direita
2. Stat cards row: 3 cards — "Notas Faltantes" (azul), "Duplicadas" (vermelho), "Total R$" (texto branco)
3. Card de completude por série: para cada série, label + progress bar colorida por threshold
4. Controle de itens/página: botões com highlight no ativo
5. Seções faltantes/duplicatas: cabeçalho de série em row com badge de contagem + botão Copiar; itens em lista

5.5 screens/layouts.rs

Atual: Coluna plana.

Novo:

• Seções CSV e XLSX em cards separados
• Cada layout numa row com hover highlight
• Botões de ação menores (ícone + texto compacto)
• Linha de importar JSON no rodapé do card

5.6 components/modal.rs

Atual: Box com estilo do tema padrão.

Novo:

• Background SURFACE, borda BORDER, radius LG
• Título TEXT 18px, mensagem TEXT_SECONDARY 14px
• Separador entre conteúdo e botões
• Botão "Fechar" ghost, "Confirmar" primary
• Tipos Erro/Aviso com ícone + cor no título

5.7 components/tabela_preview.rs

Atual: Monospace puro.

Novo:

• Cabeçalho com background SURFACE_2, texto TEXT_SECONDARY
• Células com background SURFACE, texto TEXT, fonte monospace
• Borda inferior BORDER nas células

5.8 components/paginacao.rs

Atual: Row simples de botões.

Novo:

• Botões ◀/▶ com estilo ghost
• "Página X / Y" em TEXT_SECONDARY

---

6. Arquivos a criar/modificar

Arquivo	Ação
src/main.rs	Adicionar .theme(...)
src/ui/mod.rs	Adicionar pub mod theme;
src/ui/theme.rs	Criar — paleta + helpers de estilo
src/ui/app.rs	Breadcrumb novo estilo + tela Analisando centralizada
src/ui/screens/import.rs	Reescrever
src/ui/screens/selecionar_aba.rs	Reescrever (corrigir bug highlight)
src/ui/screens/configuracao_colunas.rs	Reescrever
src/ui/screens/resultado.rs	Reescrever
src/ui/screens/layouts.rs	Reescrever
src/ui/components/modal.rs	Reescrever
src/ui/components/tabela_preview.rs	Reescrever
src/ui/components/paginacao.rs	Reescrever

---

7. Limitações do iced 0.13 e workarounds

Limitação CSS	Workaround iced
box-shadow	Cor de borda ou sem sombra (aceitar diferença)
rgba(r,g,b,0.2)	Color { r, g, b, a: 0.2 } com valores 0.0–1.0
Font Inter	Usa fonte do sistema (system-ui) — sem mudança necessária
display: flex; gap	row![...].spacing(N)
border-bottom nas células	container com border bottom via border.width fracional não suportado — usar separador visual alternativo

---

8. Ordem de implementação

1. theme.rs — paleta e helpers (base para tudo)
2. main.rs — ativar tema
3. modal.rs — usado por todas as telas
4. resultado.rs — tela principal do mockup
5. import.rs
6. selecionar_aba.rs
7. configuracao_colunas.rs
8. layouts.rs
9. app.rs — breadcrumb + Analisando
10. tabela_preview.rs + paginacao.rs
11. Compilar e corrigir

---

9. Notas de compatibilidade iced 0.13

• button::Style inclui background, text_color, border: Border { color, width, radius }, shadow
• container::Style inclui background, text_color, border, shadow
• progress_bar::Style inclui background e bar
• text_input::Style inclui background, border, icon, placeholder, value, selection
• Closures de estilo recebem &Theme e retornam o Style concreto do widget
• iced::Border aceita radius: iced::border::Radius — usar N.into() para uniform radius