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

<div class="space-y-4">
  <div class="flex justify-between items-center text-gray-900 font-medium">
    <h1 class="text-xl">Transactions</h1>
    <div class="flex items-center gap-5">
      <div class="flex items-center gap-2">
        <%= 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 transaction_categories_path,
                  class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
              <%= lucide_icon "tags", class: "w-5 h-5 text-gray-500" %>
              <span class="text-black"><%= t(".edit_categories") %></span>
            <% end %>
          </div>
        <% end %>

        <%= link_to new_transaction_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 %>
          <%= lucide_icon("plus", class: "w-5 h-5") %>
          <p>New transaction</p>
        <% end %>
      </div>
    </div>
  </div>
  <div>
    <%= render partial: "transactions/summary", locals: { totals: @totals } %>
  </div>
  <div id="transactions" class="bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4 space-y-4">
    <%= render partial: "transactions/search_form", locals: { q: @q } %>
    <%= render partial: "transactions/filters", locals: { filters: @filter_list } %>
    <%= render partial: "transactions/list", locals: { transactions: @transactions, pagy: @pagy } %>
  </div>
</div>