Transactions & Activities pages improvements (#452)

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

* fix: Add multi-select toggle also in activities page. Make JS controller compatible also in this view.

* feat: Add category in mobile view

* feat: Add mobile layout for transaction categories

* feat: Add margin for pagination on mobile

* fix: Ensure category exists when displaying the name

* fix: Adjust mobile paddings

* fix: Display "uncategorized" label if no category is set

* fix: Expand transaction name/subtitle

* feat: Add merchant name on desktop view

* feat: Move merchant name before account name

* fix: Add class to hide merchant on mobile

* feat: Add merchant logo on mobile

* fix: add pointer-events-none to merchant image on mobile view

* feat: toggle header checkbox in transaction page when button is clicked

* Remove unnecessary CSS class

* Remove duplicate CSS class

* Remove wrong Enable Banking logo URL

* Update app/views/transactions/_transaction.html.erb

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>

* Revert "Update app/views/transactions/_transaction.html.erb"

This reverts commit 9766c50a1d.

* Add translation for Loan Payment/Transfer

* Apply review comments

* Add accessible name for toggle based on review comments

* Use border instead of border-1 class

* Apply review comments

* Missing l10n key

---------

Signed-off-by: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>

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) %>

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 px-3 py-4 lg:p-4 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,18 @@
                             "data-auto-submit-form-target": "auto" %>
             </div>
           </div>
-        </div>
       <% end %>
+      <%= button_tag type: "button",
+            id: "toggle-checkboxes-button",
+            aria: { label: t(".toggle_selection_checkboxes") },
+            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 +76,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>