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 ![](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 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