dd-timer/docs/plans/2026-04-05-toast-notifications-design.md
POL Mickaël 3e485fd09b chore: normalise fins de ligne CRLF → LF dans tout le repo
Applique .gitattributes sur tous les fichiers existants.
Élimine les différences fantômes entre WSL et Windows.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-06 08:55:10 +02:00

1.6 KiB
Executable File

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