# Wireframes UX - Notebooks & Labels Contextuels

**Project:** Keep (Memento Phase 1 MVP AI)
**Feature:** Notebooks avec Labels Contextuels
**Date:** 2026-01-11
**Author:** Sally (UX Designer)
**Status:** Ready for Development

---

## 📋 Table des Matières

1. [Screen 1: Page d'Accueil - Notes Générales](#screen-1)
2. [Screen 2: Vue Notebook "Voyage"](#screen-2)
3. [Screen 3: Modal Création Notebook](#screen-3)
4. [Screen 4: Suggestion IA - Notebook](#screen-4)
5. [Screen 5: Suggestion IA - Labels](#screen-5)
6. [Screen 6: Drag & Drop - Déplacement](#screen-6)

---

## Screen 1: Page d'Accueil - Notes Générales

### Description
Vue principale de l'application quand l'utilisateur arrive. Affiche toutes les notes **sans notebook** dans la zone "Notes générales".

### Layout

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  KEEP                                                      🔍 [Search...]  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────┐  ┌──────────────────────────────────────────────┐  │
│  │  📚 NOTEBOOKS       │  │  📥 Notes générales                          │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📥 Notes géné.  │ │  │  │ ┌────────────────────────────────────────┐│ │  │
│  │ │   (12 notes)   │ │  │  │ │📝 "Idée rapide pour le livre..."       ││ │  │
│  │ └─────────────────┘ │  │  │ │                                        ││ │  │
│  │                     │  │  │ │ Il faudrait que je pense au            ││ │  │
│  │ ┌─────────────────┐ │  │  │ │ personnage principal et à comment     ││ │  │
│  │ │✈️ Voyage        │ │  │  │ │ intégrer les flashbacks.              ││ │  │
│  │ │   (8 notes)    │ │  │  │ │                                        ││ │  │
│  │ └─────────────────┘ │  │  │ │ [Badge: ⚠️ À trier]                    ││ │  │
│  │                     │  │  │ └────────────────────────────────────────┘│ │  │
│  │ ┌─────────────────┐ │  │  │                                                │  │
│  │ │💼 Travail       │ │  │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │  (15 notes)    │ │  │  │  │📝 "Réunion lundi avec l'équipe..."      │ │  │
│  │ └─────────────────┘ │  │  │  │                                        │ │  │
│  │                     │  │  │  │ Points abordés:                         │ │  │
│  │ ┌─────────────────┐ │  │  │  │ - Roadmap Q1                            │ │  │
│  │ │📖 Perso         │ │  │  │  │ - Budget marketing                     │ │  │
│  │ │  (23 notes)    │ │  │  │  │ - Nouveaux recrutements                 │ │  │
│  │ └─────────────────┘ │  │  │  │                                        │ │  │
│  │                     │  │  │  │ [Badge: ⚠️ À trier]                    │ │  │
│  │                     │  │  │  └──────────────────────────────────────────┘ │  │
│  │                     │  │  │                                                │  │
│  │ [+ Nouveau Notebook]│  │  │  ┌──────────────────────────────────────────┐ │  │
│  │                     │  │  │  │📝 "Commander matériel..."               │ │  │
│  └─────────────────────┘  │  │  │                                        │ │  │
│                             │  │ │ Liste:                                  │ │  │
│                             │  │  │ - Câbles HDMI                           │ │  │
│                             │  │  │ - Support micro                         │ │  │
│                             │  │  │                                        │ │  │
│                             │  │  │ [Badge: ⚠️ À trier]                    │ │  │
│                             │  │  └──────────────────────────────────────────┘ │  │
│                             │  │                                                │  │
│                             │  │  [Nouvelle note +]                            │  │
│                             │  │                                                │  │
│                             │  └──────────────────────────────────────────────┘  │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Comportements:**
- ✅ Les notes dans "Notes générales" ont un badge **"⚠️ À trier"**
- ✅ **PAS de labels disponibles** dans cette vue
- ✅ Click sur un notebook → navigue vers ce notebook
- ✅ Hover sur un notebook → surlignage subtil
- ✅ **[+ Nouveau Notebook]** → ouvre le modal de création (Screen 3)

**Intéractions:**
- Click sur note → ouvre la note (mode lecture)
- Double-click sur note → ouvre la note (mode édition)
- Click sur "[Nouvelle note +]" → crée une note DANS "Notes générales"

**Détails visuels:**
- Sidebar: 260px de large, fond gris clair `#F5F5F5`
- Notebooks actifs: bordure gauche bleue `#2196F3` (3px)
- Badges "À trier": fond orange clair `#FFF3E0`, texte orange `#F57C00`
- Notes: fond blanc avec ombre subtile

---

## Screen 2: Vue Notebook "Voyage"

### Description
Vue quand l'utilisateur navigue dans un notebook spécifique. Affiche les **labels contextuels** de ce notebook seulement.

### Layout

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  KEEP                                                      🔍 [Search...]  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────┐  ┌──────────────────────────────────────────────┐  │
│  │  📚 NOTEBOOKS       │  │  ✈️ Voyage                                   │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📥 Notes géné.  │ │  │  │ ┌────────────────────────────────────────┐│ │  │
│  │ │   (12 notes)   │ │  │  │ │📝 "Hotel Tokyo Shibuya Excel"         ││ │  │
│  │ └─────────────────┘ │  │  │ │                                        ││ │  │
│  │                     │  │  │ │ Hotel Shibuya Excel - Tokyu          ││ │  │
│  │ ┌─────────────────┐ │  │  │ │ 150€/nuit - Booking confirmé          ││ │  │
│  │ │✈️ Voyage        │◄─┼──│  │ │                                        ││ │  │
│  │ │  (8 notes)     │ │ │  │  │ │ Coordonnées: 3-21-4 Shibuya, Tokyo   ││ │  │
│  │ │ ┌─────────────┐│ │ │  │  │ │ Check-in: 15 Mars, Check-out: 22 Mars││ │  │
│  │ │ │🏷️ Labels:   ││ │ │  │  │ │                                        ││ │  │
│  │ │ │  • #hôtels  ││ │ │  │  │ │ [🏷️ #hôtels] [🏷️ #réservations]    ││ │  │
│  │ │ │  • #vols    ││ │ │  │  │ └────────────────────────────────────────┘│ │  │
│  │ │ │  • #restos  ││ │ │  │  │                                                │  │
│  │ │ │ [+ + Labels]││ │ │  │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │ └─────────────┘│ │ │  │  │  │📝 "Vols JAL Tokyo-Paris"               │ │  │
│  │ └─────────────────┘ │  │  │  │                                        │ │  │
│  │                     │  │  │  │ JAL JL402 - 15 Mars 2024               │ │  │
│  │ ┌─────────────────┐ │  │  │  │ Départ: CDG 10H30 → Arrivée: HND 06H45+1│ │  │
│  │ │💼 Travail       │ │  │  │  │                                        │ │  │
│  │ │  (15 notes)    │ │  │  │  │ [🏷️ #vols] [🏷️ #réservations]         │ │  │
│  │ └─────────────────┘ │  │  │  └──────────────────────────────────────────┘ │  │
│  │                     │  │  │                                                │  │
│  │ ┌─────────────────┐ │  │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📖 Perso         │ │  │  │  │📝 "Restaurants à tester"               │ │  │
│  │ │  (23 notes)    │ │  │  │  │                                        │ │  │
│  │ └─────────────────┘ │  │  │  │ Liste:                                 │ │  │
│  │                     │  │  │  │ 1. Sukiyabashi Jiro (Ginza)            │ │  │
│  │                     │  │  │  │ 2. Tempura Kondo (Shibuya)             │ │  │
│  │ [+ Nouveau Notebook]│  │  │  │ 3. Ichiran Ramen (Shinjuku)            │ │  │
│  │                     │  │  │  │                                        │ │  │
│  └─────────────────────┘  │  │  │ [🏷️ #restos]                          │ │  │
│                             │  │  └──────────────────────────────────────────┘ │  │
│                             │  │                                                │  │
│                             │  │  [Nouvelle note +]                            │  │
│                             │  │                                                │  │
│                             │  └──────────────────────────────────────────────┘  │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Comportements:**
- ✅ Notebook actif ("Voyage") surligné avec bordure gauche bleue
- ✅ **Labels contextuels** DANS la sidebar, sous le notebook actif
- ✅ Labels disponibles: SEULEMENT ceux de "Voyage" (#hôtels, #vols, #restos)
- ✅ Click sur un label → filtre les notes par ce label
- ✅ **[+ + Labels]** → ouvre le modal de création de label

**Labels contextuels:**
- Triangle ▼ pour déplier/replier les labels
- Compteur entre parenthèses: `• #hôtels (3)`
- Hover sur un label → surlignage
- Click sur label → filtre actif (fond bleu clair)

**Badges sur les notes:**
- Chaque note affiche ses labels sous forme de badges
- Format: `[🏷️ #nom]`
- Couleur du badge: liée à la couleur du label (définie dans la création)

---

## Screen 3: Modal Création Notebook

### Description
Modal qui s'ouvre quand l'utilisateur clique sur "[+ Nouveau Notebook]". Permet de créer un nouveau notebook avec nom, icône et couleur.

### Layout

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│         ┌─────────────────────────────────────────────────────────────┐     │
│         │  Nouveau Notebook                                           │     │
│         ├─────────────────────────────────────────────────────────────┤     │
│         │                                                             │     │
│         │  Nom:                                                       │     │
│         │  ┌───────────────────────────────────────────────────────┐  │     │
│         │  │ Voyage                                               │  │     │
│         │  └───────────────────────────────────────────────────────┘  │     │
│         │                                                             │     │
│         │  Icône:                                                     │     │
│         │  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐           │     │
│         │  │  ✈️  │ │  🏠  │ │  💼  │ │  📖  │ │  🎯  │ │  🎨  │ ...  │     │
│         │  └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘           │     │
│         │                                                             │     │
│         │  [+ Personnaliser avec emoji...]                           │     │
│         │                                                             │     │
│         │  Couleur:                                                   │     │
│         │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐           │     │
│         │  │ 🔵      │ │ 🟢      │ │ 🟡      │ │ 🔴      │ ...      │     │
│         │  │#3B82F6  │ │#10B981  │ │#F59E0B  │ │#EF4444  │           │     │
│         │  └─────────┘ └─────────┘ └─────────┘ └─────────┘           │     │
│         │                                                             │     │
│         │  ┌──────────────────┐  ┌──────────────────────────────┐    │     │
│         │  │    Annuler       │  │          Créer               │    │     │
│         │  └──────────────────┘  └──────────────────────────────┘    │     │
│         │                                                             │     │
│         └─────────────────────────────────────────────────────────────┘     │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Champs:**
1. **Nom** (Text input)
   - Requis
   - Max 50 caractères
   - Placeholder: "Nom du notebook"

2. **Icône** (Sélection + Emoji picker)
   - Optionnel
   - 6 icônes suggérées (✈️ 🏠 💼 📖 🎯 🎨)
   - **[+ Personnaliser...]** → ouvre emoji picker natif
   - Si pas choisi → icône par défaut 📓

3. **Couleur** (Color picker)
   - Optionnel
   - 6 couleurs suggérées (bleu, vert, jaune, rouge, violet, gris)
   - Si pas choisi → couleur par défaut #9E9E9E (gris)

**Boutons:**
- **Annuler** → Ferme le modal, annule la création
- **Créer** → Crée le notebook et l'ajoute à la fin de la liste

**Validation:**
- Le bouton "Créer" est **désactivé** si le nom est vide
- Si le nom existe déjà → message d'erreur sous le champ

---

## Screen 4: Suggestion IA - Notebook

### Description
Toast/suggestion qui apparaît quand l'utilisateur crée une note dans "Notes générales". L'IA suggère le notebook le plus approprié.

### Layout

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  KEEP                                                      🔍 [Search...]  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────┐  ┌──────────────────────────────────────────────┐  │
│  │  📚 NOTEBOOKS       │  │  📥 Notes générales                          │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📥 Notes géné.  │ │  │  │ 📝 "Rendez-vous dermatologue..."          │ │  │
│  │ │   (12 notes)   │ │  │  │                                        │ │  │
│  │ └─────────────────┘ │  │  │ Lundi 15h - Dr. Martin - Cabinet       │ │  │
│  │                     │  │  │ Dermatologique - 12 rue de la Paix     │ │  │
│  │ ┌─────────────────┐ │  │  │ Paris 75004 - Rappeler pour confirmer  │ │  │
│  │ │✈️ Voyage        │ │  │  │                                        │ │  │
│  │ │  (8 notes)     │ │  │  │ [Badge: ⚠️ À trier]                    │ │  │
│  │ └─────────────────┘ │  │  └──────────────────────────────────────────┘ │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │💼 Travail       │ │  │  │ 📝 "Idée livre..."                       │ │  │
│  │ │  (15 notes)    │ │  │  │                                        │ │  │
│  │ └─────────────────┘ │  │  │ [...content...]                        │ │  │
│  │                     │  │  │                                        │ │  │
│  │ ┌─────────────────┐ │  │  │ [Badge: ⚠️ À trier]                    │ │  │
│  │ │📖 Perso         │ │  │  └──────────────────────────────────────────┘ │  │
│  │ │  (23 notes)    │ │  │                                                │  │
│  │ └─────────────────┘ │  │                                                │  │
│  └─────────────────────┘  │                                                │  │
│                             │                                                │  │
│                             └──────────────────────────────────────────────┘  │
│                                                                              │
│                           ┌─────────────────────────────────────────────┐   │
│                           │  💡 Suggestion IA                           │   │
│                           ├─────────────────────────────────────────────┤   │
│                           │                                             │   │
│                           │  Cette note semble appartenir au notebook:  │   │
│                           │                                             │   │
│                           │  ┌───────────────────────────────────────┐ │   │
│                           │  │  📖 Perso                             │ │   │
│                           │  │                                       │ │   │
│                           │  │  Confiance: 87%                       │ │   │
│                           │  │                                       │ │   │
│                           │  │  Pourquoi:                            │ │   │
│                           │  │  Cette note parle de rendez-vous      │ │   │
│                           │  │  personnel (médecin), ce qui           │ │   │
│                           │  │  correspond mieux à "Perso" qu'aux     │ │   │
│                           │  │  autres notebooks (Travail, Voyage).   │ │   │
│                           │  └───────────────────────────────────────┘ │   │
│                           │                                             │   │
│                           │  ┌──────────────┐  ┌──────────────────┐    │   │
│                           │  │  Ignorer     │  │ Déplacer → Perso │    │   │
│                           │  └──────────────┘  └──────────────────┘    │   │
│                           │                                             │   │
│                           └─────────────────────────────────────────────┘   │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Apparition:**
- Toast qui apparaît **5 secondes après** la fin de frappe
- Ne dérange PAS si l'utilisateur continue à taper
- Position: **bottom-right** (coin inférieur droit)

**Contenu:**
- **Icône💡** pour suggérer quelque chose d'intelligent
- **Notebook suggéré** avec son icône et son nom
- **Confiance** en pourcentage (ex: 87%)
- **Pourquoi** - explication courte du raisonnement IA

**Boutons:**
- **Ignorer** → Ferme le toast, ne fait rien
- **Déplacer → Perso** → Déplace la note vers le notebook "Perso"

**Comportement:**
- Si l'utilisateur clique sur "Déplacer" → la note est déplacée **immédiatement**
- Animation de transition (la note "glisse" vers le notebook dans la sidebar)
- Toast se ferme automatiquement après action

---

## Screen 5: Suggestion IA - Labels

### Description
Panel qui apparaît quand l'utilisateur édite ou crée une note dans un notebook. L'IA suggère des labels contextuels à ce notebook.

### Layout

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  KEEP                                                      🔍 [Search...]  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────┐  ┌──────────────────────────────────────────────┐  │
│  │  📚 NOTEBOOKS       │  │  ✈️ Voyage                                   │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📥 Notes géné.  │ │  │  │ 📝 "Hotel Shibuya Excel"            [✏️]  │ │  │
│  │ │   (12 notes)   │ │  │  │                                        │ │  │
│  │ └─────────────────┘ │  │  │ Hotel Shibuya Excel - Tokyu            │ │  │
│  │                     │  │  │ 150€/nuit - Booking confirmé           │ │  │
│  │ ┌─────────────────┐ │  │  │                                        │ │  │
│  │ │✈️ Voyage        │◄─┼──│  │ Coordonnées: 3-21-4 Shibuya, Tokyo      │ │  │
│  │ │  (8 notes)     │ │ │  │  │ Check-in: 15 Mar, Check-out: 22 Mar    │ │  │
│  │ │ ┌─────────────┐│ │ │  │  │                                        │ │  │
│  │ │ │🏷️ Labels:   ││ │ │  │  │ [Sauvegarder]                          │ │  │
│  │ │ │  • #hôtels  ││ │ │  │  └──────────────────────────────────────────┘ │  │
│  │ │ │  • #vols    ││ │ │  │                                                │  │
│  │ │ │  • #restos  ││ │ │  │                                                │  │
│  │ │ │ [+ + Labels]││ │ │  │                                                │  │
│  │ │ └─────────────┘│ │ │  │                                                │  │
│  │ └─────────────────┘ │  │  │                                                │  │
│  │                     │  │  │                                                │  │
│  │ ┌─────────────────┐ │  │  │                                                │  │
│  │ │💼 Travail       │ │  │  │                                                │  │
│  │ │  (15 notes)    │ │  │  │                                                │  │
│  │ └─────────────────┘ │  │  │                                                │  │
│  │                     │  │  │                                                │  │
│  │ ┌─────────────────┐ │  │  │                                                │  │
│  │ │📖 Perso         │ │  │  │                                                │  │
│  │ │  (23 notes)    │ │  │  │                                                │  │
│  │ └─────────────────┘ │  │  │                                                │  │
│  │                     │  │  │                                                │  │
│  │ [+ Nouveau Notebook]│  │  │                                                │  │
│  └─────────────────────┘  │  └──────────────────────────────────────────────┘  │
│                                                                              │
│                           ┌─────────────────────────────────────────────┐   │
│                           │  💡 Suggestions de Labels                  │   │
│                           ├─────────────────────────────────────────────┤   │
│                           │                                             │   │
│                           │  Basé sur le contenu de la note             │   │
│                           │                                             │   │
│                           │  ┌───────────────────────────────────────┐ │   │
│                           │  │ ✅ #hôtels            [Confiance: 95%]│ │   │
│                           │  │     "Mentionne hôtel et prix"         │ │   │
│                           │  ├───────────────────────────────────────┤ │   │
│                           │  │ ✅ #réservations       [Confiance: 82%]│ │   │
│                           │  │     "Booking confirmé"                │ │   │
│                           │  ├───────────────────────────────────────┤ │   │
│                           │  │ ✅ #tokyo             [Confiance: 76%]│ │   │
│                           │  │     "Shibuya est un quartier de Tokyo"│ │   │
│                           │  └───────────────────────────────────────┘ │   │
│                           │                                             │   │
│                           │  ┌──────────────┐  ┌──────────────────┐    │   │
│                           │  │Tout Sélect.  │  │ Appliquer (3)    │    │   │
│                           │  └──────────────┘  └──────────────────┘    │   │
│                           │                                             │   │
│                           └─────────────────────────────────────────────┘   │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Apparition:**
- Panel qui apparaît **à droite de la note** en édition
- Ou toast en bas si pas assez de place
- Apparaît **3 secondes après** un changement significatif du contenu
- Se met à jour en temps réel si l'utilisateur continue à modifier

**Fonctionnement:**
- L'IA analyse le contenu de la note
- Suggère **3 labels maximum** parmi ceux **disponibles dans le notebook**
- Ne JAMAIS suggérer un label qui n'existe pas dans le notebook
- Si confiance < 60% → ne pas suggérer (trop incertain)

**Interface:**
- Checkboxes ✅ pour chaque suggestion
- Pourcentage de confiance
- Raisonnement court entre guillemets
- **[Tout Sélect.]** → Sélectionne toutes les suggestions
- **[Appliquer (3)]** → Ajoute les labels sélectionnés à la note

**Comportement:**
- Si l'utilisateur clique sur "Appliquer" → les badges apparaissent sur la note
- Animation de "pop" sur les badges ajoutés
- Panel se ferme automatiquement après application
- Si l'utilisateur ignore → panel disparaît après 30 secondes

---

## Screen 6: Drag & Drop - Déplacement de Note

### Description
Interaction de drag & drop pour déplacer une note d'un notebook (ou Notes générales) vers un autre notebook.

### Layout (État: Drag en cours)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  KEEP                                                      🔍 [Search...]  │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────┐  ┌──────────────────────────────────────────────┐  │
│  │  📚 NOTEBOOKS       │  │  📥 Notes générales                          │  │
│  │                     │  │                                                │  │
│  │ ┌─────────────────┐ │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │📥 Notes géné.  │ │  │  │ ┌────────────────────────────────────────┐│ │  │
│  │ │   (12 notes)   │ │  │  │ │📝 "Idée rapide pour le livre..."       ││ │  │
│  │ └─────────────────┘ │  │  │ │                                        ││ │  │
│  │                     │  │  │ │ [...content...]                        ││ │  │
│  │ ┌─────────────────┐ │  │  │ │                                        ││ │  │
│  │ │✈️ Voyage        │◄─┼──┼──│ └────────────────────────────────────────┘│ │  │
│  │ │  (8 notes)     │ │ │  │  │                                                │  │
│  │ │ ┌─────────────┐│ │ │  │  │  ┌──────────────────────────────────────────┐ │  │
│  │ │ │ DROP ZONE   ││◄─┼──┼──│  │ ╔═════════════════════════════════════════╗ │ │  │
│  │ │ │  ⬇         ││ │ │  │  │ ║ 📝 "Réunion lundi avec l'équipe..."  ║ │ │  │
│  │ │ │  Déposez   ││ │ │  │  │ ║                                       ║ │ │  │
│  │ │ │  la note   ││ │ │  │  │ ║ Points: Roadmap, Budget, Recrute... ║ │ │  │
│  │ │ │  ici !     ││ │ │  │  │ ║                                       ║ │ │  │
│  │ │ └─────────────┘│ │ │  │  │ ║ [Badge: ⚠️ À trier]                   ║ │ │  │
│  │ └─────────────────┘ │  │  │  │ ╚═════════════════════════════════════════╝ │ │  │
│  │                     │  │  │  └──────────────────────────────────────────┘ │  │
│  │ ┌─────────────────┐ │  │  │                ↓                           │  │
│  │ │💼 Travail       │ │  │  │           (Drag en cours)                    │  │
│  │ │  (15 notes)    │ │  │  │                                                │  │
│  │ └─────────────────┘ │  │  │                                                │  │
│  │                     │  │  │                                                │  │
│  │ ┌─────────────────┐ │  │  │                                                │  │
│  │ │📖 Perso         │ │  │  │                                                │  │
│  │ │  (23 notes)    │ │  │  │                                                │  │
│  │ └─────────────────┘ │  │  │                                                │  │
│  │                     │  │  │                                                │  │
│  │ [+ Nouveau Notebook]│  │  │                                                │  │
│  └─────────────────────┘  │  └──────────────────────────────────────────────┘  │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

### Notes de Design

**Déclenchement du drag:**
- L'utilisateur clique sur la **poignée de drag** (handle) en haut à gauche de la note
- OU click droit → Menu → "Déplacer vers..."

**États visuels:**

1. **État initial (repos)**
   - La note a une poignée de drag invisible (apparaît au hover)
   - Curseur: `grab` (main ouverte)

2. **État dragging**
   - La note devient **semi-transparente** (opacity: 0.6)
   - Ombre portée accentuée
   - Curseur: `grabbing` (main fermée)
   - Clone de la note qui suit le curseur

3. **Drop zones actives**
   - Les notebooks dans la sidebar deviennent des **zones de drop**
   - Fond bleu clair `#E3F2FD` avec bordure pointillée bleue
   - Texte "⬇ Déposez la note ici !"
   - Seulement le notebook sous le curseur est surligné

**Feedback visuel:**
- Quand la note est au-dessus d'un notebook valide → ce notebook surligne
- Si drop hors d'une zone valide → retour à la position initiale (annulation)
- Après drop réussi → animation de la note qui "glisse" vers le notebook

**Drag handle:**
- Position: Top-left de la note, 20x20px
- Icone: ⋮⋮ (6 points verticaux, grip vertical)
- Apparaît au hover sur la note
- Opacité: 0.3 au repos, 1.0 au hover

---

## 🎨 Thème de Couleurs

**Wireframe Style: Classic**

```
Background: #ffffff (white)
Container: #f5f5f5 (light gray)
Border: #9e9e9e (gray)
Text: #424242 (dark gray)
Primary (Bleu): #2196F3
Accent (Orange): #FF9800
Success (Vert): #4CAF50
```

**Palette complète:**
- Notes: Fond blanc `#FFFFFF`, bordure grise `#E0E0E0`
- Sidebar: Fond gris clair `#F5F5F5`
- Notebook actif: Bordure gauche bleue `#2196F3` (3px)
- Badge "À trier": Fond orange `#FFF3E0`, texte orange `#F57C00`
- Labels: Couleurs personnalisables (création utilisateur)
- Drop zone: Fond bleu clair `#E3F2FD`, bordure bleue `#2196F3`

---

## 📐 Dimensions et Spacing

**Grid:** 20px (tous les éléments alignés sur cette grille)

**Dimensions clés:**
- Sidebar: 260px de large
- Note card: Largeur variable (selon Masonry), hauteur auto
- Modal: 500px de large, 450px de haut
- Toast Suggestion IA: 400px de large, 250px de haut
- Panel Labels: 350px de large

**Spacing:**
- Entre les notes: 16px (vertical et horizontal)
- Entre les notebooks dans sidebar: 8px
- Padding des notes: 16px
- Margin des sections: 24px

---

## ✅ Checklist de Validation

Pour chaque wireframe, vérifier:

- [ ] **Hiérarchie visuelle claire** - Les éléments importants ressortent
- [ ] **Feedback visuel** - Hover, focus, disabled states
- [ ] **Contraste suffisant** - Accessibilité WCAG AA minimum
- [ ] **Alignement grille** - Tous les éléments sur 20px grid
- [ ] **Spacing cohérent** - Utiliser les valeurs définies
- [ ] **Texte lisible** - Taille de police appropriée (min 14px)
- [ ] **Comportements documentés** - États, transitions, interactions
- [ ] **Labels contextuels** - Visible seulement dans notebook
- [ ] **Notes générales** - PAS de labels, badge "À trier"
- [ ] **IA suggestions** - Non intrusif, dismissible

---

## 🚀 Prêt pour le Développement

**Next Steps:**
1. ✅ Valider ces wireframes avec Ramez
2. ✅ Créer le schéma de base de données (Prisma)
3. ✅ Implémenter Phase 1 (MVP sans IA)
4. ✅ Implémenter Phase 2 (IA Features)
5. ✅ Tests E2E avec Playwright

---

**Document créé par Sally (UX Designer)**
**Date:** 2026-01-11
**Version:** 1.0 - Final
**Status:** ✅ Ready for Implementation