Added role context menu

index.tsx

@@ -7,17 +7,81 @@
 import "./style.css";
 
 import { ApplicationCommandInputType, ApplicationCommandOptionType, sendBotMessage } from "@api/Commands";
+import { getUserSettingLazy } from "@api/UserSettings";
+import { InfoIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
+import { getCurrentChannel, getCurrentGuild } from "@utils/discord";
+import { classes } from "@utils/misc";
 import definePlugin from "@utils/types";
-import { Forms, GuildMemberStore, Parser } from "@webpack/common";
+import { Forms, GuildMemberStore, GuildStore, Menu, Parser } from "@webpack/common";
 import { GuildMember } from "discord-types/general";
+import { PropsWithChildren, SVGProps } from "react";
 
 import { showInRoleModal } from "./RoleMembersModal";
 
+const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
+
+interface BaseIconProps extends IconProps {
+    viewBox: string;
+}
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    height?: string | number;
+    width?: string | number;
+}
+
+function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
+    return (
+        <svg
+            className={classes(className, "vc-icon")}
+            role="img"
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            {...svgProps}
+        >
+            {children}
+        </svg>
+    );
+}
+
+
+function EyeIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-eye-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"
+            />
+        </Icon>
+    );
+}
+
+function getMembersInRole(roleId: string, guildId: string) {
+    const members = GuildMemberStore.getMembers(guildId);
+    const membersInRole: GuildMember[] = [];
+    members.forEach(member => {
+        if (member.roles.includes(roleId)) {
+            membersInRole.push(member);
+        }
+    });
+    return membersInRole;
+}
+
 export default definePlugin({
     name: "InRole",
     description: "Know who is in a role (read plugin info!)",
     authors: [Devs.nin0dev],
+    dependencies: ["UserSettingsAPI"],
+    start() {
+        // DeveloperMode needs to be enabled for the context menu to be shown
+        DeveloperMode.updateSetting(true);
+    },
     settingsAboutComponent: () => {
         return (
             <>
@@ -28,6 +92,7 @@ export default definePlugin({
             </>
         );
     },
+
     commands: [
         {
             name: "inrole",
@@ -47,15 +112,31 @@ export default definePlugin({
                     return sendBotMessage(ctx.channel.id, { content: "Make sure that you are in a server." });
                 }
                 const role = args[0].value;
-                const members = GuildMemberStore.getMembers(ctx.guild!.id);
+                showInRoleModal(getMembersInRole(role, ctx.guild.id), role, ctx.channel.id);
-                const membersInRole: GuildMember[] = [];
-                members.forEach(member => {
-                    if (member.roles.includes(role)) {
-                        membersInRole.push(member);
-                    }
-                });
-                showInRoleModal(membersInRole, role, ctx.channel.id);
             }
         }
-    ]
+    ],
+    contextMenus: {
+        "dev-context"(children, { id }: { id: string; }) {
+            const guild = getCurrentGuild();
+            if (!guild) return;
+
+            const channel = getCurrentChannel();
+            if (!channel) return;
+
+            const role = GuildStore.getRole(guild.id, id);
+            if (!role) return;
+
+            children.push(
+                <Menu.MenuItem
+                    id="vc-view-inrole"
+                    label="View Members in Role"
+                    action={() => {
+                        showInRoleModal(getMembersInRole(role.id, guild.id), role.id, channel.id);
+                    }}
+                    icon={InfoIcon}
+                />
+            );
+        }
+    }
 });