WIP: Améliorations UX et corrections de bugs avant création des épiques
This commit is contained in:
309
_bmad-output/design-proposals/design-simplification-proposal.md
Normal file
309
_bmad-output/design-proposals/design-simplification-proposal.md
Normal file
@@ -0,0 +1,309 @@
|
||||
# Proposition de Simplification du Design - Keep App
|
||||
|
||||
**Date:** 2026-01-17
|
||||
**Auteur:** Sally (UX Designer)
|
||||
**Status:** Proposition finale
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Objectif
|
||||
|
||||
Simplifier l'interface du NoteCard en réduisant le nombre de boutons visibles, tout en **PRÉSERVANT** tout le contenu existant.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Ce qui NE CHANGE PAS
|
||||
|
||||
### 1. Avatar
|
||||
- **Position:** Bas à gauche (`bottom-2 left-2`) - **AUCUN CHANGEMENT**
|
||||
- **Taille:** 24x24px (w-6 h-6) - **AUCUN CHANGEMENT**
|
||||
- **Style:** Cercle avec initiales - **AUCUN CHANGEMENT**
|
||||
|
||||
### 2. Images
|
||||
- **Affichage:** Pleine largeur dans la note - **AUCUN CHANGEMENT**
|
||||
- **Visibilité:** Toujours visible - **AUCUN CHANGEMENT**
|
||||
- **Fonctionnalité:** Cliquable pour agrandir - **AUCUN CHANGEMENT**
|
||||
|
||||
### 3. Liens HTML
|
||||
- **Prévisualisation:** Complète avec image, titre, description, hostname - **AUCUN CHANGEMENT**
|
||||
- **Position:** Dans le contenu de la note - **AUCUN CHANGEMENT**
|
||||
- **Style:** Bordure, fond, hover - **AUCUN CHANGEMENT**
|
||||
|
||||
### 4. Labels
|
||||
- **Affichage:** Badges colorés - **AUCUN CHANGEMENT**
|
||||
- **Position:** Sous le contenu - **AUCUN CHANGEMENT**
|
||||
|
||||
### 5. Date
|
||||
- **Affichage:** "il y a X jours" - **AUCUN CHANGEMENT**
|
||||
- **Position:** Bas à droite - **AUCUN CHANGEMENT**
|
||||
|
||||
### 6. Badges Memory Echo
|
||||
- **Affichage:** En haut de la note - **AUCUN CHANGEMENT**
|
||||
- **Style:** Badges violets - **AUCUN CHANGEMENT**
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Ce qui CHANGE
|
||||
|
||||
### Problème Actuel
|
||||
|
||||
Le NoteCard affiche **5 boutons en haut** :
|
||||
1. Drag handle (déplacer)
|
||||
2. Move to notebook (déplacer vers un notebook)
|
||||
3. Pin (épingler)
|
||||
4. Reminder (rappel)
|
||||
5. Connections (connexions)
|
||||
|
||||
**Problème:** Ces 5 boutons encombrent l'interface et prennent de la place.
|
||||
|
||||
### Solution Proposée
|
||||
|
||||
**Remplacer les 5 boutons par 1 seul menu "..."** qui contient toutes les actions.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Détails de l'Implémentation
|
||||
|
||||
### Nouveau Composant : `NoteActionMenu`
|
||||
|
||||
```tsx
|
||||
// keep-notes/components/note-action-menu.tsx
|
||||
'use client'
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import { MoreHorizontal, Pin, FolderOpen, Bell, Link2, Archive, Trash2, Share2, Palette } from 'lucide-react'
|
||||
import { Note } from '@/lib/types'
|
||||
|
||||
interface NoteActionMenuProps {
|
||||
note: Note
|
||||
onTogglePin: () => void
|
||||
onMoveToNotebook: (notebookId: string | null) => void
|
||||
onSetReminder: () => void
|
||||
onShowConnections: () => void
|
||||
onArchive: () => void
|
||||
onDelete: () => void
|
||||
onShare: () => void
|
||||
onColorChange: (color: string) => void
|
||||
}
|
||||
|
||||
export function NoteActionMenu({
|
||||
note,
|
||||
onTogglePin,
|
||||
onMoveToNotebook,
|
||||
onSetReminder,
|
||||
onShowConnections,
|
||||
onArchive,
|
||||
onDelete,
|
||||
onShare,
|
||||
onColorChange,
|
||||
}: NoteActionMenuProps) {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="absolute top-2 right-2 z-20 p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
title="Actions"
|
||||
>
|
||||
<MoreHorizontal className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56">
|
||||
{/* Pin / Unpin */}
|
||||
<DropdownMenuItem onClick={onTogglePin}>
|
||||
<Pin className={cn("h-4 w-4 mr-2", note.isPinned && "fill-current")} />
|
||||
{note.isPinned ? 'Désépingler' : 'Épingler'}
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Move to notebook */}
|
||||
<DropdownMenuItem onClick={() => onMoveToNotebook(null)}>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
Déplacer vers...
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Reminder */}
|
||||
<DropdownMenuItem onClick={onSetReminder}>
|
||||
<Bell className="h-4 w-4 mr-2" />
|
||||
Rappel
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Connections */}
|
||||
<DropdownMenuItem onClick={onShowConnections}>
|
||||
<Link2 className="h-4 w-4 mr-2" />
|
||||
Connexions
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="my-1 border-t border-gray-200 dark:border-gray-700" />
|
||||
|
||||
{/* Color */}
|
||||
<DropdownMenuItem onClick={() => onColorChange('blue')}>
|
||||
<Palette className="h-4 w-4 mr-2" />
|
||||
Colorer
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Share */}
|
||||
<DropdownMenuItem onClick={onShare}>
|
||||
<Share2 className="h-4 w-4 mr-2" />
|
||||
Partager
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Archive */}
|
||||
<DropdownMenuItem onClick={onArchive}>
|
||||
<Archive className="h-4 w-4 mr-2" />
|
||||
Archiver
|
||||
</DropdownMenuItem>
|
||||
|
||||
{/* Delete */}
|
||||
<DropdownMenuItem onClick={onDelete} className="text-destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Supprimer
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Modification du NoteCard
|
||||
|
||||
**Avant (lignes 289-333):**
|
||||
```tsx
|
||||
{/* Drag Handle - Only visible on mobile/touch devices */}
|
||||
<div className="muuri-drag-handle absolute top-2 left-2 z-20 cursor-grab active:cursor-grabbing p-2 md:hidden">
|
||||
<GripVertical className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
{/* Move to Notebook Dropdown Menu */}
|
||||
<div onClick={(e) => e.stopPropagation()} className="absolute top-2 right-2 z-20">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 bg-blue-100...">
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
...
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Pin Button */}
|
||||
<Button variant="ghost" size="sm" className="absolute top-2 right-12 z-20...">
|
||||
<Pin className={...} />
|
||||
</Button>
|
||||
|
||||
{/* Reminder Icon */}
|
||||
{note.reminder && ... && (
|
||||
<Bell className="absolute top-3 right-10 h-4 w-4 text-primary" />
|
||||
)}
|
||||
```
|
||||
|
||||
**Après:**
|
||||
```tsx
|
||||
{/* Drag Handle - Only visible on mobile/touch devices */}
|
||||
<div className="muuri-drag-handle absolute top-2 left-2 z-20 cursor-grab active:cursor-grabbing p-2 md:hidden">
|
||||
<GripVertical className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
|
||||
{/* Action Menu - Remplace les 5 boutons */}
|
||||
<NoteActionMenu
|
||||
note={note}
|
||||
onTogglePin={handleTogglePin}
|
||||
onMoveToNotebook={handleMoveToNotebook}
|
||||
onSetReminder={() => {/* TODO */}}
|
||||
onShowConnections={() => setShowConnectionsOverlay(true)}
|
||||
onArchive={handleToggleArchive}
|
||||
onDelete={handleDelete}
|
||||
onShare={() => setShowCollaboratorDialog(true)}
|
||||
onColorChange={handleColorChange}
|
||||
/>
|
||||
|
||||
{/* Reminder Icon - Visible si rappel actif */}
|
||||
{note.reminder && new Date(note.reminder) > new Date() && (
|
||||
<Bell className="absolute top-3 right-10 h-4 w-4 text-primary" />
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparaison Visuelle
|
||||
|
||||
### Avant
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [🖱️] [📁] [📌] [🔔] [🔗] │ ← 5 boutons
|
||||
│ │
|
||||
│ [Badge Memory Echo] │
|
||||
│ │
|
||||
│ Title │
|
||||
│ │
|
||||
│ [Image] │
|
||||
│ │
|
||||
│ Content... │
|
||||
│ │
|
||||
│ [Link Preview HTML] │
|
||||
│ │
|
||||
│ [Labels] │
|
||||
│ │
|
||||
│ [👤] Avatar Date │ ← Avatar bas gauche
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Après
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [🖱️] [...] │ ← Drag + Menu
|
||||
│ │
|
||||
│ [Badge Memory Echo] │
|
||||
│ │
|
||||
│ Title │
|
||||
│ │
|
||||
│ [Image] │
|
||||
│ │
|
||||
│ Content... │
|
||||
│ │
|
||||
│ [Link Preview HTML] │
|
||||
│ │
|
||||
│ [Labels] │
|
||||
│ │
|
||||
│ [👤] Avatar Date │ ← Avatar bas gauche (identique)
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Avantages
|
||||
|
||||
1. **Interface plus claire** : Moins de boutons visibles = moins d'encombrement
|
||||
2. **Contenu préservé** : TOUT reste identique (avatar, images, liens, labels)
|
||||
3. **Actions accessibles** : Menu contextuel au hover (desktop) ou tap (mobile)
|
||||
4. **Cohérence** : Style similaire à Google Keep (menu "..." au lieu de multiples boutons)
|
||||
|
||||
---
|
||||
|
||||
## 📋 Checklist d'Implémentation
|
||||
|
||||
- [ ] Créer le composant `NoteActionMenu.tsx`
|
||||
- [ ] Modifier `note-card.tsx` pour remplacer les 5 boutons par le menu
|
||||
- [ ] Tester sur desktop (hover pour afficher le menu)
|
||||
- [ ] Tester sur mobile (tap pour afficher le menu)
|
||||
- [ ] Vérifier que l'avatar reste en bas à gauche
|
||||
- [ ] Vérifier que les images restent visibles
|
||||
- [ ] Vérifier que les liens HTML restent avec prévisualisation complète
|
||||
- [ ] Vérifier que les labels restent visibles
|
||||
- [ ] Vérifier que la date reste en bas à droite
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Résumé
|
||||
|
||||
**Changement unique :** 5 boutons → 1 menu "..."
|
||||
**Tout le reste :** Identique (avatar bas gauche, images, liens HTML, labels, date)
|
||||
|
||||
---
|
||||
|
||||
**Document créé le:** 2026-01-17
|
||||
**Status:** Prêt pour implémentation
|
||||
Reference in New Issue
Block a user