From 46b1c80e3f6adebda2136e5cf3c15812b530cb46 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 25 May 2023 13:54:56 +0200
Subject: [PATCH 001/122] feat(sidebar): add filter field (w/o logic)

---
 .../src/document/organisms/sidebar/filter.tsx | 25 +++++++++++++++++++
 .../src/document/organisms/sidebar/index.tsx  |  2 ++
 2 files changed, 27 insertions(+)
 create mode 100644 client/src/document/organisms/sidebar/filter.tsx

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
new file mode 100644
index 000000000000..14909676dd2d
--- /dev/null
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+export function SidebarFilter() {
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    const links = document.querySelectorAll("#sidebar-quicklinks a[href]");
+    if (query) {
+      // Hide all except matches.
+    } else {
+      // Show all.
+    }
+  }, [query]);
+
+  return (
+    <section className="sidebar-filter">
+      <input
+        type="text"
+        placeholder="Filter sidebar"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+      />
+    </section>
+  );
+}
diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
index 574feb7b7066..e8df2b9acf00 100644
--- a/client/src/document/organisms/sidebar/index.tsx
+++ b/client/src/document/organisms/sidebar/index.tsx
@@ -8,6 +8,7 @@ import "./index.scss";
 import { TOC } from "../toc";
 import { PLACEMENT_ENABLED } from "../../../env";
 import { SidePlacement } from "../../../ui/organisms/placement";
+import { SidebarFilter } from "./filter";
 
 export function SidebarContainer({
   doc,
@@ -63,6 +64,7 @@ export function SidebarContainer({
           onClickHandler={() => setIsSidebarOpen(!isSidebarOpen)}
           aria-label="Collapse sidebar"
         />
+        <SidebarFilter />
         <nav aria-label={label} className="sidebar-inner">
           <div className="sidebar-inner-nav">
             <div className="in-nav-toc">

From 119c9e834674b619ee6eb0a233406dd9db1f86ab Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 29 May 2023 17:12:00 +0200
Subject: [PATCH 002/122] feat(sidebar): implement filtering

---
 .../src/document/organisms/sidebar/filter.tsx | 60 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 14909676dd2d..3a2465a0bd88 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -4,11 +4,65 @@ export function SidebarFilter() {
   const [query, setQuery] = useState("");
 
   useEffect(() => {
-    const links = document.querySelectorAll("#sidebar-quicklinks a[href]");
+    const quicklinks = document.getElementById("sidebar-quicklinks");
+    if (!quicklinks) {
+      return;
+    }
+
+    const details = Array.from(
+      quicklinks.querySelectorAll<HTMLDetailsElement>("details")
+    );
+    const links = Array.from(
+      quicklinks.querySelectorAll<HTMLAnchorElement>("a[href]")
+    );
+
     if (query) {
-      // Hide all except matches.
+      // Hide and collapse all parents.
+      details.forEach((detail) => {
+        detail.style.display = "none";
+        detail.dataset.open = detail.dataset.open ?? String(detail.open);
+        detail.open = false;
+      });
+
+      // Show/hide items (+ show parents).
+      const queryLC = query.toLowerCase();
+      links.forEach((link) => {
+        const isMatch = link.innerText.toLowerCase().includes(queryLC);
+        const target = link.closest("li") || link;
+
+        if (isMatch) {
+          // Show item.
+          target.style.display = "inherit";
+
+          // Expand parents.
+          let parent = target.parentElement;
+          while (parent) {
+            if (parent instanceof HTMLDetailsElement) {
+              parent.style.display = "inherit";
+              parent.open = true;
+            }
+            parent = parent.parentElement;
+          }
+        } else {
+          // Hide item.
+          target.style.display = "none";
+        }
+      });
     } else {
-      // Show all.
+      // Show all links.
+      links.forEach((link) => {
+        const target = link.closest("li") || link;
+        target.style.display = "inherit";
+      });
+
+      // Show all parents.
+      details.forEach((detail) => {
+        detail.style.display = "inherit";
+        if (detail.dataset.open) {
+          detail.open = JSON.parse(detail.dataset.open);
+          delete detail.dataset.open;
+        }
+      });
     }
   }, [query]);
 

From 9b8192112e758e8dc192cb7a84096026853763d2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 29 May 2023 17:17:30 +0200
Subject: [PATCH 003/122] chore(sidebar): split query like quicksearch

---
 client/src/document/organisms/sidebar/filter.tsx |  6 ++++--
 client/src/search.tsx                            |  9 +--------
 client/src/utils.ts                              | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 3a2465a0bd88..ec03c1ad77f7 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { splitQuery } from "../../../utils";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
@@ -25,9 +26,10 @@ export function SidebarFilter() {
       });
 
       // Show/hide items (+ show parents).
-      const queryLC = query.toLowerCase();
+      const q = splitQuery(query);
       links.forEach((link) => {
-        const isMatch = link.innerText.toLowerCase().includes(queryLC);
+        const innerTextLC = link.innerText.toLowerCase();
+        const isMatch = q.every((q) => innerTextLC.includes(q));
         const target = link.closest("li") || link;
 
         if (isMatch) {
diff --git a/client/src/search.tsx b/client/src/search.tsx
index b0cf0add4fb9..2aa42ffb21f4 100644
--- a/client/src/search.tsx
+++ b/client/src/search.tsx
@@ -9,6 +9,7 @@ import { Button } from "./ui/atoms/button";
 import { useLocale } from "./hooks";
 import { SearchProps, useFocusViaKeyboard } from "./search-utils";
 import { useGleanClick } from "./telemetry/glean-context";
+import { splitQuery } from "./utils";
 
 const PRELOAD_WAIT_MS = 500;
 const SHOW_INDEXING_AFTER_MS = 500;
@@ -35,14 +36,6 @@ function quicksearchPing(input: string) {
   return `quick-search: ${input}`;
 }
 
-function splitQuery(term: string): string[] {
-  return term
-    .trim()
-    .toLowerCase()
-    .replace(".", " .") // Allows to find `Map.prototype.get()` via `Map.get`.
-    .split(/[ ,]+/);
-}
-
 function useSearchIndex(): readonly [
   null | SearchIndex,
   null | Error,
diff --git a/client/src/utils.ts b/client/src/utils.ts
index 114e6cd51b00..fe3429f141ba 100644
--- a/client/src/utils.ts
+++ b/client/src/utils.ts
@@ -110,3 +110,17 @@ export function charSlice(string: string, start?: number, end?: number) {
 export function range(start: number, stop: number) {
   return [...Array(Math.max(stop - start, 0)).keys()].map((n) => n + start);
 }
+
+/**
+ * Used by quicksearch and sidebar filters.
+ *
+ * @param term
+ * @returns
+ */
+export function splitQuery(term: string): string[] {
+  return term
+    .trim()
+    .toLowerCase()
+    .replace(".", " .") // Allows to find `Map.prototype.get()` via `Map.get`.
+    .split(/[ ,]+/);
+}

From 98a75389eaa51a086949c16284c5e3fbe1fe63bd Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 29 May 2023 19:00:00 +0200
Subject: [PATCH 004/122] feat(sidebar): implement SidebarFilterer with
 highlighting

---
 .../organisms/sidebar/SidebarFilterer.ts      | 153 ++++++++++++++++++
 .../src/document/organisms/sidebar/filter.tsx |  61 +------
 .../src/document/organisms/sidebar/index.scss |   1 +
 3 files changed, 158 insertions(+), 57 deletions(-)
 create mode 100644 client/src/document/organisms/sidebar/SidebarFilterer.ts

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
new file mode 100644
index 000000000000..eddae1dc7e55
--- /dev/null
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -0,0 +1,153 @@
+import { splitQuery } from "../../../utils";
+
+export class SidebarFilterer {
+  applyFilter(query: string) {
+    if (query) {
+      this.showOnlyMatchingItems(query);
+    } else {
+      this.showAllItems();
+    }
+  }
+  root: HTMLElement;
+
+  constructor(root: HTMLElement) {
+    this.root = root;
+  }
+
+  private get parents(): HTMLDetailsElement[] {
+    return Array.from(
+      this.root.querySelectorAll<HTMLDetailsElement>("details")
+    );
+  }
+
+  private get links(): HTMLAnchorElement[] {
+    return Array.from(this.root.querySelectorAll<HTMLAnchorElement>("a[href]"));
+  }
+
+  showAllItems() {
+    this.links.forEach((link) => this.resetLink(link));
+    this.parents.forEach((parent) => this.resetParent(parent));
+  }
+
+  private resetLink(link: HTMLAnchorElement) {
+    this.resetHighlighting(link);
+    const target = link.closest("li") || link;
+    target.style.display = "inherit";
+  }
+
+  private resetParent(detail: HTMLDetailsElement) {
+    detail.style.display = "inherit";
+    if (detail.dataset.open) {
+      detail.open = JSON.parse(detail.dataset.open);
+      delete detail.dataset.open;
+    }
+  }
+
+  private resetHighlighting(link: HTMLAnchorElement) {
+    const nodes = Array.from(link.querySelectorAll<HTMLElement>("span, mark"));
+    const parents = new Set<HTMLElement>();
+    nodes.forEach((node) => {
+      const parent = node.parentElement;
+      node.replaceWith(document.createTextNode(node.textContent ?? ""));
+      if (parent) {
+        parents.add(parent);
+      }
+    });
+    parents.forEach((parent) => parent.normalize());
+  }
+
+  showOnlyMatchingItems(query: string) {
+    this.parents.forEach(this.collapseDetail);
+
+    // Show/hide items (+ show parents).
+    const terms = splitQuery(query);
+    this.links.forEach((link) => {
+      this.resetHighlighting(link);
+      const haystack = link.innerText.toLowerCase();
+      const isMatch = terms.every((needle) => haystack.includes(needle));
+
+      const target = link.closest("li") || link;
+      target.style.display = isMatch ? "inherit" : "none";
+
+      if (isMatch) {
+        this.highlightMatches(link, terms);
+        this.expandParents(target);
+      }
+    });
+  }
+
+  private collapseDetail(el: HTMLDetailsElement) {
+    el.style.display = "none";
+    el.dataset.open = el.dataset.open ?? String(el.open);
+    el.open = false;
+  }
+
+  private highlightMatches(el: HTMLElement, terms: string[]) {
+    const nodes = Array.from(el.childNodes).filter(
+      (node) => node.nodeType === Node.TEXT_NODE
+    ) as (Element & Text)[];
+
+    nodes.forEach((node) => {
+      const haystack = node.textContent?.toLowerCase();
+      if (!haystack) {
+        return;
+      }
+
+      const ranges = new Map<number, number>();
+      terms.forEach((needle) => {
+        const index = haystack.indexOf(needle);
+        if (index !== -1) {
+          ranges.set(index, index + needle.length);
+        }
+      });
+      const sortedRanges = Array.from(ranges.entries()).sort(
+        ([x1, y1], [x2, y2]) => x1 - x2 || y1 - y2
+      );
+
+      let rest = node;
+      let cursor = 0;
+
+      for (const [rangeBegin, rangeEnd] of sortedRanges) {
+        if (rangeBegin < cursor) {
+          // Just ignore conflicting range.
+          continue;
+        }
+
+        // Split.
+        const match = rest.splitText(rangeBegin - cursor);
+        const newRest = match.splitText(rangeEnd - rangeBegin);
+
+        // Convert text nodes to HTML elements.
+        this.replaceChildNode(rest, "span");
+        this.replaceChildNode(match, "mark");
+
+        rest = newRest as Element & Text;
+        cursor = rangeEnd;
+      }
+
+      this.replaceChildNode(rest, "span");
+    });
+  }
+
+  private replaceChildNode(node: ChildNode, tagName: string) {
+    const text = node.textContent;
+    if (text) {
+      const currentSpan = document.createElement(tagName);
+      currentSpan.innerText = text;
+      node.replaceWith(currentSpan);
+    } else {
+      node.parentElement?.removeChild(node);
+    }
+  }
+
+  private expandParents(target: HTMLElement) {
+    let parent = target.parentElement?.closest("details");
+    while (parent) {
+      if (parent instanceof HTMLDetailsElement) {
+        parent.style.display = "inherit";
+        parent.open = true;
+      }
+      parent = parent.parentElement?.closest("details");
+    }
+  }
+}
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index ec03c1ad77f7..254f4f262d15 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,71 +1,18 @@
 import { useEffect, useState } from "react";
-import { splitQuery } from "../../../utils";
+import { SidebarFilterer } from "./SidebarFilterer";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
+
     if (!quicklinks) {
       return;
     }
 
-    const details = Array.from(
-      quicklinks.querySelectorAll<HTMLDetailsElement>("details")
-    );
-    const links = Array.from(
-      quicklinks.querySelectorAll<HTMLAnchorElement>("a[href]")
-    );
-
-    if (query) {
-      // Hide and collapse all parents.
-      details.forEach((detail) => {
-        detail.style.display = "none";
-        detail.dataset.open = detail.dataset.open ?? String(detail.open);
-        detail.open = false;
-      });
-
-      // Show/hide items (+ show parents).
-      const q = splitQuery(query);
-      links.forEach((link) => {
-        const innerTextLC = link.innerText.toLowerCase();
-        const isMatch = q.every((q) => innerTextLC.includes(q));
-        const target = link.closest("li") || link;
-
-        if (isMatch) {
-          // Show item.
-          target.style.display = "inherit";
-
-          // Expand parents.
-          let parent = target.parentElement;
-          while (parent) {
-            if (parent instanceof HTMLDetailsElement) {
-              parent.style.display = "inherit";
-              parent.open = true;
-            }
-            parent = parent.parentElement;
-          }
-        } else {
-          // Hide item.
-          target.style.display = "none";
-        }
-      });
-    } else {
-      // Show all links.
-      links.forEach((link) => {
-        const target = link.closest("li") || link;
-        target.style.display = "inherit";
-      });
-
-      // Show all parents.
-      details.forEach((detail) => {
-        detail.style.display = "inherit";
-        if (detail.dataset.open) {
-          detail.open = JSON.parse(detail.dataset.open);
-          delete detail.dataset.open;
-        }
-      });
-    }
+    const filterer = new SidebarFilterer(quicklinks);
+    filterer.applyFilter(query);
   }, [query]);
 
   return (
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index dfee075f85e7..225764fdaa69 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -31,6 +31,7 @@
     display: inline-flex;
     hyphens: auto;
     padding: 0.25rem;
+    white-space: pre;
 
     &:hover,
     &:focus {

From 960657d7c2b2adeab46db9f0ae250a7f9b367e3c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 18:14:47 +0200
Subject: [PATCH 005/122] feat(sidebar): style filter, add icons + clear button

---
 client/src/assets/icons/filter.svg            |  3 +
 .../document/organisms/sidebar/filter.scss    | 64 +++++++++++++++++++
 .../src/document/organisms/sidebar/filter.tsx | 21 ++++++
 client/src/ui/atoms/icon/index.scss           |  2 +-
 4 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 client/src/assets/icons/filter.svg
 create mode 100644 client/src/document/organisms/sidebar/filter.scss

diff --git a/client/src/assets/icons/filter.svg b/client/src/assets/icons/filter.svg
new file mode 100644
index 000000000000..4a49f3cdac98
--- /dev/null
+++ b/client/src/assets/icons/filter.svg
@@ -0,0 +1,3 @@
+<svg viewBox="-1.5 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="m3 2h8l-3 4v4l-1 1v-5z" fill="#FBFBFE" stroke="#FBFBFE" stroke-width="1.5"/>
+</svg>
diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
new file mode 100644
index 000000000000..f83da75a3adc
--- /dev/null
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -0,0 +1,64 @@
+@use "../../../ui/vars.scss" as *;
+
+.sidebar-filter {
+  display: flex;
+  position: relative;
+  width: 100%;
+
+  .sidebar-filter-label {
+    left: 1rem; /* Moves icon inside field. */
+    position: relative;
+    top: 0.1rem; /* Aligns icon with input. */
+  }
+
+  .sidebar-filter-input-field {
+    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+    background-color: var(--background-primary);
+    border: 1px solid var(--border-primary);
+    border-radius: 100px;
+    color: var(--text-primary);
+    height: var(--form-elem-height);
+    padding-left: 1.5rem;
+    width: 9rem;
+
+    &:focus {
+      outline: var(--border-primary);
+    }
+
+    &::placeholder {
+      color: var(--text-inactive);
+    }
+
+    &:focus,
+    &:not([value=""]) {
+      padding-right: 1.5rem;
+      width: 100%;
+
+      ~ .button.clear-sidebar-filter-button {
+        display: block;
+      }
+    }
+
+    ~ .button.clear-sidebar-filter-button {
+      display: none;
+    }
+  }
+
+  .icon {
+    background-color: var(--icon-secondary);
+  }
+
+  .button {
+    --button-color: var(--icon-secondary);
+    --button-height: 1.5rem;
+    --button-padding: 0;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.25rem;
+    width: 1.5rem;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 254f4f262d15..cd14e027c322 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,5 +1,8 @@
 import { useEffect, useState } from "react";
 import { SidebarFilterer } from "./SidebarFilterer";
+import { Button } from "../../../ui/atoms/button";
+
+import "./filter.scss";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
@@ -17,12 +20,30 @@ export function SidebarFilter() {
 
   return (
     <section className="sidebar-filter">
+      <label
+        id="sidebar-filter-label"
+        className="sidebar-filter-label"
+        htmlFor="sidebar-filter-input"
+      >
+        <span className="icon icon-filter"></span>
+        <span className="visually-hidden">Filter sidebar</span>
+      </label>
       <input
+        id="sidebar-filter-input"
+        className="sidebar-filter-input-field"
         type="text"
         placeholder="Filter sidebar"
         value={query}
         onChange={(event) => setQuery(event.target.value)}
       />
+      <Button
+        type="action"
+        icon="cancel"
+        extraClasses="clear-sidebar-filter-button"
+        onClickHandler={() => setQuery("")}
+      >
+        <span className="visually-hidden">Clear filter input</span>
+      </Button>
     </section>
   );
 }
diff --git a/client/src/ui/atoms/icon/index.scss b/client/src/ui/atoms/icon/index.scss
index 08ea074a9dec..a99aeebfd6c0 100644
--- a/client/src/ui/atoms/icon/index.scss
+++ b/client/src/ui/atoms/icon/index.scss
@@ -1,7 +1,7 @@
 $icons: "add-filled", "add", "altname", "bell-filled", "bell", "bookmark-filled",
   "bookmark", "cancel", "checkmark", "chevron", "chrome", "critical", "deno",
   "deprecated", "desktop", "disabled", "edge", "edit", "ellipses",
-  "experimental", "external", "eye-filled", "eye", "footnote",
+  "experimental", "external", "eye-filled", "eye", "filter", "footnote",
   "github-mark-small", "ie", "information", "language", "menu-filled", "menu",
   "mobile", "more", "theme-dark", "next", "no", "nodejs", "nonstandard",
   "note-info", "note-warning", "note-deprecated", "opera", "padlock", "partial",

From 17dabf829fd31127332a321d1226f2f32a2443a1 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 18:19:22 +0200
Subject: [PATCH 006/122] fixup! feat(sidebar): style filter, add icons + clear
 button

---
 client/src/document/organisms/sidebar/filter.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index f83da75a3adc..977d4e55236e 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -2,8 +2,9 @@
 
 .sidebar-filter {
   display: flex;
+  margin-top: -2.5rem;
   position: relative;
-  width: 100%;
+  width: calc(100% - 1rem); /* Leaves some space to scrollbar. */
 
   .sidebar-filter-label {
     left: 1rem; /* Moves icon inside field. */

From 8f2435e6b92bc1d681225ae61db35174b7508763 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 18:23:51 +0200
Subject: [PATCH 007/122] fix(sidebar): make filter sticky

---
 client/src/document/organisms/sidebar/index.scss | 5 +++++
 client/src/document/organisms/sidebar/index.tsx  | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 225764fdaa69..bba303c5897c 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -78,6 +78,11 @@
     }
   }
 
+  .sidebar-actions {
+    position: sticky;
+    top: 0;
+  }
+
   /* This is for sidebars where there is no sub-heading
    * for example: https://developer-mozilla.org/en-US/docs/Web/HTML/Element/progress
    */
diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
index e8df2b9acf00..3dd9353540a7 100644
--- a/client/src/document/organisms/sidebar/index.tsx
+++ b/client/src/document/organisms/sidebar/index.tsx
@@ -64,7 +64,9 @@ export function SidebarContainer({
           onClickHandler={() => setIsSidebarOpen(!isSidebarOpen)}
           aria-label="Collapse sidebar"
         />
-        <SidebarFilter />
+        <header className="sidebar-actions">
+          <SidebarFilter />
+        </header>
         <nav aria-label={label} className="sidebar-inner">
           <div className="sidebar-inner-nav">
             <div className="in-nav-toc">

From 26eb290cc9b84fd549e1d0385cc5ffda0fdff005 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 19:32:15 +0200
Subject: [PATCH 008/122] feat(sidebar): add thumbs to rate feature

---
 .../src/document/organisms/sidebar/filter.tsx |  5 ++
 client/src/telemetry/constants.ts             |  1 +
 client/src/ui/atoms/thumbs/index.scss         |  5 ++
 client/src/ui/atoms/thumbs/index.tsx          | 59 +++++++++++++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 client/src/ui/atoms/thumbs/index.scss
 create mode 100644 client/src/ui/atoms/thumbs/index.tsx

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index cd14e027c322..ace729cff198 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { SidebarFilterer } from "./SidebarFilterer";
 import { Button } from "../../../ui/atoms/button";
+import { GleanThumbs } from "../../../ui/atoms/thumbs";
 
 import "./filter.scss";
 
@@ -44,6 +45,10 @@ export function SidebarFilter() {
       >
         <span className="visually-hidden">Clear filter input</span>
       </Button>
+      <GleanThumbs
+        feature="sidebar-filter"
+        extraClasses="sidebar-filter-thumbs"
+      />
     </section>
   );
 }
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index eb2a5f545b70..98dbb09618a4 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -52,3 +52,4 @@ export const VIEWPORT_BREAKPOINTS: readonly [ViewportBreakpoint, number][] =
     ["sm", 426],
     ["xs", 0],
   ]);
+export const THUMBS = "thumbs";
diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
new file mode 100644
index 000000000000..fc16589ef4c8
--- /dev/null
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -0,0 +1,5 @@
+.glean-thumbs {
+  .thanks {
+    font-size: var(--type-tiny-font-size);
+  }
+}
diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
new file mode 100644
index 000000000000..644cfd19b39e
--- /dev/null
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { THUMBS } from "../../../telemetry/constants";
+import { useGleanClick } from "../../../telemetry/glean-context";
+import { Button } from "../button";
+
+import "./index.scss";
+
+export function GleanThumbs({
+  extraClasses = "",
+  feature,
+}: {
+  extraClasses?: string;
+  feature: string;
+}) {
+  const [submitted, setSubmitted] = useState(false);
+  const gleanClick = useGleanClick();
+
+  const handleThumbs = (value: "up" | "down") => {
+    gleanClick(`${THUMBS}: ${feature} -> ${value}`);
+    setSubmitted(true);
+  };
+
+  return (
+    <>
+      {submitted ? (
+        <section className={`glean-thumbs ${extraClasses}`}>
+          <span className="thanks">Thanks for voting!</span>
+        </section>
+      ) : (
+        <Thumbs
+          extraClasses={`${extraClasses}`}
+          onThumbsUp={() => handleThumbs("up")}
+          onThumbsDown={() => handleThumbs("down")}
+        />
+      )}
+    </>
+  );
+}
+
+export function Thumbs({
+  extraClasses = "",
+  onThumbsUp,
+  onThumbsDown,
+}: {
+  extraClasses?: string;
+  onThumbsUp: React.MouseEventHandler;
+  onThumbsDown: React.MouseEventHandler;
+}) {
+  return (
+    <section className={`thumbs-up-down ${extraClasses}`}>
+      <Button type="action" icon="thumbs-up" onClickHandler={onThumbsUp}>
+        <span className="visually-hidden">Thumbs up</span>
+      </Button>
+      <Button type="action" icon="thumbs-down" onClickHandler={onThumbsDown}>
+        <span className="visually-hidden">Thumbs down</span>
+      </Button>
+    </section>
+  );
+}

From db550ef97356adedbc764b71b061d20f1cc64557 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 20:02:40 +0200
Subject: [PATCH 009/122] fix(sidebar): fix button/icon placement

---
 .../document/organisms/sidebar/filter.scss    | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 977d4e55236e..d8bf736c3c4d 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -7,7 +7,7 @@
   width: calc(100% - 1rem); /* Leaves some space to scrollbar. */
 
   .sidebar-filter-label {
-    left: 1rem; /* Moves icon inside field. */
+    left: 1.1rem; /* Moves icon inside field. */
     position: relative;
     top: 0.1rem; /* Aligns icon with input. */
   }
@@ -38,28 +38,33 @@
       ~ .button.clear-sidebar-filter-button {
         display: block;
       }
+
+      ~ .sidebar-filter-thumbs {
+        display: none;
+      }
     }
 
     ~ .button.clear-sidebar-filter-button {
+      --button-color: var(--icon-secondary);
+      --button-height: 1.5rem;
+      --button-padding: 0;
       display: none;
+      position: absolute;
+      right: 0.75rem;
+      top: 0.25rem;
+      width: 1.5rem;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    ~ .sidebar-filter-thumbs {
+      margin-left: 1rem;
     }
   }
 
   .icon {
     background-color: var(--icon-secondary);
   }
-
-  .button {
-    --button-color: var(--icon-secondary);
-    --button-height: 1.5rem;
-    --button-padding: 0;
-    position: absolute;
-    right: 0.75rem;
-    top: 0.25rem;
-    width: 1.5rem;
-
-    &:hover {
-      background: transparent;
-    }
-  }
 }

From 3340c8cc78e10b3977e916c7e004b76c297221c1 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 20:09:54 +0200
Subject: [PATCH 010/122] fix(sidebar): stop fading out top area

---
 client/src/document/index.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 7aafff9586d7..78a895a8dcde 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -651,8 +651,7 @@ kbd {
     .sidebar {
       mask-image: linear-gradient(
         to bottom,
-        rgba(0, 0, 0, 0) 0%,
-        rgb(0, 0, 0) 3rem calc(100% - 3rem),
+        rgb(0, 0, 0) 0% calc(100% - 3rem),
         rgba(0, 0, 0, 0) 100%
       );
     }

From 4c34a7dec8811140604fc9ab515b55b7fb0e05a4 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 20:53:31 +0200
Subject: [PATCH 011/122] chore(sidebar): refine layout + thumbs

---
 .../document/organisms/sidebar/filter.scss    | 42 +++++++------
 .../src/document/organisms/sidebar/filter.tsx | 60 ++++++++++---------
 client/src/ui/atoms/thumbs/index.scss         |  7 +++
 client/src/ui/atoms/thumbs/index.tsx          | 47 ++++++++-------
 4 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index d8bf736c3c4d..a87de7444d5b 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -1,10 +1,22 @@
 @use "../../../ui/vars.scss" as *;
 
-.sidebar-filter {
+.sidebar-filter-container {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 1)
+  );
+  background-attachment: fixed;
   display: flex;
+  gap: 0.25rem;
   margin-top: -2.5rem;
-  position: relative;
-  width: calc(100% - 1rem); /* Leaves some space to scrollbar. */
+  width: 100%;
+
+  .sidebar-filter {
+    display: flex;
+    justify-content: center;
+    max-width: calc(100% - 1rem);
+  }
 
   .sidebar-filter-label {
     left: 1.1rem; /* Moves icon inside field. */
@@ -20,16 +32,12 @@
     color: var(--text-primary);
     height: var(--form-elem-height);
     padding-left: 1.5rem;
-    width: 9rem;
+    width: 8.5rem;
 
     &:focus {
       outline: var(--border-primary);
     }
 
-    &::placeholder {
-      color: var(--text-inactive);
-    }
-
     &:focus,
     &:not([value=""]) {
       padding-right: 1.5rem;
@@ -38,10 +46,6 @@
       ~ .button.clear-sidebar-filter-button {
         display: block;
       }
-
-      ~ .sidebar-filter-thumbs {
-        display: none;
-      }
     }
 
     ~ .button.clear-sidebar-filter-button {
@@ -50,21 +54,23 @@
       --button-padding: 0;
       display: none;
       position: absolute;
-      right: 0.75rem;
-      top: 0.25rem;
+      margin-top: 0.25rem;
+      right: 1.25rem;
       width: 1.5rem;
 
       &:hover {
         background: transparent;
       }
     }
-
-    ~ .sidebar-filter-thumbs {
-      margin-left: 1rem;
-    }
   }
 
   .icon {
     background-color: var(--icon-secondary);
   }
+
+  @media screen and (min-width: $screen-lg) {
+    .thumbs {
+      margin-left: 1rem;
+    }
+  }
 }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index ace729cff198..b2db6ce527b2 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -7,6 +7,7 @@ import "./filter.scss";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
+  const [hasFocus, setFocus] = useState(false);
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -20,35 +21,36 @@ export function SidebarFilter() {
   }, [query]);
 
   return (
-    <section className="sidebar-filter">
-      <label
-        id="sidebar-filter-label"
-        className="sidebar-filter-label"
-        htmlFor="sidebar-filter-input"
-      >
-        <span className="icon icon-filter"></span>
-        <span className="visually-hidden">Filter sidebar</span>
-      </label>
-      <input
-        id="sidebar-filter-input"
-        className="sidebar-filter-input-field"
-        type="text"
-        placeholder="Filter sidebar"
-        value={query}
-        onChange={(event) => setQuery(event.target.value)}
-      />
-      <Button
-        type="action"
-        icon="cancel"
-        extraClasses="clear-sidebar-filter-button"
-        onClickHandler={() => setQuery("")}
-      >
-        <span className="visually-hidden">Clear filter input</span>
-      </Button>
-      <GleanThumbs
-        feature="sidebar-filter"
-        extraClasses="sidebar-filter-thumbs"
-      />
+    <section className="sidebar-filter-container">
+      <div className="sidebar-filter">
+        <label
+          id="sidebar-filter-label"
+          className="sidebar-filter-label"
+          htmlFor="sidebar-filter-input"
+        >
+          <span className="icon icon-filter"></span>
+          <span className="visually-hidden">Filter sidebar</span>
+        </label>
+        <input
+          id="sidebar-filter-input"
+          className="sidebar-filter-input-field"
+          type="text"
+          placeholder="Filter sidebar"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => setFocus(true)}
+          onBlur={() => setFocus(false)}
+        />
+        <Button
+          type="action"
+          icon="cancel"
+          extraClasses="clear-sidebar-filter-button"
+          onClickHandler={() => setQuery("")}
+        >
+          <span className="visually-hidden">Clear filter input</span>
+        </Button>
+      </div>
+      {!hasFocus && !query && <GleanThumbs feature="sidebar-filter" />}
     </section>
   );
 }
diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index fc16589ef4c8..b3f3f028e2cd 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -1,4 +1,11 @@
 .glean-thumbs {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+
+  .feedback,
   .thanks {
     font-size: var(--type-tiny-font-size);
   }
diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 644cfd19b39e..98ae1b247621 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -5,13 +5,7 @@ import { Button } from "../button";
 
 import "./index.scss";
 
-export function GleanThumbs({
-  extraClasses = "",
-  feature,
-}: {
-  extraClasses?: string;
-  feature: string;
-}) {
+export function GleanThumbs({ feature }: { feature: string }) {
   const [submitted, setSubmitted] = useState(false);
   const gleanClick = useGleanClick();
 
@@ -21,37 +15,48 @@ export function GleanThumbs({
   };
 
   return (
-    <>
+    <section className="glean-thumbs" title="Rate this feature">
       {submitted ? (
-        <section className={`glean-thumbs ${extraClasses}`}>
-          <span className="thanks">Thanks for voting!</span>
-        </section>
+        <span className="thanks">Thanks for rating!</span>
       ) : (
-        <Thumbs
-          extraClasses={`${extraClasses}`}
-          onThumbsUp={() => handleThumbs("up")}
-          onThumbsDown={() => handleThumbs("down")}
-        />
+        <>
+          <Thumbs
+            size="small"
+            onThumbsUp={() => handleThumbs("up")}
+            onThumbsDown={() => handleThumbs("down")}
+          />
+        </>
       )}
-    </>
+    </section>
   );
 }
 
 export function Thumbs({
-  extraClasses = "",
   onThumbsUp,
   onThumbsDown,
+  size,
 }: {
   extraClasses?: string;
   onThumbsUp: React.MouseEventHandler;
   onThumbsDown: React.MouseEventHandler;
+  size?: "small" | "medium";
 }) {
   return (
-    <section className={`thumbs-up-down ${extraClasses}`}>
-      <Button type="action" icon="thumbs-up" onClickHandler={onThumbsUp}>
+    <section className="thumbs">
+      <Button
+        type="action"
+        icon="thumbs-up"
+        size={size}
+        onClickHandler={onThumbsUp}
+      >
         <span className="visually-hidden">Thumbs up</span>
       </Button>
-      <Button type="action" icon="thumbs-down" onClickHandler={onThumbsDown}>
+      <Button
+        type="action"
+        icon="thumbs-down"
+        size={size}
+        onClickHandler={onThumbsDown}
+      >
         <span className="visually-hidden">Thumbs down</span>
       </Button>
     </section>

From 7d344015f2d1552fb8229518241e8761a6a62aad Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:04:17 +0200
Subject: [PATCH 012/122] fix(sidebar): highlight matches in recursive text
 nodes

---
 .../organisms/sidebar/SidebarFilterer.ts      | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index eddae1dc7e55..6553295416da 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -83,9 +83,7 @@ export class SidebarFilterer {
   }
 
   private highlightMatches(el: HTMLElement, terms: string[]) {
-    const nodes = Array.from(el.childNodes).filter(
-      (node) => node.nodeType === Node.TEXT_NODE
-    ) as (Element & Text)[];
+    const nodes = this.getTextNodes(el);
 
     nodes.forEach((node) => {
       const haystack = node.textContent?.toLowerCase();
@@ -129,6 +127,24 @@ export class SidebarFilterer {
     });
   }
 
+  private getTextNodes(parentNode: Node): (Node & Text)[] {
+    const parents = [parentNode];
+    const nodes: (Node & Text)[] = [];
+
+    while (parents.length) {
+      const parent = parents.shift() as Node;
+      for (const childNode of parent.childNodes) {
+        if (childNode.nodeType === Node.TEXT_NODE) {
+          nodes.push(childNode as Node & Text);
+        } else if (childNode.hasChildNodes()) {
+          parents.push(childNode);
+        }
+      }
+    }
+
+    return nodes;
+  }
+
   private replaceChildNode(node: ChildNode, tagName: string) {
     const text = node.textContent;
     if (text) {

From e2cececf86f6ff86d2ef3b01ea54e61ece1118cb Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:06:27 +0200
Subject: [PATCH 013/122] fixup! fix(sidebar): highlight matches in recursive
 text nodes

---
 client/src/ui/atoms/thumbs/index.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index b3f3f028e2cd..c63973ad3c0d 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -5,8 +5,15 @@
   justify-content: center;
   text-align: center;
 
-  .feedback,
   .thanks {
     font-size: var(--type-tiny-font-size);
   }
 }
+
+.thumbs {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: center;
+}

From b23a70d6b55ed6a3604332047551e24f3b7e5fbd Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:21:05 +0200
Subject: [PATCH 014/122] fix(sidebar): avoid whitespace: pre by wrapping
 highlighted text

---
 .../organisms/sidebar/SidebarFilterer.ts         | 16 ++++++++--------
 client/src/document/organisms/sidebar/index.scss |  1 -
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 6553295416da..be2eeab562da 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -102,7 +102,10 @@ export class SidebarFilterer {
         ([x1, y1], [x2, y2]) => x1 - x2 || y1 - y2
       );
 
-      let rest = node;
+      const span = this.replaceChildNode(node, "span");
+      span.className = "highlight-container";
+
+      let rest = span.childNodes[0] as Node & Text;
       let cursor = 0;
 
       for (const [rangeBegin, rangeEnd] of sortedRanges) {
@@ -147,13 +150,10 @@ export class SidebarFilterer {
 
   private replaceChildNode(node: ChildNode, tagName: string) {
     const text = node.textContent;
-    if (text) {
-      const currentSpan = document.createElement(tagName);
-      currentSpan.innerText = text;
-      node.replaceWith(currentSpan);
-    } else {
-      node.parentElement?.removeChild(node);
-    }
+    const newNode = document.createElement(tagName);
+    newNode.innerText = text ?? "";
+    node.replaceWith(newNode);
+    return newNode;
   }
 
   private expandParents(target: HTMLElement) {
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index bba303c5897c..e77bd87da98a 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -31,7 +31,6 @@
     display: inline-flex;
     hyphens: auto;
     padding: 0.25rem;
-    white-space: pre;
 
     &:hover,
     &:focus {

From ba8d27cb3ead70f5548d54de121c4d42f705c596 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:30:26 +0200
Subject: [PATCH 015/122] feat(sidebar): restore scroll position after
 filtering

---
 .../src/document/organisms/sidebar/filter.tsx   | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index b2db6ce527b2..5cc25f3e1355 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -8,6 +8,9 @@ import "./filter.scss";
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [hasFocus, setFocus] = useState(false);
+  const [scrollTop, setScrollPosition] = useState<Number | undefined>(
+    undefined
+  );
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -16,9 +19,21 @@ export function SidebarFilter() {
       return;
     }
 
+    // Save scroll position.
+    if (query && typeof scrollTop === "undefined") {
+      setScrollPosition(quicklinks.scrollTop);
+    }
+
+    // Filter sidebar.
     const filterer = new SidebarFilterer(quicklinks);
     filterer.applyFilter(query);
-  }, [query]);
+
+    // Restore scroll position.
+    if (!query && typeof scrollTop == "number") {
+      quicklinks.scrollTop = scrollTop;
+      setScrollPosition(undefined);
+    }
+  }, [query, scrollTop]);
 
   return (
     <section className="sidebar-filter-container">

From 40b27a76e766d5027070c86cb9585aedb8a5e571 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:33:18 +0200
Subject: [PATCH 016/122] fix(sidebar): remove filter background

---
 client/src/document/organisms/sidebar/filter.scss | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index a87de7444d5b..902796553c91 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -1,12 +1,6 @@
 @use "../../../ui/vars.scss" as *;
 
 .sidebar-filter-container {
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1)
-  );
-  background-attachment: fixed;
   display: flex;
   gap: 0.25rem;
   margin-top: -2.5rem;
@@ -53,8 +47,8 @@
       --button-height: 1.5rem;
       --button-padding: 0;
       display: none;
-      position: absolute;
       margin-top: 0.25rem;
+      position: absolute;
       right: 1.25rem;
       width: 1.5rem;
 

From af1e76da6d7abd4e275ff886167413536c8756ca Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:42:27 +0200
Subject: [PATCH 017/122] fixup! feat(sidebar): restore scroll position after
 filtering

---
 client/src/document/organisms/sidebar/filter.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 5cc25f3e1355..c9fcc201edf5 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -8,9 +8,7 @@ import "./filter.scss";
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [hasFocus, setFocus] = useState(false);
-  const [scrollTop, setScrollPosition] = useState<Number | undefined>(
-    undefined
-  );
+  const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -20,8 +18,9 @@ export function SidebarFilter() {
     }
 
     // Save scroll position.
-    if (query && typeof scrollTop === "undefined") {
-      setScrollPosition(quicklinks.scrollTop);
+    if (query && typeof scrollTop === "undefined" && quicklinks.scrollTop > 0) {
+      setScrollTop(quicklinks.scrollTop);
+      quicklinks.scrollTop = 0;
     }
 
     // Filter sidebar.
@@ -29,9 +28,9 @@ export function SidebarFilter() {
     filterer.applyFilter(query);
 
     // Restore scroll position.
-    if (!query && typeof scrollTop == "number") {
+    if (!query && typeof scrollTop === "number") {
       quicklinks.scrollTop = scrollTop;
-      setScrollPosition(undefined);
+      setScrollTop(undefined);
     }
   }, [query, scrollTop]);
 

From 6ab2587eb18c6480bd01f12735206f97f8dba5f0 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 30 May 2023 21:44:13 +0200
Subject: [PATCH 018/122] fix(sidebar): avoid filter clear button moving

---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 902796553c91..255f5dd4ae85 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -47,9 +47,9 @@
       --button-height: 1.5rem;
       --button-padding: 0;
       display: none;
+      left: calc(100% - 3rem);
       margin-top: 0.25rem;
       position: absolute;
-      right: 1.25rem;
       width: 1.5rem;
 
       &:hover {

From 34012bb05de767908fbf33e5e7ebc1452abc7134 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 11:15:18 +0200
Subject: [PATCH 019/122] fixup! chore(sidebar): refine layout + thumbs

---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 255f5dd4ae85..02cea21d1499 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -63,7 +63,7 @@
   }
 
   @media screen and (min-width: $screen-lg) {
-    .thumbs {
+    .glean-thumbs {
       margin-left: 1rem;
     }
   }

From e3f255a6ef2a616a5ec311fef8a856e30ad1f9c9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 11:15:38 +0200
Subject: [PATCH 020/122] fix(sidebar): add backdrop to filter

---
 client/src/document/organisms/sidebar/filter.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 02cea21d1499..6cb92554caf1 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -1,9 +1,16 @@
 @use "../../../ui/vars.scss" as *;
 
 .sidebar-filter-container {
+  background: linear-gradient(
+    to bottom,
+    var(--background-primary) 0% calc(100% - 1rem),
+    rgba(0, 0, 0, 0) 100%
+  );
   display: flex;
   gap: 0.25rem;
-  margin-top: -2.5rem;
+  margin-top: -3rem;
+  padding-bottom: 1rem;
+  padding-top: 0.5rem;
   width: 100%;
 
   .sidebar-filter {

From e118e6f6988a7879172f578acc49c6c28c9c6872 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 12:54:52 +0200
Subject: [PATCH 021/122] chore(sidebar): move thumbs below filter + add text

---
 .../document/organisms/sidebar/filter.scss    | 12 ++----
 .../src/document/organisms/sidebar/filter.tsx |  5 +--
 client/src/ui/atoms/thumbs/index.scss         | 12 ++----
 client/src/ui/atoms/thumbs/index.tsx          | 37 +++++++++++++------
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 6cb92554caf1..054c59ad504e 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -3,13 +3,13 @@
 .sidebar-filter-container {
   background: linear-gradient(
     to bottom,
-    var(--background-primary) 0% calc(100% - 1rem),
+    var(--background-primary) 0% calc(100% - 2rem),
     rgba(0, 0, 0, 0) 100%
   );
   display: flex;
-  gap: 0.25rem;
+  flex-direction: column;
   margin-top: -3rem;
-  padding-bottom: 1rem;
+  padding-bottom: 1.5rem;
   padding-top: 0.5rem;
   width: 100%;
 
@@ -68,10 +68,4 @@
   .icon {
     background-color: var(--icon-secondary);
   }
-
-  @media screen and (min-width: $screen-lg) {
-    .glean-thumbs {
-      margin-left: 1rem;
-    }
-  }
 }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index c9fcc201edf5..4b4d53e48165 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -7,7 +7,6 @@ import "./filter.scss";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
-  const [hasFocus, setFocus] = useState(false);
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
 
   useEffect(() => {
@@ -52,8 +51,6 @@ export function SidebarFilter() {
           placeholder="Filter sidebar"
           value={query}
           onChange={(event) => setQuery(event.target.value)}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
         />
         <Button
           type="action"
@@ -64,7 +61,7 @@ export function SidebarFilter() {
           <span className="visually-hidden">Clear filter input</span>
         </Button>
       </div>
-      {!hasFocus && !query && <GleanThumbs feature="sidebar-filter" />}
+      <GleanThumbs feature="sidebar-filter" />
     </section>
   );
 }
diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index c63973ad3c0d..d27ae301ebce 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -2,18 +2,12 @@
   align-items: center;
   display: flex;
   flex-direction: row;
+  gap: 0.1rem;
   justify-content: center;
   text-align: center;
 
-  .thanks {
+  .question,
+  .confirmation {
     font-size: var(--type-tiny-font-size);
   }
 }
-
-.thumbs {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  justify-content: center;
-}
diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 98ae1b247621..075304070220 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -5,7 +5,15 @@ import { Button } from "../button";
 
 import "./index.scss";
 
-export function GleanThumbs({ feature }: { feature: string }) {
+export function GleanThumbs({
+  feature,
+  question = "Is this useful?",
+  confirmation = "Thanks for your feedback!",
+}: {
+  feature: string;
+  question?: string;
+  confirmation?: string;
+}) {
   const [submitted, setSubmitted] = useState(false);
   const gleanClick = useGleanClick();
 
@@ -15,50 +23,57 @@ export function GleanThumbs({ feature }: { feature: string }) {
   };
 
   return (
-    <section className="glean-thumbs" title="Rate this feature">
-      {submitted ? (
-        <span className="thanks">Thanks for rating!</span>
-      ) : (
+    <section className="glean-thumbs">
+      {!submitted ? (
         <>
+          <span className="question">{question}</span>
           <Thumbs
-            size="small"
+            upLabel="This is useful."
+            downLabel="This is NOT useful."
             onThumbsUp={() => handleThumbs("up")}
             onThumbsDown={() => handleThumbs("down")}
           />
         </>
+      ) : (
+        <span className="confirmation">{confirmation}</span>
       )}
     </section>
   );
 }
 
 export function Thumbs({
+  upLabel = "Thumbs up",
+  downLabel = "Thumbs down",
   onThumbsUp,
   onThumbsDown,
   size,
 }: {
-  extraClasses?: string;
+  upLabel?: string;
+  downLabel?: string;
   onThumbsUp: React.MouseEventHandler;
   onThumbsDown: React.MouseEventHandler;
   size?: "small" | "medium";
 }) {
   return (
-    <section className="thumbs">
+    <>
       <Button
         type="action"
         icon="thumbs-up"
         size={size}
         onClickHandler={onThumbsUp}
+        title={upLabel}
       >
-        <span className="visually-hidden">Thumbs up</span>
+        <span className="visually-hidden">{upLabel}</span>
       </Button>
       <Button
         type="action"
         icon="thumbs-down"
         size={size}
         onClickHandler={onThumbsDown}
+        title={downLabel}
       >
-        <span className="visually-hidden">Thumbs down</span>
+        <span className="visually-hidden">{downLabel}</span>
       </Button>
-    </section>
+    </>
   );
 }

From fdb46f4818cf052817199ab0786aff0a6ca4dcc7 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:07:06 +0200
Subject: [PATCH 022/122] chore(thumbs): change how thumbs up/down behave on
 hover/active

---
 client/src/ui/atoms/thumbs/index.scss | 22 ++++++++++++++++++++++
 client/src/ui/atoms/thumbs/index.tsx  |  2 ++
 2 files changed, 24 insertions(+)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index d27ae301ebce..e1d03ee3534f 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -11,3 +11,25 @@
     font-size: var(--type-tiny-font-size);
   }
 }
+
+.thumbs {
+  &:hover {
+    --button-bg-hover: unset;
+  }
+
+  &:active {
+    --button-bg-active: unset;
+  }
+
+  &:focus,
+  &:hover,
+  &:active {
+    .icon-thumbs-up {
+      background-color: var(--icon-success);
+    }
+
+    .icon-thumbs-down {
+      background-color: var(--icon-critical);
+    }
+  }
+}
diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 075304070220..abb690cadf73 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -58,6 +58,7 @@ export function Thumbs({
     <>
       <Button
         type="action"
+        extraClasses={"thumbs"}
         icon="thumbs-up"
         size={size}
         onClickHandler={onThumbsUp}
@@ -67,6 +68,7 @@ export function Thumbs({
       </Button>
       <Button
         type="action"
+        extraClasses={"thumbs"}
         icon="thumbs-down"
         size={size}
         onClickHandler={onThumbsDown}

From 02f6c0fa7e019d87334959aa26dd916f39438508 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:11:33 +0200
Subject: [PATCH 023/122] chore(sidebar): fade thumbs unless hover/focus-within

---
 client/src/document/organisms/sidebar/filter.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 054c59ad504e..8abca85a1df2 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -68,4 +68,15 @@
   .icon {
     background-color: var(--icon-secondary);
   }
+
+  &:hover,
+  &:focus-within {
+    .glean-thumbs {
+      opacity: unset;
+    }
+  }
+
+  .glean-thumbs {
+    opacity: 0.5;
+  }
 }

From 99a31f2105c4772f3efb73923c997e9469050503 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:14:37 +0200
Subject: [PATCH 024/122] fix(sidebar): make toc non-relative

This caused the TOC to display on top of the filter.
---
 client/src/document/organisms/toc/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/document/organisms/toc/index.scss b/client/src/document/organisms/toc/index.scss
index 08b9063427cb..f8825b311d77 100644
--- a/client/src/document/organisms/toc/index.scss
+++ b/client/src/document/organisms/toc/index.scss
@@ -5,7 +5,6 @@
 .document-toc {
   margin-bottom: 2rem;
   padding: 0;
-  position: relative;
 
   @media screen and (max-width: $screen-sm) {
     padding: 0 1rem;

From 2d193d4ccad1b55a73bdf7a3062e361207d9b28e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:17:54 +0200
Subject: [PATCH 025/122] fix(sidebar): fix glean-thumbs height

---
 client/src/ui/atoms/thumbs/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index e1d03ee3534f..3c074b988149 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: row;
   gap: 0.1rem;
+  height: 1.5rem;
   justify-content: center;
   text-align: center;
 

From 2e40f97528f877b11447c1bdf444337bb36cb6d9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:19:10 +0200
Subject: [PATCH 026/122] fix(thumbs): use 0/1 for rating value

Avoids having to use a CASE statement in Redash.
---
 client/src/ui/atoms/thumbs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index abb690cadf73..d040d05551cd 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -18,7 +18,7 @@ export function GleanThumbs({
   const gleanClick = useGleanClick();
 
   const handleThumbs = (value: "up" | "down") => {
-    gleanClick(`${THUMBS}: ${feature} -> ${value}`);
+    gleanClick(`${THUMBS}: ${feature} -> ${value === "up" ? 1 : 0}`);
     setSubmitted(true);
   };
 

From 6efe597553032239477e62e5dbaf1548f9a0a825 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:22:48 +0200
Subject: [PATCH 027/122] fix(sidebar): avoid icons showing on top of the
 filter

---
 client/src/document/organisms/sidebar/index.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index e77bd87da98a..2a4ce64f7641 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -125,7 +125,9 @@
     height: 14px;
     margin-right: -0.25rem;
     mask-size: 14px;
+    position: relative;
     width: 14px;
+    z-index: -1;
   }
 
   /* icons in sidebars */

From ec600039533f43b0302ca799238f2f354792007b Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:23:57 +0200
Subject: [PATCH 028/122] chore(sidebar): hide filter on mobile

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 8abca85a1df2..1d6b071c9cee 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -13,6 +13,10 @@
   padding-top: 0.5rem;
   width: 100%;
 
+  @media screen and (max-width: $screen-sm) {
+    display: none;
+  }
+
   .sidebar-filter {
     display: flex;
     justify-content: center;

From a2569efc65ecb9e3940d2b1e3242e3719c87c5b8 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:24:46 +0200
Subject: [PATCH 029/122] fixup! fix(sidebar): avoid icons showing on top of
 the filter

---
 client/src/document/organisms/sidebar/filter.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 1d6b071c9cee..95047520c0bf 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -71,6 +71,8 @@
 
   .icon {
     background-color: var(--icon-secondary);
+    position: unset;
+    z-index: unset;
   }
 
   &:hover,

From 551eb134ac0c5d72ea1e722b0edf97b6a39b5f2e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:26:08 +0200
Subject: [PATCH 030/122] Revert "chore(sidebar): fade thumbs unless
 hover/focus-within"

This reverts commit ee98328073739555691ed35569585c3223d46be3.
---
 client/src/document/organisms/sidebar/filter.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 95047520c0bf..f40447f5a18a 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -74,15 +74,4 @@
     position: unset;
     z-index: unset;
   }
-
-  &:hover,
-  &:focus-within {
-    .glean-thumbs {
-      opacity: unset;
-    }
-  }
-
-  .glean-thumbs {
-    opacity: 0.5;
-  }
 }

From a5aa4181bcbc6af84c27cb1d4ba9912252289f86 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:37:14 +0200
Subject: [PATCH 031/122] chore(sidebar): make filter field span full width

---
 client/src/document/organisms/sidebar/filter.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index f40447f5a18a..63168289aad6 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -20,7 +20,7 @@
   .sidebar-filter {
     display: flex;
     justify-content: center;
-    max-width: calc(100% - 1rem);
+    width: 100%;
   }
 
   .sidebar-filter-label {
@@ -37,7 +37,8 @@
     color: var(--text-primary);
     height: var(--form-elem-height);
     padding-left: 1.5rem;
-    width: 8.5rem;
+    padding-right: 1.5rem;
+    width: 100%;
 
     &:focus {
       outline: var(--border-primary);
@@ -45,9 +46,6 @@
 
     &:focus,
     &:not([value=""]) {
-      padding-right: 1.5rem;
-      width: 100%;
-
       ~ .button.clear-sidebar-filter-button {
         display: block;
       }
@@ -58,7 +56,7 @@
       --button-height: 1.5rem;
       --button-padding: 0;
       display: none;
-      left: calc(100% - 3rem);
+      left: calc(100% - 2rem);
       margin-top: 0.25rem;
       position: absolute;
       width: 1.5rem;

From 6ea75e7107d5b75f97e46906f52459070329545f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:37:28 +0200
Subject: [PATCH 032/122] chore(sidebar): align thumbs right

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 63168289aad6..9e45b6eeeb43 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -72,4 +72,8 @@
     position: unset;
     z-index: unset;
   }
+
+  .glean-thumbs {
+    justify-content: end;
+  }
 }

From 192e1e01791f0d1b5fb474d6e61c8cfa5a41f7ac Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 13:41:35 +0200
Subject: [PATCH 033/122] chore(sidebar): reduce filter font-size

---
 client/src/document/organisms/sidebar/filter.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 9e45b6eeeb43..1f510b265a80 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -8,6 +8,7 @@
   );
   display: flex;
   flex-direction: column;
+  font-size: var(--type-smaller-font-size);
   margin-top: -3rem;
   padding-bottom: 1.5rem;
   padding-top: 0.5rem;
@@ -26,7 +27,7 @@
   .sidebar-filter-label {
     left: 1.1rem; /* Moves icon inside field. */
     position: relative;
-    top: 0.1rem; /* Aligns icon with input. */
+    top: 0.3rem; /* Aligns icon with input. */
   }
 
   .sidebar-filter-input-field {

From cbcd7b1b522576992a3266086fea1b21a2184077 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 18:42:49 +0200
Subject: [PATCH 034/122] fix(sidebar): hide filter on medium screen as well

---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 1f510b265a80..c73ef767e639 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -14,7 +14,7 @@
   padding-top: 0.5rem;
   width: 100%;
 
-  @media screen and (max-width: $screen-sm) {
+  @media screen and (max-width: $screen-md) {
     display: none;
   }
 

From 0f7af371240973bf3e987ab08a9fa176b08cd0bf Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 18:56:33 +0200
Subject: [PATCH 035/122] feat(sidebar): record sidebar_click_with_filter event

---
 client/src/document/organisms/sidebar/filter.tsx | 7 +++++++
 client/src/telemetry/constants.ts                | 1 +
 client/src/telemetry/sidebar-click.ts            | 9 ++++++++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 4b4d53e48165..2a9c7f7af563 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -5,6 +5,13 @@ import { GleanThumbs } from "../../../ui/atoms/thumbs";
 
 import "./filter.scss";
 
+export function getSidebarFilterValue() {
+  const input = document.getElementById(
+    "sidebar-filter-input"
+  ) as HTMLInputElement | null;
+  return input?.value;
+}
+
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 98dbb09618a4..13e9c52582fe 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -25,6 +25,7 @@ export const NEW_COLLECTION_MODAL_UPGRADE_LINK =
   "new_collection_modal_upgrade_link";
 export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
+export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
 export const TOP_NAV_ALREADY_SUBSCRIBER = "top_nav_already_subscriber";
 export const TOP_NAV_GET_MDN_PLUS = "top_nav_get_mdn_plus";
 export const TOGGLE_PLUS_OFFLINE_DISABLED = "toggle_plus_offline_disabled";
diff --git a/client/src/telemetry/sidebar-click.ts b/client/src/telemetry/sidebar-click.ts
index 8268dad5fd1d..0618cbaf5320 100644
--- a/client/src/telemetry/sidebar-click.ts
+++ b/client/src/telemetry/sidebar-click.ts
@@ -1,4 +1,5 @@
-import { SIDEBAR_CLICK } from "./constants";
+import { getSidebarFilterValue } from "../document/organisms/sidebar/filter";
+import { SIDEBAR_CLICK, SIDEBAR_CLICK_WITH_FILTER } from "./constants";
 
 export function handleSidebarClick(
   event: MouseEvent,
@@ -7,6 +8,12 @@ export function handleSidebarClick(
   const payload = getClickPayload(event);
   if (payload) {
     record(`${SIDEBAR_CLICK}: ${payload.macro} ${payload.href}`);
+
+    const filter = getSidebarFilterValue();
+    if (filter) {
+      // Records user input only if it is a subset of the sidebar content.
+      record(`${SIDEBAR_CLICK_WITH_FILTER}: ${payload.macro} ${filter}`);
+    }
   }
 }
 

From df98ccef132d07c2294b4e4bd34dcbb1698295a7 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 19:01:58 +0200
Subject: [PATCH 036/122] chore(sidebar): center thumbs

---
 client/src/document/organisms/sidebar/filter.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index c73ef767e639..c16c95aca255 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -73,8 +73,4 @@
     position: unset;
     z-index: unset;
   }
-
-  .glean-thumbs {
-    justify-content: end;
-  }
 }

From 1c9544ecaadac69ca4adaae8bfb68e45b2e15511 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 19:09:25 +0200
Subject: [PATCH 037/122] chore(thumbs): rephrase default question

---
 client/src/ui/atoms/thumbs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index d040d05551cd..7cbbda1cd893 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -7,7 +7,7 @@ import "./index.scss";
 
 export function GleanThumbs({
   feature,
-  question = "Is this useful?",
+  question = "Is this feature useful?",
   confirmation = "Thanks for your feedback!",
 }: {
   feature: string;

From 9422238bf891012af55b3136349e5d3af20abebe Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 19:27:30 +0200
Subject: [PATCH 038/122] fixup! feat(sidebar): record
 sidebar_click_with_filter event

---
 client/src/document/organisms/sidebar/filter.tsx | 7 -------
 client/src/telemetry/sidebar-click.ts            | 8 +++++++-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 2a9c7f7af563..4b4d53e48165 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -5,13 +5,6 @@ import { GleanThumbs } from "../../../ui/atoms/thumbs";
 
 import "./filter.scss";
 
-export function getSidebarFilterValue() {
-  const input = document.getElementById(
-    "sidebar-filter-input"
-  ) as HTMLInputElement | null;
-  return input?.value;
-}
-
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
diff --git a/client/src/telemetry/sidebar-click.ts b/client/src/telemetry/sidebar-click.ts
index 0618cbaf5320..0f64565275f8 100644
--- a/client/src/telemetry/sidebar-click.ts
+++ b/client/src/telemetry/sidebar-click.ts
@@ -1,4 +1,3 @@
-import { getSidebarFilterValue } from "../document/organisms/sidebar/filter";
 import { SIDEBAR_CLICK, SIDEBAR_CLICK_WITH_FILTER } from "./constants";
 
 export function handleSidebarClick(
@@ -44,3 +43,10 @@ function getClickPayload(event: MouseEvent) {
     href,
   };
 }
+
+export function getSidebarFilterValue() {
+  const input = document.getElementById(
+    "sidebar-filter-input"
+  ) as HTMLInputElement | null;
+  return input?.value;
+}

From 5da76c37904ea9a68e8cf7e41f153aa2f0ee8a8d Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 20:42:56 +0200
Subject: [PATCH 039/122] chore(sidebar): show the filter clear only if there
 is a value

---
 client/src/document/organisms/sidebar/filter.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index c16c95aca255..bbbfbe95e929 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -45,7 +45,6 @@
       outline: var(--border-primary);
     }
 
-    &:focus,
     &:not([value=""]) {
       ~ .button.clear-sidebar-filter-button {
         display: block;

From cc33088faf59bde8512cc022ff99284f05ed42bb Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 20:53:57 +0200
Subject: [PATCH 040/122] feat(sidebar-filter): show number of matches in
 footer

---
 .../organisms/sidebar/SidebarFilterer.ts         |  7 ++++++-
 .../src/document/organisms/sidebar/filter.scss   |  9 +++++++++
 client/src/document/organisms/sidebar/filter.tsx | 16 ++++++++++++++--
 client/src/ui/atoms/thumbs/index.scss            |  8 --------
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index be2eeab562da..26ab588d22f4 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -3,9 +3,10 @@ import { splitQuery } from "../../../utils";
 export class SidebarFilterer {
   applyFilter(query: string) {
     if (query) {
-      this.showOnlyMatchingItems(query);
+      return this.showOnlyMatchingItems(query);
     } else {
       this.showAllItems();
+      return undefined;
     }
   }
   root: HTMLElement;
@@ -61,6 +62,7 @@ export class SidebarFilterer {
 
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);
+    let matchCount = 0;
     this.links.forEach((link) => {
       this.resetHighlighting(link);
       const haystack = link.innerText.toLowerCase();
@@ -70,10 +72,13 @@ export class SidebarFilterer {
       target.style.display = isMatch ? "inherit" : "none";
 
       if (isMatch) {
+        matchCount++;
         this.highlightMatches(link, terms);
         this.expandParents(target);
       }
     });
+
+    return matchCount;
   }
 
   private collapseDetail(el: HTMLDetailsElement) {
diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index bbbfbe95e929..03d821db6f37 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -72,4 +72,13 @@
     position: unset;
     z-index: unset;
   }
+
+  .sidebar-filter-footer {
+    align-items: center;
+    display: flex;
+    font-size: var(--type-tiny-font-size);
+    height: 1.5rem;
+    justify-content: center;
+    text-align: center;
+  }
 }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 4b4d53e48165..ac1cb9e1dab0 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -8,6 +8,7 @@ import "./filter.scss";
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
+  const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -24,7 +25,8 @@ export function SidebarFilter() {
 
     // Filter sidebar.
     const filterer = new SidebarFilterer(quicklinks);
-    filterer.applyFilter(query);
+    const items = filterer.applyFilter(query);
+    setMatchCount(items);
 
     // Restore scroll position.
     if (!query && typeof scrollTop === "number") {
@@ -61,7 +63,17 @@ export function SidebarFilter() {
           <span className="visually-hidden">Clear filter input</span>
         </Button>
       </div>
-      <GleanThumbs feature="sidebar-filter" />
+      <div className="sidebar-filter-footer">
+        {matchCount === undefined ? (
+          <GleanThumbs feature="sidebar-filter" />
+        ) : (
+          <span>
+            {matchCount === 0
+              ? "No items found."
+              : `${matchCount} ${matchCount === 1 ? "item" : "items"} found.`}
+          </span>
+        )}
+      </div>
     </section>
   );
 }
diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index 3c074b988149..27532fc8ded4 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -3,14 +3,6 @@
   display: flex;
   flex-direction: row;
   gap: 0.1rem;
-  height: 1.5rem;
-  justify-content: center;
-  text-align: center;
-
-  .question,
-  .confirmation {
-    font-size: var(--type-tiny-font-size);
-  }
 }
 
 .thumbs {

From 40e9e5e3a598f6bbfc7550629ed7fc134bd189f2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 31 May 2023 21:17:36 +0200
Subject: [PATCH 041/122] feat(sidebar-filter): show/hide section headings
 dynamically

---
 .../organisms/sidebar/SidebarFilterer.ts      | 55 ++++++++++++++++---
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 26ab588d22f4..ff98717e5a72 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -9,24 +9,28 @@ export class SidebarFilterer {
       return undefined;
     }
   }
+
   root: HTMLElement;
+  headings: HTMLElement[];
+  parents: HTMLDetailsElement[];
+  links: HTMLAnchorElement[];
 
   constructor(root: HTMLElement) {
     this.root = root;
-  }
-
-  private get parents(): HTMLDetailsElement[] {
-    return Array.from(
+    this.headings = Array.from(
+      this.root.querySelectorAll<HTMLElement>("li strong")
+    );
+    this.parents = Array.from(
       this.root.querySelectorAll<HTMLDetailsElement>("details")
     );
-  }
-
-  private get links(): HTMLAnchorElement[] {
-    return Array.from(this.root.querySelectorAll<HTMLAnchorElement>("a[href]"));
+    this.links = Array.from(
+      this.root.querySelectorAll<HTMLAnchorElement>("a[href]")
+    );
   }
 
   showAllItems() {
     this.links.forEach((link) => this.resetLink(link));
+    this.headings.forEach((heading) => this.resetHeading(heading));
     this.parents.forEach((parent) => this.resetParent(parent));
   }
 
@@ -36,6 +40,11 @@ export class SidebarFilterer {
     target.style.display = "inherit";
   }
 
+  private resetHeading(heading: HTMLElement) {
+    const container = heading.closest("li") ?? heading;
+    container.style.display = "inherit";
+  }
+
   private resetParent(detail: HTMLDetailsElement) {
     detail.style.display = "inherit";
     if (detail.dataset.open) {
@@ -58,6 +67,7 @@ export class SidebarFilterer {
   }
 
   showOnlyMatchingItems(query: string) {
+    this.headings.forEach(this.hideHeading);
     this.parents.forEach(this.collapseDetail);
 
     // Show/hide items (+ show parents).
@@ -74,6 +84,7 @@ export class SidebarFilterer {
       if (isMatch) {
         matchCount++;
         this.highlightMatches(link, terms);
+        this.showHeading(target);
         this.expandParents(target);
       }
     });
@@ -81,6 +92,11 @@ export class SidebarFilterer {
     return matchCount;
   }
 
+  private hideHeading(heading: HTMLElement) {
+    const container = heading.closest("li") ?? heading;
+    container.style.display = "none";
+  }
+
   private collapseDetail(el: HTMLDetailsElement) {
     el.style.display = "none";
     el.dataset.open = el.dataset.open ?? String(el.open);
@@ -161,6 +177,29 @@ export class SidebarFilterer {
     return newNode;
   }
 
+  private showHeading(target: HTMLElement) {
+    const heading = this.findFirstElementBefore(target, this.headings);
+    const container = heading?.closest("li") ?? heading;
+    if (container) {
+      container.style.display = "inherit";
+    }
+  }
+
+  private findFirstElementBefore(
+    target: HTMLElement,
+    candidates: HTMLElement[]
+  ) {
+    return candidates
+      .slice()
+      .reverse()
+      .find((candidate) => {
+        return (
+          candidate.compareDocumentPosition(target) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+        );
+      });
+  }
+
   private expandParents(target: HTMLElement) {
     let parent = target.parentElement?.closest("details");
     while (parent) {

From 7375bfa4a6019b28844bc618ce21783cd6448c28 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 1 Jun 2023 13:20:39 +0200
Subject: [PATCH 042/122] chore(sidebar-filter): show match count below thumbs

---
 client/src/document/organisms/sidebar/filter.scss | 11 +++++++++--
 client/src/document/organisms/sidebar/filter.tsx  |  9 +++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 03d821db6f37..de99e26414bd 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -76,9 +76,16 @@
   .sidebar-filter-footer {
     align-items: center;
     display: flex;
+    flex-direction: column;
     font-size: var(--type-tiny-font-size);
-    height: 1.5rem;
-    justify-content: center;
     text-align: center;
+
+    .glean-thumbs {
+      height: 1.5rem;
+    }
+
+    .sidebar-filter-count {
+      font-style: italic;
+    }
   }
 }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index ac1cb9e1dab0..5fa89f0d3f5e 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -64,14 +64,15 @@ export function SidebarFilter() {
         </Button>
       </div>
       <div className="sidebar-filter-footer">
-        {matchCount === undefined ? (
+        <div className="sidebar-filter-thumbs">
           <GleanThumbs feature="sidebar-filter" />
-        ) : (
-          <span>
+        </div>
+        {matchCount !== undefined && (
+          <div className="sidebar-filter-count">
             {matchCount === 0
               ? "No items found."
               : `${matchCount} ${matchCount === 1 ? "item" : "items"} found.`}
-          </span>
+          </div>
         )}
       </div>
     </section>

From 2618d2f25632cd12d22b738c1de94d7f413c214b Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 1 Jun 2023 13:25:00 +0200
Subject: [PATCH 043/122] chore(thumbs): refine wording

---
 client/src/ui/atoms/thumbs/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 7cbbda1cd893..f0486381e3ab 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -8,7 +8,7 @@ import "./index.scss";
 export function GleanThumbs({
   feature,
   question = "Is this feature useful?",
-  confirmation = "Thanks for your feedback!",
+  confirmation = "Thank you for your feedback!",
 }: {
   feature: string;
   question?: string;
@@ -28,8 +28,8 @@ export function GleanThumbs({
         <>
           <span className="question">{question}</span>
           <Thumbs
-            upLabel="This is useful."
-            downLabel="This is NOT useful."
+            upLabel="This feature is useful."
+            downLabel="This feature is not useful."
             onThumbsUp={() => handleThumbs("up")}
             onThumbsDown={() => handleThumbs("down")}
           />

From 0a59a412e68d23043e878bc520719652850b1848 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 17:51:31 +0200
Subject: [PATCH 044/122] fix(sidebar-filter): use --mark-color for highlights

---
 client/src/document/organisms/sidebar/filter.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index de99e26414bd..b63b50377c74 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -89,3 +89,9 @@
     }
   }
 }
+
+.sidebar {
+  mark {
+    background-color: var(--mark-color);
+  }
+}

From 659b559ba4424edbb537ec55c62b26742d359897 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 17:54:41 +0200
Subject: [PATCH 045/122] fix(sidebar-filter): align left width breadcrumbs

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index b63b50377c74..80d35680da57 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -20,14 +20,14 @@
 
   .sidebar-filter {
     display: flex;
-    justify-content: center;
     width: 100%;
   }
 
   .sidebar-filter-label {
-    left: 1.1rem; /* Moves icon inside field. */
+    left: 0.5rem; /* Moves icon inside field. */
     position: relative;
     top: 0.3rem; /* Aligns icon with input. */
+    width: 0; /* Avoid moving field right. */
   }
 
   .sidebar-filter-input-field {

From a9b506ccd945c55f07c370081c0d97c4355af6c3 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:02:59 +0200
Subject: [PATCH 046/122] fix(sidebar-filter): hide on pages w/o sidebar

---
 client/src/document/organisms/sidebar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
index 3dd9353540a7..9d58b6e9a920 100644
--- a/client/src/document/organisms/sidebar/index.tsx
+++ b/client/src/document/organisms/sidebar/index.tsx
@@ -65,7 +65,7 @@ export function SidebarContainer({
           aria-label="Collapse sidebar"
         />
         <header className="sidebar-actions">
-          <SidebarFilter />
+          {doc.sidebarHTML && <SidebarFilter />}
         </header>
         <nav aria-label={label} className="sidebar-inner">
           <div className="sidebar-inner-nav">

From 5fd075f3276bd814e95d1b0ad1cb2a290d3ff542 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:04:12 +0200
Subject: [PATCH 047/122] fix(sidebar-filter): add border on focus

---
 client/src/document/organisms/sidebar/filter.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 80d35680da57..12039d5f4843 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -42,7 +42,9 @@
     width: 100%;
 
     &:focus {
-      outline: var(--border-primary);
+      border-color: var(--category-color);
+      box-shadow: 0 0 0 3px var(--blend-color), 0 0 0 3px var(--category-color);
+      outline: 0 none;
     }
 
     &:not([value=""]) {

From 467928120663488fd7ced0f1e37f676f44d6bc72 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:06:15 +0200
Subject: [PATCH 048/122] fix(sidebar-filter): left align thumbs + items with
 filter icon

---
 client/src/document/organisms/sidebar/filter.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 12039d5f4843..b7ffd033b814 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -76,11 +76,10 @@
   }
 
   .sidebar-filter-footer {
-    align-items: center;
     display: flex;
     flex-direction: column;
     font-size: var(--type-tiny-font-size);
-    text-align: center;
+    margin-left: 0.7rem;
 
     .glean-thumbs {
       height: 1.5rem;

From 975e294aa8a38665dc849340f4af33376407ffcb Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:07:22 +0200
Subject: [PATCH 049/122] fix(sidebar-filter): increase space between input and
 thumbs

---
 client/src/document/organisms/sidebar/filter.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index b7ffd033b814..c8f9656a901f 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -20,6 +20,7 @@
 
   .sidebar-filter {
     display: flex;
+    margin-bottom: 0.5rem;
     width: 100%;
   }
 

From 6b1a99ebeadf0691184f1852b0b354c9e8f2c0e0 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:13:53 +0200
Subject: [PATCH 050/122] chore(sidebar-filter): use different color for match
 count

---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index c8f9656a901f..4ab933301d0f 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -87,7 +87,7 @@
     }
 
     .sidebar-filter-count {
-      font-style: italic;
+      color: var(--category-color);
     }
   }
 }

From 1ba0f55348da610528b9a4483462e64c3a7824c7 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:15:00 +0200
Subject: [PATCH 051/122] fix(sidebar-filter): increase backdrop length +
 distance

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 4ab933301d0f..bba8ee9ee8a7 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -3,14 +3,14 @@
 .sidebar-filter-container {
   background: linear-gradient(
     to bottom,
-    var(--background-primary) 0% calc(100% - 2rem),
+    var(--background-primary) 0% calc(100% - 2.5rem),
     rgba(0, 0, 0, 0) 100%
   );
   display: flex;
   flex-direction: column;
   font-size: var(--type-smaller-font-size);
   margin-top: -3rem;
-  padding-bottom: 1.5rem;
+  padding-bottom: 3rem;
   padding-top: 0.5rem;
   width: 100%;
 

From f6a37e9382c61a24a5a5f746f79859c8c55e5a34 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:22:52 +0200
Subject: [PATCH 052/122] chore(thumbs): highlight confirmation for 5 seconds,
 then transition for 1 second

---
 client/src/ui/atoms/thumbs/index.scss | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index 27532fc8ded4..021529f61710 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -3,6 +3,24 @@
   display: flex;
   flex-direction: row;
   gap: 0.1rem;
+
+  .confirmation {
+    animation-name: colorHighlight;
+    animation-delay: 5s;
+    animation-duration: 1s;
+    animation-fill-mode: forwards;
+    color: var(--category-color);
+
+    @keyframes colorHighlight {
+      0% {
+        color: var(--category-color);
+      }
+
+      100% {
+        color: var(--text-primary);
+      }
+    }
+  }
 }
 
 .thumbs {

From 5fc145ada581d3ef75a619ea2c2b7a314dee0cba Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:24:05 +0200
Subject: [PATCH 053/122] chore(thumbs): add heart emoji

---
 client/src/ui/atoms/thumbs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index f0486381e3ab..c5f5fc5cb721 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -8,7 +8,7 @@ import "./index.scss";
 export function GleanThumbs({
   feature,
   question = "Is this feature useful?",
-  confirmation = "Thank you for your feedback!",
+  confirmation = "Thank you for your feedback! ❤️",
 }: {
   feature: string;
   question?: string;

From 0623c6e1d4f8caba029353e16b979c8279561bd6 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:27:29 +0200
Subject: [PATCH 054/122] feat(sidebar-filter): collapse if no focus/value

Also reduce the placeholder to "Filter".
---
 client/src/document/organisms/sidebar/filter.scss | 10 ++++++++--
 client/src/document/organisms/sidebar/filter.tsx  |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index bba8ee9ee8a7..5d8dbb221799 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -39,8 +39,6 @@
     color: var(--text-primary);
     height: var(--form-elem-height);
     padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    width: 100%;
 
     &:focus {
       border-color: var(--category-color);
@@ -48,7 +46,15 @@
       outline: 0 none;
     }
 
+    &[value=""] {
+      width: 5rem;
+    }
+
+    &:focus,
     &:not([value=""]) {
+      padding-right: 1.5rem;
+      width: 100%;
+
       ~ .button.clear-sidebar-filter-button {
         display: block;
       }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 5fa89f0d3f5e..828267a1a327 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -50,7 +50,7 @@ export function SidebarFilter() {
           id="sidebar-filter-input"
           className="sidebar-filter-input-field"
           type="text"
-          placeholder="Filter sidebar"
+          placeholder="Filter"
           value={query}
           onChange={(event) => setQuery(event.target.value)}
         />

From 27d884a8217158316c9437897e1e5494282cfda9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 18:31:07 +0200
Subject: [PATCH 055/122] chore(sidebar-filter): show footer only with focus

---
 client/src/document/organisms/sidebar/filter.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 5d8dbb221799..be3b4430beb6 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -96,6 +96,14 @@
       color: var(--category-color);
     }
   }
+
+  &:not(:focus-within) {
+    padding-bottom: 1rem;
+
+    .sidebar-filter-footer {
+      visibility: hidden;
+    }
+  }
 }
 
 .sidebar {

From bcc4a0df70f30c4cffb80c86e235b816d542bf68 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 19:31:15 +0200
Subject: [PATCH 056/122] fix(sidebar): show footer upon user interaction

---
 .../document/organisms/sidebar/filter.scss    |  8 ------
 .../src/document/organisms/sidebar/filter.tsx | 26 +++++++++++--------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index be3b4430beb6..5d8dbb221799 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -96,14 +96,6 @@
       color: var(--category-color);
     }
   }
-
-  &:not(:focus-within) {
-    padding-bottom: 1rem;
-
-    .sidebar-filter-footer {
-      visibility: hidden;
-    }
-  }
 }
 
 .sidebar {
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 828267a1a327..5fbe02640f62 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -9,6 +9,7 @@ export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
+  const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -52,6 +53,7 @@ export function SidebarFilter() {
           type="text"
           placeholder="Filter"
           value={query}
+          onFocus={() => setUserInteraction(true)}
           onChange={(event) => setQuery(event.target.value)}
         />
         <Button
@@ -63,18 +65,20 @@ export function SidebarFilter() {
           <span className="visually-hidden">Clear filter input</span>
         </Button>
       </div>
-      <div className="sidebar-filter-footer">
-        <div className="sidebar-filter-thumbs">
-          <GleanThumbs feature="sidebar-filter" />
-        </div>
-        {matchCount !== undefined && (
-          <div className="sidebar-filter-count">
-            {matchCount === 0
-              ? "No items found."
-              : `${matchCount} ${matchCount === 1 ? "item" : "items"} found.`}
+      {hasUserInteraction && (
+        <div className="sidebar-filter-footer">
+          <div className="sidebar-filter-thumbs">
+            <GleanThumbs feature="sidebar-filter" />
           </div>
-        )}
-      </div>
+          {matchCount !== undefined && (
+            <div className="sidebar-filter-count">
+              {matchCount === 0
+                ? "No items found."
+                : `${matchCount} ${matchCount === 1 ? "item" : "items"} found.`}
+            </div>
+          )}
+        </div>
+      )}
     </section>
   );
 }

From a98d55e47413ccd522fbb7efa9a99afd44d5152e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 22:27:05 +0200
Subject: [PATCH 057/122] feat(sidebar-filter): measure when users focus the
 filter

---
 client/src/document/organisms/sidebar/filter.tsx | 9 +++++++++
 client/src/telemetry/constants.ts                | 1 +
 2 files changed, 10 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 5fbe02640f62..e28c5105ea81 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -4,12 +4,15 @@ import { Button } from "../../../ui/atoms/button";
 import { GleanThumbs } from "../../../ui/atoms/thumbs";
 
 import "./filter.scss";
+import { useGleanClick } from "../../../telemetry/glean-context";
+import { SIDEBAR_FILTER_FOCUS } from "../../../telemetry/constants";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
+  const gleanClick = useGleanClick();
 
   useEffect(() => {
     const quicklinks = document.getElementById("sidebar-quicklinks");
@@ -36,6 +39,12 @@ export function SidebarFilter() {
     }
   }, [query, scrollTop]);
 
+  useEffect(() => {
+    if (hasUserInteraction) {
+      gleanClick(SIDEBAR_FILTER_FOCUS);
+    }
+  }, [gleanClick, hasUserInteraction]);
+
   return (
     <section className="sidebar-filter-container">
       <div className="sidebar-filter">
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 13e9c52582fe..a6f28ca74e29 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -26,6 +26,7 @@ export const NEW_COLLECTION_MODAL_UPGRADE_LINK =
 export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
 export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
+export const SIDEBAR_FILTER_FOCUS = "sidebar_filter_focus";
 export const TOP_NAV_ALREADY_SUBSCRIBER = "top_nav_already_subscriber";
 export const TOP_NAV_GET_MDN_PLUS = "top_nav_get_mdn_plus";
 export const TOGGLE_PLUS_OFFLINE_DISABLED = "toggle_plus_offline_disabled";

From cb7425f8df238d6a129855cb6e5d008658f75afa Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 22:47:01 +0200
Subject: [PATCH 058/122] feat(sidebar-filter): show count inside input field

---
 .../src/document/organisms/sidebar/filter.scss  | 17 ++++++++++++-----
 .../src/document/organisms/sidebar/filter.tsx   | 14 +++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 5d8dbb221799..596820419666 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -52,7 +52,7 @@
 
     &:focus,
     &:not([value=""]) {
-      padding-right: 1.5rem;
+      padding-right: 7rem;
       width: 100%;
 
       ~ .button.clear-sidebar-filter-button {
@@ -60,6 +60,17 @@
       }
     }
 
+    ~ .sidebar-filter-count {
+      background: var(--mark-color);
+      border-radius: 1rem;
+      display: block;
+      font-size: var(--type-tiny-font-size);
+      padding: 0 0.25rem;
+      position: absolute;
+      right: 2rem;
+      top: -2.1rem;
+    }
+
     ~ .button.clear-sidebar-filter-button {
       --button-color: var(--icon-secondary);
       --button-height: 1.5rem;
@@ -91,10 +102,6 @@
     .glean-thumbs {
       height: 1.5rem;
     }
-
-    .sidebar-filter-count {
-      color: var(--category-color);
-    }
   }
 }
 
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index e28c5105ea81..80875c8bf96d 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -65,6 +65,13 @@ export function SidebarFilter() {
           onFocus={() => setUserInteraction(true)}
           onChange={(event) => setQuery(event.target.value)}
         />
+        {matchCount !== undefined && (
+          <span className="sidebar-filter-count">
+            {matchCount === 0
+              ? "No matches"
+              : `${matchCount} ${matchCount === 1 ? "match" : "matches"}`}
+          </span>
+        )}
         <Button
           type="action"
           icon="cancel"
@@ -79,13 +86,6 @@ export function SidebarFilter() {
           <div className="sidebar-filter-thumbs">
             <GleanThumbs feature="sidebar-filter" />
           </div>
-          {matchCount !== undefined && (
-            <div className="sidebar-filter-count">
-              {matchCount === 0
-                ? "No items found."
-                : `${matchCount} ${matchCount === 1 ? "item" : "items"} found.`}
-            </div>
-          )}
         </div>
       )}
     </section>

From 82444ba1a3584d3408265cd54267ed508d4ad17e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 22:54:55 +0200
Subject: [PATCH 059/122] chore(thumbs): improve animation

---
 client/src/ui/atoms/thumbs/index.scss | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index 021529f61710..0ed636d364f2 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -5,19 +5,27 @@
   gap: 0.1rem;
 
   .confirmation {
-    animation-name: colorHighlight;
-    animation-delay: 5s;
-    animation-duration: 1s;
+    animation-duration: 2.5s;
     animation-fill-mode: forwards;
+    animation-name: colorHighlight;
     color: var(--category-color);
 
     @keyframes colorHighlight {
       0% {
+        opacity: 0;
+      }
+
+      25% {
+        color: var(--category-color);
+        opacity: 1;
+      }
+
+      75% {
         color: var(--category-color);
       }
 
       100% {
-        color: var(--text-primary);
+        color: var(--text-inactive);
       }
     }
   }

From 1ad51b088fbba14d4a5310c39ab2f09783c75d07 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 22:58:38 +0200
Subject: [PATCH 060/122] fix(thumbs): make up/downLabel props

---
 client/src/ui/atoms/thumbs/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index c5f5fc5cb721..8225c69e7ff9 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -9,10 +9,14 @@ export function GleanThumbs({
   feature,
   question = "Is this feature useful?",
   confirmation = "Thank you for your feedback! ❤️",
+  upLabel = "This feature is useful.",
+  downLabel = "This feature is not useful.",
 }: {
   feature: string;
   question?: string;
   confirmation?: string;
+  upLabel?: string;
+  downLabel?: string;
 }) {
   const [submitted, setSubmitted] = useState(false);
   const gleanClick = useGleanClick();
@@ -28,8 +32,8 @@ export function GleanThumbs({
         <>
           <span className="question">{question}</span>
           <Thumbs
-            upLabel="This feature is useful."
-            downLabel="This feature is not useful."
+            upLabel={upLabel}
+            downLabel={downLabel}
             onThumbsUp={() => handleThumbs("up")}
             onThumbsDown={() => handleThumbs("down")}
           />

From 8306118622014e9b4de30d0a67af20b57f3737a6 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:11:46 +0200
Subject: [PATCH 061/122] fix(sidebar-filter): redistribute responsibilities
 between .sidebar-actions and .sidebar-filter

---
 client/src/document/organisms/sidebar/filter.scss | 12 +++++-------
 client/src/document/organisms/sidebar/index.scss  |  5 ++++-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 596820419666..214c35e7d45b 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -3,15 +3,14 @@
 .sidebar-filter-container {
   background: linear-gradient(
     to bottom,
-    var(--background-primary) 0% calc(100% - 2.5rem),
-    rgba(0, 0, 0, 0) 100%
+    var(--background-primary) 0% calc(100% - 1.5rem),
+    rgb(0, 0, 0, 0) 100%
   );
   display: flex;
   flex-direction: column;
   font-size: var(--type-smaller-font-size);
-  margin-top: -3rem;
-  padding-bottom: 3rem;
-  padding-top: 0.5rem;
+  padding-bottom: 1.5rem; /* Height + Space + 3rem for background */
+  padding-top: 0.5rem; /* Space to breadrumbs. */
   width: 100%;
 
   @media screen and (max-width: $screen-md) {
@@ -20,8 +19,6 @@
 
   .sidebar-filter {
     display: flex;
-    margin-bottom: 0.5rem;
-    width: 100%;
   }
 
   .sidebar-filter-label {
@@ -98,6 +95,7 @@
     flex-direction: column;
     font-size: var(--type-tiny-font-size);
     margin-left: 0.7rem;
+    margin-top: 0.5rem;
 
     .glean-thumbs {
       height: 1.5rem;
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 2a4ce64f7641..74924052d30e 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -78,8 +78,11 @@
   }
 
   .sidebar-actions {
+    height: 0;
+    margin-top: -4rem;
+    padding-bottom: 5.5rem;
     position: sticky;
-    top: 0;
+    top: -3rem;
   }
 
   /* This is for sidebars where there is no sub-heading

From bc611f6b0babbb2ba1f658049cb5957c3b4764fe Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:23:05 +0200
Subject: [PATCH 062/122] chore(sidebar-filter): keep input open + thumbs
 visible until cleared

Also right-aligns the feedback.
---
 client/src/document/organisms/sidebar/filter.scss | 7 ++++---
 client/src/document/organisms/sidebar/filter.tsx  | 9 +++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 214c35e7d45b..7d4535fee38c 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -48,7 +48,7 @@
     }
 
     &:focus,
-    &:not([value=""]) {
+    &.has-user-interaction {
       padding-right: 7rem;
       width: 100%;
 
@@ -91,13 +91,14 @@
   }
 
   .sidebar-filter-footer {
+    align-items: end;
     display: flex;
     flex-direction: column;
-    font-size: var(--type-tiny-font-size);
-    margin-left: 0.7rem;
+    margin-right: 0.5rem;
     margin-top: 0.5rem;
 
     .glean-thumbs {
+      font-size: var(--type-tiny-font-size);
       height: 1.5rem;
     }
   }
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 80875c8bf96d..893435305bef 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -58,7 +58,9 @@ export function SidebarFilter() {
         </label>
         <input
           id="sidebar-filter-input"
-          className="sidebar-filter-input-field"
+          className={`sidebar-filter-input-field ${
+            hasUserInteraction && "has-user-interaction"
+          }`}
           type="text"
           placeholder="Filter"
           value={query}
@@ -76,7 +78,10 @@ export function SidebarFilter() {
           type="action"
           icon="cancel"
           extraClasses="clear-sidebar-filter-button"
-          onClickHandler={() => setQuery("")}
+          onClickHandler={() => {
+            setQuery("");
+            setUserInteraction(false);
+          }}
         >
           <span className="visually-hidden">Clear filter input</span>
         </Button>

From 964d75e60d03c7433be11d445dac9b7edb7b666c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:38:29 +0200
Subject: [PATCH 063/122] fix(sidebar-filter): optimize gradient/padding to
 keep sidebar begin at same position

1. When the filter is not open, the first sidebar item should not be faded.
2. When the filter is open, the first sidebar item should still be mostly visible.
---
 .../src/document/organisms/sidebar/filter.scss  | 17 ++++++++++-------
 .../src/document/organisms/sidebar/index.scss   |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 7d4535fee38c..11f79869d71f 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -3,14 +3,15 @@
 .sidebar-filter-container {
   background: linear-gradient(
     to bottom,
-    var(--background-primary) 0% calc(100% - 1.5rem),
+    var(--background-primary) 0% 2.5rem,
     rgb(0, 0, 0, 0) 100%
   );
   display: flex;
   flex-direction: column;
   font-size: var(--type-smaller-font-size);
-  padding-bottom: 1.5rem; /* Height + Space + 3rem for background */
-  padding-top: 0.5rem; /* Space to breadrumbs. */
+  min-height: 3.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
   width: 100%;
 
   @media screen and (max-width: $screen-md) {
@@ -91,15 +92,17 @@
   }
 
   .sidebar-filter-footer {
-    align-items: end;
     display: flex;
-    flex-direction: column;
-    margin-right: 0.5rem;
-    margin-top: 0.5rem;
+    justify-content: end;
 
     .glean-thumbs {
+      background: var(--background-primary);
+      border-radius: 1rem;
       font-size: var(--type-tiny-font-size);
       height: 1.5rem;
+      margin-right: 0.25rem;
+      margin-top: 0.5rem;
+      padding: 0 0.25rem;
     }
   }
 }
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 74924052d30e..5b3c4fd3d47b 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -80,7 +80,7 @@
   .sidebar-actions {
     height: 0;
     margin-top: -4rem;
-    padding-bottom: 5.5rem;
+    padding-bottom: 4rem;
     position: sticky;
     top: -3rem;
   }

From 42fff01acd12574fe65bc3bfbb3ea58b9694fde8 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:46:34 +0200
Subject: [PATCH 064/122] fix(sidebar-filter): make it available on mobile

---
 client/src/document/organisms/sidebar/filter.scss | 15 ++++++++++-----
 client/src/document/organisms/sidebar/index.scss  |  8 ++++++++
 client/src/document/organisms/sidebar/index.tsx   |  6 +++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 11f79869d71f..08689dda0876 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -14,10 +14,6 @@
   padding-top: 0.5rem;
   width: 100%;
 
-  @media screen and (max-width: $screen-md) {
-    display: none;
-  }
-
   .sidebar-filter {
     display: flex;
   }
@@ -66,7 +62,12 @@
       padding: 0 0.25rem;
       position: absolute;
       right: 2rem;
-      top: -2.1rem;
+      top: 0.9rem;
+
+      @media screen and (max-width: $screen-md) {
+        right: 3rem;
+        top: 1.9rem;
+      }
     }
 
     ~ .button.clear-sidebar-filter-button {
@@ -82,6 +83,10 @@
       &:hover {
         background: transparent;
       }
+
+      @media screen and (max-width: $screen-md) {
+        left: calc(100% - 3rem);
+      }
     }
   }
 
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 5b3c4fd3d47b..ac0cc5b63f00 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -83,6 +83,14 @@
     padding-bottom: 4rem;
     position: sticky;
     top: -3rem;
+
+    @media screen and (max-width: $screen-md) {
+      height: unset;
+      margin-top: unset;
+      padding-bottom: unset;
+      position: unset;
+      top: unset;
+    }
   }
 
   /* This is for sidebars where there is no sub-heading
diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
index 9d58b6e9a920..ca7889bacfef 100644
--- a/client/src/document/organisms/sidebar/index.tsx
+++ b/client/src/document/organisms/sidebar/index.tsx
@@ -64,10 +64,10 @@ export function SidebarContainer({
           onClickHandler={() => setIsSidebarOpen(!isSidebarOpen)}
           aria-label="Collapse sidebar"
         />
-        <header className="sidebar-actions">
-          {doc.sidebarHTML && <SidebarFilter />}
-        </header>
         <nav aria-label={label} className="sidebar-inner">
+          <header className="sidebar-actions">
+            {doc.sidebarHTML && <SidebarFilter />}
+          </header>
           <div className="sidebar-inner-nav">
             <div className="in-nav-toc">
               {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}

From 92a7238047c2a587c18f64ace5562e9c6761b264 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:50:07 +0200
Subject: [PATCH 065/122] fix(sidebar-filter): align items centrally

---
 client/src/document/organisms/sidebar/filter.scss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 08689dda0876..50cd193b02fd 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -15,13 +15,13 @@
   width: 100%;
 
   .sidebar-filter {
+    align-items: center;
     display: flex;
   }
 
   .sidebar-filter-label {
     left: 0.5rem; /* Moves icon inside field. */
     position: relative;
-    top: 0.3rem; /* Aligns icon with input. */
     width: 0; /* Avoid moving field right. */
   }
 
@@ -62,11 +62,9 @@
       padding: 0 0.25rem;
       position: absolute;
       right: 2rem;
-      top: 0.9rem;
 
       @media screen and (max-width: $screen-md) {
         right: 3rem;
-        top: 1.9rem;
       }
     }
 
@@ -76,7 +74,6 @@
       --button-padding: 0;
       display: none;
       left: calc(100% - 2rem);
-      margin-top: 0.25rem;
       position: absolute;
       width: 1.5rem;
 

From 4902f19aef1a103cef8391e50b30addb22289ec2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Fri, 2 Jun 2023 23:54:38 +0200
Subject: [PATCH 066/122] fix(sidebar): remove padding-top

---
 client/src/document/organisms/sidebar/index.scss  | 3 +--
 client/src/ui/molecules/grids/_document-page.scss | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index ac0cc5b63f00..e75095a00908 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -79,10 +79,9 @@
 
   .sidebar-actions {
     height: 0;
-    margin-top: -4rem;
     padding-bottom: 4rem;
     position: sticky;
-    top: -3rem;
+    top: 0;
 
     @media screen and (max-width: $screen-md) {
       height: unset;
diff --git a/client/src/ui/molecules/grids/_document-page.scss b/client/src/ui/molecules/grids/_document-page.scss
index 4c63f4cf3aee..24ab1d718587 100644
--- a/client/src/ui/molecules/grids/_document-page.scss
+++ b/client/src/ui/molecules/grids/_document-page.scss
@@ -45,6 +45,7 @@
     .sidebar {
       align-self: start;
       grid-area: sidebar;
+      padding-top: unset;
     }
 
     .main-content {

From f426b1ccbdb01ac6c642b1a78540ebf30555144c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:00:31 +0200
Subject: [PATCH 067/122] fixup! fix(sidebar-filter): optimize gradient/padding
 to keep sidebar begin at same position

---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 50cd193b02fd..fb1ac4e9e2b6 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -95,7 +95,7 @@
 
   .sidebar-filter-footer {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
 
     .glean-thumbs {
       background: var(--background-primary);

From af87710aa7ef27a96aac3ff07b52dedf6f870934 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:01:49 +0200
Subject: [PATCH 068/122] fix(sidebar-filter): unset color for mark elements

---
 client/src/document/organisms/sidebar/filter.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index fb1ac4e9e2b6..55b83cb280f2 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -112,5 +112,6 @@
 .sidebar {
   mark {
     background-color: var(--mark-color);
+    color: unset;
   }
 }

From 623bdabeda8dd546167b45c52e68c6323aeade78 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:41:54 +0200
Subject: [PATCH 069/122] chore(sidebar-filter): do not replace unrelated text
 nodes

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index ff98717e5a72..5df9f5172dbd 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -139,15 +139,12 @@ export class SidebarFilterer {
         const match = rest.splitText(rangeBegin - cursor);
         const newRest = match.splitText(rangeEnd - rangeBegin);
 
-        // Convert text nodes to HTML elements.
-        this.replaceChildNode(rest, "span");
+        // Convert text node to HTML element.
         this.replaceChildNode(match, "mark");
 
         rest = newRest as Element & Text;
         cursor = rangeEnd;
       }
-
-      this.replaceChildNode(rest, "span");
     });
   }
 

From ab38a7087d341a0e40a20db106175281e19bfba7 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:44:45 +0200
Subject: [PATCH 070/122] refactor(sidebar-filter): resolve unnecessary return

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 5df9f5172dbd..baae02a1ccaa 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -189,12 +189,11 @@ export class SidebarFilterer {
     return candidates
       .slice()
       .reverse()
-      .find((candidate) => {
-        return (
+      .find(
+        (candidate) =>
           candidate.compareDocumentPosition(target) &
           Node.DOCUMENT_POSITION_FOLLOWING
-        );
-      });
+      );
   }
 
   private expandParents(target: HTMLElement) {

From 3688a7cca4fcfebde09ba0fa8d26e4b7d1dfa2d5 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:46:20 +0200
Subject: [PATCH 071/122] refactor(sidebar-filter): replace while with for..of

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index baae02a1ccaa..6bba5c5c1d91 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -152,8 +152,7 @@ export class SidebarFilterer {
     const parents = [parentNode];
     const nodes: (Node & Text)[] = [];
 
-    while (parents.length) {
-      const parent = parents.shift() as Node;
+    for (const parent of parents) {
       for (const childNode of parent.childNodes) {
         if (childNode.nodeType === Node.TEXT_NODE) {
           nodes.push(childNode as Node & Text);

From 719644bbb3029088412b6b2ff09c0c944e740e95 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Sat, 3 Jun 2023 00:47:25 +0200
Subject: [PATCH 072/122] refactor(sidebar-filter): move function behind
 constructor

---
 .../organisms/sidebar/SidebarFilterer.ts       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 6bba5c5c1d91..f93c5d24a541 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -1,15 +1,6 @@
 import { splitQuery } from "../../../utils";
 
 export class SidebarFilterer {
-  applyFilter(query: string) {
-    if (query) {
-      return this.showOnlyMatchingItems(query);
-    } else {
-      this.showAllItems();
-      return undefined;
-    }
-  }
-
   root: HTMLElement;
   headings: HTMLElement[];
   parents: HTMLDetailsElement[];
@@ -28,6 +19,15 @@ export class SidebarFilterer {
     );
   }
 
+  applyFilter(query: string) {
+    if (query) {
+      return this.showOnlyMatchingItems(query);
+    } else {
+      this.showAllItems();
+      return undefined;
+    }
+  }
+
   showAllItems() {
     this.links.forEach((link) => this.resetLink(link));
     this.headings.forEach((heading) => this.resetHeading(heading));

From c76f4c769f564205d180716cfe4f2c65a4d88198 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Sat, 3 Jun 2023 00:48:44 +0200
Subject: [PATCH 073/122] refactor(sidebar-filter): use querySelector instead
 of getElementById

Co-authored-by: Leo McArdle <lmcardle@mozilla.com>
---
 client/src/telemetry/sidebar-click.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/telemetry/sidebar-click.ts b/client/src/telemetry/sidebar-click.ts
index 0f64565275f8..74c7b6ebe8c2 100644
--- a/client/src/telemetry/sidebar-click.ts
+++ b/client/src/telemetry/sidebar-click.ts
@@ -45,8 +45,8 @@ function getClickPayload(event: MouseEvent) {
 }
 
 export function getSidebarFilterValue() {
-  const input = document.getElementById(
-    "sidebar-filter-input"
-  ) as HTMLInputElement | null;
+  const input = document.querySelector<HTMLInputElement>(
+    "#sidebar-filter-input"
+  );
   return input?.value;
 }

From a71d6aa89e139d65a6a0825c732c7811ec86c022 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 10:16:30 +0200
Subject: [PATCH 074/122] chore(sidebar-filter): hide "In this article" if no
 match

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index f93c5d24a541..e0ba8343c61e 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -9,7 +9,9 @@ export class SidebarFilterer {
   constructor(root: HTMLElement) {
     this.root = root;
     this.headings = Array.from(
-      this.root.querySelectorAll<HTMLElement>("li strong")
+      this.root.querySelectorAll<HTMLElement>(
+        "h2.document-toc-heading, li strong"
+      )
     );
     this.parents = Array.from(
       this.root.querySelectorAll<HTMLDetailsElement>("details")

From e7b780f4aece654e4da105a60adec8a9678d6980 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 14:54:23 +0200
Subject: [PATCH 075/122] refactor(sidebar-fiilter): rename collapse{Detail =>
 Parent}

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index e0ba8343c61e..53f15e14c126 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -70,7 +70,7 @@ export class SidebarFilterer {
 
   showOnlyMatchingItems(query: string) {
     this.headings.forEach(this.hideHeading);
-    this.parents.forEach(this.collapseDetail);
+    this.parents.forEach(this.collapseParent);
 
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);
@@ -99,7 +99,7 @@ export class SidebarFilterer {
     container.style.display = "none";
   }
 
-  private collapseDetail(el: HTMLDetailsElement) {
+  private collapseParent(el: HTMLDetailsElement) {
     el.style.display = "none";
     el.dataset.open = el.dataset.open ?? String(el.open);
     el.open = false;

From 4a211213c3c930b3b28b896c57cc37633502c41e Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 15:02:21 +0200
Subject: [PATCH 076/122] refator(sidebar-filter): rename dataset.{open =>
 wasOpen}

Co-authored-by: Leo McArdle <lmcardle@mozilla.com>
---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 53f15e14c126..bc719b079b3b 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -49,9 +49,9 @@ export class SidebarFilterer {
 
   private resetParent(detail: HTMLDetailsElement) {
     detail.style.display = "inherit";
-    if (detail.dataset.open) {
-      detail.open = JSON.parse(detail.dataset.open);
-      delete detail.dataset.open;
+    if (detail.dataset.wasOpen) {
+      detail.open = JSON.parse(detail.dataset.wasOpen);
+      delete detail.dataset.wasOpen;
     }
   }
 
@@ -101,7 +101,7 @@ export class SidebarFilterer {
 
   private collapseParent(el: HTMLDetailsElement) {
     el.style.display = "none";
-    el.dataset.open = el.dataset.open ?? String(el.open);
+    el.dataset.wasOpen = el.dataset.wasOpen ?? String(el.open);
     el.open = false;
   }
 

From da4979da3f30979acdaa3db93ddfd5fe37dded43 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 15:03:46 +0200
Subject: [PATCH 077/122] chore: remove unnecessary jsdoc

---
 client/src/utils.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/utils.ts b/client/src/utils.ts
index fe3429f141ba..6e4e6ce9ab88 100644
--- a/client/src/utils.ts
+++ b/client/src/utils.ts
@@ -113,9 +113,6 @@ export function range(start: number, stop: number) {
 
 /**
  * Used by quicksearch and sidebar filters.
- *
- * @param term
- * @returns
  */
 export function splitQuery(term: string): string[] {
   return term

From 4fec9d95cc75c8b0e7bd714dc28477ad3bdcb484 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 15:14:39 +0200
Subject: [PATCH 078/122] fix(sidebar-filter): exclude + hide TOC

---
 .../organisms/sidebar/SidebarFilterer.ts        | 17 ++++++++++++++---
 .../src/document/organisms/sidebar/filter.tsx   |  8 +++++++-
 client/src/document/organisms/sidebar/index.tsx |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index bc719b079b3b..1d7d8bd956e8 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -5,13 +5,12 @@ export class SidebarFilterer {
   headings: HTMLElement[];
   parents: HTMLDetailsElement[];
   links: HTMLAnchorElement[];
+  toc: HTMLElement | null;
 
   constructor(root: HTMLElement) {
     this.root = root;
     this.headings = Array.from(
-      this.root.querySelectorAll<HTMLElement>(
-        "h2.document-toc-heading, li strong"
-      )
+      this.root.querySelectorAll<HTMLElement>("li strong")
     );
     this.parents = Array.from(
       this.root.querySelectorAll<HTMLDetailsElement>("details")
@@ -19,17 +18,29 @@ export class SidebarFilterer {
     this.links = Array.from(
       this.root.querySelectorAll<HTMLAnchorElement>("a[href]")
     );
+    this.toc =
+      this.root
+        .closest<HTMLElement>(".sidebar")
+        ?.querySelector(".in-nav-toc") ?? null;
   }
 
   applyFilter(query: string) {
     if (query) {
+      this.toggleTOC(false);
       return this.showOnlyMatchingItems(query);
     } else {
+      this.toggleTOC(true);
       this.showAllItems();
       return undefined;
     }
   }
 
+  toggleTOC(show: boolean) {
+    if (this.toc) {
+      this.toc.style.display = show ? "inherit" : "none";
+    }
+  }
+
   showAllItems() {
     this.links.forEach((link) => this.resetLink(link));
     this.headings.forEach((heading) => this.resetHeading(heading));
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 893435305bef..e392e37e9956 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -21,6 +21,12 @@ export function SidebarFilter() {
       return;
     }
 
+    const root = quicklinks.querySelector<HTMLElement>(".sidebar-body");
+
+    if (!root) {
+      return;
+    }
+
     // Save scroll position.
     if (query && typeof scrollTop === "undefined" && quicklinks.scrollTop > 0) {
       setScrollTop(quicklinks.scrollTop);
@@ -28,7 +34,7 @@ export function SidebarFilter() {
     }
 
     // Filter sidebar.
-    const filterer = new SidebarFilterer(quicklinks);
+    const filterer = new SidebarFilterer(root);
     const items = filterer.applyFilter(query);
     setMatchCount(items);
 
diff --git a/client/src/document/organisms/sidebar/index.tsx b/client/src/document/organisms/sidebar/index.tsx
index ca7889bacfef..c908134b2ea1 100644
--- a/client/src/document/organisms/sidebar/index.tsx
+++ b/client/src/document/organisms/sidebar/index.tsx
@@ -88,6 +88,7 @@ export function RenderSideBar({ doc }) {
         {doc.sidebarHTML && (
           <>
             <div
+              className="sidebar-body"
               dangerouslySetInnerHTML={{
                 __html: `${doc.sidebarHTML}`,
               }}

From ad17162b702d58d93c688e8891d003a51e7f7c1b Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 15:16:37 +0200
Subject: [PATCH 079/122] refactor(sidebar-filter): inline SidebarFilterer.root

---
 .../document/organisms/sidebar/SidebarFilterer.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 1d7d8bd956e8..bfa4eac41e6e 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -1,27 +1,22 @@
 import { splitQuery } from "../../../utils";
 
 export class SidebarFilterer {
-  root: HTMLElement;
   headings: HTMLElement[];
   parents: HTMLDetailsElement[];
   links: HTMLAnchorElement[];
   toc: HTMLElement | null;
 
   constructor(root: HTMLElement) {
-    this.root = root;
-    this.headings = Array.from(
-      this.root.querySelectorAll<HTMLElement>("li strong")
-    );
+    this.headings = Array.from(root.querySelectorAll<HTMLElement>("li strong"));
     this.parents = Array.from(
-      this.root.querySelectorAll<HTMLDetailsElement>("details")
+      root.querySelectorAll<HTMLDetailsElement>("details")
     );
     this.links = Array.from(
-      this.root.querySelectorAll<HTMLAnchorElement>("a[href]")
+      root.querySelectorAll<HTMLAnchorElement>("a[href]")
     );
     this.toc =
-      this.root
-        .closest<HTMLElement>(".sidebar")
-        ?.querySelector(".in-nav-toc") ?? null;
+      root.closest<HTMLElement>(".sidebar")?.querySelector(".in-nav-toc") ??
+      null;
   }
 
   applyFilter(query: string) {

From 7bb2c13e2b6dfda23a6bafdfb08bb42cf0c13220 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 15:43:05 +0200
Subject: [PATCH 080/122] feat(thumbs): hide if previously submitted

---
 client/src/ui/atoms/thumbs/index.tsx | 76 ++++++++++++++++++++++------
 1 file changed, 61 insertions(+), 15 deletions(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 8225c69e7ff9..96ac1815910a 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -1,10 +1,46 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { THUMBS } from "../../../telemetry/constants";
 import { useGleanClick } from "../../../telemetry/glean-context";
 import { Button } from "../button";
 
 import "./index.scss";
 
+const LOCAL_STORAGE_KEY = "thumbs";
+
+function getPreviouslySubmitted() {
+  try {
+    return JSON.parse(window?.localStorage?.getItem(LOCAL_STORAGE_KEY) ?? "{}");
+  } catch (e) {
+    return {};
+    console.warn("Unable to read thumbs state to localStorage", e);
+  }
+}
+
+function isPreviouslySubmitted(feature: string): boolean {
+  try {
+    return feature in getPreviouslySubmitted();
+  } catch (e) {
+    return false;
+  }
+}
+
+function markPreviouslySubmitted(feature: string, value: boolean) {
+  try {
+    window?.localStorage?.setItem(
+      LOCAL_STORAGE_KEY,
+      JSON.stringify({
+        ...getPreviouslySubmitted(),
+        [feature]: {
+          submitted_at: Date.now(),
+          value,
+        },
+      })
+    );
+  } catch (e) {
+    console.warn("Unable to write thumbs state to localStorage", e);
+  }
+}
+
 export function GleanThumbs({
   feature,
   question = "Is this feature useful?",
@@ -18,30 +54,40 @@ export function GleanThumbs({
   upLabel?: string;
   downLabel?: string;
 }) {
+  const [previouslySubmitted, setPreviouslySubmitted] = useState(true);
   const [submitted, setSubmitted] = useState(false);
   const gleanClick = useGleanClick();
 
+  useEffect(() => {
+    setPreviouslySubmitted(isPreviouslySubmitted(feature));
+  }, [feature, setPreviouslySubmitted]);
+
   const handleThumbs = (value: "up" | "down") => {
     gleanClick(`${THUMBS}: ${feature} -> ${value === "up" ? 1 : 0}`);
     setSubmitted(true);
+    markPreviouslySubmitted(feature, value === "up");
   };
 
   return (
-    <section className="glean-thumbs">
-      {!submitted ? (
-        <>
-          <span className="question">{question}</span>
-          <Thumbs
-            upLabel={upLabel}
-            downLabel={downLabel}
-            onThumbsUp={() => handleThumbs("up")}
-            onThumbsDown={() => handleThumbs("down")}
-          />
-        </>
-      ) : (
-        <span className="confirmation">{confirmation}</span>
+    <>
+      {!previouslySubmitted && (
+        <section className="glean-thumbs">
+          {!submitted ? (
+            <>
+              <span className="question">{question}</span>
+              <Thumbs
+                upLabel={upLabel}
+                downLabel={downLabel}
+                onThumbsUp={() => handleThumbs("up")}
+                onThumbsDown={() => handleThumbs("down")}
+              />
+            </>
+          ) : (
+            <span className="confirmation">{confirmation}</span>
+          )}
+        </section>
       )}
-    </section>
+    </>
   );
 }
 

From 01aea1d64af3719966ac566847b318ebb1731bf9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 16:05:52 +0200
Subject: [PATCH 081/122] fix(sidebar-filter): remove weird icon margin

---
 client/src/document/organisms/sidebar/filter.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 55b83cb280f2..4a95ba3a3ecf 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -89,6 +89,7 @@
 
   .icon {
     background-color: var(--icon-secondary);
+    margin-right: unset;
     position: unset;
     z-index: unset;
   }

From dff58a7f21fe5c7471a96b6406d7b4c359609529 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 16:08:38 +0200
Subject: [PATCH 082/122] fix(sidebar-filter): apply clear button style to
 thumbs buttons as well

---
 client/src/document/organisms/sidebar/filter.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 4a95ba3a3ecf..f2ecdc1f694a 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -69,13 +69,9 @@
     }
 
     ~ .button.clear-sidebar-filter-button {
-      --button-color: var(--icon-secondary);
-      --button-height: 1.5rem;
-      --button-padding: 0;
       display: none;
       left: calc(100% - 2rem);
       position: absolute;
-      width: 1.5rem;
 
       &:hover {
         background: transparent;
@@ -87,6 +83,13 @@
     }
   }
 
+  .button {
+    --button-color: var(--icon-secondary);
+    --button-height: 1.5rem;
+    --button-padding: 0;
+    width: 1.5rem;
+  }
+
   .icon {
     background-color: var(--icon-secondary);
     margin-right: unset;

From d212d75acf4ce7b6cd097dc3e751428ea4b04c18 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 16:15:04 +0200
Subject: [PATCH 083/122] fixup! feat(thumbs): hide if previously submitted

---
 client/src/ui/atoms/thumbs/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.tsx b/client/src/ui/atoms/thumbs/index.tsx
index 96ac1815910a..e9a8c50b0f01 100644
--- a/client/src/ui/atoms/thumbs/index.tsx
+++ b/client/src/ui/atoms/thumbs/index.tsx
@@ -11,8 +11,8 @@ function getPreviouslySubmitted() {
   try {
     return JSON.parse(window?.localStorage?.getItem(LOCAL_STORAGE_KEY) ?? "{}");
   } catch (e) {
-    return {};
     console.warn("Unable to read thumbs state to localStorage", e);
+    return {};
   }
 }
 

From 67747990cf9cfb5d9e4125af8fb909e5218bd639 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Mon, 5 Jun 2023 18:02:43 +0200
Subject: [PATCH 084/122] chore(sidebar-filter): align heart with clear button

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index f2ecdc1f694a..fa56d5dd1b92 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -109,6 +109,10 @@
       margin-right: 0.25rem;
       margin-top: 0.5rem;
       padding: 0 0.25rem;
+
+      .confirmation {
+        margin-right: 0.55em; /* Aligns heart with clear button. */
+      }
     }
   }
 }

From 65a2f3b81c22ee7ec7c9b879ded42ca29795b015 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 10:22:42 +0200
Subject: [PATCH 085/122] refactor(sidebar-filter): extract toggleElement()

---
 .../organisms/sidebar/SidebarFilterer.ts      | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index bfa4eac41e6e..536912f4113f 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -32,10 +32,14 @@ export class SidebarFilterer {
 
   toggleTOC(show: boolean) {
     if (this.toc) {
-      this.toc.style.display = show ? "inherit" : "none";
+      this.toggleElement(this.toc, show);
     }
   }
 
+  toggleElement(el: HTMLElement, show: boolean) {
+    el.style.display = show ? "inherit" : "none";
+  }
+
   showAllItems() {
     this.links.forEach((link) => this.resetLink(link));
     this.headings.forEach((heading) => this.resetHeading(heading));
@@ -45,16 +49,16 @@ export class SidebarFilterer {
   private resetLink(link: HTMLAnchorElement) {
     this.resetHighlighting(link);
     const target = link.closest("li") || link;
-    target.style.display = "inherit";
+    this.toggleElement(target, true);
   }
 
   private resetHeading(heading: HTMLElement) {
     const container = heading.closest("li") ?? heading;
-    container.style.display = "inherit";
+    this.toggleElement(container, true);
   }
 
   private resetParent(detail: HTMLDetailsElement) {
-    detail.style.display = "inherit";
+    this.toggleElement(detail, true);
     if (detail.dataset.wasOpen) {
       detail.open = JSON.parse(detail.dataset.wasOpen);
       delete detail.dataset.wasOpen;
@@ -87,7 +91,7 @@ export class SidebarFilterer {
       const isMatch = terms.every((needle) => haystack.includes(needle));
 
       const target = link.closest("li") || link;
-      target.style.display = isMatch ? "inherit" : "none";
+      this.toggleElement(target, isMatch);
 
       if (isMatch) {
         matchCount++;
@@ -102,11 +106,11 @@ export class SidebarFilterer {
 
   private hideHeading(heading: HTMLElement) {
     const container = heading.closest("li") ?? heading;
-    container.style.display = "none";
+    this.toggleElement(container, false);
   }
 
   private collapseParent(el: HTMLDetailsElement) {
-    el.style.display = "none";
+    this.toggleElement(el, false);
     el.dataset.wasOpen = el.dataset.wasOpen ?? String(el.open);
     el.open = false;
   }
@@ -185,7 +189,7 @@ export class SidebarFilterer {
     const heading = this.findFirstElementBefore(target, this.headings);
     const container = heading?.closest("li") ?? heading;
     if (container) {
-      container.style.display = "inherit";
+      this.toggleElement(container, true);
     }
   }
 
@@ -207,7 +211,7 @@ export class SidebarFilterer {
     let parent = target.parentElement?.closest("details");
     while (parent) {
       if (parent instanceof HTMLDetailsElement) {
-        parent.style.display = "inherit";
+        this.toggleElement(parent, true);
         parent.open = true;
       }
       parent = parent.parentElement?.closest("details");

From 119277b3b486e2ed50f63d4d7a5b73e87703a1a1 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 10:23:42 +0200
Subject: [PATCH 086/122] fix(sidebar-filter): show by resetting style.display

"inherit" caused the TOC to always show on the left.
---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 536912f4113f..f4bb3294ff27 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -37,7 +37,7 @@ export class SidebarFilterer {
   }
 
   toggleElement(el: HTMLElement, show: boolean) {
-    el.style.display = show ? "inherit" : "none";
+    el.style.display = show ? "" : "none";
   }
 
   showAllItems() {

From 7ae26aab788a142f4f181b09b77b63f9ef9b9c04 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 11:00:55 +0200
Subject: [PATCH 087/122] fix(sidebar-filter): avoid forEach without this
 context

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index f4bb3294ff27..13222ea5a2e0 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -30,13 +30,13 @@ export class SidebarFilterer {
     }
   }
 
-  toggleTOC(show: boolean) {
+  private toggleTOC(show: boolean) {
     if (this.toc) {
       this.toggleElement(this.toc, show);
     }
   }
 
-  toggleElement(el: HTMLElement, show: boolean) {
+  private toggleElement(el: HTMLElement, show: boolean) {
     el.style.display = show ? "" : "none";
   }
 
@@ -79,8 +79,8 @@ export class SidebarFilterer {
   }
 
   showOnlyMatchingItems(query: string) {
-    this.headings.forEach(this.hideHeading);
-    this.parents.forEach(this.collapseParent);
+    this.headings.forEach((heading) => this.hideHeading(heading));
+    this.parents.forEach((parent) => this.collapseParent(parent));
 
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);

From 0de11bf346021423468c53e03412eb44bf6a85e4 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 12:05:46 +0200
Subject: [PATCH 088/122] fix(thumbs): increase gap between icons

At least 0.5rem between clickable elements.
---
 client/src/ui/atoms/thumbs/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/atoms/thumbs/index.scss b/client/src/ui/atoms/thumbs/index.scss
index 0ed636d364f2..2b54cb149105 100644
--- a/client/src/ui/atoms/thumbs/index.scss
+++ b/client/src/ui/atoms/thumbs/index.scss
@@ -2,7 +2,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 0.1rem;
+  gap: 0.5rem;
 
   .confirmation {
     animation-duration: 2.5s;

From 405cd50ba7e8297382447077ae4c64ded11b3aae Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 12:12:43 +0200
Subject: [PATCH 089/122] fix(sidebar-filter): increase icon size to 1rem/16px

---
 client/src/document/organisms/sidebar/filter.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index fa56d5dd1b92..69a5308deba5 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -32,7 +32,7 @@
     border-radius: 100px;
     color: var(--text-primary);
     height: var(--form-elem-height);
-    padding-left: 1.5rem;
+    padding-left: 1.75rem;
 
     &:focus {
       border-color: var(--category-color);
@@ -92,8 +92,13 @@
 
   .icon {
     background-color: var(--icon-secondary);
+    background-size: 1rem;
+    height: 1rem;
     margin-right: unset;
+    mask-size: 1rem;
     position: unset;
+    position: relative;
+    width: 1rem;
     z-index: unset;
   }
 

From afebb017d1d53587bba4cf7c0c1212f15a391b18 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 12:14:13 +0200
Subject: [PATCH 090/122] fix(sidebar-filter): use border-radius of 1rem

A border-radius of more than 1rem does not change anything.
---
 client/src/document/organisms/sidebar/filter.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 69a5308deba5..36637c9d0500 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -29,7 +29,7 @@
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
     background-color: var(--background-primary);
     border: 1px solid var(--border-primary);
-    border-radius: 100px;
+    border-radius: 1rem;
     color: var(--text-primary);
     height: var(--form-elem-height);
     padding-left: 1.75rem;

From 230bcb5f147856c89fe8f8d0ba1db284d54254e2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 12:20:47 +0200
Subject: [PATCH 091/122] fix(sidebar-filter): align thumbs left + add
 margin-top to content

Makes the "Is this useful?" section span the full width and adds a
0.5rem padding below (just like we already have above.).

The linear-gradient from the filter only starts below and fades
over a distance of 2rem. This means we have to move the content
down by the same amount to ensure the top element is clickable.
---
 client/src/document/organisms/sidebar/filter.scss | 15 ++++++---------
 client/src/document/organisms/sidebar/index.scss  |  4 ++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 36637c9d0500..2dbca95e3fcb 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -3,14 +3,13 @@
 .sidebar-filter-container {
   background: linear-gradient(
     to bottom,
-    var(--background-primary) 0% 2.5rem,
+    var(--background-primary) 0% calc(100% - 2rem),
     rgb(0, 0, 0, 0) 100%
   );
   display: flex;
   flex-direction: column;
   font-size: var(--type-smaller-font-size);
-  min-height: 3.5rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 2rem;
   padding-top: 0.5rem;
   width: 100%;
 
@@ -103,17 +102,15 @@
   }
 
   .sidebar-filter-footer {
-    display: flex;
-    justify-content: flex-end;
+    background: var(--background-primary);
+    border: 1px solid var(--background-primary);
 
     .glean-thumbs {
-      background: var(--background-primary);
-      border-radius: 1rem;
       font-size: var(--type-tiny-font-size);
       height: 1.5rem;
-      margin-right: 0.25rem;
+      margin-bottom: 0.5rem;
+      margin-left: 1.75rem;
       margin-top: 0.5rem;
-      padding: 0 0.25rem;
 
       .confirmation {
         margin-right: 0.55em; /* Aligns heart with clear button. */
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index e75095a00908..0c1701380431 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -83,6 +83,10 @@
     position: sticky;
     top: 0;
 
+    ~ .sidebar-inner-nav {
+      margin-top: 2.5rem;
+    }
+
     @media screen and (max-width: $screen-md) {
       height: unset;
       margin-top: unset;

From add9db5560acc6aafac2c0606d7e2014c056b28d Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 12:24:17 +0200
Subject: [PATCH 092/122] chore(sidebar-filter): increase font-size

---
 client/src/document/organisms/sidebar/filter.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 2dbca95e3fcb..4da605a17e9b 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -8,7 +8,6 @@
   );
   display: flex;
   flex-direction: column;
-  font-size: var(--type-smaller-font-size);
   padding-bottom: 2rem;
   padding-top: 0.5rem;
   width: 100%;

From 63482e36c00c15c7348e009793f49614ae6cd799 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 13:03:13 +0200
Subject: [PATCH 093/122] fix(sidebar-filter): do not resize thumbs button

---
 .../src/document/organisms/sidebar/filter.scss | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 4da605a17e9b..928eca85f7a8 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -8,6 +8,7 @@
   );
   display: flex;
   flex-direction: column;
+  font-size: var(--type-smaller-font-size);
   padding-bottom: 2rem;
   padding-top: 0.5rem;
   width: 100%;
@@ -21,6 +22,13 @@
     left: 0.5rem; /* Moves icon inside field. */
     position: relative;
     width: 0; /* Avoid moving field right. */
+
+    .icon {
+      background-size: 1rem;
+      height: 1rem;
+      mask-size: 1rem;
+      width: 1rem;
+    }
   }
 
   .sidebar-filter-input-field {
@@ -42,6 +50,12 @@
       width: 5rem;
     }
 
+    &:not([value=""]) {
+      ~ .sidear-filter-label .icon {
+        background-color: var(--category-color);
+      }
+    }
+
     &:focus,
     &.has-user-interaction {
       padding-right: 7rem;
@@ -90,13 +104,9 @@
 
   .icon {
     background-color: var(--icon-secondary);
-    background-size: 1rem;
-    height: 1rem;
     margin-right: unset;
-    mask-size: 1rem;
     position: unset;
     position: relative;
-    width: 1rem;
     z-index: unset;
   }
 

From 42b3364b902fb2d694dceb71772b30d102a11c7f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 13:11:51 +0200
Subject: [PATCH 094/122] fix(sidebar-filter): add padding-right to avoid
 touching the scrollbar

---
 client/src/document/organisms/sidebar/filter.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 928eca85f7a8..acd3103a2c23 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -10,8 +10,8 @@
   flex-direction: column;
   font-size: var(--type-smaller-font-size);
   padding-bottom: 2rem;
+  padding-right: 0.5rem;
   padding-top: 0.5rem;
-  width: 100%;
 
   .sidebar-filter {
     align-items: center;
@@ -73,7 +73,7 @@
       font-size: var(--type-tiny-font-size);
       padding: 0 0.25rem;
       position: absolute;
-      right: 2rem;
+      right: 2.5rem;
 
       @media screen and (max-width: $screen-md) {
         right: 3rem;
@@ -82,8 +82,8 @@
 
     ~ .button.clear-sidebar-filter-button {
       display: none;
-      left: calc(100% - 2rem);
       position: absolute;
+      right: 0.75rem;
 
       &:hover {
         background: transparent;

From ceda9b1b0c6cf9029b1f5e14cd76b244ae61d041 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 13:41:30 +0200
Subject: [PATCH 095/122] chore(sidebar-filter): align feedback with filter
 icon

---
 client/src/document/organisms/sidebar/filter.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index acd3103a2c23..3cbb898efe8d 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -16,6 +16,7 @@
   .sidebar-filter {
     align-items: center;
     display: flex;
+    margin-bottom: 0.5rem;
   }
 
   .sidebar-filter-label {
@@ -50,10 +51,8 @@
       width: 5rem;
     }
 
-    &:not([value=""]) {
-      ~ .sidear-filter-label .icon {
-        background-color: var(--category-color);
-      }
+    &:not([value=""]) ~ .sidebar-filter-label .icon {
+      background-color: var(--category-color) !important;
     }
 
     &:focus,
@@ -118,8 +117,7 @@
       font-size: var(--type-tiny-font-size);
       height: 1.5rem;
       margin-bottom: 0.5rem;
-      margin-left: 1.75rem;
-      margin-top: 0.5rem;
+      margin-left: 0.6rem;
 
       .confirmation {
         margin-right: 0.55em; /* Aligns heart with clear button. */

From 03ac5ea57bba9dc8b0d54966982b8f3ce3de3928 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 15:55:33 +0200
Subject: [PATCH 096/122] refactor(sidebar-filter): extract getLinkContainer()

---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 13222ea5a2e0..c28a31cad463 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -48,10 +48,14 @@ export class SidebarFilterer {
 
   private resetLink(link: HTMLAnchorElement) {
     this.resetHighlighting(link);
-    const target = link.closest("li") || link;
+    const target = this.getLinkContainer(link);
     this.toggleElement(target, true);
   }
 
+  private getLinkContainer(link: HTMLAnchorElement) {
+    return link.closest("li") || link;
+  }
+
   private resetHeading(heading: HTMLElement) {
     const container = heading.closest("li") ?? heading;
     this.toggleElement(container, true);
@@ -90,7 +94,7 @@ export class SidebarFilterer {
       const haystack = link.innerText.toLowerCase();
       const isMatch = terms.every((needle) => haystack.includes(needle));
 
-      const target = link.closest("li") || link;
+      const target = this.getLinkContainer(link);
       this.toggleElement(target, isMatch);
 
       if (isMatch) {

From 921c8f8fb2f1bb13f1b4d667649db3548f1b7d45 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 15:55:53 +0200
Subject: [PATCH 097/122] refactor(sidebar-filter): extract getParents()

---
 .../organisms/sidebar/SidebarFilterer.ts         | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index c28a31cad463..e19e42d2e8c8 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -212,13 +212,23 @@ export class SidebarFilterer {
   }
 
   private expandParents(target: HTMLElement) {
-    let parent = target.parentElement?.closest("details");
+    for (const parent of this.getParents(target)) {
+      this.toggleElement(parent, true);
+      parent.open = true;
+    }
+  }
+
+  private getParents(el: HTMLElement) {
+    const parents: HTMLDetailsElement[] = [];
+    let parent = el.parentElement?.closest("details");
+
     while (parent) {
       if (parent instanceof HTMLDetailsElement) {
-        this.toggleElement(parent, true);
-        parent.open = true;
+        parents.push(parent);
       }
       parent = parent.parentElement?.closest("details");
     }
+
+    return parents;
   }
 }

From d18edb5fe7ec86bca32cebdc63a2085aa930a565 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 15:59:05 +0200
Subject: [PATCH 098/122] refactor(sidebar-filter): extract
 getHeading[Container]()

---
 .../organisms/sidebar/SidebarFilterer.ts         | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index e19e42d2e8c8..92e3f891fcc0 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -57,7 +57,7 @@ export class SidebarFilterer {
   }
 
   private resetHeading(heading: HTMLElement) {
-    const container = heading.closest("li") ?? heading;
+    const container = this.getHeadingContainer(heading);
     this.toggleElement(container, true);
   }
 
@@ -109,7 +109,7 @@ export class SidebarFilterer {
   }
 
   private hideHeading(heading: HTMLElement) {
-    const container = heading.closest("li") ?? heading;
+    const container = this.getHeadingContainer(heading);
     this.toggleElement(container, false);
   }
 
@@ -190,13 +190,21 @@ export class SidebarFilterer {
   }
 
   private showHeading(target: HTMLElement) {
-    const heading = this.findFirstElementBefore(target, this.headings);
-    const container = heading?.closest("li") ?? heading;
+    const heading = this.getHeading(target);
+    const container = heading && this.getHeadingContainer(heading);
     if (container) {
       this.toggleElement(container, true);
     }
   }
 
+  private getHeading(el: HTMLElement) {
+    return this.findFirstElementBefore(el, this.headings);
+  }
+
+  private getHeadingContainer(heading: HTMLElement) {
+    return heading.closest("li") ?? heading;
+  }
+
   private findFirstElementBefore(
     target: HTMLElement,
     candidates: HTMLElement[]

From c6a74a2e3b05361e4f6417feb862ed38ba24ba64 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:10:55 +0200
Subject: [PATCH 099/122] perf(sidebar-filter): avoid duplicate work

---
 .../organisms/sidebar/SidebarFilterer.ts      | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 92e3f891fcc0..824abd297640 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -3,7 +3,13 @@ import { splitQuery } from "../../../utils";
 export class SidebarFilterer {
   headings: HTMLElement[];
   parents: HTMLDetailsElement[];
-  links: HTMLAnchorElement[];
+  items: Array<{
+    haystack: string;
+    link: HTMLAnchorElement;
+    container: HTMLElement;
+    heading: HTMLElement | undefined;
+    parents: HTMLDetailsElement[];
+  }>;
   toc: HTMLElement | null;
 
   constructor(root: HTMLElement) {
@@ -11,9 +17,19 @@ export class SidebarFilterer {
     this.parents = Array.from(
       root.querySelectorAll<HTMLDetailsElement>("details")
     );
-    this.links = Array.from(
+
+    const links = Array.from(
       root.querySelectorAll<HTMLAnchorElement>("a[href]")
     );
+
+    this.items = links.map((link) => ({
+      haystack: link.innerText.toLowerCase(),
+      link,
+      container: this.getLinkContainer(link),
+      heading: this.getHeading(link),
+      parents: this.getParents(link),
+    }));
+
     this.toc =
       root.closest<HTMLElement>(".sidebar")?.querySelector(".in-nav-toc") ??
       null;
@@ -41,7 +57,7 @@ export class SidebarFilterer {
   }
 
   showAllItems() {
-    this.links.forEach((link) => this.resetLink(link));
+    this.items.forEach(({ link }) => this.resetLink(link));
     this.headings.forEach((heading) => this.resetHeading(heading));
     this.parents.forEach((parent) => this.resetParent(parent));
   }
@@ -89,21 +105,25 @@ export class SidebarFilterer {
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);
     let matchCount = 0;
-    this.links.forEach((link) => {
-      this.resetHighlighting(link);
-      const haystack = link.innerText.toLowerCase();
-      const isMatch = terms.every((needle) => haystack.includes(needle));
-
-      const target = this.getLinkContainer(link);
-      this.toggleElement(target, isMatch);
-
-      if (isMatch) {
-        matchCount++;
-        this.highlightMatches(link, terms);
-        this.showHeading(target);
-        this.expandParents(target);
+    this.items.forEach(
+      ({ haystack, link, container: target, heading, parents }) => {
+        this.resetHighlighting(link);
+        const isMatch = terms.every((needle) => haystack.includes(needle));
+
+        this.toggleElement(target, isMatch);
+
+        if (isMatch) {
+          matchCount++;
+          this.highlightMatches(link, terms);
+          if (heading) {
+            this.showHeading(heading);
+          }
+          for (const parent of parents) {
+            this.expandParent(parent);
+          }
+        }
       }
-    });
+    );
 
     return matchCount;
   }
@@ -189,8 +209,7 @@ export class SidebarFilterer {
     return newNode;
   }
 
-  private showHeading(target: HTMLElement) {
-    const heading = this.getHeading(target);
+  private showHeading(heading: HTMLElement) {
     const container = heading && this.getHeadingContainer(heading);
     if (container) {
       this.toggleElement(container, true);
@@ -219,11 +238,9 @@ export class SidebarFilterer {
       );
   }
 
-  private expandParents(target: HTMLElement) {
-    for (const parent of this.getParents(target)) {
-      this.toggleElement(parent, true);
-      parent.open = true;
-    }
+  private expandParent(parent: HTMLDetailsElement) {
+    this.toggleElement(parent, true);
+    parent.open = true;
   }
 
   private getParents(el: HTMLElement) {

From 1cb333d1a11f2935d3cf77d4169a96fe6075b9cf Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:12:21 +0200
Subject: [PATCH 100/122] refactor(sidebar-filter): rename
 all{Headings,Parents}

---
 .../organisms/sidebar/SidebarFilterer.ts      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 824abd297640..6ee7d32f4453 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -1,8 +1,8 @@
 import { splitQuery } from "../../../utils";
 
 export class SidebarFilterer {
-  headings: HTMLElement[];
-  parents: HTMLDetailsElement[];
+  allHeadings: HTMLElement[];
+  allParents: HTMLDetailsElement[];
   items: Array<{
     haystack: string;
     link: HTMLAnchorElement;
@@ -13,8 +13,10 @@ export class SidebarFilterer {
   toc: HTMLElement | null;
 
   constructor(root: HTMLElement) {
-    this.headings = Array.from(root.querySelectorAll<HTMLElement>("li strong"));
-    this.parents = Array.from(
+    this.allHeadings = Array.from(
+      root.querySelectorAll<HTMLElement>("li strong")
+    );
+    this.allParents = Array.from(
       root.querySelectorAll<HTMLDetailsElement>("details")
     );
 
@@ -58,8 +60,8 @@ export class SidebarFilterer {
 
   showAllItems() {
     this.items.forEach(({ link }) => this.resetLink(link));
-    this.headings.forEach((heading) => this.resetHeading(heading));
-    this.parents.forEach((parent) => this.resetParent(parent));
+    this.allHeadings.forEach((heading) => this.resetHeading(heading));
+    this.allParents.forEach((parent) => this.resetParent(parent));
   }
 
   private resetLink(link: HTMLAnchorElement) {
@@ -99,8 +101,8 @@ export class SidebarFilterer {
   }
 
   showOnlyMatchingItems(query: string) {
-    this.headings.forEach((heading) => this.hideHeading(heading));
-    this.parents.forEach((parent) => this.collapseParent(parent));
+    this.allHeadings.forEach((heading) => this.hideHeading(heading));
+    this.allParents.forEach((parent) => this.collapseParent(parent));
 
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);
@@ -217,7 +219,7 @@ export class SidebarFilterer {
   }
 
   private getHeading(el: HTMLElement) {
-    return this.findFirstElementBefore(el, this.headings);
+    return this.findFirstElementBefore(el, this.allHeadings);
   }
 
   private getHeadingContainer(heading: HTMLElement) {

From db3747acb830e71578023530da12b4e5c646fd08 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:15:36 +0200
Subject: [PATCH 101/122] refactor(sidebar-filter): merge
 get{Link,Heading}Container()

---
 .../organisms/sidebar/SidebarFilterer.ts      | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 6ee7d32f4453..12eecc36cf01 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -27,7 +27,7 @@ export class SidebarFilterer {
     this.items = links.map((link) => ({
       haystack: link.innerText.toLowerCase(),
       link,
-      container: this.getLinkContainer(link),
+      container: this.getContainer(link),
       heading: this.getHeading(link),
       parents: this.getParents(link),
     }));
@@ -66,16 +66,16 @@ export class SidebarFilterer {
 
   private resetLink(link: HTMLAnchorElement) {
     this.resetHighlighting(link);
-    const target = this.getLinkContainer(link);
-    this.toggleElement(target, true);
+    const container = this.getContainer(link);
+    this.toggleElement(container, true);
   }
 
-  private getLinkContainer(link: HTMLAnchorElement) {
-    return link.closest("li") || link;
+  private getContainer(el: HTMLElement) {
+    return el.closest("li") || el;
   }
 
   private resetHeading(heading: HTMLElement) {
-    const container = this.getHeadingContainer(heading);
+    const container = this.getContainer(heading);
     this.toggleElement(container, true);
   }
 
@@ -131,7 +131,7 @@ export class SidebarFilterer {
   }
 
   private hideHeading(heading: HTMLElement) {
-    const container = this.getHeadingContainer(heading);
+    const container = this.getContainer(heading);
     this.toggleElement(container, false);
   }
 
@@ -212,7 +212,7 @@ export class SidebarFilterer {
   }
 
   private showHeading(heading: HTMLElement) {
-    const container = heading && this.getHeadingContainer(heading);
+    const container = heading && this.getContainer(heading);
     if (container) {
       this.toggleElement(container, true);
     }
@@ -222,10 +222,6 @@ export class SidebarFilterer {
     return this.findFirstElementBefore(el, this.allHeadings);
   }
 
-  private getHeadingContainer(heading: HTMLElement) {
-    return heading.closest("li") ?? heading;
-  }
-
   private findFirstElementBefore(
     target: HTMLElement,
     candidates: HTMLElement[]

From 67bcf7147fede9c550166a29dc81992533ed6039 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:24:49 +0200
Subject: [PATCH 102/122] perf(sidebar-filter): reuse SidebarFilterer

---
 .../src/document/organisms/sidebar/filter.tsx  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index e392e37e9956..e114651cfd04 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { SidebarFilterer } from "./SidebarFilterer";
 import { Button } from "../../../ui/atoms/button";
 import { GleanThumbs } from "../../../ui/atoms/thumbs";
@@ -12,6 +12,7 @@ export function SidebarFilter() {
   const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
+  const filtererRef = useRef<SidebarFilterer | null>(null);
   const gleanClick = useGleanClick();
 
   useEffect(() => {
@@ -21,10 +22,17 @@ export function SidebarFilter() {
       return;
     }
 
-    const root = quicklinks.querySelector<HTMLElement>(".sidebar-body");
+    // Filter sidebar.
+    let filterer = filtererRef.current;
+    if (!filterer) {
+      const root = quicklinks.querySelector<HTMLElement>(".sidebar-body");
 
-    if (!root) {
-      return;
+      if (!root) {
+        return;
+      }
+
+      filterer = new SidebarFilterer(root);
+      filtererRef.current = filterer;
     }
 
     // Save scroll position.
@@ -33,8 +41,6 @@ export function SidebarFilter() {
       quicklinks.scrollTop = 0;
     }
 
-    // Filter sidebar.
-    const filterer = new SidebarFilterer(root);
     const items = filterer.applyFilter(query);
     setMatchCount(items);
 

From dce2972db663ca62ff4b726080ec5a290088b17d Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:28:11 +0200
Subject: [PATCH 103/122] fix(sidebar-filter): store scrollTop in ref, not
 state

Avoids having it as a dependency of the useEffect callback.
---
 .../src/document/organisms/sidebar/filter.tsx  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index e114651cfd04..94daeba2164d 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -9,10 +9,10 @@ import { SIDEBAR_FILTER_FOCUS } from "../../../telemetry/constants";
 
 export function SidebarFilter() {
   const [query, setQuery] = useState("");
-  const [scrollTop, setScrollTop] = useState<Number | undefined>(undefined);
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
   const filtererRef = useRef<SidebarFilterer | null>(null);
+  const scrollTopRef = useRef<Number | undefined>(undefined);
   const gleanClick = useGleanClick();
 
   useEffect(() => {
@@ -36,8 +36,12 @@ export function SidebarFilter() {
     }
 
     // Save scroll position.
-    if (query && typeof scrollTop === "undefined" && quicklinks.scrollTop > 0) {
-      setScrollTop(quicklinks.scrollTop);
+    if (
+      query &&
+      typeof scrollTopRef.current === "undefined" &&
+      quicklinks.scrollTop > 0
+    ) {
+      scrollTopRef.current = quicklinks.scrollTop;
       quicklinks.scrollTop = 0;
     }
 
@@ -45,11 +49,11 @@ export function SidebarFilter() {
     setMatchCount(items);
 
     // Restore scroll position.
-    if (!query && typeof scrollTop === "number") {
-      quicklinks.scrollTop = scrollTop;
-      setScrollTop(undefined);
+    if (!query && typeof scrollTopRef.current === "number") {
+      quicklinks.scrollTop = scrollTopRef.current;
+      scrollTopRef.current = undefined;
     }
-  }, [query, scrollTop]);
+  }, [query]);
 
   useEffect(() => {
     if (hasUserInteraction) {

From 6bdd5f5d997bd103d35aed89bc6def2ad343aea2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:38:57 +0200
Subject: [PATCH 104/122] refactor(sidebar-filter): extract
 usePersistedScrollPosition()

---
 .../src/document/organisms/sidebar/filter.tsx | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 94daeba2164d..da1d551dca1a 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { SidebarFilterer } from "./SidebarFilterer";
 import { Button } from "../../../ui/atoms/button";
 import { GleanThumbs } from "../../../ui/atoms/thumbs";
@@ -12,12 +12,17 @@ export function SidebarFilter() {
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
   const filtererRef = useRef<SidebarFilterer | null>(null);
-  const scrollTopRef = useRef<Number | undefined>(undefined);
+  const quicklinksRef = useRef<HTMLElement | null>(null);
+  const { saveScrollPosition, restoreScrollPosition } =
+    usePersistedScrollPosition(quicklinksRef);
   const gleanClick = useGleanClick();
 
   useEffect(() => {
-    const quicklinks = document.getElementById("sidebar-quicklinks");
+    quicklinksRef.current = document.getElementById("sidebar-quicklinks");
+  });
 
+  useEffect(() => {
+    const quicklinks = quicklinksRef.current;
     if (!quicklinks) {
       return;
     }
@@ -36,24 +41,18 @@ export function SidebarFilter() {
     }
 
     // Save scroll position.
-    if (
-      query &&
-      typeof scrollTopRef.current === "undefined" &&
-      quicklinks.scrollTop > 0
-    ) {
-      scrollTopRef.current = quicklinks.scrollTop;
-      quicklinks.scrollTop = 0;
+    if (query) {
+      saveScrollPosition();
     }
 
     const items = filterer.applyFilter(query);
     setMatchCount(items);
 
     // Restore scroll position.
-    if (!query && typeof scrollTopRef.current === "number") {
-      quicklinks.scrollTop = scrollTopRef.current;
-      scrollTopRef.current = undefined;
+    if (!query) {
+      restoreScrollPosition();
     }
-  }, [query]);
+  }, [query, saveScrollPosition, restoreScrollPosition]);
 
   useEffect(() => {
     if (hasUserInteraction) {
@@ -112,3 +111,28 @@ export function SidebarFilter() {
     </section>
   );
 }
+
+function usePersistedScrollPosition(ref: MutableRefObject<HTMLElement | null>) {
+  const scrollTopRef = useRef<Number | undefined>(undefined);
+
+  const el = ref.current;
+
+  return {
+    saveScrollPosition() {
+      if (
+        el &&
+        typeof scrollTopRef.current === "undefined" &&
+        el.scrollTop > 0
+      ) {
+        scrollTopRef.current = el.scrollTop;
+        el.scrollTop = 0;
+      }
+    },
+    restoreScrollPosition() {
+      if (el && typeof scrollTopRef.current === "number") {
+        el.scrollTop = scrollTopRef.current;
+        scrollTopRef.current = undefined;
+      }
+    },
+  };
+}

From 43d8cecc425a2479cf87a26c8d2d72a62a1218c0 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:42:27 +0200
Subject: [PATCH 105/122] refactor(sidebar-filter): extract useSidebarFilter()

---
 .../src/document/organisms/sidebar/filter.tsx | 96 ++++++++++---------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index da1d551dca1a..93c637bda8b4 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -8,52 +8,10 @@ import { useGleanClick } from "../../../telemetry/glean-context";
 import { SIDEBAR_FILTER_FOCUS } from "../../../telemetry/constants";
 
 export function SidebarFilter() {
-  const [query, setQuery] = useState("");
-  const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
-  const filtererRef = useRef<SidebarFilterer | null>(null);
-  const quicklinksRef = useRef<HTMLElement | null>(null);
-  const { saveScrollPosition, restoreScrollPosition } =
-    usePersistedScrollPosition(quicklinksRef);
+  const { query, setQuery, matchCount } = useSidebarFilter();
   const gleanClick = useGleanClick();
 
-  useEffect(() => {
-    quicklinksRef.current = document.getElementById("sidebar-quicklinks");
-  });
-
-  useEffect(() => {
-    const quicklinks = quicklinksRef.current;
-    if (!quicklinks) {
-      return;
-    }
-
-    // Filter sidebar.
-    let filterer = filtererRef.current;
-    if (!filterer) {
-      const root = quicklinks.querySelector<HTMLElement>(".sidebar-body");
-
-      if (!root) {
-        return;
-      }
-
-      filterer = new SidebarFilterer(root);
-      filtererRef.current = filterer;
-    }
-
-    // Save scroll position.
-    if (query) {
-      saveScrollPosition();
-    }
-
-    const items = filterer.applyFilter(query);
-    setMatchCount(items);
-
-    // Restore scroll position.
-    if (!query) {
-      restoreScrollPosition();
-    }
-  }, [query, saveScrollPosition, restoreScrollPosition]);
-
   useEffect(() => {
     if (hasUserInteraction) {
       gleanClick(SIDEBAR_FILTER_FOCUS);
@@ -112,6 +70,58 @@ export function SidebarFilter() {
   );
 }
 
+function useSidebarFilter() {
+  const [query, setQuery] = useState("");
+  const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
+  const filtererRef = useRef<SidebarFilterer | null>(null);
+  const quicklinksRef = useRef<HTMLElement | null>(null);
+  const { saveScrollPosition, restoreScrollPosition } =
+    usePersistedScrollPosition(quicklinksRef);
+
+  useEffect(() => {
+    quicklinksRef.current = document.getElementById("sidebar-quicklinks");
+  });
+
+  useEffect(() => {
+    const quicklinks = quicklinksRef.current;
+    if (!quicklinks) {
+      return;
+    }
+
+    // Filter sidebar.
+    let filterer = filtererRef.current;
+    if (!filterer) {
+      const root = quicklinks.querySelector<HTMLElement>(".sidebar-body");
+
+      if (!root) {
+        return;
+      }
+
+      filterer = new SidebarFilterer(root);
+      filtererRef.current = filterer;
+    }
+
+    // Save scroll position.
+    if (query) {
+      saveScrollPosition();
+    }
+
+    const items = filterer.applyFilter(query);
+    setMatchCount(items);
+
+    // Restore scroll position.
+    if (!query) {
+      restoreScrollPosition();
+    }
+  }, [query, saveScrollPosition, restoreScrollPosition]);
+
+  return {
+    query,
+    setQuery,
+    matchCount,
+  };
+}
+
 function usePersistedScrollPosition(ref: MutableRefObject<HTMLElement | null>) {
   const scrollTopRef = useRef<Number | undefined>(undefined);
 

From ad775ea624cd8f0f76481736361cfc33a011b68c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:44:13 +0200
Subject: [PATCH 106/122] refactor(sidebar-filter): rename {hasUserInteraction
 => isActive}

---
 .../src/document/organisms/sidebar/filter.scss   |  2 +-
 client/src/document/organisms/sidebar/filter.tsx | 16 +++++++---------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 3cbb898efe8d..9691ead0123f 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -56,7 +56,7 @@
     }
 
     &:focus,
-    &.has-user-interaction {
+    &.is-active {
       padding-right: 7rem;
       width: 100%;
 
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 93c637bda8b4..09d56ce50355 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -8,15 +8,15 @@ import { useGleanClick } from "../../../telemetry/glean-context";
 import { SIDEBAR_FILTER_FOCUS } from "../../../telemetry/constants";
 
 export function SidebarFilter() {
-  const [hasUserInteraction, setUserInteraction] = useState<Boolean>(false);
+  const [isActive, setActive] = useState<Boolean>(false);
   const { query, setQuery, matchCount } = useSidebarFilter();
   const gleanClick = useGleanClick();
 
   useEffect(() => {
-    if (hasUserInteraction) {
+    if (isActive) {
       gleanClick(SIDEBAR_FILTER_FOCUS);
     }
-  }, [gleanClick, hasUserInteraction]);
+  }, [gleanClick, isActive]);
 
   return (
     <section className="sidebar-filter-container">
@@ -31,13 +31,11 @@ export function SidebarFilter() {
         </label>
         <input
           id="sidebar-filter-input"
-          className={`sidebar-filter-input-field ${
-            hasUserInteraction && "has-user-interaction"
-          }`}
+          className={`sidebar-filter-input-field ${isActive && "is-active"}`}
           type="text"
           placeholder="Filter"
           value={query}
-          onFocus={() => setUserInteraction(true)}
+          onFocus={() => setActive(true)}
           onChange={(event) => setQuery(event.target.value)}
         />
         {matchCount !== undefined && (
@@ -53,13 +51,13 @@ export function SidebarFilter() {
           extraClasses="clear-sidebar-filter-button"
           onClickHandler={() => {
             setQuery("");
-            setUserInteraction(false);
+            setActive(false);
           }}
         >
           <span className="visually-hidden">Clear filter input</span>
         </Button>
       </div>
-      {hasUserInteraction && (
+      {isActive && (
         <div className="sidebar-filter-footer">
           <div className="sidebar-filter-thumbs">
             <GleanThumbs feature="sidebar-filter" />

From fd71c3f103171cdbec1d230b1fdcc591e1f86cb2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:44:57 +0200
Subject: [PATCH 107/122] chore(sidebar-filter): show count only if active

---
 client/src/document/organisms/sidebar/filter.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 9691ead0123f..96957f67ede0 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -60,6 +60,10 @@
       padding-right: 7rem;
       width: 100%;
 
+      ~ .sidebar-filter-count {
+        display: block;
+      }
+
       ~ .button.clear-sidebar-filter-button {
         display: block;
       }
@@ -68,7 +72,7 @@
     ~ .sidebar-filter-count {
       background: var(--mark-color);
       border-radius: 1rem;
-      display: block;
+      display: none;
       font-size: var(--type-tiny-font-size);
       padding: 0 0.25rem;
       position: absolute;

From f4bb33e80377b1b9bb3e9dcc882fdcd818214cf2 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:47:29 +0200
Subject: [PATCH 108/122] chore(sidebar): add comment about reducing margin-top
 again

The margin-top avoids the top of the sidebar content to be hidden
behind the filter.
---
 client/src/document/organisms/sidebar/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 0c1701380431..8dc0a98c3608 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -84,7 +84,7 @@
     top: 0;
 
     ~ .sidebar-inner-nav {
-      margin-top: 2.5rem;
+      margin-top: 2.5rem; /* Reduce to 0.5rem once SidebarFilter feedback is removed. */
     }
 
     @media screen and (max-width: $screen-md) {

From 8badf144de64b0cb15907f6b6e48277d31f36a00 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:49:08 +0200
Subject: [PATCH 109/122] fix(sidebar-filter): avoid margin-top on mobile

---
 client/src/document/organisms/sidebar/filter.scss | 4 ++++
 client/src/document/organisms/sidebar/index.scss  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 96957f67ede0..caaf7786bdbf 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -13,6 +13,10 @@
   padding-right: 0.5rem;
   padding-top: 0.5rem;
 
+  @media screen and (max-width: $screen-md) {
+    padding-bottom: unset;
+  }
+
   .sidebar-filter {
     align-items: center;
     display: flex;
diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 8dc0a98c3608..2ae8145dd73c 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -93,6 +93,10 @@
       padding-bottom: unset;
       position: unset;
       top: unset;
+
+      ~ .sidebar-inner-nav {
+        margin-top: unset;
+      }
     }
   }
 

From 06467ccd1c57a6f18f84e58e72518ecdf049e75c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 16:56:21 +0200
Subject: [PATCH 110/122] fix(sidebar-filter): restore scroll positon on mobile

---
 .../src/document/organisms/sidebar/filter.tsx | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 09d56ce50355..3cf9f8468b73 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -73,11 +73,14 @@ function useSidebarFilter() {
   const [matchCount, setMatchCount] = useState<Number | undefined>(undefined);
   const filtererRef = useRef<SidebarFilterer | null>(null);
   const quicklinksRef = useRef<HTMLElement | null>(null);
+  const sidebarInnerNavRef = useRef<HTMLElement | null>(null); // Scrolls on mobile.
   const { saveScrollPosition, restoreScrollPosition } =
-    usePersistedScrollPosition(quicklinksRef);
+    usePersistedScrollPosition(quicklinksRef, sidebarInnerNavRef);
 
   useEffect(() => {
     quicklinksRef.current = document.getElementById("sidebar-quicklinks");
+    sidebarInnerNavRef.current =
+      quicklinksRef.current?.querySelector(".sidebar-inner-nav") ?? null;
   });
 
   useEffect(() => {
@@ -120,27 +123,31 @@ function useSidebarFilter() {
   };
 }
 
-function usePersistedScrollPosition(ref: MutableRefObject<HTMLElement | null>) {
-  const scrollTopRef = useRef<Number | undefined>(undefined);
-
-  const el = ref.current;
-
+function usePersistedScrollPosition(
+  ...refs: Array<MutableRefObject<HTMLElement | null>>
+) {
   return {
     saveScrollPosition() {
-      if (
-        el &&
-        typeof scrollTopRef.current === "undefined" &&
-        el.scrollTop > 0
-      ) {
-        scrollTopRef.current = el.scrollTop;
-        el.scrollTop = 0;
-      }
+      refs.forEach((ref) => {
+        const el = ref.current;
+        if (
+          el &&
+          typeof el.dataset.lastScrollTop === "undefined" &&
+          el.scrollTop > 0
+        ) {
+          el.dataset.lastScrollTop = String(el.scrollTop);
+          el.scrollTop = 0;
+        }
+      });
     },
     restoreScrollPosition() {
-      if (el && typeof scrollTopRef.current === "number") {
-        el.scrollTop = scrollTopRef.current;
-        scrollTopRef.current = undefined;
-      }
+      refs.forEach((ref) => {
+        const el = ref.current;
+        if (el && typeof el.dataset.lastScrollTop === "string") {
+          el.scrollTop = Number(el.dataset.lastScrollTop);
+          delete el.dataset.lastScrollTop;
+        }
+      });
     },
   };
 }

From 3d30de53e75c3836006996cb4296d793030d260f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 17:00:52 +0200
Subject: [PATCH 111/122] fix(sidebar-filter): hide parent container, not
 parent

Avoids unexpected space caused by parent containers
whose containing parent is actually hidden.
---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 12eecc36cf01..dc5a6f58a8c3 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -80,7 +80,8 @@ export class SidebarFilterer {
   }
 
   private resetParent(detail: HTMLDetailsElement) {
-    this.toggleElement(detail, true);
+    const container = this.getContainer(detail);
+    this.toggleElement(container, true);
     if (detail.dataset.wasOpen) {
       detail.open = JSON.parse(detail.dataset.wasOpen);
       delete detail.dataset.wasOpen;
@@ -136,7 +137,8 @@ export class SidebarFilterer {
   }
 
   private collapseParent(el: HTMLDetailsElement) {
-    this.toggleElement(el, false);
+    const container = this.getContainer(el);
+    this.toggleElement(container, false);
     el.dataset.wasOpen = el.dataset.wasOpen ?? String(el.open);
     el.open = false;
   }
@@ -237,7 +239,8 @@ export class SidebarFilterer {
   }
 
   private expandParent(parent: HTMLDetailsElement) {
-    this.toggleElement(parent, true);
+    const container = this.getContainer(parent);
+    this.toggleElement(container, true);
     parent.open = true;
   }
 

From 1255bc2ec8b3ba06d5e8ab2dc4b028db1c9f902c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 17:04:26 +0200
Subject: [PATCH 112/122] refactor(sidebar-filter): rename target => container

---
 .../organisms/sidebar/SidebarFilterer.ts      | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index dc5a6f58a8c3..1c4c99cc43d6 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -108,25 +108,23 @@ export class SidebarFilterer {
     // Show/hide items (+ show parents).
     const terms = splitQuery(query);
     let matchCount = 0;
-    this.items.forEach(
-      ({ haystack, link, container: target, heading, parents }) => {
-        this.resetHighlighting(link);
-        const isMatch = terms.every((needle) => haystack.includes(needle));
-
-        this.toggleElement(target, isMatch);
-
-        if (isMatch) {
-          matchCount++;
-          this.highlightMatches(link, terms);
-          if (heading) {
-            this.showHeading(heading);
-          }
-          for (const parent of parents) {
-            this.expandParent(parent);
-          }
+    this.items.forEach(({ haystack, link, container, heading, parents }) => {
+      this.resetHighlighting(link);
+      const isMatch = terms.every((needle) => haystack.includes(needle));
+
+      this.toggleElement(container, isMatch);
+
+      if (isMatch) {
+        matchCount++;
+        this.highlightMatches(link, terms);
+        if (heading) {
+          this.showHeading(heading);
+        }
+        for (const parent of parents) {
+          this.expandParent(parent);
         }
       }
-    );
+    });
 
     return matchCount;
   }

From 8758bb3fe12be36835056f2c1c45b50d3339831c Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 17:34:10 +0200
Subject: [PATCH 113/122] fix(sidebar-filter): set z-index on sidebar-actions,
 instead of icon

---
 client/src/document/organisms/sidebar/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 2ae8145dd73c..861426638694 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -82,6 +82,7 @@
     padding-bottom: 4rem;
     position: sticky;
     top: 0;
+    z-index: var(--z-index-main-header);
 
     ~ .sidebar-inner-nav {
       margin-top: 2.5rem; /* Reduce to 0.5rem once SidebarFilter feedback is removed. */
@@ -145,7 +146,6 @@
     mask-size: 14px;
     position: relative;
     width: 14px;
-    z-index: -1;
   }
 
   /* icons in sidebars */

From 28dea13cec15f904385a4d616582b95bd2902604 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 18:57:52 +0200
Subject: [PATCH 114/122] fix(sidebar-filter): disable autocomplete

Chrome was suggesting previously typed queries.
---
 client/src/document/organisms/sidebar/filter.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 3cf9f8468b73..b24aabf702d9 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -31,6 +31,7 @@ export function SidebarFilter() {
         </label>
         <input
           id="sidebar-filter-input"
+          autoComplete="off"
           className={`sidebar-filter-input-field ${isActive && "is-active"}`}
           type="text"
           placeholder="Filter"

From c157fae01000c7e472168db6da1b842014017e58 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 6 Jun 2023 19:09:10 +0200
Subject: [PATCH 115/122] fix(sidebar-filter): use textContent, not innerText

In Chrome and Safari innerText seems to be empty for
elements that are hidden in a collapsed details element.
---
 client/src/document/organisms/sidebar/SidebarFilterer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 1c4c99cc43d6..22f7efb23d1f 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -25,7 +25,7 @@ export class SidebarFilterer {
     );
 
     this.items = links.map((link) => ({
-      haystack: link.innerText.toLowerCase(),
+      haystack: (link.textContent ?? "").toLowerCase(),
       link,
       container: this.getContainer(link),
       heading: this.getHeading(link),

From 6dd696e371842e1ca29ee5233e8c1f2e8e214f8b Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Wed, 7 Jun 2023 11:57:11 +0200
Subject: [PATCH 116/122] feat(sidebar-filter): color filter icon when we have
 input

---
 client/src/document/organisms/sidebar/filter.scss | 6 ++++++
 client/src/document/organisms/sidebar/filter.tsx  | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index caaf7786bdbf..85473ee6c0d0 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -21,6 +21,12 @@
     align-items: center;
     display: flex;
     margin-bottom: 0.5rem;
+
+    &.has-input {
+      .sidebar-filter-label .icon {
+        background-color: var(--category-color);
+      }
+    }
   }
 
   .sidebar-filter-label {
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index b24aabf702d9..a0643d33e462 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -20,7 +20,7 @@ export function SidebarFilter() {
 
   return (
     <section className="sidebar-filter-container">
-      <div className="sidebar-filter">
+      <div className={`sidebar-filter ${query ? "has-input" : ""}`}>
         <label
           id="sidebar-filter-label"
           className="sidebar-filter-label"

From 639407f308c4ff7d401649114a060d407261120f Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 8 Jun 2023 10:25:37 +0200
Subject: [PATCH 117/122] fix(sidebar-filter): trim query

Avoids that " " finds matches.
---
 client/src/document/organisms/sidebar/filter.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index a0643d33e462..6bedcd54d97c 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -103,16 +103,18 @@ function useSidebarFilter() {
       filtererRef.current = filterer;
     }
 
+    const trimmedQuery = query.trim();
+
     // Save scroll position.
-    if (query) {
+    if (trimmedQuery) {
       saveScrollPosition();
     }
 
-    const items = filterer.applyFilter(query);
+    const items = filterer.applyFilter(trimmedQuery);
     setMatchCount(items);
 
     // Restore scroll position.
-    if (!query) {
+    if (!trimmedQuery) {
       restoreScrollPosition();
     }
   }, [query, saveScrollPosition, restoreScrollPosition]);

From 230646f49328e05feca078080f2cb15057bdeb98 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Thu, 8 Jun 2023 12:31:16 +0200
Subject: [PATCH 118/122] chore(sidebar): remove unnecessary `position:
 relative`

---
 client/src/document/organisms/sidebar/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
index 861426638694..94c9c5ec9858 100644
--- a/client/src/document/organisms/sidebar/index.scss
+++ b/client/src/document/organisms/sidebar/index.scss
@@ -144,7 +144,6 @@
     height: 14px;
     margin-right: -0.25rem;
     mask-size: 14px;
-    position: relative;
     width: 14px;
   }
 

From 371fc5f340ed54dd19c82f89654992a56644eecc Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 8 Jun 2023 12:37:36 +0200
Subject: [PATCH 119/122] fix(sidebar-filter): assign
 quicklinks/sidebarInnerNav once

Avoid executing the effect on every re-render.
---
 client/src/document/organisms/sidebar/filter.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
index 6bedcd54d97c..49d509a68130 100644
--- a/client/src/document/organisms/sidebar/filter.tsx
+++ b/client/src/document/organisms/sidebar/filter.tsx
@@ -79,10 +79,13 @@ function useSidebarFilter() {
     usePersistedScrollPosition(quicklinksRef, sidebarInnerNavRef);
 
   useEffect(() => {
-    quicklinksRef.current = document.getElementById("sidebar-quicklinks");
+    const quicklinks = document.getElementById("sidebar-quicklinks");
+    // Scrolls on desktop.
+    quicklinksRef.current = quicklinks;
+    // Scrolls on mobile.
     sidebarInnerNavRef.current =
-      quicklinksRef.current?.querySelector(".sidebar-inner-nav") ?? null;
-  });
+      quicklinks?.querySelector(".sidebar-inner-nav") ?? null;
+  }, []);
 
   useEffect(() => {
     const quicklinks = quicklinksRef.current;

From d6cb3af6b5c7765493d5ac1704c7683c88404dd9 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 8 Jun 2023 12:40:15 +0200
Subject: [PATCH 120/122] chore(sidebar-filter): remove unnecessary CSS block

The `.glean-thumbs` are now left-aligned with the filter icon.
---
 client/src/document/organisms/sidebar/filter.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/document/organisms/sidebar/filter.scss b/client/src/document/organisms/sidebar/filter.scss
index 85473ee6c0d0..671788827e3e 100644
--- a/client/src/document/organisms/sidebar/filter.scss
+++ b/client/src/document/organisms/sidebar/filter.scss
@@ -132,10 +132,6 @@
       height: 1.5rem;
       margin-bottom: 0.5rem;
       margin-left: 0.6rem;
-
-      .confirmation {
-        margin-right: 0.55em; /* Aligns heart with clear button. */
-      }
     }
   }
 }

From 1cb822bf676a56bfb48a0a863b5660e943c381ec Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 8 Jun 2023 12:42:27 +0200
Subject: [PATCH 121/122] refactor(sidebar-filter): rename params for
 consistency

---
 .../organisms/sidebar/SidebarFilterer.ts      | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index 22f7efb23d1f..eac5649be68f 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -79,12 +79,12 @@ export class SidebarFilterer {
     this.toggleElement(container, true);
   }
 
-  private resetParent(detail: HTMLDetailsElement) {
-    const container = this.getContainer(detail);
+  private resetParent(parent: HTMLDetailsElement) {
+    const container = this.getContainer(parent);
     this.toggleElement(container, true);
-    if (detail.dataset.wasOpen) {
-      detail.open = JSON.parse(detail.dataset.wasOpen);
-      delete detail.dataset.wasOpen;
+    if (parent.dataset.wasOpen) {
+      parent.open = JSON.parse(parent.dataset.wasOpen);
+      delete parent.dataset.wasOpen;
     }
   }
 
@@ -134,11 +134,11 @@ export class SidebarFilterer {
     this.toggleElement(container, false);
   }
 
-  private collapseParent(el: HTMLDetailsElement) {
-    const container = this.getContainer(el);
+  private collapseParent(parent: HTMLDetailsElement) {
+    const container = this.getContainer(parent);
     this.toggleElement(container, false);
-    el.dataset.wasOpen = el.dataset.wasOpen ?? String(el.open);
-    el.open = false;
+    parent.dataset.wasOpen = parent.dataset.wasOpen ?? String(parent.open);
+    parent.open = false;
   }
 
   private highlightMatches(el: HTMLElement, terms: string[]) {
@@ -186,8 +186,8 @@ export class SidebarFilterer {
     });
   }
 
-  private getTextNodes(parentNode: Node): (Node & Text)[] {
-    const parents = [parentNode];
+  private getTextNodes(node: Node): (Node & Text)[] {
+    const parents = [node];
     const nodes: (Node & Text)[] = [];
 
     for (const parent of parents) {
@@ -222,16 +222,13 @@ export class SidebarFilterer {
     return this.findFirstElementBefore(el, this.allHeadings);
   }
 
-  private findFirstElementBefore(
-    target: HTMLElement,
-    candidates: HTMLElement[]
-  ) {
+  private findFirstElementBefore(el: HTMLElement, candidates: HTMLElement[]) {
     return candidates
       .slice()
       .reverse()
       .find(
         (candidate) =>
-          candidate.compareDocumentPosition(target) &
+          candidate.compareDocumentPosition(el) &
           Node.DOCUMENT_POSITION_FOLLOWING
       );
   }

From e9ce3ac01d26bc446ca651fd4a79bf1bb37b2504 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Thu, 8 Jun 2023 12:43:40 +0200
Subject: [PATCH 122/122] refactor(sidebar-filter): rename functions for
 clarity

---
 .../organisms/sidebar/SidebarFilterer.ts      | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/document/organisms/sidebar/SidebarFilterer.ts b/client/src/document/organisms/sidebar/SidebarFilterer.ts
index eac5649be68f..c728d1d7ef20 100644
--- a/client/src/document/organisms/sidebar/SidebarFilterer.ts
+++ b/client/src/document/organisms/sidebar/SidebarFilterer.ts
@@ -27,9 +27,9 @@ export class SidebarFilterer {
     this.items = links.map((link) => ({
       haystack: (link.textContent ?? "").toLowerCase(),
       link,
-      container: this.getContainer(link),
-      heading: this.getHeading(link),
-      parents: this.getParents(link),
+      container: this.getContainerOf(link),
+      heading: this.getHeadingOf(link),
+      parents: this.getParentsOf(link),
     }));
 
     this.toc =
@@ -66,21 +66,21 @@ export class SidebarFilterer {
 
   private resetLink(link: HTMLAnchorElement) {
     this.resetHighlighting(link);
-    const container = this.getContainer(link);
+    const container = this.getContainerOf(link);
     this.toggleElement(container, true);
   }
 
-  private getContainer(el: HTMLElement) {
+  private getContainerOf(el: HTMLElement) {
     return el.closest("li") || el;
   }
 
   private resetHeading(heading: HTMLElement) {
-    const container = this.getContainer(heading);
+    const container = this.getContainerOf(heading);
     this.toggleElement(container, true);
   }
 
   private resetParent(parent: HTMLDetailsElement) {
-    const container = this.getContainer(parent);
+    const container = this.getContainerOf(parent);
     this.toggleElement(container, true);
     if (parent.dataset.wasOpen) {
       parent.open = JSON.parse(parent.dataset.wasOpen);
@@ -130,19 +130,19 @@ export class SidebarFilterer {
   }
 
   private hideHeading(heading: HTMLElement) {
-    const container = this.getContainer(heading);
+    const container = this.getContainerOf(heading);
     this.toggleElement(container, false);
   }
 
   private collapseParent(parent: HTMLDetailsElement) {
-    const container = this.getContainer(parent);
+    const container = this.getContainerOf(parent);
     this.toggleElement(container, false);
     parent.dataset.wasOpen = parent.dataset.wasOpen ?? String(parent.open);
     parent.open = false;
   }
 
   private highlightMatches(el: HTMLElement, terms: string[]) {
-    const nodes = this.getTextNodes(el);
+    const nodes = this.getTextNodesOf(el);
 
     nodes.forEach((node) => {
       const haystack = node.textContent?.toLowerCase();
@@ -186,7 +186,7 @@ export class SidebarFilterer {
     });
   }
 
-  private getTextNodes(node: Node): (Node & Text)[] {
+  private getTextNodesOf(node: Node): (Node & Text)[] {
     const parents = [node];
     const nodes: (Node & Text)[] = [];
 
@@ -212,13 +212,13 @@ export class SidebarFilterer {
   }
 
   private showHeading(heading: HTMLElement) {
-    const container = heading && this.getContainer(heading);
+    const container = heading && this.getContainerOf(heading);
     if (container) {
       this.toggleElement(container, true);
     }
   }
 
-  private getHeading(el: HTMLElement) {
+  private getHeadingOf(el: HTMLElement) {
     return this.findFirstElementBefore(el, this.allHeadings);
   }
 
@@ -234,12 +234,12 @@ export class SidebarFilterer {
   }
 
   private expandParent(parent: HTMLDetailsElement) {
-    const container = this.getContainer(parent);
+    const container = this.getContainerOf(parent);
     this.toggleElement(container, true);
     parent.open = true;
   }
 
-  private getParents(el: HTMLElement) {
+  private getParentsOf(el: HTMLElement) {
     const parents: HTMLDetailsElement[] = [];
     let parent = el.parentElement?.closest("details");