ObsiViewer/docs/NIMBUS_EDITOR_UI_REDESIGN.md

Redesign de l'Interface Éditeur Nimbus

📋 Résumé des changements

Cette mise à jour refait complètement l'interface utilisateur de l'éditeur Nimbus pour offrir une expérience plus moderne et intuitive, inspirée des meilleurs éditeurs de blocs.

✨ Nouvelles fonctionnalités

1. Barre de commande rapide (Editor Toolbar)

Remplace le simple placeholder texte par une barre interactive avec:

• Placeholder: "Start writing or type '/' or '@'"
• Icônes rapides d'accès:
  • ✨ Use AI
  • ☑️ Checkbox list
  • 1️⃣ Numbered list
  • • Bullet list
  • ⊞ Table
  • 🖼️ Image
  • 📎 File
  • 🗒️ New Page
  • H_M Heading 2
  • ⬇️ More items (ouvre le menu)

Fichier: src/app/editor/components/toolbar/editor-toolbar.component.ts

2. Menu contextuel unifié "Add Block"

Nouveau menu avec:

• Sections organisées:

  • BASIC
  • ADVANCED
  • MEDIA
  • INTEGRATIONS
  • VIEW
  • TEMPLATES
  • HELPFUL LINKS

• Fonctionnalités:

  • Headers de sections sticky lors du scroll
  • Recherche par mot-clé
  • Badge "New" pour nouveaux items
  • Raccourcis clavier affichés
  • Design moderne avec backdrop blur

Fichier: src/app/editor/components/palette/block-menu.component.ts

3. Nouveaux types de blocs

Ajout de 14 nouveaux types de blocs:

• link - Hyperliens
• audio - Enregistrement audio
• video - Enregistrement vidéo
• bookmark - Signets web
• unsplash - Photos gratuites
• task-list - Gestion de tâches avancée
• link-page - Lier à une page
• date - Insertion de date
• mention - Mentionner un membre
• collapsible - Sections repliables (3 tailles)
• columns - Disposition en colonnes
• database - Vue base de données
• template - Templates prédéfinis

Fichier: src/app/editor/core/constants/palette-items.ts

🎨 Design

Palette de couleurs

• Fond menu: bg-neutral-900/95 avec backdrop-blur-md
• Headers sticky: bg-neutral-900/90 avec backdrop-blur-md
• Hover items: bg-neutral-800/80
• Selection: bg-purple-600
• Bordures: border-neutral-700

Typographie

• Headers de section: text-xs uppercase tracking-wide
• Labels: font-medium text-gray-200
• Descriptions: text-xs text-gray-400
• Raccourcis: font-mono bg-neutral-700

🔧 Intégration

Déclenchement du menu

Le menu "Add Block" peut être ouvert de 3 façons:

1. Clic sur bouton "+ Add block"
2. Clic sur l'icône flèche vers le bas (⬇️) dans la toolbar
3. Frappe du caractère "/" dans l'éditeur

Workflow utilisateur

Utilisateur tape "/" 
  ↓
Menu s'ouvre avec toutes les sections
  ↓
Utilisateur peut:
  - Scroller (headers restent sticky)
  - Chercher par mot-clé
  - Cliquer sur un item
  ↓
Bloc est inséré dans l'éditeur

📁 Fichiers modifiés

Nouveaux fichiers

• src/app/editor/components/toolbar/editor-toolbar.component.ts
• src/app/editor/components/palette/block-menu.component.ts

Fichiers modifiés

• src/app/editor/core/models/block.model.ts - Ajout nouveaux BlockType
• src/app/editor/core/constants/palette-items.ts - Nouvelles catégories et items
• src/app/editor/components/editor-shell/editor-shell.component.ts - Intégration toolbar et menu

🧪 Test

Vérifications à effectuer

1. Barre de commande:

   • Placeholder s'affiche correctement
   • Toutes les icônes sont visibles
   • Hover fonctionne sur chaque icône
   • Clic sur icône insère le bon type de bloc
   • Clic sur "⬇️" ouvre le menu

2. Menu contextuel:

   • S'ouvre avec "/" ou bouton "+ Add block" ou "⬇️"
   • Toutes les sections sont présentes
   • Headers restent sticky au scroll
   • Recherche filtre correctement
   • Badge "New" apparaît sur les bons items
   • Raccourcis clavier affichés
   • Clic sur item insère le bloc

3. UX globale:

   • Transitions fluides
   • Fermeture du menu sur clic extérieur
   • Navigation clavier (↑↓ Enter Escape)
   • Responsive sur mobile

🚀 Prochaines étapes

1. Implémenter les nouveaux types de blocs (audio, video, etc.)
2. Ajouter l'intégration AI pour le bouton "Use AI"
3. Créer les templates prédéfinis
4. Ajouter les animations d'apparition/disparition
5. Optimiser les performances pour grandes listes

💡 Notes techniques

Sticky headers

Les headers de section utilisent position: sticky avec top: 0 et z-index: 10 pour rester visibles lors du scroll.

Backdrop blur

L'effet de flou utilise backdrop-filter: blur() avec fallback pour navigateurs non supportés.

Recherche

La recherche filtre en temps réel par:

• Label du bloc
• Description
• Mots-clés (keywords)

Accessibilité

• Tous les boutons ont des attributs title
• Navigation clavier complète
• Focus visible sur items sélectionnés

---

Date: 6 novembre 2025
Auteur: Nimbus Team
Version: 2.0