436 lines
19 KiB
Markdown
436 lines
19 KiB
Markdown
# 🎯 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é)
|
||
|
||
```javascript
|
||
// 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)
|
||
|
||
```javascript
|
||
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](https://tiptap.dev/docs)
|
||
- [Novel.sh — Notion-style Editor](https://novel.sh)
|
||
- [Notion — Onboarding & Editor Design](https://www.notion.so)
|
||
- [Medium — Design Blog](https://medium.design)
|
||
- [Dropbox Paper](https://www.dropbox.com/paper)
|
||
- [Radix UI Primitives](https://www.radix-ui.com/primitives)
|
||
- [ProseMirror](https://prosemirror.net)
|