ServerSpacebarOld/assets/public/custom/web/main.js

(function () {
    const BUTTON_ID = "rscord-settings-btn";
    const CONTENT_CONTAINER_ID = "custom-content";
    const SWITCH_CONTAINER_ID = "switch-container";

    const CUSTOM_CSS_ID = "custom-css";
    const CUSTOM_CSS_STORAGE = "custom_css";
    const CUSTOM_CSS_INPUT_ID = "custom-css-input";
    
    const CSS_CLASSES = {
        tabItem: "item-3XjbnG",
        selected: "selected-g-kMVV",
        contentColumn: "contentColumn-1C7as6",
        settingsRegion: "sidebarRegion-1VBisG",
        contentRegion: "contentRegion-3HkfJJ",
        settingsSidebar: "standardSidebarView-E9Pc3j",
        title: "colorStandard-1Xxp1s size14-k_3Hy4 h1-34Txb0 title-3hptVQ defaultColor-2cKwKo defaultMarginh1-EURXsm",
        miniTitle: "colorStandard-1Xxp1s size14-k_3Hy4 h5-2RwDNl title-3hptVQ title-1HgbhV",
        hidden: "hidden-27eifz",
        hamburger: "btnHamburger-3GF0_5",
        textInput: "inputDefault-3FGxgL input-2g-os5"
    };

    const IS_MOBILE = window
        .matchMedia("(pointer: coarse)")
        .matches;

    const TAB_CONTENT = `
        <h2 class="${CSS_CLASSES.title}">RSCord Settings</h2>
        <h5 class="${CSS_CLASSES.miniTitle}" style="margin-bottom: 10px">Options</h5>
        <div id="${SWITCH_CONTAINER_ID}"></div>
        <h5 class="${CSS_CLASSES.miniTitle}" style="margin-bottom: 10px">Custom CSS</h5>
        <textarea id="${CUSTOM_CSS_INPUT_ID}" class="${CSS_CLASSES.textInput}" placeholder="CSS goes here" type="text" name="" style="resize: vertical;height: 400px;"></textarea>
    `;

    async function addSwitches(container) {
        container.appendChild(createSwitch(
            "Push Notifications",
            "Sends you notifications even when you close the app",
            "push-notifications",
            await isPushRegistered(),
            async (checked) => {
                const publicKey = window.GLOBAL_ENV.VAPID_KEY;
                if (!publicKey) {
                    alert("Server has not enabled push notifications")
                    return false;
                }
                try {
                    checked ? await registerPush(publicKey) : await unregisterPush();
                    return true;
                } catch(err) {
                    alert(err.message);
                    return false;
                }
            }
        ));
    }

    function applySavedCSS() {
        let css = localStorage_.getItem(CUSTOM_CSS_STORAGE) || "";
        let style = document.getElementById(CUSTOM_CSS_ID);

        if (!style) {
            style = document.createElement("style");
            style.id = CUSTOM_CSS_ID;
            document.head.appendChild(style);
        }

        style.textContent = css;
    }

    function loadCustomCSS(textarea) {
        if (!textarea) return;
        textarea.value = localStorage_.getItem(CUSTOM_CSS_STORAGE) || "";

        let style = document.getElementById(CUSTOM_CSS_ID);
        if (!style) return;

        textarea.addEventListener("input", () => {
            const css = textarea.value;
            style.textContent = css;
            localStorage_.setItem(CUSTOM_CSS_STORAGE, css);
        });
    }

    function addSettingsTab() {
        const advancedTab = document.querySelector(`.${CSS_CLASSES.tabItem}[aria-controls='advanced-tab']`);
        if (!advancedTab) return;
        if (document.getElementById(BUTTON_ID)) return;

        const settingsBtn = document.createElement("div");
        settingsBtn.id = BUTTON_ID;
        settingsBtn.className = advancedTab.className;
        settingsBtn.role = "tab";
        settingsBtn.tabIndex = -1;
        settingsBtn.ariaSelected = "false";
        settingsBtn.textContent = "RSCord Settings";
        
        settingsBtn.addEventListener("click", () => {
            const tabs = settingsBtn.parentElement.querySelectorAll('[role="tab"]');
            tabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
            tabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
            settingsBtn.classList.add(CSS_CLASSES.selected);
            settingsBtn.setAttribute("aria-selected", "true");

            let customContent = document.getElementById(CONTENT_CONTAINER_ID);
            if (!customContent) {
                customContent = document.createElement("div");
                customContent.id = CONTENT_CONTAINER_ID;
                customContent.innerHTML = TAB_CONTENT;

                const switchContainer = customContent.querySelector(`#${SWITCH_CONTAINER_ID}`);
                addSwitches(switchContainer);

                document.querySelector(`.${CSS_CLASSES.contentColumn}`).appendChild(customContent);

                const cssInput = document.getElementById(CUSTOM_CSS_INPUT_ID);
                loadCustomCSS(cssInput);
            }

            const contentColumn = document.querySelector(`.${CSS_CLASSES.contentColumn}`);
            Array.from(contentColumn.children).forEach(child => {
                if (child.id !== CONTENT_CONTAINER_ID) child.style.display = "none";
            });
            customContent.style.display = "block";
        });

        advancedTab.insertAdjacentElement("afterend", settingsBtn);
        return true;
    }

    function startObserver() {
        const observer = new MutationObserver(() => {
            const sidebar = document.querySelector(`.${CSS_CLASSES.settingsSidebar}`);
            if (sidebar) addSettingsTab();
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    startObserver();
    applySavedCSS();

    document.body.addEventListener("click", (e) => {
        const clickedHamburger = e.target.closest(`.${CSS_CLASSES.hamburger}`)
        if (clickedHamburger && IS_MOBILE) {
            const settingsRegion = document.querySelector(`.${CSS_CLASSES.settingsRegion}`)
            settingsRegion.classList.remove(CSS_CLASSES.hidden);

            const contentRegion = document.querySelector(`.${CSS_CLASSES.contentRegion}`)
            contentRegion.classList.add(CSS_CLASSES.hidden);
        }

        const clickedTab = e.target.closest('[role="tab"]');
        if (!clickedTab) return;

        const allTabs = document.querySelectorAll('[role="tab"]');
        allTabs.forEach(tab => tab.classList.remove(CSS_CLASSES.selected));
        allTabs.forEach(tab => tab.setAttribute("aria-selected", "false"));
        clickedTab.classList.add(CSS_CLASSES.selected);
        clickedTab.setAttribute("aria-selected", "true");

        const contentColumn = document.querySelector(`.${CSS_CLASSES.contentColumn}`);
        if (!contentColumn) return;

        if (clickedTab.id === BUTTON_ID) {
            Array.from(contentColumn.children).forEach(child => {
                if (child.id === CONTENT_CONTAINER_ID) {
                    child.style.display = "block";
                } else {
                    child.style.display = "none";
                }

                if (IS_MOBILE) {
                    const settingsRegion = document.querySelector(`.${CSS_CLASSES.settingsRegion}`)
                    settingsRegion.classList.add(CSS_CLASSES.hidden);

                    const contentRegion = document.querySelector(`.${CSS_CLASSES.contentRegion}`)
                    contentRegion.classList.remove(CSS_CLASSES.hidden);
                }
            });
        } else {
            Array.from(contentColumn.children).forEach(child => {
                if (child.id !== CONTENT_CONTAINER_ID) child.style.display = "";
                else child.style.display = "none";
            });
        }
    });
})();