feat(download-history): add downloaded status UX

static/css/components/shared.css

@@ -21,6 +21,56 @@
     font-size: 0.9em;
 }
 
+.downloaded-badge {
+    display: inline-flex;
+    align-items: center;
+    background: color-mix(in oklch, var(--badge-update-bg, #4a90e2) 22%, transparent);
+    color: var(--badge-update-bg, #4a90e2);
+    border: 1px solid color-mix(in oklch, var(--badge-update-bg, #4a90e2) 50%, transparent);
+    padding: 4px 8px;
+    border-radius: var(--border-radius-xs);
+    font-size: 0.8em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+    position: relative;
+    transform: translateZ(0);
+    will-change: transform;
+}
+
+.downloaded-badge i {
+    margin-right: 4px;
+    font-size: 0.9em;
+}
+
+.downloaded-info {
+    display: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background: var(--card-bg);
+    border: 1px solid color-mix(in oklch, var(--badge-update-bg, #4a90e2) 50%, transparent);
+    border-radius: var(--border-radius-xs);
+    padding: var(--space-1);
+    margin-top: 4px;
+    font-size: 0.9em;
+    color: var(--text-color);
+    white-space: normal;
+    word-break: break-word;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    min-width: 240px;
+    max-width: 320px;
+    transform: translateZ(0);
+    position: fixed;
+    pointer-events: none;
+}
+
+.downloaded-badge:hover .downloaded-info {
+    display: block;
+    pointer-events: auto;
+}
+
 /* Early Access Badge */
 .early-access-badge {
     display: inline-flex;
@@ -108,4 +158,4 @@
     color: var(--lora-error);
     font-size: 0.9em;
     margin-top: 4px;
-}
+}

static/js/components/shared/ModelVersionsTab.js

@@ -433,7 +433,13 @@ function renderRow(version, options) {
 
     if (version.isInLibrary) {
         badges.push(buildBadge(translate('modals.model.versions.badges.inLibrary', {}, 'In Library'), 'success'));
-    } else if (isNewer && !version.shouldIgnore) {
+    }
+
+    if (!version.isInLibrary && version.hasBeenDownloaded) {
+        badges.push(buildBadge(translate('modals.model.versions.badges.downloaded', {}, 'Downloaded'), 'info'));
+    }
+
+    if (!version.isInLibrary && isNewer && !version.shouldIgnore) {
         badges.push(buildBadge(translate('modals.model.versions.badges.newer', {}, 'Newer Version'), 'info'));
     }
 

static/js/managers/DownloadManager.js

@@ -250,6 +250,7 @@ export class DownloadManager {
                 (version.files[0]?.sizeKB / 1024).toFixed(2);
 
             const existsLocally = version.existsLocally;
+            const hasBeenDownloaded = version.hasBeenDownloaded && !existsLocally;
             const localPath = version.localPath;
             const isEarlyAccess = version.availability === 'EarlyAccess';
 
@@ -262,11 +263,22 @@ export class DownloadManager {
                 `;
             }
 
-            const localStatus = existsLocally ?
-                `<div class="local-badge">
+            let localStatus = '';
+            if (existsLocally) {
+                localStatus = `<div class="local-badge">
                     <i class="fas fa-check"></i> ${translate('modals.download.inLibrary')}
                     <div class="local-path">${localPath || ''}</div>
-                 </div>` : '';
+                 </div>`;
+            } else if (hasBeenDownloaded) {
+                localStatus = `<div class="downloaded-badge">
+                    <i class="fas fa-history"></i> ${translate('modals.download.downloaded', {}, 'Downloaded')}
+                    <div class="downloaded-info">${translate(
+                        'modals.download.downloadedTooltip',
+                        {},
+                        'Previously downloaded, but it is not currently in your library.'
+                    )}</div>
+                 </div>`;
+            }
 
             return `
                 <div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}