MentionAvatars: Add option to hide @ symbol(#2725)

Co-authored-by: v <[email protected]>

src/plugins/mentionAvatars/index.tsx

@@ -6,12 +6,21 @@
 
 import "./styles.css";
 
+import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { 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",
+        default: true
+    }
+});
+
 export default definePlugin({
     name: "MentionAvatars",
     description: "Shows user avatars inside mentions",
@@ -25,20 +34,29 @@ export default definePlugin({
         }
     }],
 
+    settings,
+
     renderUsername: ErrorBoundary.wrap((props: { user: User, username: string; }) => {
         const { user, username } = props;
         const [isHovering, setIsHovering] = useState(false);
 
-        if (!user) return <>@{username}</>;
+        if (!user) return <>{getUsernameString(username)}</>;
 
         return (
             <span
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}
             >
                 <img src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)} className="vc-mentionAvatars-avatar" />
-                @{username}
+                {getUsernameString(username)}
             </span>
         );
     }, { noop: true })
+
 });
+
+function getUsernameString(username: string) {
+    return settings.store.showAtSymbol
+        ? `@${username}`
+        : username;
+}