Add inline category selection (#541)

* Implement inline category selection

* Add turbo frame to refresh updated transaction

* Improve styles

* Fix category assignment

* Reorganize code

* Revert event propagation

* Remove unused frames

* Make only the transaction name clickable

* Add custom scrollbar class

app/views/transactions/_category_dropdown.html.erb

@@ -0,0 +1,42 @@
+<%# locals: (transaction:) %>
+<div class="relative" data-controller="dropdown">
+  <div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu">
+    <%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
+  </div>
+  <div class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default" data-dropdown-target="menu">
+    <div class="w-64 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+      <div class="flex flex-col">
+        <div class="grow p-1.5 cursor-not-allowed">
+          <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
+            <input placeholder="Search" class="placeholder:text-sm placeholder:text-gray-500 h-10 relative pl-10 w-full border-none rounded-lg cursor-not-allowed" disabled/>
+            <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
+          </div>
+        </div>
+        <%= form_with model: transaction, namespace: dom_id(transaction), html: { data: { controller: "auto-submit-form" }, class: "flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar" } do |form| %>
+          <% Current.family.transaction_categories.each do |category| %>
+            <% is_selected = (!transaction.category.nil? and category.id == transaction.category.id) %>
+            <div class="flex items-center <%= class_names("bg-gray-25": is_selected) %> hover:bg-gray-25 border-none rounded-lg px-2 py-1 group">
+              <%= form.radio_button :category_id, category.id, class: "hidden" %>
+              <%= label dom_id(transaction), :transaction_category_id, value: category.id, class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
+                <span class="w-5 h-5">
+                  <%= lucide_icon("check", class: "w-5 h-5 text-gray-500") if is_selected %>
+                </span>
+                <%= render partial: "shared/category_badge", locals: { name: category.name, color: category.color } %>
+              <% end %>
+              <button class="ml-auto flex items-center justify-center hover:bg-gray-50 w-8 h-8 rounded-lg invisible group-hover:visible cursor-not-allowed" type="button" disabled>
+                <%= lucide_icon("more-horizontal", class: "w-5 h-5 text-gray-500") %>
+              </button>
+            </div>
+          <% end %>
+        <% end %>
+        <hr/>
+        <div class="p-1.5 w-full">
+          <button class="cursor-not-allowed flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" disabled>
+            <%= lucide_icon("plus", class: "w-5 h-5") %>
+            Add new
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/transactions/_transaction.html.erb

@@ -1,7 +1,12 @@
-<%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "text-gray-900 flex items-center gap-6 py-4 text-sm font-medium hover:bg-gray-50 px-4", id: dom_id(transaction) do %>
-  <div class="w-96 flex items-center gap-2">
-    <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600"><%= transaction.name[0].upcase %></div>
-    <p class="text-gray-900"><%= transaction.name %></p>
+<%= turbo_frame_tag dom_id(transaction), class:"text-gray-900 flex items-center gap-6 py-4 text-sm font-medium px-4" do %>
+  <%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "group", id: dom_id(transaction) do %>
+    <div class="w-96 flex items-center gap-2">
+      <div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600"><%= transaction.name[0].upcase %></div>
+      <p class="text-gray-900 group-hover:underline group-hover:text-gray-800"><%= transaction.name %></p>
+    </div>
+  <% end %>
+  <div class="w-48">
+    <%= render partial: "transactions/category_dropdown", locals: { transaction: } %>
   </div>
   <div>
     <p><%= transaction.account.name %></p>

app/views/transactions/index.html.erb

@@ -50,7 +50,7 @@
         </div>
         <div>
           <%= form.select :date, options_for_select([['All', 'all'], ['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"]], selected: params.dig(:q, :date)), {}, { class: "block h-full w-full border border-gray-200 rounded-lg text-sm py-2 pr-8 pl-2", "data-transactions-search-target": "date" } %>
-          
+
           <!-- Hidden fields for date range -->
           <%= form.hidden_field :date_gteq, value: '', "data-transactions-search-target": "dateGteq" %>
           <%= form.hidden_field :date_lteq, value: '', "data-transactions-search-target": "dateLteq" %>
@@ -68,12 +68,15 @@
           <div class="w-96">
             <p class="uppercase">transaction</p>
           </div>
+          <div class="w-48">
+            <p class="uppercase">category</p>
+          </div>
           <div class="grow uppercase flex justify-between items-center gap-5 text-xs font-medium text-gray-500">
             <p>account</p>
             <p>amount</p>
           </div>
         </div>
-        
+
         <div class="space-y-6">
           <% @transactions.group_by { |transaction| transaction.date }.each do |date, grouped_transactions| %>
             <%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>