From 2cfd431554bc2c1d118ca42ab32b09ed4f35f72b Mon Sep 17 00:00:00 2001
From: Alessio Cappa <alessiocappa26@gmail.com>
Date: Sat, 13 Dec 2025 13:43:21 +0100
Subject: [PATCH] fix: Add multi-select toggle also in activities page. Make JS
 controller compatible also in this view.

---
 .../UI/account/activity_date.html.erb         |  7 +++++--
 .../UI/account/activity_feed.html.erb         | 20 +++++++++++++++----
 .../controllers/checkbox_toggle_controller.js |  2 +-
 app/views/accounts/show/_activity.html.erb    |  9 ++++++---
 app/views/entries/_selection_bar.html.erb     |  2 +-
 app/views/valuations/_valuation.html.erb      |  4 ++--
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/app/components/UI/account/activity_date.html.erb b/app/components/UI/account/activity_date.html.erb
index 6efa7e967..672c6d77c 100644
--- a/app/components/UI/account/activity_date.html.erb
+++ b/app/components/UI/account/activity_date.html.erb
@@ -4,9 +4,12 @@
       <div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
         <div class="flex pl-0.5 items-center gap-4">
           <%= check_box_tag "#{date}_entries_selection",
-                          class: ["checkbox checkbox--light", "hidden": entries.size == 0],
+                          class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0],
                           id: "selection_entry_#{date}",
-                          data: { action: "bulk-select#toggleGroupSelection" } %>
+                          data: { 
+                            action: "bulk-select#toggleGroupSelection",
+                            checkbox_toggle_target: "selectionEntry"
+                          } %>
 
           <p class="uppercase space-x-1.5">
             <%= tag.span I18n.l(date, format: :long) %>
diff --git a/app/components/UI/account/activity_feed.html.erb b/app/components/UI/account/activity_feed.html.erb
index dd9528430..82d164f9c 100644
--- a/app/components/UI/account/activity_feed.html.erb
+++ b/app/components/UI/account/activity_feed.html.erb
@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(account, "entries") do %>
-  <div class="bg-container p-5 shadow-border-xs rounded-xl">
+  <div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
     <div class="flex items-center justify-between mb-4" data-testid="activity-menu">
       <%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>
 
@@ -46,8 +46,17 @@
                             "data-auto-submit-form-target": "auto" %>
             </div>
           </div>
-        </div>
       <% end %>
+      <%= button_tag type: "button",
+            id: "toggle-checkboxes-button",
+            class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
+            data: {
+              action: "click->checkbox-toggle#toggle",
+              checkbox_toggle_target: "toggleButton"
+            } do %>
+            <%= helpers.icon("list-todo") %>
+        <% end %>
+      </div>
     </div>
 
     <% if activity_dates.empty? %>
@@ -66,8 +75,11 @@
         <div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
           <div class="pl-0.5 col-span-8 flex items-center gap-4">
             <%= check_box_tag "selection_entry",
-                              class: "checkbox checkbox--light",
-                              data: { action: "bulk-select#togglePageSelection" } %>
+                              class: "checkbox checkbox--light hidden lg:block",
+                              data: { 
+                                action: "bulk-select#togglePageSelection",
+                                checkbox_toggle_target: "selectionEntry"
+                              } %>
             <%= tag.p t("accounts.show.activity.date") %>
           </div>
 
diff --git a/app/javascript/controllers/checkbox_toggle_controller.js b/app/javascript/controllers/checkbox_toggle_controller.js
index e4f88dfc6..04bb96b9d 100644
--- a/app/javascript/controllers/checkbox_toggle_controller.js
+++ b/app/javascript/controllers/checkbox_toggle_controller.js
@@ -15,7 +15,7 @@ export default class extends Controller {
     })
 
     if (!shouldShow) {
-      const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']");
+      const bulkSelectElement = document.querySelector("[data-controller~='bulk-select']");
       if (bulkSelectElement) {
         const bulkSelectController = this.application.getControllerForElementAndIdentifier(
           bulkSelectElement,
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index ce9e74cd8..cab1760e0 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -55,7 +55,7 @@
     <% else %>
       <%= tag.div id: dom_id(@account, "entries_bulk_select"),
                 data: {
-                  controller: "bulk-select",
+                  controller: "bulk-select checkbox-toggle",
                   bulk_select_singular_label_value: t(".entry"),
                   bulk_select_plural_label_value: t(".entries")
                 } do %>
@@ -66,8 +66,11 @@
         <div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
           <div class="pl-0.5 col-span-8 flex items-center gap-4">
             <%= check_box_tag "selection_entry",
-                              class: "checkbox checkbox--light",
-                              data: { action: "bulk-select#togglePageSelection" } %>
+                              class: "checkbox checkbox--light checkbox checkbox--light hidden lg:block",
+                              data: { 
+                                action: "bulk-select#togglePageSelection",
+                                checkbox_toggle_target: "selectionEntry"
+                              } %>
             <p><%= t(".date") %></p>
           </div>
           <%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>
diff --git a/app/views/entries/_selection_bar.html.erb b/app/views/entries/_selection_bar.html.erb
index 48648c2a4..4c7d8d48b 100644
--- a/app/views/entries/_selection_bar.html.erb
+++ b/app/views/entries/_selection_bar.html.erb
@@ -1,4 +1,4 @@
-<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary w-[420px] py-1.5">
+<div class="fixed bottom-30 md:bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
   <div class="flex items-center gap-2">
     <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>
 
diff --git a/app/views/valuations/_valuation.html.erb b/app/views/valuations/_valuation.html.erb
index 9bb41ce11..4fbff9cc6 100644
--- a/app/views/valuations/_valuation.html.erb
+++ b/app/views/valuations/_valuation.html.erb
@@ -10,8 +10,8 @@
     <div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
       <div class="col-span-8 flex items-center gap-4">
         <%= check_box_tag dom_id(entry, "selection"),
-                        class: "checkbox checkbox--light",
-                        data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
+                        class: "checkbox checkbox--light hidden lg:block",
+                        data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection", checkbox_toggle_target: "selectionEntry" } %>
 
         <div class="flex items-center gap-3">
           <%= render DS::FilledIcon.new(icon: icon, size: "sm", hex_color: color, rounded: true) %>