303 lines
		
	
	
		
			8.4 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			303 lines
		
	
	
		
			8.4 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # 🎯 Quick Start - Bookmarks Feature v2.0.0
 | |
| 
 | |
| ## Démarrage rapide (5 minutes)
 | |
| 
 | |
| ### 1. Lancer l'application
 | |
| 
 | |
| ```bash
 | |
| # 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
 | |
| 
 | |
| ```markdown
 | |
| - [ ] 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:
 | |
| 
 | |
| ```bash
 | |
| 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é
 |