WIP

app/assets/stylesheets/filters.css

@@ -11,7 +11,6 @@
   }
 
   .filters {
-
     .btn {
       --btn-border-color: var(--color-ink-medium);
       --input-background: var(--color-canvas);

app/assets/stylesheets/popup.css

@@ -45,11 +45,23 @@
   }
 
   /* Hide lists when all the items within are hidden */
-  .popup__section {
+  /* .popup__section {
     &:has(.popup__section-title:only-child),
     &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
       display: none;
     }
+  } */
+
+  .popup__section {
+    .popup__section-title {
+      background: orange;
+    }
+
+    &[open] {
+      .popup__section-title {
+        background: lime;
+      }
+    }
   }
 
   .popup__section-title {

app/helpers/filters_helper.rb

@@ -36,7 +36,7 @@ module FiltersHelper
   end
 
   def collapsible_nav_section(title, &block)
-    tag.details class: "popup__section", data: { controller: "nav-section-expander", action: "toggle->nav-section-expander#toggle", nav_section_expander_key_value: title.parameterize }, open: true do
+    tag.details class: "popup__section", data: { controller: "nav-section-expander", action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true do
       concat(tag.summary(class: "popup__section-title") do
         concat title
         concat icon_tag "caret-down"

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

@@ -1,21 +1,51 @@
 import { Controller } from "@hotwired/stimulus"
 
+// TODO: roll up this controller to one level; remove from sections
+// This will involve using events to select the sections when they're clicked
+
 export default class extends Controller {
   static values = { key: String }
+  static targets = [ "input" ]
 
   connect() {
     this.#restoreToggle()
   }
 
   toggle() {
-    if (this.element.open) {
-      localStorage.removeItem(this.#localStorageKey)
+    console.log(this.element)
+    if (this.element.hasAttribute("data-ignore")) {
+      // console.log("Don't save it!")
     } else {
-      localStorage.setItem(this.#localStorageKey, this.keyValue)
+      // console.log("Save it!")
+      if (this.element.open) {
+        localStorage.removeItem(this.#localStorageKey)
+      } else {
+        localStorage.setItem(this.#localStorageKey, this.keyValue)
+      }
+    }
+  }
+
+  // OK, here's the behavior we want:
+  // Open the dialog, and the sections are in various states of collapsed/open.
+  // When you filter, we open them all.
+  // When the filter is empty, we need to go back to the saved state.
+  showAll() {
+    console.log(this.element)
+    // When filtering, we open everything and don't save to local storage.
+    // When the filter is cleared, we restore toggles
+    if (this.inputTarget.value) {
+      for (const section of this.#sections) {
+        section.setAttribute("data-ignore", true)
+        section.setAttribute("open", true)
+      }
+    } else {
+      // UGH! This works in the context of the controller on the section, not from the birds-eye view of the details el.
+      this.#restoreToggle()
     }
   }
 
   #restoreToggle() {
+    // console.log("RESTORE TOGGLE")
     const isCollapsed = localStorage.getItem(this.#localStorageKey) != null
     if (isCollapsed) this.element.open = false
   }
@@ -23,4 +53,8 @@ export default class extends Controller {
   get #localStorageKey() {
     return this.keyValue
   }
+
+  get #sections() {
+    return this.element.querySelectorAll(":scope details:not([open])")
+  }
 }

app/views/filters/_menu.html.erb

@@ -3,8 +3,8 @@
 
   <%= tag.dialog class: "fizzy-menu filter popup popup--animated panel margin-block-start-half",
         data: {
-              action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter",
-              controller: "filter navigable-list",
+              action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset filter:changed->nav-section-expander#showAll toggle->filter#filter",
+              controller: "filter navigable-list nav-section-expander",
               dialog_target: "dialog",
               navigable_list_focus_on_selection_value: false,
               navigable_list_actionable_items_value: true } do %>

app/views/my/menus/show.html.erb

@@ -12,6 +12,7 @@
           data: {
                 "1p-ignore": "true",
                 filter_target: "input",
+                nav_section_expander_target: "input",
                 navigable_list_target: "input",
                 action: "input->filter#filter" } %>
     <button class="fizzy-menu__close btn borderless txt-small" data-action="dialog#close">