folio/public/assets/js/reactions.js

// reactions.js — toggle réactions via fetch, fallback formulaire natif

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.reaction-form').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            var btn    = form.querySelector('.reaction-btn');
            var type   = form.querySelector('[name="type"]').value;
            var uuid   = form.querySelector('[name="uuid"]').value;
            var badge  = form.querySelector('.reaction-count');
            var active = btn.classList.contains('btn-primary');

            var data = new URLSearchParams();
            data.append('uuid', uuid);
            data.append('type', type);
            data.append('_ajax', '1');

            fetch('/react', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: data.toString(),
            })
            .then(function (r) { return r.json(); })
            .then(function (json) {
                if (!json.ok) { form.submit(); return; }

                var nowActive = json.active;
                if (btn.classList.contains('hero-reaction-btn')) {
                    btn.classList.toggle('hero-reaction-btn--active', nowActive);
                } else {
                    btn.classList.toggle('btn-primary', nowActive);
                    btn.classList.toggle('btn-outline-secondary', !nowActive);
                    if (badge) {
                        badge.classList.toggle('bg-light', nowActive);
                        badge.classList.toggle('text-primary', nowActive);
                        badge.classList.toggle('bg-secondary', !nowActive);
                    }
                }
                if (badge) { badge.textContent = json.count; }
            })
            .catch(function () { form.submit(); });
        });
    });
});