FIX: Restore bold usernames on the about page (#36803)

The changes introduced in PR #36482 broke username
styling by swapping the content between `.username` and `.name` spans
based on the `prioritizeNameInUx` setting. This caused usernames to lose
their bold styling since CSS targets elements by class name, not
content.

This fix removes the custom AboutPageUser component and reuses the
existing UserInfo component instead. UserInfo handles name priority
correctly by using a `--name-first` CSS modifier class to change visual
order via flexbox, while keeping the username content in the `.username`
span where the bold styling is applied.

The page object for system specs is updated to detect which display mode
is active by checking for the `--name-first` class, then mapping the
span contents accordingly.

Ref - https://meta.discourse.org/t/391706

**BEFORE**

<img width="1510" height="1293" alt="2025-12-19 @ 11 36 13"
src="https://github.com/user-attachments/assets/56e1460e-30e9-41a4-92f7-c49bf9c3b9da"
/>

**AFTER**

<img width="1510" height="1293" alt="2025-12-19 @ 11 36 06"
src="https://github.com/user-attachments/assets/c92d165d-edaa-47e1-97fb-c6518ed3bbfe"
/>

frontend/discourse/app/components/about-page-user.gjs

@@ -1,38 +0,0 @@
-import avatar from "discourse/helpers/avatar";
-import { prioritizeNameInUx } from "discourse/lib/settings";
-import UserLink from "./user-link";
-
-const AboutPageUser = <template>
-  <div data-username={{@user.username}} class="user-info small">
-    <div class="user-image">
-      <div class="user-image-inner">
-        <UserLink @username={{@user.username}} @ariaHidden={{true}}>
-          {{avatar @user imageSize="large"}}
-        </UserLink>
-      </div>
-    </div>
-    <div class="user-detail">
-      <div class="name-line">
-        <UserLink @username={{@user.username}}>
-          <span class="username">
-            {{#if (prioritizeNameInUx @user.name)}}
-              {{@user.name}}
-            {{else}}
-              {{@user.username}}
-            {{/if}}
-          </span>
-          <span class="name">
-            {{#if (prioritizeNameInUx @user.name)}}
-              {{@user.username}}
-            {{else}}
-              {{@user.name}}
-            {{/if}}
-          </span>
-        </UserLink>
-      </div>
-      <div class="title">{{@user.title}}</div>
-    </div>
-  </div>
-</template>;
-
-export default AboutPageUser;

frontend/discourse/app/components/about-page-users.gjs

@@ -1,8 +1,8 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import AboutPageUser from "discourse/components/about-page-user";
 import DButton from "discourse/components/d-button";
+import UserInfo from "discourse/components/user-info";
 import { i18n } from "discourse-i18n";
 
 export default class AboutPageUsers extends Component {
@@ -30,7 +30,7 @@ export default class AboutPageUsers extends Component {
   <template>
     <div class="about-page-users-list">
       {{#each this.users as |user|}}
-        <AboutPageUser @user={{user}} />
+        <UserInfo @user={{user}} />
       {{/each}}
     </div>
     {{#if this.showViewMoreButton}}

frontend/discourse/app/components/legacy-about-page-users.gjs

@@ -1,5 +1,5 @@
 import Component from "@glimmer/component";
-import AboutPageUser from "discourse/components/about-page-user";
+import UserInfo from "discourse/components/user-info";
 
 export default class LegacyAboutPageUsers extends Component {
   get users() {
@@ -8,7 +8,7 @@ export default class LegacyAboutPageUsers extends Component {
 
   <template>
     {{#each this.users as |user|}}
-      <AboutPageUser @user={{user}} />
+      <UserInfo @user={{user}} />
     {{/each}}
   </template>
 }

spec/system/page_objects/components/about_page_users_list.rb

@@ -47,10 +47,14 @@ module PageObjects
         container
           .all(".user-info")
           .map do |node|
+            name_first = node.find(".name-line")[:class].include?("--name-first")
+            name_text = node.find(".name-line .name").text
+            username_text = node.find(".name-line .username").text
+
             {
               username: node["data-username"],
-              displayed_username: node.find(".name-line .username").text,
-              displayed_name: node.find(".name-line .name").text,
+              displayed_username: name_first ? name_text : username_text,
+              displayed_name: name_first ? username_text : name_text,
               node:,
             }
           end