Controlling the manage filter section with JS too

app/assets/stylesheets/filters.css

@@ -138,5 +138,13 @@
       display: block;
     }
   }
+
+  .filters__manage {
+    display: none;
+  }
+
+  .filters--has-filters-set .filters__manage {
+    display: inline-flex;
+  }
 }
 

app/javascript/controllers/combobox_controller.js

@@ -2,7 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = [ "label", "item", "hiddenField" ]
-  static values = { selectPropertyName: { type: String, default: "aria-checked" } }
+  static values = {
+    selectPropertyName: { type: String, default: "aria-checked" },
+    defaultValue: String
+  }
 
   connect() {
     this.labelTarget.textContent = this.#selectedLabel

app/javascript/controllers/filter_settings_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["filtersSet"]
+  static targets = ["field"]
+
+  connect() {
+    this.change()
+  }
+
+  change() {
+    this.#toggleFiltersSetClass()
+  }
+
+  #toggleFiltersSetClass(shouldAdd) {
+    this.element.classList.toggle(this.filtersSetClass, this.#hasFiltersSet)
+  }
+
+  get #hasFiltersSet() {
+    return this.fieldTargets.some(field => this.#isFieldSet(field))
+  }
+
+  #isFieldSet(field) {
+    const value = field.value?.trim()
+
+    if (!value) return false
+
+    const defaultValue = this.#defaultValueForField(field)
+    return defaultValue ? value !== defaultValue : true
+  }
+
+  #defaultValueForField(field) {
+    const comboboxContainer = field.closest("[data-combobox-default-value]")
+    return comboboxContainer?.dataset?.comboboxDefaultValue
+  }
+}

app/models/user/filtering.rb

@@ -3,7 +3,7 @@ class User::Filtering
 
   attr_reader :user, :filter, :expanded
 
-  delegate :as_params, :any?, :single_collection, to: :filter
+  delegate :as_params, :single_collection, to: :filter
   delegate :only_closed?, to: :filter
 
   def initialize(user, filter, expanded: false)

app/views/filters/_settings.html.erb

@@ -1,7 +1,7 @@
 <% cache user_filtering do %>
   <%= tag.aside id: "filter-settings",
         class: class_names("filters flex align-center gap-half justify-center center margin-block-end", { "filters--expanded": user_filtering.expanded? }),
-        data: { controller: "toggle-class", toggle_class_toggle_class: "filters--expanded" } do %>
+        data: { controller: "toggle-class filter-settings", toggle_class_toggle_class: "filters--expanded", filter_settings_filters_set_class: "filters--has-filters-set" } do %>
     <div class="flex-inline center align-center gap-half" data-controller="toggle-enable">
       <%= render "filters/settings/terms", user_filtering: user_filtering %>
       <%= render "filters/settings/controls", user_filtering: user_filtering %>

app/views/filters/settings/_indexed_by.html.erb

@@ -1,13 +1,13 @@
 <% filter = user_filtering.filter %>
 
 <%= tag.div class: class_names("quick-filter position-relative"),
-      data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance" } do %>
+      data: { controller: "dialog combobox", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside", filter_show: user_filtering.show_indexed_by?, turbo_action: "advance", combobox_default_value: "all" } do %>
     <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
       <span class="overflow-ellipsis" data-combobox-target="label">
       </span>
     </button>
 
-    <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField" } %>
+    <%= hidden_field_tag :indexed_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %>
 
     <%= filter_dialog "Filter by…" do %>
       <strong class="popup__title">Filter by…</strong>
@@ -15,7 +15,7 @@
       <ul class="popup__list" data-filter-target="list" role="listbox">
         <% Filter::INDEXES.each do |index| %>
           <%= tag.li class: "popup__item", data: { navigable_list_target: "item", combobox_target: "item", combobox_value: index, combobox_label: (index == "all" ? "Status" : index.humanize) }, role: "checkbox", aria: { checked: filter.indexed_by == index } do %>
-            <button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit">
+            <button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit filter-settings#change">
               <span class="overflow-ellipsis flex-item-grow"><%= index == "all" ? "Status" : index.humanize %></span>
               <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
             </button>

app/views/filters/settings/_manage.html.erb

@@ -1,6 +1,6 @@
 <% filter = user_filtering.filter %>
 
-<% if user_filtering.any? %>
+<div class="filters__manage center align-center gap-half">
   <% if filter.persisted? %>
     <%= button_to filter_path(filter), method: :delete, class: "btn txt-x-small btn--reversed", form_class: "inline" do %>
       <%= icon_tag "bookmark-outline" %>
@@ -18,4 +18,4 @@
     <%= icon_tag "close" %>
     <span class="for-screen-reader">Clear all</span>
   <% end %>
-<% end %>
+</div>

app/views/filters/settings/_sorted_by.html.erb

@@ -5,13 +5,14 @@
             controller: "dialog combobox",
             action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
             filter_show: user_filtering.show_sorted_by?,
-            turbo_action: "advance" } do %>
+            turbo_action: "advance",
+            combobox_default_value: "latest" } do %>
     <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
       <span class="overflow-ellipsis" data-combobox-target="label">
       </span>
     </button>
 
-    <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField" } %>
+    <%= hidden_field_tag :sorted_by, nil, data: { combobox_target: "hiddenField", filter_settings_target: "field" } %>
 
     <%= filter_dialog "Sort by…" do %>
       <strong class="popup__title">Sort by…</strong>
@@ -21,7 +22,7 @@
           <%= tag.li class: "popup__item", data: {
                 navigable_list_target: "item", combobox_target: "item", combobox_value: sort, combobox_label: sorted_by_label(sort) },
                 role: "checkbox", aria: { checked: filter.sorted_by == sort } do %>
-            <button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit">
+            <button type="button" class="btn popup__btn" data-action="dialog#close combobox#change form#submit filter-settings#change">
               <span class="overflow-ellipsis flex-item-grow"><%= sorted_by_label(sort) %></span>
               <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
             </button>