sepehr
7fb486c9a4
## Translation Files - Add 11 new language files (es, de, pt, ru, zh, ja, ko, ar, hi, nl, pl) - Add 100+ missing translation keys across all 15 languages - New sections: notebook, pagination, ai.batchOrganization, ai.autoLabels - Update nav section with workspace, quickAccess, myLibrary keys ## Component Updates - Update 15+ components to use translation keys instead of hardcoded text - Components: notebook dialogs, sidebar, header, note-input, ghost-tags, etc. - Replace 80+ hardcoded English/French strings with t() calls - Ensure consistent UI across all supported languages ## Code Quality - Remove 77+ console.log statements from codebase - Clean up API routes, components, hooks, and services - Keep only essential error handling (no debugging logs) ## UI/UX Improvements - Update Keep logo to yellow post-it style (from-yellow-400 to-amber-500) - Change selection colors to #FEF3C6 (notebooks) and #EFB162 (nav items) - Make "+" button permanently visible in notebooks section - Fix grammar and syntax errors in multiple components ## Bug Fixes - Fix JSON syntax errors in it.json, nl.json, pl.json, zh.json - Fix syntax errors in notebook-suggestion-toast.tsx - Fix syntax errors in use-auto-tagging.ts - Fix syntax errors in paragraph-refactor.service.ts - Fix duplicate "fusion" section in nl.json 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Ou une version plus courte si vous préférez : feat(i18n): Add 15 languages, remove logs, update UI components - Create 11 new translation files (es, de, pt, ru, zh, ja, ko, ar, hi, nl, pl) - Add 100+ translation keys: notebook, pagination, AI features - Update 15+ components to use translations (80+ strings) - Remove 77+ console.log statements from codebase - Fix JSON syntax errors in 4 translation files - Fix component syntax errors (toast, hooks, services) - Update logo to yellow post-it style - Change selection colors (#FEF3C6, #EFB162) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
594 lines
45 KiB
Markdown
594 lines
45 KiB
Markdown
# 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
|