SidebarControl.plugin.js

/**
 * @name SidebarControl
 * @author RamiFara
 * @authorLink https://github.com/ramifara
 * @version 1.2.0
 * @description Configurable, independent controls for Discord's server rail, channel list, and user controls.
 * @website https://github.com/ramifara/SidebarControl
 * @source https://github.com/ramifara/SidebarControl/blob/main/SidebarControl.plugin.js
 */

const React = BdApi.React;
const {Data, DOM, Patcher, Webpack, ContextMenu, UI} = BdApi;
const {Filters} = Webpack;

const PLUGIN_ID = "SidebarControl";
const STYLE_ID = "SidebarControlStyles";
const REFRESH_EVENT = "sidebar-control-refresh";

const DEFAULTS = {
    interactionMode: "menu",
    animation: true,
    rememberLayout: true,
    hideUserPanel: true,
    showToasts: false,
    showTooltips: true,
    iconSize: "normal",
    channelKeybind: ["Control", "Shift", "H"],
    serverKeybind: ["Control", "Shift", "G"],
    cycleKeybind: []
};
module.exports = class SidebarControl {
    constructor(meta) {
        this.meta = meta;
        this.settings = {...DEFAULTS, ...(Data.load(PLUGIN_ID, "settings") || {})};
        const savedState = Data.load(PLUGIN_ID, "layout") || {};
        this.state = this.settings.rememberLayout
            ? {channelsHidden: !!savedState.channelsHidden, serversHidden: !!savedState.serversHidden}
            : {channelsHidden: false, serversHidden: false};
        this.onKeyDown = this.onKeyDown.bind(this);
    }

    start() {
        try {
            this.resolveModules();
            this.installStyles();
            this.patchHeader();
            document.addEventListener("keydown", this.onKeyDown, true);
            this.applyLayout();
            this.refresh();
        }
        catch (error) {
            console.error(`[${PLUGIN_ID}] Failed to start`, error);
            UI.showToast("Sidebar Control could not start. Check the console for details.", {type: "error"});
            this.stop();
        }
    }

    stop() {
        Patcher.unpatchAll(PLUGIN_ID);
        DOM.removeStyle(STYLE_ID);
        document.removeEventListener("keydown", this.onKeyDown, true);
        document.body?.classList.remove("sc-channels-hidden", "sc-servers-hidden");
        document.querySelectorAll(".sc-user-panel").forEach(node => node.classList.remove("sc-user-panel"));
        ContextMenu.close();
    }

    observer() {
        if (this.applyQueued) return;
        this.applyQueued = true;
        requestAnimationFrame(() => {
            this.applyQueued = false;
            this.applyLayout();
        });
    }

    onSwitch() {
        this.applyLayout();
    }

    resolveModules() {
        const sidebarClasses = Webpack.getModule(Filters.byKeys("sidebarList", "sidebarListRounded"));
        const baseClasses = Webpack.getModule(Filters.byKeys("container", "base"));
        const accountClasses = Webpack.getModule(Filters.byKeys("avatarWrapper", "buttons"));

        if (!sidebarClasses?.sidebarList) throw new Error("Could not find Discord's channel sidebar class");

        this.sidebarClass = sidebarClasses.sidebarList;
        this.baseClass = baseClasses?.base;
        this.avatarWrapperClass = accountClasses?.avatarWrapper;
        this.accountContainerClass = accountClasses?.container;
    }

    patchHeader() {
        const filter = value => value?.Icon && value.Title;
        const modules = Webpack.getModule(module => Object.values(module).some(filter), {first: false}) || [];
        let patched = 0;

        for (const module of modules) {
            const key = Object.keys(module).find(name => filter(module[name]));
            if (!key) continue;

            Patcher.before(PLUGIN_ID, module, key, (_, args) => {
                try {
                    const children = args[0]?.children;
                    if (!Array.isArray(children) || !this.isMainHeader(children)) return;
                    if (children.some(child => child?.key === PLUGIN_ID)) return;
                    children.unshift(React.createElement(this.Control, {key: PLUGIN_ID}));
                }
                catch (error) {
                    console.error(`[${PLUGIN_ID}] Header injection failed`, error);
                }
            });
            patched++;
        }

        if (!patched) throw new Error("Could not find Discord's header component");
    }

    isMainHeader(children) {
        return children.some(child =>
            child?.props?.channel ||
            child?.props?.children?.some?.(nested => nested?.props?.channel !== undefined) ||
            child?.type?.Header ||
            child?.props?.children === "Nitro" ||
            child?.props?.children?.some?.(nested => nested?.props?.children === "Shop") ||
            child?.props?.children?.some?.(nested => typeof nested === "string")
        );
    }

    findUserPanel() {
        if (!this.avatarWrapperClass) return null;
        const avatar = document.querySelector(`.${this.avatarWrapperClass}`);
        if (!avatar) return null;
        if (this.accountContainerClass) {
            const accountContainer = avatar.closest(`.${this.accountContainerClass}`);
            if (accountContainer) return accountContainer;
        }
        return avatar.parentElement || avatar.closest('[class*="panels"]') || null;
    }

    applyLayout() {
        document.body?.classList.toggle("sc-channels-hidden", this.state.channelsHidden);
        document.body?.classList.toggle("sc-servers-hidden", this.state.serversHidden);

        document.querySelectorAll(".sc-user-panel").forEach(node => node.classList.remove("sc-user-panel"));
        if (this.settings.hideUserPanel && this.state.channelsHidden) {
            this.findUserPanel()?.classList.add("sc-user-panel");
        }
    }

    updateState(changes, message) {
        this.state = {...this.state, ...changes};
        if (this.settings.rememberLayout) Data.save(PLUGIN_ID, "layout", this.state);
        this.applyLayout();
        this.refresh();
        if (this.settings.showToasts && message) UI.showToast(message, {type: "info"});
    }

    toggleChannels() {
        const hidden = !this.state.channelsHidden;
        this.updateState({channelsHidden: hidden}, hidden ? "Channels and controls hidden" : "Channels and controls shown");
    }

    toggleServers() {
        const hidden = !this.state.serversHidden;
        this.updateState({serversHidden: hidden}, hidden ? "Servers hidden" : "Servers shown");
    }

    showAll() {
        this.updateState({channelsHidden: false, serversHidden: false}, "All sidebars shown");
    }

    cycleLayout() {
        if (!this.state.channelsHidden && !this.state.serversHidden) {
            this.updateState({channelsHidden: true, serversHidden: true}, "All sidebars hidden");
        }
        else if (this.state.channelsHidden && this.state.serversHidden) {
            this.updateState({channelsHidden: true, serversHidden: false}, "Servers shown; channels hidden");
        }
        else {
            this.showAll();
        }
    }

    openLayoutMenu(event) {
        event.preventDefault();
        event.stopPropagation();

        const menu = ContextMenu.buildMenu([
            {
                type: "group",
                items: [
                    {
                        type: "toggle",
                        label: "Show server list",
                        checked: !this.state.serversHidden,
                        action: () => this.toggleServers()
                    },
                    {
                        type: "toggle",
                        label: "Show channels and user controls",
                        checked: !this.state.channelsHidden,
                        action: () => this.toggleChannels()
                    }
                ]
            },
            {
                type: "group",
                items: [
                    {label: "Next layout", action: () => this.cycleLayout()},
                    {label: "Show everything", action: () => this.showAll()}
                ]
            }
        ]);

        ContextMenu.open(event, menu, {navId: "sidebar-control-layout"});
    }

    refresh() {
        window.dispatchEvent(new CustomEvent(REFRESH_EVENT));
    }

    getLayoutIcon() {
        if (this.state.channelsHidden && this.state.serversHidden) return "all-hidden";
        if (this.state.channelsHidden) return "channels-hidden";
        if (this.state.serversHidden) return "servers-hidden";
        return "layout";
    }

    Control = () => {
        const [, forceRender] = React.useReducer(value => value + 1, 0);
        React.useEffect(() => {
            const refresh = () => forceRender();
            window.addEventListener(REFRESH_EVENT, refresh);
            return () => window.removeEventListener(REFRESH_EVENT, refresh);
        }, []);

        const mode = this.settings.interactionMode;
        const title = this.settings.showTooltips ? this.getControlTitle(mode) : undefined;
        const button = (icon, label, onClick, onContextMenu) => React.createElement("button", {
            type: "button",
            className: `sc-button sc-icon-${icon} sc-size-${this.settings.iconSize}`,
            "aria-label": label,
            title: this.settings.showTooltips ? label : undefined,
            onClick,
            onContextMenu
        });

        if (mode === "split") {
            return React.createElement("div", {className: "sc-control sc-split", title},
                button(this.state.serversHidden ? "servers-show" : "servers", this.state.serversHidden ? "Show servers" : "Hide servers", () => this.toggleServers()),
                button(this.state.channelsHidden ? "channels-show" : "channels", this.state.channelsHidden ? "Show channels and controls" : "Hide channels and controls", () => this.toggleChannels())
            );
        }

        let click = event => this.openLayoutMenu(event);
        let context = undefined;
        if (mode === "progressive") click = () => this.cycleLayout();
        if (mode === "hybrid") {
            click = () => this.cycleLayout();
            context = event => this.openLayoutMenu(event);
        }
        if (mode === "channelMenu") {
            click = () => this.toggleChannels();
            context = event => this.openLayoutMenu(event);
        }
        if (mode === "modifier") {
            click = event => {
                if (event.ctrlKey || event.metaKey) this.toggleServers();
                else this.toggleChannels();
            };
            context = event => this.openLayoutMenu(event);
        }

        return React.createElement("div", {className: "sc-control", title},
            button(this.getLayoutIcon(), this.getControlTitle(mode), click, context)
        );
    }

    getControlTitle(mode) {
        if (mode === "menu") return "Open sidebar controls";
        if (mode === "progressive") return "Cycle sidebar layout";
        if (mode === "hybrid") return "Cycle layout · Right-click for independent controls";
        if (mode === "channelMenu") return "Toggle channels · Right-click for all controls";
        if (mode === "modifier") return "Click: channels · Ctrl/Command-click: servers · Right-click: menu";
        return "Sidebar controls";
    }

    onKeyDown(event) {
        if (event.repeat || this.isTypingTarget(event.target)) return;

        if (this.matchesKeybind(event, this.settings.channelKeybind)) {
            event.preventDefault();
            this.toggleChannels();
        }
        else if (this.matchesKeybind(event, this.settings.serverKeybind)) {
            event.preventDefault();
            this.toggleServers();
        }
        else if (this.matchesKeybind(event, this.settings.cycleKeybind)) {
            event.preventDefault();
            this.cycleLayout();
        }
    }

    isTypingTarget(target) {
        return !!target?.closest?.("input, textarea, [contenteditable='true'], [role='textbox']");
    }

    matchesKeybind(event, keybind) {
        if (!Array.isArray(keybind) || keybind.length === 0) return false;
        const keys = keybind.map(key => String(key).toLowerCase());
        const modifiers = {
            control: event.ctrlKey,
            ctrl: event.ctrlKey,
            shift: event.shiftKey,
            alt: event.altKey,
            meta: event.metaKey,
            command: event.metaKey
        };

        for (const [name, pressed] of Object.entries(modifiers)) {
            if (keys.includes(name) !== pressed && !(name === "ctrl" && keys.includes("control")) && !(name === "command" && keys.includes("meta"))) return false;
        }

        const mainKeys = keys.filter(key => !Object.keys(modifiers).includes(key));
        if (mainKeys.length === 0) return false;
        return mainKeys.some(key => key === event.key.toLowerCase() || key === event.code.toLowerCase());
    }

    installStyles() {
        DOM.removeStyle(STYLE_ID);
        const duration = this.settings.animation ? "220ms" : "0ms";
        const size = this.settings.iconSize === "compact" ? "20px" : "24px";

        DOM.addStyle(STYLE_ID, `
.sc-control {
    display: flex;
    align-items: center;
    height: 24px;
    margin-right: 4px;
}
.sc-split {
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--background-modifier-accent, rgba(255,255,255,.06));
}
.sc-button {
    position: relative;
    width: ${size};
    min-width: ${size};
    height: ${size};
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--interactive-normal, #b5bac1);
    cursor: pointer;
    opacity: .9;
}
.sc-button:hover {
    color: var(--interactive-hover, #dbdee1);
    background: var(--background-modifier-hover, rgba(255,255,255,.08));
    opacity: 1;
}
.sc-button::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: currentColor;
    -webkit-mask: var(--sc-icon) center / contain no-repeat;
    mask: var(--sc-icon) center / contain no-repeat;
}
.sc-icon-layout {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5h18v15H3zM7 4.5v15M13 4.5v15' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sc-icon-channels {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7 21M17 3l-2 18M4 9h16M3 15h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sc-icon-channels-show {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3 5.5 17M13 3l-1.5 14M3 8h13M2.5 13h13M18 8l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sc-icon-channels-hidden {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3 7 21M17 3l-2 18M4 9h16M3 15h16M3 3l18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sc-icon-servers {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5a2 2 0 1 0 0 .01M7 12a2 2 0 1 0 0 .01M7 19a2 2 0 1 0 0 .01M11 5h9M11 12h9M11 19h9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sc-icon-servers-show {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5a2 2 0 1 0 0 .01M5 12a2 2 0 1 0 0 .01M5 19a2 2 0 1 0 0 .01M9 5h7M9 12h6M9 19h7M18 8l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sc-icon-servers-hidden {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5a2 2 0 1 0 0 .01M7 12a2 2 0 1 0 0 .01M7 19a2 2 0 1 0 0 .01M11 5h9M11 12h9M11 19h9M3 3l18 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sc-icon-all-hidden {
    --sc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5h18v15H3zM7 4.5v15M13 4.5v15M3 3l18 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.sc-channels-hidden .${this.sidebarClass} {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden !important;
    transition: width ${duration} ease, min-width ${duration} ease, max-width ${duration} ease !important;
}
body.sc-servers-hidden nav[aria-label="Servers sidebar"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden !important;
    transition: width ${duration} ease, min-width ${duration} ease, max-width ${duration} ease !important;
}
.sc-user-panel {
    display: none !important;
}
${this.baseClass ? `.${this.baseClass} { border-radius: 8px 0 0 !important; }` : ""}
        `);
    }

    getSettingsPanel() {
        const settings = [
            {
                type: "category",
                id: "controls",
                name: "Control style",
                shown: true,
                settings: [
                    {
                        type: "radio",
                        id: "interactionMode",
                        name: "Interaction mode",
                        note: "Changes immediately so you can try each design.",
                        value: this.settings.interactionMode,
                        options: [
                            {name: "Layout menu", value: "menu", description: "One button opens independent native toggles."},
                            {name: "Progressive", value: "progressive", description: "Cycles all visible → all hidden → servers only."},
                            {name: "Hybrid", value: "hybrid", description: "Click cycles; right-click opens independent controls."},
                            {name: "Modifier control", value: "modifier", description: "Click toggles channels; Ctrl/Command-click toggles servers; right-click opens the menu."},
                            {name: "Split controls", value: "split", description: "Two compact controls with distinct server and channel icons."},
                            {name: "Channel first", value: "channelMenu", description: "Click toggles channels; right-click opens all controls."}
                        ]
                    },
                    {
                        type: "dropdown",
                        id: "iconSize",
                        name: "Control size",
                        value: this.settings.iconSize,
                        options: [
                            {label: "Compact (20px)", value: "compact"},
                            {label: "Standard (24px)", value: "normal"}
                        ]
                    },
                    {type: "switch", id: "showTooltips", name: "Show tooltips", value: this.settings.showTooltips},
                    {type: "switch", id: "showToasts", name: "Show status toasts", value: this.settings.showToasts}
                ]
            },
            {
                type: "category",
                id: "behavior",
                name: "Layout behavior",
                shown: true,
                settings: [
                    {type: "switch", id: "hideUserPanel", name: "Hide user and voice controls with channels", note: "Includes avatar, activity, mute, deafen, and settings.", value: this.settings.hideUserPanel},
                    {type: "switch", id: "rememberLayout", name: "Remember layout after restart", value: this.settings.rememberLayout},
                    {type: "switch", id: "animation", name: "Animate collapsing", value: this.settings.animation}
                ]
            },
            {
                type: "category",
                id: "shortcuts",
                name: "Keyboard shortcuts",
                shown: false,
                settings: [
                    {type: "keybind", id: "channelKeybind", name: "Toggle channels", value: this.settings.channelKeybind, clearable: true, max: 4},
                    {type: "keybind", id: "serverKeybind", name: "Toggle servers", value: this.settings.serverKeybind, clearable: true, max: 4},
                    {type: "keybind", id: "cycleKeybind", name: "Cycle layouts", value: this.settings.cycleKeybind, clearable: true, max: 4}
                ]
            }
        ];

        return UI.buildSettingsPanel({
            settings,
            onChange: (_, id, value) => {
                this.settings[id] = value;
                Data.save(PLUGIN_ID, "settings", this.settings);
                if (id === "animation" || id === "iconSize") this.installStyles();
                if (id === "rememberLayout" && value) Data.save(PLUGIN_ID, "layout", this.state);
                this.applyLayout();
                this.refresh();
            }
        });
    }
};