Sync lora favorites/preferences

Author: Metal079

src/app/home/options/options.component.css

@@ -198,6 +198,7 @@
   /* Set a minimum height to prevent layout shifts */
   max-width: 600px;
   /* Enforce a consistent card width */
+  position: relative;
 }
 
 .lora-image {
@@ -240,7 +241,8 @@
   align-items: center;
   margin-bottom: 10px;
   /* flex-wrap: nowrap; Prevent wrapping */
-  max-width: 30%;
+  width: 100%;
+  max-width: 100%;
   /* Ensure it doesn't exceed the container width */
 }
 
@@ -261,6 +263,90 @@
   /* Adjust based on image and button width */
 }
 
+.lora-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.lora-tag-filter {
+  flex: 1 1 auto;
+  min-width: 220px;
+}
+
+.lora-filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+}
+
+.lora-sort-select {
+  min-width: 140px;
+}
+
+.lora-favorites-toggle {
+  height: 30px;
+  width: 30px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lora-favorites-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.lora-clear-filters {
+  color: #6c757d;
+  opacity: 0.65;
+  text-decoration: none;
+  padding: 0 4px;
+}
+
+.lora-clear-filters:hover {
+  opacity: 0.9;
+}
+
+.lora-favorite-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.35);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.lora-favorite-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.lora-favorite-btn.is-favorite {
+  color: #ffd966;
+  opacity: 1;
+}
+
+.lora-favorite-btn:hover {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.selected-loras-panel {
+  margin-top: 12px;
+}
+
 /* Menu dropdowns */
 #collapseExample {
   margin-left: 20px;
@@ -493,6 +579,15 @@
   .d-flex.justify-content-between.mb-3 input {
     margin-bottom: 0px;
   }
+
+  .lora-filter-row {
+    flex-wrap: wrap;
+  }
+
+  .lora-filter-controls {
+    width: 100%;
+    justify-content: flex-start;
+  }
 }
 
 /* Queue Selector Styles */

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

@@ -571,14 +571,32 @@ <h5>Load LoRAs?</h5>
       </span>
     </p>
 
-    <!-- Tag Selection Buttons -->
-    <p-multiSelect [options]="loraTagOptions" [(ngModel)]="selectedTags" optionLabel="optionLabel"
-      optionValue="optionValue" [virtualScroll]="true" [virtualScrollItemSize]="43" placeholder="Filter Loras by tags"
-      [style]="{ width: '100%', marginBottom: '10px' }" (onChange)="filterLoras()">
-    </p-multiSelect>
+    <!-- Tag Selection Buttons + Sort/Favorites Controls -->
+    <div class="lora-filter-row">
+      <p-multiSelect [options]="loraTagOptions" [(ngModel)]="selectedTags" optionLabel="optionLabel"
+        optionValue="optionValue" [virtualScroll]="true" [virtualScrollItemSize]="43" placeholder="Filter Loras by tags"
+        styleClass="lora-tag-filter" [style]="{ width: '100%' }" (onChange)="filterLoras()">
+      </p-multiSelect>
+      <div class="lora-filter-controls">
+        <button type="button" class="btn btn-outline-secondary btn-sm lora-favorites-toggle"
+          [class.active]="showFavoriteLorasOnly" (click)="toggleFavoriteLorasOnly()"
+          [disabled]="!isLoggedIn"
+          [attr.title]="isLoggedIn ? 'Show favorites only' : 'Login required to view favorites'">
+          <i class="bi" [ngClass]="showFavoriteLorasOnly ? 'bi-star-fill' : 'bi-star'"></i>
+        </button>
+        <select class="form-select form-select-sm lora-sort-select" [(ngModel)]="loraSortOption"
+          (ngModelChange)="onLoraSortChange($event)">
+          <option *ngFor="let option of loraSortOptions" [ngValue]="option.value">{{ option.label }}</option>
+        </select>
+        <button type="button" class="btn btn-link btn-sm lora-clear-filters" (click)="clearLoraFilters()"
+          title="Clear LoRA filters">
+          <i class="bi bi-x-circle"></i>
+        </button>
+      </div>
+    </div>
 
     <!-- Search and Add Custom LoRA -->
-    <div class="d-flex justify-content-between mb-3">
+    <div class="d-flex justify-content-between mb-3 lora-search-row">
       <input type="text" class="form-control w-80" placeholder="Search LoRAs..." [(ngModel)]="loraSearchQuery"
         (ngModelChange)="filterLoras()">
     </div>
@@ -599,30 +617,41 @@ <h5>Full Lora Preview</h5>
         Request LoRAs!
       </button>
       <div *ngFor="let lora of filteredLoras" class="lora-card">
+        <button class="lora-favorite-btn" type="button" (click)="toggleLoraFavorite(lora, $event)"
+          [disabled]="!isLoggedIn"
+          [class.is-favorite]="isLoraFavorite(lora)"
+          [attr.title]="isLoggedIn ? 'Favorite LoRA' : 'Login required to favorite'">
+          <i class="bi" [ngClass]="isLoraFavorite(lora) ? 'bi-star-fill' : 'bi-star'"></i>
+        </button>
         <img [src]="lora.image_url" [alt]="lora.name" class="lora-image"
           (click)="openImageModalLoraPreview(lora.image_url)">
         <div class="lora-info">
           <h5 class="lora-name">{{ lora.name }}</h5>
           <p class="lora-version">{{ lora.version }}</p>
         </div>
-        <button class="btn btn-primary btn-sm w-100" (click)="selectLora(lora)">Select</button>
+        <button *ngIf="!isLoraSelected(lora)" class="btn btn-primary btn-sm w-100" (click)="selectLora(lora)">
+          Select
+        </button>
+        <button *ngIf="isLoraSelected(lora)" class="btn btn-danger btn-sm w-100" (click)="removeLora(lora)">
+          Remove
+        </button>
       </div>
     </div>
+  </div>
 
-    <!-- Selected LoRA Display with Sliders -->
-    <div *ngIf="selectedLoras.length > 0" class="mt-3">
-      <h6>Selected LoRAs:</h6>
-      <div *ngFor="let loraItem of selectedLoras" class="selected-lora-item">
-        <div class="d-flex align-items-center">
-          <img [src]="loraItem.image_url" [alt]="loraItem.name" class="selected-lora-image">
-          <div class="selected-lora-details">
-            <h5 class="lora-name">{{ loraItem.name }}</h5>
-            <input type="range" min="0" max="1.5" step="0.1" [(ngModel)]="loraItem.strength"
-              (ngModelChange)="updateStrength(loraItem, loraItem.strength)">
-            <span>Strength: {{ loraItem.strength }}</span>
-          </div>
-          <button class="btn btn-danger btn-sm remove-button" (click)="removeLora(loraItem)">Remove</button>
+  <!-- Selected LoRA Display with Sliders -->
+  <div *ngIf="selectedLoras.length > 0" class="selected-loras-panel">
+    <h6>Selected LoRAs:</h6>
+    <div *ngFor="let loraItem of selectedLoras" class="selected-lora-item">
+      <div class="d-flex align-items-center">
+        <img [src]="loraItem.image_url" [alt]="loraItem.name" class="selected-lora-image">
+        <div class="selected-lora-details">
+          <h5 class="lora-name">{{ loraItem.name }}</h5>
+          <input type="range" min="0" max="1.5" step="0.1" [(ngModel)]="loraItem.strength"
+            (ngModelChange)="updateStrength(loraItem, loraItem.strength)">
+          <span>Strength: {{ loraItem.strength }}</span>
         </div>
+        <button class="btn btn-danger btn-sm remove-button" (click)="removeLora(loraItem)">Remove</button>
       </div>
     </div>
   </div>