Add path preview feature in DownloadManager; update target path display on folder selection and input changes

static/css/style.css

@@ -1413,4 +1413,78 @@ body.modal-open {
 .folder-item.selected {
     background: oklch(var(--lora-accent) / 0.1);
     border: 1px solid var(--lora-accent);
+}
+
+/* Path Preview Styles */
+.path-preview {
+    margin-bottom: var(--space-3);
+    padding: var(--space-2);
+    background: var(--bg-color);
+    border-radius: var(--border-radius-sm);
+    border: 1px dashed var(--border-color);
+}
+
+.path-preview label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-color);
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+.path-display {
+    padding: var(--space-1);
+    color: var(--text-color);
+    font-family: monospace;
+    font-size: 0.9em;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    word-break: break-all;
+    opacity: 0.85;
+    background: var(--lora-surface);
+    border-radius: var(--border-radius-xs);
+}
+
+.path-text {
+    color: var(--text-color);
+}
+
+.path-preview {
+    margin-top: var(--space-2);
+    padding: var(--space-2);
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+    border-radius: var(--border-radius-sm);
+}
+
+.path-preview label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-color);
+    font-size: 0.9em;
+}
+
+.path-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: var(--space-1);
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    color: var(--text-color);
+    font-family: monospace;
+    font-size: 0.9em;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.path-display i {
+    color: var(--lora-accent);
+    opacity: 0.8;
+}
+
+.path-text {
+    color: var(--text-color);
+    opacity: 0.9;
 }

static/js/managers/DownloadManager.js

@@ -18,6 +18,7 @@ export class DownloadManager {
         // Add LoadingManager instance
         this.loadingManager = new LoadingManager();
         this.folderClickHandler = null;  // Add this line
+        this.updateTargetPath = this.updateTargetPath.bind(this);
     }
 
     showDownloadModal() {
@@ -44,6 +45,13 @@ export class DownloadManager {
         document.getElementById('urlStep').style.display = 'block';
         document.getElementById('loraUrl').value = '';
         document.getElementById('urlError').textContent = '';
+        
+        // Clear new folder input
+        const newFolderInput = document.getElementById('newFolder');
+        if (newFolderInput) {
+            newFolderInput.value = '';
+        }
+        
         this.currentVersion = null;
         this.versions = [];
         this.modelInfo = null;
@@ -274,10 +282,23 @@ export class DownloadManager {
                 folderItem.classList.add('selected');
                 this.selectedFolder = folderItem.dataset.folder;
             }
+            
+            // Update path display after folder selection
+            this.updateTargetPath();
         };
 
         // Add the new handler
         folderBrowser.addEventListener('click', this.folderClickHandler);
+        
+        // Add event listeners for path updates
+        const loraRoot = document.getElementById('loraRoot');
+        const newFolder = document.getElementById('newFolder');
+        
+        loraRoot.addEventListener('change', this.updateTargetPath);
+        newFolder.addEventListener('input', this.updateTargetPath);
+        
+        // Update initial path
+        this.updateTargetPath();
     }
 
     cleanupFolderBrowser() {
@@ -288,5 +309,32 @@ export class DownloadManager {
                 this.folderClickHandler = null;
             }
         }
+        
+        // Remove path update listeners
+        const loraRoot = document.getElementById('loraRoot');
+        const newFolder = document.getElementById('newFolder');
+        
+        loraRoot.removeEventListener('change', this.updateTargetPath);
+        newFolder.removeEventListener('input', this.updateTargetPath);
+    }
+    
+    // Add new method to update target path
+    updateTargetPath() {
+        const pathDisplay = document.getElementById('targetPathDisplay');
+        const loraRoot = document.getElementById('loraRoot').value;
+        const newFolder = document.getElementById('newFolder').value.trim();
+        
+        let fullPath = loraRoot || 'Select a LoRA root directory';
+        
+        if (loraRoot) {
+            if (this.selectedFolder) {
+                fullPath += '/' + this.selectedFolder;
+            }
+            if (newFolder) {
+                fullPath += '/' + newFolder;
+            }
+        }
+
+        pathDisplay.innerHTML = `<span class="path-text">${fullPath}</span>`;
     }
 }

templates/components/modals.html

@@ -46,6 +46,14 @@
         <!-- Step 3: Location Selection -->
         <div class="download-step" id="locationStep" style="display: none;">
             <div class="location-selection">
+                <!-- Move path preview to top -->
+                <div class="path-preview">
+                    <label>Download Location Preview:</label>
+                    <div class="path-display" id="targetPathDisplay">
+                        <span class="path-text">Select a LoRA root directory</span>
+                    </div>
+                </div>
+
                 <div class="input-group">
                     <label>Select LoRA Root:</label>
                     <select id="loraRoot"></select>
@@ -53,7 +61,6 @@
                 <div class="input-group">
                     <label>Target Folder:</label>
                     <div class="folder-browser" id="folderBrowser">
-                        <!-- Folders will be dynamically inserted here -->
                         {% for folder in folders %}
                             {% if folder %}
                             <div class="folder-item" data-folder="{{ folder }}">