Updated lora request feature to show pending loras, status of loras etc

Author: Metal079

src/app/home/add-loras/add-loras.component.css

@@ -48,6 +48,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
+    flex-wrap: wrap;
     margin-bottom: 10px;
     /* Add spacing between header and body */
 }
@@ -62,6 +63,7 @@
 .lora-card-title {
     font-size: 1.1rem;
     font-weight: bold;
+    flex: 1 1 auto;
 }
 
 /* Body part with creator and stats */
@@ -111,14 +113,12 @@
 
 /* Highlight the selected card */
 .lora-card.selected {
-    background-color: #e0f7fa;
-    /* Light blue highlight */
     border-color: #00796b;
+    box-shadow: 0 0 0 2px rgba(0, 121, 107, 0.35);
 }
 
 .lora-card:hover {
-    background-color: #e0f7fa;
-    /* Slight hover effect */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
 }
 
 .preview-image {
@@ -151,6 +151,142 @@
     bottom: 10px; 
 }
 
+/* Status highlighting */
+.lora-card.status-approved {
+    border-color: #2e7d32;
+    background-color: #e8f5e9;
+}
+
+.lora-card.status-pending {
+    border-color: #f9a825;
+    background-color: #fff8e1;
+}
+
+.lora-card.status-rejected {
+    border-color: #ef9a9a;
+    background-color: #ffebee;
+}
+
+.status-pill {
+    margin-left: auto;
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: 999px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+}
+
+.status-pill.status-approved {
+    background-color: #2e7d32;
+    color: #fff;
+}
+
+.status-pill.status-pending {
+    background-color: #f9a825;
+    color: #fff;
+}
+
+.status-pill.status-rejected {
+    background-color: #ef5350;
+    color: #fff;
+}
+
+/* Pending requests section */
+.pending-requests {
+    margin-top: 12px;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #f5d76e;
+    background-color: #fffde7;
+}
+
+.pending-toggle {
+    margin-top: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.pending-count {
+    font-weight: 600;
+    color: #7a6b24;
+}
+
+.pending-toggle-btn {
+    border-color: #f5d76e !important;
+    color: #7a6b24 !important;
+}
+
+.pending-toggle-btn:hover {
+    background-color: #fff8d6 !important;
+}
+
+.pending-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.pending-title {
+    font-weight: 600;
+}
+
+.pending-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.pending-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px dashed #f0e7b3;
+}
+
+.pending-item:last-child {
+    border-bottom: none;
+}
+
+.pending-cancel-btn {
+    width: 110px;
+    justify-content: center;
+}
+
+:host ::ng-deep .pending-cancel-btn.p-button {
+    background-color: #e53935;
+    border-color: #e53935;
+    color: #fff;
+}
+
+:host ::ng-deep .pending-cancel-btn.p-button:enabled:hover {
+    background-color: #c62828;
+    border-color: #c62828;
+}
+
+.pending-cancel-btn .pi {
+    margin-right: 6px;
+}
+
+.pending-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.pending-name {
+    font-weight: 600;
+}
+
+.pending-meta {
+    font-size: 0.85rem;
+    color: #666;
+}
+
 @media screen and (max-width: 600px) {
     .p-field.mobile-results {
         padding: 10px;
@@ -165,4 +301,4 @@
     #search-options {
         font-size: 0.7rem;
     }
-}
+}

src/app/home/add-loras/add-loras.component.html

@@ -64,13 +64,51 @@
   <p-progressSpinner *ngIf="isLoading" styleClass="ml-2" strokeWidth="4" animationDuration=".5s"></p-progressSpinner>
   </div>
 
+  <!-- User pending requests (hidden by default) -->
+  <div *ngIf="userPendingSuggestions.length > 0" class="p-field pending-toggle">
+    <button
+      pButton
+      type="button"
+      [label]="showPendingRequests ? 'Hide my pending requests' : 'Show my pending requests'"
+      [icon]="showPendingRequests ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+      class="p-button-outlined pending-toggle-btn"
+      (click)="togglePendingRequests()"
+    ></button>
+    <span class="pending-count">({{ userPendingSuggestions.length }})</span>
+    <p-progressSpinner *ngIf="loadingStatuses" styleClass="ml-2" strokeWidth="3" animationDuration=".5s"></p-progressSpinner>
+  </div>
+
+  <div *ngIf="userPendingSuggestions.length > 0 && showPendingRequests" class="p-field pending-requests">
+    <div class="pending-header">
+      <div class="pending-title">
+        Your pending requests
+      </div>
+    </div>
+    <div class="pending-list">
+      <div *ngFor="let item of userPendingSuggestions" class="pending-item">
+        <div class="pending-info">
+          <div class="pending-name">{{ item.name }}</div>
+          <div class="pending-meta">
+            {{ item.version || 'Unknown version' }} • {{ item.base_model || 'Unknown base model' }}
+          </div>
+        </div>
+        <button pButton type="button" label="Cancel" icon="pi pi-times" class="p-button-danger pending-cancel-btn" (click)="cancelSuggestion(item)"></button>
+      </div>
+    </div>
+  </div>
+
   <!-- Mobile View: Card layout for LoRA results -->
   <div *ngIf="!isLoading && searchResults && searchResults.length > 0" class="p-field mobile-results">
-    <div *ngFor="let lora of searchResults" class="lora-card" [ngClass]="{'selected': lora === selectedLoRA}" (click)="selectLora(lora)">
+    <div *ngFor="let lora of searchResults" class="lora-card" 
+      [ngClass]="[getLoraStatusClass(lora), lora === selectedLoRA ? 'selected' : '']"
+      (click)="selectLora(lora)">
       <div class="lora-card-header">
         <!-- Image click triggers the image expansion dialog -->
         <img *ngIf="lora.images && lora.images.length > 0" [src]="lora.images[0].url" alt="LoRA Preview" class="preview-image" (click)="openImageDialog(lora.images[0].url)" />
         <div class="lora-card-title">{{ lora.name }}</div>
+        <ng-container *ngIf="getLoraStatus(lora) as status">
+          <span class="status-pill" [ngClass]="'status-' + status">{{ statusLabels[status] }}</span>
+        </ng-container>
       </div>
       <div class="lora-card-body">
         <div class="lora-creator">