Add recipe tags functionality to RecipeModal

- Implemented display of recipe tags in a compact format within the RecipeModal.
- Added tooltip for additional tags with hover functionality.
- Updated CSS styles for recipe tags and tooltips to enhance visual presentation.
- Adjusted layout and padding in related components for improved aesthetics.

static/css/components/recipe-modal.css

@@ -6,6 +6,93 @@
     border-bottom: 1px solid var(--lora-border);
 }
 
+/* Recipe Tags styles */
+.recipe-tags-container {
+    position: relative;
+    margin-top: 6px;
+    margin-bottom: 10px;
+}
+
+.recipe-tags-compact {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    align-items: center;
+}
+
+.recipe-tag-compact {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-xs);
+    padding: 2px 8px;
+    font-size: 0.75em;
+    color: var(--text-color);
+    white-space: nowrap;
+}
+
+[data-theme="dark"] .recipe-tag-compact {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.recipe-tag-more {
+    background: var(--lora-accent);
+    color: var(--lora-text);
+    border-radius: var(--border-radius-xs);
+    padding: 2px 8px;
+    font-size: 0.75em;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.recipe-tags-tooltip {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+    padding: 10px 14px;
+    max-width: 400px;
+    z-index: 10;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: all 0.2s ease;
+    pointer-events: none;
+}
+
+.recipe-tags-tooltip.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+.tooltip-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.tooltip-tag {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-xs);
+    padding: 3px 8px;
+    font-size: 0.75em;
+    color: var(--text-color);
+}
+
+[data-theme="dark"] .tooltip-tag {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
 /* Top Section: Preview and Gen Params */
 .recipe-top-section {
     display: grid;
@@ -205,7 +292,7 @@
 .recipe-loras-list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     overflow-y: auto;
     flex: 1;
 }
@@ -213,7 +300,7 @@
 .recipe-lora-item {
     display: flex;
     gap: var(--space-2);
-    padding: var(--space-2);
+    padding: 10px var(--space-2);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     background: var(--bg-color);
@@ -229,8 +316,8 @@
 }
 
 .recipe-lora-thumbnail {
-    width: 50px;
-    height: 50px;
+    width: 46px;
+    height: 46px;
     flex-shrink: 0;
     border-radius: var(--border-radius-xs);
     overflow: hidden;
@@ -246,7 +333,7 @@
 .recipe-lora-content {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
     flex: 1;
     min-width: 0;
 }
@@ -291,10 +378,9 @@
     padding: 2px 8px;
     border-radius: var(--border-radius-xs);
     font-size: 0.85em;
+    color: var(--lora-accent);
 }
 
-
-
 .missing-badge {
     display: inline-flex;
     align-items: center;

static/js/components/RecipeModal.js

@@ -11,13 +11,71 @@ class RecipeModal {
     }
     
     showRecipeDetails(recipe) {
-        console.log(recipe);
         // Set modal title
         const modalTitle = document.getElementById('recipeModalTitle');
         if (modalTitle) {
             modalTitle.textContent = recipe.title || 'Recipe Details';
         }
         
+        // Set recipe tags if they exist
+        const tagsCompactElement = document.getElementById('recipeTagsCompact');
+        const tagsTooltipContent = document.getElementById('recipeTagsTooltipContent');
+        
+        if (tagsCompactElement && tagsTooltipContent && recipe.tags && recipe.tags.length > 0) {
+            // Clear previous tags
+            tagsCompactElement.innerHTML = '';
+            tagsTooltipContent.innerHTML = '';
+            
+            // Limit displayed tags to 5, show a "+X more" button if needed
+            const maxVisibleTags = 5;
+            const visibleTags = recipe.tags.slice(0, maxVisibleTags);
+            const remainingTags = recipe.tags.length > maxVisibleTags ? recipe.tags.slice(maxVisibleTags) : [];
+            
+            // Add visible tags
+            visibleTags.forEach(tag => {
+                const tagElement = document.createElement('div');
+                tagElement.className = 'recipe-tag-compact';
+                tagElement.textContent = tag;
+                tagsCompactElement.appendChild(tagElement);
+            });
+            
+            // Add "more" button if needed
+            if (remainingTags.length > 0) {
+                const moreButton = document.createElement('div');
+                moreButton.className = 'recipe-tag-more';
+                moreButton.textContent = `+${remainingTags.length} more`;
+                tagsCompactElement.appendChild(moreButton);
+                
+                // Add tooltip functionality
+                moreButton.addEventListener('mouseenter', () => {
+                    document.getElementById('recipeTagsTooltip').classList.add('visible');
+                });
+                
+                moreButton.addEventListener('mouseleave', () => {
+                    setTimeout(() => {
+                        if (!document.getElementById('recipeTagsTooltip').matches(':hover')) {
+                            document.getElementById('recipeTagsTooltip').classList.remove('visible');
+                        }
+                    }, 300);
+                });
+                
+                document.getElementById('recipeTagsTooltip').addEventListener('mouseleave', () => {
+                    document.getElementById('recipeTagsTooltip').classList.remove('visible');
+                });
+                
+                // Add all tags to tooltip
+                recipe.tags.forEach(tag => {
+                    const tooltipTag = document.createElement('div');
+                    tooltipTag.className = 'tooltip-tag';
+                    tooltipTag.textContent = tag;
+                    tagsTooltipContent.appendChild(tooltipTag);
+                });
+            }
+        } else if (tagsCompactElement) {
+            // No tags to display
+            tagsCompactElement.innerHTML = '';
+        }
+        
         // Set recipe image
         const modalImage = document.getElementById('recipeModalImage');
         if (modalImage) {
@@ -140,11 +198,11 @@ class RecipeModal {
                                 <h4>${lora.modelName}</h4>
                                 ${localStatus}
                             </div>
-                            ${lora.modelVersionName ? `<div class="recipe-lora-version">${lora.modelVersionName}</div>` : ''}
                             <div class="recipe-lora-info">
-                                ${lora.baseModel ? `<div class="base-model">${lora.baseModel}</div>` : ''}
+                                ${lora.modelVersionName ? `<div class="recipe-lora-version">${lora.modelVersionName}</div>` : ''}
                                 <div class="recipe-lora-weight">Weight: ${lora.strength || 1.0}</div>
                             </div>
+                            ${lora.baseModel ? `<div class="recipe-lora-info"><div class="base-model">${lora.baseModel}</div></div>` : ''}
                         </div>
                     </div>
                 `;

templates/components/recipe_modal.html

@@ -4,6 +4,13 @@
         
         <header class="recipe-modal-header">
             <h2 id="recipeModalTitle">Recipe Details</h2>
+            <!-- Recipe Tags Container -->
+            <div class="recipe-tags-container">
+                <div class="recipe-tags-compact" id="recipeTagsCompact"></div>
+                <div class="recipe-tags-tooltip" id="recipeTagsTooltip">
+                    <div class="tooltip-content" id="recipeTagsTooltipContent"></div>
+                </div>
+            </div>
         </header>
         
         <div class="modal-body">