sepehr 7fb486c9a4 feat: Complete internationalization and code cleanup

## 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>

2026-01-11 22:26:13 +01:00

45 KiB

Raw Blame History

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

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

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)

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:

Nom (Text input)
- Requis
- Max 50 caractères
- Placeholder: "Nom du notebook"
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 📓
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:

État initial (repos)
- La note a une poignée de drag invisible (apparaît au hover)
- Curseur: grab (main ouverte)
É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
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:

✅ Valider ces wireframes avec Ramez
✅ Créer le schéma de base de données (Prisma)
✅ Implémenter Phase 1 (MVP sans IA)
✅ Implémenter Phase 2 (IA Features)
✅ Tests E2E avec Playwright

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

45 KiB Raw Blame History

Wireframes UX - Notebooks & Labels Contextuels

📋 Table des Matières

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

Description

Layout

Notes de Design

Screen 2: Vue Notebook "Voyage"

Description

Layout

Notes de Design

Screen 3: Modal Création Notebook

Description

Layout

Notes de Design

Screen 4: Suggestion IA - Notebook

Description

Layout

Notes de Design

Screen 5: Suggestion IA - Labels

Description

Layout

Notes de Design

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

Description

Layout (État: Drag en cours)

Notes de Design

🎨 Thème de Couleurs

📐 Dimensions et Spacing

✅ Checklist de Validation

🚀 Prêt pour le Développement

45 KiB

Raw Blame History