Ajaxify/sticky WP Rocket save settings

/**
 * WP Rocket Sticky Save Button
 *
 * Replaces WP Rocket's default submit button with a sticky, full-width button
 * that saves settings via AJAX. Provides immediate visual feedback (Saving,
 * Saved, Failed) without a full page reload. Auto-adjusts width to match
 * the active content column on both dashboard and settings pages.
 *
 * Usage: Inject via a browser extension on WP Rocket's settings page,
 *        or enqueue for logged-in admins using wp-rocket/sticky-save-enqueue.php.
 *
 * @category wp-rocket
 * @language javascript

 *
 * @author Adame Dahmani https://adame.io
 * @support Support my family project: https://adame.io/fundraiser
 */
class Adx_Sticky_Save {
    static init() {
        const interval = setInterval(() => {
            const content = document.querySelector('.wpr-Content');
            const submit = document.getElementById('wpr-options-submit');
            const dbSave = document.querySelector('[name="wp_rocket_settings\\[submit_optimize\\]"]');

            if (content && submit) {
                clearInterval(interval);
                Adx_Sticky_Save.setup(content, submit, dbSave);
                Adx_Sticky_Save.injectStyles();
            }
        }, 300);
    }

    static setup(container, originalBtn, dbSaveBtn) {
        if (originalBtn) originalBtn.style.opacity = '0';
        if (dbSaveBtn) dbSaveBtn.style.opacity = '0';

        const btn = document.createElement('button');
        btn.textContent = 'Save Settings';
        btn.className = 'wpr-button adx_content_sticky_submit';

        btn.addEventListener('click', () => {
            Adx_Sticky_Save.save(btn, originalBtn);
        });

        const wrapper = document.createElement('div');
        wrapper.className = 'adx_content_sticky_wrapper';
        wrapper.appendChild(btn);
        wrapper.style.opacity = '0';

        container.appendChild(wrapper);

        setTimeout(() => {
            Adx_Sticky_Save.adjustWidth();
            wrapper.style.opacity = '1';
        }, 100);

        window.addEventListener('resize', Adx_Sticky_Save.adjustWidth);
        window.addEventListener('hashchange', Adx_Sticky_Save.adjustWidth);
    }

    static save(btn, originalBtn) {
        const form = originalBtn.closest('form');
        if (!form) return;

        const formData = new FormData(form);
        const actionUrl = form.getAttribute('action') || window.location.href;
        const originalText = btn.textContent;

        btn.textContent = 'Saving...';
        btn.disabled = true;

        fetch(actionUrl, {
            method: 'POST',
            body: formData,
            credentials: 'same-origin',
        })
        .then((res) => {
            btn.textContent = res.ok ? 'Successfully Saved!' : 'Failed to Save.';
        })
        .catch(() => {
            btn.textContent = 'Error during save.';
        })
        .finally(() => {
            setTimeout(() => {
                btn.textContent = originalText;
                btn.disabled = false;
            }, 2000);
        });
    }

    static adjustWidth() {
        const wrapper = document.querySelector('.adx_content_sticky_wrapper');
        if (!wrapper) return;

        const isDashboard = window.location.hash === '#dashboard';
        const section = document.querySelector('#wpbody-content > div.wpr-wrap.wrap > div.wpr-body > section');
        const col = document.querySelector('.wpr-Page-row .wpr-Page-col');

        let width = 0;

        if (isDashboard) {
            width = (section?.classList.contains('isNotFull') ? section?.offsetWidth : null)
                 || col?.offsetWidth
                 || section?.offsetWidth
                 || 0;
        } else {
            width = col?.offsetWidth || section?.offsetWidth || 0;
        }

        wrapper.style.maxWidth = width + 'px';
    }

    static injectStyles() {
        if (document.getElementById('adx-sticky-save-styles')) return;

        const css = `
            .adx_content_sticky_wrapper {
                position: sticky;
                bottom: 0;
                z-index: 100;
                transition: opacity 0.3s ease-in-out;
            }
            .adx_content_sticky_submit {
                width: 100%;
                margin: 0;
                border-radius: 4px;
                cursor: pointer;
                box-sizing: border-box;
            }
        `;

        if (typeof CSSStyleSheet !== 'undefined' && CSSStyleSheet.prototype.replaceSync) {
            const sheet = new CSSStyleSheet();
            sheet.replaceSync(css);
            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
        } else {
            const el = document.createElement('style');
            el.id = 'adx-sticky-save-styles';
            el.textContent = css;
            document.head.appendChild(el);
        }
    }
}

window.addEventListener('load', Adx_Sticky_Save.init);

<?php
/**
 * Enqueue Sticky Save Button for Logged-In Admins
 *
 * Outputs the sticky save button script in the footer for logged-in users.
 * Only needed if you want to load the script server-side instead of
 * using a browser extension.
 *
 * Usage: Add to functions.php. Place the contents of
 *        wp-rocket/sticky-save-button.js inside the <script> tag.
 *
 * @category wp-rocket
 * @language php

 *
 * @author Adame Dahmani https://adame.io
 * @support Support my family project: https://adame.io/fundraiser
 */
function adx_enqueue_sticky_save() {
    if ( is_user_logged_in() ) {
        ?>
        <script>
            // Paste the contents of wp-rocket/sticky-save-button.js here.
        </script>
        <?php
    }
}
add_action( 'wp_footer', 'adx_enqueue_sticky_save' );