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

Nav filter handle collapsed sections

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

@@ -46,7 +46,8 @@
 
   /* Hide lists when all the items within are hidden */
   .popup__section {
-    &:has(.popup__section-title:only-child),
+    &:not(:has(.popup__list)),
+    &:not(:has(.popup__list > *)),
     &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
       display: none;
     }

app/helpers/filters_helper.rb

@@ -35,8 +35,8 @@ module FiltersHelper
     }, &block
   end
 
-  def filter_collapsible_section(title, &block)
-    tag.details class: "popup__section", open: true do
+  def collapsible_nav_section(title, &block)
+    tag.details class: "popup__section", data: { 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

@@ -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")
+  }
+}

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#showWhileFiltering 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/filters/menu/_collections.html.erb

@@ -2,7 +2,7 @@
 <%= form_with url: user_filtering.self_filter_path(script_name: Account.sole.slug), method: :get, class: "display-contents",
       data: { controller: "form" } do |form| %>
   <% if user_filtering.collections.any? %>
-    <%= filter_collapsible_section "Collections" do %>
+    <%= collapsible_nav_section "Collections" do %>
       <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %>
       <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %>
     <% end %>

app/views/filters/menu/_custom.html.erb

@@ -1,4 +1,4 @@
-<%= filter_collapsible_section "Saved filters" do %>
+<%= collapsible_nav_section "Saved filters" do %>
   <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %>
     <%= render "filters/menu/custom/create" %>
     <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %>

app/views/filters/menu/_places.html.erb

@@ -1,4 +1,4 @@
-<%= filter_collapsible_section "Jump to…" do %>
+<%= collapsible_nav_section "Jump to…" do %>
   <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %>
   <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %>
   <%= filter_place_menu_item notifications_path, "Notifications", "bell" %>

app/views/filters/menu/_tags.html.erb

@@ -1,3 +1,3 @@
-<%= filter_collapsible_section "Tags" do %>
+<%= collapsible_nav_section "Tags" do %>
   <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %>
 <% end %>

app/views/filters/menu/_users.html.erb

@@ -1,3 +1,3 @@
-<%= filter_collapsible_section "People" do %>
+<%= collapsible_nav_section "People" do %>
   <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %>
 <% end %>

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">