Maybe/app/views/account/holdings/index.html.erb

<%= turbo_frame_tag dom_id(@account, "holdings") do %>
  <div class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
    <div class="flex items-center justify-between">
      <%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
      <%= link_to new_account_trade_path(@account),
                  id: dom_id(@account, "new_trade"),
                  data: { turbo_frame: :modal },
                  class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 p-2 rounded-lg" do %>
        <%= lucide_icon("plus", class: "w-5 h-5 text-gray-900") %>
        <%= tag.span t(".new_holding"), class: "text-sm" %>
      <% end %>
    </div>

    <div class="rounded-xl bg-gray-25 p-1">
      <div class="grid grid-cols-12 items-center uppercase text-xs font-medium text-gray-500 px-4 py-2">
        <%= tag.p t(".name"), class: "col-span-4" %>
        <%= tag.p t(".weight"), class: "col-span-2 justify-self-end" %>
        <%= tag.p t(".cost"), class: "col-span-2 justify-self-end" %>
        <%= tag.p t(".holdings"), class: "col-span-2 justify-self-end" %>
        <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
      </div>

      <div class="rounded-lg bg-white border-alpha-black-25 shadow-xs">
        <% if @holdings.any? %>
          <%= render partial: "account/holdings/holding", collection: @holdings, spacer_template: "ruler" %>
        <% elsif @account.needs_sync? || true %>
          <div class="flex flex-col justify-center items-center pt-4 pb-8">
            <p class="text-gray-500 p-4"><%= t(".needs_sync") %></p>
            <%= button_to "Sync holding prices", sync_account_path(@account), class: "bg-gray-900 text-white text-sm rounded-lg px-3 py-2" %>
          </div>
        <% else %>
          <p class="text-gray-500 text-sm p-4"><%= t(".no_holdings") %></p>
        <% end %>
      </div>
    </div>
  </div>
<% end %>