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,4 +1,9 @@
-<%= tag.aside \
+<%= tag.details class: "expandable-on-native",
+      data: {
+        controller: "expandable-on-native",
+        expandable_on_native_auto_expand_selector_value: "[data-filter-show=true]" } do %>
+    <%= 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") } %>
+    <%= tag.aside \
           class: class_names("filters margin-block-end", { "filters--expanded": user_filtering.expanded? }),
           data: {
             controller: "toggle-enable toggle-class filter-settings dialog-manager",
@@ -26,4 +31,5 @@
           <%= 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 %>