# Implémentation du profil utilisateur et des articles de l'utilisateur

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

## Objectif

Permettre aux utilisateurs de visualiser leur profil et la liste de leurs articles publiés.

## Fonctionnalités implémentées

### 1. Page de profil
- Page `/profile` accessible uniquement aux utilisateurs connectés
- Affichage des informations du profil (nom, photo, description, pubkey, nip05)
- Redirection automatique vers la page d'accueil si non connecté
- Compteur d'articles publiés

### 2. Liste des articles de l'utilisateur
- Affichage de tous les articles publiés par l'utilisateur connecté
- Recherche et filtres (comme sur la page d'accueil)
- Tri des articles (nouveaux/anciens, prix)
- Compteur d'articles affichés vs total

### 3. Lien vers le profil
- Le nom/avatar dans `ConnectButton` est maintenant cliquable
- Lien vers `/profile` pour accéder rapidement au profil

### 4. Gestion du profil minimal
- Si aucun profil Nostr n'existe, affichage d'un profil minimal avec le pubkey
- Pas d'erreur si le profil n'existe pas

## Fichiers créés

### `hooks/useUserArticles.ts`
Hook personnalisé pour charger les articles d'un utilisateur spécifique :
- Filtre automatiquement les articles par `pubkey` de l'auteur
- Supporte la recherche et les filtres (comme `useArticles`)
- Gestion de l'état de chargement et des erreurs
- Méthode `loadArticleContent` pour charger le contenu privé

**Signature** :
```typescript
export function useUserArticles(
  userPubkey: string,
  searchQuery: string = '',
  filters: ArticleFilters | null = null
)
```

### `components/UserProfile.tsx`
Composant d'affichage du profil utilisateur :
- Affichage de la photo de profil (ou initiale si pas de photo)
- Nom, pubkey tronqué, nip05
- Description/about si disponible
- Compteur d'articles publiés

**Props** :
```typescript
interface UserProfileProps {
  profile: NostrProfile
  pubkey: string
  articleCount?: number
}
```

### `components/UserArticles.tsx`
Composant pour afficher la liste des articles de l'utilisateur :
- Réutilise `ArticleCard` pour la cohérence UI
- Gestion de l'état de chargement
- Gestion des erreurs
- Message si aucun article publié
- Gestion du déverrouillage des articles payants

**Props** :
```typescript
interface UserArticlesProps {
  articles: Article[]
  loading: boolean
  error: string | null
  onLoadContent: (articleId: string, authorPubkey: string) => Promise<Article | null>
  showEmptyMessage?: boolean
}
```

### `pages/profile.tsx`
Page de profil utilisateur :
- Vérifie la connexion et redirige si non connecté
- Charge le profil de l'utilisateur connecté
- Affiche le profil avec `UserProfile`
- Affiche les articles avec recherche et filtres
- Header cohérent avec le reste de l'application
- Bouton retour vers la page d'accueil

## Fichiers modifiés

### `components/ConnectButton.tsx`
- Ajout d'un `Link` autour du nom/avatar de l'utilisateur
- Lien vers `/profile` pour accéder au profil
- Hover effect pour indiquer que c'est cliquable

**Changements** :
- Import de `Link` de `next/link`
- Le nom/avatar est maintenant dans un `Link` vers `/profile`

## Flux utilisateur

1. **Accès au profil** :
   - L'utilisateur clique sur son nom/avatar dans le header
   - Redirection vers `/profile`
   - Si non connecté, redirection vers `/`

2. **Visualisation du profil** :
   - Affichage des informations du profil
   - Compteur d'articles publiés

3. **Gestion des articles** :
   - Liste de tous les articles publiés
   - Possibilité de rechercher et filtrer
   - Possibilité de déverrouiller les articles payants (si l'utilisateur les a payés)

## Impact

### Utilisateur
- Accès facile à son profil et ses articles
- Vue d'ensemble de ses publications
- Recherche et filtres pour trouver rapidement un article spécifique

### Technique
- Code modulaire et réutilisable
- Hook personnalisé pour charger les articles par auteur
- Composants réutilisables (UserProfile, UserArticles)
- Cohérence UI avec le reste de l'application

## Limitations et améliorations futures

### Limitations actuelles
- Pas de statistiques détaillées (vues, paiements reçus)
- Pas d'édition/suppression d'articles
- Le profil ne peut être modifié que via Nostr (pas d'édition dans l'app)

### Améliorations possibles
- **Statistiques** : Ajouter un composant `ArticleStats` pour afficher :
  - Nombre total de vues
  - Nombre de paiements reçus
  - Revenus totaux
- **Édition d'articles** : Permettre d'éditer/supprimer les articles publiés
- **Profil public** : Créer `/user/[pubkey]` pour voir le profil de n'importe quel utilisateur
- **Optimisation** : Filtrer les articles par auteur au niveau du relay (au lieu du client)

## Tests recommandés

1. **Accès au profil** :
   - Se connecter et cliquer sur le nom/avatar
   - Vérifier la redirection vers `/profile`
   - Se déconnecter et essayer d'accéder à `/profile` directement

2. **Affichage du profil** :
   - Vérifier l'affichage du nom, photo, description
   - Vérifier le compteur d'articles
   - Tester avec un profil qui n'a pas de photo/nom

3. **Articles** :
   - Publier quelques articles et vérifier qu'ils apparaissent
   - Tester la recherche et les filtres
   - Vérifier le compteur d'articles

4. **Performance** :
   - Tester avec un grand nombre d'articles
   - Vérifier que le chargement n'est pas bloquant