From 09196910eb5fea78488fe0a77b2f44146c68ee9f Mon Sep 17 00:00:00 2001
From: Dirk Wilden <dirk.wilden@device-insight.com>
Date: Mon, 24 Jan 2022 11:07:32 +0100
Subject: [PATCH 1/2] add spinner and sidebar toggle

---
 src/ui/styles.scss |  28 ++++++++++
 src/ui/ui.tsx      | 132 ++++++++++++++++++++++++++++++---------------
 2 files changed, 116 insertions(+), 44 deletions(-)

diff --git a/src/ui/styles.scss b/src/ui/styles.scss
index f24cdde..89ccca8 100644
--- a/src/ui/styles.scss
+++ b/src/ui/styles.scss
@@ -14,6 +14,7 @@
   --primary-text-color: #3c3c3c;
   --secondary-text-color: #888;
   --sidebar-hover-color: var(--bluish-white);
+  --spinner-color: black;
 
   // @media-dependent variables
   --padding-standard: 30px;
@@ -52,6 +53,7 @@
   --primary-text-color: var(--bluish-white);
   --secondary-text-color: #7f91aa;
   --sidebar-hover-color: var(--border-color);
+  --spinner-color: white;
 }
 
 @font-face {
@@ -235,6 +237,32 @@ mark {
     }
   }
 
+  .is-hidden {
+    filter: grayscale(100%);
+    cursor: pointer;
+  }
+
+  .spinner-color {
+    fill: var(--spinner-color)
+  }
+
+  .spinner {
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    background: none;
+    padding: 0;
+  }
+
+  @keyframes spin {
+    from {
+      transform:rotate(0deg);
+    }
+    to {
+      transform:rotate(360deg);
+    }
+  }
+
   span {
     background: var(--no-results-color);
     border-radius: 15px;
diff --git a/src/ui/ui.tsx b/src/ui/ui.tsx
index d7fadbb..ceebfda 100644
--- a/src/ui/ui.tsx
+++ b/src/ui/ui.tsx
@@ -96,60 +96,93 @@ const Settings = ({
 );
 
 const Sidebar = ({
+  visible,
   hiddenEngines,
+  onToggle,
   resultGroups,
 }: {
+  visible: boolean;
   hiddenEngines: string[];
+  onToggle: (engineId: string) => void;
   resultGroups: ResultGroup[];
 }) => (
   <div className="sidebar">
     <ul>
-      {Object.values(ENGINES)
-        .sort((a, b) => (a.name > b.name ? 1 : -1))
-        .map(engine => {
-          const numResults = resultGroups.find(rg => rg.engineId === engine.id)
-            ?.results.length;
-          return (
-            <li
-              className={
-                numResults && !hiddenEngines.includes(engine.id)
-                  ? "has-results"
-                  : undefined
-              }
-              key={engine.id}
-              onClick={() => {
-                if (!numResults) {
-                  return;
+      {visible &&
+        Object.values(ENGINES)
+          .sort((a, b) => (a.name > b.name ? 1 : -1))
+          .map((engine) => {
+            const numResults = resultGroups.find(
+              (rg) => rg.engineId === engine.id
+            )?.results.length;
+            return (
+              <li
+                className={
+                  numResults && !hiddenEngines.includes(engine.id)
+                    ? "has-results"
+                    : "is-hidden"
                 }
-                const $results = document.querySelector(".results");
-                const $resultGroup: HTMLDivElement | null = document.querySelector(
-                  `[data-engine-results=${engine.id}]`,
-                );
-                if (!($results && $resultGroup)) {
-                  return;
+                key={engine.id}
+                onClick={() => {
+                  if (!numResults) {
+                    return;
+                  }
+                  const $results = document.querySelector(".results");
+                  const $resultGroup: HTMLDivElement | null =
+                    document.querySelector(
+                      `[data-engine-results=${engine.id}]`
+                    );
+                  if (!($results && $resultGroup)) {
+                    return;
+                  }
+
+                  const engineHidden = hiddenEngines.includes(engine.id);
+                  const needsScroll =
+                    $results.scrollTop != $resultGroup.offsetTop;
+
+                  if (engineHidden || !needsScroll) {
+                    onToggle(engine.id);
+                  }
+
+                  if (needsScroll) {
+                    $results.scrollTo({
+                      behavior: "smooth",
+                      top: $resultGroup.offsetTop,
+                    });
+                  }
+                }}
+                title={
+                  numResults === undefined
+                    ? "Searching..."
+                    : numResults
+                    ? "Jump to results"
+                    : "No results found"
                 }
-                $results.scrollTo({
-                  behavior: "smooth",
-                  top: $resultGroup.offsetTop,
-                });
-              }}
-              title={
-                numResults === undefined
-                  ? "Searching..."
-                  : numResults
-                  ? "Jump to results"
-                  : "No results found"
-              }
-            >
-              <div className="engine-wrap">
-                {engine.name}
-                {numResults === undefined ? null : (
-                  <span className="num-results">{numResults}</span>
-                )}
-              </div>
-            </li>
-          );
-        })}
+              >
+                <div className="engine-wrap">
+                  {engine.name}
+                  {numResults === undefined ? (
+                    <span className="spinner">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 16 16"
+                      >
+                        <g className="spinner-color">
+                          <path
+                            d="M8 15c-3.86 0-7-3.141-7-7 0-3.86 3.14-7 7-7 3.859 0 7 3.14 7 7 0 3.859-3.141 7-7 7zM8 3C5.243 3 3 5.243 3 8s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
+                            opacity=".3"
+                          />
+                          <path d="M14 9a1 1 0 0 1-1-1c0-2.757-2.243-5-5-5a1 1 0 0 1 0-2c3.859 0 7 3.14 7 7a1 1 0 0 1-1 1z" />
+                        </g>
+                      </svg>
+                    </span>
+                  ) : (
+                    <span className="num-results">{numResults}</span>
+                  )}
+                </div>
+              </li>
+            );
+          })}
     </ul>
   </div>
 );
@@ -217,6 +250,7 @@ const Results = ({
                         className="title"
                         dangerouslySetInnerHTML={{ __html: result.title }}
                         href={result.url}
+                        target="_blank"
                       />
                       {result.modified ? (
                         <span
@@ -400,7 +434,17 @@ const App = () => {
         sortMode={sortMode}
       />
       <Sidebar
+        visible={resultGroups.length > 0}
         hiddenEngines={localData.hiddenEngines || []}
+        onToggle={engineId => {
+          const hiddenEngines = localData.hiddenEngines || [];
+          setLocalData({
+            ...localData,
+            hiddenEngines: hiddenEngines.includes(engineId)
+              ? hiddenEngines.filter(id => id !== engineId)
+              : [...hiddenEngines, engineId].sort(),
+          });
+        }}
         resultGroups={resultGroups}
       />
       <Results

From be0a00a5025560528ab7224672f74f18c77792ba Mon Sep 17 00:00:00 2001
From: Dirk Wilden <dirk.wilden@device-insight.com>
Date: Tue, 25 Jan 2022 08:26:01 +0100
Subject: [PATCH 2/2] revert opening links in new tab

---
 src/ui/ui.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/ui.tsx b/src/ui/ui.tsx
index ceebfda..042d3bc 100644
--- a/src/ui/ui.tsx
+++ b/src/ui/ui.tsx
@@ -250,7 +250,6 @@ const Results = ({
                         className="title"
                         dangerouslySetInnerHTML={{ __html: result.title }}
                         href={result.url}
-                        target="_blank"
                       />
                       {result.modified ? (
                         <span