feat: Add toggle on mobile to show/hide checkboxes in transaction page

app/javascript/controllers/checkbox_toggle_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["selectionEntry", "toggleButton"]
+
+  toggle() {
+    const shouldShow = this.selectionEntryTargets[0].classList.contains("hidden")
+
+    this.selectionEntryTargets.forEach((el) => {
+      if (shouldShow) {
+        el.classList.remove("hidden")
+      } else {
+        el.classList.add("hidden")
+      }
+    })
+
+    if (!shouldShow) {
+      const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']");
+      if (bulkSelectElement) {
+        const bulkSelectController = this.application.getControllerForElementAndIdentifier(
+          bulkSelectElement,
+          "bulk-select"
+        );
+        if (bulkSelectController) {
+          bulkSelectController.deselectAll();
+        }
+      }
+    }
+
+    this.toggleButtonTarget.classList.toggle("bg-surface", shouldShow)
+  }
+}

app/views/entries/_entry_group.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) %>

app/views/transactions/_transaction.html.erb

@@ -9,11 +9,12 @@
       <div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8">
         <%= check_box_tag dom_id(entry, "selection"),
             disabled: transaction.transfer.present?,
-            class: "checkbox checkbox--light",
+            class: "checkbox checkbox--light hidden lg:block",
             data: {
               id: entry.id,
               "bulk-select-target": "row",
-              action: "bulk-select#toggleRowSelection"
+              action: "bulk-select#toggleRowSelection",
+              checkbox_toggle_target: "selectionEntry"
             } %>
 
         <div class="max-w-full">

app/views/transactions/index.html.erb

@@ -46,7 +46,7 @@
   <%= render "summary", totals: @search.totals %>
 
   <div id="transactions"
-       data-controller="bulk-select"
+       data-controller="bulk-select checkbox-toggle"
        data-bulk-select-singular-label-value="<%= t(".transaction") %>"
        data-bulk-select-plural-label-value="<%= t(".transactions") %>"
        class="flex flex-col bg-container rounded-xl shadow-border-xs p-4">

app/views/transactions/searches/_form.html.erb

@@ -30,5 +30,15 @@
         <%= render "transactions/searches/menu", form: form %>
       <% end %>
     <% 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 %>
+      <%= icon("list-todo") %>
+    <% end %>
   </div>
 <% end %>