MentionAvatars: Also display role icons in role mentions (#2801)

Co-authored-by: Vendicated <vendicated@riseup.net>
This commit is contained in:
SerStars 2024-08-26 12:27:00 +02:00 committed by GitHub
parent 7ec842d4b0
commit 4b16fbcaa9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 64 additions and 9 deletions

View file

@ -1,5 +1,6 @@
# MentionAvatars # 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/fc76ea47-5e19-4063-a592-c57785a75cc7)
![](https://github.com/user-attachments/assets/76c4c3d9-7cde-42db-ba84-903cbb40c163)

View file

@ -10,21 +10,42 @@ import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types"; 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"; import { User } from "discord-types/general";
const settings = definePluginSettings({ const settings = definePluginSettings({
showAtSymbol: { showAtSymbol: {
type: OptionType.BOOLEAN, type: OptionType.BOOLEAN,
description: "Whether the the @ symbol should be displayed", description: "Whether the the @ symbol should be displayed on user mentions",
default: true default: true
} }
}); });
function DefaultRoleIcon() {
return (
<svg
className="vc-mentionAvatars-icon vc-mentionAvatars-role-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006Z"
/>
<path
d="M20.0001 20.006H22.0001V19.006C22.0001 16.4433 20.2697 14.4415 17.5213 13.5352C19.0621 14.9127 20.0001 16.8059 20.0001 19.006V20.006Z"
/>
<path
d="M14.8834 11.9077C16.6657 11.5044 18.0001 9.9077 18.0001 8.00598C18.0001 5.96916 16.4693 4.28218 14.4971 4.0367C15.4322 5.09511 16.0001 6.48524 16.0001 8.00598C16.0001 9.44888 15.4889 10.7742 14.6378 11.8102C14.7203 11.8418 14.8022 11.8743 14.8834 11.9077Z"
/>
</svg>
);
}
export default definePlugin({ export default definePlugin({
name: "MentionAvatars", name: "MentionAvatars",
description: "Shows user avatars inside mentions", description: "Shows user avatars and role icons inside mentions",
authors: [Devs.Ven], authors: [Devs.Ven, Devs.SerStars],
patches: [{ patches: [{
find: ".USER_MENTION)", find: ".USER_MENTION)",
@ -32,6 +53,13 @@ export default definePlugin({
match: /children:"@"\.concat\((null!=\i\?\i:\i)\)(?<=\.useName\((\i)\).+?)/, match: /children:"@"\.concat\((null!=\i\?\i:\i)\)(?<=\.useName\((\i)\).+?)/,
replace: "children:$self.renderUsername({username:$1,user:$2})" 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, settings,
@ -47,12 +75,31 @@ export default definePlugin({
onMouseEnter={() => setIsHovering(true)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
> >
<img src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)} className="vc-mentionAvatars-avatar" /> <img
src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)}
className="vc-mentionAvatars-icon"
style={{ borderRadius: "50%" }}
/>
{getUsernameString(username)} {getUsernameString(username)}
</span> </span>
); );
}, { 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 <DefaultRoleIcon />;
return (
<img
className="vc-mentionAvatars-icon vc-mentionAvatars-role-icon"
src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${roleId}/${role.icon}.webp?size=24&quality=lossless`}
/>
);
}),
}); });
function getUsernameString(username: string) { function getUsernameString(username: string) {

View file

@ -1,8 +1,11 @@
.vc-mentionAvatars-avatar { .vc-mentionAvatars-icon {
vertical-align: middle; vertical-align: middle;
width: 1em !important; /* insane discord sets width: 100% in channel topic */ width: 1em !important; /* insane discord sets width: 100% in channel topic */
height: 1em; height: 1em;
margin: 0 4px 0.2rem 2px; margin: 0 4px 0.2rem 2px;
border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
} }
.vc-mentionAvatars-role-icon {
margin: 0 2px 0.2rem 4px;
}

View file

@ -546,6 +546,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
name: "Lumap", name: "Lumap",
id: 585278686291427338n, id: 585278686291427338n,
}, },
SerStars: {
name: "SerStars",
id: 861631850681729045n,
},
} satisfies Record<string, Dev>); } satisfies Record<string, Dev>);
// iife so #__PURE__ works correctly // iife so #__PURE__ works correctly