Maybe/app/views/categories/index.html.erb

<header class="flex items-center justify-between">
  <h1 class="text-primary text-xl font-medium"><%= t(".categories") %></h1>

  <div class="flex items-center gap-2">
    <%= contextual_menu do %>
      <%= contextual_menu_destructive_item "Delete all", destroy_all_categories_path, turbo_confirm: {
        title: "Delete all categories?",
        body: "All of your transactions will become uncategorized and this cannot be undone.",
        accept: "Delete all categories",
      } %>
    <% end %>

    <%= 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 %>
  </div>
</header>

<div class="bg-container shadow-border-xs rounded-xl p-4">
  <% if @categories.any? %>
    <div class="space-y-4">
      <% if @categories.incomes.any? %>
        <%= render "categories/category_list_group", title: t(".categories_incomes"), categories: @categories.incomes %>
      <% end %>

      <% if @categories.expenses.any? %>
        <%= render "categories/category_list_group", title: t(".categories_expenses"), categories: @categories.expenses %>
      <% end %>
    </div>
  <% else %>
    <div class="flex justify-center items-center py-20">
      <div class="text-center flex flex-col items-center max-w-[500px]">
        <p class="text-sm text-secondary 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 %>
</div>