sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Keep/_bmad-output/planning-artifacts/PRD-KEEP-REDESIGN.md
sepehr ddb67ba9e5 fix: unify theme system - fix theme switching persistence 
- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes
2026-01-18 22:33:41 +01:00

36 KiB
Raw Permalink Blame History

📄 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
  2. Product Vision
  3. Problem Statement
  4. Target Audience
  5. Success Criteria
  6. Functional Requirements
  7. Non-Functional Requirements
  8. Technical Constraints
  9. Epics Breakdown
  10. User Stories
  11. Prioritization
  12. 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)

  1. Epic 13 : Desktop Design Refactor (~15 stories)
  2. Epic 14 : Admin & Profil Redesign (~12 stories)
  3. Epic 15 : Mobile UX Overhaul (~10 stories)
  4. Epic 16 : Playwright Test Suite (~20 stories)
  5. 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