pages/search: markup

pages/search/modules/dom.js

@@ -1,5 +1,22 @@
-const tabView = (tab) =>
-  `<button class='tab'>${tab.displayName}</button>`
+const fuzzysort = window.fuzzysort
+
+/* https://png-pixel.com/ */
+const defaultFavicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII='
+
+const tabView = (result) => {
+  const tab = result.obj
+  const [label, title, url] =
+    result.map((field) => fuzzysort.highlight(field))
+
+  return `
+    <button class='tab' data-id='${tab.id}'>
+      <span class='label'>${label ?? tab.label}</span>
+      <img class='favicon' src='${tab.favIconUrl ?? defaultFavicon}'/>
+      <span class='title'>${title ?? tab.title}</span>
+      <span class='url'>${url ?? tab.url}</span>
+    </button>
+  `
+}
 
 export const updateSearchResults = (state) => {
   const container = document.getElementById('searchResults')

pages/search/modules/store.js

@@ -27,17 +27,9 @@ export const init = ({
     'url',
   ].reduce((acc, x) => (acc[x] = tab[x], acc), {})
 
-  const addDisplayName = (tab) => ({
-    displayName: `
-      <span>${tab.label}</span>
-      <span>${tab.title} / ${tab.url}</span>`,
-    ...tab,
-  })
-
   const shapeTabs = (tabs) => tabs
     .map(addLabel(tabs))
     .map(pickFields)
-    .map(addDisplayName)
 
   const fetchTabs = () =>
     browserTabs.query({ currentWindow: true, active: false })
@@ -51,7 +43,7 @@ export const init = ({
     state.results = fuzzysort.go(state.query, state.tabs, {
       keys: ['label', 'title', 'url'],
       all: true,
-    }).map(({obj}) => obj)
+    })
   }
   /* */