# 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