feat: swap pomelo usernames for discriminators

src/controllers/modals/components/legacy/UserProfile.module.scss

@@ -46,13 +46,26 @@
             text-overflow: ellipsis;
         }
 
-        .username {
+        .usernameDetail {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 4px;
+        }
+
+        .displayname {
             font-size: 22px;
             font-weight: 600;
         }
 
+        .username {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--secondary-foreground);
+        }
+
         .status {
             font-size: 13px;
+            color: var(--secondary-foreground);
 
             > div {
                 display: inline !important;

src/controllers/modals/components/legacy/UserProfile.tsx

@@ -163,16 +163,22 @@ export const UserProfile = observer(
                             }
                         />
                         <div className={styles.details}>
-                            <Localizer>
+                            <div className={styles.usernameDetail}>
+                                <span
+                                    className={styles.displayname}
+                                    onClick={() =>
+                                        modalController.writeText(user.username)
+                                    }>
+                                    {user.username}
+                                </span>
                                 <span
                                     className={styles.username}
                                     onClick={() =>
                                         modalController.writeText(user.username)
                                     }>
-                                    {"@"}
-                                    {user.username}
+                                    {user.username}#0000
                                 </span>
-                            </Localizer>
+                            </div>
                             {user.status?.text && (
                                 <span className={styles.status}>
                                     <UserStatus user={user} tooltip />