client: sidebar-search: I-beam blink for typed filter

3 files changed, 47 insertions, 5 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index f28c0c9c..f9c8cdc1 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -754,19 +754,19 @@ summary.underline-white > span:hover a:not(:hover) {
   border-radius: 4px;
 }
 
-.wiki-search-filter-link.active.shown {
+.wiki-search-filter-link:where(.active.shown) {
   animation:
     0.15s ease   0.00s forwards normal    show-filter,
     0.60s linear 0.15s infinite alternate blink-filter;
 }
 
-.wiki-search-filter-link.active:not(.shown) {
+.wiki-search-filter-link:where(.active:not(.shown)) {
   animation:
     0.00s linear 0.00s forwards normal    show-filter,
     0.60s linear 0.00s infinite alternate blink-filter;
 }
 
-.wiki-search-filter-link:not(.active).hidden {
+.wiki-search-filter-link:where(:not(.active).hidden) {
   /* We can't just reverse the show-filter animation,
    * because that won't actually start it over again.
    */
@@ -774,6 +774,24 @@ summary.underline-white > span:hover a:not(:hover) {
     0.15s ease   0.00s forwards reverse   show-filter-the-sequel;
 }
 
+.wiki-search-filter-link.active-from-query {
+  background: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #000a;
+  animation: none;
+}
+
+.wiki-search-filter-link.active-from-query::after {
+  content: "I";
+  color: black;
+  font-family: monospace;
+  font-weight: 800;
+  font-size: 1.2em;
+  margin-left: 0.5ch;
+  vertical-align: middle;
+  animation: 1s steps(2, jump-none) 0.6s infinite blink-caret;
+}
+
 @keyframes show-filter {
   from {
     background: transparent;
@@ -809,6 +827,11 @@ summary.underline-white > span:hover a:not(:hover) {
   }
 }
 
+@keyframes blink-caret {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 .wiki-search-result {
   position: relative;
   display: flex;
diff --git a/src/static/js/client/sidebar-search.js b/src/static/js/client/sidebar-search.js
index 051ba079..c8f42e91 100644
--- a/src/static/js/client/sidebar-search.js
+++ b/src/static/js/client/sidebar-search.js
@@ -809,7 +809,7 @@ function showSidebarSearchResults(results) {
 
 function tidyResults(results) {
   const tidiedResults =
-    results.map(({doc, id}) => ({
+    results.results.map(({doc, id}) => ({
       reference: id ?? null,
       referenceType: (id ? id.split(':')[0] : null),
       directory: (id ? id.split(':')[1] : null),
@@ -851,6 +851,8 @@ function fillResultElements(results, {
 }
 
 function showFilterElements(results) {
+  const {queriedKind} = results;
+
   const tidiedResults = tidyResults(results);
 
   const allReferenceTypes =
@@ -864,6 +866,18 @@ function showFilterElements(results) {
     if (allReferenceTypes.includes(type)) {
       shownAny = true;
       cssProp(filterLink, 'display', null);
+
+      if (queriedKind) {
+        filterLink.setAttribute('inert', 'inert');
+      } else {
+        filterLink.removeAttribute('inert');
+      }
+
+      if (type === queriedKind) {
+        filterLink.classList.add('active-from-query');
+      } else {
+        filterLink.classList.remove('active-from-query');
+      }
     } else {
       cssProp(filterLink, 'display', 'none');
     }
diff --git a/src/static/js/search-worker.js b/src/static/js/search-worker.js
index 5ecb6eb4..8c265735 100644
--- a/src/static/js/search-worker.js
+++ b/src/static/js/search-worker.js
@@ -373,6 +373,8 @@ function postActionResult(id, status, value) {
 function performSearchAction({query, options}) {
   const {generic, verbatim} = indexes;
 
+  const {queriedKind} = processTerms(query);
+
   const genericResults =
     queryGenericIndex(generic, query, options);
 
@@ -388,7 +390,10 @@ function performSearchAction({query, options}) {
           .filter(({id}) => verbatimIDs.has(id))
       : verbatimResults ?? genericResults);
 
-  return commonResults;
+  return {
+    results: commonResults,
+    queriedKind,
+  };
 }
 
 const interestingFieldCombinations = [