pl_mail/templates/_partials/_account_list.html.twig

{% set _drawerClose = _drawerClose is defined ? _drawerClose : '' %}
{# '' for the desktop rail, '-drawer' for the mobile one. Both render this
   partial into the same document, so every id below has to carry it. #}
{% set _idSuffix = _idSuffix is defined ? _idSuffix : '' %}

{% for account in accounts %}
    {% set expanded = app.user.expandedAccountId == account.id %}
    {% set frameId  = 'account-folders-' ~ account.id ~ _idSuffix %}

    {# The frame id travels with the request too. Turbo matches the response
       against the id of the frame that asked, so a drawer frame fetching a
       reply that says `account-folders-20` finds nothing to swap and the
       folders never appear. #}
    <div data-controller="settings--account-expand"
         data-settings--account-expand-folders-url-value="{{ path('app_mail_account_folders', { account: account.id, frame: frameId }) }}"
         data-settings--account-expand-persist-url-value="{{ path('app_mail_sidebar_account_expanded') }}"
         data-settings--account-expand-account-value="{{ account.id }}"
         data-settings--account-expand-active-value="{{ expanded ? 'true' : 'false' }}">

        {# Two targets, not one. The name opens the account — everything in it,
           whatever it is labelled — and the chevron opens its label list. The
           whole row used to toggle, which left no way to ask for the account
           itself, and expanding was the only thing clicking an account could
           do. #}
        {# The row is the .nav-item, so an account gets the same pill as every
           other sidebar row — a rounded-lg box on this wrapper was the last
           square highlight left in the sidebar. It has to be the wrapper and
           not the anchor: on the anchor the pill stops before the chevron and
           cuts the row in half.

           Open or closed is rendered, not applied on connect — see
           App\Twig\SidebarRowStateExtension. #}
        {% set _href = path('app_mail_account', { account: account.id }) %}
        <div class="nav-item flex items-center transition-colors {{ sidebar_row_state(_href) }}">
            {# Named explicitly rather than by the address inside it: that span
               is `truncate`, and a name a screen reader reads as "kontakt@…"
               because CSS ran out of room is not a name. #}
            <a
                href="{{ _href }}"
                data-ui--sidebar-target="link"
                data-action="{{ _drawerClose }}"
                aria-label="{{ 'sidebar.accounts.open'|trans({ '%account%': account.displayAddress }) }}"
                title="{{ account.displayAddress }}"
                data-nav-tier="row"
                class="flex items-center gap-2 flex-1 min-w-0"
            >
                {# The account's IDENTITY colour, the same tone its rows wear in
                   the unified lists — so a coloured dot on a message and this
                   dot in the sidebar are the same account. It used to be a
                   green/grey status light, which made every connected account
                   identical and told the list dots apart from nothing. Inactive
                   accounts dim rather than change hue: still recognisably the
                   same account, visibly asleep.

                   Two things were wrong with it. It read `sortOrder`, so
                   reordering the accounts swapped their colours and the mark
                   stopped identifying anything; that is `colorIndex` now, which
                   is assigned once and never moves. And it had no name of any
                   kind, so an orange circle beside one address and a green one
                   beside another could not be interpreted at all — the obvious
                   reading being a status light, which it is not and never was.
                   Account health is where status is reported; this says which
                   account, and now says so out loud. The one piece of state it
                   does carry — switched off — is named too, and agrees with the
                   toggle in Settings that put it there. #}
                <span class="w-2 h-2 rounded-full flex-shrink-0 {{ account.colorIndex|account_color }}{{ account.isActive ? '' : ' opacity-40' }}"
                      role="img"
                      title="{{ account.isActive
                          ? 'sidebar.accounts.colour'|trans({ '%account%': account.displayAddress })
                          : 'sidebar.accounts.colour_disabled'|trans({ '%account%': account.displayAddress }) }}"
                      aria-label="{{ account.isActive
                          ? 'sidebar.accounts.colour'|trans({ '%account%': account.displayAddress })
                          : 'sidebar.accounts.colour_disabled'|trans({ '%account%': account.displayAddress }) }}"></span>
                <span class="truncate text-sm">{{ account.displayAddress }}</span>
            </a>
            {# aria-expanded, because this is a disclosure button and which way
               it will go is not visible to a screen reader — nor, since the
               open account moved into the user's settings, to anything else
               that has to know the state before pressing it. The controller
               keeps it in step.

               The account's address is IN the label. Every account renders one
               of these, so "Toggle account folders" three times over is three
               controls a screen-reader user cannot tell apart — the list of
               buttons on the page reads the same word three times and none of
               them says which mailbox it opens. #}
            <button
                type="button"
                aria-label="{{ 'sidebar.accounts.toggle'|trans({ '%account%': account.displayAddress }) }}"
                title="{{ 'sidebar.accounts.toggle'|trans({ '%account%': account.displayAddress }) }}"
                aria-expanded="{{ expanded ? 'true' : 'false' }}"
                aria-controls="{{ frameId }}"
                data-settings--account-expand-target="toggle"
                data-nav-tier="row"
                class="px-2 rounded-lg text-gray-400 cursor-pointer hover:text-ink"
                data-action="click->settings--account-expand#toggle"
            >
                <i data-settings--account-expand-target="chevron"
                   class="fa-solid fa-chevron-right text-xs shrink-0 transition-transform duration-150
                          {{ expanded ? 'rotate-90' : '' }}"></i>
            </button>
        </div>

        {# The expanded account's folders are rendered here, not fetched after
           the fact: the sidebar re-renders on every visit, and a list that
           arrives one request later is a list that visibly blinks on each
           navigation. Any other account still loads its frame on demand. #}
        <turbo-frame
            id="{{ frameId }}"
            data-settings--account-expand-target="frame"
            class="{{ expanded ? '' : 'hidden' }}"
        >
            {% if expanded %}
                {% include 'mail/_account_folder_rows.html.twig' with {
                    account: account,
                    labels: sidebarCounts.labelsForAccount(account),
                } only %}
            {% endif %}
        </turbo-frame>
    </div>
{% else %}
    <p class="px-3 text-sm text-ink-faint italic" data-nav-tier="row">{{ 'sidebar.accounts.none'|trans }}</p>
{% endfor %}