FEATURE: Optionally show local time for user in card (#9527)

This adds a site setting (default off) to optionally show a user's local time and timezone in their user card. For example, I live in Brisbane, and if at 3:30PM my time I were to open a user who lives in California's card I would see 22:30 (PST).

app/assets/javascripts/discourse/app/components/user-card-contents.js

@@ -38,7 +38,12 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
   showMoreBadges: gt("moreBadgesCount", 0),
   showDelete: and("viewingAdmin", "showName", "user.canBeDeleted"),
   linkWebsite: not("user.isBasic"),
-  hasLocationOrWebsite: or("user.location", "user.website_name"),
+
+  @discourseComputed("user")
+  hasLocaleOrWebsite(user) {
+    return user.location || user.website_name || this.userTimezone;
+  },
+
   isSuspendedOrHasBio: or("user.suspend_reason", "user.bio_excerpt"),
   showCheckEmail: and("user.staged", "canCheckEmails"),
 
@@ -52,6 +57,8 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
     "siteSettings.allow_featured_topic_on_user_profiles"
   ),
 
+  showUserLocalTime: setting("display_local_time_in_user_card"),
+
   @discourseComputed("user.staff")
   staff: isStaff => (isStaff ? "staff" : ""),
 
@@ -63,6 +70,17 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
     return prioritizeNameInUx(name, this.siteSettings);
   },
 
+  @discourseComputed("user")
+  userTimezone(user) {
+    return user.resolvedTimezone();
+  },
+
+  @discourseComputed()
+  formattedUserLocalTime() {
+    const timezone = this.userTimezone;
+    return moment.tz(timezone).format(I18n.t("dates.time_with_zone"));
+  },
+
   @discourseComputed("username")
   usernameClass: username => (username ? `user-card-${username}` : ""),
 

app/assets/javascripts/discourse/app/models/user.js

@@ -597,6 +597,11 @@ const User = RestModel.extend({
         json.user.card_badge = Badge.create(json.user.card_badge);
       }
 
+      if (!json.user._timezone) {
+        json.user._timezone = json.user.timezone;
+        delete json.user.timezone;
+      }
+
       user.setProperties(json.user);
       return user;
     });

app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs

@@ -149,15 +149,9 @@
         </div>
       {{/if}}
 
-      {{#if this.hasLocationOrWebsite}}
+      {{#if this.hasLocaleOrWebsite}}
         <div class="card-row">
           <div class="location-and-website">
-            {{#if this.user.location}}
-              <span class="location">
-                {{d-icon "map-marker-alt"}}
-                <span>{{this.user.location}}</span>
-              </span>
-            {{/if}}
             {{#if this.user.website_name}}
               <span class="website-name">
                 {{d-icon "globe"}}
@@ -170,6 +164,18 @@
                 {{/if}}
               </span>
             {{/if}}
+            {{#if this.user.location}}
+              <span class="location">
+                {{d-icon "map-marker-alt"}}
+                <span>{{this.user.location}}</span>
+              </span>
+            {{/if}}
+            {{#if showUserLocalTime}}
+              <span class="local-time">
+                {{d-icon "far-clock"}}
+                <span>{{this.formattedUserLocalTime}}</span>
+              </span>
+            {{/if}}
             {{plugin-outlet name="user-card-location-and-website" args=(hash user=this.user)}}
           </div>
         </div>

app/assets/stylesheets/common/components/user-card.scss

@@ -212,7 +212,9 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       @include ellipsis;
       color: $primary;
     }
-    .location {
+    .location,
+    .local-time,
+    .website-name {
       margin-right: 0.5em;
     }
     .website-name a {