feat: comprehensive design system overhaul
Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages. DESIGN SYSTEM: - Created PRODUCT.md (5 design principles, WCAG 2.1 AA target) - Created DESIGN.md (34 color tokens, 6 radius scale, full component spec) - Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion) ACCESSIBILITY: - 33 aria-labels across 7 pages (was ~13) - 63 <label> elements (was ~30) - 6 <main> landmarks + role=navigation on all sidebars - Esc to close modals on 4 pages - Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat THEMING: - 216 hardcoded colors replaced with var() references - 449 !important removed from dark-mode.css - Dark mode script unified (was duplicated 9x inline) - All modals converted to .modal-overlay + .modal design system classes CHAT: - Error states for messages (.msg.erro, .msg.enviando) - Connection status indicator - Confirmation modal before finalizar - Input bar reorganized (3 visible actions, + menu) - Right panel accordions - Send button disabled when empty - Touch targets 44px on mobile CLIENT DETAIL: - Tabs/badges/sub-tabs use CSS classes instead of inline styles - 'Iniciar Conversa' button now primary action - alert() replaced with inline feedback - Modal converted to design system classes CLIENT LIST: - Modal moved inside <body> (was HTML-invalid) - alert() replaced with inline feedback - Modal uses .show pattern SETTINGS: - 4 modals converted to design system classes - 14 alert() calls replaced with inline feedback - fecharModal() uses classList instead of style.display ROUTES: - border-radius normalized, hardcoded colors fixed Score progression: Chat: 23 → 32/40 Client List: 32 → 35/40 Client Detail: 26 → 30/40 Settings: 29 → 35/40 Routes: 37 → 38/40 Audit (project): 14/20 → 17/20
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
---
|
||||
target: src/public/chat.html
|
||||
total_score: 23
|
||||
p0_count: 0
|
||||
p1_count: 3
|
||||
timestamp: 2026-06-23T14-35-01Z
|
||||
slug: src-public-chat-html
|
||||
---
|
||||
# Design Critique: Chat — Chatc2
|
||||
**Target:** src/public/chat.html
|
||||
**Score:** 23/40 (Acceptable)
|
||||
|
||||
## Design Health Score
|
||||
|
||||
| # | Heuristic | Score | Key Issue |
|
||||
|---|-----------|-------|-----------|
|
||||
| 1 | Visibility of System Status | 3 | Sem indicador de digitando, sem status de conexão, sem feedback de erro visível |
|
||||
| 2 | Match System / Real World | 3 | Padrão WhatsApp familiar; termos como associar precisam de contexto |
|
||||
| 3 | User Control and Freedom | 3 | Cancel em modais; sem undo em mensagens; sem reabertura direta |
|
||||
| 4 | Consistency and Standards | 2 | 30+ violações de design system (cores/radii fora do DESIGN.md) |
|
||||
| 5 | Error Prevention | 2 | Botão enviar ativo sem texto; sem confirmação ao finalizar |
|
||||
| 6 | Recognition Rather Than Recall | 3 | Tabs com contagens; ícones ambíguos sem labels |
|
||||
| 7 | Flexibility and Efficiency | 2 | Sem atalhos de teclado; zero ações em lote |
|
||||
| 8 | Aesthetic and Minimalist Design | 3 | Visual limpo; painel direito pode sobrecarregar |
|
||||
| 9 | Error Recovery | 1 | Zero indicadores visuais de erro em toda a interface |
|
||||
| 10 | Help and Documentation | 1 | Sem tooltips, ajuda contextual ou onboarding |
|
||||
| **Total** | | **23/40** | **Acceptable** |
|
||||
|
||||
## Anti-Patterns Verdict
|
||||
NAO parece gerado por IA. Interface com identidade própria (padrão WhatsApp). Detector: 34 advisories de drift de design system, 2 warnings (single-font = falso positivo intencional, dark-glow merece atenção).
|
||||
|
||||
## Overall Impression
|
||||
Tela de chat funcionalmente sólida, WhatsApp-style bem executado, dark mode completo, mobile responsivo. Problema crítico: resiliência — zero feedback de erro. Mais drift de design system e falta de atalhos para uso intensivo.
|
||||
|
||||
## Priority Issues
|
||||
[P1] Design system drift — 30+ valores fora do DESIGN.md. Cores e raios do chat precisam ser incorporados ou consolidados.
|
||||
[P1] Zero visibilidade de erro — mensagem falhou, upload quebrou, conexão caiu: atendente fica no escuro.
|
||||
[P1] Chat input com 5 botões competindo — ícones ambíguos, sem labels, peso visual similar.
|
||||
[P2] Painel direito sobrecarregado — todas as seções visíveis, scroll excessivo.
|
||||
[P2] Zero atalhos de teclado — 8h+/dia sem atalhos gera fadiga.
|
||||
|
||||
## Persona Red Flags
|
||||
Alex (Power User): Sem atalhos, sem notificação de novas conversas, 5 botões sempre visíveis.
|
||||
Jordan (First-Timer): Ícones sem texto, toggle privada ambíguo, sem onboarding.
|
||||
Sam (Accessibility): Botões emoji sem aria-label, enviar sem nome acessível, sem trap de foco em modais.
|
||||
|
||||
## Minor Observations
|
||||
- Padrão SVG do fundo é toque WhatsApp autêntico
|
||||
- Botão Finalizar sem confirmação
|
||||
- Drag-overlay excelente affordance
|
||||
- border-radius: 22px vs 50% inconsistente
|
||||
- Empresa-tag com border-radius inline
|
||||
Reference in New Issue
Block a user