POL Mickaël
2893013093
- README : fonctionnalités, installation, build, tests (302 + 20 E2E), couverture 94%, workflow mise à jour latest.yml, changelog v1.1.6 - CLAUDE.md : règles de collaboration, architecture, conventions - Plans de conception : DDD, electron-updater, accouplement, toast Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
56 lines
1.6 KiB
Markdown
56 lines
1.6 KiB
Markdown
# Toast Notifications — Design
|
|
|
|
**Goal:** Ajouter un systeme de toast notifications (bas droite) pour confirmer les actions et afficher les erreurs, en remplacement des `alert()` natifs.
|
|
|
|
## Types
|
|
|
|
| Type | Icone | Couleur | Duree |
|
|
|------|-------|---------|-------|
|
|
| `success` | `check_circle` | Vert | 3s |
|
|
| `error` | `error` | Rouge | 5s |
|
|
|
|
## Composant Toast.ts
|
|
|
|
Singleton avec file de toasts. API : `Toast.show(type, message)`.
|
|
|
|
- Max 3 toasts visibles (les plus anciens sont evincés)
|
|
- Empilage vertical vers le haut
|
|
- Animation : slide-in droite + fade-out a l'expiration
|
|
|
|
## Style
|
|
|
|
- Position : `bottom: 24px; right: 24px`, z-index eleve
|
|
- Glassmorphism Obsidienne (fond semi-transparent, blur, border subtle)
|
|
- Icone + texte sur une ligne, lisere gauche colore selon le type
|
|
- Pas de bouton d'action (undo/redo sera separe)
|
|
|
|
## Integration
|
|
|
|
- `App.ts` monte le conteneur `#toast-container` dans le DOM
|
|
- Chaque composant appelle `Toast.show()` apres `commandBus.execute()`
|
|
- Remplacer les `alert()` de `WorkflowsView.ts` par des toasts error
|
|
|
|
## Actions couvertes
|
|
|
|
### Success
|
|
- Suppression enclos
|
|
- Suppression DD
|
|
- Import workflows
|
|
- Enregistrement accouplement
|
|
- Reset statistiques
|
|
- Clear enclos
|
|
- Nouvelle fournee
|
|
- Export workflows
|
|
|
|
### Error
|
|
- Import workflows : fichier invalide, JSON invalide
|
|
- Toute erreur de validation future
|
|
|
|
## Fichiers
|
|
|
|
- **Creer** : `src/presentation/components/Toast.ts`
|
|
- **Modifier** : `src/presentation/styles/obsidienne.css`
|
|
- **Modifier** : `src/presentation/components/App.ts`
|
|
- **Modifier** : `src/presentation/components/WorkflowsView.ts`
|
|
- **Modifier** : composants avec actions destructives/importantes
|