RoleMembersModal.tsx

@@ -4,40 +4,225 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Forms, Parser } from "@webpack/common";
-import { GuildMember } from "discord-types/general";
+import { InfoIcon } from "@components/Icons";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { findByCodeLazy, findExportedComponentLazy } from "@webpack";
+import { Constants, GuildChannelStore, GuildMemberStore, GuildStore, Parser, RestAPI, ScrollerThin, showToast, Text, Tooltip, useEffect, UserStore, useState } from "@webpack/common";
+import { UnicodeEmoji } from "@webpack/types";
+import type { Role } from "discord-types/general";
 
-const cl = classNameFactory("vc-inrole-");
+import { cl, GuildUtils } from "./utils";
 
-export function showInRoleModal(members: GuildMember[], roleId: string, channelId: string) {
-    openModal(props =>
-        <>
-            <ErrorBoundary>
-                <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>
-                    <ModalContent>
-                        <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>
+type GetRoleIconData = (role: Role, size: number) => { customIconSrc?: string; unicodeEmoji?: UnicodeEmoji; };
+const ThreeDots = findExportedComponentLazy("Dots", "AnimatedDots");
+const getRoleIconData: GetRoleIconData = findByCodeLazy("convertSurrogateToName", "customIconSrc", "unicodeEmoji");
+
+let rolesFetched2;
+let members2;
+
+function getRoleIconSrc(role: Role) {
+    const icon = getRoleIconData(role, 20);
+    if (!icon) return;
+
+    const { customIconSrc, unicodeEmoji } = icon;
+    return customIconSrc ?? unicodeEmoji?.url;
 }
+
+function MembersContainer({ guildId, roleId }: { guildId: string; roleId: string; }) {
+
+    const channelId = GuildChannelStore.getChannels(guildId).SELECTABLE[0].channel.id;
+
+    // RMC: RoleMemberCounts
+    const [RMC, setRMC] = useState({});
+    useEffect(() => {
+        let loading = true;
+        const interval = setInterval(async () => {
+            try {
+                await RestAPI.get({
+                    url: Constants.Endpoints.GUILD_ROLE_MEMBER_COUNTS(guildId)
+                }).then(x => {
+                    if (x.ok) setRMC(x.body); clearInterval(interval);
+                });
+            } catch (error) { console.error("Error fetching member counts", error); }
+        }, 1000);
+        return () => { loading = false; };
+    }, []);
+
+    let usersInRole = [];
+    const [rolesFetched, setRolesFetched] = useState(Array<string>);
+    useEffect(() => {
+        if (!rolesFetched.includes(roleId)) {
+            const interval = setInterval(async () => {
+                try {
+                    const response = await RestAPI.get({
+                        url: Constants.Endpoints.GUILD_ROLE_MEMBER_IDS(guildId, roleId),
+                    });
+                    ({ body: usersInRole } = response);
+                    await GuildUtils.requestMembersById(guildId, usersInRole, !1);
+                    setRolesFetched([...rolesFetched, roleId]);
+                    rolesFetched2 = rolesFetched;
+                    clearInterval(interval);
+                } catch (error) { console.error("Error fetching members:", error); }
+            }, 1200);
+            return () => clearInterval(interval);
+        }
+    }, [roleId]); // Fetch roles
+
+    const [members, setMembers] = useState(GuildMemberStore.getMembers(guildId));
+    useEffect(() => {
+        const interval = setInterval(async () => {
+            if (usersInRole) {
+                const guildMembers = GuildMemberStore.getMembers(guildId);
+                const storedIds = guildMembers.map(user => user.userId);
+                usersInRole.every(id => storedIds.includes(id)) && clearInterval(interval);
+                if (guildMembers !== members) {
+                    setMembers(GuildMemberStore.getMembers(guildId));
+                }
+            }
+        }, 500);
+        return () => clearInterval(interval);
+    }, [roleId, rolesFetched]);
+
+    const roleMembers = members.filter(x => x.roles.includes(roleId)).map(x => UserStore.getUser(x.userId));
+
+    return (
+        <div className={cl("modal-members")}>
+            <div className={cl("member-list-header")}>
+                <div className={cl("member-list-header-text")}>
+                    <Text>
+                        {roleMembers.length} loaded / {RMC[roleId] || 0} members with this role<br />
+                    </Text>
+                    <Tooltip text="For roles with over 100 members, only the first 100 and the cached members will be shown.">
+                        {props => <InfoIcon {...props} />}
+                    </Tooltip>
+                </div>
+
+            </div>
+            <ScrollerThin orientation="auto">
+                {roleMembers.map(x => {
+                    return (
+                        <div key={x.id} className={cl("user-div")}>
+                            <img
+                                className={cl("user-avatar")}
+                                src={x.getAvatarURL()}
+                                alt=""
+                            />
+                            {Parser.parse(`<@${x.id}>`, true, { channelId, viewingChannelId: channelId })}
+                        </div>
+                    );
+                })}
+                {
+                    (Object.keys(RMC).length === 0) ? (
+                        <div className={cl("member-list-footer")}>
+                            <ThreeDots dotRadius={5} themed={true} />
+                        </div>
+                    ) : !RMC[roleId] ? (
+                        <Text className={cl("member-list-footer")} variant="text-md/normal">No member found with this role</Text>
+                    ) : RMC[roleId] === roleMembers.length ? (
+                        <>
+                            <div className={cl("divider")} />
+                            <Text className={cl("member-list-footer")} variant="text-md/normal">All members loaded</Text>
+                        </>
+                    ) : rolesFetched.includes(roleId) ? (
+                        <>
+                            <div className={cl("divider")} />
+                            <Text className={cl("member-list-footer")} variant="text-md/normal">All cached members loaded</Text>
+                        </>
+                    ) : (
+                        <div className={cl("member-list-footer")}>
+                            <ThreeDots dotRadius={5} themed={true} />
+                        </div>
+                    )
+                }
+            </ScrollerThin>
+        </div>
+    );
+}
+
+function InRoleModal({ guildId, props, roleId }: { guildId: string; props: ModalProps; roleId: string; }) {
+    const roleObj = GuildStore.getRoles(guildId);
+    const roles = Object.keys(roleObj).map(key => roleObj[key]).sort((a, b) => b.position - a.position);
+
+    const [selectedRole, selectRole] = useState(roles.find(x => x.id === roleId) || roles[0]);
+
+    let cooldown;
+    useEffect(() => {
+        const timeout = setTimeout(() => cooldown = false, 1000);
+        return () => clearTimeout(timeout);
+    }, [selectedRole]);
+
+    return (
+        <ErrorBoundary>
+            <ModalRoot {...props} size={ModalSize.LARGE}>
+                <ModalHeader>
+                    <Text className={cl("modal-title")} variant="heading-lg/semibold">View members with role</Text>
+                    <ModalCloseButton onClick={props.onClose} />
+                </ModalHeader>
+                <ModalContent className={cl("modal-content")}>
+                    <div className={cl("modal-container")}>
+                        <ScrollerThin className={cl("modal-list")} orientation="auto">
+                            {roles.map((role, index) => {
+
+                                if (role.id === guildId) return;
+
+                                const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
+
+                                return (
+                                    <div
+                                        className={cl("modal-list-item-btn")}
+                                        onClick={() => {
+                                            if (selectedRole.id === roles[index].id) return;
+                                            cooldown && !rolesFetched2.includes(roles[index].id) ? showToast("To limit ratelimiting, please wait at least a second before switching roles.")
+                                                : (selectRole(roles[index]), cooldown = true);
+                                        }}
+                                        role="button"
+                                        tabIndex={0}
+                                        key={role.id}
+                                    >
+                                        <div
+                                            className={cl("modal-list-item", { "modal-list-item-active": selectedRole.id === role.id })}
+                                        >
+                                            <span
+                                                className={cl("modal-role-circle")}
+                                                style={{ backgroundColor: role?.colorString || "var(--primary-300)" }}
+                                            />
+                                            {
+                                                roleIconSrc != null && (
+                                                    <img
+                                                        className={cl("modal-role-image")}
+                                                        src={roleIconSrc}
+                                                    />
+                                                )
+
+                                            }
+                                            <Text variant="text-md/normal">
+                                                {role?.name || "Unknown role"}
+                                            </Text>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </ScrollerThin>
+                        <div className={cl("modal-divider")} />
+                        <MembersContainer
+                            guildId={guildId}
+                            roleId={selectedRole.id}
+                        />
                     </div>
                 </ModalContent>
             </ModalRoot >
         </ErrorBoundary>
-        </>
     );
 }
+
+export function showInRoleModal(guildId: string, roleId: string) {
+    openModal(props =>
+        <InRoleModal
+            guildId={guildId}
+            props={props}
+            roleId={roleId}
+        />
+    );
+}
+

icons.tsx

@@ -0,0 +1,17 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+export function MemberIcon() {
+    return (
+        <svg
+            height="20"
+            width="20"
+            viewBox="0 0 24 24"
+        >
+            <path fill="currentColor" d="M14.5 8a3 3 0 1 0-2.7-4.3c-.2.4.06.86.44 1.12a5 5 0 0 1 2.14 3.08c.01.06.06.1.12.1ZM18.44 17.27c.15.43.54.73 1 .73h1.06c.83 0 1.5-.67 1.5-1.5a7.5 7.5 0 0 0-6.5-7.43c-.55-.08-.99.38-1.1.92-.06.3-.15.6-.26.87-.23.58-.05 1.3.47 1.63a9.53 9.53 0 0 1 3.83 4.78ZM12.5 9a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM2 20.5a7.5 7.5 0 0 1 15 0c0 .83-.67 1.5-1.5 1.5a.2.2 0 0 1-.2-.16c-.2-.96-.56-1.87-.88-2.54-.1-.23-.42-.15-.42.1v2.1a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2.1c0-.25-.31-.33-.42-.1-.32.67-.67 1.58-.88 2.54a.2.2 0 0 1-.2.16A1.5 1.5 0 0 1 2 20.5Z" />
+        </svg>
+    );
+}

index.tsx

@@ -7,33 +7,29 @@
 import "./style.css";
 
 import { ApplicationCommandInputType, ApplicationCommandOptionType, sendBotMessage } from "@api/Commands";
+import { findGroupChildrenByChildId } from "@api/ContextMenu";
 import { getUserSettingLazy } from "@api/UserSettings";
-import { InfoIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { getCurrentChannel, getCurrentGuild } from "@utils/discord";
 import definePlugin from "@utils/types";
 import { Forms, GuildMemberStore, GuildStore, Menu, Parser } from "@webpack/common";
-import { GuildMember } from "discord-types/general";
+import { Guild, GuildMember } from "discord-types/general";
 
+import { MemberIcon } from "./icons";
 import { showInRoleModal } from "./RoleMembersModal";
 
 const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
 
-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 with the role context menu or /inrole command (read plugin info!)",
-    authors: [Devs.nin0dev],
+    authors: [
+        Devs.nin0dev,
+        {
+            name: "Ryfter",
+            id: 898619112350183445n,
+        },
+    ],
     dependencies: ["UserSettingsAPI"],
     start() {
         // DeveloperMode needs to be enabled for the context menu to be shown
@@ -44,9 +40,8 @@ export default definePlugin({
             <>
                 <Forms.FormText style={{ fontSize: "1.2rem", marginTop: "15px", fontWeight: "bold" }}>{Parser.parse(":warning:")} Limitations</Forms.FormText>
                 <Forms.FormText style={{ marginTop: "10px", fontWeight: "500" }} >If you don't have mod permissions on the server, and that server is large (over 100 members), the plugin may be limited in the following ways:</Forms.FormText>
-                <Forms.FormText>• Offline members won't be listed</Forms.FormText>
-                <Forms.FormText>• Up to 100 members will be listed by default. To get more, scroll down in the member list to load more members.</Forms.FormText>
-                <Forms.FormText>• However, friends will always be shown regardless of their status.</Forms.FormText>
+                <Forms.FormText>• Up to 100 members will be listed by default for each role. To get more, scroll down in the member list to cache more members.</Forms.FormText>
+                <Forms.FormText>• However, friends will always be shown.</Forms.FormText>
             </>
         );
     },
@@ -70,7 +65,7 @@ export default definePlugin({
                     return sendBotMessage(ctx.channel.id, { content: "Make sure that you are in a server." });
                 }
                 const role = args[0].value;
-                showInRoleModal(getMembersInRole(role, ctx.guild.id), role, ctx.channel.id);
+                showInRoleModal(ctx.guild.id, role);
             }
         }
     ],
@@ -90,9 +85,21 @@ export default definePlugin({
                     id="vc-view-inrole"
                     label="View Members in Role"
                     action={() => {
-                        showInRoleModal(getMembersInRole(role.id, guild.id), role.id, channel.id);
+                        showInRoleModal(guild.id, role.id);
                     }}
-                    icon={InfoIcon}
+                    icon={MemberIcon}
+                />
+            );
+        },
+        "guild-header-popout"(children, { guild }: { guild: Guild, onClose(): void; }) {
+            if (!guild) return;
+            const group = findGroupChildrenByChildId("privacy", children);
+            group?.push(
+                <Menu.MenuItem
+                    label="View members in role"
+                    id="inrole-menuitem"
+                    icon={MemberIcon}
+                    action={() => showInRoleModal(guild.id, "0")}
                 />
             );
         }

style.css

@@ -1,29 +1,139 @@
-.vc-inrole-member-list {
-    max-height: 400px;
-    margin-top: 10px;
-    margin-bottom: 13px;
-    overflow-x: hidden;
+.vc-inrole-modal-content {
+    padding: 16px 4px 16px 16px;
 }
 
-.vc-inrole-member-list::-webkit-scrollbar {
-    background-color: #fff1;
-    border-radius: 100px;
-    width: 10px;
+.vc-inrole-modal-title {
+    flex-grow: 1;
 }
 
-.vc-inrole-member-list::-webkit-scrollbar-thumb {
-    background-color: #fff3;
-    border-radius: 100px;
+.vc-inrole-modal-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 8px;
 }
 
-.vc-inrole-modal-member {
-    margin: 11px 0;
+.vc-inrole-modal-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-right: 8px;
+    max-width: 300px;
+    min-width: 300px;
 }
 
-.vc-inrole-header {
-    padding-top: "15px";
+.vc-inrole-modal-list-item-btn {
+    cursor: pointer;
 }
 
-.vc-inrole-close {
+.vc-inrole-modal-list-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 5px;
+}
+
+.vc-inrole-modal-list-item:hover {
+    background-color: var(--background-modifier-hover);
+}
+
+.vc-inrole-modal-list-item-active {
+    background-color: var(--background-modifier-selected);
+}
+
+.vc-inrole-modal-list-item > div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.vc-inrole-modal-role-circle {
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+}
+
+.vc-inrole-modal-role-image {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+}
+
+.vc-inrole-modal-divider {
+    width: 2px;
+    background-color: var(--background-modifier-active);
+}
+
+.vc-inrole-role-button {
+    border-radius: var(--radius-xs);
+    background: var(--bg-mod-faint);
+    color: var(--interactive-normal);
+    border: 1px solid var(--border-faint);
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 24px;
+    padding: 4px
+}
+
+.custom-profile-theme .vc-inrole-role-button {
+    background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
+    border-color: var(--profile-body-border-color)
+}
+
+.vc-inrole-user-div{
+    display: flex;
+    align-items: center;
+    gap: 0.2em;
+}
+
+.vc-inrole-modal-members {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+
+.vc-inrole-user-avatar {
+    border-radius: 50%;
+    padding: 5px;
+    width: 30px;
+    height: 30px;
+}
+
+.vc-inrole-member-list-header {
+    background-color: var(--background-secondary);
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.vc-inrole-member-list-header-text {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.vc-inrole-member-list-header-text .vc-info-icon {
+    color: var(--interactive-muted);
     margin-left: auto;
+    cursor: pointer;
+    transition: color ease-in 0.1s;
+}
+
+.vc-inrole-member-list-header-text .vc-info-icon:hover {
+    color: var(--interactive-active);
+}
+
+.vc-inrole-member-list-footer {
+    padding: 5px;
+    text-align: center;
+    font-style: italic;
+}
+
+.vc-inrole-divider {
+    height: 2px;
+    width: 100%;
+    background-color: var(--background-modifier-active);
 }

utils.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { findByPropsLazy } from "@webpack";
+
+export const cl = classNameFactory("vc-inrole-");
+export const GuildUtils = findByPropsLazy("requestMembersById");