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

<%# locals: (transaction:) %>
<div class="relative" data-controller="menu">
  <button data-menu-target="button cursor-pointer" class="flex">
    <%= render partial: "transactions/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="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 class="relative p-1.5 w-full">
          <%= link_to new_transaction_category_path(transaction_id: transaction),
                class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
                data: { turbo_frame: "modal" } do %>
            <%= lucide_icon "plus", class: "w-5 h-5" %>

            <%= t(".add_new") %>
          <% end %>

          <% if transaction.category %>
            <%= button_to transaction_path(transaction),
                  method: :patch,
                  params: { transaction: { category_id: nil } },
                  class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
              <%= lucide_icon "minus", class: "w-5 h-5" %>

              <%= t(".clear") %>
            <% end %>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>