feat(ShowMeYourName): Name Permutations; Streamer Mode; Colors; Etc (#316)

* Added streamer mode detection, 15 name combinations, custom colors & brackets.

* Remove inconsistent reply prefix, update name priority, rearrange.

* Also truncate nick and display in streamer mode if they are equivalent to the username.

* Nick/display duo fallback, username final fallback, + code refactor.

* Modify how overlap between nick, display, and usernames are handled.

* Remove username override & add removeDuplicates setting.

* Make replacing dupes optional, conditionally prioritize username on x_x_user order.

* Fix prefix/suffix color of first name if alwaysShow enabled.

* Add setting to overwrite first name color + modify defaults.

* Borrow sadan's mention feature + fix affix oversight.

* Remove mysterious userOverride.

* Reword plugin description.

* Fix global name overwriting nickname bug + update mention symbol handling.

* Fix some typing and typos.

* Reduce niche settings + switch to string format over dropdown for permutations.

* Fix: Readd userOverride, present for interactions.

* Update with gradient support.

* Remove forgotten log.

* Handle missing GuildMember property.

* Linting.

* Re-add accidentally removed unknown user patch.

* mentionAvatars support.

* Better gradient support for mentions.

* Typo.

* Refactoring.

* Linting.

* Fix percentage not affecting gradient.

* Wrap emojis to prevent gradient (#3446).

* Fix for hook errors.

* Fix falsy validColor check.

* Fix find.

* Fix missing UserStore import.

* Sort fix.

* Patch fix.

* Reply/mention/interaction fix, bot discriminators, fallback improvement.

* Set empty global name field to username for bots if descriminator setting enabled.

* Exclude webhooks and official Discord accounts from discriminator check.

* Fix patch + animation handling.

* Friend names, member list, profiles, vc, reactions, bot discriminators, improved streamer mode + CSS.

* Lint.

* Lint.

* Fix regression removing needed addition to validUser to pass on message props.

* Fix oopsie.

* Adjust authors.

* Top role fix.

* Fix patches.

* Fix patch.

* Fix patches.

* Lint.

* Fix import.

* Fix.

src/plugins/mentionAvatars/index.tsx

@@ -12,6 +12,7 @@ import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { User } from "@vencord/discord-types";
 import { GuildRoleStore, SelectedGuildStore, useState } from "@webpack/common";
+import { JSX } from "react";
 
 const settings = definePluginSettings({
     showAtSymbol: {
@@ -50,7 +51,7 @@ export default definePlugin({
         find: ".USER_MENTION)",
         replacement: {
             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,showMeYourNameMention:typeof showMeYourNameMention!=='undefined'?showMeYourNameMention:undefined})"
         }
     },
     {
@@ -63,23 +64,26 @@ export default definePlugin({
 
     settings,
 
-    renderUsername: ErrorBoundary.wrap((props: { user: User, username: string; }) => {
+    renderUsername: ErrorBoundary.wrap(({ user, username, showMeYourNameMention }: { user: User, username: string, showMeYourNameMention: JSX.Element | null | undefined; }) => {
-        const { user, username } = props;
         const [isHovering, setIsHovering] = useState(false);
 
-        if (!user) return <>{getUsernameString(username)}</>;
+        const nameContent = Vencord.Settings.plugins.ShowMeYourName.enabled && showMeYourNameMention
+            ? showMeYourNameMention : <>{getUsernameString(username)}</>;
 
         return (
             <span
                 onMouseEnter={() => setIsHovering(true)}
                 onMouseLeave={() => setIsHovering(false)}
+                className="vc-mentionAvatars-container"
             >
-                <img
+                {user && (
-                    src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)}
+                    <img
-                    className="vc-mentionAvatars-icon"
+                        src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)}
-                    style={{ borderRadius: "50%" }}
+                        className="vc-mentionAvatars-icon"
-                />
+                        style={{ borderRadius: "50%" }}
-                {getUsernameString(username)}
+                    />
+                )}
+                {nameContent}
             </span>
         );
     }, { noop: true }),

src/plugins/showMeYourName/style.css

@@ -0,0 +1,40 @@
+@keyframes show-me-your-name-animation {
+    0% {
+        background-position: 0;
+    }
+
+    100% {
+        background-position: 100px;
+    }
+}
+
+.show-me-your-name-gradient {
+    position: relative;
+    z-index: 0;
+}
+
+.show-me-your-name-gradient::after {
+    background-clip: text;
+    content: attr(data-text) / "";
+    inset: 0;
+    position: absolute;
+    filter: blur(4px);
+    opacity: 0;
+    text-indent: 0;
+    transition: opacity .1s ease-in-out;
+    text-wrap-style: balance;
+    z-index: -1;
+}
+
+.show-me-your-name-gradient-unset-bg::after {
+    background: unset;
+}
+
+.show-me-your-name-gradient-inherit-bg::after {
+    background: inherit;
+}
+
+.show-me-your-name-gradient-hovered::after {
+    opacity: .7;
+    transition: opacity .1s ease-in-out
+}

src/plugins/showMeYourName/styles.css

@@ -1,18 +0,0 @@
-.vc-smyn-suffix {
-    color: var(--text-muted);
-    -webkit-text-fill-color: initial;
-    isolation: isolate;
-}
-
-.vc-smyn-suffix::before {
-    content: "(";
-}
-
-.vc-smyn-suffix::after {
-    content: ")";
-}
-
-.vc-smyn-hide-gradient {
-    -webkit-text-fill-color: initial;
-    isolation: isolate;
-}

src/plugins/validUser/index.tsx

@@ -117,6 +117,7 @@ function MentionWrapper({ data, UserMention, RoleMention, parse, props }: Mentio
                 userId={userId}
                 channelId={data.channelId}
                 inlinePreview={props.noStyleAndInteraction}
+                props={props}
                 key={props.key}
             />
         );
@@ -128,6 +129,7 @@ function MentionWrapper({ data, UserMention, RoleMention, parse, props }: Mentio
         // Discord is deranged and renders unknown user mentions as role mentions
         <RoleMention
             {...data}
+            props={props}
             inlinePreview={props.formatInline}
         >
             <span