Maybe/app/views/plaid_items/_plaid_item.html.erb

<%# locals: (plaid_item:) %>

<%= tag.div id: dom_id(plaid_item) do %>
  <details open class="group bg-white p-4 shadow-border-xs rounded-xl">
    <summary class="flex items-center justify-between gap-2 focus-visible:outline-hidden">
      <div class="flex items-center gap-2">
        <%= lucide_icon "chevron-right", class: "group-open:transform group-open:rotate-90 text-secondary w-5" %>

        <div class="flex items-center justify-center h-8 w-8 bg-blue-600/10 rounded-full bg-black/5">
          <% if plaid_item.logo.attached? %>
            <%= image_tag plaid_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
          <% else %>
            <div class="flex items-center justify-center">
              <%= tag.p plaid_item.name.first.upcase, class: "text-blue-600 text-xs font-medium" %>
            </div>
          <% end %>
        </div>

        <div class="pl-1 text-sm">
          <div class="flex items-center gap-2">
            <%= tag.p plaid_item.name, class: "font-medium text-primary" %>
            <% if plaid_item.scheduled_for_deletion? %>
              <p class="text-red-500 text-sm animate-pulse">(deletion in progress...)</p>
            <% end %>
          </div>
          <% if plaid_item.syncing? %>
            <div class="text-secondary flex items-center gap-1">
              <%= lucide_icon "loader", class: "w-4 h-4 animate-pulse" %>
              <%= tag.span t(".syncing") %>
            </div>
          <% elsif plaid_item.requires_update? %>
            <div class="text-amber-500 flex items-center gap-1">
              <%= lucide_icon "alert-triangle", class: "w-4 h-4" %>
              <%= tag.span t(".requires_update") %>
            </div>
          <% elsif plaid_item.sync_error.present? %>
            <div class="text-secondary flex items-center gap-1">
              <%= lucide_icon "alert-circle", class: "w-4 h-4 text-red-500" %>
              <%= tag.span t(".error"), class: "text-red-500" %>
            </div>
          <% else %>
            <p class="text-secondary">
              <%= plaid_item.last_synced_at ? t(".status", timestamp: time_ago_in_words(plaid_item.last_synced_at)) : t(".status_never") %>
            </p>
          <% end %>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <% if plaid_item.requires_update? %>
          <% begin %>
            <% link_token = plaid_item.get_update_link_token(webhooks_url: plaid_webhooks_url(plaid_item.plaid_region), redirect_url: accounts_url) %>
            <button
              data-controller="plaid"
              data-action="plaid#open"
              data-plaid-region-value="<%= plaid_item.plaid_region %>"
              data-plaid-link-token-value="<%= link_token %>"
              data-plaid-is-update-value="true"
              data-plaid-item-id-value="<%= plaid_item.id %>"
              class="btn btn--secondary flex items-center gap-2">
              <%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
              <%= tag.span t(".update") %>
            </button>
            <% rescue PlaidItem::PlaidConnectionLostError %>
            <div class="flex flex-col gap-2">
              <div class="text-amber-500 flex items-center gap-1">
                <%= lucide_icon "alert-triangle", class: "w-4 h-4" %>
                <%= tag.span t(".connection_lost") %>
              </div>
              <p class="text-sm text-secondary"><%= t(".connection_lost_description") %></p>
              <div class="flex items-center gap-2">
                <%= button_to plaid_item_path(plaid_item),
                          method: :delete,
                          class: "btn btn--danger flex items-center gap-2",
                          data: {
                            turbo_confirm: {
                              title: t(".confirm_title"),
                              body: t(".confirm_body"),
                              accept: t(".confirm_accept")
                            }
                          } do %>
                  <%= lucide_icon "trash-2", class: "w-4 h-4" %>
                  <%= tag.span t(".delete") %>
                <% end %>
                <%= link_to new_account_path, class: "btn btn--secondary flex items-center gap-2" do %>
                  <%= lucide_icon "plus", class: "w-4 h-4" %>
                  <%= tag.span t(".add_new") %>
                <% end %>
              </div>
            </div>
          <% end %>
        <% else %>
          <%= button_to sync_plaid_item_path(plaid_item), disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?, class: "disabled:text-subdued text-primary flex hover:text-gray-800 items-center text-sm font-medium hover:underline" do %>
            <%= lucide_icon "refresh-cw", class: "w-4 h-4" %>
          <% end %>
        <% end %>

        <%= contextual_menu do %>
          <div class="w-48 p-1 text-sm leading-6 text-primary bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
            <%= button_to plaid_item_path(plaid_item),
                      method: :delete,
                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
                      disabled: plaid_item.syncing? || plaid_item.scheduled_for_deletion?,
                      data: {
                        turbo_confirm: {
                          title: t(".confirm_title"),
                          body: t(".confirm_body"),
                          accept: t(".confirm_accept")
                        }
                      } do %>
              <%= lucide_icon "trash-2", class: "w-5 h-5" %>

              <span><%= t(".delete") %></span>
            <% end %>
          </div>
        <% end %>
      </div>
    </summary>

    <% unless plaid_item.scheduled_for_deletion? %>
      <div class="space-y-4 mt-4">
        <% if plaid_item.accounts.any? %>
          <%= render "accounts/index/account_groups", accounts: plaid_item.accounts %>
        <% else %>
          <div class="p-4 flex flex-col gap-3 items-center justify-center">
            <p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
            <p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
          </div>
        <% end %>
      </div>
    <% end %>
  </details>
<% end %>