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

<%# locals: (group:) -%>
<% type = Accountable.from_type(group.name) %>
<% if group && group.children.any? %>
  <details class="mb-1 text-sm group" data-controller="account-collapse" data-account-collapse-type-value="<%= type %>">
    <summary class="flex gap-4 px-3 py-2 items-center w-full rounded-[10px] font-medium hover:bg-gray-100 cursor-pointer">
      <%= lucide_icon("chevron-down", class: "hidden group-open:block text-gray-500 w-5 h-5") %>
      <%= lucide_icon("chevron-right", class: "group-open:hidden text-gray-500 w-5 h-5") %>
      <div class="text-left"><%= type.model_name.human %></div>
      <div class="ml-auto flex flex-col items-end">
        <p class="text-right"><%= format_money group.sum %></p>
        <div class="flex items-center gap-1">
          <%=
              tag.div(
                id: "#{group.name}_sparkline",
                class: "h-3 w-8 ml-auto",
                data: {
                  controller: "time-series-chart",
                  "time-series-chart-data-value": group.series.to_json,
                  "time-series-chart-stroke-width-value": 1,
                  "time-series-chart-use-labels-value": false,
                  "time-series-chart-use-tooltip-value": false
                }
              )
          %>
          <% styles = trend_styles(group.series.trend) %>
          <span class="text-xs <%= styles[:text_class] %>"><%= sprintf("%+.2f", group.series.trend.percent) %>%</span>
        </div>
      </div>
    </summary>
    <% group.children.sort_by(&:name).each do |account_value_node| %>
      <% account = account_value_node.original %>
      <%= link_to account_path(account), class: "flex items-center w-full gap-3 px-3 py-2 mb-1 hover:bg-gray-100 rounded-[10px]" do %>
        <%= render "accounts/logo", account: account, size: "sm" %>
        <div>
          <p class="font-medium"><%= account_value_node.name %></p>
          <% if account.subtype %>
            <p class="text-xs text-gray-500"><%= account.subtype&.humanize %></p>
          <% end %>
        </div>
        <div class="flex flex-col ml-auto font-medium text-right">
          <p><%= format_money account.balance_money %></p>
          <% unless account_value_node.series.trend.direction.flat? %>
            <div class="flex items-center gap-1">
              <%=
              tag.div(
                id: dom_id(account, :list_sparkline),
                class: "h-3 w-8 ml-auto",
                data: {
                  controller: "time-series-chart",
                  "time-series-chart-data-value": account_value_node.series.to_json,
                  "time-series-chart-stroke-width-value": 1,
                  "time-series-chart-use-labels-value": false,
                  "time-series-chart-use-tooltip-value": false
                }
              )
              %>
              <% styles = trend_styles(account_value_node.series.trend) %>
              <span class="text-xs <%= styles[:text_class] %>"><%= sprintf("%+.2f", account_value_node.series.trend.percent) %>%</span>
            </div>
          <% end %>
        </div>
      <% end %>
    <% end %>
    <%= link_to new_account_path(step: "method", type: type.name.demodulize), class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-gray-500 text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
      <%= lucide_icon("plus", class: "w-5 h-5") %>
      <%= t(".new_account", type: type.model_name.human.downcase) %>
    <% end %>
  </details>
<% end %>