diff --git a/src/plugins/mentionAvatars/README.md b/src/plugins/mentionAvatars/README.md
index 912b5191..5e553419 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
![](https://github.com/user-attachments/assets/fc76ea47-5e19-4063-a592-c57785a75cc7)
+![](https://github.com/user-attachments/assets/76c4c3d9-7cde-42db-ba84-903cbb40c163)
diff --git a/src/plugins/mentionAvatars/index.tsx b/src/plugins/mentionAvatars/index.tsx
index 311303ab..53ab93e3 100644
--- a/src/plugins/mentionAvatars/index.tsx
+++ b/src/plugins/mentionAvatars/index.tsx
@@ -10,21 +10,42 @@ import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
-import { SelectedGuildStore, useState } from "@webpack/common";
+import { GuildStore, SelectedGuildStore, useState } from "@webpack/common";
import { User } from "discord-types/general";
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
}
});
+function DefaultRoleIcon() {
+ return (
+
+ );
+}
+
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 +53,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])"
+ }
}],
settings,
@@ -47,12 +75,31 @@ export default definePlugin({
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
-
+
{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 022f968c..64eb4141 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 febb8f9a..d27759e9 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