2 files changed, 26 insertions, 31 deletions
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
index edfbe7a4..b8721126 100644
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@@ -1,11 +1,13 @@
-import Vue from 'vue'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
+import { defineAsyncComponent } from 'vue'
 
-export default Vue.component('chat-title', {
+export default {
   name: 'ChatTitle',
   components: {
-    UserAvatar
+    UserAvatar,
+    RichContent,
+    UserPopover: defineAsyncComponent(() => import('../user_popover/user_popover.vue'))
   },
   props: [
     'user', 'withAvatar'
@@ -17,10 +19,5 @@ export default Vue.component('chat-title', {
     htmlTitle () {
       return this.user ? this.user.name_html : ''
     }
-  },
-  methods: {
-    getUserProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name)
-    }
   }
-})
+}
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index b16ed39d..ab7491fa 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -1,25 +1,26 @@
 <template>
-  <!-- eslint-disable vue/no-v-html -->
   <div
     class="chat-title"
     :title="title"
   >
-    <router-link
+    <UserPopover
       v-if="withAvatar && user"
-      :to="getUserProfileLink(user)"
+      class="avatar-container"
+      :user-id="user.id"
     >
       <UserAvatar
+        class="titlebar-avatar"
         :user="user"
-        width="23px"
-        height="23px"
       />
-    </router-link>
-    <span
+    </UserPopover>
+    <RichContent
+      v-if="user"
       class="username"
-      v-html="htmlTitle"
+      :title="'@'+(user && user.screen_name_ui)"
+      :html="htmlTitle"
+      :emoji="user.emoji || []"
     />
   </div>
-  <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script src="./chat_title.js"></script>
@@ -32,7 +33,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  align-items: center;
+
+  --emoji-size: 14px;
 
   .username {
     max-width: 100%;
@@ -41,21 +43,17 @@
     display: inline;
     word-wrap: break-word;
     overflow: hidden;
-    text-overflow: ellipsis;
+  }
 
-    .emoji {
-      width: 14px;
-      height: 14px;
-      vertical-align: middle;
-      object-fit: contain
-    }
+  .avatar-container {
+    align-self: center;
+    line-height: 1;
   }
 
-  .Avatar {
-    width: 23px;
-    height: 23px;
+  .titlebar-avatar {
     margin-right: 0.5em;
-
+    height: 1.5em;
+    width: 1.5em;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);