refactor(roleColorEverywhere): make it more fun and easy to pull patches from upstream

src/plugins/roleColorEverywhere/components/RolesModal.tsx

@@ -0,0 +1,28 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { ModalProps } from "@utils/modal";
+import { GuildStore, React } from "@webpack/common";
+import { Guild } from "discord-types/general";
+
+import { toggleRole } from "../storeHelper";
+import { RoleModalList } from "./RolesView";
+
+export function RoleModal({ modalProps, guild, colorsStore }: { modalProps: ModalProps, guild: Guild, colorsStore: Record<string, string[]> }) {
+    const [ids, setIds] = React.useState(colorsStore[guild.id]);
+    const roles = React.useMemo(() => ids.map(id => GuildStore.getRole(guild.id, id)), [ids]);
+
+    return <RoleModalList
+        modalProps={modalProps}
+        roleList={roles}
+        header={`${guild.name} highlighted roles.`}
+        onRoleRemove={id => {
+            toggleRole(colorsStore, guild.id, id);
+            setIds(colorsStore[guild.id]);
+        }}
+    />;
+}
+

src/plugins/roleColorEverywhere/index.tsx

@@ -22,16 +22,16 @@ import { getUserSettingLazy } from "@api/UserSettings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { makeRange } from "@components/PluginSettings/components";
 import { Devs } from "@utils/constants";
-import { Logger } from "@utils/Logger";
 import { getCurrentGuild } from "@utils/discord";
-import { ModalProps, openModal } from "@utils/modal";
+import { Logger } from "@utils/Logger";
+import { openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy } from "@webpack";
 import { ChannelStore, GuildMemberStore, GuildStore, Menu, React } from "@webpack/common";
-import { Guild } from "discord-types/general";
 
-import { blendColors } from "./blendColors";
+import { RoleModal } from "./components/RolesModal";
-import { RoleModalList } from "./components/RolesView";
+import { toggleRole } from "./storeHelper";
+import { brewUserColor } from "./witchCauldron";
 
 const cl = classNameFactory("rolecolor");
 const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
@@ -85,72 +85,6 @@ const settings = definePluginSettings({
     userColorFromRoles: Record<string, string[]>
 }>();
 
-function atLeastOneOverrideAppliesToGuild(overrides: string[], guildId: string) {
-    for (const role of overrides) {
-        if (GuildStore.getRole(guildId, role)) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-function getPrimaryRoleOverrideColor(roles: string[], guildId: string) {
-    const overrides = settings.store.userColorFromRoles[guildId];
-    if (!overrides?.length) return null;
-
-    if (atLeastOneOverrideAppliesToGuild(overrides, guildId!)) {
-        const memberRoles = roles.map(role => GuildStore.getRole(guildId!, role)).filter(e => e);
-        const blendColorsFromRoles = memberRoles
-            .filter(role => overrides.includes(role.id))
-            .sort((a, b) => b.color - a.color);
-
-        // if only one override apply, return the first role color
-        if (blendColorsFromRoles.length < 2)
-            return blendColorsFromRoles[0]?.colorString ?? null;
-
-        const color = blendColorsFromRoles
-            .slice(1)
-            .reduce(
-                (p, c) => blendColors(p, c!.colorString!, .5),
-                blendColorsFromRoles[0].colorString!
-            );
-
-        return color;
-    }
-
-    return null;
-}
-
-// Using plain replaces cause i dont want sanitize regexp
-function toggleRole(guildId: string, id: string) {
-    let roles = settings.store.userColorFromRoles[guildId];
-    const len = roles.length;
-
-    roles = roles.filter(e => e !== id);
-
-    if (len === roles.length) {
-        roles.push(id);
-    }
-
-    settings.store.userColorFromRoles[guildId] = roles;
-}
-
-function RoleModal({ modalProps, guild }: { modalProps: ModalProps, guild: Guild }) {
-    const [ids, setIds] = React.useState(settings.store.userColorFromRoles[guild.id]);
-    const roles = React.useMemo(() => ids.map(id => GuildStore.getRole(guild.id, id)), [ids]);
-
-    return <RoleModalList
-        modalProps={modalProps}
-        roleList={roles}
-        header={`${guild.name} highlighted roles.`}
-        onRoleRemove={id => {
-            toggleRole(guild.id, id);
-            setIds(settings.store.userColorFromRoles[guild.id]);
-        }}
-    />;
-}
-
 export default definePlugin({
     name: "RoleColorEverywhere",
     authors: [Devs.KingFish, Devs.lewisakura, Devs.AutumnVN, Devs.Kyuuhachi, Devs.jamesbt365, Devs.EnergoStalin],
@@ -245,9 +179,9 @@ export default definePlugin({
         try {
             const guildId = ChannelStore.getChannel(channelOrGuildId)?.guild_id ?? GuildStore.getGuild(channelOrGuildId)?.id;
             if (guildId == null) return null;
-                const member = GuildMemberStore.getMember(guildId, userId);
+            const member = GuildMemberStore.getMember(guildId, userId);
 
-            return getPrimaryRoleOverrideColor(member.roles, channelOrGuildId) ?? member.colorString;
+            return brewUserColor(settings.store.userColorFromRoles, member.roles, channelOrGuildId) ?? member.colorString;
         } catch (e) {
             new Logger("RoleColorEverywhere").error("Failed to get color string", e);
         }
@@ -340,7 +274,7 @@ export default definePlugin({
                         <Menu.MenuItem
                             id={cl("toggle-role-for-guild")}
                             label={togglelabel}
-                            action={() => toggleRole(guild.id, role.id)}
+                            action={() => toggleRole(settings.store.userColorFromRoles, guild.id, role.id)}
                         />
                         <Menu.MenuItem
                             id={cl("show-color-roles")}
@@ -349,6 +283,7 @@ export default definePlugin({
                                 <RoleModal
                                     modalProps={modalProps}
                                     guild={guild}
+                                    colorsStore={settings.store.userColorFromRoles}
                                 />
                             ))}
                         />

src/plugins/roleColorEverywhere/storeHelper.ts

@@ -0,0 +1,31 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { GuildStore } from "@webpack/common";
+
+// Using plain replaces cause i dont want sanitize regexp
+export function toggleRole(colorsStore: ColorsStore, guildId: string, id: string) {
+    let roles = colorsStore[guildId];
+    const len = roles.length;
+
+    roles = roles.filter(e => e !== id);
+
+    if (len === roles.length) {
+        roles.push(id);
+    }
+
+    colorsStore[guildId] = roles;
+}
+
+export function atLeastOneOverrideAppliesToGuild(overrides: string[], guildId: string) {
+    for (const role of overrides) {
+        if (GuildStore.getRole(guildId, role)) {
+            return true;
+        }
+    }
+
+    return false;
+}

src/plugins/roleColorEverywhere/types.ts

@@ -0,0 +1,7 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+type ColorsStore = Record<string, string[]>;

src/plugins/roleColorEverywhere/witchCauldron.ts

@@ -0,0 +1,37 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { GuildStore } from "@webpack/common";
+
+import { blendColors } from "./blendColors";
+import { atLeastOneOverrideAppliesToGuild } from "./storeHelper";
+
+export function brewUserColor(colorsStore: ColorsStore, roles: string[], guildId: string) {
+    const overrides = colorsStore[guildId];
+    if (!overrides?.length) return null;
+
+    if (atLeastOneOverrideAppliesToGuild(overrides, guildId!)) {
+        const memberRoles = roles.map(role => GuildStore.getRole(guildId!, role)).filter(e => e);
+        const blendColorsFromRoles = memberRoles
+            .filter(role => overrides.includes(role.id))
+            .sort((a, b) => b.color - a.color);
+
+        // if only one override apply, return the first role color
+        if (blendColorsFromRoles.length < 2)
+            return blendColorsFromRoles[0]?.colorString ?? null;
+
+        const color = blendColorsFromRoles
+            .slice(1)
+            .reduce(
+                (p, c) => blendColors(p, c!.colorString!, .5),
+                blendColorsFromRoles[0].colorString!
+            );
+
+        return color;
+    }
+
+    return null;
+}