diff --git a/static/css/components/download-modal.css b/static/css/components/download-modal.css index ae528b87..ceab416e 100644 --- a/static/css/components/download-modal.css +++ b/static/css/components/download-modal.css @@ -237,4 +237,61 @@ [data-theme="dark"] .local-path { background: var(--lora-surface); border-color: var(--lora-border); +} + +/* Add disabled button styles */ +.primary-btn.disabled { + background-color: var(--border-color); + color: var(--text-color); + opacity: 0.7; + cursor: not-allowed; +} + +/* Enhance the local badge to make it more noticeable */ +.version-item.exists-locally { + background: oklch(var(--lora-accent) / 0.05); + border-left: 4px solid var(--lora-accent); +} + +.local-badge { + display: inline-flex; + align-items: center; + background: var(--lora-accent); + color: var(--lora-text); + padding: 4px 8px; + border-radius: var(--border-radius-xs); + font-size: 0.8em; + font-weight: 500; + white-space: nowrap; + flex-shrink: 0; + position: relative; +} + +.local-badge i { + margin-right: 4px; + font-size: 0.9em; +} + +.local-path { + display: none; + position: absolute; + top: 100%; + right: 0; + background: var(--card-bg); + border: 1px solid var(--border-color); + 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-all; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + z-index: 1; + min-width: 200px; + max-width: 300px; +} + +.local-badge:hover .local-path { + display: block; } \ No newline at end of file diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js index 08470889..2a0f5746 100644 --- a/static/js/managers/DownloadManager.js +++ b/static/js/managers/DownloadManager.js @@ -154,21 +154,45 @@ export class DownloadManager { `; }).join(''); + + // Update Next button state based on initial selection + this.updateNextButtonState(); } selectVersion(versionId) { this.currentVersion = this.versions.find(v => v.id.toString() === versionId.toString()); if (!this.currentVersion) return; - // Check if version exists locally - const existsLocally = this.currentVersion.files[0]?.existsLocally; - if (existsLocally) { - showToast('This version already exists in your library', 'info'); - } + // Remove the toast notification - it's redundant with the visual indicator + // const existsLocally = this.currentVersion.files[0]?.existsLocally; + // if (existsLocally) { + // showToast('This version already exists in your library', 'info'); + // } document.querySelectorAll('.version-item').forEach(item => { item.classList.toggle('selected', item.querySelector('h3').textContent === this.currentVersion.name); }); + + // Update Next button state after selection + this.updateNextButtonState(); + } + + // Add new method to update Next button state + updateNextButtonState() { + const nextButton = document.querySelector('#versionStep .primary-btn'); + if (!nextButton) return; + + const existsLocally = this.currentVersion?.files[0]?.existsLocally; + + if (existsLocally) { + nextButton.disabled = true; + nextButton.classList.add('disabled'); + nextButton.textContent = 'Already in Library'; + } else { + nextButton.disabled = false; + nextButton.classList.remove('disabled'); + nextButton.textContent = 'Next'; + } } async proceedToLocation() { @@ -176,6 +200,13 @@ export class DownloadManager { showToast('Please select a version', 'error'); return; } + + // Double-check if the version exists locally + const existsLocally = this.currentVersion.files[0]?.existsLocally; + if (existsLocally) { + showToast('This version already exists in your library', 'info'); + return; + } document.getElementById('versionStep').style.display = 'none'; document.getElementById('locationStep').style.display = 'block';