ObsiViewer/docs/BOOKMARKS_QUICK_START.md

🎯 Quick Start - Bookmarks Feature v2.0.0

Démarrage rapide (5 minutes)

1. Lancer l'application

# Terminal 1: Builder l'application
npm run build

# Terminal 2: Lancer le serveur
node server/index.mjs

# Ouvrir dans le navigateur
# http://localhost:4000

2. Naviguer vers les Bookmarks

• Desktop: Cliquer sur l'icône 📑 dans la barre latérale gauche
• Mobile: Sélectionner "Favoris" dans le menu

---

🎬 Démo des nouvelles fonctionnalités

✨ Feature 1: Basename au lieu du path complet

Test rapide:

1. Ouvrir un fichier (ex: vault/folder/document.md)
2. Cliquer sur l'icône bookmark dans la toolbar de la note
3. NE PAS remplir le champ "Title"
4. Cliquer sur "Save"
5. Résultat: Le bookmark affiche "document.md" (pas "folder/document.md")

---

🗑️ Feature 2: Bouton Supprimer

Test rapide:

1. Ajouter un bookmark pour n'importe quel fichier
2. Rouvrir ce même fichier
3. Cliquer à nouveau sur l'icône bookmark
4. Résultat: Un bouton rouge "Delete" apparaît à gauche
5. Cliquer sur "Delete" pour retirer le bookmark

---

🎯 Feature 3: Drop to root zone

Test rapide:

1. Créer un groupe (bouton "+ Group")
2. Ajouter un bookmark dans ce groupe
3. Glisser-déposer le bookmark vers la zone bleue "Drop here to move to root" en haut
4. Résultat: Le bookmark est maintenant à la racine (hors du groupe)

---

🔄 Feature 4: Drag & drop hiérarchique

Test rapide:

1. Créer 2 groupes: "Groupe A" et "Groupe B"
2. Ajouter un bookmark dans Groupe A
3. Glisser-déposer ce bookmark dans Groupe B
4. Résultat: Le bookmark se déplace de A vers B

Test de cycle (important):

1. Créer Groupe A
2. Créer Groupe B dans Groupe A (hiérarchie: A → B)
3. Tenter de glisser Groupe A dans Groupe B
4. Résultat: L'opération est bloquée (cycle détecté)

---

💾 Feature 5: Sauvegarde atomique

Test rapide:

1. Ajouter un bookmark
2. Attendre 1 seconde (auto-save)
3. Aller dans vault/.obsidian/
4. Résultat:
   • bookmarks.json existe
   • bookmarks.json.bak existe (backup automatique)

---

🧪 Tests essentiels (10 minutes)

Checklist de validation

- [ ] Basename affiché (pas de path complet)
- [ ] Bouton Delete apparaît si bookmark existe
- [ ] Zone "Drop to root" fonctionne et highlight
- [ ] Drag entre groupes fonctionne
- [ ] Réordonnancement dans un groupe fonctionne
- [ ] Cycles détectés et bloqués
- [ ] Fichier .bak créé automatiquement
- [ ] Modifications visibles après reload
- [ ] Thème dark/light respecté
- [ ] Responsive sur mobile (tester avec DevTools)

---

📖 Scénarios d'utilisation

Scénario 1: Organisation par projet

📂 Projets
  ├─ 📂 Projet A
  │   ├─ 📄 plan.md
  │   └─ 📄 notes.md
  ├─ 📂 Projet B
  │   └─ 📄 specs.md
  └─ 📄 backlog.md

Actions:

• Créer les groupes "Projet A" et "Projet B"
• Ajouter les fichiers dans chaque groupe
• Drag & drop pour réorganiser

Scénario 2: Nettoyage de bookmarks

Problème: J'ai ajouté "test.md" par erreur

Solution:

1. Ouvrir test.md
2. Cliquer sur bookmark icon
3. Cliquer sur "Delete" (rouge)
4. Confirmer → Bookmark supprimé partout

Scénario 3: Déplacement vers la racine

Problème: Un bookmark est dans le mauvais groupe

Solution:

1. Drag le bookmark
2. Drop dans la zone bleue "Drop here to move to root"
3. Le bookmark est maintenant à la racine

---

🚨 Points d'attention

⚠️ Drag & drop désactivé pendant la recherche

Si vous tapez dans la barre de recherche, le drag & drop est automatiquement désactivé (pour éviter les conflits).

Solution: Effacer la recherche (bouton ✕) pour réactiver le drag.

⚠️ Modification depuis Obsidian

Si vous modifiez bookmarks.json directement dans Obsidian pendant qu'ObsiViewer est ouvert:

1. ObsiViewer détectera un conflit
2. Une modal apparaîtra avec 2 options:
   • Reload: Recharger depuis le fichier (perd vos modifications locales)
   • Overwrite: Écraser le fichier avec vos modifications

Recommandation: Choisir "Reload" si vous n'êtes pas sûr.

⚠️ Backup automatique

Le fichier .bak est écrasé à chaque sauvegarde. Il ne conserve que la dernière version.

Si vous voulez un historique complet, utilisez Git pour versionner vault/.obsidian/bookmarks.json.

---

🔧 Dépannage

Problème: Le drag & drop ne fonctionne pas

Causes possibles:

1. Recherche active → Effacer la barre de recherche
2. Cache du navigateur → Recharger avec Ctrl+F5
3. Erreur JS → Ouvrir DevTools (F12) et vérifier la console

Problème: Les modifications ne sont pas sauvegardées

Vérifications:

1. Observer l'indicateur "Saving..." (en haut du panneau)
2. Vérifier que vous n'êtes pas en mode "read-only"
3. Vérifier les permissions du dossier vault/.obsidian/

Problème: Bookmarks dupliqués

Solution:

1. Ouvrir vault/.obsidian/bookmarks.json
2. Vérifier s'il y a des ctime identiques
3. Si oui, recharger l'app → elle corrigera automatiquement

---

📚 Documentation complète

Pour aller plus loin:

• BOOKMARKS_TECHNICAL.md: Documentation technique détaillée (1100+ lignes)
• BOOKMARKS_TEST_PLAN.md: Plan de tests complet (18 tests)
• BOOKMARKS_CHANGELOG.md: Liste de tous les changements
• BOOKMARKS_IMPLEMENTATION.md: État d'avancement du projet

---

🎨 Captures d'écran attendues

Vue normale

┌─────────────────────────────┐
│ Bookmarks            [+ Group] │
│ ┌─────────────────────────┐ │
│ │ Search...          [✕] │ │
│ └─────────────────────────┘ │
│                              │
│ [Drop here to move to root]  │ ← Zone bleue
│                              │
│ 📂 Mes Projets         [2]   │
│   📄 document.md             │ ← Basename seulement
│   📄 notes.md                │
│                              │
│ 📄 readme.md                 │
└─────────────────────────────┘

Modal avec Delete

┌─────────────────────────────┐
│ Add bookmark            [✕] │
│                              │
│ Path: notes/test.md          │
│ Title: Ma note de test       │
│ Group: Root (no group) ▼     │
│                              │
│ [Delete]      [Cancel] [Save] │ ← Delete à gauche
└─────────────────────────────┘

Pendant le drag

┌─────────────────────────────┐
│ [Drop here to move to root]  │ ← Highlight bleu intense
│                              │
│ 📂 Groupe A          [1]     │ ← Bordure bleue
│   📄 document.md [dragging]  │ ← Semi-transparent
│                              │
│ 📂 Groupe B          [0]     │
│   [Drop items here]          │
└─────────────────────────────┘

---

🎯 Objectif final

Après ces tests, vous devriez pouvoir:

✅ Créer une hiérarchie complexe de bookmarks
✅ Réorganiser facilement par drag & drop
✅ Supprimer des bookmarks depuis la modal
✅ Voir des noms de fichiers clairs (pas de paths complets)
✅ Être confiant que les données sont sauvegardées de manière atomique
✅ Travailler avec Obsidian sans conflit

Temps estimé pour maîtriser: 15 minutes

---

💡 Trucs & Astuces

Astuce 1: Keyboard shortcuts

• Alt + R: Ouvrir la vue raw (markdown brut)
• Alt + D: Télécharger la note courante
• (Drag & drop clavier: à venir)

Astuce 2: Organisation recommandée

📂 📌 Important         (bookmarks urgents)
📂 🔥 En cours          (projets actifs)
📂 📚 Documentation     (référence)
📂 💡 Idées             (brainstorming)
📂 ✅ Archive           (terminé)

Astuce 3: Backup manuel

Avant une grosse réorganisation:

cp vault/.obsidian/bookmarks.json vault/.obsidian/bookmarks.backup.json

---

Version: 2.0.0
Dernière mise à jour: 2025-01-30
Support: Voir BOOKMARKS_TECHNICAL.md pour le dépannage avancé