2 files changed, 32 insertions, 17 deletions
diff --git a/src/components/chat_title/chat_title.js b/src/components/chat_title/chat_title.js
index 2723d5f5..e424bb1f 100644
--- a/src/components/chat_title/chat_title.js
+++ b/src/components/chat_title/chat_title.js
@@ -1,10 +1,11 @@
 import Vue from 'vue'
-import ChatAvatar from '../chat_avatar/chat_avatar.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import UserAvatar from '../user_avatar/user_avatar.vue'
 
 export default Vue.component('chat-title', {
   name: 'ChatTitle',
   components: {
-    ChatAvatar
+    UserAvatar
   },
   props: [
     'user', 'withAvatar'
@@ -16,5 +17,10 @@ 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 fd42d125..cfd1e6d1 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -4,16 +4,16 @@
     class="chat-title"
     :title="title"
   >
-    <ChatAvatar
-      v-if="withAvatar"
-      :user="user"
-      width="23px"
-      height="23px"
-    />
-    <span
-      v-if="withAvatar"
-      style="margin-right: 0.5em"
-    />
+    <router-link
+      v-if="withAvatar && user"
+      :to="getUserProfileLink(user)"
+    >
+      <UserAvatar
+        :user="user"
+        width="23px"
+        height="23px"
+      />
+    </router-link>
     <span
       class="username"
       v-html="htmlTitle"
@@ -32,11 +32,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
-  a {
-    display: flex;
-    align-items: center;
-  }
+  align-items: center;
 
   .username {
     max-width: 100%;
@@ -52,5 +48,18 @@
       object-fit: contain
     }
   }
+
+  .still-image.avatar {
+    width: 23px;
+    height: 23px;
+    margin-right: 0.5em;
+
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+
+    &.animated::before {
+      display: none;
+    }
+  }
 }
 </style>