180 lines
6.4 KiB
Markdown
180 lines
6.4 KiB
Markdown
# 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** :
|
|
```typescript
|
|
export function useNotifications(userPubkey: string | null)
|
|
```
|
|
|
|
**Retour** :
|
|
```typescript
|
|
{
|
|
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
|