Nested Categories (#1561)

* Prepare entry search for nested categories

* Subcategory implementation

* Remove caching for test stability

app/views/categories/_badge.html.erb

@@ -2,7 +2,7 @@
 <% category ||= null_category %>
 
 <div>
-  <span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border"
+  <span class="flex items-center gap-1 text-sm font-medium rounded-full px-1.5 py-1 border truncate"
         style="
           background-color: color-mix(in srgb, <%= category.color %> 5%, white);
           border-color: color-mix(in srgb, <%= category.color %> 30%, white);

app/views/categories/_category.html.erb

@@ -1,7 +1,11 @@
 <%# locals: (category:) %>
 
-<div id="<%= dom_id(category) %>" class="flex justify-between items-center p-4 bg-white">
+<div id="<%= dom_id(category) %>" class="flex justify-between items-center px-4 pb-4 <%= "pt-4" unless category.subcategory? %> <%= "pb-4" unless category.subcategories.any? %> bg-white">
   <div class="flex w-full items-center gap-2.5">
+    <% if category.subcategory? %>
+      <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-gray-400 ml-2" %>
+    <% end %>
+
     <%= render partial: "categories/badge", locals: { category: category } %>
   </div>
   <div class="justify-self-end">

app/views/categories/_form.html.erb

@@ -1,9 +1,12 @@
+<%# locals: (category:, categories:) %>
+
 <div data-controller="color-avatar">
   <%= styled_form_with model: category, class: "space-y-4", data: { turbo_frame: :_top } 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| %>
           <label class="relative">
@@ -12,8 +15,14 @@
           </label>
         <% end %>
       </div>
-      <div class="relative flex items-center border border-gray-200 rounded-lg">
-        <%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, data: { color_avatar_target: "name" } %>
+
+      <% if category.errors.any? %>
+        <%= render "shared/form_errors", model: category %>
+      <% end %>
+
+      <div class="space-y-2">
+        <%= f.text_field :name, placeholder: t(".placeholder"), required: true, autofocus: true, label: "Name", data: { color_avatar_target: "name" } %>
+        <%= f.select :parent_id, categories.pluck(:name, :id), { include_blank: "(unassigned)", label: "Parent category (optional)" } %>
       </div>
     </section>
 

app/views/categories/_menu.html.erb

@@ -5,7 +5,7 @@
     <%= render partial: "categories/badge", locals: { category: transaction.category } %>
   </button>
   <div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
-    <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="w-80 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
       <%= turbo_frame_tag "category_dropdown", src: category_dropdown_path(category_id: transaction.category_id, transaction_id: transaction.id), loading: :lazy do %>
         <div class="p-6 flex items-center justify-center">
           <p class="text-sm text-gray-500 animate-pulse"><%= t(".loading") %></p>

app/views/categories/edit.html.erb

@@ -1,3 +1,3 @@
 <%= modal_form_wrapper title: t(".edit") do %>
-  <%= render "form", category: @category %>
+  <%= render "form", category: @category, categories: @categories %>
 <% end %>

app/views/categories/index.html.erb

@@ -23,18 +23,32 @@
 
         <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" %>
+            <% Category::Group.for(@categories).each_with_index do |group, idx| %>
+              <%= render group.category %>
+
+              <% group.subcategories.each do |subcategory| %>
+                <%= render subcategory %>
+              <% end %>
+
+              <% unless idx == Category::Group.for(@categories).count - 1 %>
+                <%= render "categories/ruler" %>
+              <% end %>
+            <% end %>
           </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 class="text-center flex flex-col items-center max-w-[500px]">
+          <p class="text-sm text-gray-500 mb-4"><%= t(".empty") %></p>
+          <div class="flex items-center gap-2">
+            <%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--primary" %>
+
+            <%= link_to new_category_path, class: "btn btn--outline flex items-center gap-1", data: { turbo_frame: "modal" } do %>
+              <%= lucide_icon("plus", class: "w-5 h-5") %>
+              <span><%= t(".new") %></span>
+            <% end %>
+          </div>
         </div>
       </div>
     <% end %>

app/views/categories/new.html.erb

@@ -1,3 +1,3 @@
 <%= modal_form_wrapper title: t(".new_category") do %>
-  <%= render "form", category: @category %>
+  <%= render "form", category: @category, categories: @categories %>
 <% end %>