Anatomie

Le composant est construit en trois zones empilées dans une carte arrondie. La toolbar en haut affiche le titre, un badge de compteur non-lu en direct, et un bouton 'tout marquer comme lu' qui n'apparaît qu'en présence d'items non-lus. En dessous, une rangée de pills défilable permet de basculer entre Tout, Non lus et les cinq filtres par type. La liste occupe l'espace vertical restant avec un max-height et overflow-y:auto. Chaque ligne comporte un avatar 36px (initiales ou icône de type), titre + message + timestamp, et un ou deux boutons iconiques. Un point en position absolue sur l'avatar indique le statut non-lu.

Comment ça marche

La liste filtrée est une valeur dérivée calculée de façon synchrone depuis le state items et le filtre actif, aucun effet nécessaire. Quand un utilisateur supprime un item, la mise à jour du state le retire immédiatement du tableau ; AnimatePresence détecte la clé qui quitte le DOM et joue l'animation de sortie (opacity 0, height 0) avant de démonter. Le prop layout sur chaque motion.div indique à Framer Motion d'animer les siblings restants vers leurs nouvelles positions pour que la liste comble le vide sans à-coup. Marquer comme lu est un simple map sur le tableau qui pose isRead:true, ce qui efface aussi le point non-lu et le badge sans coût d'animation supplémentaire.

Comment le coder en React

1. Modélise les notifications et initialise le state

   Définis une interface InboxNotification avec id, type, title, message, timestamp, isRead et des champs sender optionnels. Stocke la liste dans useState. Dérive la liste filtrée et le compteur non-lu synchronement depuis ce state, aucun useEffect nécessaire.

   type NotificationType = "message" | "alert" | "mention" | "invite" | "system";
   interface InboxNotification {
     id: string;
     type: NotificationType;
     title: string;
     message: string;
     timestamp: string;
     isRead: boolean;
     sender?: string;
     senderInitials?: string;
   }
   const [items, setItems] = useState<InboxNotification[]>(initialNotifications);
   const filtered = items.filter(item =>
     filter === "all" ? true : filter === "unread" ? !item.isRead : item.type === filter
   );

2. Construis la rangée de pills de filtre

   Mappe sur un tableau fixe de clés de filtre et rends un bouton pour chacune. Le pill actif obtient une bordure et un fond accent via color-mix ; les pills inactifs sont transparents avec une bordure atténuée. Pose overflow-x:auto et white-space:nowrap sur le conteneur pour qu'il défile sur les petits écrans au lieu de wraper.

   {(["all", "unread", "message", "alert", "mention", "invite", "system"] as FilterType[]).map(f => (
     <button
       key={f}
       onClick={() => setFilter(f)}
       style={{
         border: filter === f ? "1px solid var(--color-accent)" : "1px solid var(--color-border)",
         background: filter === f ? "color-mix(in srgb, var(--color-accent) 10%, transparent)" : "transparent",
         color: filter === f ? "var(--color-accent)" : "var(--color-foreground-muted)",
       }}
     >
       {filterLabels[f]}
     </button>
   ))}

3. Anime la liste avec AnimatePresence + layout

   Enveloppe la liste mappée dans AnimatePresence avec initial={false} pour que les items existants n'animent pas au montage. Chaque motion.div a besoin d'une clé stable (l'id de la notification), du prop layout, et des variants initial/animate/exit qui pilotent opacity et height. La sortie vers height:0 crée l'effet d'effondrement quand les items sont supprimés ou filtrés.

   <AnimatePresence initial={false}>
     {filtered.map(notif => (
       <motion.div
         key={notif.id}
         layout
         initial={{ opacity: 0, height: 0 }}
         animate={{ opacity: 1, height: "auto" }}
         exit={{ opacity: 0, height: 0 }}
         transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
         style={{ overflow: "hidden" }}
       >
         {/* row content */}
       </motion.div>
     ))}
   </AnimatePresence>

4. Branche marquer-comme-lu et suppression

   Les deux actions sont des transformations de state pures enveloppées dans useCallback. Marquer-comme-lu mappe sur le tableau et bascule isRead ; supprimer filtre l'item hors du tableau. Puisque AnimatePresence surveille la liste par clé, l'animation de sortie se déclenche automatiquement à la suppression sans déclencheur manuel.

   const markAsRead = useCallback((id: string) => {
     setItems(prev => prev.map(n => n.id === id ? { ...n, isRead: true } : n));
   }, []);
   
   const deleteNotification = useCallback((id: string) => {
     setItems(prev => prev.filter(n => n.id !== id));
   }, []);

Quand l'utiliser

Ce composant convient partout où un utilisateur doit trier un flux mixte d'événements : dashboards SaaS, panneaux admin, outils développeur, apps internes. Les pills de filtre le rendent pratique quand il existe plusieurs types de notifications que les utilisateurs veulent isoler. À éviter pour les flux à type unique (chat pur, alertes pures) où une liste plus simple sans la surcharge des pills est plus lisible. Côté backend, remplace le tableau useState par un abonnement temps réel (WebSocket, SSE, ou polling SWR) et le composant s'intègre sans modification.

Utilisé par

• Linear, Centre de notifications style inbox avec filtres par type, compteurs non-lus, et archivage piloté au clavier.
• GitHub, Boîte de réception notifications avec filtres par raison (mentions, revues, CI) et actions groupées de lecture/rejet.
• Slack, Panneau de fil d'activité avec filtrage par type et indicateurs de points non-lus sur chaque entrée.
• Vercel, Fil de notifications dashboard avec types d'événements déploiement, équipe et facturation, chacun code couleur.

FAQ