ObsiViewer/docs/URL_STATE/URL_DEEP_LINK_FIX.md
Bruno Charest b1da9b111d feat: reorganize context menu documentation into docs folder
- Moved CONTEXT_MENU_INDEX.md and CONTEXT_MENU_VERIFICATION.md into docs/ directory for better organization
- Consolidated all context menu documentation files in one location for easier maintenance
- Documentation remains complete with 1000+ lines covering implementation, integration, and verification

The change improves documentation structure by moving context menu related files into a dedicated docs folder, making it easier for developers to find an
2025-10-25 20:17:10 -04:00

120 lines
4.0 KiB
Markdown

# 🔧 Fix: URL State Deep-Linking Issue
## 🐛 Problème Identifié
**L'URL changeait correctement lors des interactions utilisateur, mais ouvrir une URL directement dans un nouveau navigateur n'ouvrait pas la note au bon endroit.**
### Cause Racine
- Les effects dans `AppComponent` se déclenchaient avant que le vault soit chargé
- `UrlStateService.currentNote()` retournait `null` car `vaultService.allNotes()` était vide
- Après l'initialisation du vault, les effects ne se re-déclenchaient pas
## ✅ Solution Appliquée
### Ajout d'un 4ème Effect dans AppComponent
```typescript
// Effect: Re-evaluate URL state when vault is loaded
// This ensures URL parameters are processed after vault initialization
effect(() => {
const notes = this.vaultService.allNotes();
if (notes.length > 0) {
// Force re-evaluation of URL state
const currentNote = this.urlState.currentNote();
const currentTag = this.urlState.activeTag();
const currentSearch = this.urlState.activeSearch();
// Trigger URL note effect if URL contains note parameter
if (currentNote && currentNote.id !== this.selectedNoteId()) {
this.selectNote(currentNote.id);
}
// Trigger URL tag effect if URL contains tag parameter
if (currentTag) {
const currentSearchTerm = this.sidebarSearchTerm();
const expectedSearch = `tag:${currentTag}`;
if (currentSearchTerm !== expectedSearch) {
this.handleTagClick(currentTag);
}
}
// Trigger URL search effect if URL contains search parameter
if (currentSearch !== null && this.sidebarSearchTerm() !== currentSearch) {
this.sidebarSearchTerm.set(currentSearch);
}
}
});
```
### Fonctionnement
1. **Au démarrage**: Effects normaux se déclenchent (vault pas chargé → rien ne se passe)
2. **Après vault chargé**: Ce 4ème effect détecte `vaultService.allNotes().length > 0`
3. **Ré-évaluation**: Force la ré-évaluation des paramètres URL existants
4. **Actions**: Appelle `selectNote()`, `handleTagClick()`, etc. avec les vraies données
## 🧪 Test de Validation
### Prérequis
```bash
# Terminal 1: Backend
node server/index.mjs
# Terminal 2: Frontend
npm run dev
```
### Tests à Effectuer
#### Test 1: Deep-link Note
1. Ouvrir: `http://localhost:3000/?note=Allo-3/test-new-file.md`
2. **Attendu**: Note `test-new-file.md` s'ouvre automatiquement
3. **Résultat**: ✅ / ❌
#### Test 2: Deep-link Tag
1. Ouvrir: `http://localhost:3000/?tag=home`
2. **Attendu**: Vue recherche avec filtre `tag:home`
3. **Résultat**: ✅ / ❌
#### Test 3: Deep-link Dossier
1. Ouvrir: `http://localhost:3000/?folder=Allo-3`
2. **Attendu**: Liste filtrée par dossier `Allo-3`
3. **Résultat**: ✅ / ❌
#### Test 4: Deep-link Recherche
1. Ouvrir: `http://localhost:3000/?search=home`
2. **Attendu**: Barre de recherche remplie avec "home"
3. **Résultat**: ✅ / ❌
#### Test 5: Combinaison
1. Ouvrir: `http://localhost:3000/?folder=Allo-3&note=Allo-3/test-new-file.md`
2. **Attendu**: Dossier filtré + note ouverte
3. **Résultat**: ✅ / ❌
### Test de Régression
1. Cliquer normalement sur une note → URL change
2. Copier l'URL → Ouvrir dans nouvel onglet
3. **Attendu**: Même note ouverte dans les deux onglets
4. **Résultat**: ✅ / ❌
## 📊 Résultats Attendus
Après la correction, toutes les URLs deep-link doivent fonctionner:
-**Deep-link note**: `?note=Allo-3/test-new-file.md`
-**Deep-link tag**: `?tag=home`
-**Deep-link folder**: `?folder=Allo-3`
-**Deep-link search**: `?search=home`
-**Combinaisons**: `?folder=X&note=Y`, `?tag=X&search=Y`
-**Back/forward**: Navigation navigateur
-**Reload**: Rechargement page
-**New tab**: Ouverture dans nouvel onglet
## 🔧 Fichiers Modifiés
-`src/app.component.ts` - Ajout du 4ème effect pour la ré-évaluation post-vault
## 🎯 Status
**Status**: ✅ **FIXÉ ET COMPILÉ**
**Test requis**: Vérifier les URLs deep-link dans un navigateur
**Impact**: Aucun breaking change, amélioration seulement