diff --git a/src/plugins/mentionAvatars/README.md b/src/plugins/mentionAvatars/README.md
index 912b5191676..5e553419ed7 100644
--- a/src/plugins/mentionAvatars/README.md
+++ b/src/plugins/mentionAvatars/README.md
@@ -1,5 +1,6 @@
# MentionAvatars
-Shows user avatars inside mentions
+Shows user avatars and role icons inside mentions

+
diff --git a/src/plugins/mentionAvatars/index.tsx b/src/plugins/mentionAvatars/index.tsx
index a78bd668f38..a059832a845 100644
--- a/src/plugins/mentionAvatars/index.tsx
+++ b/src/plugins/mentionAvatars/index.tsx
@@ -11,20 +11,30 @@ import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import type { UserRecord } from "@vencord/discord-types";
-import { SelectedGuildStore, useState } from "@webpack/common";
+import { GuildStore, SelectedGuildStore, useState } from "@webpack/common";
const settings = definePluginSettings({
showAtSymbol: {
type: OptionType.BOOLEAN,
- description: "Whether the the @ symbol should be displayed",
+ description: "Whether the the @ symbol should be displayed on user mentions",
default: true
}
});
+const DefaultRoleIcon = () => (
+
+);
+
export default definePlugin({
name: "MentionAvatars",
- description: "Shows user avatars inside mentions",
- authors: [Devs.Ven],
+ description: "Shows user avatars and role icons inside mentions",
+ authors: [Devs.Ven, Devs.SerStars],
patches: [{
find: ".USER_MENTION)",
@@ -32,6 +42,13 @@ export default definePlugin({
match: /children:"@"\.concat\((null!=\i\?\i:\i)\)(?<=\.useName\((\i)\).+?)/,
replace: "children:$self.renderUsername({username:$1,user:$2})"
}
+ },
+ {
+ find: ".ROLE_MENTION)",
+ replacement: {
+ match: /children:\[\i&&.{0,50}\.RoleDot.{0,300},\i(?=\])/,
+ replace: "$&,$self.renderRoleIcon(arguments[0])"
+ }
}],
renderUsername: ErrorBoundary.wrap((props: { user?: UserRecord; username: string; }) => {
@@ -47,13 +64,29 @@ export default definePlugin({
>
{getUsernameString(username)}
);
- }, { noop: true })
+ }, { noop: true }),
+
+ renderRoleIcon: ErrorBoundary.wrap(({ roleId, guildId }: { roleId: string; guildId: string; }) => {
+ // Discord uses Role Mentions for uncached users because .... idk
+ if (!roleId) return null;
+ const role = GuildStore.getRole(guildId, roleId);
+
+ if (!role?.icon) return ;
+
+ return (
+
+ );
+ }),
});
function getUsernameString(username: string) {
diff --git a/src/plugins/mentionAvatars/styles.css b/src/plugins/mentionAvatars/styles.css
index 022f968c0ab..64eb41416c5 100644
--- a/src/plugins/mentionAvatars/styles.css
+++ b/src/plugins/mentionAvatars/styles.css
@@ -1,8 +1,11 @@
-.vc-mentionAvatars-avatar {
+.vc-mentionAvatars-icon {
vertical-align: middle;
width: 1em !important; /* insane discord sets width: 100% in channel topic */
height: 1em;
margin: 0 4px 0.2rem 2px;
- border-radius: 50%;
box-sizing: border-box;
}
+
+.vc-mentionAvatars-role-icon {
+ margin: 0 2px 0.2rem 4px;
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index febb8f9afef..d27759e959e 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -546,6 +546,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
name: "Lumap",
id: 585278686291427338n,
},
+ SerStars: {
+ name: "SerStars",
+ id: 861631850681729045n,
+ },
} satisfies Record);
// iife so #__PURE__ works correctly