Function displayDirectoryTree

web/scripts/ragnar_modern.js:13337–13363

()

    tableHTML += '</tbody></table></div>';

    if (hasMore) {
        tableHTML += `
            <div class="mt-4">
                <button onclick="togglePwnNetworksExpansion()"
                        class="flex items-center justify-center w-full py-3 px-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-gray-300 hover:text-white">
                    <span id="pwn-networks-expand-text">Show ${hiddenItems.length} more networks</span>
                    <svg id="pwn-networks-expand-arrow" class="w-4 h-4 ml-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div id="pwn-networks-hidden" class="hidden mt-2">
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-700">
                            <tbody class="divide-y divide-gray-700">`;
        hiddenItems.forEach(net => { tableHTML += networkRowHTML(net); });
        tableHTML += '</tbody></table></div></div></div>';
    }
    tableHTML += '</div>';

    container.innerHTML = mobileHTML + tableHTML;
}

function togglePwnNetworksExpansion() {
    /* Toggle both desktop and mobile overflow sections */
    [['pwn-networks-hidden', 'pwn-networks-expand-text', 'pwn-networks-expand-arrow'],
     ['pwn-networks-hidden-m', 'pwn-networks-expand-text-m', 'pwn-networks-expand-arrow-m']
    ].forEach(([hiddenId, textId, arrowId]) => {
        const hidden = document.getElementById(hiddenId);
        const text = document.getElementById(textId);
        const arrow = document.getElementById(arrowId);