Keep/_bmad-output/planning-artifacts/NEW-EPICS-USER-STORIES.md

# 📋 NOUVEAUX ÉPICS - USER STORIES DÉTAILLÉS

**Sprint :** Sprint 1 - Foundation & Core UX  
**Date de début :** 2026-01-17  
**Product Owner :** Ramez  
**Product Manager :** John  
**Durée estimée :** 2 semaines  
**Objectif :** Design System + Tests Playwright + Desktop UX

---

## 📊 RÉSUMÉ DU SPRINT

### Métriques
| Épics | User Stories | Estimation | Complexité |
|--------|-------------|-----------|------------|
| Epic 10 : Design System | 4 | 3 jours | Medium |
| Epic 16 : Playwright Tests | 6 | 3 jours | High |
| Epic 13 : Desktop UX | 8 | 4 jours | High |
| **TOTAL** | **18** | **10 jours** | - |

### Objectifs du Sprint
1. ✅ Créer et implémenter le Design System unifié
2. ✅ Créer la suite de tests Playwright pour toutes les modales
3. ✅ Implémenter la page Notebook desktop modernisée
4. ✅ Atteindre 100% de couverture des modales

---

## 🎨 EPIC 10 : DESIGN SYSTEM STANDARDIZATION

**Objectif :** Créer un Design System unifié pour garantir la cohérence visuelle

**Complexité :** Medium  
**Priorité :** P0 (Must Have)  
**Dépendances :** Aucune

---

### Story 10.1 : Créer les composants UI de base

**En tant que** développeur front-end,  
**Je veux** créer des composants UI réutilisables selon le Design System,  
**Afin de** garantir la cohérence visuelle dans toute l'application.

**Critères d'acceptation :**
- [ ] Composant `Button` avec variantes : default, outline, ghost, destructive
- [ ] Composant `Button` avec tailles : default (h-9), sm (h-8), icon (h-10)
- [ ] Composant `Badge` avec variantes : default, outline, secondary, destructive
- [ ] Composant `Input` avec validation et focus states
- [ ] Composant `Card` avec hover states et animations
- [ ] Tous les composants supportent 4 thèmes (Light, Dark, Midnight, Sepia)
- [ ] Focus visible avec `ring-2` et `ring-ring/50`
- [ ] Touch targets minimum 44x44px sur mobile

**Fichiers à modifier/créer :**
- `keep-notes/components/ui/button.tsx` (modifier ou créer)
- `keep-notes/components/ui/badge.tsx` (modifier ou créer)
- `keep-notes/components/ui/input.tsx` (modifier ou créer)
- `keep-notes/components/ui/card.tsx` (modifier ou créer)

**Tests Playwright :**
- [ ] Tester l'affichage du Button avec chaque variante
- [ ] Tester l'accessibilité au clavier (Tab, Entrée, ESC)
- [ ] Tester le support des 4 thèmes
- [ ] Tester les touch targets sur mobile

**Estimation :** 1 journée

---

### Story 10.2 : Standardiser la palette de couleurs

**En tant que** développeur front-end,  
**Je veux** standardiser la palette de couleurs avec CSS variables,  
**Afin de** garantir une cohérence visuelle et un support multi-thèmes.

**Critères d'acceptation :**
- [ ] Définir les couleurs sémantiques dans `globals.css` :
  - `--primary` (#356ac0) - Actions principales
  - `--secondary` (#f7f7f8) - Éléments secondaires
  - `--accent` (#356ac0/10) - Mises en évidence
  - `--destructive` (#ef4444) - Actions destructives
  - `--background` (#ffffff) - Arrière-plan principal
  - `--foreground` (#0f172a) - Texte principal
  - `--card` (#ffffff) - Arrière-plan des cartes
  - `--muted` (#f7f7f8) - Texte secondaire
- [ ] Définir les variables pour les 4 thèmes
- [ ] Remplacer toutes les couleurs hardcoded par des variables CSS
- [ ] Vérifier le contraste WCAG 2.1 AA (4.5:1 pour texte normal)
- [ ] Tester les 4 thèmes (Light, Dark, Midnight, Sepia)

**Fichiers à modifier :**
- `keep-notes/app/globals.css`
- Tous les composants qui utilisent des couleurs hardcoded

**Tests Playwright :**
- [ ] Tester l'affichage dans les 4 thèmes
- [ ] Vérifier le contraste avec un outil d'accessibilité
- [ ] Tester le changement de thème en temps réel

**Estimation :** 0.5 journée

---

### Story 10.3 : Standardiser la typographie

**En tant que** développeur front-end,  
**Je veux** standardiser la typographie avec une échelle cohérente,  
**Afin de** garantir une hiérarchie visuelle claire.

**Critères d'acceptation :**
- [ ] Définir l'échelle de tailles de police :
  - `text-xs` (12px) - Labels, badges, métadonnées
  - `text-sm` (14px) - Corps de texte, boutons, inputs
  - `text-base` (16px) - Titres de cartes, texte accentué
  - `text-lg` (18px) - En-têtes de section
  - `text-xl` (20px) - Titres de page
  - `text-2xl` (24px) - Grands titres
- [ ] Définir l'échelle de graisses :
  - `font-normal` (400) - Corps de texte
  - `font-medium` (500) - Texte accentué, labels de boutons
  - `font-semibold` (600) - Titres de section
  - `font-bold` (700) - Grands titres
- [ ] Définir la hiérarchie typographique
- [ ] Remplacer toutes les tailles custom par l'échelle standard
- [ ] Vérifier la lisibilité sur tous les écrans

**Fichiers à modifier :**
- `keep-notes/tailwind.config.ts` (configuration Tailwind)
- Tous les composants qui utilisent des tailles de police custom

**Tests Playwright :**
- [ ] Tester l'affichage sur mobile, tablette et desktop
- [ ] Vérifier la hiérarchie visuelle

**Estimation :** 0.5 journée

---

### Story 10.4 : Standardiser le spacing et les border radius

**En tant que** développeur front-end,  
**Je veux** standardiser le spacing (4px base unit) et les border radius,  
**Afin de** garantir une cohérence visuelle et une facilité d'utilisation.

**Critères d'acceptation :**
- [ ] Définir l'échelle de spacing (base unit 4px) :
  - `spacing-1` (4px) - Tiny gaps, icon padding
  - `spacing-2` (8px) - Small padding, badges
  - `spacing-3` (12px) - Button padding, small inputs
  - `spacing-4` (16px) - Card padding, standard gap
  - `spacing-6` (24px) - Section padding
- [ ] Définir l'échelle de border radius :
  - `radius-sm` (4px) - Small elements, icon buttons
  - `radius-md` (6px) - Inputs, small buttons
  - `radius-lg` (8px) - Cards, buttons (default)
  - `radius-xl` (12px) - Modals, large containers
  - `radius-2xl` (16px) - Hero elements, search bars
  - `radius-full` (9999px) - Circular elements (avatars, pill badges)
- [ ] Définir les standards par composant :
  - Cards/NoteCards : `rounded-lg` (8px)
  - Buttons : `rounded-md` (6px)
  - Inputs : `rounded-md` (6px)
  - Badges (text) : `rounded-full` (pills)
  - Search bars : `rounded-lg` (8px)
- [ ] Remplacer tous les spacing et border radius custom par les valeurs standard

**Fichiers à modifier :**
- Tous les composants qui utilisent du spacing ou des border radius custom

**Tests Playwright :**
- [ ] Tester l'affichage sur tous les breakpoints
- [ ] Vérifier la cohérence visuelle

**Estimation :** 1 journée

---

## 🧪 EPIC 16 : PLAYWRIGHT TEST SUITE

**Objectif :** Créer une suite de tests Playwright complète pour toutes les modales et workflows critiques

**Complexité :** High  
**Priorité :** P0 (Must Have)  
**Dépendances :** Aucune (peut être fait en parallèle)

---

### Story 16.1 : Créer le test d'ouverture de toutes les modales

**En tant que** QA engineer,  
**Je veux** créer des tests Playwright pour l'ouverture des 13 modales,  
**Afin de** m'assurer qu'elles fonctionnent correctement.

**Critères d'acceptation :**
- [ ] Créer des tests pour les 13 modales :
  1. Auto-Label Suggestion Dialog
  2. Batch Organization Dialog
  3. Notebook Summary Dialog
  4. Delete Notebook Dialog
  5. Edit Notebook Dialog
  6. Create Notebook Dialog
  7. Label Management Dialog
  8. Collaborator Dialog
  9. Reminder Dialog
  10. Fusion Modal
  11. Comparison Modal
  12. UI Dialog (base)
  13. UI Popover (base)
- [ ] Tester l'ouverture de chaque modal
- [ ] Vérifier l'affichage du contenu
- [ ] Vérifier le focus sur le premier élément interactif
- [ ] Tester l'accessibilité (ARIA labels)
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/modals/01-open-modals.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.2 : Créer le test de fermeture de toutes les modales

**En tant que** QA engineer,  
**Je veux** créer des tests Playwright pour la fermeture des modales,  
**Afin de** m'assurer que les utilisateurs peuvent les fermer.

**Critères d'acceptation :**
- [ ] Tester la fermeture avec le bouton "Annuler"
- [ ] Tester la fermeture avec la touche ESC
- [ ] Tester la fermeture en cliquant en dehors de la modal
- [ ] Vérifier le focus restoration après fermeture
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/modals/02-close-modals.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.3 : Créer le test de soumission de formulaires dans les modales

**En tant que** QA engineer,  
**Je veux** créer des tests Playwright pour la soumission des formulaires,  
**Afin de** m'assurer que les données sont sauvegardées correctement.

**Critères d'acceptation :**
- [ ] Tester la soumission avec données valides
- [ ] Tester la validation des données invalides
- [ ] Tester l'affichage des messages d'erreur
- [ ] Tester la confirmation de sauvegarde
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/modals/03-form-submission.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.4 : Créer le test d'accessibilité des modales

**En tant que** QA engineer,  
**Je veux** créer des tests Playwright pour l'accessibilité des modales,  
**Afin de** garantir l'accessibilité à tous.

**Critères d'acceptation :**
- [ ] Tester la navigation au clavier (Tab, Entrée, ESC)
- [ ] Tester les indicateurs de focus visibles (3:1 contrast)
- [ ] Tester le support screen reader (ARIA labels)
- [ ] Tester le focus trap dans la modal
- [ ] Tester le focus restoration après fermeture
- [ ] Tester les touch targets (44x44px minimum sur mobile)
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/modals/04-accessibility.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.5 : Créer le test responsive des modales

**En tant que** QA engineer,  
**Je veux** créer des tests Playwright pour l'affichage responsive des modales,  
**Afin de** garantir une expérience cohérente sur tous les appareils.

**Critères d'acceptation :**
- [ ] Tester l'affichage correct sur mobile (< 768px)
- [ ] Tester l'affichage correct sur tablette (768px - 1024px)
- [ ] Tester l'affichage correct sur desktop (>= 1024px)
- [ ] Vérifier l'absence d'overflow horizontal
- [ ] Vérifier l'absence d'overflow vertical
- [ ] Vérifier la taille des boutons (44x44px sur mobile)
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/modals/05-responsive.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.6 : Créer le test du workflow création de note

**En tant que** QA engineer,  
**Je veux** créer un test Playwright pour le workflow de création de note,  
**Afin de** m'assurer que les utilisateurs peuvent créer des notes.

**Critères d'acceptation :**
- [ ] Cliquer sur le bouton "Créer note"
- [ ] Vérifier l'ouverture de la modal
- [ ] Saisir un titre
- [ ] Saisir du contenu
- [ ] Sauvegarder la note
- [ ] Vérifier la création de la note
- [ ] Vérifier l'affichage de la note dans la liste
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/workflows/01-create-note.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.7 : Créer le test du workflow édition de note

**En tant que** QA engineer,  
**Je veux** créer un test Playwright pour le workflow d'édition de note,  
**Afin de** m'assurer que les utilisateurs peuvent modifier leurs notes.

**Critères d'acceptation :**
- [ ] Cliquer sur une note existante
- [ ] Vérifier l'ouverture de la modal
- [ ] Modifier le titre
- [ ] Modifier le contenu
- [ ] Sauvegarder les modifications
- [ ] Vérifier la mise à jour de la note
- [ ] Vérifier l'affichage des modifications dans la liste
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/workflows/02-edit-note.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.8 : Créer le test du workflow suppression de note

**En tant que** QA engineer,  
**Je veux** créer un test Playwright pour le workflow de suppression de note,  
**Afin de** m'assurer que les utilisateurs peuvent supprimer leurs notes.

**Critères d'acceptation :**
- [ ] Sélectionner une note
- [ ] Cliquer sur le menu "..."
- [ ] Sélectionner "Supprimer"
- [ ] Vérifier l'affichage de la modal de confirmation
- [ ] Confirmer la suppression
- [ ] Vérifier la suppression de la note
- [ ] Vérifier l'absence de la note dans la liste
- [ ] Si le test échoue → demander à l'utilisateur de vérifier

**Fichiers à créer :**
- `keep-notes/tests/workflows/03-delete-note.spec.ts`

**Estimation :** 0.5 journée

---

### Story 16.9 : Créer la procédure d'échec de test (CRITIQUE)

**En tant que** développeur,  
**Je veux** implémenter une procédure stricte en cas d'échec de test,  
**Afin de** ne jamais abandonner et trouver une solution.

**Critères d'acceptation :**
- [ ] Créer un utilitaire de test helper avec la procédure :
  ```typescript
  async function handleTestFailure(testName: string, error: Error) {
    // 1. NE JAMAIS ABANDONNER
    console.error(`❌ Test "${testName}" failed:`, error);
    
    // 2. Identifier précisément le blocage
    const failureReason = analyzeFailure(error);
    console.log(`🔍 Failure reason: ${failureReason}`);
    
    // 3. Demander une action utilisateur
    console.log(`\n⚠️ ACTION REQUISE :`);
    console.log(`L'application est-elle démarrée ? (vérifiez http://localhost:3000)`);
    console.log(`Y a-t-il des erreurs dans la console navigateur ?`);
    console.log(`Les permissions navigateur sont-elles OK ?`);
    
    // 4. Attendre la réponse de l'utilisateur
    await promptUserAction(`Veuillez vérifier et appuyer sur ENTRÉE pour continuer...`);
    
    // 5. Réessayer le test
    console.log(`🔄 Retrying test "${testName}"...`);
    
    // 6. Si échec → analyser et proposer solution
    const solution = proposeSolution(failureReason);
    console.log(`💡 Proposed solution: ${solution}`);
    
    // 7. Réessayer
    await retryTest(testName);
  }
  ```
- [ ] Intégrer cette procédure dans tous les tests Playwright
- [ ] Tester la procédure avec un test volontairement qui échoue
- [ ] Documenter tous les blocages

**Fichiers à créer :**
- `keep-notes/tests/utils/test-helper.ts`

**Estimation :** 1 journée

---

## 💻 EPIC 13 : DESKTOP UX REFACTOR

**Objectif :** Refondre complètement l'interface desktop pour offrir une expérience moderne et cohérente

**Complexité :** High  
**Priorité :** P0 (Must Have)  
**Dépendances :** Epic 10 (Design System)

---

### Story 13.1 : Créer le Header global desktop

**En tant qu'utilisateur desktop,  
**Je veux** un header moderne avec logo, recherche et actions,  
**Afin de** naviguer facilement dans l'application.

**Critères d'acceptation :**
- [ ] Créer le composant `Header` avec :
  - Logo Keep avec icône sticky_note_2
  - Barre de recherche (384px de largeur)
  - Bouton Settings
  - Avatar utilisateur avec ring
- [ ] Style moderne avec `h-16` de hauteur
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader)
- [ ] Responsive (disparait sur mobile)

**Fichiers à créer :**
- `keep-notes/components/header.tsx` (créer ou modifier)

**Tests Playwright :**
- [ ] Tester l'affichage du header
- [ ] Tester la barre de recherche
- [ ] Tester les boutons d'action
- [ ] Tester l'accessibilité au clavier

**Estimation :** 0.5 journée

---

### Story 13.2 : Créer la Sidebar gauche desktop

**En tant qu'utilisateur desktop,  
**Je veux** une sidebar de navigation avec notebooks et labels,  
**Afin de** naviguer facilement entre mes notebooks.

**Critères d'acceptation :**
- [ ] Créer le composant `Sidebar` avec :
  - Section "Notebooks" avec bouton "Créer"
  - Liste des notebooks (Personal, Voyage, Work)
  - Labels contextuels imbriqués sous chaque notebook actif
  - Section "Smart Views" (Favorites, Tasks)
  - Footer avec suggestions AI
- [ ] Style moderne avec `w-64` (256px) de largeur
- [ ] Menu "..." pour chaque notebook
- [ ] Labels contextuels avec compte de notes
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader)

**Fichiers à créer :**
- `keep-notes/components/sidebar.tsx` (créer ou modifier)

**Tests Playwright :**
- [ ] Tester l'affichage de la sidebar
- [ ] Tester la navigation entre notebooks
- [ ] Tester les labels contextuels imbriqués
- [ ] Tester l'accessibilité au clavier

**Estimation :** 1 journée

---

### Story 13.3 : Créer la Grille Masonry desktop

**En tant qu'utilisateur desktop,  
**Je veux** une grille masonry responsive avec 1-3 colonnes,  
**Afin de** voir mes notes de manière visuelle et organisée.

**Critères d'acceptation :**
- [ ] Créer le composant `MasonryGrid` avec :
  - 1 colonne sur petit écran (< 1024px)
  - 2 colonnes sur écran moyen (1024px - 1280px)
  - 3 colonnes sur grand écran (>= 1280px)
  - Gap de `gap-6` (24px)
- [ ] Support des 4 thèmes
- [ ] Animations fluides au chargement
- [ ] Accessibilité (clavier, screen reader)

**Fichiers à créer :**
- `keep-notes/components/masonry-grid.tsx` (modifier existant)

**Tests Playwright :**
- [ ] Tester l'affichage sur différents breakpoints
- [ ] Tester la disposition des notes
- [ ] Tester l'accessibilité au clavier

**Estimation :** 0.5 journée

---

### Story 13.4 : Créer la NoteCard desktop

**En tant qu'utilisateur desktop,  
**Je veux** des cartes notes modernes avec images et menu "...",  
**Afin de** voir mes notes de manière attractive et claire.

**Critères d'acceptation :**
- [ ] Créer le composant `NoteCard` avec :
  - Image hero (60% de hauteur) si présente
  - Titre et contenu
  - Labels avec badges
  - Menu "..." au survol (remplace 5 boutons)
  - Avatar en bas à gauche
  - Date en bas à droite
  - Animations fluides (hover:shadow-xl, hover:-translate-y-1)
- [ ] Style moderne avec `h-[380px]` de hauteur
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader, touch targets 44x44px)

**Fichiers à modifier :**
- `keep-notes/components/note-card.tsx`

**Tests Playwright :**
- [ ] Tester l'affichage de la carte
- [ ] Tester le survol et les animations
- [ ] Tester le menu "..."
- [ ] Tester l'accessibilité au clavier

**Estimation :** 1 journée

---

### Story 13.5 : Créer la page Notebook desktop

**En tant qu'utilisateur desktop,  
**Je veux** une page notebook moderne avec sidebar, header et grille masonry,  
**Afin de** naviguer et gérer mes notes efficacement.

**Critères d'acceptation :**
- [ ] Créer la page `NotebookPage` avec :
  - Header global
  - Sidebar gauche
  - En-tête de page avec titre et filtres
  - Grille masonry avec NoteCards
  - Section AI Suggestions
- [ ] En-tête avec breadcrumb (Notebooks > Voyage)
  - Boutons "Filtrer" et "Ajouter Note"
- [ ] Footer avec suggestions AI contextuelles
- [ ] Support des 4 thèmes
- [ ] Accessibilité complète (clavier, screen reader)

**Fichiers à créer :**
- `keep-notes/app/(main)/notebooks/[id]/page.tsx` (créer ou modifier)

**Tests Playwright :**
- [ ] Tester l'affichage de la page
- [ ] Tester la navigation entre notebooks
- [ ] Tester la création de note
- [ ] Tester les filtres
- [ ] Tester l'accessibilité au clavier

**Estimation :** 1 journée

---

### Story 13.6 : Créer la section Smart Views

**En tant qu'utilisateur desktop,  
**Je veux** une section Smart Views avec Favorites et Tasks,  
**Afin de** accéder rapidement à mes notes importantes.

**Critères d'acceptation :**
- [ ] Créer le composant `SmartViewsSection` avec :
  - Vue "Favorites" avec étoile jaune
  - Vue "Tasks" avec coche verte
  - Compteurs pour chaque vue
- [ ] Style moderne avec icônes colorées
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader)

**Fichiers à créer :**
- `keep-notes/components/smart-views-section.tsx` (créer ou modifier)

**Tests Playwright :**
- [ ] Tester l'affichage des vues
- [ ] Tester la navigation entre vues
- [ ] Tester l'accessibilité au clavier

**Estimation :** 0.5 journée

---

### Story 13.7 : Créer la section AI Suggestions footer

**En tant qu'utilisateur desktop,  
**Je veux** un footer avec suggestions AI contextuelles,  
**Afin de** découvrir de nouvelles connexions entre mes notes.

**Critères d'acceptation :**
- [ ] Créer le composant `AISuggestionsFooter` avec :
  - Icône auto_awesome
  - Titre "AI Suggestions"
  - Description (ex: "2 nouvelles suggestions pour Voyage")
  - Gradient visuel
- [ ] Style moderne avec `border-l-4 border-primary`
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader)

**Fichiers à créer :**
- `keep-notes/components/ai-suggestions-footer.tsx` (créer ou modifier)

**Tests Playwright :**
- [ ] Tester l'affichage du footer
- [ ] Tester le clic sur les suggestions
- [ ] Tester l'accessibilité au clavier

**Estimation :** 0.5 journée

---

### Story 13.8 : Créer la recherche hybride desktop

**En tant qu'utilisateur desktop,  
**Je veux** une recherche hybride dans le header,  
**Afin de** trouver mes notes par mots-clés ou sens sémantique.

**Critères d'acceptation :**
- [ ] Créer le composant `SearchBar` avec :
  - Input de recherche (384px de largeur)
  - Icône search
  - Placeholder "Rechercher notes, étiquettes..."
  - Débouncing (300ms)
- [ ] Recherche hybride (keyword + sémantique)
- [ ] Badges "Exact Match" / "Semantic Match"
- [ ] Style moderne avec `rounded-xl`
- [ ] Support des 4 thèmes
- [ ] Accessibilité (clavier, screen reader)

**Fichiers à modifier :**
- `keep-notes/components/header.tsx`

**Tests Playwright :**
- [ ] Tester la recherche par mots-clés
- [ ] Tester la recherche sémantique
- [ ] Tester les badges
- [ ] Tester l'accessibilité au clavier

**Estimation :** 1 journée

---

## 📅 PLANIFICATION DU SPRINT

### Semaine 1 (Jour 1-5)

| Jour | Épic | Story | Estimation |
|------|------|-------|-----------|
| Lundi 17/01 | Epic 10 | Story 10.1 (Composants UI) | 1 jour |
| Lundi 17/01 | Epic 16 | Story 16.1 (Ouverture modales) | 0.5 jour |
| Lundi 17/01 | Epic 16 | Story 16.2 (Fermeture modales) | 0.5 jour |
| Mardi 18/01 | Epic 10 | Story 10.2 (Couleurs) | 0.5 jour |
| Mardi 18/01 | Epic 10 | Story 10.3 (Typographie) | 0.5 jour |
| Mardi 18/01 | Epic 13 | Story 13.1 (Header) | 0.5 jour |
| Mercredi 19/01 | Epic 10 | Story 10.4 (Spacing) | 1 jour |
| Mercredi 19/01 | Epic 16 | Story 16.9 (Procédure échec) | 1 jour |
| Jeudi 20/01 | Epic 13 | Story 13.2 (Sidebar) | 1 jour |
| Vendredi 21/01 | Epic 13 | Story 13.3 (Masonry Grid) | 0.5 jour |
| Vendredi 21/01 | Epic 13 | Story 13.4 (NoteCard) | 0.5 jour |

### Semaine 2 (Jour 6-10)

| Jour | Épic | Story | Estimation |
|------|------|-------|-----------|
| Lundi 24/01 | Epic 16 | Story 16.3 (Formulaires) | 0.5 jour |
| Lundi 24/01 | Epic 16 | Story 16.4 (Accessibilité) | 0.5 jour |
| Mardi 25/01 | Epic 16 | Story 16.5 (Responsive) | 0.5 jour |
| Mardi 25/01 | Epic 16 | Story 16.6 (Création note) | 0.5 jour |
| Mercredi 26/01 | Epic 16 | Story 16.7 (Édition note) | 0.5 jour |
| Mercredi 26/01 | Epic 16 | Story 16.8 (Suppression note) | 0.5 jour |
| Jeudi 27/01 | Epic 13 | Story 13.5 (Page Notebook) | 1 jour |
| Vendredi 28/01 | Epic 13 | Story 13.6 (Smart Views) | 0.5 jour |
| Vendredi 28/01 | Epic 13 | Story 13.7 (AI Suggestions) | 0.5 jour |
| Weekend | Epic 13 | Story 13.8 (Recherche hybride) | 1 jour |

---

## ✅ CRITÈRES DE SUCCÈS DU SPRINT

### Fonctionnels
- [ ] Design System complet avec composants réutilisables
- [ ] Page Notebook desktop moderne et fonctionnelle
- [ ] Suite de tests Playwright pour toutes les modales
- [ ] Procédure stricte en cas d'échec de test

### Techniques
- [ ] Code couvert par les tests Playwright (100% couverture modales)
- [ ] Performance < 2s pour le chargement de la page
- [ ] Accessibilité WCAG 2.1 Level AA
- [ ] Support des 4 thèmes (Light, Dark, Midnight, Sepia)

### Qualité
- [ ] Zéro bug critique en production
- [ ] Code reviewé et approuvé
- [ ] Documentation à jour

---

## 🎯 OBJECTIFS DU SPRINT

### Objectif Principal
**Créer les fondations de l'interface utilisateur moderne avec un Design System unifié, une suite de tests Playwright complète et une page Notebook desktop refactorisée.**

### Objectifs Spécifiques

1. **Design System** (3 jours)
   - Créer les composants UI de base
   - Standardiser les couleurs, typographie, spacing
   - Supporter 4 thèmes

2. **Tests Playwright** (3 jours)
   - Créer des tests pour les 13 modales
   - Créer des tests pour les workflows critiques
   - Implémenter la procédure d'échec stricte
   - Atteindre 100% de couverture

3. **Desktop UX** (4 jours)
   - Créer le Header global
   - Créer la Sidebar gauche
   - Créer la Grille Masonry
   - Créer la NoteCard moderne
   - Créer la page Notebook complète

---

## 📊 MÉTRIQUES DU SPRINT

### KPIs
| Métrique | Objectif | Comment mesurer |
|----------|----------|-----------------|
| Couverture tests Playwright | 100% modales | `npx playwright test --coverage` |
| Performance FCP | < 2s | Lighthouse CI/CD |
| Accessibility Score | > 90 | Lighthouse CI/CD |
| Bugs critiques | 0 | Bug tracking |
| User Stories complétées | 18/18 | Project tracking |

### Velocity
- **Objectif :** 18 User Stories en 10 jours
- **Équivalence :** 1.8 stories/jour
- **Buffer :** 2 jours pour imprévus

---

## 🚀 DÉMARRAGE IMMÉDIAT

**RAMEZ, le sprint est lancé !** 🚀

**Prochaine étape :**
Commençons immédiatement avec **Story 10.1 : Créer les composants UI de base**

Veux-tu que je commence l'implémentation maintenant ?

**Options :**
1. ✅ **OUI, commence l'implémentation du Design System !**
2. 🔧 **Commence par les tests Playwright en parallèle**
3. 📋 **Revoyons le plan ensemble d'abord**

Dites-moi simplement "1", "2" ou "3" ! 🚀

---

**Document Status :** READY  
**Sprint :** Sprint 1 - Foundation & Core UX  
**Date de début :** 2026-01-17  
**Durée :** 10 jours  
**Product Owner :** Ramez  
**Product Manager :** John