FIX: Add missing user search result name and styling (#24974)

Co-authored-by: Mark VanLandingham <markvanlan@gmail.com>

app/assets/javascripts/discourse/app/components/search-menu/results/type/user.hbs

@@ -4,11 +4,16 @@
   template=@result.avatar_template
   username=@result.username
 }}
-<span class="username">
-  {{format-username @result.username}}
-</span>
-{{#if @result.custom_data}}
-  {{#each @result.custom_data as |row|}}
-    <span class="custom-field">{{row.name}}: {{row.value}}</span>
-  {{/each}}
-{{/if}}
+<div class="user-titles">
+  {{#if @result.name}}
+    <span class="name">{{@result.name}}</span>
+  {{/if}}
+  <span class="username">
+    {{format-username @result.username}}
+  </span>
+  {{#if @result.custom_data}}
+    {{#each @result.custom_data as |row|}}
+      <span class="custom-field">{{row.name}}: {{row.value}}</span>
+    {{/each}}
+  {{/if}}
+</div>

app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js

@@ -1040,7 +1040,7 @@ acceptance("Search - Glimmer - assistant", function (needs) {
         users: [
           {
             username: "TeaMoe",
-            name: "TeaMoe",
+            name: "TeaMoe Full",
             avatar_template:
               "https://avatars.discourse.org/v3/letter/t/41988e/{size}.png",
           },
@@ -1107,14 +1107,17 @@ acceptance("Search - Glimmer - assistant", function (needs) {
     await visit("/");
     await click("#search-button");
     await fillIn("#search-term", "@");
-    const firstUser =
-      ".search-menu .results ul.search-menu-assistant .search-item-user";
-    const firstUsername = query(firstUser).innerText.trim();
+    const firstUser = query(
+      ".search-menu .results ul.search-menu-assistant .search-item-user"
+    );
+    const username = firstUser.querySelector(".username").innerText.trim();
+    assert.strictEqual(username, "TeaMoe");
 
-    assert.strictEqual(firstUsername, "TeaMoe");
+    const name = firstUser.querySelector(".name").innerText.trim();
+    assert.strictEqual(name, "TeaMoe Full");
 
-    await click(query(firstUser));
-    assert.strictEqual(query("#search-term").value, `@${firstUsername}`);
+    await click(firstUser);
+    assert.strictEqual(query("#search-term").value, `@${username}`);
   });
 
   test("initial options - topic search scope - selecting a tag defaults to searching 'in all topics'", async function (assert) {

app/assets/stylesheets/common/base/search-menu.scss

@@ -395,4 +395,38 @@ $search-pad-horizontal: 0.5em;
       margin-right: 0 !important;
     }
   }
+
+  .search-result-user {
+    .search-link {
+      display: flex;
+      align-items: center;
+
+      img.avatar {
+        margin-right: 10px;
+      }
+    }
+
+    .user-titles {
+      @include user-item-flex;
+
+      .username,
+      .name {
+        @include ellipsis;
+      }
+
+      .name {
+        font-weight: 700;
+      }
+
+      .username,
+      .name,
+      .custom-field {
+        color: var(--primary-high-or-secondary-low);
+      }
+
+      .custom-field {
+        font-size: var(--font-down-2);
+      }
+    }
+  }
 }