Bruno Charest
96745e9997
- Added UrlStateService to sync app state with URL parameters for note selection, tags, folders, and search - Implemented URL state effects in AppComponent to handle navigation from URL parameters - Updated sidebar and layout components to reflect URL state changes in UI - Added URL state updates when navigating via note selection, tag clicks, and search - Modified note sharing to use URL parameters instead of route paths - Added auto-opening of relevant
120 lines
4.0 KiB
Markdown
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¬e=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¬e=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
|