Ajout de tests playwright et correction de tests non passant (pour les tests ajoutés : partie game system ).

Correction de plusieurs anomalies : problème de switch entre 2 templates (par exemple si on était sur un template 1 et qu'on voulait passer directement au 2, ce dernier ne chargeait pas) ;
correction du soucis d'apparition de la sidebar à gauche qui disparaissait sans explication ; problème de redirection : lorsqu'on terminait de créer un PJ / PNJ ; on arrivait sur l'accueil de la campagne au lieu de voir le résultat de la création.
Problème de redirection également lors du clique sur un PNJ / PJ sur le coté : on arrivait sur l'édition au lieu de la présentation. Correction de la première lettre stylisée : tout est au même style comme ça plus de probleme de lecture.

Nouveautées : stylisation des modales (notamment suppression, warning.....) avec en prime l'ajout d'un warning lors du changement de système pour avertir que les fiches persos ne sont pas conservées.
Ajout d'une option pour créer un game system directement à la création d'une campagne afin de faciliter la mise en place de cette dernière.
Ajout d'un bouton pour créer un nouveau template directement lorsqu'on créer une page : ça permet de créer un template et de revenir sur la page qu'on était en train de créer sans perdre le titre.

Passage en bêta 0.8.4

web/e2e/fixtures/api.ts

@@ -355,3 +355,55 @@ export async function getTemplateById(
   expect(res.ok(), `GET /api/templates/${templateId} -> ${res.status()}`).toBeTruthy();
   return res.json();
 }
+
+// ─────────────── GameSystem ───────────────
+
+export interface SeededGameSystem {
+  id: string;
+  name: string;
+}
+
+export async function seedGameSystem(
+  request: APIRequestContext,
+  opts: { name?: string; description?: string; author?: string; rulesMarkdown?: string } = {},
+): Promise<SeededGameSystem> {
+  const name = opts.name ?? `E2E GameSystem ${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+  const res = await request.post('/api/game-systems', {
+    data: {
+      name,
+      description: opts.description ?? null,
+      author: opts.author ?? null,
+      rulesMarkdown: opts.rulesMarkdown ?? null,
+      characterTemplate: [],
+      npcTemplate: [],
+      isPublic: false,
+    },
+  });
+  expect(res.ok(), `POST /api/game-systems -> ${res.status()}`).toBeTruthy();
+  const gs = await res.json();
+  return { id: gs.id, name };
+}
+
+export async function deleteGameSystem(
+  request: APIRequestContext,
+  id: string,
+): Promise<void> {
+  // Best-effort : ignore 404 si déjà supprimé par le test (ex: delete spec).
+  await request.delete(`/api/game-systems/${id}`);
+}
+
+export async function getGameSystemById(
+  request: APIRequestContext,
+  id: string,
+): Promise<{
+  id: string;
+  name: string;
+  description: string | null;
+  author: string | null;
+  rulesMarkdown: string | null;
+  isPublic: boolean;
+}> {
+  const res = await request.get(`/api/game-systems/${id}`);
+  expect(res.ok(), `GET /api/game-systems/${id} -> ${res.status()}`).toBeTruthy();
+  return res.json();
+}

web/e2e/tests/campaign/arc-delete.spec.ts

@@ -24,10 +24,12 @@ test.describe('Arc delete', () => {
     page,
     request,
   }) => {
-    page.on('dialog', (dialog) => dialog.accept());
-
     await page.goto(`/campaigns/${campaign.id}/arcs/${arc.id}/edit`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
 
     await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}$`));
 
@@ -36,10 +38,12 @@ test.describe('Arc delete', () => {
   });
 
   test('keeps the arc when confirm is dismissed', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.dismiss());
-
     await page.goto(`/campaigns/${campaign.id}/arcs/${arc.id}/edit`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
 
     await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}/arcs/${arc.id}/edit$`));
 

web/e2e/tests/campaign/arc-edit.spec.ts

@@ -38,6 +38,10 @@ test.describe('Arc edit', () => {
     };
 
     await page.goto(`/campaigns/${campaign.id}/arcs/${arc.id}/edit`);
+    // Attend que le formulaire soit prerempli par le ngOnInit (HTTP async) avant
+    // de fill — sinon le patchValue du load arrive APRES nos fills et ecrase
+    // les valeurs, le test echoue alors a la verif persisted.name.
+    await expect(page.getByLabel(/Titre de l'arc/i)).toHaveValue(arc.name);
 
     await page.getByLabel(/Titre de l'arc/i).fill(newName);
     await page.getByLabel(/Synopsis de l'arc/i).fill(values.description);

web/e2e/tests/campaign/campaign-delete.spec.ts

@@ -16,10 +16,12 @@ test.describe('Campaign delete', () => {
     page,
     request,
   }) => {
-    page.on('dialog', (dialog) => dialog.accept());
-
     await page.goto(`/campaigns/${campaign.id}`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
 
     await expect(page).toHaveURL(/\/campaigns$/);
 
@@ -28,10 +30,12 @@ test.describe('Campaign delete', () => {
   });
 
   test('keeps the campaign when confirm is dismissed', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.dismiss());
-
     await page.goto(`/campaigns/${campaign.id}`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
 
     await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}$`));
 

web/e2e/tests/campaign/npc-create.spec.ts

@@ -17,20 +17,22 @@ test.describe('NPC creation', () => {
     if (campaign?.id) await deleteCampaign(request, campaign.id);
   });
 
-  test('creates an NPC and redirects back to the campaign', async ({ page, request }) => {
+  test('creates an NPC and redirects to the NPC detail page', async ({ page, request }) => {
+    // Note : depuis la refonte 2026-04-30 les fiches PNJ utilisent des champs
+    // templates dynamiques pilotes par le GameSystem (plus de markdownContent
+    // libre). La campagne seedee n'a pas de GameSystem donc on ne fill que le
+    // nom — c'est suffisant pour valider la creation + la redirection.
     const npcName = `Borin le forgeron ${Date.now()}`;
-    const markdown = '# Borin\n\n**Faction :** Clan Feuillefer\n\nNain barbu au regard perçant.';
 
     await page.goto(`/campaigns/${campaign.id}/npcs/create`);
     await expect(page.getByRole('heading', { name: /Nouveau PNJ/i })).toBeVisible();
 
     await page.getByLabel(/Nom du PNJ/i).fill(npcName);
-    await page.getByLabel(/Fiche \(markdown\)/i).fill(markdown);
 
     await page.getByRole('button', { name: /^Créer$/i }).click();
 
-    // Retour à la page campagne après création
-    await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}$`));
+    // Redirection vers la fiche du PNJ après création
+    await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}/npcs/\\d+$`));
 
     // Persistance vérifiée via API
     const npcs = await getNpcsByCampaign(request, campaign.id);
@@ -58,7 +60,7 @@ test.describe('NPC creation', () => {
     await page.getByLabel(/Nom du PNJ/i).fill(npcName);
     await page.getByRole('button', { name: /^Créer$/i }).click();
 
-    await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}$`));
+    await expect(page).toHaveURL(new RegExp(`/campaigns/${campaign.id}/npcs/\\d+$`));
 
     // Le nœud "PNJ" doit apparaître dans la sidebar avec le nouveau PNJ.
     // On clique sur le nœud PNJ pour le déplier au cas où il serait fermé,

web/e2e/tests/campaign/npc-edit.spec.ts

@@ -14,19 +14,19 @@ test.describe('NPC edit', () => {
 
   test.beforeEach(async ({ request }) => {
     campaign = await seedCampaign(request);
-    npc = await seedNpc(request, {
-      campaignId: campaign.id,
-      markdownContent: '# Initial\n\nFiche de départ.',
-    });
+    npc = await seedNpc(request, { campaignId: campaign.id });
   });
 
   test.afterEach(async ({ request }) => {
     if (campaign?.id) await deleteCampaign(request, campaign.id);
   });
 
-  test('edits name + markdown content and persists via API', async ({ page, request }) => {
+  test('edits name and persists via API', async ({ page, request }) => {
+    // Note : depuis la refonte 2026-04-30 les fiches PNJ utilisent des champs
+    // templates dynamiques pilotes par le GameSystem, plus le markdownContent
+    // libre. La campagne seedee n'a pas de GameSystem donc pas de champs
+    // dynamiques a tester ici — on se contente du nom (champ universel).
     const newName = `${npc.name} (renommé)`;
-    const newMarkdown = '# Borin réécrit\n\n**Statut :** Disparu\n\nDes traces dans la neige...';
 
     await page.goto(`/campaigns/${campaign.id}/npcs/${npc.id}/edit`);
 
@@ -34,7 +34,6 @@ test.describe('NPC edit', () => {
     await expect(page.getByLabel(/Nom du PNJ/i)).toHaveValue(npc.name);
 
     await page.getByLabel(/Nom du PNJ/i).fill(newName);
-    await page.getByLabel(/Fiche \(markdown\)/i).fill(newMarkdown);
 
     await page.getByRole('button', { name: /^Enregistrer$/i }).click();
 
@@ -43,7 +42,6 @@ test.describe('NPC edit', () => {
 
     const persisted = await getNpcById(request, npc.id);
     expect(persisted.name).toBe(newName);
-    expect(persisted.markdownContent).toBe(newMarkdown);
   });
 
   test('save button is disabled when name is cleared', async ({ page }) => {

web/e2e/tests/game-system/game-system-create.spec.ts

@@ -0,0 +1,74 @@
+import { test, expect } from '@playwright/test';
+import { deleteGameSystem } from '../../fixtures/api';
+
+test.describe('GameSystem creation', () => {
+  // Les game systems crees par les tests sont nettoyes via cet array — chaque
+  // test pousse les IDs qu'il a crees pour qu'on les supprime en afterEach.
+  const createdIds: string[] = [];
+
+  test.afterEach(async ({ request }) => {
+    while (createdIds.length) {
+      const id = createdIds.pop()!;
+      await deleteGameSystem(request, id);
+    }
+  });
+
+  test('creates a game system and redirects to the list', async ({ page, request }) => {
+    const gsName = `Système E2E ${Date.now()}`;
+    const description = 'Système créé par les tests automatisés.';
+    const author = 'Playwright';
+
+    await page.goto('/game-systems');
+    await expect(page.getByRole('heading', { name: /Systèmes de JDR/i })).toBeVisible();
+
+    // Carte "Nouveau système" → ouvre l'editeur en mode creation.
+    await page.locator('.gs-card.card-new').click();
+    await expect(page).toHaveURL(/\/game-systems\/create$/);
+    await expect(page.getByRole('heading', { name: /Nouveau système de JDR/i })).toBeVisible();
+
+    await page.getByLabel(/^Nom/i).fill(gsName);
+    await page.getByLabel(/Description courte/i).fill(description);
+    await page.getByLabel(/Auteur/i).fill(author);
+
+    await page.getByRole('button', { name: /^Créer$/i }).click();
+
+    // Redirection vers la liste apres creation.
+    await expect(page).toHaveURL(/\/game-systems$/);
+    // Et la carte du nouveau systeme est visible dans la grille.
+    await expect(page.locator('.gs-card', { hasText: gsName })).toBeVisible();
+
+    // Verification API : le systeme est bien persistant.
+    const all = await request.get('/api/game-systems').then((r) => r.json());
+    const created = all.find((gs: { id: string; name: string }) => gs.name === gsName);
+    expect(created).toBeDefined();
+    expect(created.author).toBe(author);
+    createdIds.push(created.id);
+  });
+
+  test('submit button is disabled when name is empty', async ({ page }) => {
+    await page.goto('/game-systems/create');
+
+    const submit = page.getByRole('button', { name: /^Créer$/i });
+    await expect(submit).toBeDisabled();
+
+    await page.getByLabel(/^Nom/i).fill('Quelque chose');
+    await expect(submit).toBeEnabled();
+
+    await page.getByLabel(/^Nom/i).fill('   ');
+    await expect(submit).toBeDisabled();
+  });
+
+  test('cancel returns to the list without creating', async ({ page, request }) => {
+    const abandoned = `Système abandonné ${Date.now()}`;
+
+    await page.goto('/game-systems/create');
+    await page.getByLabel(/^Nom/i).fill(abandoned);
+
+    await page.getByRole('button', { name: /^Annuler$/i }).click();
+    await expect(page).toHaveURL(/\/game-systems$/);
+
+    // Rien n'a ete cree cote API.
+    const all = await request.get('/api/game-systems').then((r) => r.json());
+    expect(all.find((gs: { name: string }) => gs.name === abandoned)).toBeUndefined();
+  });
+});

web/e2e/tests/game-system/game-system-delete.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+import {
+  seedGameSystem,
+  deleteGameSystem,
+  type SeededGameSystem,
+} from '../../fixtures/api';
+
+test.describe('GameSystem delete', () => {
+  let gs: SeededGameSystem;
+
+  test.beforeEach(async ({ request }) => {
+    gs = await seedGameSystem(request);
+  });
+
+  test.afterEach(async ({ request }) => {
+    // Best-effort cleanup — ne fait rien si deja supprime par le test.
+    if (gs?.id) await deleteGameSystem(request, gs.id);
+  });
+
+  test('deletes a game system after confirming and removes it from the list', async ({
+    page,
+    request,
+  }) => {
+    await page.goto('/game-systems');
+
+    const card = page.locator('.gs-card', { hasText: gs.name });
+    await expect(card).toBeVisible();
+
+    // Bouton corbeille dans le coin de la carte du systeme seede.
+    await card.locator('.icon-btn').click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toContainText(gs.name);
+
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
+
+    // La carte disparait apres reload de la liste.
+    await expect(page.locator('.gs-card', { hasText: gs.name })).toHaveCount(0);
+
+    const res = await request.get(`/api/game-systems/${gs.id}`);
+    expect(res.status()).toBe(404);
+  });
+
+  test('keeps the game system when cancel is clicked', async ({ page, request }) => {
+    await page.goto('/game-systems');
+
+    const card = page.locator('.gs-card', { hasText: gs.name });
+    await expect(card).toBeVisible();
+    await card.locator('.icon-btn').click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
+
+    // La carte est toujours la, le systeme est toujours en base.
+    await expect(page.locator('.gs-card', { hasText: gs.name })).toBeVisible();
+    const res = await request.get(`/api/game-systems/${gs.id}`);
+    expect(res.ok()).toBeTruthy();
+  });
+});

web/e2e/tests/game-system/game-system-edit.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import {
+  seedGameSystem,
+  deleteGameSystem,
+  getGameSystemById,
+  type SeededGameSystem,
+} from '../../fixtures/api';
+
+test.describe('GameSystem edit', () => {
+  let gs: SeededGameSystem;
+
+  test.beforeEach(async ({ request }) => {
+    gs = await seedGameSystem(request, {
+      description: 'Description initiale.',
+      author: 'Auteur initial',
+    });
+  });
+
+  test.afterEach(async ({ request }) => {
+    if (gs?.id) await deleteGameSystem(request, gs.id);
+  });
+
+  test('form is prefilled with the game system data', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+
+    await expect(page.getByRole('heading', { name: /Éditer le système/i })).toBeVisible();
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+    await expect(page.getByLabel(/Description courte/i)).toHaveValue('Description initiale.');
+    await expect(page.getByLabel(/Auteur/i)).toHaveValue('Auteur initial');
+  });
+
+  test('edits name and description and persists them to API', async ({ page, request }) => {
+    const newName = `${gs.name} renamed`;
+    const newDescription = 'Description mise à jour par le test.';
+
+    await page.goto(`/game-systems/${gs.id}/edit`);
+
+    // Attente que le formulaire soit prerempli avant de fill — sinon le load
+    // async ecrase les valeurs filled (cf. bug arc-edit corrige).
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    await page.getByLabel(/^Nom/i).fill(newName);
+    await page.getByLabel(/Description courte/i).fill(newDescription);
+
+    await page.getByRole('button', { name: /^Enregistrer$/i }).click();
+
+    // Retour a la liste apres save.
+    await expect(page).toHaveURL(/\/game-systems$/);
+
+    const persisted = await getGameSystemById(request, gs.id);
+    expect(persisted.name).toBe(newName);
+    expect(persisted.description).toBe(newDescription);
+  });
+
+  test('save button is disabled when name is cleared', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const nameField = page.getByLabel(/^Nom/i);
+    const saveBtn = page.getByRole('button', { name: /^Enregistrer$/i });
+
+    await expect(saveBtn).toBeEnabled();
+    await nameField.fill('');
+    await expect(saveBtn).toBeDisabled();
+    await nameField.fill('OK');
+    await expect(saveBtn).toBeEnabled();
+  });
+});

web/e2e/tests/game-system/game-system-sections.spec.ts

@@ -0,0 +1,111 @@
+import { test, expect } from '@playwright/test';
+import {
+  seedGameSystem,
+  deleteGameSystem,
+  type SeededGameSystem,
+} from '../../fixtures/api';
+
+test.describe('GameSystem rule sections editor', () => {
+  let gs: SeededGameSystem;
+
+  test.beforeEach(async ({ request }) => {
+    // On part d'un GameSystem vide (pas de regles seedees) — chaque test gere
+    // ses propres ajouts pour eviter les couplages.
+    gs = await seedGameSystem(request);
+  });
+
+  test.afterEach(async ({ request }) => {
+    if (gs?.id) await deleteGameSystem(request, gs.id);
+  });
+
+  test('adds a suggested section, fills it, and persists it', async ({ page, request }) => {
+    const sectionContent = 'Initiative à d20, action+bonus+mouvement, dégâts par dés.';
+
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    // Attendre le chargement du form (nom prerempli).
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    // Empty state visible tant qu'aucune section n'est ajoutee.
+    await expect(page.locator('.section-list .empty-hint')).toBeVisible();
+
+    // Ajout via la chip suggeree "Combat".
+    await page.locator('.add-row .chip', { hasText: 'Combat' }).click();
+
+    // Une section-card est apparue avec titre "Combat" prerempli + textarea visible.
+    const card = page.locator('.section-card').first();
+    await expect(card).toBeVisible();
+    await expect(card.locator('.section-title-input')).toHaveValue('Combat');
+    await card.locator('.section-content').fill(sectionContent);
+
+    // Save + retour a la liste.
+    await page.getByRole('button', { name: /^Enregistrer$/i }).click();
+    await expect(page).toHaveURL(/\/game-systems$/);
+
+    // Verification cote API : le markdown contient bien la section + son contenu.
+    const persisted = await request.get(`/api/game-systems/${gs.id}`).then((r) => r.json());
+    expect(persisted.rulesMarkdown).toContain('## Combat');
+    expect(persisted.rulesMarkdown).toContain(sectionContent);
+  });
+
+  test('disables a suggested chip after it has been used', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const combatChip = page.locator('.add-row .chip', { hasText: 'Combat' });
+    await expect(combatChip).toBeEnabled();
+
+    await combatChip.click();
+
+    // Apres ajout, la chip "Combat" est desactivee (suggestion deja utilisee).
+    await expect(combatChip).toBeDisabled();
+  });
+
+  test('adds a custom blank section via "Autre…" and lets the user name it', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    await page.locator('.add-row .chip-custom', { hasText: /Autre/i }).click();
+
+    // Section vierge ajoutee : titre vide, prete a remplir.
+    const card = page.locator('.section-card').first();
+    await expect(card).toBeVisible();
+    const titleInput = card.locator('.section-title-input');
+    await expect(titleInput).toHaveValue('');
+    await titleInput.fill('Sorts');
+    await expect(titleInput).toHaveValue('Sorts');
+  });
+
+  test('removes a section', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    await page.locator('.add-row .chip', { hasText: 'Combat' }).click();
+    await page.locator('.add-row .chip', { hasText: 'Classes' }).click();
+
+    await expect(page.locator('.section-card')).toHaveCount(2);
+
+    // Supprime la premiere section (Combat).
+    await page.locator('.section-card').first().locator('.btn-remove').click();
+    await expect(page.locator('.section-card')).toHaveCount(1);
+    await expect(page.locator('.section-card').first().locator('.section-title-input')).toHaveValue('Classes');
+  });
+
+  test('collapses and expands a section', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    await page.locator('.add-row .chip', { hasText: 'Combat' }).click();
+    const card = page.locator('.section-card').first();
+
+    // Par defaut deployee : textarea visible.
+    await expect(card.locator('.section-content')).toBeVisible();
+
+    // Clic sur le bouton collapse → textarea masquee.
+    await card.locator('.btn-collapse').click();
+    await expect(card.locator('.section-content')).toHaveCount(0);
+
+    // Re-clic → re-deployee.
+    await card.locator('.btn-collapse').click();
+    await expect(card.locator('.section-content')).toBeVisible();
+  });
+});

web/e2e/tests/game-system/game-system-templates.spec.ts

@@ -0,0 +1,151 @@
+import { test, expect, Page } from '@playwright/test';
+import {
+  seedGameSystem,
+  deleteGameSystem,
+  type SeededGameSystem,
+} from '../../fixtures/api';
+
+/**
+ * Tests du composant <app-template-fields-editor> dans le contexte GameSystem.
+ *
+ * Le composant est instancie DEUX fois sur la page d'edition d'un GameSystem
+ * (une fois pour PJ "characterTemplate", une fois pour PNJ "npcTemplate"), donc
+ * les selecteurs doivent etre scopes a l'instance ciblee. On utilise un helper
+ * `tfe(label)` qui renvoie le locator de l'editeur correspondant au titre.
+ */
+test.describe('GameSystem template fields editor (PJ / PNJ)', () => {
+  let gs: SeededGameSystem;
+
+  test.beforeEach(async ({ request }) => {
+    gs = await seedGameSystem(request);
+  });
+
+  test.afterEach(async ({ request }) => {
+    if (gs?.id) await deleteGameSystem(request, gs.id);
+  });
+
+  /** Helper : retourne le locator de l'editeur de templates par son label. */
+  const tfe = (page: Page, label: 'PJ' | 'PNJ') =>
+    page.locator('.tfe').filter({ hasText: `Champs de la fiche ${label}` });
+
+  test('adds a suggested field to the PJ template and persists it', async ({ page, request }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const pjEditor = tfe(page, 'PJ');
+    await expect(pjEditor).toBeVisible();
+
+    // Ajout de "Histoire" via la chip suggeree.
+    await pjEditor.locator('.tfe-add .chip', { hasText: 'Histoire' }).click();
+
+    // Une row apparait avec le nom prerempli.
+    const row = pjEditor.locator('.tfe-item').first();
+    await expect(row).toBeVisible();
+    await expect(row.locator('.tfe-name')).toHaveValue('Histoire');
+
+    // Save → retour a la liste.
+    await page.getByRole('button', { name: /^Enregistrer$/i }).click();
+    await expect(page).toHaveURL(/\/game-systems$/);
+
+    // Verification API : le champ est bien dans characterTemplate.
+    const persisted = await request.get(`/api/game-systems/${gs.id}`).then((r) => r.json());
+    expect(persisted.characterTemplate).toEqual(
+      expect.arrayContaining([expect.objectContaining({ name: 'Histoire' })]),
+    );
+    // npcTemplate non touche (toujours vide).
+    expect(persisted.npcTemplate ?? []).toHaveLength(0);
+  });
+
+  test('adds a custom NUMBER field via "Nombre" chip', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const pjEditor = tfe(page, 'PJ');
+    await pjEditor.locator('.tfe-add .chip-custom', { hasText: 'Nombre' }).click();
+
+    const row = pjEditor.locator('.tfe-item').first();
+    await expect(row).toBeVisible();
+    // Champ vide, nom a remplir, type "NUMBER" pre-selectionne dans le select.
+    await expect(row.locator('.tfe-name')).toHaveValue('');
+    await expect(row.locator('.tfe-type')).toHaveValue('NUMBER');
+
+    await row.locator('.tfe-name').fill('Points de vie');
+    await expect(row.locator('.tfe-name')).toHaveValue('Points de vie');
+  });
+
+  test('PJ and PNJ editors are independent (adding to one does not affect the other)', async ({
+    page,
+    request,
+  }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    await tfe(page, 'PJ').locator('.tfe-add .chip', { hasText: 'Histoire' }).click();
+    await tfe(page, 'PNJ').locator('.tfe-add .chip', { hasText: 'Motivation' }).click();
+
+    await expect(tfe(page, 'PJ').locator('.tfe-item')).toHaveCount(1);
+    await expect(tfe(page, 'PNJ').locator('.tfe-item')).toHaveCount(1);
+    await expect(tfe(page, 'PJ').locator('.tfe-item').first().locator('.tfe-name')).toHaveValue('Histoire');
+    await expect(tfe(page, 'PNJ').locator('.tfe-item').first().locator('.tfe-name')).toHaveValue('Motivation');
+
+    await page.getByRole('button', { name: /^Enregistrer$/i }).click();
+    await expect(page).toHaveURL(/\/game-systems$/);
+
+    const persisted = await request.get(`/api/game-systems/${gs.id}`).then((r) => r.json());
+    expect(persisted.characterTemplate).toEqual(
+      expect.arrayContaining([expect.objectContaining({ name: 'Histoire' })]),
+    );
+    expect(persisted.npcTemplate).toEqual(
+      expect.arrayContaining([expect.objectContaining({ name: 'Motivation' })]),
+    );
+  });
+
+  test('removes a field from the template', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const pjEditor = tfe(page, 'PJ');
+    await pjEditor.locator('.tfe-add .chip', { hasText: 'Histoire' }).click();
+    await pjEditor.locator('.tfe-add .chip', { hasText: 'Apparence' }).click();
+
+    await expect(pjEditor.locator('.tfe-item')).toHaveCount(2);
+
+    // Supprime le premier champ (Histoire) via son btn-remove.
+    await pjEditor.locator('.tfe-item').first().locator('.btn-remove').click();
+    await expect(pjEditor.locator('.tfe-item')).toHaveCount(1);
+    await expect(pjEditor.locator('.tfe-item').first().locator('.tfe-name')).toHaveValue('Apparence');
+  });
+
+  test('reorders fields with the up arrow button', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const pjEditor = tfe(page, 'PJ');
+    await pjEditor.locator('.tfe-add .chip', { hasText: 'Histoire' }).click();
+    await pjEditor.locator('.tfe-add .chip', { hasText: 'Apparence' }).click();
+
+    // Ordre initial : Histoire, Apparence.
+    let rows = pjEditor.locator('.tfe-item');
+    await expect(rows.nth(0).locator('.tfe-name')).toHaveValue('Histoire');
+    await expect(rows.nth(1).locator('.tfe-name')).toHaveValue('Apparence');
+
+    // Monte Apparence d'un cran.
+    await rows.nth(1).locator('.btn-arrow').first().click();
+
+    rows = pjEditor.locator('.tfe-item');
+    await expect(rows.nth(0).locator('.tfe-name')).toHaveValue('Apparence');
+    await expect(rows.nth(1).locator('.tfe-name')).toHaveValue('Histoire');
+  });
+
+  test('disables a suggested chip after the field has been added', async ({ page }) => {
+    await page.goto(`/game-systems/${gs.id}/edit`);
+    await expect(page.getByLabel(/^Nom/i)).toHaveValue(gs.name);
+
+    const pjEditor = tfe(page, 'PJ');
+    const histoireChip = pjEditor.locator('.tfe-add .chip', { hasText: 'Histoire' });
+
+    await expect(histoireChip).toBeEnabled();
+    await histoireChip.click();
+    await expect(histoireChip).toBeDisabled();
+  });
+});

web/e2e/tests/lore/lore-delete.spec.ts

@@ -17,32 +17,31 @@ test.describe('Lore delete', () => {
     page,
     request,
   }) => {
-    let confirmMessage = '';
-    page.on('dialog', async (dialog) => {
-      confirmMessage = dialog.message();
-      await dialog.accept();
-    });
-
     await page.goto(`/lore/${seeded.id}`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
 
-    // Attente du dialog et du retour sur la liste des lores.
-    await expect(page).toHaveURL(/\/lore$/);
-    expect(confirmMessage).toContain(seeded.name);
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await expect(dialog).toContainText(seeded.name);
     // Lore contient un dossier seedé : le récapitulatif doit l'indiquer.
-    expect(confirmMessage).toMatch(/1 dossier/i);
+    await expect(dialog).toContainText(/1 dossier/i);
+
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
+
+    // Attente du retour sur la liste des lores.
+    await expect(page).toHaveURL(/\/lore$/);
 
     const res = await request.get(`/api/lores/${seeded.id}`);
     expect(res.status()).toBe(404);
   });
 
   test('keeps the lore when the confirm is dismissed', async ({ page, request }) => {
-    page.on('dialog', async (dialog) => {
-      await dialog.dismiss();
-    });
-
     await page.goto(`/lore/${seeded.id}`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
 
     // On reste sur le détail, le titre du lore est toujours visible.
     await expect(page.locator('.detail-header h1')).toHaveText(seeded.name);

web/e2e/tests/lore/page-delete.spec.ts

@@ -32,10 +32,12 @@ test.describe('Page delete', () => {
   });
 
   test('deletes the page after accepting confirm', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.accept());
-
     await page.goto(`/lore/${seeded.id}/pages/${pageEntity.id}/edit`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
 
     // Le composant redirige vers la racine du Lore après suppression.
     await expect(page).toHaveURL(new RegExp(`/lore/${seeded.id}$`));
@@ -45,10 +47,12 @@ test.describe('Page delete', () => {
   });
 
   test('keeps the page when confirm is dismissed', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.dismiss());
-
     await page.goto(`/lore/${seeded.id}/pages/${pageEntity.id}/edit`);
-    await page.getByRole('button', { name: /^Supprimer$/i }).click();
+    await page.getByRole('button', { name: /^Supprimer$/i }).first().click();
+
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
 
     await expect(page).toHaveURL(new RegExp(`/lore/${seeded.id}/pages/${pageEntity.id}/edit$`));
 

web/e2e/tests/lore/template-delete.spec.ts

@@ -25,11 +25,13 @@ test.describe('Template delete', () => {
   });
 
   test('deletes the template after accepting confirm', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.accept());
-
     await page.goto(`/lore/${seeded.id}/templates/${template.id}`);
     await page.locator('.page-header .btn-danger').click();
 
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Supprimer$/i }).click();
+
     await expect(page).toHaveURL(new RegExp(`/lore/${seeded.id}$`));
 
     const templates = await getTemplatesForLore(request, seeded.id);
@@ -37,11 +39,13 @@ test.describe('Template delete', () => {
   });
 
   test('keeps the template when confirm is dismissed', async ({ page, request }) => {
-    page.on('dialog', (dialog) => dialog.dismiss());
-
     await page.goto(`/lore/${seeded.id}/templates/${template.id}`);
     await page.locator('.page-header .btn-danger').click();
 
+    const dialog = page.getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: /^Annuler$/i }).click();
+
     // On reste sur l'écran d'édition (l'URL ne change pas).
     await expect(page).toHaveURL(new RegExp(`/lore/${seeded.id}/templates/${template.id}$`));