Hide filters by default on mobile

app/assets/images/funnel.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 0L1.00002 0C0.194222 0 -0.283458 0.955359 0.200023 1.6L9.00002 13.423V22C9.01178 23.585 10.9006 24.5769 12.2 23.6L14.2 22.1C14.696 21.7267 14.9989 21.1208 15 20.5V13.423L23.8 1.6C24.2835 0.955343 23.8058 2.70383e-05 23 0Z" fill="black"/></svg>

app/assets/stylesheets/expandable.css

@@ -0,0 +1,13 @@
+@layer components {
+  .expandable-on-native {
+    body:not([data-platform~=native]) & {
+      &::details-content {
+        display: contents;
+      }
+
+      summary {
+        display: none;
+      }
+    }
+  }
+}

app/javascript/controllers/expandable_on_native_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { isNative } from "helpers/platform_helpers"
+
+export default class extends Controller {
+  static get shouldLoad() {
+    return isNative()
+  }
+
+  static values = { autoExpandSelector: String }
+
+  connect() {
+    if (this.hasAutoExpandSelectorValue && this.element.querySelector(this.autoExpandSelectorValue)) {
+      this.element.open = true
+    }
+  }
+}

app/javascript/helpers/platform_helpers.js

@@ -13,3 +13,7 @@ export function isAndroid() {
 export function isMobile() {
   return isIos() || isAndroid()
 }
+
+export function isNative() {
+  return /Hotwire Native/.test(navigator.userAgent)
+}

app/views/filters/_settings.html.erb

@@ -1,29 +1,35 @@
-<%= tag.aside \
+<%= tag.details class: "expandable-on-native",
-      class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
       data: {
-        controller: "toggle-enable toggle-class filter-settings dialog-manager",
+        controller: "expandable-on-native",
-        toggle_class_toggle_class: "filters--expanded",
+        expandable_on_native_auto_expand_selector_value: "[data-filter-show=true]" } do %>
-        filter_settings_filters_set_class: "filters--has-filters-set",
+    <%= tag.summary "Toggle filters", class: "btn btn--plain margin-block-end", data: { bridge__buttons_target: "button", bridge_title: "Toggle filters", bridge_icon_url: bridge_icon("funnel") } %>
-        filter_settings_no_filtering_url_value: no_filtering_url,
+    <%= tag.aside \
-        filter_settings_refresh_url_value: settings_refresh_path,
+          class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
-        filter_settings_cards_url_value: cards_path,
+          data: {
-        turbo_permanent: true } do %>
+            controller: "toggle-enable toggle-class filter-settings dialog-manager",
-  <%= form_with url: filter_url, method: :get, class: "display-contents", data: {
+            toggle_class_toggle_class: "filters--expanded",
-        controller: "form",
+            filter_settings_filters_set_class: "filters--has-filters-set",
-        turbo_frame: "cards_container",
+            filter_settings_no_filtering_url_value: no_filtering_url,
-        filter_settings_target: "form",
+            filter_settings_refresh_url_value: settings_refresh_path,
-        action: "turbo:submit-end->filter-settings#resetIfNoFiltering",
+            filter_settings_cards_url_value: cards_path,
-        turbo_action: "advance" } do |form| %>
+            turbo_permanent: true } do %>
-    <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
+      <%= form_with url: filter_url, method: :get, class: "display-contents", data: {
+            controller: "form",
+            turbo_frame: "cards_container",
+            filter_settings_target: "form",
+            action: "turbo:submit-end->filter-settings#resetIfNoFiltering",
+            turbo_action: "advance" } do |form| %>
+        <%= hidden_field_tag :expand_all, true, disabled: !user_filtering.expanded?, data: { toggle_enable_target: "element" } %>
 
-    <%= yield form if block_given? %>
-
-      <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
         <%= yield form if block_given? %>
-      <% end %>
-      <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %>
 
-      <%= render "filters/settings/toggle", user_filtering: user_filtering %>
+          <%= render "filters/settings/terms", filter: user_filtering.filter, form: form do %>
-  <% end %>
+            <%= yield form if block_given? %>
-  <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %>
+          <% end %>
+          <%= render "filters/settings/controls", user_filtering: user_filtering, form: form %>
+
+          <%= render "filters/settings/toggle", user_filtering: user_filtering %>
+      <% end %>
+      <%= render "filters/settings/manage", user_filtering: user_filtering, no_filtering_url: no_filtering_url %>
+    <% end %>
 <% end %>