Default to Missing tab and add category headers

Add a visual category header to each model section in the Linker dialog and ensure the dialog defaults to the "Missing Models" tab when opened. Also skip rendering the missing-models list when the active tab isn't "missing" to avoid unnecessary DOM work. Minor UI tweaks include toggling tab classes and showing download/auto-resolve buttons when switching to the missing tab.
This commit is contained in:
Dariusz L
2026-04-18 03:22:47 +02:00
parent 259e491c96
commit dd320047e0
+21
View File
@@ -884,6 +884,11 @@ class LinkerManagerDialog extends ComfyDialog {
html += `<div class="ml-model-section" data-ml-filter="all" data-ml-active="${hasActive}" data-ml-inactive="${hasInactive}" style="margin-bottom: 16px; padding: 12px; background: var(--ml-card-bg-alt, #252525); border-radius: 8px;">`;
// Add category header
html += `<div style="margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #333;">
<span style="color: var(--ml-text-primary); font-size: 14px; font-weight: 600;">${displayName.toUpperCase()}</span>
</div>`;
if (hasActive) {
const activeStr = modelsObj.active.map(m => {
const fullName = m.name || m.original_path?.split(/[\/\\]/).pop() || 'Unknown';
@@ -1066,6 +1071,16 @@ class LinkerManagerDialog extends ComfyDialog {
// Update button state in case there are active downloads
this.updateDownloadAllButtonState();
// Always default to Missing Models tab when opening dialog
if (this.activeTab !== 'missing') {
// Manually switch tab without loading
this.activeTab = 'missing';
this.missingTab.classList.add('ml-tab-active');
this.loadedTab.classList.remove('ml-tab-active');
this.downloadAllButton.style.display = 'inline-flex';
this.autoResolveButton.style.display = 'inline-flex';
}
// Use provided workflow or fetch from current graph
await this.loadWorkflowData(workflow);
}
@@ -1242,6 +1257,12 @@ class LinkerManagerDialog extends ComfyDialog {
`;
html += '<div style="display: flex; flex-direction: column; gap: 8px;">';
// Skip rendering if active tab is not "missing"
if (this.activeTab !== 'missing') {
container.innerHTML = '';
return;
}
// Sort missing models: those with 100% confidence matches first, then others
const sortedMissingModels = missingModels.sort((a, b) => {
const aMatches = a.matches || [];