Refactor

Make mk-user-name component

src/client/app/common/views/components/autocomplete.vue

@@ -4,7 +4,7 @@
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
 			<img class="avatar" :src="user.avatarUrl" alt=""/>
 			<span class="name">
-				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+				<mk-user-name :user="user"/>
 			</span>
 			<span class="username">@{{ user | acct }}</span>
 		</li>

src/client/app/common/views/components/index.ts

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import userName from './user-name.vue';
 import followButton from './follow-button.vue';
 import error from './error.vue';
 import noteSkeleton from './note-skeleton.vue';
@@ -44,6 +45,7 @@ import uiInfo from './ui/info.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-user-name', userName);
 Vue.component('mk-follow-button', followButton);
 Vue.component('mk-error', error);
 Vue.component('mk-note-skeleton', noteSkeleton);

src/client/app/common/views/components/user-name.vue

@@ -0,0 +1,16 @@
+<template>
+<misskey-flavored-markdown :text="user.name || user.username" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		}
+	}
+});
+</script>

src/client/app/common/views/pages/follow.vue

@@ -7,7 +7,7 @@
 		<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 		<div class="body">
 			<router-link :to="user | userPage" class="name">
-				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+				<mk-user-name :user="user"/>
 			</router-link>
 			<span class="username">@{{ user | acct }}</span>
 			<div class="description">

src/client/app/desktop/views/components/friends-maker.vue

@@ -6,7 +6,7 @@
 			<mk-avatar class="avatar" :user="user" target="_blank"/>
 			<div class="body">
 				<router-link class="name" :to="user | userPage" v-user-preview="user.id">
-					<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+					<mk-user-name :user="user"/>
 				</router-link>
 				<p class="username">@{{ user | acct }}</p>
 			</div>

src/client/app/desktop/views/components/user-card.vue

@@ -5,7 +5,7 @@
 	<mk-follow-button :user="user" class="follow" mini/>
 	<div class="body">
 		<router-link :to="user | userPage" class="name">
-			<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+			<mk-user-name :user="user"/>
 		</router-link>
 		<span class="username">@{{ user | acct }}</span>
 		<div class="description">

src/client/app/desktop/views/pages/deck/deck.user-column.vue

@@ -17,7 +17,7 @@
 				<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
 				<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
 				<span class="name">
-					<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+					<mk-user-name :user="user"/>
 				</span>
 				<span class="acct">@{{ user | acct }}</span>
 			</div>

src/client/app/desktop/views/pages/user-following-or-followers.vue

@@ -5,7 +5,7 @@
 			<mk-avatar class="avatar" :user="user"/>
 			<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
 				<router-link :to="user | userPage" place="user">
-					<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+					<mk-user-name :user="user"/>
 				</router-link>
 			</i18n>
 		</header>

src/client/app/desktop/views/pages/user/user.header.vue

@@ -5,7 +5,7 @@
 		<div class="fade"></div>
 		<div class="title">
 			<p class="name">
-				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+				<mk-user-name :user="user"/>
 			</p>
 			<div>
 				<span class="username"><mk-acct :user="user" :detail="true" /></span>

src/client/app/mobile/views/components/user-card.vue

@@ -4,7 +4,7 @@
 		<mk-avatar class="avatar" :user="user"/>
 	</header>
 	<a class="name" :href="user | userPage" target="_blank">
-		<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+		<mk-user-name :user="user"/>
 	</a>
 	<p class="username"><mk-acct :user="user"/></p>
 	<mk-follow-button class="follow-button" :user="user"/>

src/client/app/mobile/views/components/user-preview.vue

@@ -4,7 +4,7 @@
 	<div class="main">
 		<header>
 			<router-link class="name" :to="user | userPage">
-				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+				<mk-user-name :user="user"/>
 			</router-link>
 			<span class="username"><mk-acct :user="user"/></span>
 		</header>

src/client/app/mobile/views/pages/user-list.vue

@@ -5,7 +5,7 @@
 	<main v-if="!fetching">
 		<ul>
 			<li v-for="user in users" :key="user.id"><router-link :to="user | userPage">
-				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+				<mk-user-name :user="user"/>
 			</router-link></li>
 		</ul>
 	</main>

src/client/app/mobile/views/pages/user.vue

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">
-		<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+		<mk-user-name :user="user"/>
 	</template>
 	<main v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('is-suspended') }}</p></div>
@@ -17,7 +17,7 @@
 					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
-					<h1><misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/></h1>
+					<h1><mk-user-name :user="user"/></h1>
 					<span class="username"><mk-acct :user="user" :detail="true" /></span>
 					<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
 				</div>