Mise en ligne de la version 0.2.0

web/src/app/shared/global-search/global-search.component.html

@@ -0,0 +1,51 @@
+<div class="gs-overlay" *ngIf="open" (click)="close()">
+  <div class="gs-modal" (click)="$event.stopPropagation()">
+
+    <div class="gs-input-row">
+      <lucide-icon [img]="Search" [size]="18" class="gs-search-icon"></lucide-icon>
+      <input
+        #searchInput
+        type="text"
+        class="gs-input"
+        placeholder="Rechercher dans LoreMind..."
+        [ngModel]="query"
+        (ngModelChange)="onQueryChange($event)" />
+      <span class="gs-kbd">ESC</span>
+    </div>
+
+    <div class="gs-results" *ngIf="results.length > 0">
+      <button
+        *ngFor="let r of results; let i = index"
+        class="gs-result"
+        [class.active]="i === activeIndex"
+        (mouseenter)="activeIndex = i"
+        (click)="select(r)">
+        <lucide-icon [img]="iconFor(r.kind)" [size]="16" class="gs-result-icon"></lucide-icon>
+        <div class="gs-result-body">
+          <div class="gs-result-title">{{ r.title }}</div>
+          <div class="gs-result-subtitle" *ngIf="r.subtitle">{{ r.subtitle }}</div>
+          <div class="gs-result-tag">{{ r.tag }}</div>
+        </div>
+      </button>
+    </div>
+
+    <div class="gs-empty" *ngIf="!loading && query.trim().length >= 2 && results.length === 0">
+      Aucun résultat
+    </div>
+    <div class="gs-empty" *ngIf="query.trim().length < 2">
+      Tape au moins 2 caractères
+    </div>
+
+    <div class="gs-footer">
+      <div class="gs-hints">
+        <span><kbd>↑</kbd><kbd>↓</kbd> naviguer</span>
+        <span><kbd>↵</kbd> sélectionner</span>
+        <span><kbd>ESC</kbd> fermer</span>
+      </div>
+      <span class="gs-count" *ngIf="results.length > 0">
+        {{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}
+      </span>
+    </div>
+
+  </div>
+</div>

web/src/app/shared/global-search/global-search.component.scss

@@ -0,0 +1,118 @@
+.gs-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 10vh;
+}
+
+.gs-modal {
+  width: min(640px, 92vw);
+  background: #1f2232;
+  border: 1px solid #2d3145;
+  border-radius: 12px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gs-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #2d3145;
+}
+
+.gs-search-icon { color: #6b7280; flex-shrink: 0; }
+
+.gs-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #e5e7eb;
+  font-size: 1rem;
+
+  &::placeholder { color: #6b7280; }
+}
+
+.gs-kbd,
+.gs-hints kbd {
+  background: #2d3145;
+  color: #9ca3af;
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  border: 1px solid #3a3f55;
+  font-family: inherit;
+}
+
+.gs-results {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.gs-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  background: transparent;
+  border: none;
+  color: #e5e7eb;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+
+  &.active { background: rgba(99, 102, 241, 0.18); }
+}
+
+.gs-result-icon { color: #9ca3af; margin-top: 2px; flex-shrink: 0; }
+
+.gs-result-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.gs-result-title { font-weight: 600; color: #e5e7eb; }
+.gs-result-subtitle {
+  color: #9ca3af;
+  font-size: 0.85rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.gs-result-tag {
+  color: #6b7280;
+  font-size: 0.75rem;
+  margin-top: 0.15rem;
+}
+
+.gs-empty {
+  padding: 1.5rem;
+  text-align: center;
+  color: #6b7280;
+  font-size: 0.9rem;
+}
+
+.gs-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1.25rem;
+  border-top: 1px solid #2d3145;
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+
+.gs-hints {
+  display: flex;
+  gap: 1rem;
+
+  span { display: flex; align-items: center; gap: 0.3rem; }
+}

web/src/app/shared/global-search/global-search.component.ts

@@ -0,0 +1,216 @@
+import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { BehaviorSubject, Subject, forkJoin, of } from 'rxjs';
+import { catchError, debounceTime, distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
+import { LucideAngularModule, Search, BookOpen, Folder, Users, FileText, Scroll } from 'lucide-angular';
+import { GlobalSearchService } from '../../services/global-search.service';
+import { LoreService } from '../../services/lore.service';
+import { PageService } from '../../services/page.service';
+import { TemplateService } from '../../services/template.service';
+import { CampaignService } from '../../services/campaign.service';
+
+type ResultKind = 'lore' | 'node' | 'template' | 'page' | 'campaign';
+
+interface SearchResult {
+  id: string;
+  kind: ResultKind;
+  title: string;
+  subtitle: string;
+  /** Tag affiché sous le titre (ex: "Lore", "Dossier", "Template", "Page"). */
+  tag: string;
+  /** Route Angular (array pour router.navigate). */
+  route: any[];
+}
+
+/**
+ * Command palette globale (Ctrl+K / Cmd+K).
+ * Agrège 4 endpoints search (Lore, LoreNode, Template, Page) côté frontend.
+ * Navigation clavier : ↑↓ ↵ Esc.
+ */
+@Component({
+  selector: 'app-global-search',
+  standalone: true,
+  imports: [CommonModule, FormsModule, LucideAngularModule],
+  templateUrl: './global-search.component.html',
+  styleUrls: ['./global-search.component.scss']
+})
+export class GlobalSearchComponent implements OnInit, OnDestroy {
+  readonly Search = Search;
+  readonly BookOpen = BookOpen;
+  readonly Folder = Folder;
+  readonly Users = Users;
+  readonly FileText = FileText;
+  readonly Scroll = Scroll;
+
+  @ViewChild('searchInput') searchInput?: ElementRef<HTMLInputElement>;
+
+  open = false;
+  query = '';
+  loading = false;
+  results: SearchResult[] = [];
+  activeIndex = 0;
+
+  private readonly queryChanges$ = new BehaviorSubject<string>('');
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(
+    private globalSearch: GlobalSearchService,
+    private router: Router,
+    private loreService: LoreService,
+    private pageService: PageService,
+    private templateService: TemplateService,
+    private campaignService: CampaignService
+  ) {}
+
+  ngOnInit(): void {
+    this.globalSearch.open$.pipe(takeUntil(this.destroy$)).subscribe(open => {
+      this.open = open;
+      if (open) {
+        this.query = '';
+        this.results = [];
+        this.activeIndex = 0;
+        // focus après le tick de rendu (ngIf du template)
+        setTimeout(() => this.searchInput?.nativeElement.focus(), 0);
+      }
+    });
+
+    this.queryChanges$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      switchMap(q => {
+        const trimmed = q.trim();
+        if (trimmed.length < 2) {
+          this.loading = false;
+          return of<SearchResult[]>([]);
+        }
+        this.loading = true;
+        return forkJoin({
+          lores:     this.loreService.searchLores(trimmed).pipe(catchError(() => of([]))),
+          nodes:     this.loreService.searchLoreNodes(trimmed).pipe(catchError(() => of([]))),
+          templates: this.templateService.search(trimmed).pipe(catchError(() => of([]))),
+          pages:     this.pageService.search(trimmed).pipe(catchError(() => of([]))),
+          campaigns: this.campaignService.search(trimmed).pipe(catchError(() => of([])))
+        }).pipe(
+          switchMap(({ lores, nodes, templates, pages, campaigns }) => of(this.buildResults(lores, nodes, templates, pages, campaigns))),
+          catchError(() => of<SearchResult[]>([]))
+        );
+      }),
+      takeUntil(this.destroy$)
+    ).subscribe(results => {
+      this.results = results;
+      this.activeIndex = 0;
+      this.loading = false;
+    });
+  }
+
+  onQueryChange(value: string): void {
+    this.query = value;
+    this.queryChanges$.next(value);
+  }
+
+  /**
+   * Construit la liste unifiée. Ordre d'affichage : pages d'abord (le plus recherché),
+   * puis noeuds, templates, campagnes, et lores — les entités racines apparaissent en dernier.
+   */
+  private buildResults(
+    lores: any[], nodes: any[], templates: any[], pages: any[], campaigns: any[]
+  ): SearchResult[] {
+    const pageResults: SearchResult[] = pages.map(p => ({
+      id: p.id,
+      kind: 'page' as ResultKind,
+      title: p.title,
+      subtitle: p.notes ? this.firstLine(p.notes) : '',
+      tag: 'Page',
+      route: ['/lore', p.loreId, 'pages', p.id]
+    }));
+    const nodeResults: SearchResult[] = nodes.map(n => ({
+      id: n.id,
+      kind: 'node' as ResultKind,
+      title: n.name,
+      subtitle: '',
+      tag: 'Dossier',
+      route: ['/lore', n.loreId, 'folders', n.id, 'edit']
+    }));
+    const templateResults: SearchResult[] = templates.map(t => ({
+      id: t.id,
+      kind: 'template' as ResultKind,
+      title: t.name,
+      subtitle: t.description ?? '',
+      tag: 'Template',
+      route: ['/lore', t.loreId, 'templates', t.id]
+    }));
+    const loreResults: SearchResult[] = lores.map(l => ({
+      id: l.id,
+      kind: 'lore' as ResultKind,
+      title: l.name,
+      subtitle: l.description ?? '',
+      tag: 'Lore',
+      route: ['/lore', l.id]
+    }));
+    const campaignResults: SearchResult[] = campaigns.map(c => ({
+      id: c.id,
+      kind: 'campaign' as ResultKind,
+      title: c.name,
+      subtitle: c.description ?? '',
+      tag: 'Campagne',
+      route: ['/campaigns', c.id]
+    }));
+    return [...pageResults, ...nodeResults, ...templateResults, ...campaignResults, ...loreResults];
+  }
+
+  private firstLine(text: string): string {
+    const line = text.split('\n')[0] ?? '';
+    return line.length > 120 ? line.slice(0, 117) + '…' : line;
+  }
+
+  select(result: SearchResult): void {
+    this.router.navigate(result.route);
+    this.globalSearch.close();
+  }
+
+  close(): void {
+    this.globalSearch.close();
+  }
+
+  /** Raccourcis clavier globaux — actifs uniquement quand la modale est ouverte. */
+  @HostListener('document:keydown', ['$event'])
+  onKeydown(event: KeyboardEvent): void {
+    if (!this.open) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.close();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (this.results.length > 0) {
+        this.activeIndex = (this.activeIndex + 1) % this.results.length;
+      }
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (this.results.length > 0) {
+        this.activeIndex = (this.activeIndex - 1 + this.results.length) % this.results.length;
+      }
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const r = this.results[this.activeIndex];
+      if (r) this.select(r);
+    }
+  }
+
+  iconFor(kind: ResultKind) {
+    switch (kind) {
+      case 'lore': return this.BookOpen;
+      case 'node': return this.Folder;
+      case 'template': return this.Users;
+      case 'page': return this.FileText;
+      case 'campaign': return this.Scroll;
+      default: return this.FileText;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}