pages/search: indicator for discarded tabs

pages/css/common.css

@@ -20,6 +20,10 @@ html, body {
   --gray-dark-60: #2b2a33;
   --gray-dark-80: #1c1b22;
   --gray-dark-90: #15141a;
+
+  --green-20: #b3ffe3;
+  --green-40: #54ffbd;
+  --green-60: #2ac3a2;
 }
 
 body {

pages/search/modules/dom.js

@@ -8,10 +8,14 @@ const tabView = (result) => {
   const [label, title, url] =
     result.map((field) => fuzzysort.highlight(field))
 
+  const tooltip = (tab.discarded ? `[discarded] ` : '')
+    + `${tab.title}\n${tab.url}`
+
   return `
-    <button class='tab' data-id='${tab.id}'>
+    <button class='tab' data-id='${tab.id}' title='${tooltip}'>
       <span class='label'>${label ?? tab.label}</span>
       <img class='favicon' src='${tab.favIconUrl ?? defaultFavicon}'/>
+      <div class='indicator ${tab.discarded ? 'discarded' : 'active'}'></div>
       <span class='title'>${title ?? tab.title}</span>
       <span class='url'>${url ?? tab.url}</span>
     </button>

pages/search/modules/store.js

@@ -21,6 +21,7 @@ export const init = ({
   })
 
   const pickFields = (tab) => [
+    'discarded',
     'favIconUrl',
     'id',
     'label',

pages/search/search.css

@@ -65,6 +65,21 @@ main {
   height: calc(2 * var(--step));
 }
 
+.tab > .indicator {
+  flex-shrink: 0;
+  border-radius: 50%;
+  width: calc(1 * var(--step));
+  height: calc(1 * var(--step));
+}
+
+.tab > .indicator.active {
+  background-color: var(--green-60);
+}
+
+.tab > .indicator.discarded {
+  background-color: var(--gray-light-50);
+}
+
 .tab > .label {
   font-family: monospace;
   color: var(--gray-dark-10);