xamxam/app/templates/admin/footer.php

<?php include APP_ROOT . '/templates/partials/flash-messages.php'; ?>

<!-- Fixed toast container (bottom-center, always visible) -->
<div id="toast-container" aria-live="polite"></div>

<?php foreach ($extraJs ?? [] as $js): ?>
<script src="<?= App::assetV($js) ?>"></script>
<?php endforeach; ?>
<?php if (!empty($extraJsInline)): ?>
<script><?= $extraJsInline ?></script>
<?php endif; ?>
<script src="/assets/js/htmx.min.js"></script>
<script>
(function () {
    var box = document.getElementById('toast-container');
    if (!box) return;

    // 1) Flash messages from hidden #admin-toasts
    var src = document.getElementById('admin-toasts');
    if (src) {
        src.querySelectorAll('.toast').forEach(function (t) { box.appendChild(t); });
        src.remove();
    }

    // 2) Orphaned .toast elements rendered inline by pages (login, thanks, etc.)
    document.querySelectorAll('.toast:not(#toast-container .toast)')
        .forEach(function (t) { box.appendChild(t); });

    // Auto-dismiss every toast after 4 seconds
    box.querySelectorAll('.toast').forEach(function (toast, i) {
        setTimeout(function () {
            toast.classList.add('toast-exit');
            toast.addEventListener('animationend', function () { toast.remove(); });
        }, 4000 + (i * 200));
    });
})();
</script>
</body>
</html>