Functionnal UI

src/app/app.component.html

@@ -1,3 +1,6 @@
     <div class="app-root">
       <router-outlet></router-outlet>
+      
+      <!-- Global Toast Notifications -->
+      <app-toast></app-toast>
     </div>

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { TitleSheetsFormComponent } from './view/components/title-sheets-form/title-sheets-form.component';
 import { TitleSheet, createEmptyTitleSheet } from './models/title-sheet.model';
 import { Router, RouterModule, RouterOutlet } from '@angular/router';
+import { ToastComponent } from './view/components/toast/toast.component';
 
 @Component({
   selector: 'app-root',
@@ -11,7 +12,7 @@ import { Router, RouterModule, RouterOutlet } from '@angular/router';
   imports: [
     CommonModule,
     RouterOutlet,
-    TitleSheetsFormComponent  // ← Import direct du composant
+    ToastComponent
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']

src/styles.scss

@@ -1,7 +1,7 @@
 /* src/styles.scss - Variables globales Dark Theme */
 
-// === FONTAWESOME IMPORT ===
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
+// === FONTAWESOME IMPORT (OFFLINE) ===
+@import '@fortawesome/fontawesome-free/css/all.min.css';
 
 // === DARK THEME PALETTE ===
 :root {
@@ -97,3 +97,45 @@ html, body {
 .border-radius { border-radius: var(--radius-medium); }
 .shadow-light { box-shadow: var(--shadow-light); }
 .shadow-medium { box-shadow: var(--shadow-medium); }
+
+// === FONT AWESOME ICON STYLES ===
+.icon {
+  font-size: inherit;
+  vertical-align: middle;
+
+  &.icon-sm { font-size: 0.875rem; }
+  &.icon-md { font-size: 1rem; }
+  &.icon-lg { font-size: 1.25rem; }
+  &.icon-xl { font-size: 1.5rem; }
+}
+
+// Icônes de statut
+.status-icon {
+  font-size: 1.5rem;
+  margin-right: 15px;
+
+  &.success { color: var(--color-success); }
+  &.warning { color: var(--color-warning); }
+  &.danger { color: var(--color-danger); }
+  &.info { color: var(--color-info); }
+}
+
+// Icônes d'action
+.action-icon {
+  font-size: 1rem;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
+// Animation pour les icônes de chargement
+.fa-spin {
+  animation: fa-spin 1s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}