feat: Enhance creator info display and add Civitai view functionality in ModelModal

static/css/components/lora-modal/lora-modal.css

@@ -436,12 +436,13 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: var(--space-1);
+    padding: 2px 10px;
-    padding: 6px 10px;
     background: rgba(0, 0, 0, 0.03);
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-sm);
     max-width: fit-content;
+    cursor: pointer;
+    transition: all 0.2s;
 }
 
 [data-theme="dark"] .creator-info {
@@ -482,8 +483,43 @@
     color: var(--text-color);
 }
 
-/* Optional: add hover effect for creator info */
+/* Add hover effect for creator info */
 .creator-info:hover {
     background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
     border-color: var(--lora-accent);
+    transform: translateY(-1px);
+}
+
+.creator-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: var(--space-1);
+    flex-wrap: wrap;
+}
+
+.civitai-view-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--lora-accent);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    font-size: 0.9em;
+    transition: all 0.2s;
+}
+
+.civitai-view-btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.civitai-view-btn i {
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

static/js/components/shared/ModelModal.js

@@ -1,4 +1,4 @@
-import { showToast } from '../../utils/uiHelpers.js';
+import { showToast, openCivitai } from '../../utils/uiHelpers.js';
 import { modalManager } from '../../managers/ModalManager.js';
 import { 
     toggleShowcase,
@@ -95,18 +95,25 @@ export function showModelModal(model, modelType) {
                     </button>
                 </div>
 
-                ${model.civitai?.creator ? `
+                <div class="creator-actions">
-                <div class="creator-info">
+                    ${model.from_civitai ? `
-                    ${model.civitai.creator.image ? 
+                    <button class="civitai-view-btn" title="View on Civitai" data-action="view-civitai" data-filepath="${model.file_path}">
-                        `<div class="creator-avatar">
+                        <i class="fas fa-globe"></i> View on Civitai
-                            <img src="${model.civitai.creator.image}" alt="${model.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
+                    </button>` : ''}
-                        </div>` : 
+
-                        `<div class="creator-avatar creator-placeholder">
+                    ${model.civitai?.creator ? `
-                            <i class="fas fa-user"></i>
+                    <div class="creator-info" data-username="${model.civitai.creator.username}" data-action="view-creator" title="View Creator Profile">
-                        </div>`
+                        ${model.civitai.creator.image ? 
-                    }
+                            `<div class="creator-avatar">
-                    <span class="creator-username">${model.civitai.creator.username}</span>
+                                <img src="${model.civitai.creator.image}" alt="${model.civitai.creator.username}" onerror="this.onerror=null; this.src='static/icons/user-placeholder.png';">
-                </div>` : ''}
+                            </div>` : 
+                            `<div class="creator-avatar creator-placeholder">
+                                <i class="fas fa-user"></i>
+                            </div>`
+                        }
+                        <span class="creator-username">${model.civitai.creator.username}</span>
+                    </div>` : ''}
+                </div>
 
                 ${renderCompactTags(model.tags || [], model.file_path)}
             </header>
@@ -269,6 +276,15 @@ function setupEventHandlers(filePath) {
             case 'scroll-to-top':
                 scrollToTop(target);
                 break;
+            case 'view-civitai':
+                openCivitai(target.dataset.filepath);
+                break;
+            case 'view-creator':
+                const username = target.dataset.username;
+                if (username) {
+                    window.open(`https://civitai.com/user/${username}`, '_blank');
+                }
+                break;
         }
     }