more efficient rvrb layout

rvrb-relayout.user.js

// ==UserScript==
// @name         RVRB Relayout
// @namespace    https://app.rvrb.one/
// @version      0.2
// @description  RVRB relayout
// @author       You
// @match        https://app.rvrb.one/*
// @icon         https://app.rvrb.one/favicon-32x32.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function waitForEl(selector) {
        return new Promise((resolve) => {
            if (document.querySelector(selector)) {
                return resolve(document.querySelector(selector));
            }

            const observer = new MutationObserver(() => {
                if (document.querySelector(selector)) {
                    resolve(document.querySelector(selector));
                    observer.disconnect();
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true,
            });
        });
    }

    function updateLayout() {
        if (typeof (Storage) !== "undefined") {
            if (localStorage.autodope) {
                localStorage.removeItem("autodope");
            }
            else {
                localStorage.setItem("autodope", 'on');
            }
        }

        // move SideMenu to top
        var App = document.querySelector('#App');
        var SideMenu = document.querySelector('#SideMenu');
        App.before(SideMenu);
        App.style.height = 'calc(100% - 50px)';

        // fix SideMenu Layout
        SideMenu.style.flexDirection = 'row';
        SideMenu.style.height = '50px';
        SideMenu.style.width = 'auto';

        var Account = SideMenu.querySelector('[title="Account"]');
        Account.style.marginTop = 'unset';
        Account.style.marginLeft = 'auto';

        var Autodope = document.createElement("div");
        Autodope.classList.add("nav-button");
        Autodope.innerHTML = "Autodope";

        var AutodopeBox = document.createElement("input");
        AutodopeBox.type = "checkbox";
        AutodopeBox.classList.add("autodope");
        if (typeof (Storage) !== "undefined") {
            if (localStorage.autodope) {
                AutodopeBox.checked = true;
            }
        }
        AutodopeBox.style.margin = "5px";

        Autodope.appendChild(AutodopeBox);
        // add autodope checkbox
        Account.before(Autodope);

        // show complete text in SideMenu;
        document.querySelectorAll('.ellipses').forEach(item=>{
            item.style.overflow = 'unset';
        });

        // move the ChatView to center
        var Chatview = document.querySelector('#ChatView');
        var UserView = document.querySelector('#UserView');
        Chatview.after(UserView);
    }

    function autoDope() {
        if (document.querySelector(".autodope").checked)
        {
            setTimeout(() => {
                const btn = document.querySelector(".section-reactions > .button");
                if (btn.className.indexOf("active") < 0){
                    btn.click();
                }
            }, 2000);
        }
    }

    waitForEl("#ChatView").then(() => {
        updateLayout();
        if(window.addEventListener) {
            document.querySelector("#trackTitle").addEventListener('DOMSubtreeModified', autoDope, false);
        }
        autoDope();
    });
})();