sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Keep/_bmad-output/planning-artifacts/sprint-2-simplify-notecard-interface.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

17 KiB
Raw Blame History

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.