Added modal

RoleMembersModal.tsx

@@ -0,0 +1,39 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { ModalCloseButton, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { Forms, Parser } from "@webpack/common";
+import { GuildMember } from "discord-types/general";
+
+const cl = classNameFactory("vc-inrole-");
+
+export function showInRoleModal(members: GuildMember[], roleId: string, channelId: string) {
+    openModal(props =>
+        <>
+
+            <ModalRoot {...props} size={ModalSize.DYNAMIC} fullscreenOnMobile={true}>
+                <ModalHeader className={cl("header")}>
+                    <Forms.FormText style={{ fontSize: "1.2rem", fontWeight: "bold", marginRight: "7px" }}>Members of role {
+                        Parser.parse(`<@&${roleId}>`, true, { channelId, viewingChannelId: channelId })
+                    } ({members.length})</Forms.FormText>
+                    <ModalCloseButton onClick={props.onClose} className={cl("close")} />
+                </ModalHeader>
+                <div style={{ padding: "13px 20px" }} className={cl("member-list")}>
+                    {
+                        members.length !== 0 ? members.map(member =>
+                            <>
+                                <Forms.FormText className={cl("modal-member")}>
+                                    {Parser.parse(`<@${member.userId}>`, true, { channelId, viewingChannelId: channelId })}
+                                </Forms.FormText>
+                            </>
+                        ) : <Forms.FormText>Looks like no online cached members with that role were found. Try scrolling down on your member list to cache more users!</Forms.FormText>
+                    }
+                </div>
+            </ModalRoot>
+        </>
+    );
+}

index.tsx

@@ -4,12 +4,15 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./style.css";
+
 import { ApplicationCommandInputType, ApplicationCommandOptionType, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Forms, GuildMemberStore, Parser } from "@webpack/common";
+import { GuildMember } from "discord-types/general";
 
-import { showInRoleModal } from "./modal";
+import { showInRoleModal } from "./RoleMembersModal";
 
 export default definePlugin({
     name: "InRole",
@@ -44,15 +47,14 @@ export default definePlugin({
                     return sendBotMessage(ctx.channel.id, { content: "Make sure that you are in a server." });
                 }
                 const role = args[0].value;
-                console.log(role);
                 const members = GuildMemberStore.getMembers(ctx.guild!.id);
-                const membersInRole = [];
+                const membersInRole: GuildMember[] = [];
                 members.forEach(member => {
                     if (member.roles.includes(role)) {
-                        console.log(member);
+                        membersInRole.push(member);
                     }
                 });
-                showInRoleModal(membersInRole, role);
+                showInRoleModal(membersInRole, role, ctx.channel.id);
             }
         }
     ]

style.css

@@ -0,0 +1,29 @@
+.vc-inrole-member-list {
+    max-height: 400px;
+    margin-top: 10px;
+    margin-bottom: 13px;
+    overflow-x: hidden;
+}
+
+.vc-inrole-member-list::-webkit-scrollbar {
+    background-color: #fff1;
+    border-radius: 100px;
+    width: 10px;
+}
+
+.vc-inrole-member-list::-webkit-scrollbar-thumb {
+    background-color: #fff3;
+    border-radius: 100px;
+}
+
+.vc-inrole-modal-member {
+    margin: 11px 0;
+}
+
+.vc-inrole-header {
+    padding-top: "15px";
+}
+
+.vc-inrole-close {
+    margin-left: auto;
+}