${translate('settings.search.noResults', { query }, `No settings found matching "${query}"`)}
+ `; + settingsForm.appendChild(emptyState); + } + } + + getSectionSearchableText(section) { + // Get all text content from labels, help text, and headers + const labels = section.querySelectorAll('label'); + const helpTexts = section.querySelectorAll('.input-help'); + const headers = section.querySelectorAll('h3'); + + let text = ''; + + labels.forEach(el => text += ' ' + el.textContent); + helpTexts.forEach(el => text += ' ' + el.textContent); + headers.forEach(el => text += ' ' + el.textContent); + + return text.toLowerCase(); + } + + highlightSearchMatches(section, query) { + // Remove existing highlights first + this.removeSearchHighlights(section); + + if (!query) return; + + // Highlight in labels and help text + const textElements = section.querySelectorAll('label, .input-help, h3'); + + textElements.forEach(element => { + const walker = document.createTreeWalker( + element, + NodeFilter.SHOW_TEXT, + null, + false + ); + + const textNodes = []; + let node; + while (node = walker.nextNode()) { + if (node.textContent.toLowerCase().includes(query)) { + textNodes.push(node); + } + } + + textNodes.forEach(textNode => { + const parent = textNode.parentElement; + const text = textNode.textContent; + const lowerText = text.toLowerCase(); + + // Split text by query and wrap matches in highlight spans + const parts = []; + let lastIndex = 0; + let index; + + while ((index = lowerText.indexOf(query, lastIndex)) !== -1) { + // Add text before match + if (index > lastIndex) { + parts.push(document.createTextNode(text.substring(lastIndex, index))); + } + + // Add highlighted match + const highlight = document.createElement('span'); + highlight.className = 'settings-search-highlight'; + highlight.textContent = text.substring(index, index + query.length); + parts.push(highlight); + + lastIndex = index + query.length; + } + + // Add remaining text + if (lastIndex < text.length) { + parts.push(document.createTextNode(text.substring(lastIndex))); + } + + // Replace original text node with highlighted version + if (parts.length > 1) { + parts.forEach(part => parent.insertBefore(part, textNode)); + parent.removeChild(textNode); + } + }); + }); + } + + removeSearchHighlights(section) { + const highlights = section.querySelectorAll('.settings-search-highlight'); + + highlights.forEach(highlight => { + const parent = highlight.parentElement; + if (parent) { + // Replace highlight with its text content + parent.insertBefore(document.createTextNode(highlight.textContent), highlight); + parent.removeChild(highlight); + + // Normalize to merge adjacent text nodes + parent.normalize(); + } + }); + } + async openSettingsFileLocation() { try { const response = await fetch('/api/lm/settings/open-location', { diff --git a/templates/components/modals/settings_modal.html b/templates/components/modals/settings_modal.html index 78f4b726..b709a4f8 100644 --- a/templates/components/modals/settings_modal.html +++ b/templates/components/modals/settings_modal.html @@ -11,6 +11,22 @@ title="{{ t('settings.openSettingsFileLocation.tooltip') }}"> +