userplugins/in-role
1
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Access role members even when offline (up to 100), switch from members list, context menu from server #1

Open
Ryfter wants to merge 5 commits from Ryfter/in-role:main into main
pull from: Ryfter/in-role:main
merge into: userplugins:main
Conversation 0 Commits 5 Files changed 5 +50 -47
1 changed files with 50 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 1cd541fd67 - Show all commits

97
RoleMembersModal.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import ErrorBoundary from "@components/ErrorBoundary";
import { InfoIcon } from "@components/Icons";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { findByCodeLazy, findExportedComponentLazy } from "@webpack";
@ -144,60 +145,62 @@ function InRoleModal({ guildId, props, roleId }: { guildId: string; props: Modal
const [selectedRole, selectRole] = useState(roles.find(x => x.id === roleId) || roles[0]);
return (
<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) => {
<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;
if (role.id === guildId) return;
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;
return (
<div
className={cl("modal-list-item-btn")}
onClick={() => selectRole(roles[index])}
role="button"
tabIndex={0}
key={role.id}
>
return (
<div
className={cl("modal-list-item", { "modal-list-item-active": selectedRole.id === role.id })}
className={cl("modal-list-item-btn")}
onClick={() => selectRole(roles[index])}
role="button"
tabIndex={0}
key={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}
/>
)
<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>
}
<Text variant="text-md/normal">
{role?.name || "Unknown role"}
</Text>
</div>
</div>
</div>
);
})}
</ScrollerThin>
<div className={cl("modal-divider")} />
<MembersContainer
guildId={guildId}
roleId={selectedRole.id}
/>
</div>
</ModalContent>
</ModalRoot >
);
})}
</ScrollerThin>
<div className={cl("modal-divider")} />
<MembersContainer
guildId={guildId}
roleId={selectedRole.id}
/>
</div>
</ModalContent>
</ModalRoot >
</ErrorBoundary>
);
}