FriendsSince: Show in user profile modal

src/plugins/friendsSince/index.tsx

@@ -7,6 +7,7 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
+import { classes } from "@utils/misc";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { Heading, React, RelationshipStore, Text } from "@webpack/common";
@@ -22,6 +23,7 @@ export default definePlugin({
     description: "Shows when you became friends with someone in the user popout",
     authors: [Devs.Elvyra],
     patches: [
+        // User popup
         {
             find: ".AnalyticsSections.USER_PROFILE}",
             replacement: {
@@ -29,16 +31,25 @@ export default definePlugin({
                 replace: "$&,$self.friendsSince({ userId: $1 })"
             }
         },
+        // User DMs "User Profile" popup in the right
         {
             find: ".UserPopoutUpsellSource.PROFILE_PANEL,",
             replacement: {
                 match: /\i.default,\{userId:(\i)}\)/,
                 replace: "$&,$self.friendsSince({ userId: $1 })"
             }
+        },
+        // User Profile Modal
+        {
+            find: ".userInfoSectionHeader,",
+            replacement: {
+                match: /(\.Messages\.USER_PROFILE_MEMBER_SINCE.+?userId:(.+?)),textClassName:(\i\.userInfoText)}\)/,
+                replace: (_, rest, userId, textClassName) => `${rest}}),$self.friendsSince({ userId: ${userId}, textClassName: ${textClassName} })`
+            }
         }
     ],
 
-    friendsSince: ErrorBoundary.wrap(({ userId }: { userId: string; }) => {
+    friendsSince: ErrorBoundary.wrap(({ userId, textClassName }: { userId: string; textClassName?: string; }) => {
         const friendsSince = RelationshipStore.getSince(userId);
         if (!friendsSince) return null;
 
@@ -61,7 +72,7 @@ export default definePlugin({
                             <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
                         </svg>
                     )}
-                    <Text variant="text-sm/normal" className={clydeMoreInfo.body}>
+                    <Text variant="text-sm/normal" className={classes(clydeMoreInfo.body, textClassName)}>
                         {getCreatedAtDate(friendsSince, locale.getLocale())}
                     </Text>
                 </div>