Migration Angular 18 -> 19 (ng update, standalone par defaut, build OK)

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

web/package.json

@@ -15,25 +15,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.14",
+    "@angular/animations": "^19.2.25",
-    "@angular/common": "^18.2.14",
+    "@angular/common": "^19.2.25",
-    "@angular/compiler": "^18.2.14",
+    "@angular/compiler": "^19.2.25",
-    "@angular/core": "^18.2.14",
+    "@angular/core": "^19.2.25",
-    "@angular/forms": "^18.2.14",
+    "@angular/forms": "^19.2.25",
-    "@angular/platform-browser": "^18.2.14",
+    "@angular/platform-browser": "^19.2.25",
-    "@angular/platform-browser-dynamic": "^18.2.14",
+    "@angular/platform-browser-dynamic": "^19.2.25",
-    "@angular/router": "^18.2.14",
+    "@angular/router": "^19.2.25",
     "dompurify": "^3.4.1",
     "lucide-angular": "^1.0.0",
     "marked": "^18.0.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.21",
+    "@angular-devkit/build-angular": "^19.2.27",
-    "@angular/cli": "^18.2.21",
+    "@angular/cli": "^19.2.27",
-    "@angular/compiler-cli": "^18.2.14",
+    "@angular/compiler-cli": "^19.2.25",
     "@playwright/test": "^1.59.1",
     "typescript": "~5.5.4"
   }

web/src/app/app.component.ts

@@ -11,20 +11,19 @@ import { GlobalSearchService } from './services/global-search.service';
 import { VersionCheckerService } from './services/version-checker.service';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  standalone: true,
+    imports: [
-  imports: [
+        RouterOutlet,
-    RouterOutlet,
+        SidebarComponent,
-    SidebarComponent,
+        SecondarySidebarComponent,
-    SecondarySidebarComponent,
+        GlobalSearchComponent,
-    GlobalSearchComponent,
+        UpdateBannerComponent,
-    UpdateBannerComponent,
+        ConfirmDialogHostComponent,
-    ConfirmDialogHostComponent,
+        AsyncPipe,
-    AsyncPipe,
+        NgIf,
-    NgIf,
+    ],
-  ],
+    templateUrl: './app.component.html',
-  templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
-  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   readonly sidebarConfig$ = this.layoutService.secondarySidebar$;

web/src/app/campaigns/arc/arc-create/arc-create.component.ts

@@ -19,11 +19,10 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  * le nombre d'arcs existants dans la campagne courante.
  */
 @Component({
-  selector: 'app-arc-create',
+    selector: 'app-arc-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    templateUrl: './arc-create.component.html',
-  templateUrl: './arc-create.component.html',
+    styleUrls: ['./arc-create.component.scss']
-  styleUrls: ['./arc-create.component.scss']
 })
 export class ArcCreateComponent implements OnInit, OnDestroy {
   readonly BookOpen = BookOpen;

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

@@ -32,11 +32,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * personnages / lieux / objets du Lore.
  */
 @Component({
-  selector: 'app-arc-edit',
+    selector: 'app-arc-edit',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
+    templateUrl: './arc-edit.component.html',
-  templateUrl: './arc-edit.component.html',
+    styleUrls: ['./arc-edit.component.scss']
-  styleUrls: ['./arc-edit.component.scss']
 })
 export class ArcEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;

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

@@ -24,11 +24,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Bouton "Modifier" → /campaigns/:campaignId/arcs/:arcId/edit
  */
 @Component({
-  selector: 'app-arc-view',
+    selector: 'app-arc-view',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
-  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    templateUrl: './arc-view.component.html',
-  templateUrl: './arc-view.component.html',
+    styleUrls: ['./arc-view.component.scss']
-  styleUrls: ['./arc-view.component.scss']
 })
 export class ArcViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;

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

@@ -21,11 +21,10 @@ export interface CampaignCreatePayload {
 }
 
 @Component({
-  selector: 'app-campaign-create',
+    selector: 'app-campaign-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, ReactiveFormsModule, FormsModule, LucideAngularModule],
+    templateUrl: './campaign-create.component.html',
-  templateUrl: './campaign-create.component.html',
+    styleUrls: ['./campaign-create.component.scss']
-  styleUrls: ['./campaign-create.component.scss']
 })
 export class CampaignCreateComponent implements OnInit {
   @Output() close = new EventEmitter<void>();

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

@@ -26,11 +26,10 @@ import { loadCampaignTreeData, buildCampaignSidebarConfig, CampaignTreeData } fr
 import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dialog.service';
 
 @Component({
-  selector: 'app-campaign-detail',
+    selector: 'app-campaign-detail',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink],
-  imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink],
+    templateUrl: './campaign-detail.component.html',
-  templateUrl: './campaign-detail.component.html',
+    styleUrls: ['./campaign-detail.component.scss']
-  styleUrls: ['./campaign-detail.component.scss']
 })
 export class CampaignDetailComponent implements OnInit, OnDestroy {
   readonly Swords = Swords;

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

@@ -46,11 +46,10 @@ interface ArcNode {
  * Rien n'est créé tant que l'utilisateur n'a pas validé « Créer dans la campagne ».
  */
 @Component({
-  selector: 'app-campaign-import',
+    selector: 'app-campaign-import',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './campaign-import.component.html',
-  templateUrl: './campaign-import.component.html',
+    styleUrls: ['./campaign-import.component.scss']
-  styleUrls: ['./campaign-import.component.scss']
 })
 export class CampaignImportComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/campaigns.component.ts

@@ -8,11 +8,10 @@ import { Campaign } from '../services/campaign.model';
 import { CampaignCreateComponent, CampaignCreatePayload } from './campaign/campaign-create/campaign-create.component';
 
 @Component({
-  selector: 'app-campaigns',
+    selector: 'app-campaigns',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, CampaignCreateComponent],
-  imports: [CommonModule, LucideAngularModule, CampaignCreateComponent],
+    templateUrl: './campaigns.component.html',
-  templateUrl: './campaigns.component.html',
+    styleUrls: ['./campaigns.component.scss']
-  styleUrls: ['./campaigns.component.scss']
 })
 export class CampaignsComponent implements OnInit {
   readonly Map = Map;

web/src/app/campaigns/chapter/chapter-create/chapter-create.component.ts

@@ -18,11 +18,10 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  * Route : /campaigns/:campaignId/arcs/:arcId/chapters/create
  */
 @Component({
-  selector: 'app-chapter-create',
+    selector: 'app-chapter-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    templateUrl: './chapter-create.component.html',
-  templateUrl: './chapter-create.component.html',
+    styleUrls: ['./chapter-create.component.scss']
-  styleUrls: ['./chapter-create.component.scss']
 })
 export class ChapterCreateComponent implements OnInit, OnDestroy {
   readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;

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

@@ -32,20 +32,19 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * prérequis (conditions de déblocage), qui font partie du scénario.
  */
 @Component({
-  selector: 'app-chapter-edit',
+    selector: 'app-chapter-edit',
-  standalone: true,
+    imports: [
-  imports: [
+        CommonModule,
-    CommonModule,
+        ReactiveFormsModule,
-    ReactiveFormsModule,
+        LucideAngularModule,
-    LucideAngularModule,
+        LoreLinkPickerComponent,
-    LoreLinkPickerComponent,
+        AiChatDrawerComponent,
-    AiChatDrawerComponent,
+        ImageGalleryComponent,
-    ImageGalleryComponent,
+        IconPickerComponent,
-    IconPickerComponent,
+        PrerequisiteEditorComponent
-    PrerequisiteEditorComponent
+    ],
-  ],
+    templateUrl: './chapter-edit.component.html',
-  templateUrl: './chapter-edit.component.html',
+    styleUrls: ['./chapter-edit.component.scss']
-  styleUrls: ['./chapter-edit.component.scss']
 })
 export class ChapterEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;

web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.ts

@@ -20,11 +20,10 @@ interface GraphEdge { key: string; label: string; x1: number; y1: number; x2: nu
  * Layout custom (BFS par niveaux) en SVG — évite une dépendance lourde type ngx-graph.
  */
 @Component({
-  selector: 'app-chapter-graph',
+    selector: 'app-chapter-graph',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule],
-  imports: [CommonModule, RouterModule, LucideAngularModule],
+    templateUrl: './chapter-graph.component.html',
-  templateUrl: './chapter-graph.component.html',
+    styleUrls: ['./chapter-graph.component.scss']
-  styleUrls: ['./chapter-graph.component.scss']
 })
 export class ChapterGraphComponent implements OnInit, OnDestroy {
   readonly ArrowLeft = ArrowLeft;

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

@@ -23,11 +23,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId
  */
 @Component({
-  selector: 'app-chapter-view',
+    selector: 'app-chapter-view',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
-  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    templateUrl: './chapter-view.component.html',
-  templateUrl: './chapter-view.component.html',
+    styleUrls: ['./chapter-view.component.scss']
-  styleUrls: ['./chapter-view.component.scss']
 })
 export class ChapterViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;

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

@@ -25,11 +25,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  *    saisie manuelle d'IDs d'images.
  */
 @Component({
-  selector: 'app-character-edit',
+    selector: 'app-character-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
+    templateUrl: './character-edit.component.html',
-  templateUrl: './character-edit.component.html',
+    styleUrls: ['./character-edit.component.scss']
-  styleUrls: ['./character-edit.component.scss']
 })
 export class CharacterEditComponent implements OnInit {
   readonly Save = Save;

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

@@ -16,11 +16,10 @@ import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-dr
  * Route : /campaigns/:campaignId/playthroughs/:playthroughId/characters/:characterId
  */
 @Component({
-  selector: 'app-character-view',
+    selector: 'app-character-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
-  imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
+    templateUrl: './character-view.component.html',
-  templateUrl: './character-view.component.html',
+    styleUrls: ['./character-view.component.scss']
-  styleUrls: ['./character-view.component.scss']
 })
 export class CharacterViewComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.ts

@@ -13,11 +13,10 @@ import { ItemCatalog, CatalogItem, ItemCatalogCreate } from '../../../services/i
  *          /campaigns/:campaignId/item-catalogs/:catalogId/edit
  */
 @Component({
-  selector: 'app-item-catalog-edit',
+    selector: 'app-item-catalog-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './item-catalog-edit.component.html',
-  templateUrl: './item-catalog-edit.component.html',
+    styleUrls: ['./item-catalog-edit.component.scss']
-  styleUrls: ['./item-catalog-edit.component.scss']
 })
 export class ItemCatalogEditComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.ts

@@ -12,11 +12,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Route : /campaigns/:campaignId/item-catalogs
  */
 @Component({
-  selector: 'app-item-catalog-list',
+    selector: 'app-item-catalog-list',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './item-catalog-list.component.html',
-  templateUrl: './item-catalog-list.component.html',
+    styleUrls: ['./item-catalog-list.component.scss']
-  styleUrls: ['./item-catalog-list.component.scss']
 })
 export class ItemCatalogListComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.ts

@@ -13,11 +13,10 @@ interface ItemGroup { category: string; items: CatalogItem[]; }
  * Route : /campaigns/:campaignId/item-catalogs/:catalogId
  */
 @Component({
-  selector: 'app-item-catalog-view',
+    selector: 'app-item-catalog-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './item-catalog-view.component.html',
-  templateUrl: './item-catalog-view.component.html',
+    styleUrls: ['./item-catalog-view.component.scss']
-  styleUrls: ['./item-catalog-view.component.scss']
 })
 export class ItemCatalogViewComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.ts

@@ -14,11 +14,10 @@ import { NotebookAction } from '../../../services/notebook-action.model';
  * (chapitre pour une scène, arc pour un chapitre) et appelle les services existants.
  */
 @Component({
-  selector: 'app-notebook-action-card',
+    selector: 'app-notebook-action-card',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './notebook-action-card.component.html',
-  templateUrl: './notebook-action-card.component.html',
+    styleUrls: ['./notebook-action-card.component.scss']
-  styleUrls: ['./notebook-action-card.component.scss']
 })
 export class NotebookActionCardComponent implements OnInit {
   readonly Plus = Plus;

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

@@ -19,11 +19,10 @@ import { NotebookActionCardComponent } from '../notebook-action-card/notebook-ac
  * Route : /campaigns/:campaignId/notebooks/:notebookId
  */
 @Component({
-  selector: 'app-notebook-detail',
+    selector: 'app-notebook-detail',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, NotebookActionCardComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, NotebookActionCardComponent],
+    templateUrl: './notebook-detail.component.html',
-  templateUrl: './notebook-detail.component.html',
+    styleUrls: ['./notebook-detail.component.scss']
-  styleUrls: ['./notebook-detail.component.scss']
 })
 export class NotebookDetailComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/notebook/notebook-list/notebook-list.component.ts

@@ -13,11 +13,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Route : /campaigns/:campaignId/notebooks
  */
 @Component({
-  selector: 'app-notebook-list',
+    selector: 'app-notebook-list',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './notebook-list.component.html',
-  templateUrl: './notebook-list.component.html',
+    styleUrls: ['./notebook-list.component.scss']
-  styleUrls: ['./notebook-list.component.scss']
 })
 export class NotebookListComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

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

@@ -20,11 +20,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * GameSystem associe a la campagne.
  */
 @Component({
-  selector: 'app-npc-edit',
+    selector: 'app-npc-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
+    templateUrl: './npc-edit.component.html',
-  templateUrl: './npc-edit.component.html',
+    styleUrls: ['./npc-edit.component.scss']
-  styleUrls: ['./npc-edit.component.scss']
 })
 export class NpcEditComponent implements OnInit {
   readonly Save = Save;

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

@@ -17,11 +17,10 @@ import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-dr
  * Route : /campaigns/:campaignId/npcs/:npcId
  */
 @Component({
-  selector: 'app-npc-view',
+    selector: 'app-npc-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
-  imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
+    templateUrl: './npc-view.component.html',
-  templateUrl: './npc-view.component.html',
+    styleUrls: ['./npc-view.component.scss']
-  styleUrls: ['./npc-view.component.scss']
 })
 export class NpcViewComponent implements OnInit, OnDestroy {
   readonly ArrowLeft = ArrowLeft;

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

@@ -24,11 +24,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * et les PJ de cette Partie.
  */
 @Component({
-  selector: 'app-playthrough-detail',
+    selector: 'app-playthrough-detail',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule],
-  imports: [CommonModule, RouterModule, LucideAngularModule],
+    templateUrl: './playthrough-detail.component.html',
-  templateUrl: './playthrough-detail.component.html',
+    styleUrls: ['./playthrough-detail.component.scss']
-  styleUrls: ['./playthrough-detail.component.scss']
 })
 export class PlaythroughDetailComponent implements OnInit, OnDestroy {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts

@@ -19,11 +19,10 @@ import { PlaythroughFlagsManagerComponent } from '../../../shared/playthrough-fl
  * Route : /campaigns/:campaignId/playthroughs/:playthroughId/flags
  */
 @Component({
-  selector: 'app-playthrough-flags-page',
+    selector: 'app-playthrough-flags-page',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule, PlaythroughFlagsManagerComponent],
-  imports: [CommonModule, RouterModule, LucideAngularModule, PlaythroughFlagsManagerComponent],
+    templateUrl: './playthrough-flags-page.component.html',
-  templateUrl: './playthrough-flags-page.component.html',
+    styleUrls: ['./playthrough-flags-page.component.scss']
-  styleUrls: ['./playthrough-flags-page.component.scss']
 })
 export class PlaythroughFlagsPageComponent implements OnInit, OnDestroy {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.ts

@@ -14,11 +14,10 @@ import { DiceUtils } from '../../../shared/dice.utils';
  *          /campaigns/:campaignId/random-tables/:tableId/edit
  */
 @Component({
-  selector: 'app-random-table-edit',
+    selector: 'app-random-table-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './random-table-edit.component.html',
-  templateUrl: './random-table-edit.component.html',
+    styleUrls: ['./random-table-edit.component.scss']
-  styleUrls: ['./random-table-edit.component.scss']
 })
 export class RandomTableEditComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/random-table/random-table-view/random-table-view.component.ts

@@ -13,11 +13,10 @@ import { DiceUtils, DiceRoll } from '../../../shared/dice.utils';
  * Route : /campaigns/:campaignId/random-tables/:tableId
  */
 @Component({
-  selector: 'app-random-table-view',
+    selector: 'app-random-table-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './random-table-view.component.html',
-  templateUrl: './random-table-view.component.html',
+    styleUrls: ['./random-table-view.component.scss']
-  styleUrls: ['./random-table-view.component.scss']
 })
 export class RandomTableViewComponent implements OnInit {
   readonly ArrowLeft = ArrowLeft;

web/src/app/campaigns/scene/scene-create/scene-create.component.ts

@@ -18,11 +18,10 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/create
  */
 @Component({
-  selector: 'app-scene-create',
+    selector: 'app-scene-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    templateUrl: './scene-create.component.html',
-  templateUrl: './scene-create.component.html',
+    styleUrls: ['./scene-create.component.scss']
-  styleUrls: ['./scene-create.component.scss']
 })
 export class SceneCreateComponent implements OnInit, OnDestroy {
   readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;

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

@@ -29,11 +29,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId
  */
 @Component({
-  selector: 'app-scene-edit',
+    selector: 'app-scene-edit',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent, RoomsEditorComponent],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent, RoomsEditorComponent],
+    templateUrl: './scene-edit.component.html',
-  templateUrl: './scene-edit.component.html',
+    styleUrls: ['./scene-edit.component.scss']
-  styleUrls: ['./scene-edit.component.scss']
 })
 export class SceneEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;

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

@@ -23,11 +23,10 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId
  */
 @Component({
-  selector: 'app-scene-view',
+    selector: 'app-scene-view',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
-  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    templateUrl: './scene-view.component.html',
-  templateUrl: './scene-view.component.html',
+    styleUrls: ['./scene-view.component.scss']
-  styleUrls: ['./scene-view.component.scss']
 })
 export class SceneViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;

web/src/app/game-systems/game-system-edit/game-system-edit.component.ts

@@ -40,11 +40,10 @@ const CHARACTER_FIELD_SUGGESTIONS = ['Histoire', 'Personnalite', 'Apparence', 'N
 const NPC_FIELD_SUGGESTIONS = ['Motivation', 'Apparence', 'Faction', 'Notes MJ'];
 
 @Component({
-  selector: 'app-game-system-edit',
+    selector: 'app-game-system-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, TemplateFieldsEditorComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, TemplateFieldsEditorComponent],
+    templateUrl: './game-system-edit.component.html',
-  templateUrl: './game-system-edit.component.html',
+    styleUrls: ['./game-system-edit.component.scss']
-  styleUrls: ['./game-system-edit.component.scss']
 })
 export class GameSystemEditComponent implements OnInit {
   readonly Save = Save;

web/src/app/game-systems/game-systems.component.ts

@@ -8,11 +8,10 @@ import { GameSystem } from '../services/game-system.model';
 import { ConfirmDialogService } from '../shared/confirm-dialog/confirm-dialog.service';
 
 @Component({
-  selector: 'app-game-systems',
+    selector: 'app-game-systems',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './game-systems.component.html',
-  templateUrl: './game-systems.component.html',
+    styleUrls: ['./game-systems.component.scss']
-  styleUrls: ['./game-systems.component.scss']
 })
 export class GameSystemsComponent implements OnInit {
   readonly Dices = Dices;

web/src/app/lore/folder-view/folder-view.component.ts

@@ -23,11 +23,10 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  * dialogue d'impact que les autres écrans.
  */
 @Component({
-  selector: 'app-folder-view',
+    selector: 'app-folder-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './folder-view.component.html',
-  templateUrl: './folder-view.component.html',
+    styleUrls: ['./folder-view.component.scss']
-  styleUrls: ['./folder-view.component.scss']
 })
 export class FolderViewComponent implements OnInit, OnDestroy {
   readonly Folder = Folder;

web/src/app/lore/lore-create/lore-create.component.ts

@@ -4,11 +4,10 @@ import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angula
 import { LucideAngularModule, BookCopy, X } from 'lucide-angular';
 
 @Component({
-  selector: 'app-lore-create',
+    selector: 'app-lore-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    templateUrl: './lore-create.component.html',
-  templateUrl: './lore-create.component.html',
+    styleUrls: ['./lore-create.component.scss']
-  styleUrls: ['./lore-create.component.scss']
 })
 export class LoreCreateComponent {
   @Output() close = new EventEmitter<void>();

web/src/app/lore/lore-detail/lore-detail.component.ts

@@ -13,11 +13,10 @@ import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.hel
 import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog.service';
 
 @Component({
-  selector: 'app-lore-detail',
+    selector: 'app-lore-detail',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './lore-detail.component.html',
-  templateUrl: './lore-detail.component.html',
+    styleUrls: ['./lore-detail.component.scss']
-  styleUrls: ['./lore-detail.component.scss']
 })
 export class LoreDetailComponent implements OnInit, OnDestroy {
   readonly Folder = Folder;

web/src/app/lore/lore-node-create/lore-node-create.component.ts

@@ -13,11 +13,10 @@ import { popReturnTo } from '../return-stack.helper';
 import { LORE_ICON_OPTIONS, IconOption, resolveIcon } from '../lore-icons';
 
 @Component({
-  selector: 'app-lore-node-create',
+    selector: 'app-lore-node-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    templateUrl: './lore-node-create.component.html',
-  templateUrl: './lore-node-create.component.html',
+    styleUrls: ['./lore-node-create.component.scss']
-  styleUrls: ['./lore-node-create.component.scss']
 })
 export class LoreNodeCreateComponent implements OnInit, OnDestroy {
 

web/src/app/lore/lore-node-edit/lore-node-edit.component.ts

@@ -31,11 +31,10 @@ import { LORE_ICON_OPTIONS, IconOption } from '../lore-icons';
  * d'édition ET tous ses descendants — sinon l'arbre deviendrait circulaire.
  */
 @Component({
-  selector: 'app-lore-node-edit',
+    selector: 'app-lore-node-edit',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    templateUrl: './lore-node-edit.component.html',
-  templateUrl: './lore-node-edit.component.html',
+    styleUrls: ['./lore-node-edit.component.scss']
-  styleUrls: ['./lore-node-edit.component.scss']
 })
 export class LoreNodeEditComponent implements OnInit, OnDestroy {
 

web/src/app/lore/lore.component.ts

@@ -8,11 +8,10 @@ import { Lore } from '../services/lore.model';
 import { LoreCreateComponent } from './lore-create/lore-create.component';
 
 @Component({
-  selector: 'app-lore',
+    selector: 'app-lore',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, LoreCreateComponent],
-  imports: [CommonModule, LucideAngularModule, LoreCreateComponent],
+    templateUrl: './lore.component.html',
-  templateUrl: './lore.component.html',
+    styleUrls: ['./lore.component.scss']
-  styleUrls: ['./lore.component.scss']
 })
 export class LoreComponent implements OnInit {
   lores: Lore[] = [];

web/src/app/lore/page-create/page-create.component.ts

@@ -25,11 +25,10 @@ import { AiChatDrawerComponent, ChatPrimaryAction } from '../../shared/ai-chat-d
  * champs dynamiques du template se fait APRÈS création, via l'écran page-edit.
  */
 @Component({
-  selector: 'app-page-create',
+    selector: 'app-page-create',
-  standalone: true,
+    imports: [CommonModule, ReactiveFormsModule, RouterModule, LucideAngularModule, AiChatDrawerComponent],
-  imports: [CommonModule, ReactiveFormsModule, RouterModule, LucideAngularModule, AiChatDrawerComponent],
+    templateUrl: './page-create.component.html',
-  templateUrl: './page-create.component.html',
+    styleUrls: ['./page-create.component.scss']
-  styleUrls: ['./page-create.component.scss']
 })
 export class PageCreateComponent implements OnInit, OnDestroy {
   readonly FileText = FileText;

web/src/app/lore/page-edit/page-edit.component.ts

@@ -35,11 +35,10 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  *  - Bouton "Assistant IA" branché (Phase 3 Python)
  */
 @Component({
-  selector: 'app-page-edit',
+    selector: 'app-page-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, RouterLink, LucideAngularModule, ChipsInputComponent, LoreLinkPickerComponent, BreadcrumbComponent, AiChatDrawerComponent, ImageGalleryComponent],
-  imports: [CommonModule, FormsModule, RouterLink, LucideAngularModule, ChipsInputComponent, LoreLinkPickerComponent, BreadcrumbComponent, AiChatDrawerComponent, ImageGalleryComponent],
+    templateUrl: './page-edit.component.html',
-  templateUrl: './page-edit.component.html',
+    styleUrls: ['./page-edit.component.scss']
-  styleUrls: ['./page-edit.component.scss']
 })
 export class PageEditComponent implements OnInit, OnDestroy {
   readonly Sparkles = Sparkles;

web/src/app/lore/page-view/page-view.component.ts

@@ -27,11 +27,10 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  * Pour modifier → bouton "Modifier" qui navigue vers /lore/:loreId/pages/:pageId/edit.
  */
 @Component({
-  selector: 'app-page-view',
+    selector: 'app-page-view',
-  standalone: true,
+    imports: [CommonModule, RouterModule, LucideAngularModule, BreadcrumbComponent, ImageGalleryComponent],
-  imports: [CommonModule, RouterModule, LucideAngularModule, BreadcrumbComponent, ImageGalleryComponent],
+    templateUrl: './page-view.component.html',
-  templateUrl: './page-view.component.html',
+    styleUrls: ['./page-view.component.scss']
-  styleUrls: ['./page-view.component.scss']
 })
 export class PageViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;

web/src/app/lore/template-create/template-create.component.ts

@@ -19,11 +19,10 @@ import { popReturnTo } from '../return-stack.helper';
  *   Le user peut ajouter/retirer n'importe lequel — tous sont égaux.
  */
 @Component({
-  selector: 'app-template-create',
+    selector: 'app-template-create',
-  standalone: true,
+    imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
+    templateUrl: './template-create.component.html',
-  templateUrl: './template-create.component.html',
+    styleUrls: ['./template-create.component.scss']
-  styleUrls: ['./template-create.component.scss']
 })
 export class TemplateCreateComponent implements OnInit, OnDestroy {
   readonly Plus = Plus;

web/src/app/lore/template-edit/template-edit.component.ts

@@ -20,11 +20,10 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  * Mêmes champs que la création + bouton Supprimer.
  */
 @Component({
-  selector: 'app-template-edit',
+    selector: 'app-template-edit',
-  standalone: true,
+    imports: [CommonModule, FormsModule, ReactiveFormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, LucideAngularModule],
+    templateUrl: './template-edit.component.html',
-  templateUrl: './template-edit.component.html',
+    styleUrls: ['./template-edit.component.scss']
-  styleUrls: ['./template-edit.component.scss']
 })
 export class TemplateEditComponent implements OnInit, OnDestroy {
   readonly Plus = Plus;

web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.ts

@@ -22,11 +22,10 @@ import { AiChatService, ChatMessage } from '../../services/ai-chat.service';
  * lore + campagne + GameSystem + journal — l'IA "sait" tout ce qui s'est passé.</p>
  */
 @Component({
-  selector: 'app-session-ai-chat-panel',
+    selector: 'app-session-ai-chat-panel',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './session-ai-chat-panel.component.html',
-  templateUrl: './session-ai-chat-panel.component.html',
+    styleUrls: ['./session-ai-chat-panel.component.scss']
-  styleUrls: ['./session-ai-chat-panel.component.scss']
 })
 export class SessionAiChatPanelComponent implements OnChanges, OnDestroy {
   readonly Send = Send;

web/src/app/sessions/session-detail/session-detail.component.ts

@@ -28,11 +28,10 @@ import { DiceRollResult } from '../session-dice-panel/session-dice-panel.compone
  * Le layout dédié "mode jeu" sera ajouté en Phase 4.
  */
 @Component({
-  selector: 'app-session-detail',
+    selector: 'app-session-detail',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink, SessionReferencePanelComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink, SessionReferencePanelComponent],
+    templateUrl: './session-detail.component.html',
-  templateUrl: './session-detail.component.html',
+    styleUrls: ['./session-detail.component.scss']
-  styleUrls: ['./session-detail.component.scss']
 })
 export class SessionDetailComponent implements OnInit, OnDestroy {
   readonly Dices = Dices;

web/src/app/sessions/session-dice-panel/session-dice-panel.component.ts

@@ -25,11 +25,10 @@ export interface DiceRollResult {
  * et émission d'un événement vers le parent pour ajout au journal.
  */
 @Component({
-  selector: 'app-session-dice-panel',
+    selector: 'app-session-dice-panel',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './session-dice-panel.component.html',
-  templateUrl: './session-dice-panel.component.html',
+    styleUrls: ['./session-dice-panel.component.scss']
-  styleUrls: ['./session-dice-panel.component.scss']
 })
 export class SessionDicePanelComponent {
   readonly Dices = Dices;

web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.ts

@@ -12,11 +12,10 @@ interface ItemGroup { category: string; items: CatalogItem[]; }
  * campagne et consigner un objet au journal (ex. « le joueur achète X »).
  */
 @Component({
-  selector: 'app-session-item-catalogs-panel',
+    selector: 'app-session-item-catalogs-panel',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './session-item-catalogs-panel.component.html',
-  templateUrl: './session-item-catalogs-panel.component.html',
+    styleUrls: ['./session-item-catalogs-panel.component.scss']
-  styleUrls: ['./session-item-catalogs-panel.component.scss']
 })
 export class SessionItemCatalogsPanelComponent implements OnInit {
   readonly Package = Package;

web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.ts

@@ -17,11 +17,10 @@ import { DiceRollResult } from '../session-dice-panel/session-dice-panel.compone
  *  - `aiReplyToJournal` (string) → entrée NOTE (récit IA).
  */
 @Component({
-  selector: 'app-session-random-tables-panel',
+    selector: 'app-session-random-tables-panel',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './session-random-tables-panel.component.html',
-  templateUrl: './session-random-tables-panel.component.html',
+    styleUrls: ['./session-random-tables-panel.component.scss']
-  styleUrls: ['./session-random-tables-panel.component.scss']
 })
 export class SessionRandomTablesPanelComponent implements OnInit {
   readonly Dices = Dices;

web/src/app/sessions/session-reference-panel/session-reference-panel.component.ts

@@ -29,11 +29,10 @@ type TabId = 'dice' | 'tables' | 'objects' | 'characters' | 'scenes' | 'ai';
  * de jet qui remonte ici puis vers le parent via {@link rolled}.</p>
  */
 @Component({
-  selector: 'app-session-reference-panel',
+    selector: 'app-session-reference-panel',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, SessionDicePanelComponent, SessionAiChatPanelComponent, SessionRandomTablesPanelComponent, SessionItemCatalogsPanelComponent],
-  imports: [CommonModule, LucideAngularModule, SessionDicePanelComponent, SessionAiChatPanelComponent, SessionRandomTablesPanelComponent, SessionItemCatalogsPanelComponent],
+    templateUrl: './session-reference-panel.component.html',
-  templateUrl: './session-reference-panel.component.html',
+    styleUrls: ['./session-reference-panel.component.scss']
-  styleUrls: ['./session-reference-panel.component.scss']
 })
 export class SessionReferencePanelComponent implements OnChanges {
   readonly User = User;

web/src/app/settings/ollama-model-manager/ollama-model-manager.component.ts

@@ -18,13 +18,12 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  * liste et corriger la selection courante si besoin.
  */
 @Component({
-  selector: 'app-ollama-model-manager',
+    selector: 'app-ollama-model-manager',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './ollama-model-manager.component.html',
-  templateUrl: './ollama-model-manager.component.html',
+    // Reutilise la feuille de style de l'ecran Parametres (modal, suggestions,
-  // Reutilise la feuille de style de l'ecran Parametres (modal, suggestions,
+    // progress-bar, installed-models) pour un rendu strictement identique.
-  // progress-bar, installed-models) pour un rendu strictement identique.
+    styleUrls: ['../settings.component.scss']
-  styleUrls: ['../settings.component.scss']
 })
 export class OllamaModelManagerComponent implements OnDestroy {
 

web/src/app/settings/settings.component.ts

@@ -23,11 +23,10 @@ import { OllamaModelManagerComponent } from './ollama-model-manager/ollama-model
  * requete chat / generate — pas besoin de redemarrer.
  */
 @Component({
-  selector: 'app-settings',
+    selector: 'app-settings',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, UpdatesSectionComponent, OllamaModelManagerComponent],
-  imports: [CommonModule, FormsModule, LucideAngularModule, UpdatesSectionComponent, OllamaModelManagerComponent],
+    templateUrl: './settings.component.html',
-  templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss']
-  styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
 

web/src/app/settings/updates-section/updates-section.component.ts

@@ -21,13 +21,12 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  * (SettingsComponent) ne gere plus que le formulaire de configuration LLM.
  */
 @Component({
-  selector: 'app-settings-updates-section',
+    selector: 'app-settings-updates-section',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './updates-section.component.html',
-  templateUrl: './updates-section.component.html',
+    // Reutilise la feuille de style de l'ecran Parametres : les blocs deplaces
-  // Reutilise la feuille de style de l'ecran Parametres : les blocs deplaces
+    // gardent exactement le meme rendu (cards, alerts, channel-switch, …).
-  // gardent exactement le meme rendu (cards, alerts, channel-switch, …).
+    styleUrls: ['../settings.component.scss']
-  styleUrls: ['../settings.component.scss']
 })
 export class UpdatesSectionComponent implements OnInit, OnDestroy {
 

web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.ts

@@ -30,11 +30,10 @@ export interface ChatPrimaryAction {
  *    ou la conversation n'a aucune valeur au-dela de l'usage immediat).
  */
 @Component({
-  selector: 'app-ai-chat-drawer',
+    selector: 'app-ai-chat-drawer',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule, MarkdownPipe],
-  imports: [CommonModule, FormsModule, LucideAngularModule, MarkdownPipe],
+    templateUrl: './ai-chat-drawer.component.html',
-  templateUrl: './ai-chat-drawer.component.html',
+    styleUrls: ['./ai-chat-drawer.component.scss']
-  styleUrls: ['./ai-chat-drawer.component.scss'],
 })
 export class AiChatDrawerComponent implements OnInit, OnChanges, OnDestroy {
   readonly X = X;

web/src/app/shared/breadcrumb/breadcrumb.component.ts

@@ -22,11 +22,10 @@ export interface BreadcrumbItem {
  *   ]"></app-breadcrumb>
  */
 @Component({
-  selector: 'app-breadcrumb',
+    selector: 'app-breadcrumb',
-  standalone: true,
+    imports: [CommonModule, RouterLink],
-  imports: [CommonModule, RouterLink],
+    templateUrl: './breadcrumb.component.html',
-  templateUrl: './breadcrumb.component.html',
+    styleUrls: ['./breadcrumb.component.scss']
-  styleUrls: ['./breadcrumb.component.scss']
 })
 export class BreadcrumbComponent {
   @Input() items: BreadcrumbItem[] = [];

web/src/app/shared/chips-input/chips-input.component.ts

@@ -20,11 +20,10 @@ import { LucideAngularModule, X } from 'lucide-angular';
  *  - Clic sur X retire le chip
  */
 @Component({
-  selector: 'app-chips-input',
+    selector: 'app-chips-input',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './chips-input.component.html',
-  templateUrl: './chips-input.component.html',
+    styleUrls: ['./chips-input.component.scss']
-  styleUrls: ['./chips-input.component.scss']
 })
 export class ChipsInputComponent {
   readonly X = X;

web/src/app/shared/confirm-dialog/confirm-dialog-host.component.ts

@@ -4,10 +4,9 @@ import { ConfirmDialogComponent } from './confirm-dialog.component';
 import { ConfirmDialogService } from './confirm-dialog.service';
 
 @Component({
-  selector: 'app-confirm-dialog-host',
+    selector: 'app-confirm-dialog-host',
-  standalone: true,
+    imports: [CommonModule, ConfirmDialogComponent],
-  imports: [CommonModule, ConfirmDialogComponent],
+    template: `
-  template: `
     <app-confirm-dialog
       *ngIf="(svc.state$ | async) as s"
       [open]="s.open"

web/src/app/shared/confirm-dialog/confirm-dialog.component.ts

@@ -5,11 +5,10 @@ import { LucideAngularModule, TriangleAlert, X } from 'lucide-angular';
 export type ConfirmDialogVariant = 'warning' | 'danger' | 'info';
 
 @Component({
-  selector: 'app-confirm-dialog',
+    selector: 'app-confirm-dialog',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './confirm-dialog.component.html',
-  templateUrl: './confirm-dialog.component.html',
+    styleUrls: ['./confirm-dialog.component.scss']
-  styleUrls: ['./confirm-dialog.component.scss']
 })
 export class ConfirmDialogComponent {
   readonly TriangleAlert = TriangleAlert;

web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.ts

@@ -16,11 +16,10 @@ import { ImageGalleryComponent } from '../image-gallery/image-gallery.component'
  * qui gere l'upload, la suppression et le respect du layout.
  */
 @Component({
-  selector: 'app-dynamic-fields-form',
+    selector: 'app-dynamic-fields-form',
-  standalone: true,
+    imports: [CommonModule, FormsModule, ImageGalleryComponent],
-  imports: [CommonModule, FormsModule, ImageGalleryComponent],
+    templateUrl: './dynamic-fields-form.component.html',
-  templateUrl: './dynamic-fields-form.component.html',
+    styleUrls: ['./dynamic-fields-form.component.scss']
-  styleUrls: ['./dynamic-fields-form.component.scss']
 })
 export class DynamicFieldsFormComponent {
   @Input() fields: TemplateField[] = [];

web/src/app/shared/expandable-section/expandable-section.component.ts

@@ -12,11 +12,10 @@ import { LucideAngularModule, ChevronDown, ChevronUp } from 'lucide-angular';
  *   </app-expandable-section>
  */
 @Component({
-  selector: 'app-expandable-section',
+    selector: 'app-expandable-section',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './expandable-section.component.html',
-  templateUrl: './expandable-section.component.html',
+    styleUrls: ['./expandable-section.component.scss']
-  styleUrls: ['./expandable-section.component.scss']
 })
 export class ExpandableSectionComponent {
   readonly ChevronDown = ChevronDown;

web/src/app/shared/global-search/global-search.component.ts

@@ -30,11 +30,10 @@ interface SearchResult {
  * Navigation clavier : ↑↓ ↵ Esc.
  */
 @Component({
-  selector: 'app-global-search',
+    selector: 'app-global-search',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './global-search.component.html',
-  templateUrl: './global-search.component.html',
+    styleUrls: ['./global-search.component.scss']
-  styleUrls: ['./global-search.component.scss']
 })
 export class GlobalSearchComponent implements OnInit, OnDestroy {
   readonly Search = Search;

web/src/app/shared/icon-picker/icon-picker.component.ts

@@ -19,10 +19,9 @@ export interface IconPickerOption {
  * d'icones lui-meme — l'appelant lui passe la banque a afficher.
  */
 @Component({
-  selector: 'app-icon-picker',
+    selector: 'app-icon-picker',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    template: `
-  template: `
     <div class="icon-grid">
       <button
         type="button"
@@ -36,7 +35,7 @@ export interface IconPickerOption {
       </button>
     </div>
   `,
-  styleUrls: ['./icon-picker.component.scss']
+    styleUrls: ['./icon-picker.component.scss']
 })
 export class IconPickerComponent {
   @Input() options: IconPickerOption[] = [];

web/src/app/shared/image-gallery/image-gallery.component.ts

@@ -26,11 +26,10 @@ import { ImageUploaderComponent } from '../image-uploader/image-uploader.compone
  *                      (imageIdsChange)="tempIds = $event"></app-image-gallery>
  */
 @Component({
-  selector: 'app-image-gallery',
+    selector: 'app-image-gallery',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
-  imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
+    templateUrl: './image-gallery.component.html',
-  templateUrl: './image-gallery.component.html',
+    styleUrls: ['./image-gallery.component.scss']
-  styleUrls: ['./image-gallery.component.scss']
 })
 export class ImageGalleryComponent {
   readonly X = X;

web/src/app/shared/image-uploader/image-uploader.component.ts

@@ -18,11 +18,10 @@ import { Image } from '../../services/image.model';
  *  - Afficher l'etat loading et les erreurs
  */
 @Component({
-  selector: 'app-image-uploader',
+    selector: 'app-image-uploader',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './image-uploader.component.html',
-  templateUrl: './image-uploader.component.html',
+    styleUrls: ['./image-uploader.component.scss']
-  styleUrls: ['./image-uploader.component.scss']
 })
 export class ImageUploaderComponent {
   readonly Upload = Upload;

web/src/app/shared/lore-link-picker/lore-link-picker.component.ts

@@ -25,11 +25,10 @@ import { Page } from '../../services/page.model';
  *  - Exclut la page courante et les pages déjà sélectionnées
  */
 @Component({
-  selector: 'app-lore-link-picker',
+    selector: 'app-lore-link-picker',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './lore-link-picker.component.html',
-  templateUrl: './lore-link-picker.component.html',
+    styleUrls: ['./lore-link-picker.component.scss']
-  styleUrls: ['./lore-link-picker.component.scss']
 })
 export class LoreLinkPickerComponent {
   readonly X = X;

web/src/app/shared/persona-view/persona-view.component.ts

@@ -33,11 +33,10 @@ export interface PersonaLike {
 }
 
 @Component({
-  selector: 'app-persona-view',
+    selector: 'app-persona-view',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, ImageGalleryComponent],
-  imports: [CommonModule, LucideAngularModule, ImageGalleryComponent],
+    templateUrl: './persona-view.component.html',
-  templateUrl: './persona-view.component.html',
+    styleUrls: ['./persona-view.component.scss']
-  styleUrls: ['./persona-view.component.scss']
 })
 export class PersonaViewComponent {
   readonly BookOpen = BookOpen;

web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.ts

@@ -14,11 +14,10 @@ import { forkJoin } from 'rxjs';
  * met à jour la valeur du Playthrough courant.</p>
  */
 @Component({
-  selector: 'app-playthrough-flags-manager',
+    selector: 'app-playthrough-flags-manager',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './playthrough-flags-manager.component.html',
-  templateUrl: './playthrough-flags-manager.component.html',
+    styleUrls: ['./playthrough-flags-manager.component.scss']
-  styleUrls: ['./playthrough-flags-manager.component.scss']
 })
 export class PlaythroughFlagsManagerComponent implements OnInit, OnChanges {
 

web/src/app/shared/prerequisite-editor/prerequisite-editor.component.ts

@@ -12,11 +12,10 @@ import { Chapter, Prerequisite } from '../../services/campaign.model';
  * un menu à 3 entrées (quête, session, fait).
  */
 @Component({
-  selector: 'app-prerequisite-editor',
+    selector: 'app-prerequisite-editor',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './prerequisite-editor.component.html',
-  templateUrl: './prerequisite-editor.component.html',
+    styleUrls: ['./prerequisite-editor.component.scss']
-  styleUrls: ['./prerequisite-editor.component.scss']
 })
 export class PrerequisiteEditorComponent {
   /** Liste courante. */

web/src/app/shared/quest-status-badge/quest-status-badge.component.ts

@@ -8,11 +8,10 @@ import { QuestStatus } from '../../services/campaign.model';
  * Composant standalone, sans dépendance métier.
  */
 @Component({
-  selector: 'app-quest-status-badge',
+    selector: 'app-quest-status-badge',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './quest-status-badge.component.html',
-  templateUrl: './quest-status-badge.component.html',
+    styleUrls: ['./quest-status-badge.component.scss']
-  styleUrls: ['./quest-status-badge.component.scss']
 })
 export class QuestStatusBadgeComponent {
   @Input() status: QuestStatus | undefined | null = 'AVAILABLE';

web/src/app/shared/rooms-editor/rooms-editor.component.ts

@@ -14,11 +14,10 @@ import { Room, RoomBranch } from '../../services/campaign.model';
  * Les branches (graphe inter-pièces) sont éditables dans la card expand.
  */
 @Component({
-  selector: 'app-rooms-editor',
+    selector: 'app-rooms-editor',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './rooms-editor.component.html',
-  templateUrl: './rooms-editor.component.html',
+    styleUrls: ['./rooms-editor.component.scss']
-  styleUrls: ['./rooms-editor.component.scss']
 })
 export class RoomsEditorComponent {
 

web/src/app/shared/secondary-sidebar/secondary-sidebar.component.ts

@@ -6,11 +6,10 @@ import { TreeItem, TreeCreateAction, SidebarAction, BottomPanel, BottomPanelItem
 import { resolveIcon } from '../../lore/lore-icons';
 
 @Component({
-  selector: 'app-secondary-sidebar',
+    selector: 'app-secondary-sidebar',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './secondary-sidebar.component.html',
-  templateUrl: './secondary-sidebar.component.html',
+    styleUrls: ['./secondary-sidebar.component.scss']
-  styleUrls: ['./secondary-sidebar.component.scss']
 })
 export class SecondarySidebarComponent implements OnDestroy {
   @Input() title = '';

web/src/app/shared/single-image-picker/single-image-picker.component.ts

@@ -20,11 +20,10 @@ import { ImageUploaderComponent } from '../image-uploader/image-uploader.compone
  * lien (passe imageId a null). L'image reste accessible via d'autres entites.
  */
 @Component({
-  selector: 'app-single-image-picker',
+    selector: 'app-single-image-picker',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
-  imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
+    templateUrl: './single-image-picker.component.html',
-  templateUrl: './single-image-picker.component.html',
+    styleUrls: ['./single-image-picker.component.scss']
-  styleUrls: ['./single-image-picker.component.scss']
 })
 export class SingleImagePickerComponent {
   readonly X = X;

web/src/app/shared/template-fields-editor/template-fields-editor.component.ts

@@ -15,11 +15,10 @@ import { TemplateField, FieldType, ImageLayout } from '../../services/template.m
  * mais c'est le parent qui decide du blocage du submit.
  */
 @Component({
-  selector: 'app-template-fields-editor',
+    selector: 'app-template-fields-editor',
-  standalone: true,
+    imports: [CommonModule, FormsModule, LucideAngularModule],
-  imports: [CommonModule, FormsModule, LucideAngularModule],
+    templateUrl: './template-fields-editor.component.html',
-  templateUrl: './template-fields-editor.component.html',
+    styleUrls: ['./template-fields-editor.component.scss']
-  styleUrls: ['./template-fields-editor.component.scss']
 })
 export class TemplateFieldsEditorComponent {
   readonly Plus = Plus;

web/src/app/shared/update-banner/update-banner.component.ts

@@ -9,11 +9,10 @@ import { VersionCheckerService } from '../../services/version-checker.service';
  * ouvert. Propose un reload en un clic.
  */
 @Component({
-  selector: 'app-update-banner',
+    selector: 'app-update-banner',
-  standalone: true,
+    imports: [CommonModule, LucideAngularModule],
-  imports: [CommonModule, LucideAngularModule],
+    templateUrl: './update-banner.component.html',
-  templateUrl: './update-banner.component.html',
+    styleUrls: ['./update-banner.component.scss']
-  styleUrls: ['./update-banner.component.scss']
 })
 export class UpdateBannerComponent {
   readonly RefreshCw = RefreshCw;

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

@@ -11,11 +11,10 @@ import { UpdatesService } from '../services/updates.service';
 import packageJson from '../../../package.json';
 
 @Component({
-  selector: 'app-sidebar',
+    selector: 'app-sidebar',
-  standalone: true,
+    imports: [AsyncPipe, NgIf, NgFor, LucideAngularModule],
-  imports: [AsyncPipe, NgIf, NgFor, LucideAngularModule],
+    templateUrl: './sidebar.component.html',
-  templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss']
-  styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit {
   currentRoute = '';