fix(frontend): move link name switch to the right

tests/test_downloads_tab_workflow_route.mjs

@@ -5863,6 +5863,62 @@ test('CivitAI hash search renders sizeKB when byte size is unavailable', () => {
   );
 });
 
+test('link/name controls place the add or search action before the input switch', () => {
+  const renderSearchControls = eval(`(${extractMethod(searchPanelMethodsSource, 'renderSearchControls')})`);
+  const dialog = {
+    getSearchState() {
+      return {
+        selectedSource: 'all',
+        selectedBaseModel: 'auto',
+        inputMode: 'link',
+        manualSearchQuery: '',
+      };
+    },
+    getDefaultSearchBaseModel() {
+      return 'auto';
+    },
+    getSearchBaseModelTooltip() {
+      return '';
+    },
+    hasRenderableSearchState() {
+      return false;
+    },
+    getLinkNameInputMode(state) {
+      return state.inputMode;
+    },
+    getSearchSourceLabel() {
+      return 'All';
+    },
+    getSearchBaseModelLabel() {
+      return 'Any model';
+    },
+    getMissingSearchKey() {
+      return 'missing-key';
+    },
+    escapeHtml(value) {
+      return String(value);
+    },
+    renderSearchButtonContent() {
+      return 'search';
+    },
+    renderLinkNameActionContent() {
+      return 'action';
+    },
+    renderLinkNameSwitchIcon() {
+      return 'switch';
+    },
+  };
+
+  const html = renderSearchControls.call(dialog, { node_id: 1, widget_index: 2 });
+  const actionIndex = html.indexOf('mr-link-name-action-picker');
+  const inputIndex = html.indexOf('mr-link-name-input-picker');
+  const modeIndex = html.indexOf('mr-link-name-mode');
+
+  assert.ok(actionIndex >= 0);
+  assert.ok(inputIndex > actionIndex);
+  assert.ok(modeIndex > inputIndex);
+});
+
 test('search result refreshes preserve keyed progress and result DOM', () => {
   const displaySearchResults = extractMethod(resolveDownloadMethodsSource, 'displaySearchResults');
   const patchSearchResultsContainer = extractMethod(

web/resolver/search/search_panel.js

@@ -1985,6 +1985,16 @@ export const searchPanelMethods = {
         html += `</div>`;
         html += `</div>`;
         html += `<div id="${linkNameControlId}" class="mr-link-name-bar" data-mode="${inputMode}">`;
+        html += `<div class="mr-link-name-action-picker">`;
+        html += `<label class="mr-search-source-picker-label mr-link-name-action-heading" for="link-name-action-${missing.node_id}-${missing.widget_index}">${inputMode === 'name' ? 'Search' : 'Link'}</label>`;
+        html += `<button id="link-name-action-${missing.node_id}-${missing.widget_index}" class="mr-btn mr-btn-link mr-link-name-action" type="button" title="${inputMode === 'name' ? 'Search online for the model name' : 'Add a model URL'}">`;
+        html += this.renderLinkNameActionContent(inputMode, inputMode === 'link' ? 'Add' : buttonText);
+        html += `</button>`;
+        html += `</div>`;
+        html += `<div class="mr-search-source-picker mr-link-name-input-picker">`;
+        html += `<label class="mr-search-source-picker-label mr-link-name-input-label" for="${customUrlInputId}">${inputMode === 'name' ? 'Name' : 'URL'}</label>`;
+        html += `<input id="${customUrlInputId}" class="mr-download-target-input mr-custom-url-input mr-link-name-input" type="text" autocomplete="off" spellcheck="false" value="${this.escapeHtml(inputValue)}" placeholder="${inputMode === 'name' ? 'Search by model name...' : 'https://...'}" aria-label="${inputMode === 'name' ? 'Model name' : 'Model URL'}">`;
+        html += `</div>`;
         html += `<div class="mr-link-name-mode" role="group" aria-label="Input mode">`;
         html += `<label id="${linkNameControlId}-switch" class="mr-link-name-switch" aria-label="Input mode: ${inputMode === 'name' ? 'Name' : 'Link'}">`;
         html += `<input class="mr-link-name-toggle-input" type="checkbox" ${inputMode === 'link' ? 'checked' : ''} aria-label="${inputMode === 'link' ? 'Use URL link' : 'Use model name search'}">`;
@@ -1993,16 +2003,6 @@ export const searchPanelMethods = {
         html += `<span class="mr-switch-knob"><span class="mr-switch-icon">${this.renderLinkNameSwitchIcon(inputMode)}</span></span>`;
         html += `</label>`;
         html += `</div>`;
-        html += `<div class="mr-search-source-picker mr-link-name-input-picker">`;
-        html += `<label class="mr-search-source-picker-label mr-link-name-input-label" for="${customUrlInputId}">${inputMode === 'name' ? 'Name' : 'URL'}</label>`;
-        html += `<input id="${customUrlInputId}" class="mr-download-target-input mr-custom-url-input mr-link-name-input" type="text" autocomplete="off" spellcheck="false" value="${this.escapeHtml(inputValue)}" placeholder="${inputMode === 'name' ? 'Search by model name...' : 'https://...'}" aria-label="${inputMode === 'name' ? 'Model name' : 'Model URL'}">`;
-        html += `</div>`;
-        html += `<div class="mr-link-name-action-picker">`;
-        html += `<label class="mr-search-source-picker-label mr-link-name-action-heading" for="link-name-action-${missing.node_id}-${missing.widget_index}">${inputMode === 'name' ? 'Search' : 'Link'}</label>`;
-        html += `<button id="link-name-action-${missing.node_id}-${missing.widget_index}" class="mr-btn mr-btn-link mr-link-name-action" type="button" title="${inputMode === 'name' ? 'Search online for the model name' : 'Add a model URL'}">`;
-        html += this.renderLinkNameActionContent(inputMode, inputMode === 'link' ? 'Add' : buttonText);
-        html += `</button>`;
-        html += `</div>`;
         html += `</div>`;
         return html;
     },