From 36bec8e40cb82bb9d2d9ffe4bc8cf6c14999e828 Mon Sep 17 00:00:00 2001
From: Alessio Cappa <alessiocappa26@gmail.com>
Date: Sat, 13 Dec 2025 13:43:21 +0100
Subject: [PATCH] feat: Add category in mobile view

---
 .../transaction_categories_controller.rb      |  5 ++++
 app/views/categories/_badge_mobile.html.erb   | 14 +++++++++
 .../categories/_category_name_mobile.html.erb |  3 ++
 app/views/categories/_menu.html.erb           |  7 ++++-
 app/views/category/dropdowns/_row.html.erb    |  1 +
 app/views/transactions/_transaction.html.erb  | 30 ++++++++++++-------
 6 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 app/views/categories/_badge_mobile.html.erb
 create mode 100644 app/views/categories/_category_name_mobile.html.erb

diff --git a/app/controllers/transaction_categories_controller.rb b/app/controllers/transaction_categories_controller.rb
index dac6b5be0..6ca3aa70c 100644
--- a/app/controllers/transaction_categories_controller.rb
+++ b/app/controllers/transaction_categories_controller.rb
@@ -27,6 +27,11 @@ class TransactionCategoriesController < ApplicationController
             partial: "categories/menu",
             locals: { transaction: transaction }
           ),
+          turbo_stream.replace(
+            "category_name_mobile_#{transaction.id}",
+            partial: "categories/category_name_mobile",
+            locals: { transaction: transaction }
+          ),
           *flash_notification_stream_items
         ]
       end
diff --git a/app/views/categories/_badge_mobile.html.erb b/app/views/categories/_badge_mobile.html.erb
new file mode 100644
index 000000000..4f96f25b4
--- /dev/null
+++ b/app/views/categories/_badge_mobile.html.erb
@@ -0,0 +1,14 @@
+<%# locals: (category:) %>
+<% category ||= Category.uncategorized %>
+
+<div>
+  <span class="flex lg:hidden items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate focus-visible:outline-none focus-visible:ring-0 w-8 h-8 justify-center"
+      style="
+        background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
+        border-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
+        color: <%= category.color %>;">
+    <% if category.lucide_icon.present? %>
+      <%= icon category.lucide_icon, size: "sm", color: "current" %>
+    <% end %>
+  </span>
+</div>
\ No newline at end of file
diff --git a/app/views/categories/_category_name_mobile.html.erb b/app/views/categories/_category_name_mobile.html.erb
new file mode 100644
index 000000000..febe4b15a
--- /dev/null
+++ b/app/views/categories/_category_name_mobile.html.erb
@@ -0,0 +1,3 @@
+<span id="category_name_mobile_<%= transaction.id %>" class="text-secondary lg:hidden">
+  <%= transaction.category&.name %>
+</span>
diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb
index f7c74eaca..ad7dc4f5c 100644
--- a/app/views/categories/_menu.html.erb
+++ b/app/views/categories/_menu.html.erb
@@ -2,7 +2,12 @@
 
 <%= render DS::Menu.new(variant: "button") do |menu| %>
   <% menu.with_button do %>
-    <% render partial: "categories/badge", locals: { category: transaction.category } %>
+    <div class="hidden lg:flex">
+      <%= render partial: "categories/badge", locals: { category: transaction.category } %>
+    </div>
+    <div class="flex lg:hidden">
+      <%= render partial: "categories/badge_mobile", locals: { category: transaction.category } %>
+    </div>
   <% end %>
 
   <% menu.with_custom_content do %>
diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb
index 6e25d478f..0a4927dcd 100644
--- a/app/views/category/dropdowns/_row.html.erb
+++ b/app/views/category/dropdowns/_row.html.erb
@@ -13,6 +13,7 @@
         }
       ),
       method: :patch,
+      data: { turbo_frame: "category_dropdown" },
       class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %>
 
     <%= icon("check") if is_selected %>
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index 86dd0e193..2a0d70cdf 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -24,12 +24,17 @@
                   class: "w-6 h-6 rounded-full",
                   loading: "lazy" %>
             <% else %>
-              <%= render DS::FilledIcon.new(
-                variant: :text,
-                text: entry.name,
-                size: "sm",
-                rounded: true
-              ) %>
+              <div class="hidden lg:flex">
+                <%= render DS::FilledIcon.new(
+                  variant: :text,
+                  text: entry.name,
+                  size: "sm",
+                  rounded: true
+                ) %>
+              </div>
+              <div class="flex lg:hidden items-center gap-1 col-span-2">
+                <%= render "transactions/transaction_category", transaction: transaction %>
+              </div>
             <% end %>
 
             <div class="truncate">
@@ -72,16 +77,19 @@
                   </div>
                 </div>
 
-                <div class="text-secondary text-xs font-normal hidden lg:block">
+                <div class="text-secondary text-xs font-normal">
                   <% if transaction.transfer? %>
                     <span class="text-secondary">
                       <%= transaction.loan_payment? ? "Loan Payment" : "Transfer" %> • <%= entry.account.name %>
                     </span>
                   <% else %>
-                    <%= link_to entry.account.name,
-                        account_path(entry.account, tab: "transactions"),
-                        data: { turbo_frame: "_top" },
-                        class: "hover:underline" %>
+                    <span class="text-secondary hidden lg:inline">
+                      <%= link_to entry.account.name,
+                          account_path(entry.account, tab: "transactions"),
+                          data: { turbo_frame: "_top" },
+                          class: "hover:underline" %>
+                    </span>
+                    <%= render "categories/category_name_mobile", transaction: transaction %>
                   <% end %>
                 </div>
               </div>