Subscription side panel

function addSubscriptionsSidePanel() {
    GM_addStyle(`
    #middle > .kbin-container {
        grid-template-areas: "magazine-panel main sidebar";
        grid-template-columns: 1fr 3fr 1fr;
    }

    #magazine-panel {
        background-color: var(--kbin-section-bg);
        border: var(--kbin-options-border);
        color: var(--kbin-section-text-color);
        margin-bottom: .5rem;
        padding: 2rem 1rem;
        border-radius: 0 0 .5rem .5rem !important;
        height: fit-content;
        font-size: 0.8em;
    }

    #magazine-panel h3 {
        border-bottom: var(--kbin-sidebar-header-border);
        color: var(--kbin-sidebar-header-text-color);
        font-size: .8rem;
        margin: 0 0 1rem;
        text-transform: uppercase;
    }

    #magazine-panel ul {
        list-style: none;
        line-height: 2.5em;
        padding-inline: 0;
    }

    #magazine-panel ul li a img {
        height: 1em;
        margin-right: 0.4em;
    }

    #magazine-panel ul li a .padder {
        width: 1.4em;
        display: inline-block;
    }

    #subscription-panel-spinner {
        text-align: center;
        font-size: 2em;
    }
    `);

    /** Create the subscription panel */
    let kbinContainer = document.querySelector("#middle > .kbin-container");
    let magazinePanel = document.createElement("aside");
    let magazinePanelUl = document.createElement("ul");
    let title = document.createElement("h3");
    magazinePanel.id = "magazine-panel";
    title.innerHTML = "Subscriptions";
    magazinePanel.appendChild(title);
    kbinContainer.appendChild(magazinePanel);
    magazinePanel.appendChild(magazinePanelUl);

    /** Add spinner */
    let spinner = document.createElement("div");
    spinner.id = "subscription-panel-spinner";
    spinner.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
    magazinePanel.appendChild(spinner);

    /** Fetch subscription page */
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/settings/subscriptions/magazines", true);
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            spinner.remove();
            if (this.status === 200) {
                /** Parse the page */
                let dom = new DOMParser().parseFromString(this.responseText, 'text/html');
                let magazines = dom.querySelectorAll(".section.magazines.magazines-columns ul>li");

                /** Find subscriptions */
                magazines.forEach((el) => {
                    let magA = el.querySelector("a")
                    let mag = {};
                    mag.name = magA.innerHTML;
                    mag.url = magA.href;
                    mag.img = el.querySelector("figure img")?.src;

                    /** Create the item dom element */
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.href = mag.url;
                    if (mag.img) {
                        let img = document.createElement("img");
                        img.src = mag.img;
                        a.appendChild(img);
                    } else {
                        /** Add some padding when there is no magazine image */
                        let span = document.createElement("span");
                        span.className = "padder";
                        a.appendChild(span);
                    }
                    a.appendChild(document.createTextNode(mag.name));
                    li.appendChild(a);
                    magazinePanelUl.appendChild(li);
                });
            } else {
                magazinePanel.appendChild(document.createTextNode("Failed to load subscriptions"));
            }
        }
    };
    xhr.send();
}