Keep/_bmad-output/planning-artifacts/PRD-KEEP-REDESIGN.md

# 📄 PRODUCT REQUIREMENTS DOCUMENT (PRD) - KEEP REDESIGN

**Version:** 2.0  
**Date:** 2026-01-17  
**Product Manager:** John  
**Client:** Ramez  
**Status:** DRAFT

---

## 📋 TABLE DES MATIÈRES

1. [Executive Summary](#executive-summary)
2. [Product Vision](#product-vision)
3. [Problem Statement](#problem-statement)
4. [Target Audience](#target-audience)
5. [Success Criteria](#success-criteria)
6. [Functional Requirements](#functional-requirements)
7. [Non-Functional Requirements](#non-functional-requirements)
8. [Technical Constraints](#technical-constraints)
9. [Epics Breakdown](#epics-breakdown)
10. [User Stories](#user-stories)
11. [Prioritization](#prioritization)
12. [Timeline](#timeline)

---

## Executive Summary

### Overview
Keep est une application de prise de notes intelligente avec intégration d'IA pour améliorer l'organisation et la découverte de connaissances. Ce PRD v2.0 définit la refonte complète de l'interface utilisateur pour offrir une expérience moderne, cohérente et accessible sur tous les appareils.

### Key Changes from v1.0

| Aspect | v1.0 (Current) | v2.0 (Proposed) |
|--------|----------------|------------------|
| Design | Incohérent, composants disparates | Design System unifié avec composants réutilisables |
| Desktop | Masonry grid basique | Masonry amélioré avec hero cards + menu "..." |
| Mobile | Desktop responsive non optimisé | Mobile-first avec drawer, FAB, swipe gestures |
| Admin | Fonctionnal mais design daté | Dashboard moderne avec métriques temps réel |
| Profil | Basique | Profil enrichi avec bannière, statistiques, thèmes |
| Tests | Playwright partiel | Suite de tests complète (50+ tests) |
| Modales | Testées partiellement | Toutes modales testées avec procédure échec |

### Objectifs Principaux

1. **Design Unifié** : Créer un Design System cohérent pour desktop, mobile, admin et profil
2. **UX Mobile-First** : Optimiser l'expérience mobile avec patterns modernes (FAB, swipe, gestures)
3. **Tests Complets** : Créer une suite de tests Playwright complète pour TOUS les workflows
4. **Innovation Continue** : Identifier et implémenter 5-10 nouvelles fonctionnalités innovantes
5. **Accessibilité Totale** : WCAG 2.1 Level AA compliance sur toutes les interfaces

---

## Product Vision

### Vision Statement

> "Keep est la solution de prise de notes ultime qui combine la simplicité avec l'intelligence artificielle pour transformer la manière dont les gens captent, organisent et découvrent leurs idées, quel que soit leur appareil."

### Core Values

1. **Simplicité** : Interface intuitive, fonctionnalités accessibles en moins de 3 clics
2. **Intelligence** : IA proactive qui suggère, organise et connecte automatiquement
3. **Flexibilité** : Travaillez n'importe où, n'importe quand, sur n'importe quel appareil
4. **Confidentialité** : Contrôle total sur vos données (local ou cloud)
5. **Accessibilité** : Accessible à tous, quel que soit leur capacité ou appareil

---

## Problem Statement

### Current Pain Points

1. **Incohérence Visuelle**
   - Problème : L'interface a l'air "bricolé", sans design system
   - Impact : Confusion utilisateurs, mauvaise impression première
   - Métaphore : "Ça ressemble à un collage d'interfaces différentes"

2. **Expérience Mobile Suboptimale**
   - Problème : Mobile est une version responsive desktop, pas mobile-first
   - Impact : Difficulté d'utilisation sur petits écrans, touch targets trop petits
   - Métaphore : "Comme utiliser un ordinateur sur un téléphone"

3. **Tests Insuffisants**
   - Problème : Seuls quelques workflows sont testés
   - Impact : Bugs en production, regression non détectée
   - Métaphore : "Construire une maison sans faire d'inspections"

4. **Modales Non Testées**
   - Problème : 13 modales/popups sans tests automatisés
   - Impact : Risque élevé de bugs, UX incohérente
   - Métaphore : "13 portes sans savoir si elles s'ouvrent"

5. **Admin et Profil Datés**
   - Problème : Interfaces fonctionnelles mais design années 2010
   - Impact : Mauvaise impression pour admins et utilisateurs
   - Métaphore : "Interface utilitaire mais pas engageante"

### User Feedback (Hypothétique)

> "L'application fonctionne bien mais elle manque de cohérence visuelle. Sur mobile, c'est difficile de naviguer. J'ai parfois des bugs avec les popups." - Utilisateur typique

---

## Target Audience

### Primary Personas

#### Persona 1 : Alex (Professionnel Mobile)

**Profil :**
- Âge : 32 ans
- Métier : Consultant en stratégie
- Usage : Mobile 70% / Desktop 30%
- Objectifs : Capture rapide d'idées, organisation simple

**Besoins :**
- Capture ultra-rapide (< 5 secondes)
- Accessibilité offline
- Recherche intelligente
- Partage facile

**Frustrations actuelles :**
- "L'interface mobile est encombrante"
- "Je ne peux pas organiser mes notes sur mobile"
- "Les modales sont parfois bloquées"

#### Persona 2 : Maya (Creative Desktop)

**Profil :**
- Âge : 28 ans
- Métier : Designer freelance
- Usage : Desktop 80% / Tablet 20%
- Objectifs : Organisation visuelle, gestion de projets

**Besoins :**
- Interface visuelle (masonry, images)
- Drag & drop fluid
- Collaboration facile
- Export vers autres outils

**Frustrations actuelles :**
- "L'interface desktop manque de modernité"
- "Je ne peux pas réorganiser mes notes facilement"
- "Les couleurs ne sont pas cohérentes"

#### Persona 3 : Romain (Admin Équipe)

**Profil :**
- Âge : 38 ans
- Métier : Manager d'équipe IT
- Usage : Desktop 100%
- Objectifs : Gestion utilisateurs, monitoring, coûts

**Besoins :**
- Dashboard métriques clair
- Gestion utilisateurs simple
- Monitoring AI en temps réel
- Contrôle des coûts

**Frustrations actuelles :**
- "L'admin est fonctionnel mais le design est daté"
- "Je n'ai pas de visibilité sur l'utilisation IA"
- "La gestion des coûts est manuelle"

---

## Success Criteria

### Qualitative Goals

1. **Cohérence Visuelle**
   - Success : Toutes les pages suivent le Design System
   - Mesure : Audit visuel + feedback utilisateurs
   - Target : 100% des composants conformes

2. **Expérience Mobile**
   - Success : UX native-like sur mobile
   - Mesure : Taux de satisfaction mobile > 4.5/5
   - Target : Zéro plainte sur l'expérience mobile

3. **Fiabilité Tests**
   - Success : Tous les workflows critiques testés
   - Mesure : 100% couverture Playwright
   - Target : Zéro bug critique en production

4. **Accessibilité**
   - Success : WCAG 2.1 Level AA sur toutes les pages
   - Mesure : Audit automatisé + tests manuels
   - Target : 100% conformité

### Quantitative Goals

| Metric | Current | Target | Timeline |
|--------|---------|--------|----------|
| Note creation time (mobile) | 15s | < 5s | Q2 2026 |
| Note creation time (desktop) | 8s | < 3s | Q2 2026 |
| Test coverage (Playwright) | 30% | 100% | Q1 2026 |
| Mobile conversion rate | 15% | > 25% | Q3 2026 |
| User satisfaction (NPS) | 35 | > 50 | Q3 2026 |
| Accessibility score (Lighthouse) | 65 | > 90 | Q2 2026 |

---

## Functional Requirements

### EPIC 13 : Desktop Design Refactor

#### FR-D-01 : Design System Implementation
- Implémenter un Design System complet avec composants réutilisables
- Standardiser spacing (4px base unit), couleurs, typographie, border radius
- Créer composants UI : Button, Badge, Input, Card, Dialog, Dropdown
- Supporter 4 thèmes : Light, Dark, Midnight, Sepia

#### FR-D-02 : Notebook Page Desktop
- Créer une sidebar gauche (256px) avec notebooks et labels contextuels
- Implémenter une grille masonry responsive (1-3 colonnes)
- Créer des NoteCards avec images hero (60% hauteur)
- Remplacer 5 boutons par 1 menu "..." (dropdown)
- Ajouter des animations fluides (hover, transitions)

#### FR-D-03 : Contextual Labels
- Afficher les labels contextuels imbriqués dans la sidebar
- Créer un bouton "+" pour ajouter des labels
- Afficher le nombre de notes par label

#### FR-D-04 : Smart Views Section
- Créer une section "Smart Views" dans la sidebar
- Implémenter "Favorites" avec étoile
- Implémenter "Tasks" avec coche verte

#### FR-D-05 : AI Suggestions Footer
- Créer un footer avec suggestions AI contextuelles
- Afficher le nombre de nouvelles suggestions
- Créer un gradient visuel pour attirer l'attention

#### FR-D-06 : Search Integration
- Créer une barre de recherche dans le header (384px largeur)
- Implémenter la recherche hybride (keyword + sémantique)
- Afficher des badges "Exact Match" / "Semantic Match"

### EPIC 14 : Admin & Profil Redesign

#### FR-AP-01 : Admin Dashboard
- Créer un header admin avec logo, recherche, notifications
- Implémenter une sidebar de navigation (Dashboard, Users, Analytics, Config, Security, AI Costs, Audit Log, Notifications)
- Créer des cartes métriques avec nombres et indicateurs de tendance
- Implémenter des graphiques en ligne et circulaires

#### FR-AP-02 : User Management
- Créer un tableau d'utilisateurs avec recherche et filtres
- Implémenter des actions en lot (activer, désactiver, supprimer)
- Afficher des indicateurs de statut (actif, inactif, admin)
- Créer un dialog "Créer utilisateur"

#### FR-AP-03 : AI Cost Tracking
- Créer une section "Coûts AI" avec métriques par utilisateur
- Implémenter un graphique des coûts dans le temps
- Afficher les tokens consommés par feature
- Créer des alertes de coût

#### FR-AP-04 : Profile Page
- Créer une bannière image avec avatar centré
- Afficher nom complet, email, bio
- Implémenter des statistiques (notes, labels, notebooks, jours actifs)
- Créer un sélecteur de thèmes avec 4 options

#### FR-AP-05 : Profile Settings
- Créer des sections "Paramètres préférés" (langue, fuseau, email, privacy)
- Créer une section "Sécurité" (mot de passe, 2FA, sessions)
- Créer une section "AI Settings" avec provider, features

#### FR-AP-06 : Theme Switcher
- Créer des cartes thèmes avec prévisualisation
- Implémenter le changement de thème en temps réel
- Sauvegarder le thème dans localStorage

### EPIC 15 : Mobile UX Overhaul

#### FR-M-01 : Mobile Header
- Créer un header compact (60px) avec menu bouton, titre, recherche, "..."
- Implémenter le menu bouton pour ouvrir le navigation drawer

#### FR-M-02 : Navigation Drawer
- Créer un drawer coulissant (85% largeur)
- Afficher les notebooks et smart views
- Implémenter les labels contextuels imbriqués
- Ajouter un bouton fermer

#### FR-M-03 : Horizontal Filter Chips
- Créer des filtres horizontaux scrollables (hide-scrollbar)
- Implémenter le bouton "All" actif
- Créer des boutons pour chaque label
- Supporter le scroll horizontal

#### FR-M-04 : Vertical Note List
- Remplacer la grille masonry par une liste verticale
- Créer 3 types de cartes :
  - Hero Card (avec image, première note)
  - Compact Card (sans image)
  - List Card (checklist)
- Optimiser pour l'affichage mobile

#### FR-M-05 : Bottom Tab Bar
- Créer une barre de navigation en bas (72px hauteur)
- Implémenter 4 onglets : Home, Notebooks, Search, Settings
- Ajouter un espace vide pour le FAB
- Supporter safe-area (iPhone X+)

#### FR-M-06 : Floating Action Button (FAB)
- Créer un bouton FAB en bas à droite (56x56px)
- Implémenter une animation de rotation au survol
- Ajouter une ombre et un effet de scale au survol

#### FR-M-07 : Swipe Gestures
- Implémenter swipe left → supprimer note
- Implémenter swipe right → archiver note
- Ajouter des indicateurs visuels pendant le swipe
- Supporter haptic feedback

#### FR-M-08 : Long Press Context Menu
- Implémenter un menu contextuel sur appui long
- Afficher : Éditer, Déplacer, Archiver, Supprimer
- Ajouter haptic feedback

#### FR-M-09 : Pull-to-Refresh
- Implémenter pull-to-refresh pour rafraîchir les notes
- Afficher un indicateur de chargement
- Supporter haptic feedback

### EPIC 16 : Playwright Test Suite

#### FR-T-01 : All Modals Tested
- Créer des tests pour les 13 modales existantes
- Tester l'ouverture, la fermeture, l'annulation, la sauvegarde
- Tester l'accessibilité (clavier, screen reader)
- Tester le responsive

#### FR-T-02 : Workflow Tests
- Créer des tests pour les workflows critiques :
  - Création de note
  - Édition de note
  - Suppression de note
  - Création de notebook
  - Déplacement de note
  - Changement de thème
- Implémenter des asserts pour vérifier les états

#### FR-T-03 : Failure Procedure
- Définir la procédure en cas d'échec de test :
  1. NE JAMAIS ABANDONNER
  2. Identifier précisément le blocage
  3. Demander une action utilisateur
  4. Attendre la réponse
  5. Réessayer
  6. Si échec → analyser et proposer solution
- Documenter tous les blocages
- Créer un guide de débogage

#### FR-T-04 : Modal-Specific Tests
**Auto-Label Suggestion Dialog :**
- Tester affichage des suggestions
- Tester application d'une suggestion
- Tester refus des suggestions
- Tester performance (< 2s)

**Batch Organization Dialog :**
- Tester sélection multiple
- Tester déplacement en lot
- Tester annulation

**Notebook Actions Dialogs :**
- Tester création notebook
- Tester édition notebook
- Tester suppression avec confirmation

**Label Management Dialog :**
- Tester création label
- Tester renommage
- Tester suppression
- Tester color picker

**Collaborator Dialog :**
- Tester ajout collaborateur
- Tester liste collaborateurs
- Tester suppression
- Tester permissions

**Reminder Dialog :**
- Tester création rappel
- Tester sélection date/heure
- Tester édition
- Tester suppression

**Fusion Modal :**
- Tester sélection notes
- Tester aperçu fusion
- Tester confirmation
- Tester annulation

**Comparison Modal :**
- Tester affichage côte à côte
- Tester différences visuelles
- Tester navigation versions
- Tester fusion selective

#### FR-T-05 : Accessibility Tests
- Tester navigation clavier (Tab, Entrée, ESC)
- Tester indicateurs focus (3:1 contrast)
- Tester support screen reader (ARIA labels)
- Tester touch targets (44x44px mobile)
- Tester focus trap dans modales
- Tester focus restoration

#### FR-T-06 : Responsive Tests
- Tester affichage mobile (< 768px)
- Tester affichage tablette (768px - 1024px)
- Tester affichage desktop (>= 1024px)
- Tester absence d'overflow
- Tester taille boutons (44x44px mobile)

### EPIC 17 : Innovation Features

#### FR-I-01 : Voice Note Capture
- Permettre la création de notes vocales
- Transcrire automatiquement avec IA
- Supporter multiple langues
- Implémenter haptic feedback

#### FR-I-02 : Smart Templates
- Créer des templates intelligents pour différents types de notes :
  - Meeting notes
  - Project brief
  - Daily standup
  - Trip planning
- Remplir automatiquement certains champs avec IA
- Personnaliser les templates

#### FR-I-03 : Smart Sharing
- Suggérer des destinataires basé sur le contenu
- Créer des liens de partage temporaires
- Implémenter des permissions granulaires
- Track les vues et modifications

#### FR-I-04 : Intelligent Search
- Recherche par image (reconnaissance visuelle)
- Recherche par audio (reconnaissance vocale)
- Recherche par tags automatiques
- Suggestions de requêtes de recherche

#### FR-I-05 : Smart Calendar Integration
- Suggérer automatiquement des rappels
- Intégrer avec Google Calendar, Outlook, Apple Calendar
- Afficher les notes dans le calendrier
- Créer des événements depuis des notes

#### FR-I-06 : Analytics Dashboard (User)
- Créer un dashboard d'analyse pour l'utilisateur
- Afficher :
  - Notes créées par jour/semaine/mois
  - Labels les plus utilisés
  - Productivité vs objectifs
- Créer des graphiques visuels

#### FR-I-07 : Smart Folders
- Créer des dossiers intelligents qui s'organisent automatiquement
- Utiliser l'IA pour suggérer des classements
- Permettre l'organisation manuelle
- Implémenter drag & drop

#### FR-I-08 : Collaborative Editing
- Permettre l'édition en temps réel multi-utilisateurs
- Afficher les curseurs des autres utilisateurs
- Implémenter un historique de version
- Supporter les commentaires inline

#### FR-I-09 : Smart Attachments
- Détecter automatiquement les fichiers dans les notes
- Générer des aperçus intelligents
- Permettre l'annotation de fichiers
- Créer des liens entre fichiers et notes

#### FR-I-10 : AI-powered Summarization
- Générer automatiquement des résumés de notes longues
- Créer des résumés de notebooks
- Générer des résumés de réunions
- Permettre des résumés personnalisés

---

## Non-Functional Requirements

### Performance

#### NFR-P-01 : Page Load Time
- FCP (First Contentful Paint) < 2s sur 4G
- TTI (Time to Interactive) < 3s sur 4G
- LCP (Largest Contentful Paint) < 2.5s sur 4G

#### NFR-P-02 : Interaction Latency
- Réponse des boutons < 50ms
- Transition d'animation < 100ms (60fps)
- Ouverture de modale < 150ms

#### NFR-P-03 : Mobile Performance
- Scroll fluide (60fps)
- Animations fluides (60fps)
- Pas de lag sur interactions tactiles

### Accessibility

#### NFR-A-01 : WCAG 2.1 Level AA
- Contrast minimum 4.5:1 pour texte normal
- Contrast minimum 3:1 pour texte large (18px+)
- Touch targets minimum 44x44px sur mobile
- Focus visible 3:1 contrast

#### NFR-A-02 : Keyboard Navigation
- Toutes les fonctions accessibles au clavier
- Ordre de tabulation logique
- Raccourcis clavier documentés

#### NFR-A-03 : Screen Reader Support
- Support NVDA, JAWS, VoiceOver
- Labels ARIA corrects
- Announcements pertinentes

### Security

#### NFR-S-01 : Data Privacy
- Chiffrement des notes au repos
- Chiffrement des API keys IA
- Option traitement local (Ollama)

#### NFR-S-02 : Authentication
- Authentification multi-facteur (2FA)
- Sessions expire après 30 jours
- Reset de mot de passe sécurisé

### Reliability

#### NFR-R-01 : Uptime
- 99% uptime pendant heures ouvrables (9h-18h)
- Dégradation gracieuse si indisponible

#### NFR-R-02 : Error Handling
- Messages d'erreur clairs (sans jargon)
- Retry automatique avec exponential backoff
- Logging des erreurs pour audit

---

## Technical Constraints

### Frontend

#### TC-F-01 : Framework
- Next.js 16.1.1 (React 19.2.3)
- TypeScript 5+
- Tailwind CSS 4

#### TC-F-02 : Testing
- Playwright 1.57.0
- Tests automatisés pour TOUS les workflows
- Procédure stricte en cas d'échec

#### TC-F-03 : Responsive
- Mobile-first approach
- Breakpoints : sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)

### Backend

#### TC-B-01 : Database
- SQLite (actuel) avec possibilité de migration PostgreSQL
- Prisma ORM
- Migrations non-breaking

#### TC-B-02 : AI Providers
- OpenAI API (cloud)
- Ollama (local)
- Pattern Factory pour extensibilité

---

## Epics Breakdown

### Existing Epics (1-12)

1. **Epic 1** : AI-Powered Title Suggestions (10 stories)
2. **Epic 2** : Hybrid Semantic Search (6 stories)
3. **Epic 3** : Memory Echo - Proactive Connections (8 stories)
4. **Epic 4** : Paragraph-Level AI Reformulation (8 stories)
5. **Epic 5** : AI Settings & Privacy Control (11 stories)
6. **Epic 6** : Language Detection & Multilingual Support (2 stories)
7. **Epic 7** : Admin Dashboard & Analytics (9 stories)
8. **Epic 8** : Accessibility & Responsive Design (8 stories)
9. **Epic 9** : Simplify NoteCard Interface (5 stories)
10. **Epic 10** : Design System Standardization (4 stories)
11. **Epic 11** : Settings Interface Redesign (4 stories)
12. **Epic 12** : Mobile Experience Optimization (4 stories)

### New Epics (13-17)

13. **Epic 13** : Desktop Design Refactor (~15 stories)
14. **Epic 14** : Admin & Profil Redesign (~12 stories)
15. **Epic 15** : Mobile UX Overhaul (~10 stories)
16. **Epic 16** : Playwright Test Suite (~20 stories)
17. **Epic 17** : Innovation Features (~20 stories)

**Total : 17 Épics | ~120 User Stories**

---

## User Stories

### Epic 13 : Desktop Design Refactor

#### Story 13.1 : Create Design System Components
**En tant que** développeur,  
**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 Badge avec variantes : default, outline, secondary
- Composant Input avec validation et focus states
- Composant Card avec hover states et animations
- Tous les composants supportent 4 thèmes

#### Story 13.2 : Implement Desktop Notebook Page
**En tant qu'utilisateur desktop,  
**Je veux** une page notebook moderne avec sidebar et grille masonry,  
**Afin de** organiser mes notes de manière visuelle et intuitive.

**Critères d'acceptation :**
- Sidebar gauche (256px) avec notebooks et labels contextuels
- Grille masonry responsive (1-3 colonnes)
- NoteCards avec images hero et menu "..."
- Animations fluides au survol
- Compatible avec 4 thèmes

#### Story 13.3 : Implement Contextual Labels
**En tant qu'utilisateur,  
**Je veux** voir les labels contextuels dans la sidebar,  
**Afin de** filtrer rapidement mes notes par sujet.

**Critères d'acceptation :**
- Labels imbriqués sous chaque notebook actif
- Affichage du nombre de notes par label
- Bouton "+" pour ajouter des labels
- Labels avec icônes colorées

#### Story 13.4 : Implement Smart Views
**En tant qu'utilisateur,  
**Je veux** accéder à des vues intelligentes (Favorites, Tasks),  
**Afin de** retrouver rapidement mes notes importantes.

**Critères d'acceptation :**
- Section "Smart Views" dans la sidebar
- Vue "Favorites" avec étoile
- Vue "Tasks" avec coche verte
- Compteurs pour chaque vue

#### Story 13.5 : Implement AI Suggestions Footer
**En tant qu'utilisateur,  
**Je veux** voir des suggestions AI contextuelles dans un footer,  
**Afin de** découvrir de nouvelles connexions entre mes notes.

**Critères d'acceptation :**
- Footer avec gradient visuel
- Affichage du nombre de nouvelles suggestions
- Clic pour voir les détails
- Animation d'apparition

#### Story 13.6 : Implement Search Integration
**En tant qu'utilisateur,  
**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 :**
- Barre de recherche (384px)
- Recherche hybride (keyword + sémantique)
- Badges "Exact Match" / "Semantic Match"
- Résultats en temps réel avec debouncing

### Epic 14 : Admin & Profil Redesign

#### Story 14.1 : Implement Admin Dashboard
**En tant qu'admin,  
**Je veux** un dashboard moderne avec métriques et navigation,  
**Afin de** monitorer efficacement l'utilisation de la plateforme.

**Critères d'acceptation :**
- Header admin avec logo, recherche, notifications
- Sidebar avec 8 sections (Dashboard, Users, Analytics, Config, Security, AI Costs, Audit Log, Notifications)
- Cartes métriques avec indicateurs de tendance
- Graphiques en ligne et circulaires

#### Story 14.2 : Implement User Management
**En tant qu'admin,  
**Je veux** gérer les utilisateurs via un tableau avec filtres,  
**Afin de** contrôler l'accès à la plateforme.

**Critères d'acceptation :**
- Tableau d'utilisateurs avec recherche
- Filtres par statut (actif, inactif, admin)
- Actions en lot (activer, désactiver, supprimer)
- Dialog "Créer utilisateur"

#### Story 14.3 : Implement AI Cost Tracking
**En tant qu'admin,  
**Je veux** suivre les coûts IA par utilisateur et par feature,  
**Afin de** optimiser les dépenses et prévoir les coûts futurs.

**Critères d'acceptation :**
- Section "Coûts AI" avec métriques
- Graphique des coûts dans le temps
- Tokens consommés par feature
- Alertes de coût

#### Story 14.4 : Implement Profile Page
**En tant qu'utilisateur,  
**Je veux** un profil enrichi avec bannière, statistiques et thèmes,  
**Afin de** personnaliser mon expérience.

**Critères d'acceptation :**
- Bannière image avec avatar centré
- Nom complet, email, bio
- Statistiques (notes, labels, notebooks, jours actifs)
- Sélecteur de thèmes avec 4 options

#### Story 14.5 : Implement Profile Settings
**En tant qu'utilisateur,  
**Je veux** configurer mes préférences (langue, fuseau, email, sécurité),  
**Afin de** adapter l'application à mes besoins.

**Critères d'acceptation :**
- Section "Paramètres préférés"
- Section "Sécurité" (mot de passe, 2FA, sessions)
- Section "AI Settings" avec provider et features

#### Story 14.6 : Implement Theme Switcher
**En tant qu'utilisateur,  
**Je veux** changer de thème en temps réel,  
**Afin de** choisir l'apparence qui me convient.

**Critères d'acceptation :**
- Cartes thèmes avec prévisualisation
- 4 thèmes : Light, Dark, Midnight, Sepia
- Changement instantané
- Sauvegarde dans localStorage

### Epic 15 : Mobile UX Overhaul

#### Story 15.1 : Implement Mobile Header
**En tant qu'utilisateur mobile,  
**Je veux** un header compact avec menu et recherche,  
**Afin de** naviguer facilement sur mon appareil.

**Critères d'acceptation :**
- Header compact (60px)
- Menu bouton pour drawer
- Titre centré
- Boutons recherche et "..." à droite

#### Story 15.2 : Implement Navigation Drawer
**En tant qu'utilisateur mobile,  
**Je veux** un drawer coulissant avec notebooks et vues,  
**Afin de** naviguer sans quitter mon contexte.

**Critères d'acceptation :**
- Drawer coulissant (85% largeur)
- Notebooks et labels contextuels imbriqués
- Smart Views (Favorites, Tasks)
- Bouton fermer

#### Story 15.3 : Implement Horizontal Filter Chips
**En tant qu'utilisateur mobile,  
**Je veux** des filtres horizontaux scrollables,  
**Afin de** filtrer rapidement mes notes.

**Critères d'acceptation :**
- Chips horizontaux scrollables
- Bouton "All" actif
- Boutons pour chaque label
- Scroll smooth

#### Story 15.4 : Implement Vertical Note List
**En tant qu'utilisateur mobile,  
**Je veux** une liste verticale de notes optimisée,  
**Afin de** voir plus de notes sur mon écran.

**Critères d'acceptation :**
- 3 types de cartes (Hero, Compacte, List)
- Cartes sans images en miniature
- Touch targets 44x44px minimum
- Scroll fluide (60fps)

#### Story 15.5 : Implement Bottom Tab Bar
**En tant qu'utilisateur mobile,  
**Je veux** une barre de navigation en bas,  
**Afin de** naviguer avec mon pouce.

**Critères d'acceptation :**
- Barre (72px hauteur)
- 4 onglets : Home, Notebooks, Search, Settings
- Espace vide pour FAB
- Safe-area support

#### Story 15.6 : Implement Floating Action Button
**En tant qu'utilisateur mobile,  
**Je veux** un bouton FAB pour créer des notes,  
**Afin de** capturer rapidement mes idées.

**Critères d'acceptation :**
- FAB (56x56px) en bas à droite
- Animation rotation au survol
- Ombre et scale au survol
- Haptic feedback

#### Story 15.7 : Implement Swipe Gestures
**En tant qu'utilisateur mobile,  
**Je veux** utiliser des gestes pour gérer mes notes,  
**Afin de** organiser rapidement mes notes.

**Critères d'acceptation :**
- Swipe left → supprimer
- Swipe right → archiver
- Indicateurs visuels pendant swipe
- Haptic feedback

#### Story 15.8 : Implement Long Press Context Menu
**En tant qu'utilisateur mobile,  
**Je veux** un menu contextuel sur appui long,  
**Afin de** accéder aux actions rapides.

**Critères d'acceptation :**
- Appui long sur note → menu
- Actions : Éditer, Déplacer, Archiver, Supprimer
- Haptic feedback
- Animation d'apparition

#### Story 15.9 : Implement Pull-to-Refresh
**En tant qu'utilisateur mobile,  
**Je veux** rafraîchir mes notes en tirant vers le bas,  
**Afin de** voir les dernières notes.

**Critères d'acceptation :**
- Pull-to-refresh pour liste notes
- Indicateur de chargement
- Haptic feedback
- Animation fluide

### Epic 16 : Playwright Test Suite

#### Story 16.1 : Test All Modals Opening
**En tant que QA,  
**Je veux** tester l'ouverture des 13 modales,  
**Afin de** m'assurer qu'elles fonctionnent correctement.

**Critères d'acceptation :**
- Tests pour les 13 modales
- Vérification de l'ouverture
- Vérification du contenu
- Vérification de la fermeture

#### Story 16.2 : Test All Modals Closing
**En tant que QA,  
**Je veux** tester la fermeture des modales,  
**Afin de** m'assurer que les utilisateurs peuvent les fermer.

**Critères d'acceptation :**
- Fermeture avec bouton "Annuler"
- Fermeture avec touche ESC
- Fermeture en cliquant en dehors
- Vérification du focus restoration

#### Story 16.3 : Test Modal Form Submission
**En tant que QA,  
**Je veux** tester la soumission des formulaires dans les modales,  
**Afin de** m'assurer que les données sont sauvegardées.

**Critères d'acceptation :**
- Soumission avec données valides
- Validation des données invalides
- Affichage des messages d'erreur
- Confirmation de sauvegarde

#### Story 16.4 : Test Modal Accessibility
**En tant que QA,  
**Je veux** tester l'accessibilité des modales,  
**Afin de** garantir l'accessibilité à tous.

**Critères d'acceptation :**
- Navigation clavier (Tab, Entrée, ESC)
- Focus visible (3:1 contrast)
- Support screen reader (ARIA labels)
- Focus trap dans la modal

#### Story 16.5 : Test Modal Responsive
**En tant que QA,  
**Je veux** tester l'affichage des modales sur mobile, tablette et desktop,  
**Afin de** garantir une expérience cohérente.

**Critères d'acceptation :**
- Affichage correct sur mobile (< 768px)
- Affichage correct sur tablette (768px - 1024px)
- Affichage correct sur desktop (>= 1024px)
- Aucun overflow
- Touch targets 44x44px (mobile)

#### Story 16.6 : Test Workflow Note Creation
**En tant que QA,  
**Je veux** tester le workflow de création de note,  
**Afin de** m'assurer que les utilisateurs peuvent créer des notes.

**Critères d'acceptation :**
- Clic sur bouton "Créer note"
- Ouverture de modal
- Saisie du titre et contenu
- Sauvegarde réussie
- Vérification de la création

#### Story 16.7 : Test Workflow Note Editing
**En tant que QA,  
**Je veux** tester le workflow d'édition de note,  
**Afin de** m'assurer que les utilisateurs peuvent modifier leurs notes.

**Critères d'acceptation :**
- Ouverture d'une note existante
- Modification du contenu
- Sauvegarde réussie
- Vérification de la modification

#### Story 16.8 : Test Workflow Note Deletion
**En tant que QA,  
**Je veux** tester le workflow de suppression de note,  
**Afin de** m'assurer que les utilisateurs peuvent supprimer leurs notes.

**Critères d'acceptation :**
- Sélection d'une note
- Clic sur menu "..."
- Sélection "Supprimer"
- Confirmation de suppression
- Vérification de la suppression

#### Story 16.9 : Test Failure Procedure
**En tant que développeur,  
**Je veux** implémenter la procédure en cas d'échec de test,  
**Afin de** ne jamais abandonner et trouver une solution.

**Critères d'acceptation :**
- NE JAMAIS ABANDONNER le test
- Identification précise du blocage
- Demande d'action utilisateur
- Attente de la réponse
- Réessai du test
- Si échec → analyse et solution

#### Story 16.10 : Test Performance Modals
**En tant que QA,  
**Je veux** tester la performance des modales,  
**Afin de** garantir une expérience fluide.

**Critères d'acceptation :**
- Ouverture < 150ms
- Fermeture < 100ms
- Transition fluide (60fps)
- Pas de lag

### Epic 17 : Innovation Features

#### Story 17.1 : Implement Voice Note Capture
**En tant qu'utilisateur,  
**Je veux** créer des notes vocales,  
**Afin de** capturer rapidement mes idées sans taper.

**Critères d'acceptation :**
- Enregistrement vocal
- Transcription automatique avec IA
- Support multiple langues
- Haptic feedback

#### Story 17.2 : Implement Smart Templates
**En tant qu'utilisateur,  
**Je veux** utiliser des templates intelligents,  
**Afin de** créer des notes structurées rapidement.

**Critères d'acceptation :**
- Templates : Meeting notes, Project brief, Daily standup, Trip planning
- Remplissage automatique avec IA
- Personnalisation des templates
- Création de templates personnalisés

#### Story 17.3 : Implement Smart Sharing
**En tant qu'utilisateur,  
**Je veux** partager intelligemment mes notes,  
**Afin de** collaborer efficacement.

**Critères d'acceptation :**
- Suggestions de destinataires
- Liens temporaires
- Permissions granulaires
- Tracking vues et modifications

#### Story 17.4 : Implement Intelligent Search
**En tant qu'utilisateur,  
**Je veux** rechercher par image et audio,  
**Afin de** trouver mes notes de manière plus naturelle.

**Critères d'acceptation :**
- Recherche par image (reconnaissance visuelle)
- Recherche par audio (reconnaissance vocale)
- Recherche par tags automatiques
- Suggestions de requêtes

#### Story 17.5 : Implement Smart Calendar Integration
**En tant qu'utilisateur,  
**Je veux** intégrer mes notes avec mon calendrier,  
**Afin de** organiser mon temps efficacement.

**Critères d'acceptation :**
- Suggestions de rappels automatiques
- Intégration Google Calendar, Outlook, Apple Calendar
- Affichage des notes dans le calendrier
- Création d'événements depuis notes

#### Story 17.6 : Implement Analytics Dashboard (User)
**En tant qu'utilisateur,  
**Je veux** voir mon activité sur un dashboard,  
**Afin de** comprendre mes habitudes d'utilisation.

**Critères d'acceptation :**
- Notes créées par jour/semaine/mois
- Labels les plus utilisés
- Productivité vs objectifs
- Graphiques visuels

#### Story 17.7 : Implement Smart Folders
**En tant qu'utilisateur,  
**Je veux** des dossiers intelligents qui s'organisent automatiquement,  
**Afin de** gagner du temps dans l'organisation.

**Critères d'acceptation :**
- Dossiers intelligents auto-organisés
- Suggestions IA pour classement
- Organisation manuelle
- Drag & drop

#### Story 17.8 : Implement Collaborative Editing
**En tant qu'utilisateur,  
**Je veux** éditer des notes en temps réel avec d'autres,  
**Afin de** collaborer efficacement.

**Critères d'acceptation :**
- Édition en temps réel multi-utilisateurs
- Curseurs des autres utilisateurs
- Historique de version
- Commentaires inline

#### Story 17.9 : Implement Smart Attachments
**En tant qu'utilisateur,  
**Je veux** gérer intelligemment les fichiers joints,  
**Afin de** enrichir mes notes.

**Critères d'acceptation :**
- Détection automatique des fichiers
- Aperçus intelligents
- Annotation de fichiers
- Liens fichiers-notes

#### Story 17.10 : Implement AI-powered Summarization
**En tant qu'utilisateur,  
**Je veux** des résumés automatiques de mes notes,  
**Afin de** gagner du temps dans la lecture.

**Critères d'acceptation :**
- Résumés de notes longues
- Résumés de notebooks
- Résumés de réunions
- Résumés personnalisés

---

## Prioritization

### MoSCoW Method

| Epic | Must Have | Should Have | Could Have | Won't Have | Total Score |
|------|------------|---------------|------------|-------------|-------------|
| Epic 10 : Design System | ✅ | | | | **High** |
| Epic 13 : Desktop Design Refactor | ✅ | | | | **High** |
| Epic 16 : Playwright Test Suite | ✅ | | | | **High** |
| Epic 15 : Mobile UX Overhaul | | ✅ | | | **Medium** |
| Epic 14 : Admin & Profil Redesign | | ✅ | | | **Medium** |
| Epic 1-8 : AI Features | | ✅ | | | **Medium** |
| Epic 9 : Simplify NoteCard | | | ✅ | | **Low** |
| Epic 11 : Settings Redesign | | | ✅ | | **Low** |
| Epic 12 : Mobile Optimization | | | ✅ | | **Low** |
| Epic 17 : Innovation Features | | | | ✅ | **Low** |

### Timeline Estimation

| Quarter | Focus | Key Deliverables |
|---------|-------|-----------------|
| **Q1 2026** | Foundation | Design System, Desktop Refactor, Playwright Tests |
| **Q2 2026** | Mobile | Mobile UX Overhaul, Admin/Profil Redesign |
| **Q3 2026** | AI & Tests | AI Features (Epic 1-8), Test Coverage 100% |
| **Q4 2026** | Innovation | Innovation Features (Epic 17), Polish |

---

## Conclusion

Ce PRD v2.0 définit une vision claire pour la refonte complète de Keep, avec un focus sur :

1. **Design System Unifié** : Cohérence visuelle à travers toute l'application
2. **Mobile-First UX** : Expérience native-like sur mobile
3. **Tests Complets** : 100% couverture Playwright, procédure échec stricte
4. **Innovation Continue** : 10 nouvelles fonctionnalités innovantes
5. **Accessibilité Totale** : WCAG 2.1 Level AA compliance

**Prochaines étapes :**
1. Validation du PRD par Ramez
2. Création des wireframes Figma/Sketch
3. Commencement de l'implémentation (Phase 1 : Foundation)

---

**Document Status :** DRAFT  
**Date de création :** 2026-01-17  
**Version :** 2.0  
**Product Manager :** John