Add tag info and filtering

static/js/components/LoraModal.js

@@ -15,7 +15,7 @@ export function showLoraModal(lora) {
                         <i class="fas fa-save"></i>
                     </button>
                 </div>
-                ${renderTags(lora.tags || [])}
+                ${renderCompactTags(lora.tags || [])}
             </header>
 
             <div class="modal-body">
@@ -119,6 +119,7 @@ export function showLoraModal(lora) {
     setupEditableFields();
     setupShowcaseScroll();
     setupTabSwitching();
+    setupTagTooltip();
     
     // If we have a model ID but no description, fetch it
     if (lora.civitai?.modelId && !lora.modelDescription) {
@@ -694,4 +695,47 @@ window.copyTag = async function(tag) {
         console.error('Copy failed:', err);
         showToast('Copy failed', 'error');
     }
-};
+};
+
+// New function to render compact tags with tooltip
+function renderCompactTags(tags) {
+    if (!tags || tags.length === 0) return '';
+    
+    // Display up to 5 tags, with a tooltip indicator if there are more
+    const visibleTags = tags.slice(0, 5);
+    const remainingCount = Math.max(0, tags.length - 5);
+    
+    return `
+        <div class="model-tags-container">
+            <div class="model-tags-compact">
+                ${visibleTags.map(tag => `<span class="model-tag-compact">${tag}</span>`).join('')}
+                ${remainingCount > 0 ? 
+                    `<span class="model-tag-more" data-count="${remainingCount}">+${remainingCount}</span>` : 
+                    ''}
+            </div>
+            ${tags.length > 0 ? 
+                `<div class="model-tags-tooltip">
+                    <div class="tooltip-content">
+                        ${tags.map(tag => `<span class="tooltip-tag">${tag}</span>`).join('')}
+                    </div>
+                </div>` : 
+                ''}
+        </div>
+    `;
+}
+
+// Setup tooltip functionality
+function setupTagTooltip() {
+    const tagsContainer = document.querySelector('.model-tags-container');
+    const tooltip = document.querySelector('.model-tags-tooltip');
+    
+    if (tagsContainer && tooltip) {
+        tagsContainer.addEventListener('mouseenter', () => {
+            tooltip.classList.add('visible');
+        });
+        
+        tagsContainer.addEventListener('mouseleave', () => {
+            tooltip.classList.remove('visible');
+        });
+    }
+}