fix(frontend): add dsfr banner

Author: pYassine

packages/frontend/src/app/app.component.html

@@ -36,6 +36,39 @@
 </nav>
 <app-help-modal></app-help-modal>
 
+<div
+  *ngIf="!dsfrBannerClosed"
+  class="alert alert-info text-center mb-0 rounded-0 d-print-none alert-dismissible"
+  role="alert"
+>
+  <div class="container py-1">
+    <p class="mb-0">
+      🖌️
+      <strong
+        >Changement de design du site DomiFa prévu le mercredi 29 avril
+        2026</strong
+      ><br />
+      Dans le cadre de l'amélioration continue des services publics en ligne,
+      notre site adopte le design de l'État afin de renforcer sa lisibilité et
+      son accessibilité. <br />Cette évolution est sans impact sur vos
+      démarches, vos accès et vos données.
+      <a
+        href="https://pyassine.github.io/domifa-dsfr-docs/"
+        target="_blank"
+        rel="noopener noreferrer"
+        (click)="trackDsfrBannerClick()"
+        >Découvrez les exemples de changement à venir.</a
+      >
+    </p>
+    <button
+      type="button"
+      class="btn-close"
+      aria-label="Fermer le message"
+      (click)="closeDsfrBanner()"
+    ></button>
+  </div>
+</div>
+
 <app-navbar [me]="me"></app-navbar>
 
 <main role="main" id="page">

packages/frontend/src/app/app.component.ts

@@ -50,6 +50,7 @@ export class AppComponent implements OnInit, OnDestroy {
   private readonly subscription = new Subscription();
 
   public readonly partnerLinks = LIENS_PARTENAIRES;
+  public dsfrBannerClosed = false;
 
   constructor(
     private readonly authService: AuthService,
@@ -65,6 +66,8 @@ export class AppComponent implements OnInit, OnDestroy {
     this.submitted = false;
     this.loading = false;
     this.me = null;
+    this.dsfrBannerClosed =
+      sessionStorage.getItem("dsfr-banner-closed") === "true";
     this.initCguForm();
     this.checkMatomo();
   }
@@ -216,6 +219,20 @@ export class AppComponent implements OnInit, OnDestroy {
     });
   }
 
+  public trackDsfrBannerClick(): void {
+    this.matomo.trackEvent(
+      "DSFR_MIGRATION",
+      "BANNER_LINK_CLICK",
+      "PREVIEW_DOCS",
+      1
+    );
+  }
+
+  public closeDsfrBanner(): void {
+    this.dsfrBannerClosed = true;
+    sessionStorage.setItem("dsfr-banner-closed", "true");
+  }
+
   public closeModals(): void {
     this.modalService.dismissAll();
   }