Maybe/app/views/transactions/categories/_menu.html.erb

<%# locals: (transaction:) %>
<div class="relative" data-controller="menu">
  <button data-menu-target="button" class="flex">
    <%= render partial: "transactions/categories/badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
  </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="flex flex-col relative" data-controller="list-filter">
        <div class="grow p-1.5">
          <div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
            <input placeholder="Search" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
            <%= 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>
        <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
          <div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
            No categories found
          </div>
          <% sorted_categories = Current.family.transaction_categories.sort_by { |category| category.id == transaction.category_id ? 0 : 1 } %>
          <% sorted_categories.each do |category| %>
            <%= render partial: "transactions/categories/dropdown/row", locals: { category:, transaction: } %>
          <% end %>
        </div>
        <hr>
        <div data-controller="menu" class="relative p-1.5 w-full">
          <button data-menu-target="button" class="flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100">
            <%= lucide_icon("plus", class: "w-5 h-5") %>
            Add new
          </button>
          <div data-menu-target="content" class="hidden absolute bottom-14 right-0">
            <div class="w-96 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
              <%= render partial: "transactions/categories/dropdown/form" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>