diff --git a/pages/search/modules/dom.js b/pages/search/modules/dom.js index 1a26ec2..6a9b46c 100644 --- a/pages/search/modules/dom.js +++ b/pages/search/modules/dom.js @@ -5,26 +5,58 @@ const defaultFavicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCA const tabView = (result) => { const tab = result.obj - const [label, title, url] = - result.map((field) => fuzzysort.highlight(field)) + const [label, title, url] = result.map((field) => + fuzzysort.highlight(field)) - const tooltip = (tab.discarded ? `[discarded] ` : '') - + `${tab.title}\n${tab.url}` + /* Parts */ - return ` - - ` + const labelSpan = document.createElement('span') + labelSpan.classList.add('label') + labelSpan.textContent = label ?? tab.label + + const faviconImg = document.createElement('img') + faviconImg.classList.add('favicon') + faviconImg.src = tab.favIconUrl ?? defaultFavicon + + const indicatorDiv = document.createElement('div') + indicatorDiv.classList.add('indicator', + tab.discarded ? 'discarded' : 'active') + + const titleSpan = document.createElement('span') + titleSpan.classList.add('title') + titleSpan.textContent = title ?? tab.title + + const urlSpan = document.createElement('span') + urlSpan.classList.add('url') + urlSpan.textContent = url ?? tab.url + + const parts = [ + labelSpan, + faviconImg, + indicatorDiv, + titleSpan, + urlSpan, + ] + + /* Button */ + + const tabButton = document.createElement('button') + tabButton.classList.add('tab') + tabButton.dataset.id = tab.id + tabButton.title = + (tab.discarded ? '[discarded] ' : '') + `${tab.title}\n${tab.url}` + + parts.forEach((part) => tabButton.appendChild(part)) + + return tabButton } export const updateSearchResults = (state) => { const container = document.getElementById('searchResults') - container.innerHTML = state.results.map(tabView).join('') + container.innerHTML = '' + + state.results.forEach((result) => + container.appendChild(tabView(result))) } export const enableFaviconFallback = () => {