ObsiViewer/docs/URL_STATE/URL_STATE_QUICK_START.md

# UrlStateService - Démarrage Rapide (5 minutes)

## 🚀 En 5 minutes

### Étape 1: Injecter le service dans AppComponent (1 min)

```typescript
// src/app/app.component.ts
import { Component, inject } from '@angular/core';
import { UrlStateService } from './services/url-state.service';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `...`
})
export class AppComponent {
  private urlStateService = inject(UrlStateService);
  // C'est tout! Le service s'initialise automatiquement
}
```

### Étape 2: Utiliser dans NotesListComponent (2 min)

```typescript
// src/app/features/list/notes-list.component.ts
import { Component, inject } from '@angular/core';
import { UrlStateService } from '../../services/url-state.service';

@Component({
  selector: 'app-notes-list',
  standalone: true,
  template: `
    <!-- Afficher le filtre actif -->
    <div *ngIf="urlState.activeTag() as tag">
      Filtre: #{{ tag }}
    </div>
    
    <!-- Ouvrir une note -->
    <button *ngFor="let note of notes"
            (click)="selectNote(note)">
      {{ note.title }}
    </button>
  `
})
export class NotesListComponent {
  urlState = inject(UrlStateService);
  
  selectNote(note: Note): void {
    this.urlState.openNote(note.filePath);
  }
}
```

### Étape 3: Tester les URLs (2 min)

Ouvrez votre navigateur et testez:

```
# Ouvrir une note
http://localhost:4200/viewer?note=Docs/Architecture.md

# Filtrer par tag
http://localhost:4200/viewer?tag=Ideas

# Filtrer par dossier
http://localhost:4200/viewer?folder=Notes/Meetings

# Rechercher
http://localhost:4200/viewer?search=performance
```

## ✅ Vérification

- [ ] Le service est injecté dans AppComponent
- [ ] NotesListComponent utilise le service
- [ ] Les URLs fonctionnent
- [ ] L'état est restauré après rechargement

## 📚 Prochaines étapes

1. **Lire la documentation complète**
   - `docs/URL_STATE_SERVICE_INTEGRATION.md`

2. **Voir les exemples**
   - `src/app/components/url-state-integration-examples.ts`

3. **Intégrer dans d'autres composants**
   - NoteViewComponent
   - FoldersComponent
   - TagsComponent
   - SearchComponent

4. **Ajouter le partage de lien**
   ```typescript
   async shareCurrentState(): Promise<void> {
     await this.urlState.copyCurrentUrlToClipboard();
     this.toast.success('Lien copié!');
   }
   ```

## 🎯 Cas d'usage courants

### Ouvrir une note
```typescript
await this.urlState.openNote('Docs/Architecture.md');
```

### Filtrer par tag
```typescript
await this.urlState.filterByTag('Ideas');
```

### Filtrer par dossier
```typescript
await this.urlState.filterByFolder('Notes/Meetings');
```

### Rechercher
```typescript
await this.urlState.updateSearch('performance');
```

### Réinitialiser
```typescript
await this.urlState.resetState();
```

## 🔍 Signaux disponibles

```typescript
// État actuel
urlState.currentState()

// Note ouverte
urlState.currentNote()

// Tag actif
urlState.activeTag()

// Dossier actif
urlState.activeFolder()

// Quick link actif
urlState.activeQuickLink()

// Recherche active
urlState.activeSearch()
```

## 🐛 Troubleshooting

### L'URL ne change pas
```typescript
// ❌ Mauvais
this.currentTag = 'Ideas';

// ✅ Correct
await this.urlState.filterByTag('Ideas');
```

### La note n'est pas trouvée
Vérifiez le chemin exact:
```typescript
console.log(this.vault.allNotes().map(n => n.filePath));
```

### L'état n'est pas restauré
Assurez-vous que le service est injecté dans AppComponent.

## 📞 Besoin d'aide?

- Consultez `docs/URL_STATE_SERVICE_INTEGRATION.md`
- Vérifiez les exemples dans `src/app/components/url-state-integration-examples.ts`
- Exécutez les tests: `ng test --include='**/url-state.service.spec.ts'`

## 🎉 Vous êtes prêt!

Le service est maintenant intégré et fonctionnel. Continuez avec la documentation complète pour découvrir toutes les fonctionnalités.