FEATURE: show user status description on the mention popup (#18110)

app/assets/javascripts/discourse/app/templates/user-selector-autocomplete.hbr

@@ -6,7 +6,13 @@
           {{avatar user imageSize="tiny"}}
           <span class='username'>{{format-username user.username}}</span>
           {{#if user.status}}
-            {{emoji user.status.emoji title=user.status.description}}
+            {{emoji user.status.emoji}}
+            <span class='status-description' title='{{user.status.description}}'>
+              {{user.status.description}}
+            </span>
+            {{#if user.status.ends_at}}
+              {{format-age user.status.ends_at}}
+            {{/if}}
           {{/if}}
         </a>
       </li>

app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js

@@ -3,14 +3,29 @@ import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers";
 import {
   acceptance,
   exists,
+  fakeTime,
+  loggedInUser,
   query,
 } from "discourse/tests/helpers/qunit-helpers";
 import { setCaretPosition } from "discourse/lib/utilities";
 
 acceptance("Composer - editor mentions", function (needs) {
+  let clock = null;
+  const status = {
+    emoji: "tooth",
+    description: "off to dentist",
+    ends_at: "2100-02-01T09:00:00.000Z",
+  };
+
   needs.user();
   needs.settings({ enable_mentions: true });
 
+  needs.hooks.afterEach(() => {
+    if (clock) {
+      clock.restore();
+    }
+  });
+
   needs.pretender((server, helper) => {
     server.get("/u/search/users", () => {
       return helper.response({
@@ -20,10 +35,7 @@ acceptance("Composer - editor mentions", function (needs) {
             name: "Some User",
             avatar_template:
               "https://avatars.discourse.org/v3/letter/t/41988e/{size}.png",
-            status: {
+            status,
-              emoji: "tooth",
-              description: "off to dentist",
-            },
           },
           {
             username: "user2",
@@ -114,6 +126,10 @@ acceptance("Composer - editor mentions", function (needs) {
   });
 
   test("shows status on search results when mentioning a user", async function (assert) {
+    const timezone = loggedInUser().timezone;
+    const now = moment(status.ends_at).add(-1, "hour").format();
+    clock = fakeTime(now, timezone, true);
+
     await visit("/");
     await click("#create-topic");
 
@@ -126,6 +142,19 @@ acceptance("Composer - editor mentions", function (needs) {
     await setCaretPosition(editor, 6);
     await triggerKeyEvent(".d-editor-input", "keyup", "U");
 
-    assert.ok(exists(".autocomplete .emoji[title='off to dentist']"));
+    assert.ok(
+      exists(`.autocomplete .emoji[title='${status.emoji}']`),
+      "status emoji is shown"
+    );
+    assert.equal(
+      query(".autocomplete .status-description").textContent.trim(),
+      status.description,
+      "status description is shown"
+    );
+    assert.equal(
+      query(".autocomplete .relative-date").textContent.trim(),
+      "1h",
+      "status expiration time is shown"
+    );
   });
 });

app/assets/stylesheets/common/base/compose.scss

@@ -421,6 +421,11 @@ html.composer-open {
           background-color: var(--highlight-low);
           text-decoration: none;
         }
+
+        .relative-date {
+          font-size: var(--font-down-3);
+          padding-top: 10em;
+        }
       }
     }
   }