# Epic: Implémentation Complète de la Fonctionnalité Collaborateurs

**Epic ID:** EPIC-COLLABORATORS
**Status:** Draft
**Priority:** High
**Created:** 2026-01-09
**Owner:** Development Team
**Type:** Feature Implementation

---

## Description du Problème

### Symptôme
Le bouton "Collaborator" (icône UserPlus) est **grisé et désactivé** dans note-input, et ne fonctionne pas non plus sur les notes existantes.

### Contexte
- L'utilisateur veut pouvoir ajouter des collaborateurs à ses notes
- Actuellement: bouton grisé dans note-input, fonctionnalité non testée sur notes existantes
- Les tests de la collaborator dialog n'ont pas été faits

---

## User Stories

### Story 1: Sélectionner des Collaborateurs lors de la Création de Note

**ID:** COLLAB-1
**Title:** Permettre d'ajouter des collaborateurs pendant la création d'une note
**Priority:** Must Have
**Estimation:** 3h

**En tant que:** utilisateur
**Je veux:** pouvoir sélectionner des collaborateurs AVANT de créer ma note
**Afin que:** la note soit partagée dès sa création avec les bonnes personnes

**Critères d'Acceptation:**
1. **Given** une nouvelle note en cours de création (note-input)
2. **When** je clique sur le bouton collaborateur (UserPlus)
3. **Then** une boîte de dialogue s'ouvre
4. **And** je peux chercher des utilisateurs par email
5. **And** je peux ajouter plusieurs collaborateurs
6. **Given** que j'ai sélectionné des collaborateurs
7. **When** je crée la note (bouton "Add")
8. **Then** la note est créée avec les collaborateurs déjà assignés
9. **And** les collaborateurs reçoivent une notification (si implémenté)

**Fichiers à Modifier:**
- `keep-notes/components/note-input.tsx` - Ajouter état `collaborators: string[]`
- `keep-notes/components/note-input.tsx` - Rendre le bouton collaborateur actif
- `keep-notes/components/note-input.tsx` - Intégrer CollaboratorDialog
- `keep-notes/app/actions/notes.ts` - Modifier `createNote` pour accepter `sharedWith`

**Implémentation:**
```typescript
// Dans note-input.tsx
const [collaborators, setCollaborators] = useState<string[]>([])
const [showCollaboratorDialog, setShowCollaboratorDialog] = useState(false)

// Dans handleSubmit
await createNote({
  // ... autres champs
  sharedWith: collaborators.length > 0 ? collaborators : undefined,
})
```

---

### Story 2: Vérifier le Fonctionnement sur Notes Existantes

**ID:** COLLAB-2
**Title:** Tester et corriger l'ajout de collaborateurs sur les notes existantes
**Priority:** Must Have
**Estimation:** 2h

**En tant que:** utilisateur
**Je veux:** pouvoir partager une note existante avec d'autres utilisateurs
**Afin que:** nous puissions collaborer sur une note déjà créée

**Critères d'Acceptation:**
1. **Given** une note existante affichée
2. **When** je clique sur les trois points (⋮) → "Share with collaborators"
3. **Then** la boîte de dialogue CollaboratorDialog s'ouvre
4. **And** je vois la liste des collaborateurs actuels
5. **Given** la boîte de dialogue ouverte
6. **When** j'entre un email et clique "Invite"
7. **Then** l'utilisateur est ajouté aux collaborateurs
8. **And** il apparaît dans la liste avec son nom/avatar
9. **And** je peux le retirer avec le bouton X

**Fichiers à Modifier:**
- `keep-notes/components/note-card.tsx` - Déjà intégré, à tester
- `keep-notes/components/collaborator-dialog.tsx` - Déjà créé, à tester
- `keep-notes/app/actions/notes.ts` - Actions déjà créées, à tester

**Tests Nécessaires:**
- Test E2E: Ouvrir une note → Menu → Share → Ajouter collaborateur
- Test E2E: Vérifier que le collaborateur apparaît dans la liste
- Test E2E: Vérifier qu'on peut retirer un collaborateur

---

### Story 3: Afficher les Collaborateurs sur la Note Card

**ID:** COLLAB-3
**Title:** Afficher les avatars des collaborateurs sur les notes partagées
**Priority:** Should Have
**Estimation:** 2h

**En tant que:** utilisateur
**Je veux:** voir quels collaborateurs ont accès à une note
**Afin que:** je sache qui peut voir et éditer mes notes

**Critères d'Acceptation:**
1. **Given** une note qui a des collaborateurs
2. **When** la note est affichée
3. **Then** je vois les avatars des collaborateurs en bas de la note
4. **And** les avatars sont petits (20-24px) et disposés horizontalement
5. **Given** que je survole un avatar
6. **When** je passe la souris dessus
7. **Then** le nom complet de l'utilisateur apparaît en tooltip
8. **And** un badge "Owner" distingue le propriétaire

**Fichiers à Modifier:**
- `keep-notes/components/note-card.tsx` - Afficher les avatars
- `keep-notes/components/note-card.tsx` - Récupérer `sharedWith` depuis la note

**Implémentation:**
```typescript
// Dans note-card.tsx, après les labels:
{note.sharedWith && note.sharedWith.length > 0 && (
  <div className="flex items-center gap-1 mt-2">
    {note.sharedWith.map(userId => (
      <CollaboratorAvatar key={userId} userId={userId} />
    ))}
  </div>
)}
```

---

### Story 4: Voir les Notes Partagées avec Moi

**ID:** COLLAB-4
**Title:** Afficher une liste de notes que d'autres utilisateurs ont partagées avec moi
**Priority:** Should Have
**Estimation:** 3h

**En tant que:** utilisateur
**Je veux:** voir les notes que d'autres personnes ont partagées avec moi
**Afin que:** je puisse accéder aux notes collaboratives

**Critères d'Acceptation:**
1. **Given** que des utilisateurs m'ont partagé des notes
2. **When** j'accède à la page principale
3. **Then** les notes partagées apparaissent mélangées avec mes notes
4. **And** un badge "Shared by X" indique le propriétaire
5. **Given** une note partagée
6. **When** je la regarde
7. **Then** je peux voir qui m'a partagé cette note
8. **And** l'avatar du propriétaire est visible

**Fichiers à Modifier:**
- `keep-notes/app/actions/notes.ts` - `getAllNotes()` existe déjà
- `keep-notes/app/(main)/page.tsx` - Utiliser `getAllNotes()` au lieu de `getNotes()`

**Note:** L'action `getAllNotes()` existe déjà et combine notes propres + notes partagées !

---

### Story 5: Gérer les Permissions - Lecture vs Écriture

**ID:** COLLAB-5
**Title:** Implémenter des permissions de lecture et d'édition
**Priority:** Could Have (Future)
**Estimation:** 4h

**En tant que:** propriétaire d'une note
**Je veux:** choisir si les collaborateurs peuvent seulement voir ou aussi éditer
**Afin que:** je puisse contrôler qui peut modifier mes notes

**Critères d'Acceptation:**
1. **Given** une note avec des collaborateurs
2. **When** j'ajoute un collaborateur
3. **Then** je peux choisir le permission: "Can view" ou "Can edit"
4. **Given** un collaborateur avec "Can view"
5. **When** il ouvre la note
6. **Then** il peut voir le contenu mais PAS modifier
7. **Given** un collaborateur avec "Can edit"
8. **When** il modifie la note
9. **Then** les modifications sont sauvegardées

**Fichiers à Modifier:**
- `keep-notes/prisma/schema.prisma` - Ajouter table `NoteCollaborator` avec permissions
- `keep-notes/app/actions/notes.ts` - Vérifier les permissions avant update
- `keep-notes/components/collaborator-dialog.tsx` - Ajouter sélecteur de permission

**Note:** Story à implémenter plus tard, complexité élevée.

---

### Story 6: Notification quand On Partage une Note

**ID:** COLLAB-6
**Title:** Envoyer une notification (email/IN-APP) quand on est ajouté comme collaborateur
**Priority:** Could Have
**Estimation:** 3h

**En tant que:** collaborateur
**Je veux:** recevoir une notification quand quelqu'un partage une note avec moi
**Afin que:** je sois au courant que j'ai accès à de nouvelles notes

**Critères d'Acceptation:**
1. **Given** qu'un utilisateur partage une note avec moi
2. **When** la note est partagée
3. **Then** je reçois une notification email
4. **And** l'email contient: le titre de la note, le propriétaire, un lien
5. **Given** que je suis connecté à l'application
6. **When** on partage une note avec moi
7. **Then** une notification in-app apparaît
8. **And** je peux cliquer pour voir la note

**Fichiers à Modifier:**
- `keep-notes/app/actions/notes.ts` - Envoyer email après `addCollaborator()`
- `keep-notes/lib/mail.ts` - Template email pour partage
- `keep-notes/components/notifications.tsx` - Système de notifications in-app (nouveau)

---

### Story 7: Filtrer/Afficher Seulement les Notes Partagées

**ID:** COLLAB-7
**Title:** Ajouter une vue "Shared with me" pour voir uniquement les notes collaboratives
**Priority:** Should Have
**Estimation:** 2h

**En tant que:** utilisateur
**Je veux:** pouvoir filtrer pour voir uniquement les notes partagées avec moi
**Afin que:** je puisse me concentrer sur la collaboration

**Critères d'Acceptation:**
1. **Given** que j'ai des notes partagées
2. **When** je clique sur un filtre "Shared with me"
3. **Then** seules les notes partagées par d'autres s'affichent
4. **And** mes notes personnelles sont masquées
5. **Given** le filtre actif
6. **When** je le désactive
7. **Then** toutes les notes réapparaissent

**Fichiers à Modifier:**
- `keep-notes/components/sidebar.tsx` - Ajouter "Shared with me"
- `keep-notes/app/actions/notes.ts` - Créer `getSharedNotesOnly()`

---

### Story 8: Tests E2E Complets pour Collaborateurs

**ID:** COLLAB-8
**Title:** Créer une suite de tests E2E pour valider le système de collaboration
**Priority:** Should Have
**Estimation:** 4h

**En tant que:** QA / Développeur
**Je veux:** des tests automatisés pour valider toutes les fonctionnalités de collaboration
**Afin que:** nous puissions détecter les régressions

**Critères d'Acceptation:**
1. Tests pour ajouter collaborateur lors de la création
2. Tests pour ajouter collaborateur sur note existante
3. Tests pour retirer un collaborateur
4. Tests pour voir les notes partagées
5. Tests pour vérifier que les non-collaborateurs ne peuvent pas accéder
6. Tests pour les permissions (si implémenté)

**Fichiers à Modifier:**
- `keep-notes/tests/collaboration.spec.ts` - Nouveau fichier

---

## Ordre d'Implémentation

**Sprint 1** (Fonctionnalités de base - AUJOURD'HUI):
1. ✅ **COLLAB-1:** Permettre la sélection lors de la création (Must Have)
2. ✅ **COLLAB-2:** Tester et corriger sur notes existantes (Must Have)

**Sprint 2** (Améliorations UX):
3. **COLLAB-3:** Afficher les avatars sur les notes
4. **COLLAB-4:** Afficher les notes partagées (déjà fait avec `getAllNotes()`)

**Sprint 3** (Futures):
5. **COLLAB-5:** Permissions lecture/écriture
6. **COLLAB-6:** Notifications
7. **COLLAB-7:** Filtre "Shared with me"
8. **COLLAB-8:** Tests E2E

---

## Fichers à Modifier

### Critiques
1. `keep-notes/components/note-input.tsx` - Activer le bouton et gérer les collaborateurs
2. `keep-notes/components/note-card.tsx` - Tester la dialog
3. `keep-notes/components/collaborator-dialog.tsx` - Tester le composant

### Secondaires
4. `keep-notes/app/actions/notes.ts` - `createNote` pour accepter `sharedWith`
5. `keep-notes/lib/types.ts` - Assurer que Note a bien `sharedWith`

---

## Tests de Validation

### Scénario 1: Création avec Collaborateurs
```
1. Cliquer sur "Take a note..."
2. Taper du contenu
3. Cliquer sur le bouton collaborateur (UserPlus)
4. Entrer un email existant
5. Cliquer "Invite"
6. Vérifier que l'utilisateur apparaît dans la liste
7. Cliquer "Add" pour créer la note
8. Vérifier que la note est créée avec le collaborateur
```

### Scénario 2: Note Existante
```
1. Ouvrir une note existante
2. Cliquer sur (⋮) → "Share with collaborators"
3. Ajouter un collaborateur
4. Vérifier qu'il peut voir la note
```

---

**Document Version:** 1.0
**Last Updated:** 2026-01-09
**Priority:** High - Bouton grisé à corriger URGENTEMENT