Mise en place du picker d'image pour la partie header / illustration des fiches personnage

Migration pour l'ancienne partie des fiches perso vers les nouvelles pages
Vue retravaillée pour les fiches perso

web/src/app/campaigns/npc/npc-edit/npc-edit.component.html

@@ -35,19 +35,26 @@
       />
     </div>
 
-    <div class="field-row">
-      <div class="field">
-        <label>Portrait (ID image)</label>
-        <input type="text" [(ngModel)]="portraitImageId" name="portraitImageId" placeholder="ID de l'image portrait" />
+    <div class="field-row image-row">
+      <div class="field portrait-field">
+        <label>Portrait</label>
+        <app-single-image-picker
+          [imageId]="portraitImageId"
+          aspectRatio="1 / 1"
+          hint="Carre conseille (400×400)."
+          (imageIdChange)="portraitImageId = $event">
+        </app-single-image-picker>
       </div>
-      <div class="field">
-        <label>Bandeau / Header (ID image)</label>
-        <input type="text" [(ngModel)]="headerImageId" name="headerImageId" placeholder="ID de l'image bandeau" />
+      <div class="field header-field">
+        <label>Bandeau / Header</label>
+        <app-single-image-picker
+          [imageId]="headerImageId"
+          aspectRatio="3 / 1"
+          hint="Format paysage conseille (1200×400)."
+          (imageIdChange)="headerImageId = $event">
+        </app-single-image-picker>
       </div>
     </div>
-    <p class="hint">
-      Les portraits et bandeaux acceptent un ID d'image (MVP). Picker visuel a venir.
-    </p>
 
     <div class="template-fields">
       <app-dynamic-fields-form

web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts

@@ -6,9 +6,10 @@ import { LucideAngularModule, Save, ArrowLeft, Drama, Trash2, Sparkles } from 'l
 import { NpcService } from '../../../services/npc.service';
 import { CampaignService } from '../../../services/campaign.service';
 import { GameSystemService } from '../../../services/game-system.service';
-import { TemplateField } from '../../../services/template-field.model';
+import { TemplateField } from '../../../services/template.model';
 import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-drawer.component';
 import { DynamicFieldsFormComponent } from '../../../shared/dynamic-fields-form/dynamic-fields-form.component';
+import { SingleImagePickerComponent } from '../../../shared/single-image-picker/single-image-picker.component';
 
 /**
  * Editeur plein ecran d'une fiche de PNJ.
@@ -19,7 +20,7 @@ import { DynamicFieldsFormComponent } from '../../../shared/dynamic-fields-form/
 @Component({
   selector: 'app-npc-edit',
   standalone: true,
-  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent],
+  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
   templateUrl: './npc-edit.component.html',
   styleUrls: ['./npc-edit.component.scss']
 })
@@ -43,8 +44,8 @@ export class NpcEditComponent implements OnInit {
   npcId: string | null = null;
 
   name = '';
-  portraitImageId = '';
-  headerImageId = '';
+  portraitImageId: string | null = null;
+  headerImageId: string | null = null;
   values: Record<string, string> = {};
   imageValues: Record<string, string[]> = {};
   templateFields: TemplateField[] = [];
@@ -71,8 +72,8 @@ export class NpcEditComponent implements OnInit {
       this.service.getById(this.npcId).subscribe({
         next: (n) => {
           this.name = n.name;
-          this.portraitImageId = n.portraitImageId ?? '';
-          this.headerImageId = n.headerImageId ?? '';
+          this.portraitImageId = n.portraitImageId ?? null;
+          this.headerImageId = n.headerImageId ?? null;
           this.values = n.values ?? {};
           this.imageValues = n.imageValues ?? {};
           this.order = n.order ?? 0;
@@ -102,8 +103,8 @@ export class NpcEditComponent implements OnInit {
     if (!this.name.trim() || !this.campaignId) return;
     const payload = {
       name: this.name.trim(),
-      portraitImageId: this.portraitImageId.trim() || null,
-      headerImageId: this.headerImageId.trim() || null,
+      portraitImageId: this.portraitImageId,
+      headerImageId: this.headerImageId,
       values: this.values,
       imageValues: this.imageValues,
       campaignId: this.campaignId

web/src/app/campaigns/npc/npc-view/npc-view.component.html

@@ -0,0 +1,28 @@
+<div class="nv-page">
+  <div class="nv-toolbar">
+    <button class="btn-back" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour
+    </button>
+    <span class="spacer"></span>
+    <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen" *ngIf="npcId">
+      <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+      Assistant IA
+    </button>
+    <button class="btn-edit" (click)="edit()">
+      <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
+      Editer
+    </button>
+  </div>
+
+  <app-persona-view [persona]="npc" [templateFields]="templateFields"></app-persona-view>
+</div>
+
+<app-ai-chat-drawer
+  *ngIf="npcId && campaignId"
+  [campaignId]="campaignId"
+  entityType="npc"
+  [entityId]="npcId"
+  [isOpen]="chatOpen"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>

web/src/app/campaigns/npc/npc-view/npc-view.component.scss

@@ -0,0 +1,51 @@
+.nv-page {
+  padding: 16px 0 48px;
+  min-height: 100vh;
+}
+
+.nv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 32px 16px;
+  max-width: 1100px;
+  margin: 0 auto;
+
+  .spacer { flex: 1; }
+}
+
+.btn-back,
+.btn-edit,
+.btn-ai {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  color: #d1d5db;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 120ms;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fff;
+  }
+}
+
+.btn-edit {
+  border-color: rgba(209, 168, 120, 0.4);
+  color: #d1a878;
+
+  &:hover {
+    background: rgba(209, 168, 120, 0.15);
+  }
+}
+
+.btn-ai.active {
+  background: rgba(168, 85, 247, 0.2);
+  border-color: rgba(168, 85, 247, 0.5);
+  color: #d8b4fe;
+}

web/src/app/campaigns/npc/npc-view/npc-view.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+import { LucideAngularModule, ArrowLeft, Edit3, Sparkles } from 'lucide-angular';
+import { NpcService } from '../../../services/npc.service';
+import { CampaignService } from '../../../services/campaign.service';
+import { GameSystemService } from '../../../services/game-system.service';
+import { TemplateField } from '../../../services/template.model';
+import { Npc } from '../../../services/npc.model';
+import { PersonaViewComponent } from '../../../shared/persona-view/persona-view.component';
+import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-drawer.component';
+
+/**
+ * Vue lecture seule "WorldAnvil" d'une fiche PNJ.
+ * Route : /campaigns/:campaignId/npcs/:npcId
+ */
+@Component({
+  selector: 'app-npc-view',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
+  templateUrl: './npc-view.component.html',
+  styleUrls: ['./npc-view.component.scss']
+})
+export class NpcViewComponent implements OnInit {
+  readonly ArrowLeft = ArrowLeft;
+  readonly Edit3 = Edit3;
+  readonly Sparkles = Sparkles;
+
+  campaignId: string | null = null;
+  npcId: string | null = null;
+
+  npc: Npc | null = null;
+  templateFields: TemplateField[] = [];
+
+  chatOpen = false;
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private service: NpcService,
+    private campaignService: CampaignService,
+    private gameSystemService: GameSystemService
+  ) {}
+
+  ngOnInit(): void {
+    const params = this.route.snapshot.paramMap;
+    this.campaignId = params.get('campaignId');
+    this.npcId = params.get('npcId');
+    if (this.npcId) {
+      this.service.getById(this.npcId).subscribe({
+        next: n => { this.npc = n; },
+        error: () => this.back()
+      });
+    }
+    if (this.campaignId) {
+      this.campaignService.getCampaignById(this.campaignId).subscribe(camp => {
+        if (camp.gameSystemId) {
+          this.gameSystemService.getById(camp.gameSystemId).subscribe(gs => {
+            this.templateFields = gs.npcTemplate ?? [];
+          });
+        }
+      });
+    }
+  }
+
+  edit(): void {
+    if (this.campaignId && this.npcId) {
+      this.router.navigate(['/campaigns', this.campaignId, 'npcs', this.npcId, 'edit']);
+    }
+  }
+
+  back(): void {
+    if (this.campaignId) {
+      this.router.navigate(['/campaigns', this.campaignId]);
+    } else {
+      this.router.navigate(['/campaigns']);
+    }
+  }
+}