Refactor

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

@@ -20,7 +20,6 @@
 import Vue from 'vue';
 import Progress from '../../../common/scripts/loading';
 import parseAcct from '../../../../../acct/parse';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -30,8 +29,8 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		name() {
-			return getUserName(this.user);
+		name(): string {
+			return Vue.filter('userName')(this.user);
 		}
 	},
 	watch: {

src/client/app/mobile/views/pages/messaging-room.vue

@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="user">%fa:R comments%{{ name }}</template>
+		<template v-if="user">%fa:R comments%{{ user | userName }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
@@ -11,7 +11,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../acct/parse';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -20,11 +19,6 @@ export default Vue.extend({
 			user: null
 		};
 	},
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	},
 	watch: {
 		$route: 'fetch'
 	},
@@ -39,7 +33,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${this.name} | Misskey`;
+				document.title = `%i18n:mobile.tags.mk-messaging-room-page.message%: ${Vue.filter('userName')(this.user)} | Misskey`;
 			});
 		}
 	}

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

@@ -20,7 +20,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { version, codename } from '../../../config';
-import getUserName from '../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	data() {
@@ -30,8 +29,8 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		name() {
-			return getUserName(this.os.i);
+		name(): string {
+			return Vue.filter('userName')((this as any).os.i);
 		}
 	},
 	mounted() {

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

@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header" v-if="!fetching">%fa:user% {{ user }}</span>
+	<span slot="header" v-if="!fetching">%fa:user% {{ user | userName }}</span>
 	<main v-if="!fetching">
 		<header>
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=1024)` : ''"></div>
@@ -12,8 +12,8 @@
 					<mk-follow-button v-if="os.isSignedIn && os.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
-					<h1>{{ getUserName(user) }}</h1>
-					<span class="username">@{{ getAcct(user) }}</span>
+					<h1>{{ user | userName }}</h1>
+					<span class="username">@{{ user | acct }}</span>
 					<span class="followed" v-if="user.isFollowed">%i18n:mobile.tags.mk-user.follows-you%</span>
 				</div>
 				<div class="description">{{ user.description }}</div>
@@ -61,8 +61,6 @@
 import Vue from 'vue';
 import * as age from 's-age';
 import parseAcct from '../../../../../acct/parse';
-import getAcct from '../../../../../acct/render';
-import getUserName from '../../../../../renderers/get-user-name';
 import Progress from '../../../common/scripts/loading';
 import XHome from './user/home.vue';
 
@@ -74,9 +72,7 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			user: null,
-			page: 'home',
-			getAcct,
-			getUserName
+			page: 'home'
 		};
 	},
 	computed: {
@@ -102,7 +98,7 @@ export default Vue.extend({
 				this.fetching = false;
 
 				Progress.done();
-				document.title = this.getUserName(this.user) + ' | Misskey';
+				document.title = Vue.filter('userName')(this.user) + ' | Misskey';
 			});
 		}
 	}

src/client/app/mobile/views/pages/user/home.followers-you-know.vue

@@ -2,8 +2,8 @@
 <div class="root followers-you-know">
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
-		<a v-for="user in users" :key="user.id" :href="`/@${getAcct(user)}`">
-			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="getUserName(user)"/>
+		<a v-for="user in users" :key="user.id" :href="user | userPage">
+			<img :src="`${user.avatarUrl}?thumbnail&size=64`" :alt="user | userName"/>
 		</a>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
@@ -12,8 +12,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getAcct from '../../../../../../acct/render';
-import getUserName from '../../../../../../renderers/get-user-name';
 
 export default Vue.extend({
 	props: ['user'],
@@ -23,14 +21,6 @@ export default Vue.extend({
 			users: []
 		};
 	},
-	computed: {
-		name() {
-			return getUserName(this.user);
-		}
-	},
-	methods: {
-		getAcct
-	},
 	mounted() {
 		(this as any).api('users/followers', {
 			userId: this.user.id,