story-research-zapwall/features/notifications-implementation.md

Implémentation du système de notifications

Date : Décembre 2024 Status : ✅ Complété

Objectif

Permettre aux utilisateurs de recevoir des notifications en temps réel lorsque leurs articles sont achetés (paiements reçus via zap receipts).

Fonctionnalités implémentées

1. Surveillance des paiements

• Subscription automatique aux zap receipts (kind:9735) destinés à l'utilisateur connecté
• Détection en temps réel des nouveaux paiements
• Extraction des informations de paiement (montant, article, auteur du paiement)

2. Badge de notification

• Badge avec le nombre de notifications non lues
• Affiché dans le header à côté du profil utilisateur
• Masqué si aucune notification non lue

3. Centre de notifications

• Panneau latéral/dropdown avec liste de toutes les notifications
• Notifications triées par date (plus récentes en premier)
• Indicateur visuel pour les notifications non lues (fond bleu clair + point bleu)
• Formatage du temps relatif (il y a X minutes/heures/jours)

4. Gestion des notifications

• Marquer une notification comme lue en cliquant dessus
• Marquer toutes les notifications comme lues
• Supprimer une notification
• Stockage persistant dans localStorage (par utilisateur)
• Limite de 100 notifications stockées

5. Navigation

• Clic sur une notification pour la marquer comme lue et fermer le panneau
• Lien vers l'article associé (si disponible)

Fichiers créés

types/notifications.ts

Types TypeScript pour les notifications :

• NotificationType : Types de notifications (payment, mention, comment)
• Notification : Interface pour une notification
• NotificationState : État des notifications

lib/notifications.ts

Service de notifications :

• NotificationService : Classe pour surveiller les zap receipts
• subscribeToPayments() : S'abonne aux paiements pour un utilisateur
• loadStoredNotifications() : Charge les notifications depuis localStorage
• saveNotifications() : Sauvegarde les notifications dans localStorage
• markNotificationAsRead() : Marque une notification comme lue
• markAllAsRead() : Marque toutes les notifications comme lues
• deleteNotification() : Supprime une notification

hooks/useNotifications.ts

Hook React pour gérer les notifications :

• Charge les notifications stockées au montage
• S'abonne aux nouvelles notifications en temps réel
• Calcule le nombre de notifications non lues
• Méthodes pour marquer comme lue et supprimer

Signature :

export function useNotifications(userPubkey: string | null)

Retour :

{
  notifications: Notification[]
  unreadCount: number
  loading: boolean
  markAsRead: (notificationId: string) => void
  markAllAsRead: () => void
  deleteNotification: (notificationId: string) => void
}

components/NotificationBadge.tsx

Badge de notification simple :

• Affiche une icône de cloche
• Badge avec le nombre de notifications non lues
• Masqué si aucune notification non lue
• Cliquable pour ouvrir le centre de notifications

components/NotificationCenter.tsx

Centre de notifications complet :

• Panneau dropdown avec liste des notifications
• Header avec bouton "Mark all as read" et fermeture
• Liste scrollable des notifications
• Chaque notification affiche :
  • Titre et message
  • Temps relatif
  • Indicateur de non-lu
  • Bouton de suppression
  • Lien vers l'article (si disponible)
• Backdrop pour fermer en cliquant à l'extérieur

Fichiers modifiés

lib/nostr.ts

• Ajout de getPool() : Méthode publique pour obtenir l'instance du pool (nécessaire pour le service de notifications)

components/ConnectButton.tsx

• Intégration de NotificationCenter dans le header
• Le badge de notification apparaît à côté du nom de l'utilisateur

Flux utilisateur

1. Réception d'un paiement :

   • Un utilisateur achète un article de l'auteur connecté
   • Un zap receipt est publié sur Nostr
   • Le service de notifications détecte le zap receipt
   • Une notification est créée et ajoutée à la liste

2. Visualisation des notifications :

   • Le badge affiche le nombre de notifications non lues
   • L'utilisateur clique sur le badge pour ouvrir le centre de notifications
   • La liste des notifications s'affiche avec les plus récentes en premier

3. Gestion des notifications :

   • Clic sur une notification pour la marquer comme lue
   • Bouton "Mark all as read" pour tout marquer comme lu
   • Bouton de suppression pour supprimer une notification
   • Clic sur "View article" pour voir l'article associé

Stockage

Les notifications sont stockées dans localStorage avec la clé notifications_{userPubkey}. Cela permet :

• Persistance entre les sessions
• Notifications par utilisateur (si plusieurs comptes)
• Limite de 100 notifications (les plus anciennes sont supprimées)

Limitations et améliorations futures

Limitations actuelles

• Seulement les notifications de paiement (pas de mentions, commentaires, etc.)
• Pas de notifications push (navigateur)
• Stockage limité à localStorage (100 notifications max)
• Pas de filtrage par type de notification
• Pas de recherche dans les notifications

Améliorations possibles

• Notifications push : Utiliser l'API Notifications du navigateur
• Base de données : Remplacer localStorage par IndexedDB ou une DB externe
• Types de notifications : Ajouter mentions, commentaires, réactions
• Filtres : Filtrer par type, date, statut (lu/non-lu)
• Recherche : Rechercher dans les notifications
• Notifications groupées : Grouper les notifications similaires
• Paramètres : Permettre à l'utilisateur de configurer quelles notifications recevoir

Tests recommandés

1. Réception de notifications :

   • Publier un article
   • Faire un paiement pour cet article (depuis un autre compte)
   • Vérifier que la notification apparaît

2. Badge :

   • Vérifier que le badge affiche le bon nombre
   • Vérifier que le badge disparaît quand toutes les notifications sont lues

3. Centre de notifications :

   • Ouvrir/fermer le panneau
   • Marquer une notification comme lue
   • Marquer toutes comme lues
   • Supprimer une notification

4. Persistance :

   • Recevoir des notifications
   • Recharger la page
   • Vérifier que les notifications sont toujours là

5. Performance :

   • Tester avec un grand nombre de notifications
   • Vérifier que le scroll fonctionne bien
   • Vérifier que les nouvelles notifications arrivent rapidement