feat: implement image carousel in product dialog; enhance image upload handling and preview functionality

client/src/app/components/ps-product-dialog/ps-product-dialog.component.html

@@ -2,22 +2,57 @@
 
 <div mat-dialog-content class="grid" [formGroup]="form">
 
-  <!-- Input pour l'upload des images -->
-  <div class="col-12">
-    <label for="fileInput">Images du produit</label>
-    <input type="file" multiple (change)="onFiles($event)">
-  </div>
+  <!-- CARROUSEL IMAGES -->
+  <div class="col-12 carousel">
+    <div class="carousel-main">
 
-  <!-- Affichage des vignettes des images existantes en mode édition -->
-  @if (mode==='edit' && existingImageUrls.length) {
-    <div class="col-12">
-      <div class="thumbs">
-        @for (url of existingImageUrls; track url) {
-          <img [src]="url" alt="Produit">
-        }
-      </div>
+      <!-- Bouton précédent -->
+      <button mat-icon-button
+              class="carousel-nav-btn left"
+              (click)="prev()"
+              [disabled]="carouselItems.length <= 1">
+        <mat-icon>chevron_left</mat-icon>
+      </button>
+
+      <!-- Image principale ou placeholder -->
+      @if (carouselItems.length && !carouselItems[currentIndex].isPlaceholder) {
+        <img [src]="carouselItems[currentIndex].src" alt="Produit">
+      } @else {
+        <div class="carousel-placeholder" (click)="fileInput.click()">
+          <mat-icon>add_photo_alternate</mat-icon>
+          <span>Ajouter des images</span>
+        </div>
+      }
+
+      <!-- Bouton suivant -->
+      <button mat-icon-button
+              class="carousel-nav-btn right"
+              (click)="next()"
+              [disabled]="carouselItems.length <= 1">
+        <mat-icon>chevron_right</mat-icon>
+      </button>
     </div>
-  }
+
+    <!-- Bandeau de vignettes -->
+    <div class="carousel-thumbs">
+      @for (item of carouselItems; let i = $index; track item) {
+        <div class="thumb-item"
+             [class.active]="i === currentIndex"
+             (click)="onThumbClick(i)">
+          @if (!item.isPlaceholder) {
+            <img class="thumb-img" [src]="item.src" alt="Vignette produit">
+          } @else {
+            <div class="thumb-placeholder" (click)="fileInput.click()">
+              <mat-icon>add</mat-icon>
+            </div>
+          }
+        </div>
+      }
+    </div>
+
+    <!-- Input réel, caché -->
+    <input #fileInput type="file" multiple hidden (change)="onFiles($event)">
+  </div>
 
   <!-- Input pour le nom du produit -->
   <mat-form-field class="col-12">
@@ -93,6 +128,7 @@
   </mat-form-field>
 </div>
 
+<!-- Actions -->
 <div mat-dialog-actions>
   <button mat-button (click)="close()">Annuler</button>
   <button mat-raised-button color="primary" (click)="save()" [disabled]="form.invalid">