pages/search: markup

pages/search/modules/dom.js

@@ -1,5 +1,22 @@
-const tabView = (tab) =>
+const fuzzysort = window.fuzzysort
-  `<button class='tab'>${tab.displayName}</button>`
+
+/* 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)
+    })
   }
   /* */
 

pages/search/search.css

@@ -35,6 +35,7 @@ main {
 .tab {
   appearance: none;
   text-align: unset;
+  align-items: center;
 
   background: inherit;
   font: inherit;
@@ -49,14 +50,35 @@ main {
   overflow: hidden;
 }
 
-.tab > span:first-child {
+.tab:focus-visible {
+  outline: none;
+  background-color: var(--gray-light-30);
+}
+
+.tab > .favicon {
+  width: calc(2 * var(--step));
+  height: calc(2 * var(--step));
+}
+
+.tab > .label {
   font-family: monospace;
-  color: var(--gray-dark-05);
+  color: var(--gray-dark-10);
   flex-shrink: 0;
 }
 
-.tab > span:last-child {
+.tab > .url {
+  color: var(--gray-dark-10);
+}
+
+.tab > .title,
+.tab > .url {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.tab b {
+  font-weight: normal;
+  text-shadow: 0px 0px 1px currentColor;
+  text-decoration: underline;
+}

pages/search/search.html

@@ -11,26 +11,7 @@
       <input type='search' id='searchbox' placeholder='Filter' autofocus>
       <input type='search' id='actionbox' placeholder='Action (? for help)'>
     </header>
-    <main id='searchResults'>
+    <main id='searchResults'></main>
-      <button class='tab'>
-        <div class='label'>jk</div>
-        <div class='title'>
-          Color - Firefox Design Systems
-        </div>
-        <div class='url'>
-          https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-background-c2
-        </div>
-      </button>
-      <button class='tab'>
-        <div class='label'>kjqww</div>
-        <div class='title'>
-          Color - Firefox Design Systems
-        </div>
-        <div class='url'>
-          https://acorn.firefox.com/latest/styles/color-MZHBVuZc#section-background-c2
-        </div>
-      </button>
-    </main>
     <script type="text/javascript" src="./vendor/fuzzysort.js"></script>
     <script type='module' src='./search.js'></script>
   </body>