Show confirmation dialog when loading loras from image history

Author: Metal079

src/app/home/options/options.component.html

@@ -413,6 +413,21 @@
   </div>
 </div>
 
+<!-- Load LoRAs Prompt -->
+<p-dialog [(visible)]="showLoraLoadPrompt" [modal]="true" [dismissableMask]="true" [closable]="true"
+  [style]="{width: 'min(90vw, 420px)'}" (onHide)="declineLoadHistoryLoras()">
+  <ng-template pTemplate="header">
+    <h5>Load LoRAs?</h5>
+  </ng-template>
+  <ng-template pTemplate="content">
+    <p>This image used LoRAs. Load them into your current selection?</p>
+  </ng-template>
+  <ng-template pTemplate="footer">
+    <button class="btn btn-secondary" type="button" (click)="declineLoadHistoryLoras()">No</button>
+    <button class="btn btn-primary ms-2" type="button" (click)="confirmLoadHistoryLoras()">Yes</button>
+  </ng-template>
+</p-dialog>
+
 <!-- Loras Content Panel -->
 <div class="collapse w-100" id="lorasCollapse">
   <div class="card card-body" id="lorasDropdown">

src/app/home/options/options.component.ts

@@ -192,6 +192,8 @@ export class OptionsComponent implements OnInit {
   // to show full sized lora image
   displayModal: boolean = false;
   selectedImageUrl: string | null = null;
+  showLoraLoadPrompt: boolean = false;
+  pendingLoraLoadImage: MobiansImage | null = null;
 
   // DB variables
   private db: IDBDatabase | null = null;
@@ -1749,11 +1751,31 @@ export class OptionsComponent implements OnInit {
       this.sharedService.setPrompt(image.prompt!);
     }
 
-    if (image.loras !== undefined) {
-      this.selectedLoras = this.resolveHistoryLoras(image.loras);
-      this.generationRequest.loras = this.selectedLoras;
-      this.updateCreditCost();
+    const hasHistoryLoras = Array.isArray(image.loras) && image.loras.length > 0;
+    if (hasHistoryLoras) {
+      this.pendingLoraLoadImage = image;
+      this.showLoraLoadPrompt = true;
+    }
+  }
+
+  confirmLoadHistoryLoras() {
+    const image = this.pendingLoraLoadImage;
+    this.clearLoraLoadPrompt();
+    if (!image) {
+      return;
     }
+    this.selectedLoras = this.resolveHistoryLoras(image.loras);
+    this.generationRequest.loras = this.selectedLoras;
+    this.updateCreditCost();
+  }
+
+  declineLoadHistoryLoras() {
+    this.clearLoraLoadPrompt();
+  }
+
+  private clearLoraLoadPrompt() {
+    this.showLoraLoadPrompt = false;
+    this.pendingLoraLoadImage = null;
   }
 
   async downloadImage(image: MobiansImage, event?: Event) {