Refactor recipe card styles and update HTML structure

- Migrated CSS styles from recipe-card.css to card.css for better organization.
- Updated recipe card class names in HTML to align with new styling conventions.
- Enhanced card layout with additional flex properties for improved responsiveness.
- Adjusted infinite scroll debounce timing for better performance.

static/css/components/card.css

@@ -20,6 +20,9 @@
     aspect-ratio: 896/1152;
     max-width: 260px; /* Adjusted from 320px to fit 5 cards */
     margin: 0 auto;
+    cursor: pointer; /* Added from recipe-card */
+    display: flex; /* Added from recipe-card */
+    flex-direction: column; /* Added from recipe-card */
 }
 
 .lora-card:hover {
@@ -275,3 +278,54 @@
     backdrop-filter: blur(2px);
     font-size: 0.85em;
 }
+
+/* Recipe specific elements - migrated from recipe-card.css */
+.recipe-indicator {
+    position: absolute;
+    top: 6px;
+    left: 8px;
+    width: 24px;
+    height: 24px;
+    background: var(--lora-primary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    z-index: 2;
+}
+
+.base-model-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 32px; /* For accommodating the recipe indicator */
+}
+
+.lora-count {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.85em;
+    position: relative;
+}
+
+.lora-count.ready {
+    background: rgba(46, 204, 113, 0.3);
+}
+
+.lora-count.missing {
+    background: rgba(231, 76, 60, 0.3);
+}
+
+.placeholder-message {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 2rem;
+    background: var(--lora-surface-alt);
+    border-radius: var(--border-radius-base);
+}

static/css/components/recipe-card.css

@@ -27,6 +27,7 @@
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     transition: all 0.2s ease;
+    aspect-ratio: 896/1152;
     cursor: pointer;
     display: flex;
     flex-direction: column;

static/js/components/RecipeCard.js

@@ -11,7 +11,7 @@ class RecipeCard {
     
     createCardElement() {
         const card = document.createElement('div');
-        card.className = 'recipe-card';
+        card.className = 'lora-card';
         card.dataset.filePath = this.recipe.file_path;
         card.dataset.title = this.recipe.title;
         card.dataset.created = this.recipe.created_date;

static/js/utils/infiniteScroll.js

@@ -43,7 +43,7 @@ export function initializeInfiniteScroll(pageType = 'loras') {
             break;
     }
 
-    const debouncedLoadMore = debounce(loadMoreFunction, 200);
+    const debouncedLoadMore = debounce(loadMoreFunction, 100);
 
     state.observer = new IntersectionObserver(
         (entries) => {

templates/recipes.html

@@ -4,7 +4,7 @@
 {% block page_id %}recipes{% endblock %}
 
 {% block page_css %}
-<link rel="stylesheet" href="/loras_static/css/components/recipe-card.css">
+<link rel="stylesheet" href="/loras_static/css/components/card.css">
 <link rel="stylesheet" href="/loras_static/css/components/recipe-modal.css">
 <link rel="stylesheet" href="/loras_static/css/components/import-modal.css">
 {% endblock %}
@@ -33,10 +33,10 @@
     </div>
     
     <!-- Recipe grid -->
-    <div class="card-grid recipe-grid" id="recipeGrid">
+    <div class="card-grid" id="recipeGrid">
         {% if recipes and recipes|length > 0 %}
             {% for recipe in recipes %}
-                <div class="recipe-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
+                <div class="lora-card" data-file-path="{{ recipe.file_path }}" data-title="{{ recipe.title }}" data-created="{{ recipe.created_date }}">
                     <div class="recipe-indicator" title="Recipe">R</div>
                     <div class="card-preview">
                         <img src="{{ recipe.file_url }}" alt="{{ recipe.title }}">