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

src/plugins/mentionAvatars/README.md

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

src/plugins/mentionAvatars/index.tsx

@@ -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 })
+});

src/plugins/mentionAvatars/styles.css

@@ -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;
+}

src/plugins/roleColorEverywhere/index.tsx

@@ -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})"
                 }
             ],

src/plugins/showHiddenThings/index.ts

@@ -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: {
+    showTimeouts: opt("Show member timeout icons in chat."),
-        type: OptionType.BOOLEAN,
+    showInvitesPaused: opt("Show the invites paused tooltip in the server list."),
-        description: "Show member timeout icons in chat.",
+    showModView: opt("Show the member mod view context menu item in all servers."),
-        default: true,
+    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."),
-    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,
-    },
 });
 
 migratePluginSettings("ShowHiddenThings", "ShowTimeouts");

src/plugins/viewIcons/index.tsx

@@ -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: [
+            replacement: {
-                ...[/"PRESS_VIEW_PROFILE".+?(?=children:)(?<=avatarSrc:(\i).+?)/, /avatarSrc:(\i),eventHandlers:(\i).+?"div",{...\2,/].map(match => ({
+                match: /avatarSrc:(\i),eventHandlers:(\i).+?"div",{...\2,/,
-                    match,
+                replace: "$&style:{cursor:\"pointer\"},onClick:()=>{$self.openImage($1)},"
-                    replace: "$&style:{cursor:\"pointer\"},onClick:()=>{$self.openImage($1)},"
+            }
-                }))
-            ]
         },
         // Old Profiles Modal pfp
         {