Remove the new Slack "rail" containing activity and other useless things

gistfile1.txt

const domObserver = new MutationObserver(() => {
    let rail = document.querySelector('div.p-tab_rail');
    if (rail) {
        rail.remove();
        let old_strip = document.querySelector('div.p-workspace_switcher_prototype div.p-control_strip')
        if (old_strip) {
            old_strip.remove()
        }
        let strip = document.querySelector('div.p-control_strip');
        document.querySelector('div.p-workspace_switcher_prototype').appendChild(strip);
        strip.style.left=0;
        document.querySelector('.p-client_workspace_wrapper').style.gridTemplateColumns = '0 auto';
    }
});
domObserver.observe(document.body, {
    subtree: true,
    childList: true,
});

Thanks for this, it works for me. The only problem is that the floating ⊕ at the bottom for "Create new" and the user profile picture below it end up overlapping with the list of teams (yes, I have too many teams). The ⊕ could be hidden without losing anything of value, but the profile icon has useful features. The best approach may be to restrict the height of the team list to ensure room for these icons. I came up with the following lines to insert after L12:

        document.querySelector('div.p-team_sidebar').style.paddingBottom = "0px";
        document.querySelector('div.p-team_sidebar').style.height = "calc(100vh - "+strip.offsetHeight+"px - 50px)";

I am glad it works for you!

Thanks for the suggestion. I do not quite like hardwiring 50px, otherwise sounds reasonable. Could you derive that value from somewhere? Why 50px specifically...?

The paddingBottom was originally 50px. (I'm not quite sure why just removing it once wasn't enough; perhaps it's actually a coincidence and there's another 50px somewhere, but I didn't see any candidates in the computed style from the element inspector.)

This works to avoid hardcoding it:

        let sidebar = document.querySelector('div.p-team_sidebar');
        sidebar.style.height = "calc(100vh - "+strip.offsetHeight+"px - "+getComputedStyle(sidebar).getPropertyValue("padding-bottom")+")";
        sidebar.style.paddingBottom = "0px";

Actually, this needs to be a bit more sophisticated to survive multiple calls to the mutation observer. Here's my attempt (probably better methods are available to those whose javascript knowledge isn't 15 years out of date...):

var sidebarPaddingBottom = "";
const domObserver = new MutationObserver(() => {
    let rail = document.querySelector('div.p-tab_rail');
    if (rail) {
        rail.remove();
        let old_strip = document.querySelector('div.p-workspace_switcher_prototype div.p-control_strip')
        if (old_strip) {
            old_strip.remove()
        }
        let strip = document.querySelector('div.p-control_strip');
        document.querySelector('div.p-workspace_switcher_prototype').appendChild(strip);
        strip.style.left=0;
        document.querySelector('.p-client_workspace_wrapper').style.gridTemplateColumns = '0 auto';
        let sidebar = document.querySelector('div.p-team_sidebar');
        if (sidebarPaddingBottom.length === 0) {
            sidebarPaddingBottom = getComputedStyle(sidebar).getPropertyValue("padding-bottom");
        }
        sidebar.style.height = "calc(100vh - "+strip.offsetHeight+"px - "+sidebarPaddingBottom+")";
        sidebar.style.paddingBottom = "0px";
    }
});
domObserver.observe(document.body, {
    subtree: true,
    childList: true,
});