Categories, tags, merchants, and menus improvements (#1135)

app/views/categories/_badge.html.erb

@@ -1,10 +1,11 @@
 <%# locals: (category:) %>
 <% category ||= null_category %>
 
-<span class="border text-sm font-medium px-2.5 py-1 rounded-full content-center"
-  style="
-    background-color: color-mix(in srgb, <%= category.color %> 5%, white);
-    border-color: color-mix(in srgb, <%= category.color %> 10%, white);
-    color: <%= category.color %>;">
-  <%= category.name %>
-</span>
+<div>
+  <span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border border-alpha-black-25"
+        style="
+          background-color: color-mix(in srgb, <%= category.color %> 5%, white);
+          color: <%= category.color %>;">
+    <%= category.name %>
+  </span>
+</div>

app/views/categories/_category.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (category:) %>
+
+<div id="<%= dom_id(category) %>" class="flex justify-between items-center p-4 bg-white">
+  <div class="flex w-full items-center gap-2.5">
+    <%= render partial: "categories/badge", locals: { category: category } %>
+  </div>
+  <div class="justify-self-end">
+    <%= contextual_menu do %>
+      <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+        <%= contextual_menu_modal_action_item t(".edit"), edit_category_path(category) %>
+
+        <%= link_to new_category_deletion_path(category),
+              class: "flex items-center w-full rounded-lg text-red-600 hover:bg-red-50 py-2 px-3 gap-2",
+              data: { turbo_frame: :modal } do %>
+          <%= lucide_icon "trash-2", class: "shrink-0 w-5 h-5" %>
+          <span class="text-sm"><%= t(".delete") %></span>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/categories/_form.html.erb

@@ -1,38 +1,25 @@
-<%= styled_form_with model: category, data: { turbo: false } do |form| %>
-  <div class="flex flex-col space-y-4 w-96" data-controller="color-select" data-color-select-selection-value="<%= category.color %>">
-    <fieldset class="relative">
-      <span data-color-select-target="decoration" class="pointer-events-none absolute inset-y-3.5 left-3 flex items-center pl-1 block w-1 rounded-lg"></span>
-      <%= form.text_field :name,
-            value: category.name,
-            autofocus: "",
-            required: true,
-            placeholder: "Enter Category name",
-            class: "rounded-lg w-full focus:ring-black focus:border-transparent placeholder:text-gray-500 pl-6" %>
-    </fieldset>
-
-    <fieldset>
-      <%= form.hidden_field :color, data: { color_select_target: "input" } %>
-
-      <ul role="radiogroup" class="flex justify-between items-center py-2">
+<div data-controller="color-avatar">
+  <%= styled_form_with model: category, class: "space-y-4", data: { turbo: false } do |f| %>
+    <section class="space-y-4">
+      <div class="w-fit m-auto">
+        <%= render partial: "shared/color_avatar", locals: { name: category.name, color: category.color } %>
+      </div>
+      <div class="flex gap-2 items-center justify-center">
         <% Category::COLORS.each do |color| %>
-          <li tabindex="0"
-              role="radio"
-              data-action="click->color-select#select keydown.enter->color-select#select keydown.space->color-select#select"
-              data-value="<%= color %>"
-              class="flex shrink-0 justify-center items-center w-5 h-5 cursor-pointer hover:bg-gray-200 rounded-full">
-          </li>
+          <label class="relative">
+            <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-avatar#handleColorChange" } %>
+            <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
+          </label>
         <% end %>
-      </ul>
-    </fieldset>
+      </div>
+      <div class="relative flex items-center border border-gray-200 rounded-lg">
+        <%= f.text_field :name, placeholder: t(".placeholder"), class: "text-sm font-normal placeholder:text-gray-500 h-10 relative pl-3 w-full border-none rounded-lg", required: true, data: { color_avatar_target: "name" } %>
+      </div>
+    </section>
 
     <section>
       <%= hidden_field_tag :transaction_id, params[:transaction_id] %>
-
-      <% if category.persisted? %>
-        <%= form.submit t(".update") %>
-      <% else %>
-        <%= form.submit t(".create") %>
-      <% end %>
+      <%= f.submit %>
     </section>
-  </div>
-<% end %>
+  <% end %>
+</div>

app/views/categories/_row.html.erb

@@ -1,23 +0,0 @@
-<div class="flex justify-between mx-4 py-5 border-b last:border-b-0 border-alpha-black-50">
-  <%= render partial: "categories/badge", locals: { category: row } %>
-
-  <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= link_to edit_category_path(row),
-            class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
-
-        <span><%= t(".edit") %></span>
-      <% end %>
-
-      <%= link_to new_category_deletion_path(row),
-            class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-        <span><%= t(".delete") %></span>
-      <% end %>
-    </div>
-  <% end %>
-</div>

app/views/categories/_ruler.html.erb

@@ -0,0 +1,3 @@
+<div class="bg-white">
+  <div class="h-px bg-alpha-black-50 ml-4 mr-6"></div>
+</div>

app/views/categories/index.html.erb

@@ -1,24 +1,43 @@
 <% content_for :sidebar do %>
   <%= render "settings/nav" %>
 <% end %>
+
 <section class="space-y-4">
   <header class="flex items-center justify-between">
     <h1 class="text-gray-900 text-xl font-medium"><%= t(".categories") %></h1>
 
-    <%= link_to new_category_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2", data: { turbo_frame: :modal } do %>
+    <%= link_to new_category_path, class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
       <%= lucide_icon "plus", class: "w-5 h-5" %>
       <p><%= t(".new") %></p>
     <% end %>
   </header>
 
   <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
-    <div class="rounded-xl bg-gray-25 p-1">
-      <h2 class="uppercase px-4 py-2 text-gray-500 text-xs"><%= t(".categories") %> · <%= @categories.size %></h2>
+    <% if @categories.any? %>
+      <div class="rounded-xl bg-gray-25 space-y-1 p-1">
+        <div class="flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-gray-500 uppercase">
+          <p><%= t(".categories") %></p>
+          <span class="text-gray-400">&middot;</span>
+          <p><%= @categories.count %></p>
+        </div>
 
-      <div class="border border-alpha-gray-100 rounded-lg bg-white shadow-xs">
-        <%= render collection: @categories, partial: "categories/row" %>
+        <div class="border border-alpha-black-25 rounded-md bg-white shadow-xs">
+          <div class="overflow-hidden rounded-md">
+            <%= render partial: @categories, spacer_template: "categories/ruler" %>
+          </div>
+        </div>
       </div>
-    </div>
+    <% else %>
+      <div class="flex justify-center items-center py-20">
+        <div class="text-center flex flex-col items-center max-w-[300px]">
+          <p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".empty") %></p>
+          <%= link_to new_category_path, class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+            <%= lucide_icon("plus", class: "w-5 h-5") %>
+            <span><%= t(".new") %></span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
   </div>
 
   <footer class="flex justify-between gap-4">