From 9721fdbd0aca12ad18feafaa89eafafcea959bfe Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 17 May 2026 05:31:06 +0200
Subject: [PATCH] refactor(web): extract renderSearchControls method and expose
 search UI alongside download source

Move the inline search-control HTML block into a dedicated renderSearchControls()
method on LinkerManagerDialog so the search bar can be reused from multiple code paths.

Previously, the search controls were only rendered when no download source was known.
Now they are also shown when a download URL exists, giving users the ability to run a
search alongside the resolved download source.

Also normalises line endings on one affected line.
---
 web/linker.js | 72 +++++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/web/linker.js b/web/linker.js
index d125eda..bcad3d0 100644
--- a/web/linker.js
+++ b/web/linker.js
@@ -244,7 +244,7 @@ class LinkerManagerDialog extends ComfyDialog {
         this.syncSearchSourceUi(missing, container);
     }
 
-    renderDownloadSourceSection(missing, downloadSource) {
+    renderDownloadSourceSection(missing, downloadSource) {
         const filename = missing.original_path?.split('/').pop()?.split('\\').pop() || '';
         const isFromWorkflow = downloadSource.url_source === 'workflow';
         const isCivitaiSource = downloadSource.source === 'civitai';
@@ -346,6 +346,30 @@ class LinkerManagerDialog extends ComfyDialog {
         return html;
     }
 
+    renderSearchControls(missing) {
+        const searchSourcesId = `search-sources-${missing.node_id}-${missing.widget_index}`;
+        const searchSourceSelectId = `search-source-select-${missing.node_id}-${missing.widget_index}`;
+
+        let html = `<div id="${searchSourcesId}" class="ml-search-source-bar">`;
+        html += `<button id="search-${missing.node_id}-${missing.widget_index}" class="ml-btn ml-btn-link">`;
+        html += `${this.getSearchIconHtml()} Search`;
+        html += `</button>`;
+        html += `<div class="ml-search-source-picker">`;
+        html += `<label class="ml-search-source-picker-label" for="${searchSourceSelectId}">Source</label>`;
+        html += `<select id="${searchSourceSelectId}" class="ml-search-source-select">`;
+        html += `<option value="all">Everything</option>`;
+        html += `<option value="local">Local Database</option>`;
+        html += `<option value="huggingface">HuggingFace</option>`;
+        html += `<option value="civitai">CivitAI</option>`;
+        if (this.isSourceAvailable('lora_manager_archive')) {
+            html += `<option value="lora_manager_archive">LoRA Manager Archive</option>`;
+        }
+        html += `</select>`;
+        html += `</div>`;
+        html += `</div>`;
+        return html;
+    }
+
     renderProgressWithAction({
         percent = 0,
         leftText = '',
@@ -3842,37 +3866,23 @@ class LinkerManagerDialog extends ComfyDialog {
             html += `<span class="ml-download-info">Exact local match available</span>`;
             html += `</div>`;
             html += `</div>`;
-        } else if (downloadSource && downloadSource.url) {
-            html += this.renderDownloadSourceSection(missing, downloadSource);
-        } else if (missing.is_urn) {
-            html += `<div id="${urnDownloadId}" class="ml-download-section">`;
-            html += `<div class="ml-download-info">Resolving CivitAI download for this URN...</div>`;
+        } else if (downloadSource && downloadSource.url) {
+            html += this.renderDownloadSourceSection(missing, downloadSource);
+            html += `<div class="ml-download-section">`;
+            html += this.renderSearchControls(missing);
+            html += `</div>`;
+            html += `<div id="search-results-${missing.node_id}-${missing.widget_index}" class="ml-search-results"></div>`;
+        } else if (missing.is_urn) {
+            html += `<div id="${urnDownloadId}" class="ml-download-section">`;
+            html += `<div class="ml-download-info">Resolving CivitAI download for this URN...</div>`;
             html += `</div>`;
-        } else {
-            // No known download - offer search
-            html += `<div class="ml-download-section">`;
-            const searchSourcesId = `search-sources-${missing.node_id}-${missing.widget_index}`;
-            const searchSourceSelectId = `search-source-select-${missing.node_id}-${missing.widget_index}`;
-            html += `<div id="${searchSourcesId}" class="ml-search-source-bar">`;
-            html += `<button id="search-${missing.node_id}-${missing.widget_index}" class="ml-btn ml-btn-link">`;
-            html += `${this.getSearchIconHtml()} Search`;
-            html += `</button>`;
-            html += `<div class="ml-search-source-picker">`;
-            html += `<label class="ml-search-source-picker-label" for="${searchSourceSelectId}">Source</label>`;
-            html += `<select id="${searchSourceSelectId}" class="ml-search-source-select">`;
-            html += `<option value="all">Everything</option>`;
-            html += `<option value="local">Local Database</option>`;
-            html += `<option value="huggingface">HuggingFace</option>`;
-            html += `<option value="civitai">CivitAI</option>`;
-            if (this.isSourceAvailable('lora_manager_archive')) {
-                html += `<option value="lora_manager_archive">LoRA Manager Archive</option>`;
-            }
-            html += `</select>`;
-            html += `</div>`;
-            html += `</div>`;
-            html += this.renderDownloadTargetControls(missing, missing.category || 'checkpoints');
-            html += `</div>`;
-            html += `<div id="search-results-${missing.node_id}-${missing.widget_index}" class="ml-search-results"></div>`;
+        } else {
+            // No known download - offer search
+            html += `<div class="ml-download-section">`;
+            html += this.renderSearchControls(missing);
+            html += this.renderDownloadTargetControls(missing, missing.category || 'checkpoints');
+            html += `</div>`;
+            html += `<div id="search-results-${missing.node_id}-${missing.widget_index}" class="ml-search-results"></div>`;
         }
         
         // Progress container (for downloads)