Use replying-to component for replying-to username link

src/components/ReplyingTo.vue

@@ -0,0 +1,65 @@
+<template>
+	<info-tooltip class='replying_to'>
+		<template slot='content'>
+			<div style='margin-top: -0.25rem;'>
+				<div class='replying_to__username' v-if='post'>{{post.User.username}}</div>
+				<div class='replying_to__date' v-if='post'>{{post.createdAt | formatDate('date|time', ' - ')}}</div>
+			</div>
+			<div class='replying_to__content' v-if='post' v-html='post.content'></div>
+			<template v-else>Loading...</template>
+		</template>
+		<div
+			slot='display'
+			class='replying_to__display'
+			@click='$emit("click")'
+		>
+			{{username}}
+		</div>
+	</info-tooltip>
+</template>
+
+<script>
+	import InfoTooltip from './InfoTooltip'
+
+	export default {
+		name: 'ReplyingTo',
+		props: ['replyId', 'username'],
+		data () {
+			return {
+				post: null
+			}
+		},
+		components: { InfoTooltip }
+	}
+</script>
+
+<style lang='scss'>
+	@import '../assets/scss/variables.scss';
+
+	.replying_to {
+		@at-root #{&}__date  {
+			display: inline-block;
+			color: $color__gray--darkest;
+			font-size: 0.8rem;
+		}
+		@at-root #{&}__username {
+			display: inline-block;
+			font-size: 0.9rem;
+			color: #000;
+		}
+
+		@at-root #{&}__content {
+			*:first-child, *:last-child {
+				margin: 0;
+			}
+			p {
+				margin: 0.25rem 0;
+			}
+		}
+
+		@at-root #{&}__display {
+			display: inline-block;
+			cursor: pointer;
+		}
+	}
+</style>

src/components/routes/Thread.vue

@@ -36,8 +36,12 @@
 					<div class='post__avatar' :style='{"background-color": post.User.color}'>{{post.User.username[0]}}</div>
 					<div class='post__user'>{{post.User.username}}</div>
 					<span class='fa fa-reply post__reply_icon' v-if='post.replyingToUsername'></span>
-
-					<div class='post__reply' v-if='post.replyingToUsername' @click='goToPost(post.replyId)'>{{post.replyingToUsername}}</div>
+					<replying-to
+						v-if='post.replyingToUsername'
+						:replyId='post.replyId'
+						:username='post.replyingToUsername'
+						@click='goToPost(post.replyId)'
+					></replying-to>
 					<div class='post__date'>{{post.createdAt | formatDate('time|date', ', ')}}</div>
 				</div>
 				<div class='post__content' v-html='post.content'></div>
@@ -73,15 +77,17 @@
 <script>
 	import InputEditor from '../InputEditor'
 	import PostReply from '../PostReply'
-	import throttle from 'lodash.throttle'
+	import ReplyingTo from '../ReplyingTo'
 
+	import throttle from 'lodash.throttle'
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 
 	export default {
 		name: 'Thread',
 		components: {
 			InputEditor,
-			PostReply
+			PostReply,
+			ReplyingTo
 		},
 		data () {
 			return {