From 1c0a01c17a8d858e9ad438e2fae89c27b18cff50 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Thu, 2 Oct 2025 10:12:43 +0200
Subject: [PATCH] Wire up filtering logic for the timeline

---
 .../multi_selection_combobox_controller.js    |  1 +
 app/views/events/index.html.erb               |  4 +-
 app/views/events/index/_filter.html.erb       | 67 ++++++++++---------
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/app/javascript/controllers/multi_selection_combobox_controller.js b/app/javascript/controllers/multi_selection_combobox_controller.js
index 70a853b2b..f67f1cbf0 100644
--- a/app/javascript/controllers/multi_selection_combobox_controller.js
+++ b/app/javascript/controllers/multi_selection_combobox_controller.js
@@ -91,6 +91,7 @@ export default class extends Controller {
   #addHiddenFields() {
     this.#selectedValues().forEach(value => {
       const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children
+      field.removeAttribute("id")
       field.value = value
       this.element.appendChild(field)
     })
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index aa5ce60c4..8dbd02eac 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -14,6 +14,8 @@
 <% end %>
 
 <div class="events" id="activity">
-  <%= render "events/day", day_timeline: @day_timeline %>
+  <%= turbo_frame_tag :events_container do %>
+    <%= render "events/day", day_timeline: @day_timeline %>
+  <% end %>
 </div>
 <%= event_next_page_link(@day_timeline.next_day) %>
diff --git a/app/views/events/index/_filter.html.erb b/app/views/events/index/_filter.html.erb
index f8419d337..f48ee4a6c 100644
--- a/app/views/events/index/_filter.html.erb
+++ b/app/views/events/index/_filter.html.erb
@@ -1,40 +1,43 @@
 <% filter = user_filtering.filter %>
 
-<%= tag.div class: "flex-inline position-relative",
-      data: {
-        controller: "dialog multi-selection-combobox",
-        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
-        filter_show: user_filtering.show_collections?,
-        multi_selection_combobox_no_selection_label_value: user_filtering.selected_collections_label,
-        multi_selection_combobox_label_prefix_value: "" } do %>
-    <button type="button" class="btn borderless btn--plain events__filter-select" data-action="click->dialog#toggle:stop">
-      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
-      </span>
-    </button>
+<%= form_with url: events_path,
+      method: :get, class: "flex-inline position-relative",
+      data: { controller: "form", turbo_frame: "cards_container", turbo_action: "advance" } do |form| %>
+  <%= tag.div class: "flex-inline position-relative quick-filter",
+        data: {
+          controller: "dialog multi-selection-combobox",
+          action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside",
+          filter_show: user_filtering.show_collections?,
+          multi_selection_combobox_no_selection_label_value: user_filtering.selected_collections_label } do %>
+        <button type="button" class="btn borderless btn--plain events__filter-select" data-action="click->dialog#toggle:stop">
+          <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
+          </span>
+        </button>
 
-    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
-      <%= hidden_field_tag "collection_ids[]", nil, data: { filter_settings_target: "field" } %>
-    </template>
+        <template data-multi-selection-combobox-target="hiddenFieldTemplate">
+          <%= hidden_field_tag "collection_ids[]", nil, data: { filter_settings_target: "field" } %>
+        </template>
 
-    <%= filter_dialog "Collection…" do %>
-      <strong class="popup__title">Collection…</strong>
+        <%= filter_dialog "Collection…" do %>
+          <strong class="popup__title">Collection…</strong>
 
-      <% if user_filtering.collections.many? %>
-        <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
-              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
-      <% end %>
-
-      <ul class="popup__list" data-filter-target="list" role="listbox">
-        <% user_filtering.collections.each do |collection| %>
-          <%= tag.li class: "popup__item", data: {
-                filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: collection.id, multi_selection_combobox_label: collection.name },
-                role: "checkbox", aria: { checked: filter.collections.include?(collection) } do %>
-            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
-              <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
-              <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
-            </button>
+          <% if user_filtering.collections.many? %>
+            <%= text_field_tag nil, nil, placeholder: "Filter…", class: "input input--transparent txt-small font-weight-normal", autofocus: true,
+                  type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", action: "input->filter#filter" } %>
           <% end %>
-        <% end %>
-      </ul>
+
+          <ul class="popup__list" data-filter-target="list" role="listbox">
+            <% user_filtering.collections.each do |collection| %>
+              <%= tag.li class: "popup__item", data: {
+                    filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: collection.id, multi_selection_combobox_label: collection.name },
+                    role: "checkbox", aria: { checked: filter.collections.include?(collection) } do %>
+                <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
+                  <span class="overflow-ellipsis flex-item-grow"><%= collection.name %></span>
+                  <%= icon_tag "check", class: "checked flex-item-justify-end", "aria-hidden": true %>
+                </button>
+              <% end %>
+            <% end %>
+          </ul>
     <% end %>
+  <% end %>
 <% end %>