import { definePluginSettings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import { CopyIdIcon, ImageIcon } from "@components/Icons";
import { copyToClipboard } from "@utils/clipboard";
import { Devs } from "@utils/constants";
import { getCurrentChannel, getCurrentGuild, getIntlMessage, openImageModal } from "@utils/discord";
import { isTruthy } from "@utils/guards";
import { classes } from "@utils/misc";
import definePlugin, { OptionType } from "@utils/types";
import { Guild, PopoutProps, Role } from "@vencord/discord-types";
import { findByCodeLazy, findByPropsLazy, findCssClassesLazy } from "@webpack";
import { ContextMenuApi, GuildRoleStore, Menu, PermissionStore, Popout, useRef } from "@webpack/common";
import { ComponentType } from "react";
const GuildSettingsActions = findByPropsLazy("open", "selectRole", "updateGuild");
const MenuItemClasses = findCssClassesLazy("item", "labelContainer", "colorDefault", "label", "iconContainer");
const loadRoleMembers = findByCodeLazy(".GUILD_ROLE_MEMBER_IDS(", "requestMembersById");
const DeveloperMode = getUserSettingLazy("appearance", "developerMode")!;
function PencilIcon() {
return (
);
}
function AppearanceIcon() {
return (
);
}
function RoleMembersIcon() {
return (
);
}
const settings = definePluginSettings({
roleIconFileFormat: {
type: OptionType.SELECT,
description: "File format to use when viewing role icons",
options: [
{
label: "png",
value: "png",
default: true
},
{
label: "webp",
value: "webp",
},
{
label: "jpg",
value: "jpg"
}
]
}
});
interface RoleMemberPopoutProps {
popoutProps: PopoutProps;
guildId: string;
channelId: string;
roleId: string;
}
type RoleMemberPopout = ComponentType;
let RoleMemberPopout: RoleMemberPopout = () => null;
export function buildExtraRoleContextMenuItems(role: Role, guild: Guild, popoutRef?: React.RefObject) {
if (!role) return { before: [], after: [] };
const before = [
PermissionStore.getGuildPermissionProps(guild).canManageRoles && (
{
await GuildSettingsActions.open(guild.id, "ROLES");
GuildSettingsActions.selectRole(role.id);
}}
icon={PencilIcon}
/>
),
role.colorString && (
copyToClipboard(role.colorString!)}
icon={AppearanceIcon}
/>
)
].filter(isTruthy);
const after = [
role.icon && (
{
openImageModal({
url: `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`,
height: 128,
width: 128
});
}}
icon={ImageIcon}
/>
),
popoutRef && (
(
loadRoleMembers(guild.id, role.id)}
renderPopout={popoutProps => (
)}
>
{popoutProps => (
)}
)}
/>
)
].filter(isTruthy);
return { before, after };
}
export function openRoleContextMenu(event: React.MouseEvent, { guildId, id: roleId }: { guildId: string; id: string; }) {
const guild = getCurrentGuild();
if (!guild || guild.id !== guildId) return;
const role = GuildRoleStore.getRole(guildId, roleId);
if (!role) return;
ContextMenuApi.openContextMenu(event, () => {
const popoutRef = useRef(null);
const { before, after } = buildExtraRoleContextMenuItems(role, guild, popoutRef);
return (
{before}
{after}
copyToClipboard(role.id)}
/>
);
});
}
export default definePlugin({
name: "BetterRoleContext",
description: "Adds options to copy role color / edit role / view role icon when right clicking roles in the user profile or in the member list",
tags: ["Roles", "Appearance"],
authors: [Devs.Ven, Devs.goodbee, Devs.nightmaresan],
dependencies: ["UserSettingsAPI"],
settings,
openRoleContextMenu,
patches: [
{
find: ".ROLE_MENTION)",
replacement: {
match: /function (\i)(?=.+?renderPopout:.{0,20}\1,\{guildId:\i,channelId:\i)/,
replace: "$self.RoleMembers=$1;$&"
}
},
// Conflicts with RoleColorEverywhere which changes the code at the end of our match. (and also uses same find & similar match)
// However, BetterRoleContext applies first (alphabetic order), so it's not an issue
{
find: 'tutorialId:"whos-online',
replacement: {
match: /(?<=#{intl::CHANNEL_MEMBERS_A11Y_LABEL}.{0,200}?"aria-hidden":!0,)children:.{0,200}?(?:—|\\u2014) ",\i\]\}\)\]/,
replace: "onContextMenu:e=>$self.openRoleContextMenu(e,arguments[0]),$&"
}
}
],
start() {
// DeveloperMode needs to be enabled for the context menu to be shown
DeveloperMode.updateSetting(true);
},
set RoleMembers(component: RoleMemberPopout) {
RoleMemberPopout = component;
},
contextMenus: {
"dev-context"(children, { id }: { id: string; }) {
const popoutRef = useRef(null);
const guild = getCurrentGuild();
if (!guild) return;
const role = GuildRoleStore.getRole(guild.id, id);
if (!role) return;
const { before, after } = buildExtraRoleContextMenuItems(role, guild, popoutRef);
children.unshift(...before);
children.push(...after);
}
}
});