ObsiGate/docs/TOOLBAR_DESIGN_ANALYSIS.md

🎯 Analyse : Architecture de Toolbar pour ObsiGate

Date : 2026-06-05 Auteur : Hermes-Claw (Agent IA) Contexte : Recherche et recommandation du meilleur design de barre d'outils pour l'éditeur ObsiGate Fonctionnalités cibles : Édition Markdown, Actions IA, Insertion PDF, Insertion Images

---

📋 Sources d'inspiration

L'analyse repose sur l'étude des éditeurs leaders du marché :

Éditeur	Pattern clé	Pertinence pour ObsiGate
Notion	Slash menu + Bubble menu + Quick insert +	⭐⭐⭐⭐⭐ Forte
Novel.sh	Slash menu + AI autocomplete (++)	⭐⭐⭐⭐⭐ Forte
Medium	Bubble menu minimal sur sélection	⭐⭐⭐⭐ Élevée
Dropbox Paper	Quick insert + + Slash commands	⭐⭐⭐⭐ Élevée
Cursor / Windsurf	AI Side Panel + Inline AI	⭐⭐⭐⭐ Élevée
Google Docs	Top toolbar traditionnelle	⭐⭐ Faible (trop chargée)
Obsidian	Command palette + Sidebar	⭐⭐⭐ Moyenne
Tiptap	API de menus : Fixed / Bubble / Floating / Slash	⭐⭐⭐⭐⭐ Fondation technique

---

🏆 Recommandation : Architecture Multi-Zone

Les éditeurs modernes n'utilisent plus une toolbar unique en haut. Ils distribuent les contrôles dans 5 zones contextuelles qui apparaissent uniquement quand elles sont pertinentes.

Principe fondamental

"Montre le bon contrôle, au bon endroit, au bon moment."

Une toolbar fixe traditionnelle (style Google Docs) ne fonctionne plus pour un éditeur moderne avec IA intégrée. La complexité est trop grande pour tout afficher en permanence.

---

📐 Zone 1 — Top Fixed Bar (toujours visible)

┌─────────────────────────────────────────────────────────┐
│ ☰ [Obsigate]  Document Title...    🔮 AI  📎 ⚙️ 💾    │
└─────────────────────────────────────────────────────────┘

Contenu

Position	Élément	Description
Gauche	☰ Menu hamburger	Navigation, settings, historique
Gauche	Titre du document	Éditable inline, se sauvegarde automatiquement
Droite	🔮 AI Assistant	Bouton principal, couleur d'accent — le différenciateur produit
Droite	📎 Quick Insert	Dropdown : Image, PDF, Table, Embed
Droite	⚙️ Actions	Export, Settings, Share
Droite	💾 Save indicator	Auto-save status (saved / saving / error)

Design notes

• Hauteur : ~48px
• Fond : légèrement distinct de l'éditeur (ombre ou bordure)
• Le bouton AI est le plus visible (couleur primaire, légère glow)
• Barre fixe au scroll (sticky top)

Pourquoi

Barre minimale, toujours accessible. Les actions document-level (PDF, images) sont à portée mais ne polluent pas l'interface. Le bouton AI est le hero — le différenciateur d'ObsiGate face aux autres éditeurs.

---

📐 Zone 2a — Slash Command Menu (tape / sur ligne vide)

┌──────────────────────────────────┐
│ 🔍  Filtrer...                   │
│ ──────────────────────────────── │
│ 📝  Text              Just start │
│ ✅  To-do List         Track...  │
│ H1  Heading 1          Big...    │
│ H2  Heading 2          Medium... │
│ H3  Heading 3          Small...  │
│ •   Bullet List        Simple... │
│ 1.  Numbered List      Ordered.. │
│ 💬  Quote              Block...  │
│ 📋  Code Block         Syntax... │
│ ──  Divider            Horiz...  │
│ ──────────────────────────────── │
│ 🖼️  Insert Image       Upload... │
│ 📄  Insert PDF          Attach... │
│ 📊  Insert Table        Data...   │
│ 🔗  Insert Link         URL...    │
│ ──────────────────────────────── │
│ ✨  AI: Continue        Write...  │
│ ✨  AI: Summarize       Condense  │
│ ✨  AI: Translate       To...     │
│ ✨  AI: Brainstorm      Ideas...  │
│ ✨  AI: Fix grammar     Correct   │
│ ✨  AI: Change tone     Formal... │
└──────────────────────────────────┘

Design notes

• Menu flottant (popover) positionné sous le curseur
• Hauteur max : ~400px, scroll si plus
• Chaque item : icône + titre + description courte
• Sections séparées par un divider subtil
• Navigation : flèches ↑↓ + Entrée pour sélectionner
• Barre de filtrage en haut (taper filtre les résultats)
• Fond : blanc/carte avec ombre légère + border-radius 8px
• Animation : fade-in + slide-up (150ms)

Pourquoi c'est le game-changer

Le slash menu remplace 90% des besoins de toolbar. Plus besoin d'une barre fixe pour les actions de formatage. L'utilisateur tape / et tout est là, accessible au clavier. C'est le pattern qui a fait le succès de Notion.

---

📐 Zone 2b — Bubble Menu (apparaît sur sélection de texte)

     ┌──────────────────────────────────────┐
     │  𝐁   𝐼   S̶   </>   🔗   ⋯   ✨ AI ▾ │
     └──────────────────────────────────────┘

Contenu

Icône	Action	Raccourci
B	Bold	Ctrl+B
I	Italic	Ctrl+I
S	Strikethrough	Ctrl+Shift+X
</>	Code inline	Ctrl+E
🔗	Link	Ctrl+K
⋯	More (Quote, Highlight)	—
✨ AI ▾	Dropdown AI actions	—

Dropdown AI (✨)

Action	Description
Improve writing	Améliore le style
Fix spelling & grammar	Corrige les erreurs
Translate to...	Traduit vers langue cible
Continue writing	Continue le texte
Summarize	Résume la sélection
Change tone	Ajuste le ton (formel/informel)
Explain	Explique le texte sélectionné

Design notes

• Apparaît au-dessus de la sélection (évite de cacher le texte)
• Position calculée dynamiquement (reste dans le viewport)
• Animation : scale-in + fade (120ms)
• Fond : blanc + ombre 0 4px 12px rgba(0,0,0,0.15) + radius 8px
• Disparaît quand la sélection est perdue
• Délai d'apparition : 50ms après sélection (pas de flash intempestif)

Pourquoi

Pattern Medium/Notion. Le plus efficace car le curseur est déjà proche de la sélection. Évite les allers-retours avec une toolbar fixe distante.

---

📐 Zone 3 — Floating Quick Insert (ligne vide)

  ⊕ │___________________________________________

Comportement

• Apparaît à gauche d'une ligne vide quand le curseur est dessus
• Au clic sur ⊕, ouvre un mini-menu compact (4-5 options)

  ┌─────────────────────┐
  │ 🖼️  Image           │
  │ 📄  PDF             │
  │ 📋  Code Block      │
  │ 📊  Table           │
  │ ✨  AI Actions ▸    │
  └─────────────────────┘

Design notes

• Icône ⊕ semi-transparente, devient opaque au hover
• Cercle de 24px, centré verticalement sur la ligne
• Mini-menu : compact, sans description (icône + texte uniquement)
• Animation : fade-in (100ms)

Pourquoi

Pattern Dropbox Paper. Ultra-rapide pour les insertions fréquentes — pas besoin de taper / ni d'aller dans la toolbar. Complémentaire au slash menu.

---

📐 Zone 4 — AI Side Panel (toggle droite)

┌──────────────────────────┬──────────────────┐
│                          │  ✨ AI Assistant  │
│   Zone d'édition         │  ─────────────── │
│                          │                  │
│   Ceci est le contenu    │  💬 Chat         │
│   du document en cours   │  ┌────────────┐  │
│   d'édition...           │  │ Pose ta    │  │
│                          │  │ question.. │  │
│                          │  └────────────┘  │
│                          │  [Send]          │
│                          │                  │
│                          │  📋 Suggestions  │
│                          │  • Improve style │
│                          │  • Add section   │
│                          │  • Translate     │
│                          │  • Generate PDF  │
│                          │                  │
└──────────────────────────┴──────────────────┘

Contenu

Section	Description
Chat	Conversation IA contextuelle (connaît le document)
Suggestions	Actions IA contextuelles basées sur le contenu
History	Historique des interactions IA récentes
One-click actions	"Fix grammar", "Translate to EN", "Generate summary"

Design notes

• Panel rétractable (toggle via bouton 🔮 de la Zone 1)
• Largeur : 320-380px
• Fond légèrement distinct
• Slide-in depuis la droite (200ms)
• L'éditeur se réduit (responsive, pas d'overlay)
• Persiste entre les sessions (état sauvegardé)
• Sur mobile : passe en bottom sheet

Pourquoi

Pour les interactions AI complexes (brainstorm, réécriture multi-paragraphes, recherche). Le bubble menu gère le micro ; le panel gère le macro. Pattern Cursor/Windsurf.

---

📐 Zone 5 — Drag & Drop Zone (invisible, toujours actif)

┌────────────────────────────────────────────────┐
│                                                │
│   ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐   │
│   │                                        │   │
│   │     🖼️  Déposez vos fichiers ici       │   │
│   │     Images, PDFs, documents            │   │
│   │                                        │   │
│   └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘   │
│                                                │
└────────────────────────────────────────────────┘

Comportement

• Zone active sur tout l'éditeur
• Au survol d'un fichier : bordure pointillée bleue + overlay semi-transparent
• Accepte : images (png, jpg, webp, gif, svg), PDFs, .md, .txt
• Feedback visuel pendant le drop : animation + barre de progression

Design notes

• Bordure pointillée : 2px dashed #4A90D9
• Overlay : fond bleu à 5% d'opacité
• Icône + texte centrés, large
• Disparaît quand le drag quitte la zone
• Upload progressif avec prévisualisation

---

🎨 Layout complet intégré

┌───────────────────────────────────────────────────────────────────┐
│ ☰  [ObsiGate]  Mon Document...           🔮 AI  📎 Insert  ⚙️  💾 │ ← Zone 1
├───────────────────────────────────────────────────────────────────┤
│                                                                   │
│  ⊕ │  ## Introduction                                   │ ✨ AI   │ ← Zone 4
│    │                                                    │─────── │
│    │  Ceci est le contenu du document...                │        │
│    │                                                    │ Chat   │
│    │     ┌──────────────────────────┐                   │        │
│    │     │ 𝐁  𝐼  S̶  </>  🔗  ✨ AI ▾│ ← Zone 2b (sel.)  │        │
│    │     └──────────────────────────┘                   │        │
│    │                                                    │        │
│    │  Du texte sélectionné ici...                       │        │
│    │                                                    │        │
│  ⊕ │                                                    │        │
│    │  /                                                │        │
│    │  ┌──────────────────────────┐                     │        │
│    │  │ 📝  Text                 │ ← Zone 2a (slash)   │        │
│    │  │ H1  Heading 1            │                     │        │
│    │  │ ✨  AI: Improve writing   │                     │        │
│    │  └──────────────────────────┘                     │        │
│    │                                                    │        │
│    │                                                    │        │
├───────────────────────────────────────────────────────────────────┤
│  ⌨️  / pour menu  |  Ctrl+K pour commandes  |  1200 mots         │
└───────────────────────────────────────────────────────────────────┘

Barre de statut (footer)

• Toujours visible, fine (24-28px)
• Affiche : raccourcis utiles, compteur de mots, statut connexion
• Icône IA clignotante si l'IA est en train de traiter

---

🎯 Tableau comparatif : besoin vs solution

Besoin ObsiGate	Solution	Pattern utilisé par
Édition Markdown rapide	Slash / + Bubble menu	Notion, Medium, Dropbox Paper
Actions IA fréquentes	Bouton 🔮 proéminent + Bubble AI dropdown + Panel	Cursor, Novel.sh, Windsurf
Insertion PDF/Images	Slash menu + Quick insert ⊕ + Drag & drop	Notion, Dropbox Paper
Pas de clutter	Zones contextuelles (rien de visible inutilement)	Medium, iA Writer
Accessibilité clavier	Tout accessible via /, Ctrl+K, Ctrl+P	Notion, Linear
Feedback IA	Barre de statut + animations	Cursor, Copilot

---

🔑 Les 3 patterns différenciateurs

1. Slash Command Menu

Le game-changer. Plus besoin de toolbar fixe pour 90% des actions. Tu tapes / et tout est là, navigable au clavier.

2. L'IA comme citoyen de première classe

L'IA n'est pas cachée dans un sous-menu. Elle est :

• En bouton dédié visible (Zone 1)
• Dans le slash menu (Zone 2a)
• Dans le bubble menu (Zone 2b)
• En panel latéral (Zone 4)

3. Bubble Menu on Selection

Plus proche du curseur, plus rapide. Medium l'a popularisé, tout le monde l'a copié depuis.

---

🛠️ Implémentation technique recommandée

Option A : Tiptap + Custom Extensions (recommandé)

// Base : Tiptap (React)
import { Editor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

// Extensions pour ObsiGate
import { SlashCommand } from './extensions/slash-command'
import { BubbleMenuAI } from './extensions/bubble-menu-ai'
import { QuickInsert } from './extensions/quick-insert'
import { AIPanel } from './extensions/ai-panel'
import { DropZone } from './extensions/drop-zone'

Avantages :

• Contrôle total sur chaque zone
• Écosystème mature (ProseMirror)
• Extensions custom faciles à créer
• Support React/Vue natif

Option B : Novel.sh (rapide)

import { Editor } from 'novel'

Avantages :

• 80% du comportement Notion direct
• Slash menu + AI autocomplete intégrés
• MIT License
• Moins flexible que Tiptap pur

Bibliothèques UI complémentaires

Composant	Librairie	Usage
Popover / Menu flottant	@radix-ui/react-popover	Slash menu, Bubble menu
Panel rétractable	@radix-ui/react-dialog ou custom	AI Panel
Drag & Drop	react-dnd ou natif HTML5	Zone 5
Animations	framer-motion ou CSS transitions	Toutes les zones

---

📱 Considérations Responsive / Mobile

Desktop (>768px)

• Toutes les zones actives
• AI Panel : rétractable à droite

Tablette (480-768px)

• AI Panel : overlay (pas de réduction de l'éditeur)
• Bubble menu : taille réduite
• Slash menu : pleine largeur

Mobile (<480px)

• AI Panel : bottom sheet
• Bubble menu : repositionné en bas d'écran
• Top bar : simplifiée (icônes uniquement)
• Quick insert ⊕ : plus grand (32px) pour le toucher

---

⚡ Raccourcis clavier

Raccourci	Action	Zone
/	Slash command menu	2a
Ctrl+B	Bold	2b
Ctrl+I	Italic	2b
Ctrl+K	Insert link	2b
Ctrl+Shift+I	Insert image	2a
Ctrl+Shift+P	Insert PDF	2a
Ctrl+J	Toggle AI Panel	4
Ctrl+Shift+K	AI quick action	2b
Ctrl+P	Quick open / Command palette	—
Ctrl+S	Force save	1
Ctrl+/	Show all shortcuts	—

---

🧪 Prochaines étapes

1. Mockup HTML interactif — Créer un prototype statique pour valider le layout
2. POC Tiptap — Implémenter les zones 1, 2a, 2b dans un projet test
3. User testing — Faire tester le prototype pour recueillir du feedback
4. Implémentation progressive :
   • Sprint 1 : Zone 1 (Top bar) + Zone 2a (Slash menu)
   • Sprint 2 : Zone 2b (Bubble menu) + Zone 3 (Quick insert)
   • Sprint 3 : Zone 4 (AI Panel) + Zone 5 (Drag & drop)
5. Intégration IA — Brancher le backend AI existant (backend/ai_routes.py) au panel et au bubble menu

---

📚 Références

• Tiptap Editor Documentation
• Novel.sh — Notion-style Editor
• Notion — Onboarding & Editor Design
• Medium — Design Blog
• Dropbox Paper
• Radix UI Primitives
• ProseMirror