Migration Angular 20 -> 21 : fin de la migration securite (0 vulnerabilite npm)

- ng update @angular/core@21 @angular/cli@21 (corrige GHSA-jrmj-c5cx-3cw6, XSS SVG)
- Migration automatique des templates vers le control flow natif (@if/@for, 138 fichiers)
- Correction des 5 `track` invalides generes par la migration (trackBy a 1 argument
  -> track $index) + suppression des fonctions trackBy mortes
- TypeScript 5.9, zone.js 0.15 ; npm audit : 0 vulnerabilite

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app/sidebar/sidebar.component.html

@@ -18,29 +18,28 @@
   </div>
 
   <!-- Mode contextuel : liste des lores ou campagnes -->
-  <ng-container *ngIf="layoutConfig$ | async as config">
+  @if (layoutConfig$ | async; as config) {
     <div class="context-list">
-      <button
-        class="context-item"
-        *ngFor="let item of config.globalItems"
-        [class.active]="isActive(item.route)"
-        (click)="navigateTo(item.route)">
-        {{ item.name }}
-      </button>
+      @for (item of config.globalItems; track item) {
+        <button
+          class="context-item"
+          [class.active]="isActive(item.route)"
+          (click)="navigateTo(item.route)">
+          {{ item.name }}
+        </button>
+      }
     </div>
-
     <div class="spacer"></div>
-
     <button class="btn-back-all" (click)="navigateTo(config.globalBackRoute)">
       <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
       <span>{{ config.globalBackLabel }}</span>
     </button>
-  </ng-container>
+  }
 
   <!-- Mode normal : spacer + outils -->
-  <ng-container *ngIf="!(layoutConfig$ | async)">
+  @if (!(layoutConfig$ | async)) {
     <div class="spacer"></div>
-  </ng-container>
+  }
 
   <div class="tools-section">
     <p class="tools-label">OUTILS</p>
@@ -53,15 +52,21 @@
       <lucide-icon [img]="Dices" [size]="16"></lucide-icon>
       <span>Systèmes de JDR</span>
     </button>
-    <button class="tool-btn" *ngIf="!config.demoMode">
-      <lucide-icon [img]="Download" [size]="16"></lucide-icon>
-      <span>Export VTT</span>
-    </button>
-    <button class="tool-btn" *ngIf="!config.demoMode" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
-      <lucide-icon [img]="Settings" [size]="16"></lucide-icon>
-      <span>Paramètres</span>
-      <span class="update-badge" *ngIf="updateAvailable$ | async" title="Mise a jour disponible">MAJ</span>
-    </button>
+    @if (!config.demoMode) {
+      <button class="tool-btn">
+        <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+        <span>Export VTT</span>
+      </button>
+    }
+    @if (!config.demoMode) {
+      <button class="tool-btn" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
+        <lucide-icon [img]="Settings" [size]="16"></lucide-icon>
+        <span>Paramètres</span>
+        @if (updateAvailable$ | async) {
+          <span class="update-badge" title="Mise a jour disponible">MAJ</span>
+        }
+      </button>
+    }
   </div>
 
   <div class="sidebar-footer">

web/src/app/sidebar/sidebar.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AsyncPipe, NgIf, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Router } from '@angular/router';
 import { LucideAngularModule, Search, Download, Settings, ArrowLeft, Dices } from 'lucide-angular';
 import { LayoutService } from '../services/layout.service';
@@ -12,7 +12,7 @@ import packageJson from '../../../package.json';
 
 @Component({
     selector: 'app-sidebar',
-    imports: [AsyncPipe, NgIf, NgFor, LucideAngularModule],
+    imports: [AsyncPipe, LucideAngularModule],
     templateUrl: './sidebar.component.html',
     styleUrls: ['./sidebar.component.scss']
 })