dotfiles/.config/spicetify/CustomApps/betterLibrary/betterlibrary.js

var library;
var sidebar;
var text;
var center;
var betterLibIsEnabled;
var lastSidebarSize; //
var lastSidebarMode; //ylx-sidebar-state 1=collapsed, 0=normal, 2=expanded
var lastViewIcons; //items-view 1=icons 2=list
var lastViewCompact; //library-row-mode 1=compact 2=normal

// Disables betterlibrary when the pages is left
function startBetterLibListener() {
    Spicetify.Platform.History.listen((location) => {
        // console.log("betterlib listener called")
        if (location.pathname != '/betterlibrary')
            disableBetterLib();
    });
    window.addEventListener(
        'beforeunload',
        (event) => {
            disableBetterLib();
        }
        )
}

function enableBetterLib() {
    waitForElm('.betterLibBox').then((elm) => {
        if (!betterLibIsEnabled)
        {
            //swap elements
            library = document.getElementsByClassName("main-yourLibraryX-libraryContainer")[0];
            text = document.getElementsByClassName("betterLibText")[0];
            sidebar = document.getElementsByClassName("main-yourLibraryX-library")[0];
            center = document.getElementsByClassName("betterLibBox")[0];
            center.appendChild(library);
            sidebar.appendChild(text);

            //store last mode and size
            lastSidebarMode = Spicetify.Platform.LocalStorageAPI.getItem("ylx-sidebar-state");
            lastSidebarSize = Spicetify.Platform.LocalStorageAPI.getItem("ylx-expanded-state-nav-bar-width");

            //set new mode and size
            currentSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
            currentSidebarSize = parseInt(currentSidebarSize, 10);
            Spicetify.Platform.LocalStorageAPI.setItem("ylx-expanded-state-nav-bar-width",currentSidebarSize);
            Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",2);

            //fix collaped library buttons
            if (lastSidebarMode == 1) {
                document.documentElement.style.setProperty("--betterlib-fix-collaped-view","none");
                document.documentElement.style.setProperty("--betterlib-show-placeholder-text","none");
            }

            //store last icons mode and compact mode
            lastViewSize = Spicetify.Platform.LocalStorageAPI.getItem("ylx-grid-scale");
            lastViewIcons = Spicetify.Platform.LocalStorageAPI.getItem("items-view");
            lastViewCompact = Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode");

            //get betterlib icons mode and compact mode from storage
            newViewSize = parseFloat(Spicetify.Platform.LocalStorageAPI.getItem("betterlib-ylx-grid-scale"),10);
            if (newViewSize == null) {
                newViewSize = 1;
            }
            newViewIcons = parseInt(Spicetify.Platform.LocalStorageAPI.getItem("betterlib-items-view"),10);
            newViewCompact = parseInt(Spicetify.Platform.LocalStorageAPI.getItem("betterlib-library-row-mode"),10);

            //apply betterlib icons mode and compact mode
            Spicetify.Platform.LocalStorageAPI.setItem("ylx-grid-scale", newViewSize);
            Spicetify.Platform.LocalStorageAPI.setItem("items-view", newViewIcons);
            Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", newViewCompact);

            betterLibIsEnabled = true;
        }
    });
}

function disableBetterLib() {
    if (betterLibIsEnabled)
    {
        //undo fix for collaped library buttons
        if (lastSidebarMode == 1) {
            document.documentElement.style.setProperty("--betterlib-fix-collaped-view","inherit");
            document.documentElement.style.setProperty("--betterlib-show-placeholder-text","flex");
        }

        //get current betterlib icons mode and compact mode
        currentViewIcons = parseInt(Spicetify.Platform.LocalStorageAPI.getItem("items-view"),10);
        currentViewCompact = parseInt(Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode"),10);
        currentViewSize = parseFloat(Spicetify.Platform.LocalStorageAPI.getItem("ylx-grid-scale"),10);

        //save betterlib icons mode and compact mode to storage
        Spicetify.Platform.LocalStorageAPI.setItem("betterlib-items-view", currentViewIcons);
        Spicetify.Platform.LocalStorageAPI.setItem("betterlib-library-row-mode", currentViewCompact);
        Spicetify.Platform.LocalStorageAPI.setItem("betterlib-ylx-grid-scale", currentViewSize);

        //revert icons and compact mode to last
        Spicetify.Platform.LocalStorageAPI.setItem("items-view", lastViewIcons);
        Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", lastViewCompact);
        Spicetify.Platform.LocalStorageAPI.setItem("ylx-grid-scale", lastViewSize);

        //revert swap
        sidebar.appendChild(library);
        center.appendChild(text);

        //reset mode and size to last
        Spicetify.Platform.LocalStorageAPI.setItem("lx-expanded-state-nav-bar-width",lastSidebarSize);
        Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",lastSidebarMode);

        betterLibIsEnabled = false;
    }
}

//source: https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

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

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