Keep/_bmad-output/planning-artifacts/epic-collaborators.md

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:

// 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:

// 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