From a2428b31b5f8b37a06e053700cd7c73f99d87226 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 14 Feb 2025 15:45:49 +0800
Subject: [PATCH] Enhance version selection UI with thumbnails and file size;
 improve modal click handling

---
 static/css/style.css                  | 77 +++++++++++++++++++++++++--
 static/js/managers/DownloadManager.js | 33 ++++++++----
 static/js/managers/ModalManager.js    | 14 ++---
 templates/components/modals.html      |  2 +-
 4 files changed, 107 insertions(+), 19 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index a35b58cb..5ef52569 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1125,21 +1125,32 @@ body.modal-open {
 }
 
 .version-list {
-    max-height: 300px;
+    max-height: 400px;
     overflow-y: auto;
     margin: var(--space-2) 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 1px;  /* Add padding to prevent border clipping */
 }
 
 .version-item {
+    display: flex;
+    gap: var(--space-2);
     padding: var(--space-2);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
-    margin-bottom: 8px;
     cursor: pointer;
+    transition: all 0.2s ease;
+    background: var(--bg-color);  /* Add background color */
+    margin: 1px;  /* Add margin to ensure hover effect visibility */
+    position: relative;  /* Add position context */
 }
 
 .version-item:hover {
-    background: var(--lora-surface);
+    border-color: var(--lora-accent);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Replace transform with shadow */
+    z-index: 1;  /* Ensure hover state appears above other items */
 }
 
 .version-item.selected {
@@ -1147,6 +1158,66 @@ body.modal-open {
     background: oklch(var(--lora-accent) / 0.1);
 }
 
+.version-thumbnail {
+    width: 80px;
+    height: 80px;
+    flex-shrink: 0;
+    border-radius: var(--border-radius-xs);
+    overflow: hidden;
+    background: var(--bg-color);
+}
+
+.version-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.version-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.version-content h3 {
+    margin: 0;
+    font-size: 1.1em;
+    color: var(--text-color);
+}
+
+.version-info {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    font-size: 0.9em;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+.version-info .base-model {
+    background: oklch(var(--lora-accent) / 0.1);
+    color: var(--lora-accent);
+    padding: 2px 8px;
+    border-radius: var(--border-radius-xs);
+}
+
+.version-meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+}
+
+.version-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
 .folder-browser {
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-xs);
diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js
index d5ca2b40..8ffd4027 100644
--- a/static/js/managers/DownloadManager.js
+++ b/static/js/managers/DownloadManager.js
@@ -97,16 +97,31 @@ export class DownloadManager {
         document.getElementById('versionStep').style.display = 'block';
         
         const versionList = document.getElementById('versionList');
-        versionList.innerHTML = this.versions.map(version => `
-            <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
-                 onclick="downloadManager.selectVersion('${version.id}')">
-                <h3>${version.name}</h3>
-                <div class="version-info">
-                    ${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
-                    <div class="version-date">${new Date(version.createdAt).toLocaleDateString()}</div>
+        versionList.innerHTML = this.versions.map(version => {
+            // Find first image (skip videos)
+            const firstImage = version.images?.find(img => !img.url.endsWith('.mp4'));
+            const thumbnailUrl = firstImage ? firstImage.url : '/loras_static/images/no-preview.png';
+            const fileSize = (version.files[0]?.sizeKB / 1024).toFixed(2); // Convert to MB
+
+            return `
+                <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
+                     onclick="downloadManager.selectVersion('${version.id}')">
+                    <div class="version-thumbnail">
+                        <img src="${thumbnailUrl}" alt="Version preview">
+                    </div>
+                    <div class="version-content">
+                        <h3>${version.name}</h3>
+                        <div class="version-info">
+                            ${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
+                        </div>
+                        <div class="version-meta">
+                            <span><i class="fas fa-calendar"></i> ${new Date(version.createdAt).toLocaleDateString()}</span>
+                            <span><i class="fas fa-file-archive"></i> ${fileSize} MB</span>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        `).join('');
+            `;
+        }).join('');
     }
 
     selectVersion(versionId) {
diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js
index fb9c869e..13b68e55 100644
--- a/static/js/managers/ModalManager.js
+++ b/static/js/managers/ModalManager.js
@@ -54,12 +54,14 @@ export class ModalManager {
             isOpen: false
         });
 
-        // Add click outside to close for each modal
-        config.element.addEventListener('click', (e) => {
-            if (e.target === config.element) {
-                this.closeModal(id);
-            }
-        });
+        // Only add click outside handler if it's not the download modal
+        if (id !== 'downloadModal') {
+            config.element.addEventListener('click', (e) => {
+                if (e.target === config.element) {
+                    this.closeModal(id);
+                }
+            });
+        }
     }
 
     getModal(id) {
diff --git a/templates/components/modals.html b/templates/components/modals.html
index 086556d4..b473a3ee 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -35,7 +35,7 @@
         <!-- Step 2: Version Selection -->
         <div class="download-step" id="versionStep" style="display: none;">
             <div class="version-list" id="versionList">
-                <!-- Versions will be inserted here -->
+                <!-- Versions will be inserted here dynamically -->
             </div>
             <div class="modal-actions">
                 <button class="secondary-btn" onclick="downloadManager.backToUrl()">Back</button>