ObsiViewer/docs/URL_STATE/URL_DEEP_LINK_FIX.md

🔧 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

// 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

# 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