diff --git a/js/sidebar/civitaiSearchTab.js b/js/sidebar/civitaiSearchTab.js index 0208c66..9b216c6 100644 --- a/js/sidebar/civitaiSearchTab.js +++ b/js/sidebar/civitaiSearchTab.js @@ -16,6 +16,7 @@ import { import { createButton, BUTTON_VARIANTS } from '../components/buttons.js'; import { loadSidebarStyle } from './sidebarStyles.js'; +import { loadAndCreateHtmlTemplate } from '../utils/htmlTemplateLoader.js'; import { escapeHtml, formatFileSize } from '../reports/reportGenerator.js'; @@ -35,7 +36,7 @@ const SEARCH_CONFIG = { * Creates the Civitai search tab content * @param {HTMLElement} container - Container element for the tab content */ -export function createCivitaiSearchTab(container) { +export async function createCivitaiSearchTab(container) { container.innerHTML = ''; loadSidebarStyle('civitai-search-styles', 'extensions/comfyui_sageutils/sidebar/civitaiSearchTab.css'); @@ -45,22 +46,23 @@ export function createCivitaiSearchTab(container) { searchContainer.className = 'civitai-search-tab'; // Create search form - const searchForm = createSearchForm(); + const searchForm = await createSearchForm(); // Create results container const resultsContainer = document.createElement('div'); resultsContainer.id = 'civitai-results'; resultsContainer.className = 'civitai-results-container'; - + // Initial message - resultsContainer.innerHTML = ` -
Search for models on Civitai to discover and download new content.
-Use the search form above to find models by name, type, or creator.
-Search for models on Civitai to discover and download new content.
-Use the search form above to find models by name, type, or creator.
-Failed to search Civitai: ${escapeHtml(error.message)}
-Please check your internet connection and try again.
-No models found matching your search criteria.
-Try adjusting your search terms or filters.
-Click on any model to view details and download options
- `; - header.appendChild(headerText); + const header = await loadAndCreateHtmlTemplate( + 'extensions/comfyui_sageutils/sidebar/partials/civitaiResultsHeader.html', + { + resultCount: results.length, + totalItemsText: metadata && metadata.totalItems ? ` (${metadata.totalItems} total)` : '' + } + ); if (metadata) { - const paginationInfo = document.createElement('div'); - paginationInfo.className = 'civitai-results-pagination-info'; - - if (metadata.currentPage) { - paginationInfo.innerHTML = ` -${escapeHtml(description)}
+ const card = await loadAndCreateHtmlTemplate( + 'extensions/comfyui_sageutils/sidebar/partials/civitaiModelCard.html', + { + modelName, + creator, + type, + description + } + ); -Released: ${createdAt}
- ${version.description ? `${escapeHtml(version.description)}
` : ''} - ${trainedWords.length > 0 ? ` -{{description}}
+ +Click on any model to view details and download options
+{{messageLine1}}
+{{messageLine2}}
+{{note}}
+Released: {{createdAt}}
+ + + +