Merge pull request #1119 from basecamp/nav-filter-handle-collapsed-sections

Nav filter handle collapsed sections

app/javascript/controllers/filter_controller.js

@@ -11,7 +11,7 @@ export default class extends Controller {
 
   filter() {
     this.itemTargets.forEach(item => {
-      if (filterMatches(item.innerText, this.inputTarget.value)) {
+      if (filterMatches(item.textContent, this.inputTarget.value)) {
         item.removeAttribute("hidden")
       } else {
         item.toggleAttribute("hidden", true)

app/javascript/controllers/nav_section_expander_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { key: String }
+  static targets = [ "input", "section" ]
+
+  sectionTargetConnected() {
+    this.#restoreToggles()
+  }
+
+  toggle(event) {
+    const section = event.target
+    if (section.hasAttribute("data-is-filtering")) return
+
+    const key = this.#localStorageKeyFor(section)
+    if (section.open) {
+      localStorage.removeItem(key)
+    } else {
+      localStorage.setItem(key, true)
+    }
+  }
+
+  showWhileFiltering() {
+    if (this.inputTarget.value) {
+      this.#expandAll();
+    } else {
+      this.#restoreToggles()
+    }
+  }
+
+  #expandAll() {
+    this.sectionTargets.forEach(section => {
+      section.setAttribute("data-is-filtering", true)
+      section.open = true
+    })
+  }
+
+  #restoreToggles() {
+    this.sectionTargets.forEach(section => {
+      const key = this.#localStorageKeyFor(section)
+      section.open = !localStorage.getItem(key)
+      section.removeAttribute("data-is-filtering")
+    })
+  }
+
+  #localStorageKeyFor(section) {
+    return section.getAttribute("data-nav-section-expander-key-value")
+  }
+}