✨ button "see more" for long description in the popup pin

src/app/components/pin-marker/pin-marker.component.html

@@ -7,7 +7,11 @@
 <app-share-modal [pinOpened]="pinOpened" [pinId]="pin.id"></app-share-modal>
 
 <div class="flex mb-2 justify-end items-center">
-  <app-edit-pin-popup [pin]="pin" [pinId]="pin.id" [pinOpened]="pinOpened"></app-edit-pin-popup>
+  <app-edit-pin-popup
+    [pin]="pin"
+    [pinId]="pin.id"
+    [pinOpened]="pinOpened"
+  ></app-edit-pin-popup>
   <button
     class="p-1 text-gray-500 rounded hover:bg-gray-200 focus:outline-none ml-2 flex items-center"
     (click)="sharePin()"
@@ -173,5 +177,24 @@
       <span class="text-gray-500">No images available</span>
     </div>
   </ng-template>
-  <p [innerHTML]="formattedDescription"></p>
+
+  <!-- Description justifiée tronquée -->
+  <div
+    class="text-lg mb-4 text-justify transition-all duration-300"
+    [ngClass]="{
+      'line-clamp-5 overflow-hidden': !expandedDescriptions[0]
+    }"
+  >
+    {{ pin.description || "Aucune description" }}
+  </div>
+
+  <!-- Bouton "voir plus / moins" -->
+  <div *ngIf="pin.description.length > 200" class="text-right mb-6">
+    <button
+      class="text-blue-600 font-semibold hover:underline"
+      (click)="toggleDescription(0)"
+    >
+      {{ expandedDescriptions[0] ? "Voir moins" : "Voir plus" }}
+    </button>
+  </div>
 </div>

src/app/components/pin-marker/pin-marker.component.ts

@@ -28,6 +28,7 @@ export class PinMarkerComponent {
   currentIndex: number = 0;
   imageUrls: SafeUrl[] = [];
   imagesLoaded = false;
+  expandedDescriptions: { [index: number]: boolean } = {};
 
   @Output() pinOpened = new EventEmitter<void>();
 
@@ -36,7 +37,7 @@ export class PinMarkerComponent {
     private modalService: ModalService,
     private imageService: ImageService,
     private sanitizer: DomSanitizer
-  ) { }
+  ) {}
 
   ngOnInit() {
     // Écouter l'événement d'ouverture du popup
@@ -44,6 +45,7 @@ export class PinMarkerComponent {
       if (!this.imagesLoaded) {
         this.loadImages();
         this.pinOpened.emit();
+        // this.formatDescription(this.pin.description);
       }
     });
   }
@@ -84,17 +86,17 @@ export class PinMarkerComponent {
     this.modalService.closeModal('confirm-modal-' + this.pin.id);
   }
 
-  get formattedDescription(): string {
-    return this.formatDescription(this.pin.description);
-  }
+  // get formattedDescription(): string {
+  //   return this.formatDescription(this.pin.description);
+  // }
 
-  formatDescription(description: string): string {
-    const regex = /@(\w+(-\w+)*(\.\w+(-\w+)*)*)/g;
-    return description.replace(
-      regex,
-      `<a href="/profile/$1" class="text-blue-500 hover:underline">@$1</a>`
-    );
-  }
+  // formatDescription(description: string): string {
+  //   const regex = /@(\w+(-\w+)*(\.\w+(-\w+)*)*)/g;
+  //   return description.replace(
+  //     regex,
+  //     `<a href="/profile/$1" class="text-blue-500 hover:underline">@$1</a>`
+  //   );
+  // }
 
   prevSlide(): void {
     this.currentIndex =
@@ -111,4 +113,8 @@ export class PinMarkerComponent {
       URL.revokeObjectURL(url.toString());
     });
   }
+
+  toggleDescription(index: number): void {
+    this.expandedDescriptions[index] = !this.expandedDescriptions[index];
+  }
 }