---
name: feedback-result-banner
description: Toute bannière succès/erreur doit utiliser ResultBanner avec × à droite et auto-dismiss 4s
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 264d200a-fea4-4903-b7c5-20dcc9ebfbd2
---

Utiliser le composant `ResultBanner` (`frontend/src/components/ResultBanner.jsx`) pour **toute** bannière de résultat succès/erreur dans l'app.

**Règle** : jamais de div inline avec `result.ok ? 'rgba...'`. Toujours `<ResultBanner result={result} onDismiss={() => setResult(null)} />`.

**Comportement garanti par le composant** :
- × positionné à l'extrême droite (`justifyContent: space-between`)
- Auto-dismiss après 4 secondes (paramètre `delay` configurable)
- Callback `onDismiss` appelé à la fermeture manuelle ET automatique

**Format du state `result`** : toujours `{ ok: boolean, msg: string }`. Convertir les structures complexes (ex: résultats d'import `{ inserted, total, skipped, errors }`) en message texte au moment du `setResult`.

**Redirect après dismiss** : si la section doit rediriger après fermeture, passer le navigate dans `onDismiss` :
```jsx
onDismiss={() => { setResult(null); navigate('/admin/plateformes?section=referentiel'); }}
```

**Why:** Demande explicite d'Olivier — cohérence visuelle sur toute l'app (× à droite, disparition automatique).

**How to apply:** Vérifier systématiquement `setResult` + affichage résultat dans tout nouveau composant. Si la structure du result n'est pas `{ ok, msg }`, normaliser au `setResult`.
