Mise en place de l'anglais comme deuxième langue pour l'application

web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.html

@@ -7,22 +7,22 @@
           <h1>{{ campaign.name }}</h1>
           <p class="description">{{ campaign.description }}</p>
           <div class="meta">
-            <span class="badge">{{ campaign.playerCount || 0 }} joueurs</span>
+            <span class="badge">{{ 'campaignDetail.players' | translate:{ n: campaign.playerCount || 0 } }}</span>
             <!-- Badge "Univers" : lien vers le Lore associé si présent -->
             @if (linkedLore) {
               <a
                 class="badge badge-lore"
                 [routerLink]="['/lore', linkedLore.id]"
-                title="Ouvrir l'univers associé">
+                [title]="'campaignDetail.openLinkedLore' | translate">
                 <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
                 {{ linkedLore.name }}
               </a>
             }
             <!-- Campagne liée à un Lore qui n'existe plus (supprimé ailleurs) -->
             @if (campaign.loreId && !linkedLore) {
-              <span class="badge badge-lore-missing" title="L'univers associé est introuvable">
+              <span class="badge badge-lore-missing" [title]="'campaignDetail.loreMissingTitle' | translate">
                 <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
-                Univers introuvable
+                {{ 'campaignDetail.loreMissing' | translate }}
               </span>
             }
           </div>
@@ -30,11 +30,11 @@
         <div class="header-actions">
           <button type="button" class="btn-secondary" (click)="startEdit()">
             <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-            Modifier
+            {{ 'common.edit' | translate }}
           </button>
           <button type="button" class="btn-danger" (click)="deleteCampaign()">
             <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-            Supprimer
+            {{ 'common.delete' | translate }}
           </button>
         </div>
       </div>
@@ -43,34 +43,34 @@
     @if (editing) {
       <div class="detail-header edit-mode">
         <div class="field">
-          <label>Nom</label>
+          <label>{{ 'common.name' | translate }}</label>
           <input type="text" [(ngModel)]="editName" name="editName" required />
         </div>
         <div class="field">
-          <label>Description</label>
+          <label>{{ 'common.description' | translate }}</label>
           <textarea [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
         </div>
         <div class="field">
-          <label>Univers associé</label>
+          <label>{{ 'campaignDetail.loreLabel' | translate }}</label>
           <select [(ngModel)]="editLoreId" name="editLoreId">
-            <option value="">— Aucun univers (campagne libre) —</option>
+            <option value="">{{ 'campaignDetail.noLoreOption' | translate }}</option>
             @for (lore of availableLores; track lore) {
               <option [value]="lore.id">{{ lore.name }}</option>
             }
           </select>
         </div>
         <div class="field">
-          <label>Système de JDR</label>
+          <label>{{ 'campaignDetail.gameSystemLabel' | translate }}</label>
           @if (!creatingGameSystem) {
             <select
               [(ngModel)]="editGameSystemId"
               name="editGameSystemId"
               (ngModelChange)="onEditGameSystemChange($event)">
-              <option value="">— Aucun (générique) —</option>
+              <option value="">{{ 'campaignDetail.noGameSystemOption' | translate }}</option>
               @for (gs of availableGameSystems; track gs) {
                 <option [value]="gs.id">{{ gs.name }}</option>
               }
-              <option [value]="CREATE_GAMESYSTEM_SENTINEL">+ Créer un nouveau système…</option>
+              <option [value]="CREATE_GAMESYSTEM_SENTINEL">{{ 'campaignDetail.createGameSystemOption' | translate }}</option>
             </select>
           }
           @if (creatingGameSystem) {
@@ -79,7 +79,7 @@
                 type="text"
                 [(ngModel)]="newGameSystemName"
                 name="newGameSystemName"
-                placeholder="Nom du nouveau système (ex: D&D 5e, Nimble, Maison)"
+                [placeholder]="'campaignDetail.gameSystemNamePlaceholder' | translate"
                 (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
                 (keydown.escape)="cancelCreateGameSystem()"
                 autofocus
@@ -89,10 +89,10 @@
                     [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
                     (click)="submitCreateGameSystem()">
                     <lucide-icon [img]="Check" [size]="14"></lucide-icon>
-                    Créer
+                    {{ 'common.create' | translate }}
                   </button>
                   <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
-                    Annuler
+                    {{ 'common.cancel' | translate }}
                   </button>
                 </div>
               </div>
@@ -100,10 +100,10 @@
           </div>
           <div class="header-actions">
             <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
-              Sauvegarder
+              {{ 'common.save' | translate }}
             </button>
             <button type="button" class="btn-secondary" (click)="cancelEdit()">
-              Annuler
+              {{ 'common.cancel' | translate }}
             </button>
           </div>
         </div>
@@ -111,7 +111,7 @@
       @if (!editing) {
         <section class="detail-section personas-section">
           <div class="section-header">
-            <h2>Personnages</h2>
+            <h2>{{ 'campaignDetail.charactersTitle' | translate }}</h2>
           </div>
           <!-- Les PJ ne sont plus rattachés à la campagne mais à une Partie (Playthrough) :
           ils se gèrent depuis la page d'une Partie. Ici on ne liste que les PNJ
@@ -121,14 +121,14 @@
             <div class="subsection-header">
               <h3>
                 <lucide-icon [img]="Drama" [size]="16"></lucide-icon>
-                Personnages non-joueurs
+                {{ 'campaignDetail.npcTitle' | translate }}
                 @if (npcs.length > 0) {
                   <span class="count-badge">{{ npcs.length }}</span>
                 }
               </h3>
               <button class="btn-add" (click)="createNpc()">
                 <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-                Nouveau PNJ
+                {{ 'campaignDetail.newNpc' | translate }}
               </button>
             </div>
             @if (npcs.length > 0) {
@@ -146,10 +146,10 @@
             }
             @if (npcs.length === 0) {
               <div class="empty-state empty-state--compact">
-                <p>Aucun PNJ pour le moment.</p>
+                <p>{{ 'campaignDetail.noNpc' | translate }}</p>
                 <button class="btn-add-first" (click)="createNpc()">
                   <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-                  Créer votre premier PNJ
+                  {{ 'campaignDetail.createFirstNpc' | translate }}
                 </button>
               </div>
             }
@@ -159,11 +159,11 @@
       @if (!editing) {
         <section class="detail-section arcs-section">
           <div class="section-header">
-            <h2>Arcs narratifs</h2>
+            <h2>{{ 'campaignDetail.arcsTitle' | translate }}</h2>
             <div class="section-header-actions">
               <button class="btn-add" (click)="createArc()">
                 <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-                Nouvel arc
+                {{ 'campaignDetail.newArc' | translate }}
               </button>
             </div>
           </div>
@@ -173,7 +173,7 @@
                 <div class="arc-card" (click)="openArc(arc)">
                   <lucide-icon [img]="Swords" [size]="24" class="arc-icon"></lucide-icon>
                   <span class="arc-name">{{ arc.name }}</span>
-                  <span class="arc-meta">{{ chapterCountByArc[arc.id!] || 0 }} chapitres</span>
+                  <span class="arc-meta">{{ 'campaignDetail.chapters' | translate:{ n: chapterCountByArc[arc.id!] || 0 } }}</span>
                 </div>
               }
             </div>
@@ -181,10 +181,10 @@
           @if (arcs.length === 0) {
             <div class="empty-state">
               <lucide-icon [img]="Swords" [size]="40" class="empty-icon"></lucide-icon>
-              <p>Aucun arc narratif pour le moment.</p>
+              <p>{{ 'campaignDetail.noArc' | translate }}</p>
               <button class="btn-add-first" (click)="createArc()">
                 <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-                Créer votre premier arc
+                {{ 'campaignDetail.createFirstArc' | translate }}
               </button>
             </div>
           }
@@ -196,11 +196,11 @@
           <div class="section-header">
             <h2>
               <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
-              Mes parties
+              {{ 'campaignDetail.playthroughsTitle' | translate }}
             </h2>
             <button class="btn-add" [disabled]="newPlaythroughInFlight" (click)="createPlaythrough()">
               <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-              Nouvelle partie
+              {{ 'campaignDetail.newPlaythrough' | translate }}
             </button>
           </div>
           @if (playthroughs.length > 0) {
@@ -221,7 +221,7 @@
           }
           @if (playthroughs.length === 0) {
             <div class="empty-state empty-state--compact">
-              <p>Aucune partie. Créez-en une pour démarrer une session avec une table.</p>
+              <p>{{ 'campaignDetail.noPlaythrough' | translate }}</p>
             </div>
           }
         </section>

web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, Dices, Drama, Check, Play, Upload, Sparkles } from 'lucide-angular';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Router, RouterLink } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { catchError, switchMap, filter, map } from 'rxjs/operators';
@@ -28,7 +29,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
 
 @Component({
     selector: 'app-campaign-detail',
-    imports: [FormsModule, LucideAngularModule, RouterLink],
+    imports: [FormsModule, LucideAngularModule, RouterLink, TranslatePipe],
     templateUrl: './campaign-detail.component.html',
     styleUrls: ['./campaign-detail.component.scss']
 })
@@ -101,7 +102,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     private playthroughService: PlaythroughService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService,
-    private confirmDialog: ConfirmDialogService
+    private confirmDialog: ConfirmDialogService,
+    private translate: TranslateService
   ) {}
 
   ngOnInit(): void {
@@ -216,7 +218,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
   createPlaythrough(): void {
     if (!this.campaign || this.newPlaythroughInFlight) return;
     this.newPlaythroughInFlight = true;
-    const defaultName = `Nouvelle partie ${this.playthroughs.length + 1}`;
+    const defaultName = this.translate.instant('campaignDetail.defaultPlaythroughName', { n: this.playthroughs.length + 1 });
     this.playthroughService.create({
       campaignId: this.campaign.id!,
       name: defaultName
@@ -275,7 +277,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
   }
 
   private showLayout(allCampaigns: Campaign[], data: CampaignTreeData): void {
-    this.layoutService.show(buildCampaignSidebarConfig(this.campaign!, allCampaigns, data, this.campaign!.id!));
+    this.layoutService.show(buildCampaignSidebarConfig(this.campaign!, allCampaigns, data, this.campaign!.id!, this.translate));
   }
 
   // ─────────────── Édition / suppression de la Campagne ───────────────
@@ -352,16 +354,14 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     if (gameSystemChanged && hasSheets) {
       const count = this.npcs.length;
       this.confirmDialog.confirm({
-        title: 'Changer le systeme de jeu ?',
-        message:
-          `Vous etes sur le point de changer le systeme de jeu de cette campagne. ` +
-          `Cela change egalement le template des fiches de PJ et PNJ.`,
+        title: this.translate.instant('campaignDetail.gameSystemChange.title'),
+        message: this.translate.instant('campaignDetail.gameSystemChange.message'),
         details: [
-          `${count} fiche(s) existante(s) sont liees au template du systeme actuel.`,
-          `Leurs champs ne s'afficheront plus avec le nouveau systeme.`,
-          `Les donnees restent stockees : revenir a l'ancien systeme les rendra a nouveau visibles.`
+          this.translate.instant('campaignDetail.gameSystemChange.detailSheets', { n: count }),
+          this.translate.instant('campaignDetail.gameSystemChange.detailFields'),
+          this.translate.instant('campaignDetail.gameSystemChange.detailStored')
         ],
-        confirmLabel: 'Changer quand meme',
+        confirmLabel: this.translate.instant('campaignDetail.gameSystemChange.confirm'),
         variant: 'warning'
       }).then(ok => { if (ok) this.persistEdit(newGameSystemId); });
       return;
@@ -400,20 +400,20 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     this.campaignService.getCampaignDeletionImpact(campaign.id!).subscribe({
       next: impact => {
         const parts: string[] = [];
-        if (impact.arcs > 0) parts.push(`${impact.arcs} arc${impact.arcs > 1 ? 's' : ''}`);
-        if (impact.chapters > 0) parts.push(`${impact.chapters} chapitre${impact.chapters > 1 ? 's' : ''}`);
-        if (impact.scenes > 0) parts.push(`${impact.scenes} scène${impact.scenes > 1 ? 's' : ''}`);
-        if (impact.playthroughs > 0) parts.push(`${impact.playthroughs} partie${impact.playthroughs > 1 ? 's' : ''} (avec ses PJ, sessions, faits)`);
+        if (impact.arcs > 0) parts.push(this.translate.instant(impact.arcs > 1 ? 'campaignDetail.delete.arcsPlural' : 'campaignDetail.delete.arcs', { n: impact.arcs }));
+        if (impact.chapters > 0) parts.push(this.translate.instant(impact.chapters > 1 ? 'campaignDetail.delete.chaptersPlural' : 'campaignDetail.delete.chapters', { n: impact.chapters }));
+        if (impact.scenes > 0) parts.push(this.translate.instant(impact.scenes > 1 ? 'campaignDetail.delete.scenesPlural' : 'campaignDetail.delete.scenes', { n: impact.scenes }));
+        if (impact.playthroughs > 0) parts.push(this.translate.instant(impact.playthroughs > 1 ? 'campaignDetail.delete.playthroughsPlural' : 'campaignDetail.delete.playthroughs', { n: impact.playthroughs }));
 
         const details: string[] = [];
-        if (parts.length) details.push(`Sera aussi supprime : ${parts.join(', ')}.`);
-        details.push('Cette action est irreversible.');
+        if (parts.length) details.push(this.translate.instant('campaignDetail.delete.alsoDeletes', { items: parts.join(', ') }));
+        details.push(this.translate.instant('campaignDetail.delete.irreversible'));
 
         this.confirmDialog.confirm({
-          title: 'Supprimer la campagne ?',
-          message: `Supprimer definitivement la campagne "${campaign.name}" ?`,
+          title: this.translate.instant('campaignDetail.delete.title'),
+          message: this.translate.instant('campaignDetail.delete.message', { name: campaign.name }),
+          confirmLabel: this.translate.instant('common.delete'),
           details,
-          confirmLabel: 'Supprimer',
           variant: 'danger'
         }).then(ok => {
           if (!ok) return;