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