From bcf56cf841f5144c6b097f28712bcb281d5f0fb9 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Sun, 21 Jan 2024 21:37:11 +0100
Subject: [PATCH] pages/search: indicator for discarded tabs

---
 pages/css/common.css          |  4 ++++
 pages/search/modules/dom.js   |  6 +++++-
 pages/search/modules/store.js |  1 +
 pages/search/search.css       | 15 +++++++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/pages/css/common.css b/pages/css/common.css
index 443ee18..b16b0a0 100644
--- a/pages/css/common.css
+++ b/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 {
diff --git a/pages/search/modules/dom.js b/pages/search/modules/dom.js
index 95ee657..4ff962d 100644
--- a/pages/search/modules/dom.js
+++ b/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>
diff --git a/pages/search/modules/store.js b/pages/search/modules/store.js
index 83c3661..f1a2cce 100644
--- a/pages/search/modules/store.js
+++ b/pages/search/modules/store.js
@@ -21,6 +21,7 @@ export const init = ({
   })
 
   const pickFields = (tab) => [
+    'discarded',
     'favIconUrl',
     'id',
     'label',
diff --git a/pages/search/search.css b/pages/search/search.css
index 0e5560b..43be196 100644
--- a/pages/search/search.css
+++ b/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);