feat: Add category in mobile view

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

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>

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>

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

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

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>