From 4b16fbcaa9b8b0b2401dfd48d7690e7830d82af8 Mon Sep 17 00:00:00 2001 From: SerStars <90714930+SerStars@users.noreply.github.com> Date: Mon, 26 Aug 2024 12:27:00 +0200 Subject: [PATCH] MentionAvatars: Also display role icons in role mentions (#2801) Co-authored-by: Vendicated --- src/plugins/mentionAvatars/README.md | 3 +- src/plugins/mentionAvatars/index.tsx | 59 ++++++++++++++++++++++++--- src/plugins/mentionAvatars/styles.css | 7 +++- src/utils/constants.ts | 4 ++ 4 files changed, 64 insertions(+), 9 deletions(-) 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