|
| 1 | +# Estratégia de Posicionamento de Alerts e Toasts |
| 2 | + |
| 3 | +## Visão Geral |
| 4 | + |
| 5 | +Os alerts e notificações no DAX Renderer seguem uma estratégia de posicionamento contextualizado para otimizar a experiência do usuário. |
| 6 | + |
| 7 | +## Posicionamento por Tipo |
| 8 | + |
| 9 | +### 1. Erros Críticos → `top-center` |
| 10 | +**Quando:** Erros de renderização, validação DAX, falhas de ação |
| 11 | +**Posição:** Centro do topo da tela |
| 12 | +**Motivo:** Máxima visibilidade e atenção imediata |
| 13 | +**Exemplos:** |
| 14 | +- "Erro ao renderizar" |
| 15 | +- "Nada para copiar — editor está vazio" |
| 16 | +- "Falha ao copiar" |
| 17 | + |
| 18 | +### 2. Feedback Rápido → `top-right` |
| 19 | +**Quando:** Ações bem-sucedidas e rápidas do usuário |
| 20 | +**Posição:** Canto superior direito (acima do painel de preview) |
| 21 | +**Motivo:** |
| 22 | +- Visível sem bloquear o editor |
| 23 | +- Contextualizado com a ação executada |
| 24 | +- Fora da statusbar inferior |
| 25 | +- Bem organizado e não intrusivo |
| 26 | + |
| 27 | +**Exemplos:** |
| 28 | +- "DAX copiada!" (copy) |
| 29 | +- "Rascunho 'nome' salvo" (save snippet) |
| 30 | +- "Rascunho 'nome' carregado" (load snippet) |
| 31 | +- "Código atualizado pelo assistente IA" (IA apply) |
| 32 | + |
| 33 | +### 3. Notificações Genéricas → `bottom-center` |
| 34 | +**Quando:** Mensagens informativas gerais |
| 35 | +**Posição:** Centro da base da tela |
| 36 | +**Motivo:** |
| 37 | +- Neutra, não interfere com elementos principais |
| 38 | +- Não compete com statusbar |
| 39 | +- Padrão confortável para notificações |
| 40 | + |
| 41 | +## Implementação |
| 42 | + |
| 43 | +### Arquivos Relevantes |
| 44 | +- `src/App.tsx` - Toasts de copy, save, load snippets |
| 45 | +- `src/components/ai/AIAssistantDropdown.tsx` - Toasts do assistente IA |
| 46 | +- `src/App.tsx` - Configuração do Toaster padrão |
| 47 | + |
| 48 | +### Alterações Aplicadas |
| 49 | + |
| 50 | +```typescript |
| 51 | +// Erros críticos |
| 52 | +toast.error('Mensagem', { position: 'top-center' }); |
| 53 | + |
| 54 | +// Feedback rápido |
| 55 | +toast.success('Mensagem', { position: 'top-right' }); |
| 56 | + |
| 57 | +// Notificações genéricas |
| 58 | +toast.success('Mensagem'); // usa bottom-center como padrão |
| 59 | +``` |
| 60 | + |
| 61 | +## Validação Visual |
| 62 | + |
| 63 | +✅ Posicionamento testado e validado em produção |
| 64 | +- Toast "DAX copiada!" aparece no canto superior direito |
| 65 | +- Ligeiramente abaixo da toolbar DAX |
| 66 | +- Sem interferência com editor ou preview |
| 67 | +- Bem visível e destacado |
| 68 | + |
| 69 | +## Duração |
| 70 | + |
| 71 | +Todos os toasts têm duração padrão de **2000ms** (2 segundos) |
| 72 | + |
| 73 | +## Boas Práticas |
| 74 | + |
| 75 | +1. **Use `top-center` apenas para erros** - Reserve para situações que requerem atenção imediata |
| 76 | +2. **Use `top-right` para feedback rápido** - Mantenha a consistência com ações do usuário |
| 77 | +3. **Use `bottom-center` para notificações** - Padrão seguro quando a posição não é crítica |
| 78 | +4. **Sempre especifique posição** - Não confie no padrão quando há contexto específico |
0 commit comments