feat: enhance Lora modal recipes section with new header and card components

- Add comprehensive recipes header with title, description, and view-all button
- Implement recipe card grid layout with responsive design
- Add recipe cards featuring titles, metadata badges, and copy functionality
- Include theme-aware styling for both light and dark modes
- Improve visual hierarchy and user interaction with hover states and transitions

static/js/components/shared/RecipeTab.js

@@ -61,80 +61,178 @@ function renderRecipes(tabElement, recipes, loraName, loraHash) {
         return;
     }
 
-    // Create header with count and view all button
     const headerElement = document.createElement('div');
     headerElement.className = 'recipes-header';
-    headerElement.innerHTML = `
-        <h3>Found ${recipes.length} recipe${recipes.length > 1 ? 's' : ''} using this Lora</h3>
-        <button class="view-all-btn" title="View all in Recipes page">
-            <i class="fas fa-external-link-alt"></i> View All in Recipes
-        </button>
-    `;
-    
-    // Add click handler for "View All" button
-    headerElement.querySelector('.view-all-btn').addEventListener('click', () => {
+
+    const headerText = document.createElement('div');
+    headerText.className = 'recipes-header__text';
+
+    const eyebrow = document.createElement('span');
+    eyebrow.className = 'recipes-header__eyebrow';
+    eyebrow.textContent = 'Linked recipes';
+    headerText.appendChild(eyebrow);
+
+    const title = document.createElement('h3');
+    title.textContent = `${recipes.length} recipe${recipes.length > 1 ? 's' : ''} using this Lora`;
+    headerText.appendChild(title);
+
+    const description = document.createElement('p');
+    description.className = 'recipes-header__description';
+    description.textContent = loraName ?
+        `Discover workflows crafted for ${loraName}.` :
+        'Discover workflows crafted for this model.';
+    headerText.appendChild(description);
+
+    headerElement.appendChild(headerText);
+
+    const viewAllButton = document.createElement('button');
+    viewAllButton.className = 'recipes-header__view-all';
+    viewAllButton.type = 'button';
+    viewAllButton.title = 'View all recipes in Recipes page';
+
+    const viewAllIcon = document.createElement('i');
+    viewAllIcon.className = 'fas fa-external-link-alt';
+    viewAllIcon.setAttribute('aria-hidden', 'true');
+
+    const viewAllLabel = document.createElement('span');
+    viewAllLabel.textContent = 'View all recipes';
+
+    viewAllButton.append(viewAllIcon, viewAllLabel);
+    headerElement.appendChild(viewAllButton);
+
+    viewAllButton.addEventListener('click', () => {
         navigateToRecipesPage(loraName, loraHash);
     });
-    
-    // Create grid container for recipe cards
+
     const cardGrid = document.createElement('div');
-    cardGrid.className = 'card-grid';
+    cardGrid.className = 'card-grid recipes-card-grid';
     
-    // Create recipe cards matching the structure in recipes.html
     recipes.forEach(recipe => {
-        // Get basic info
         const baseModel = recipe.base_model || '';
         const loras = recipe.loras || [];
         const lorasCount = loras.length;
         const missingLorasCount = loras.filter(lora => !lora.inLibrary && !lora.isDeleted).length;
         const allLorasAvailable = missingLorasCount === 0 && lorasCount > 0;
+        const statusClass = lorasCount === 0 ? 'empty' : (allLorasAvailable ? 'ready' : 'missing');
+        let statusLabel;
+
+        if (lorasCount === 0) {
+            statusLabel = 'No linked LoRAs';
+        } else if (allLorasAvailable) {
+            statusLabel = `${lorasCount} LoRA${lorasCount > 1 ? 's' : ''} ready`;
+        } else {
+            statusLabel = `Missing ${missingLorasCount} of ${lorasCount}`;
+        }
         
-        // Ensure file_url exists, fallback to file_path if needed
         const imageUrl = recipe.file_url || 
                          (recipe.file_path ? `/loras_static/root1/preview/${recipe.file_path.split('/').pop()}` : 
                          '/loras_static/images/no-preview.png');
-        
-        // Create card element matching the structure in recipes.html
-        const card = document.createElement('div');
-        card.className = 'model-card';
+
+        const card = document.createElement('article');
+        card.className = 'recipe-card';
         card.dataset.filePath = recipe.file_path || '';
         card.dataset.title = recipe.title || '';
         card.dataset.created = recipe.created_date || '';
         card.dataset.id = recipe.id || '';
-        
-        card.innerHTML = `
-            <div class="card-preview">
-                <img src="${imageUrl}" alt="${recipe.title}" loading="lazy">
-                <div class="card-header">
-                    ${baseModel ? `<span class="base-model-label" title="${baseModel}">${baseModel}</span>` : ''}
-                    <div class="card-actions">
-                        <i class="fas fa-copy" title="Copy Recipe Syntax"></i>
-                    </div>
-                </div>
-                <div class="card-footer">
-                    <div class="model-info">
-                        <span class="model-name">${recipe.title}</span>
-                    </div>
-                    <div class="lora-count ${allLorasAvailable ? 'ready' : (lorasCount > 0 ? 'missing' : '')}" 
-                         title="${getLoraStatusTitle(lorasCount, missingLorasCount)}">
-                        <i class="fas fa-layer-group"></i> ${lorasCount}
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        // Add event listeners for action buttons
-        card.querySelector('.fa-copy').addEventListener('click', (e) => {
-            e.stopPropagation();
+
+        card.setAttribute('role', 'button');
+        card.setAttribute('tabindex', '0');
+        card.setAttribute('aria-label', recipe.title ? `View recipe ${recipe.title}` : 'View recipe details');
+
+        const media = document.createElement('div');
+        media.className = 'recipe-card__media';
+
+        const image = document.createElement('img');
+        image.loading = 'lazy';
+        image.src = imageUrl;
+        image.alt = recipe.title ? `${recipe.title} preview` : 'Recipe preview';
+        media.appendChild(image);
+
+        const mediaTop = document.createElement('div');
+        mediaTop.className = 'recipe-card__media-top';
+
+        const copyButton = document.createElement('button');
+        copyButton.className = 'recipe-card__copy';
+        copyButton.type = 'button';
+        copyButton.title = 'Copy recipe syntax';
+        copyButton.setAttribute('aria-label', 'Copy recipe syntax');
+
+        const copyIcon = document.createElement('i');
+        copyIcon.className = 'fas fa-copy';
+        copyIcon.setAttribute('aria-hidden', 'true');
+        copyButton.appendChild(copyIcon);
+
+        mediaTop.appendChild(copyButton);
+        media.appendChild(mediaTop);
+
+        const body = document.createElement('div');
+        body.className = 'recipe-card__body';
+
+        const titleElement = document.createElement('h4');
+        titleElement.className = 'recipe-card__title';
+        titleElement.textContent = recipe.title || 'Untitled recipe';
+        titleElement.title = recipe.title || 'Untitled recipe';
+        body.appendChild(titleElement);
+
+        const meta = document.createElement('div');
+        meta.className = 'recipe-card__meta';
+
+        if (baseModel) {
+            const baseBadge = document.createElement('span');
+            baseBadge.className = 'recipe-card__badge recipe-card__badge--base';
+            baseBadge.textContent = baseModel;
+            baseBadge.title = baseModel;
+            meta.appendChild(baseBadge);
+        }
+
+        const statusBadge = document.createElement('span');
+        statusBadge.className = `recipe-card__badge recipe-card__badge--${statusClass}`;
+
+        const statusIcon = document.createElement('i');
+        statusIcon.className = 'fas fa-layer-group';
+        statusIcon.setAttribute('aria-hidden', 'true');
+        statusBadge.appendChild(statusIcon);
+
+        const statusText = document.createElement('span');
+        statusText.textContent = statusLabel;
+        statusBadge.appendChild(statusText);
+
+        statusBadge.title = getLoraStatusTitle(lorasCount, missingLorasCount);
+        meta.appendChild(statusBadge);
+
+        body.appendChild(meta);
+
+        const cta = document.createElement('div');
+        cta.className = 'recipe-card__cta';
+
+        const ctaText = document.createElement('span');
+        ctaText.textContent = 'View details';
+
+        const ctaIcon = document.createElement('i');
+        ctaIcon.className = 'fas fa-arrow-right';
+        ctaIcon.setAttribute('aria-hidden', 'true');
+
+        cta.append(ctaText, ctaIcon);
+        body.appendChild(cta);
+
+        copyButton.addEventListener('click', (event) => {
+            event.stopPropagation();
             copyRecipeSyntax(recipe.id);
         });
-        
-        // Add click handler for the entire card
+
         card.addEventListener('click', () => {
             navigateToRecipeDetails(recipe.id);
         });
-        
-        // Add card to grid
+
+        card.addEventListener('keydown', (event) => {
+            if (event.target !== card) return;
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                navigateToRecipeDetails(recipe.id);
+            }
+        });
+
+        card.append(media, body);
         cardGrid.appendChild(card);
     });
     
@@ -226,4 +324,4 @@ function navigateToRecipeDetails(recipeId) {
     
     // Directly navigate to recipes page
     window.location.href = '/loras/recipes';
-}
+}