FEATURE: show status in the tooltip on the status bubble on the user menu (#17451)

app/assets/javascripts/discourse/app/widgets/header.js

@@ -69,11 +69,7 @@ createWidget("header-notifications", {
     ];
 
     if (this.currentUser.status) {
-      contents.push(
-        this.attach("user-status-bubble", {
-          emoji: this.currentUser.status.emoji,
-        })
-      );
+      contents.push(this.attach("user-status-bubble", this.currentUser.status));
     }
 
     if (user.isInDoNotDisturb()) {

app/assets/javascripts/discourse/app/widgets/user-status-bubble.js

@@ -1,9 +1,18 @@
 import { createWidget } from "discourse/widgets/widget";
+import I18n from "I18n";
 
 export default createWidget("user-status-bubble", {
   tagName: "div.user-status-background",
 
   html(attrs) {
-    return this.attach("emoji", { name: attrs.emoji });
+    let title = attrs.description;
+    if (attrs.ends_at) {
+      const until = moment
+        .tz(attrs.ends_at, this.currentUser.timezone)
+        .format(I18n.t("dates.long_date_without_year"));
+      title += `\n${I18n.t("user_status.until")} ${until}`;
+    }
+
+    return this.attach("emoji", { name: attrs.emoji, title });
   },
 });

config/locales/client.en.yml

@@ -1800,6 +1800,7 @@ en:
       set_custom_status: "Set custom status"
       what_are_you_doing: "What are you doing?"
       remove_status: "Remove status"
+      until: "Until:"
 
     loading: "Loading..."
     errors: