StatusColorCustomizer.plugin.js

/**
 * @name StatusColorCustomizer
 * @author Mattdubs9699
 * @authorId 379082028794118154
 * @description Customize Discord's Online, Idle, Do Not Disturb, Invisible/Offline, and Streaming status colors.
 * @version 1.2.0
 * @website https://github.com/Mattdubs9699/StatusColorCustomizer
 * @source https://raw.githubusercontent.com/Mattdubs9699/StatusColorCustomizer/refs/heads/main/StatusColorCustomizer.plugin.js
 */

const DATA_KEY = "colors";
const STYLE_ID = "StatusColorCustomizer";

const STATUSES = [
    {key: "online", label: "Online", defaultColor: "#45a366"},
    {key: "idle", label: "Idle", defaultColor: "#ffc04e"},
    {key: "dnd", label: "Do Not Disturb", defaultColor: "#da3e44"},
    {key: "offline", label: "Invisible / Offline", defaultColor: "#84858d"},
    {key: "streaming", label: "Streaming", defaultColor: "#9147ff"}
];

const DEFAULT_COLORS = Object.fromEntries(
    STATUSES.map(({key, defaultColor}) => [key, defaultColor])
);

const CSS = `
.scc-modal {
    width: min(900px, calc(100vw - 24px)) !important;
    max-width: min(900px, calc(100vw - 24px)) !important;
    height: min(680px, calc(100vh - 24px)) !important;
    max-height: min(680px, calc(100vh - 24px)) !important;
}

.scc-hidden-heading {
    display: none !important;
}

.scc-panel {
    box-sizing: border-box;
    color: var(--text-normal);
    width: 100%;
}

.scc-description {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 8px;
}

.scc-layout {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.scc-status-list {
    display: grid;
    flex: 1 1 auto;
    gap: 3px;
    min-width: 0;
}

.scc-status-row {
    display: grid;
    grid-template-columns:
        minmax(128px, 1fr)
        28px
        minmax(118px, 140px)
        72px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 4px 8px;
    background: var(--background-secondary);
    border: 1px solid transparent;
    border-radius: 7px;
    box-sizing: border-box;
}

.scc-status-row.is-active {
    border-color: var(--brand-500, #5865f2);
}

.scc-status-name {
    padding: 0;
    background: none;
    border: 0;
    color: var(--header-primary);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.scc-swatch {
    width: 28px;
    height: 28px;
    border: 2px solid var(--background-modifier-accent);
    border-radius: 50%;
    box-sizing: border-box;
}

.scc-hex-input,
.scc-reset-button {
    height: 32px;
    box-sizing: border-box;
    color: var(--text-normal);
    background: var(--background-tertiary, #1e1f22);
    border: 1px solid var(--interactive-muted, #5c5e66);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    outline: none;
}

.scc-hex-input {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;
    font-family: var(--font-code);
    font-size: 13px;
    text-transform: uppercase;
}

.scc-hex-input:hover,
.scc-reset-button:hover {
    border-color: var(--interactive-normal, #949ba4);
}

.scc-hex-input:focus,
.scc-reset-button:focus-visible {
    border-color: var(--brand-500, #5865f2);
    box-shadow: 0 0 0 1px var(--brand-500, #5865f2);
}

.scc-hex-input.is-invalid {
    border-color: var(--status-danger, #f23f42);
    box-shadow: 0 0 0 1px var(--status-danger, #f23f42);
}

.scc-reset-button {
    width: 72px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.scc-reset-button:hover {
    background: var(--background-modifier-hover, #35373c);
}

.scc-reset-button:active {
    background: var(--background-modifier-active, #404249);
}

.scc-picker {
    display: flex;
    flex: 0 0 180px;
    flex-direction: column;
    gap: 6px;
    width: 180px;
    min-width: 180px;
    padding: 10px;
    background: var(--background-secondary);
    border-radius: 7px;
    box-sizing: border-box;
}

.scc-picker-title {
    color: var(--header-primary);
    font-size: 16px;
    font-weight: 700;
}

.scc-picker-status {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.2;
}

.scc-color-input {
    flex: 1 1 auto;
    width: 100%;
    min-height: 160px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.scc-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.scc-color-input::-webkit-color-swatch {
    border: 1px solid var(--interactive-muted, #5c5e66);
    border-radius: 8px;
}
`;

function normalizeHex(value) {
    if (typeof value !== "string") return null;

    let hex = value.trim();

    if (!hex.startsWith("#")) {
        hex = `#${hex}`;
    }

    if (/^#[0-9a-f]{3}$/i.test(hex)) {
        const expanded = [...hex.slice(1)]
            .map(character => character.repeat(2))
            .join("");

        hex = `#${expanded}`;
    }

    return /^#[0-9a-f]{6}$/i.test(hex)
        ? hex.toLowerCase()
        : null;
}

function loadColors(pluginName) {
    const saved = BdApi.Data.load(pluginName, DATA_KEY) ?? {};

    return Object.fromEntries(
        STATUSES.map(({key, defaultColor}) => [
            key,
            normalizeHex(saved[key]) ?? defaultColor
        ])
    );
}

function statusCss() {
    return STATUSES.map(({key, label, defaultColor}) => `
/* ${label} */
rect[mask][fill="${defaultColor}" i] {
    fill: var(--scc-${key}, ${defaultColor}) !important;
}`).join("\n");
}

function cleanText(element) {
    return element.textContent
        .replace(/\s+/g, " ")
        .trim()
        .toLowerCase();
}

function prepareModal(panel) {
    const modal =
        panel.closest('[role="dialog"]') ||
        panel.closest('[class*="modal"]');

    if (!modal) {
        return () => {};
    }

    modal.classList.add("scc-modal");

    const duplicateHeading = [
        ...modal.querySelectorAll(
            "h1, h2, h3, h4, h5, h6, [role='heading'], div"
        )
    ]
        .filter(element => {
            return cleanText(element) === "status color customizer";
        })
        .sort((first, second) => {
            return first.childElementCount - second.childElementCount;
        })[0];

    let headingContainer = duplicateHeading;

    while (
        headingContainer?.parentElement &&
        headingContainer.parentElement !== modal &&
        cleanText(headingContainer.parentElement) ===
            "status color customizer"
    ) {
        headingContainer = headingContainer.parentElement;
    }

    headingContainer?.classList.add("scc-hidden-heading");

    return () => {
        modal.classList.remove("scc-modal");
        headingContainer?.classList.remove("scc-hidden-heading");
    };
}

function StatusRow({
    status,
    color,
    draft,
    active,
    onSelect,
    onDraftChange,
    onCommit,
    onReset
}) {
    const {React} = BdApi;
    const h = React.createElement;
    const valid = normalizeHex(draft) !== null;

    return h(
        "div",
        {
            className:
                `scc-status-row${active ? " is-active" : ""}`
        },

        h(
            "button",
            {
                className: "scc-status-name",
                type: "button",
                onClick: onSelect
            },
            status.label
        ),

        h("div", {
            className: "scc-swatch",
            style: {
                backgroundColor: color
            }
        }),

        h("input", {
            className:
                `scc-hex-input${valid ? "" : " is-invalid"}`,
            type: "text",
            maxLength: 7,
            spellCheck: false,
            value: draft,
            "aria-label": `${status.label} hex color`,
            onFocus: onSelect,
            onChange: event => {
                onDraftChange(event.target.value);
            },
            onBlur: onCommit
        }),

        h(
            "button",
            {
                className: "scc-reset-button",
                type: "button",
                onClick: onReset
            },
            "Reset"
        )
    );
}

function SettingsPanel({plugin}) {
    const {React} = BdApi;
    const h = React.createElement;

    const panelRef = React.useRef(null);
    const [colors, setColors] = React.useState({...plugin.colors});
    const [drafts, setDrafts] = React.useState({...plugin.colors});
    const [activeKey, setActiveKey] = React.useState(
        STATUSES[0].key
    );

    React.useLayoutEffect(() => {
        if (!panelRef.current) {
            return undefined;
        }

        return prepareModal(panelRef.current);
    }, []);

    function updateState(setter, key, value) {
        setter(current => ({
            ...current,
            [key]: value
        }));
    }

    function commitColor(key, value) {
        const color = normalizeHex(value);

        if (!color) {
            return false;
        }

        plugin.setColor(key, color);
        updateState(setColors, key, color);
        updateState(setDrafts, key, color);

        return true;
    }

    function changeDraft(key, value) {
        updateState(setDrafts, key, value);

        const color = normalizeHex(value);

        if (!color) {
            return;
        }

        plugin.setColor(key, color);
        updateState(setColors, key, color);
    }

    const rows = STATUSES.map(status => {
        return h(StatusRow, {
            key: status.key,
            status,
            color: colors[status.key],
            draft: drafts[status.key],
            active: activeKey === status.key,

            onSelect: () => {
                setActiveKey(status.key);
            },

            onDraftChange: value => {
                changeDraft(status.key, value);
            },

            onCommit: () => {
                const saved = commitColor(
                    status.key,
                    drafts[status.key]
                );

                if (!saved) {
                    updateState(
                        setDrafts,
                        status.key,
                        colors[status.key]
                    );
                }
            },

            onReset: () => {
                setActiveKey(status.key);
                commitColor(
                    status.key,
                    status.defaultColor
                );
            }
        });
    });

    const activeStatus = STATUSES.find(status => {
        return status.key === activeKey;
    });

    return h(
        "div",
        {
            className: "scc-panel",
            ref: panelRef
        },

        h(
            "p",
            {
                className: "scc-description"
            },
            "Select a status, enter a hex code, or use the " +
                "shared color picker. Changes are applied and " +
                "saved immediately."
        ),

        h(
            "div",
            {
                className: "scc-layout"
            },

            h(
                "div",
                {
                    className: "scc-status-list"
                },
                rows
            ),

            h(
                "div",
                {
                    className: "scc-picker"
                },

                h(
                    "div",
                    {
                        className: "scc-picker-title"
                    },
                    "Color Picker"
                ),

                h(
                    "div",
                    {
                        className: "scc-picker-status"
                    },
                    `Editing: ${activeStatus.label}`
                ),

                h("input", {
                    className: "scc-color-input",
                    type: "color",
                    value: colors[activeKey],
                    "aria-label":
                        `Choose ${activeStatus.label} color`,

                    onChange: event => {
                        commitColor(
                            activeKey,
                            event.target.value
                        );
                    }
                })
            )
        )
    );
}

module.exports = class StatusColorCustomizer {
    constructor(meta) {
        this.meta = meta;
        this.colors = {...DEFAULT_COLORS};
    }

    start() {
        this.colors = loadColors(this.meta.name);

        BdApi.DOM.removeStyle(STYLE_ID);
        BdApi.DOM.addStyle(
            STYLE_ID,
            `${statusCss()}\n${CSS}`
        );

        this.applyColors();
    }

    stop() {
        BdApi.DOM.removeStyle(STYLE_ID);

        for (const {key} of STATUSES) {
            document.documentElement.style.removeProperty(
                `--scc-${key}`
            );
        }
    }

    getSettingsPanel() {
        return BdApi.React.createElement(
            SettingsPanel,
            {
                plugin: this
            }
        );
    }

    applyColors() {
        for (const {key} of STATUSES) {
            document.documentElement.style.setProperty(
                `--scc-${key}`,
                this.colors[key]
            );
        }
    }

    setColor(key, value) {
        const color = normalizeHex(value);

        if (!color || !(key in DEFAULT_COLORS)) {
            return;
        }

        this.colors = {
            ...this.colors,
            [key]: color
        };

        document.documentElement.style.setProperty(
            `--scc-${key}`,
            color
        );

        BdApi.Data.save(
            this.meta.name,
            DATA_KEY,
            this.colors
        );
    }
};