sepehr
ddb67ba9e5
- 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
470 lines
17 KiB
Markdown
470 lines
17 KiB
Markdown
# Sprint #2: Simplification de l'Interface NoteCard
|
|
|
|
## Métadonnées
|
|
|
|
| Propriété | Valeur |
|
|
|------------|---------|
|
|
| **Nom du Sprint** | Simplification de l'Interface NoteCard |
|
|
| **ID du Sprint** | sprint-2-simplify-notecard-interface |
|
|
| **Epic** | Epic 9: Simplify NoteCard Interface |
|
|
| **Date de début** | 2026-01-17 |
|
|
| **Durée prévue** | 1 semaine (5 jours ouvrés) |
|
|
| **Statut** | 🟡 Prêt à démarrer |
|
|
| **Priorité** | 🟡 Medium (UX improvement) |
|
|
| **Capacité** | 5 stories |
|
|
| **Lead** | Frontend Engineer + UX Designer |
|
|
|
|
---
|
|
|
|
## 🎯 Goal (Objectif du Sprint)
|
|
|
|
**Objectif principal:** Simplifier l'interface du NoteCard en remplaçant les 5 boutons visibles par un seul menu d'actions, tout en préservant TOUT le contenu existant (avatar, images, liens HTML, labels, dates).
|
|
|
|
**Métriques de succès:**
|
|
- ✅ Interface moins encombrée (5 boutons → 1 menu)
|
|
- ✅ Toutes les actions restent accessibles
|
|
- ✅ Avatar reste en bas à gauche (position inchangée)
|
|
- ✅ Images restent visibles et cliquables
|
|
- ✅ Liens HTML restent avec prévisualisation complète
|
|
- ✅ Labels et dates restent visibles
|
|
- ✅ Aucune régression fonctionnelle
|
|
- ✅ Amélioration de l'expérience utilisateur
|
|
|
|
---
|
|
|
|
## 📋 Backlog (Stories du Sprint)
|
|
|
|
### 🟡 MEDIUM (Toutes les stories sont de priorité Medium)
|
|
|
|
#### Story 9.1: Create NoteActionMenu Component
|
|
**Priorité:** Medium
|
|
**Estimation:** 2 heures
|
|
**Complexité:** Faible
|
|
|
|
**En tant que:** Développeur Frontend
|
|
**Je veux:** Créer un composant réutilisable `NoteActionMenu` qui regroupe toutes les actions de note dans un menu dropdown.
|
|
**Afin de:** Centraliser toutes les actions dans une interface unique et cohérente.
|
|
|
|
**Critères d'acceptation:**
|
|
- ✅ Composant créé dans `keep-notes/components/note-action-menu.tsx`
|
|
- ✅ Utilise DropdownMenu de Radix UI
|
|
- ✅ Affiche un bouton "..." (MoreHorizontal icon)
|
|
- ✅ Menu contient toutes les actions : Pin, Move to notebook, Reminder, Connections, Color, Share, Archive, Delete
|
|
- ✅ Chaque action a une icône appropriée
|
|
- ✅ Menu aligné à droite (end)
|
|
- ✅ Supporte la navigation clavier
|
|
- ✅ Fonctionne en light et dark theme
|
|
- ✅ Bouton visible au hover sur desktop, toujours visible sur mobile
|
|
|
|
**Contexte technique:**
|
|
- **Nouveau fichier:** `keep-notes/components/note-action-menu.tsx`
|
|
- **Icônes:** Pin, FolderOpen, Bell, Link2, Palette, Share2, Archive, Trash2 (lucide-react)
|
|
- **Menu width:** `w-56` (224px)
|
|
- **Position:** `absolute top-2 right-2 z-20`
|
|
- **Hover:** `opacity-0 group-hover:opacity-100` (desktop), `opacity-100` (mobile)
|
|
|
|
**Tests:**
|
|
- ✅ Test manuel: Ouvrir le menu, vérifier toutes les actions
|
|
- ✅ Test clavier: Navigation avec Tab, Arrow keys, Enter, Escape
|
|
- ✅ Test mobile: Menu toujours visible, touch targets 44x44px
|
|
- ✅ Test thèmes: Light et dark mode
|
|
|
|
**Dépendances:** Aucune (story fondatrice)
|
|
|
|
---
|
|
|
|
#### Story 9.2: Replace Multiple Buttons with Action Menu in NoteCard
|
|
**Priorité:** Medium
|
|
**Estimation:** 3 heures
|
|
**Complexité:** Moyenne
|
|
|
|
**En tant que:** Utilisateur
|
|
**Je veux:** Voir une interface NoteCard plus claire avec moins de boutons visibles.
|
|
**Afin de:** Avoir une interface moins encombrée et plus facile à scanner.
|
|
|
|
**Critères d'acceptation:**
|
|
- ✅ Les 5 boutons en haut sont remplacés par 1 seul menu "..."
|
|
- ✅ Le drag handle reste visible sur mobile (top-left, `md:hidden`)
|
|
- ✅ L'icône de rappel reste visible si un rappel est actif
|
|
- ✅ TOUT le contenu reste inchangé :
|
|
- Avatar en bas à gauche (`bottom-2 left-2`) - **AUCUN CHANGEMENT**
|
|
- Images pleine largeur, visibles et cliquables - **AUCUN CHANGEMENT**
|
|
- Liens HTML avec prévisualisation complète - **AUCUN CHANGEMENT**
|
|
- Labels visibles sous le contenu - **AUCUN CHANGEMENT**
|
|
- Date visible en bas à droite - **AUCUN CHANGEMENT**
|
|
- Badges Memory Echo visibles en haut - **AUCUN CHANGEMENT**
|
|
- ✅ Le menu apparaît au hover sur desktop (transition d'opacité)
|
|
- ✅ Le menu est toujours visible sur mobile
|
|
- ✅ Toutes les actions fonctionnent correctement depuis le menu
|
|
|
|
**Contexte technique:**
|
|
- **Fichier modifié:** `keep-notes/components/note-card.tsx`
|
|
- **Lignes à supprimer:** ~289-333 (boutons individuels)
|
|
- **Lignes à ajouter:** Import et utilisation de `<NoteActionMenu />`
|
|
- **Drag handle:** Conserver `md:hidden` (visible uniquement sur mobile)
|
|
- **Reminder icon:** Conserver la logique existante (visible si `note.reminder` est dans le futur)
|
|
|
|
**Tests:**
|
|
- ✅ Test visuel: Vérifier qu'il n'y a plus que 1 bouton au lieu de 5
|
|
- ✅ Test fonctionnel: Toutes les actions fonctionnent depuis le menu
|
|
- ✅ Test contenu: Vérifier que avatar, images, liens, labels, dates sont tous visibles
|
|
- ✅ Test desktop: Menu apparaît au hover
|
|
- ✅ Test mobile: Menu toujours visible
|
|
- ✅ Test régression: Aucune fonctionnalité cassée
|
|
|
|
**Dépendances:** Story 9.1 (doit être complétée avant)
|
|
|
|
---
|
|
|
|
#### Story 9.3: Ensure Content Preservation After Simplification
|
|
**Priorité:** Medium
|
|
**Estimation:** 2 heures
|
|
**Complexité:** Faible
|
|
|
|
**En tant que:** Utilisateur
|
|
**Je veux:** Que tout le contenu de mes notes reste visible et fonctionnel après la simplification.
|
|
**Afin de:** Ne perdre aucune information ou fonctionnalité.
|
|
|
|
**Critères d'acceptation:**
|
|
- ✅ Avatar reste en bas à gauche (`bottom-2 left-2`)
|
|
- ✅ Avatar reste 24x24px (w-6 h-6)
|
|
- ✅ Avatar affiche les initiales du propriétaire
|
|
- ✅ Images restent pleine largeur et cliquables
|
|
- ✅ Liens HTML restent avec prévisualisation complète (image, titre, description, hostname)
|
|
- ✅ Liens HTML restent cliquables
|
|
- ✅ Labels restent visibles sous le contenu
|
|
- ✅ Labels conservent leur codage couleur
|
|
- ✅ Date reste visible en bas à droite
|
|
- ✅ Badges Memory Echo restent visibles en haut
|
|
- ✅ Tout le contenu conserve son style et comportement actuel
|
|
|
|
**Contexte technique:**
|
|
- **Aucun changement** dans la logique de rendu du contenu
|
|
- **Seuls changements** dans l'interface des boutons/actions
|
|
- **Vérifier** que tous les composants de contenu restent inchangés :
|
|
- `NoteImages` component
|
|
- Link preview rendering (lignes 436-461)
|
|
- `LabelBadge` components
|
|
- Date formatting
|
|
- Avatar rendering (lignes 492-504)
|
|
|
|
**Tests:**
|
|
- ✅ Test avec notes contenant des images
|
|
- ✅ Test avec notes contenant des liens HTML
|
|
- ✅ Test avec notes contenant plusieurs labels
|
|
- ✅ Test avec notes avec rappels actifs
|
|
- ✅ Test avec notes avec badges Memory Echo
|
|
- ✅ Vérifier position avatar sur toutes les tailles d'écran
|
|
- ✅ Vérifier que tout le contenu est cliquable et fonctionnel
|
|
|
|
**Dépendances:** Story 9.2 (doit être complétée avant)
|
|
|
|
---
|
|
|
|
#### Story 9.4: Mobile Optimization for Action Menu
|
|
**Priorité:** Medium
|
|
**Estimation:** 2 heures
|
|
**Complexité:** Faible
|
|
|
|
**En tant que:** Utilisateur mobile
|
|
**Je veux:** Accéder facilement aux actions de note sur mon appareil mobile.
|
|
**Afin de:** Gérer mes notes efficacement avec des interactions tactiles.
|
|
|
|
**Critères d'acceptation:**
|
|
- ✅ Le bouton menu est toujours visible sur mobile (pas caché au hover)
|
|
- ✅ Le bouton menu a une taille minimale de 44x44px (touch target)
|
|
- ✅ Chaque item du menu a une taille minimale de 44x44px
|
|
- ✅ Le menu est facile à naviguer avec le toucher
|
|
- ✅ Le menu se ferme quand on tape en dehors
|
|
- ✅ Le menu se ferme après sélection d'une action
|
|
- ✅ Toutes les actions fonctionnent correctement sur mobile
|
|
|
|
**Contexte technique:**
|
|
- **Menu button:** `opacity-100` sur mobile (toujours visible)
|
|
- **Menu button:** `min-h-[44px] min-w-[44px]` pour touch target
|
|
- **Menu items:** `min-h-[44px]` pour touch targets
|
|
- **Breakpoint:** `< 768px` pour mobile
|
|
|
|
**Tests:**
|
|
- ✅ Test sur Galaxy S22 Ultra
|
|
- ✅ Test sur iPhone SE
|
|
- ✅ Test sur différents appareils Android
|
|
- ✅ Test en portrait et paysage
|
|
- ✅ Vérifier que tous les touch targets sont ≥ 44x44px
|
|
- ✅ Vérifier que le menu est facile à utiliser avec une seule main
|
|
|
|
**Dépendances:** Story 9.2 (peut être fait en parallèle avec 9.3)
|
|
|
|
---
|
|
|
|
#### Story 9.5: Keyboard Navigation for Action Menu
|
|
**Priorité:** Medium
|
|
**Estimation:** 1.5 heures
|
|
**Complexité:** Faible
|
|
|
|
**En tant que:** Utilisateur clavier
|
|
**Je veux:** Naviguer et utiliser le menu d'actions uniquement avec le clavier.
|
|
**Afin de:** Accéder à toutes les actions sans utiliser la souris.
|
|
|
|
**Critères d'acceptation:**
|
|
- ✅ Je peux Tab jusqu'au bouton menu
|
|
- ✅ Le bouton menu a un indicateur de focus visible
|
|
- ✅ Je peux ouvrir le menu avec Enter ou Space
|
|
- ✅ Je peux naviguer les items du menu avec les flèches
|
|
- ✅ Je peux sélectionner une action avec Enter
|
|
- ✅ Je peux fermer le menu avec Escape
|
|
- ✅ Le focus revient au bouton menu après fermeture
|
|
- ✅ Toutes les actions sont accessibles via clavier
|
|
|
|
**Contexte technique:**
|
|
- **Radix UI DropdownMenu** a un support clavier natif
|
|
- **Focus indicators:** Visibles (WCAG 2.1 AA)
|
|
- **Test screen reader:** NVDA, VoiceOver
|
|
|
|
**Tests:**
|
|
- ✅ Test clavier: Tab, Enter, Space, Arrow keys, Escape
|
|
- ✅ Test screen reader: NVDA (Windows), VoiceOver (Mac)
|
|
- ✅ Test focus indicators: Visibles et contrastés
|
|
- ✅ Test accessibilité: WCAG 2.1 AA compliant
|
|
|
|
**Dépendances:** Story 9.2 (peut être fait en parallèle avec 9.3 et 9.4)
|
|
|
|
---
|
|
|
|
## 🗂 Dépendances Entre Stories
|
|
|
|
### Ordre Suggéré
|
|
|
|
1. **Story 9.1** (Create NoteActionMenu Component) - **DOIT ÊTRE PREMIÈRE**
|
|
- Raison: Composant fondateur requis par toutes les autres stories
|
|
- Blocking: Story 9.2
|
|
- Si échoue, toutes les autres stories échouent aussi
|
|
|
|
2. **Story 9.2** (Replace Multiple Buttons with Action Menu)
|
|
- Dépendance: Story 9.1
|
|
- Blocking: Stories 9.3, 9.4, 9.5
|
|
- Intègre le menu dans le NoteCard
|
|
|
|
3. **Stories 9.3, 9.4, 9.5** (Content Preservation, Mobile, Keyboard)
|
|
- Dépendance: Story 9.2
|
|
- **Peuvent être faites en parallèle** après Story 9.2
|
|
- Validation et optimisation
|
|
|
|
### Graph de Dépendances Visuel
|
|
|
|
```
|
|
Story 9.1 (Create NoteActionMenu)
|
|
└─> Story 9.2 (Replace Buttons with Menu)
|
|
├─> Story 9.3 (Content Preservation)
|
|
├─> Story 9.4 (Mobile Optimization)
|
|
└─> Story 9.5 (Keyboard Navigation)
|
|
```
|
|
|
|
---
|
|
|
|
## 🎬 Acceptation Criteria (Critères d'Acceptation Globaux)
|
|
|
|
### Pour Toutes les Stories
|
|
|
|
- ✅ **Fonctionnalité:** L'interface est simplifiée et toutes les actions fonctionnent
|
|
- ✅ **Contenu préservé:** Avatar, images, liens HTML, labels, dates restent visibles
|
|
- ✅ **Tests:** Tests manuels et automatisés passent
|
|
- ✅ **UX:** L'expérience utilisateur est améliorée (interface moins encombrée)
|
|
- ✅ **Code:** Le code est propre, bien documenté et suit les conventions
|
|
- ✅ **Régression:** Aucune régression détectée dans d'autres fonctionnalités
|
|
- ✅ **Accessibilité:** Navigation clavier et screen reader fonctionnent
|
|
|
|
### Critères Spécifiques
|
|
|
|
#### Stories de Simplification UI
|
|
- ✅ Interface moins encombrée (5 boutons → 1 menu)
|
|
- ✅ Toutes les actions restent accessibles
|
|
- ✅ Le contenu n'est pas affecté
|
|
|
|
#### Stories de Validation
|
|
- ✅ Avatar position confirmée (bas à gauche)
|
|
- ✅ Images confirmées (visibles et cliquables)
|
|
- ✅ Liens HTML confirmés (prévisualisation complète)
|
|
- ✅ Labels confirmés (visibles)
|
|
- ✅ Dates confirmées (visibles)
|
|
|
|
---
|
|
|
|
## 🚨 Risques et Blockers
|
|
|
|
### Risques Identifiés
|
|
|
|
1. **Risque de Régression**
|
|
- **Description:** La simplification peut casser des fonctionnalités existantes
|
|
- **Probabilité:** Faible
|
|
- **Impact:** Élevé - pourrait affecter l'expérience utilisateur
|
|
- **Mitigation:** Tests approfondis, Story 9.3 dédiée à la validation
|
|
|
|
2. **Risque de Contenu Masqué**
|
|
- **Description:** Par erreur, du contenu pourrait être masqué
|
|
- **Probabilité:** Faible
|
|
- **Impact:** Élevé - perte d'information pour l'utilisateur
|
|
- **Mitigation:** Story 9.3 dédiée à la validation du contenu, checklist exhaustive
|
|
|
|
3. **Risque de Position Avatar**
|
|
- **Description:** L'avatar pourrait être déplacé par erreur
|
|
- **Probabilité:** Très faible
|
|
- **Impact:** Moyen - confusion utilisateur
|
|
- **Mitigation:** Story 9.3 vérifie explicitement la position (`bottom-2 left-2`)
|
|
|
|
4. **Risque de Mobile UX**
|
|
- **Description:** Le menu pourrait être difficile à utiliser sur mobile
|
|
- **Probabilité:** Faible
|
|
- **Impact:** Moyen - mauvaise expérience mobile
|
|
- **Mitigation:** Story 9.4 dédiée à l'optimisation mobile, touch targets 44x44px
|
|
|
|
### Blockers Actuels
|
|
|
|
- Aucun blocker identifié
|
|
- Tous les fichiers sont accessibles et modifiables
|
|
- L'environnement de développement est opérationnel
|
|
- Les composants Radix UI sont disponibles
|
|
|
|
---
|
|
|
|
## 📅 Timeline Estimée
|
|
|
|
### Par Story
|
|
|
|
| Story | Estimation | Notes |
|
|
|-------|-----------|-------|
|
|
| Story 9.1: Create NoteActionMenu | 2 heures | Fondateur - faire en priorité |
|
|
| Story 9.2: Replace Buttons with Menu | 3 heures | Intégration principale |
|
|
| Story 9.3: Content Preservation | 2 heures | Validation - peut être fait en parallèle |
|
|
| Story 9.4: Mobile Optimization | 2 heures | Optimisation - peut être fait en parallèle |
|
|
| Story 9.5: Keyboard Navigation | 1.5 heures | Accessibilité - peut être fait en parallèle |
|
|
|
|
**Total estimé:** 10.5 heures (1 semaine à 50% de capacité)
|
|
|
|
### Timeline Suggérée
|
|
|
|
**Jour 1-2:**
|
|
- Story 9.1 (Create NoteActionMenu Component) - 2h
|
|
- Story 9.2 (Replace Buttons with Menu) - 3h
|
|
|
|
**Jour 3-4:**
|
|
- Story 9.3 (Content Preservation) - 2h
|
|
- Story 9.4 (Mobile Optimization) - 2h
|
|
- Story 9.5 (Keyboard Navigation) - 1.5h
|
|
|
|
**Jour 5:**
|
|
- Tests finaux et validation
|
|
- Code review
|
|
- Documentation
|
|
|
|
---
|
|
|
|
## 🎯 Objectifs de Démo (Pour Sprint Review)
|
|
|
|
Si vous voulez présenter le travail à la fin du Sprint:
|
|
|
|
1. **Comparaison Visuelle:**
|
|
- Screenshot avant (5 boutons visibles)
|
|
- Screenshot après (1 menu "...")
|
|
- Montrer que le contenu est identique
|
|
|
|
2. **Démonstration Fonctionnelle:**
|
|
- Ouvrir le menu, montrer toutes les actions
|
|
- Tester sur desktop (hover)
|
|
- Tester sur mobile (tap)
|
|
- Tester avec clavier (navigation)
|
|
|
|
3. **Validation Contenu:**
|
|
- Montrer avatar en bas à gauche
|
|
- Montrer images visibles et cliquables
|
|
- Montrer liens HTML avec prévisualisation
|
|
- Montrer labels et dates visibles
|
|
|
|
4. **Métriques de Succès:**
|
|
- Nombre de boutons réduit: 5 → 1
|
|
- Contenu préservé: 100%
|
|
- Actions accessibles: 100%
|
|
- Tests passés: 100%
|
|
|
|
---
|
|
|
|
## 📝 Notes pour l'Équipe
|
|
|
|
### Bonnes Pratiques
|
|
|
|
1. **Respecter le contenu existant**
|
|
- Ne PAS modifier la position de l'avatar (bas à gauche)
|
|
- Ne PAS masquer les images, liens HTML, labels, dates
|
|
- Seulement modifier l'interface des boutons
|
|
|
|
2. **Tester exhaustivement**
|
|
- Tester avec notes contenant images
|
|
- Tester avec notes contenant liens HTML
|
|
- Tester avec notes contenant labels
|
|
- Tester sur desktop et mobile
|
|
- Tester avec clavier et screen reader
|
|
|
|
3. **Documenter les changements**
|
|
- Commenter pourquoi on remplace les boutons
|
|
- Documenter que le contenu reste inchangé
|
|
- Mettre à jour le changelog
|
|
|
|
### Outils et Ressources
|
|
|
|
- **Documentation:** Voir `_bmad-output/design-proposals/design-simplification-proposal.md`
|
|
- **Epic:** Voir `_bmad-output/planning-artifacts/epics.md` (Epic 9)
|
|
- **Composants UI:** Radix UI DropdownMenu (`@/components/ui/dropdown-menu`)
|
|
|
|
### Communication
|
|
|
|
- Signaler immédiatement si du contenu est accidentellement masqué
|
|
- Vérifier la position de l'avatar à chaque étape
|
|
- Valider que les images et liens HTML restent visibles
|
|
|
|
---
|
|
|
|
## 🎉 Critères de Succès du Sprint
|
|
|
|
Le Sprint sera considéré comme **succès** si:
|
|
|
|
### Must-Have (Doit être complété)
|
|
- ✅ Toutes les 5 stories sont complétées
|
|
- ✅ Story 9.1 (NoteActionMenu) est fonctionnelle
|
|
- ✅ Story 9.2 (Replace Buttons) est intégrée
|
|
- ✅ Avatar reste en bas à gauche (position confirmée)
|
|
- ✅ Images restent visibles et cliquables
|
|
- ✅ Liens HTML restent avec prévisualisation complète
|
|
- ✅ Labels et dates restent visibles
|
|
- ✅ Aucune régression fonctionnelle
|
|
|
|
### Nice-to-Have (Souhaitable)
|
|
- ✅ Interface perçue comme moins encombrée (feedback utilisateur)
|
|
- ✅ Toutes les actions sont facilement accessibles
|
|
- ✅ Amélioration de l'expérience utilisateur mesurable
|
|
- ✅ Code propre et maintenable
|
|
- ✅ Documentation à jour
|
|
|
|
### UX Targets
|
|
- ✅ Interface moins encombrée (5 boutons → 1 menu)
|
|
- ✅ Toutes les actions accessibles en ≤ 2 clics/taps
|
|
- ✅ Menu facile à utiliser sur desktop et mobile
|
|
- ✅ Navigation clavier complète et fluide
|
|
|
|
---
|
|
|
|
## 🔄 Status Actuel
|
|
|
|
🟡 **En préparation** - Sprint créé, prêt à commencer
|
|
|
|
**Prochaine étape:**
|
|
1. Révision du Sprint avec l'équipe ou les parties prenantes
|
|
2. Affectation des stories aux développeurs
|
|
3. Création des branches git si nécessaire
|
|
4. Commencement avec Story 9.1 (Create NoteActionMenu)
|
|
|
|
**Estimation de début:** Immédiatement après validation
|
|
|
|
---
|
|
|
|
*Créé le 2026-01-17 pour simplifier l'interface NoteCard tout en préservant tout le contenu existant.*
|