Maybe/app/views/accounts/_accountable_group.html.erb

<%# locals: (account_group:) %>

<%= render DisclosureComponent.new(title: account_group.name, align: :left) do |disclosure| %>
  <% disclosure.with_summary_content do %>
    <div class="ml-auto text-right grow">
      <%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>

      <%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy" do %>
        <div class="flex items-center w-8 h-4 ml-auto">
          <div class="w-6 h-px bg-surface-inset"></div>
        </div>
      <% end %>
    </div>
  <% end %>

  <div class="space-y-1">
    <% account_group.accounts.each do |account| %>
      <%= link_to account_path(account), class: "block flex items-center gap-2 px-3 py-2 hover:bg-surface-hover", title: account.name do %>
        <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>

        <div class="min-w-0 grow">
          <%= tag.p account.name, class: "text-sm text-primary font-medium mb-0.5 truncate" %>
          <%= tag.p account.short_subtype_label, class: "text-sm text-secondary truncate" %>
        </div>

        <div class="ml-auto text-right grow h-10">
          <%= tag.p format_money(account.balance_money), class: "text-sm font-medium text-primary whitespace-nowrap" %>

          <%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy" do %>
            <div class="flex items-center w-8 h-5 ml-auto">
              <div class="w-6 h-px bg-surface-inset"></div>
            </div>
          <% end %>
        </div>
      <% end %>
    <% end %>
  </div>

  <%= render LinkComponent.new(
    href: new_polymorphic_path(account_group.key, step: "method_select"),
    text: "New #{account_group.name.downcase.singularize}",
    icon: "plus",
    full_width: true,
    variant: "ghost",
    frame: :modal,
    class: "justify-start"
  ) %>
<% end %>