new plugin MentionAvatars: Shows user avatars inside mentions (#2691)

This commit is contained in:
vee 2024-07-13 19:14:22 +02:00 committed by GitHub
parent 0057ab42e8
commit 92ae62602b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 75 additions and 33 deletions

View file

@ -0,0 +1,5 @@
# MentionAvatars
Shows user avatars inside mentions
![](https://github.com/user-attachments/assets/fc76ea47-5e19-4063-a592-c57785a75cc7)

View file

@ -0,0 +1,44 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import "./styles.css";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import definePlugin from "@utils/types";
import { SelectedGuildStore, useState } from "@webpack/common";
import { User } from "discord-types/general";
export default definePlugin({
name: "MentionAvatars",
description: "Shows user avatars inside mentions",
authors: [Devs.Ven],
patches: [{
find: ".USER_MENTION)",
replacement: {
match: /children:"@"\.concat\((null!=\i\?\i:\i)\)(?<=\.useName\((\i)\).+?)/,
replace: "children:$self.renderUsername({username:$1,user:$2})"
}
}],
renderUsername: ErrorBoundary.wrap((props: { user: User, username: string; }) => {
const { user, username } = props;
const [isHovering, setIsHovering] = useState(false);
if (!user) return <>@{username}</>;
return (
<span
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
<img src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)} className="vc-mentionAvatars-avatar" />
@{username}
</span>
);
}, { noop: true })
});

View file

@ -0,0 +1,8 @@
.vc-mentionAvatars-avatar {
vertical-align: middle;
width: 1em;
height: 1em;
margin: 0 4px 0.2rem 2px;
border-radius: 50%;
box-sizing: border-box;
}

View file

@ -60,7 +60,7 @@ export default definePlugin({
find: 'location:"UserMention',
replacement: [
{
match: /user:(\i),channel:(\i).{0,400}?"@"\.concat\(.+?\)/,
match: /onContextMenu:\i,color:\i,\.\.\.\i(?=,children:)(?<=user:(\i),channel:(\i).{0,500}?)/,
replace: "$&,color:$self.getUserColor($1?.id,{channelId:$2?.id})"
}
],

View file

@ -18,34 +18,21 @@
import { definePluginSettings, migratePluginSettings } from "@api/Settings";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import definePlugin, { OptionType, PluginSettingDef } from "@utils/types";
const opt = (description: string) => ({
type: OptionType.BOOLEAN,
description,
default: true,
restartNeeded: true
} satisfies PluginSettingDef);
const settings = definePluginSettings({
showTimeouts: {
type: OptionType.BOOLEAN,
description: "Show member timeout icons in chat.",
default: true,
},
showInvitesPaused: {
type: OptionType.BOOLEAN,
description: "Show the invites paused tooltip in the server list.",
default: true,
},
showModView: {
type: OptionType.BOOLEAN,
description: "Show the member mod view context menu item in all servers.",
default: true,
},
disableDiscoveryFilters: {
type: OptionType.BOOLEAN,
description: "Disable filters in Server Discovery search that hide servers that don't meet discovery criteria.",
default: true,
},
disableDisallowedDiscoveryFilters: {
type: OptionType.BOOLEAN,
description: "Disable filters in Server Discovery search that hide NSFW & disallowed servers.",
default: true,
},
showTimeouts: opt("Show member timeout icons in chat."),
showInvitesPaused: opt("Show the invites paused tooltip in the server list."),
showModView: opt("Show the member mod view context menu item in all servers."),
disableDiscoveryFilters: opt("Disable filters in Server Discovery search that hide servers that don't meet discovery criteria."),
disableDisallowedDiscoveryFilters: opt("Disable filters in Server Discovery search that hide NSFW & disallowed servers."),
});
migratePluginSettings("ShowHiddenThings", "ShowTimeouts");

View file

@ -186,12 +186,10 @@ export default definePlugin({
// Avatar component used in User DMs "User Profile" popup in the right and Profiles Modal pfp
{
find: ".overlay:void 0,status:",
replacement: [
...[/"PRESS_VIEW_PROFILE".+?(?=children:)(?<=avatarSrc:(\i).+?)/, /avatarSrc:(\i),eventHandlers:(\i).+?"div",{...\2,/].map(match => ({
match,
replacement: {
match: /avatarSrc:(\i),eventHandlers:(\i).+?"div",{...\2,/,
replace: "$&style:{cursor:\"pointer\"},onClick:()=>{$self.openImage($1)},"
}))
]
}
},
// Old Profiles Modal pfp
{