Use fullnames for mentions

head_tag.html

<script type="text/discourse-plugin" version="0.1">
    var decorateAtMentions = function($post) {
        $post.find("a.mention").each(function() {
            var $elem = $(this);
            var username = $elem.text().substr(1);
            
            var data = Discourse.User.findByUsername(username).then(function(user) {
                var avatarurl = user.avatar_template.replace("{size}", 18);
                var realname = user.name;
                $elem.before("<img src='"+avatarurl+"' title='"+realname+"'>");
                $elem.attr("title", realname);
                $elem.attr("data-username", username);
                $elem.text("@" + realname);
            });
        })
    }
    api.decorateCooked(decorateAtMentions, {id: 'decorate-at-mentions'});
</script>
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:user-card-contents", {
   _show: function(username, $target) {
    // No user card for anon
    if (this.siteSettings.hide_user_profiles_from_public && !this.currentUser) {
      return false;
    }

    overriddenUsername = $target.attr("data-username");
    username = Ember.Handlebars.Utils.escapeExpression(username.toString());
    if (overriddenUsername !== undefined) {
        username = overriddenUsername;
    }

    // Don't show if nested
    if ($target.parents(".card-content").length) {
      this._close();
      DiscourseURL.routeTo($target.attr("href"));
      return false;
    }

    const currentUsername = this.username;
    if (username === currentUsername && this.loading === username) {
      return;
    }

    const postId = $target.parents("article").data("post-id");
    const wasVisible = this.visible;
    const previousTarget = this.cardTarget;
    const target = $target[0];

    if (wasVisible) {
      this._close();
      if (target === previousTarget) {
        return;
      }
    }

    const post =
      this.viewingTopic && postId
        ? this.postStream.findLoadedPost(postId)
        : null;
    this.setProperties({
      username,
      loading: username,
      cardTarget: target,
      post
    });

    this._showCallback(username, $target);

    // We bind scrolling on mobile after cards are shown to hide them if user scrolls
    if (this.site.mobileView) {
      this._bindMobileScroll();
    }

    return false;
   } 
});
</script>