refactor & fix: delete duplicated code & move menu to separate file

src/plugins/roleColorEverywhere/components/ContextMenu.tsx

@@ -0,0 +1,44 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { openModal } from "@utils/modal";
+import { Menu } from "@webpack/common";
+import { Guild } from "discord-types/general";
+
+import { toggleRole } from "../storeHelper";
+import { RoleModal } from "./RolesModal";
+
+export function ContextMenu({ colorsStore, guild, roleId, classFactory }: { guild: Guild, roleId: string, colorsStore: ColorsStore, classFactory: ReturnType<typeof classNameFactory> }) {
+    const cl = classFactory;
+    const togglelabel = (colorsStore[guild.id]?.includes(roleId) ?
+        "Remove role from" :
+        "Add role to") + " coloring list";
+
+    return (
+        <Menu.MenuItem
+            id={cl("context-menu")}
+            label="Coloring"
+        >
+            <Menu.MenuItem
+                id={cl("toggle-role-for-guild")}
+                label={togglelabel}
+                action={() => toggleRole(colorsStore, guild.id, roleId)}
+            />
+            <Menu.MenuItem
+                id={cl("show-color-roles")}
+                label="Show roles"
+                action={() => openModal(modalProps => (
+                    <RoleModal
+                        colorsStore={colorsStore}
+                        modalProps={modalProps}
+                        guild={guild}
+                    />
+                ))}
+            />
+        </Menu.MenuItem>
+    );
+}

src/plugins/roleColorEverywhere/index.tsx

@@ -24,16 +24,13 @@ import { makeRange } from "@components/PluginSettings/components";
 import { Devs } from "@utils/constants";
 import { getCurrentGuild } from "@utils/discord";
 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 { ChannelStore, GuildMemberStore, GuildStore, React } from "@webpack/common";
 
-import { RoleModal } from "./components/RolesModal";
+import { ContextMenu } from "./components/ContextMenu";
-import { toggleRole } from "./storeHelper";
 import { brewUserColor } from "./witchCauldron";
 
-const cl = classNameFactory("rolecolor");
 const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
 
 const useMessageAuthor = findByCodeLazy('"Result cannot be null because the message is not null"');
@@ -265,37 +262,14 @@ export default definePlugin({
             settings.store.userColorFromRoles[guild.id] ??= [];
 
             const role = GuildStore.getRole(guild.id, id);
-            if (!role) return;
+            if (!role || !role.colorString) return;
 
-            const togglelabel = (settings.store.userColorFromRoles[guild.id]?.includes(role.id) ?
+            children.push(ContextMenu({
-                "Remove role from" :
+                classFactory: classNameFactory("rolecolor"),
-                "Add role to") + " coloring list";
+                colorsStore: settings.store.userColorFromRoles,
-
+                roleId: role.id,
-            if (role.colorString) {
+                guild
-                children.push(
+            }));
-                    <Menu.MenuItem
-                        id={cl("context-menu")}
-                        label="Coloring"
-                    >
-                        <Menu.MenuItem
-                            id={cl("toggle-role-for-guild")}
-                            label={togglelabel}
-                            action={() => toggleRole(settings.store.userColorFromRoles, guild.id, role.id)}
-                        />
-                        <Menu.MenuItem
-                            id={cl("show-color-roles")}
-                            label="Show roles"
-                            action={() => openModal(modalProps => (
-                                <RoleModal
-                                    modalProps={modalProps}
-                                    guild={guild}
-                                    colorsStore={settings.store.userColorFromRoles}
-                                />
-                            ))}
-                        />
-                    </Menu.MenuItem>
-                );
-            }
         }
     }
 });