From 098d960f100d0d305fbf8da1adb062f50f5a246c Mon Sep 17 00:00:00 2001
From: fuyu <54523771+mfmfuyu@users.noreply.github.com>
Date: Sat, 25 Jul 2020 23:20:14 +0900
Subject: [PATCH] =?UTF-8?q?vue3:=20filter=E3=81=AE=E7=A7=BB=E8=A1=8C=20(#6?=
 =?UTF-8?q?590)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* bytes

* notePage

* number

* acct, userName, userPage

* Move methods property

* fix

* Delete unnecessary file
---
 src/client/components/autocomplete.vue        |  7 +++--
 src/client/components/avatar.vue              | 11 +++++---
 src/client/components/drive-window.vue        |  9 ++++---
 src/client/components/drive.file.vue          |  7 +++--
 src/client/components/instance-stats.vue      | 27 ++++++++++---------
 src/client/components/note-header.vue         |  9 ++++++-
 src/client/components/note.vue                |  7 +++--
 src/client/components/notification.vue        | 18 ++++++++-----
 src/client/components/page-preview.vue        |  6 ++++-
 src/client/components/user-list.vue           |  9 +++++--
 src/client/components/user-preview.vue        |  6 +++--
 src/client/components/users-dialog.vue        |  4 ++-
 src/client/filters/bytes.ts                   |  6 ++---
 src/client/filters/note.ts                    |  6 ++---
 src/client/filters/number.ts                  |  4 +--
 src/client/filters/user.ts                    | 15 +++++------
 src/client/pages/explore.vue                  |  3 ++-
 src/client/pages/follow-requests.vue          |  9 ++++---
 .../pages/instance/federation.instance.vue    | 22 +++++++++------
 src/client/pages/instance/index.vue           | 19 +++++++------
 src/client/pages/instance/queue.queue.vue     | 13 +++++----
 src/client/pages/instance/users.user.vue      |  7 +++--
 src/client/pages/instance/users.vue           |  9 ++++---
 src/client/pages/messaging/index.vue          |  7 +++--
 src/client/pages/my-settings/mute-block.vue   |  9 +++++--
 src/client/pages/user/follow-list.vue         | 11 ++++++--
 src/client/pages/user/index.photos.vue        |  4 ++-
 src/client/pages/user/index.vue               | 22 +++++++++------
 28 files changed, 183 insertions(+), 103 deletions(-)

diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index 14a0f15779..f4f3909795 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -6,7 +6,7 @@
 			<span class="name">
 				<mk-user-name :user="user" :key="user.id"/>
 			</span>
-			<span class="username">@{{ user | acct }}</span>
+			<span class="username">@{{ acct(user) }}</span>
 		</li>
 		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li>
 	</ol>
@@ -34,6 +34,7 @@ import contains from '../scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import MkUserSelect from './user-select.vue';
+import { acct } from '../filters/user';
 
 type EmojiDef = {
 	emoji: string;
@@ -381,7 +382,9 @@ export default defineComponent({
 			vm.$once('closed', () => {
 				this.textarea.focus();
 			});
-		}
+		},
+
+		acct
 	}
 });
 </script>
diff --git a/src/client/components/avatar.vue b/src/client/components/avatar.vue
index 3a2cc35e38..004231c163 100644
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -1,8 +1,8 @@
 <template>
-<span class="eiwwqkts" :class="{ cat }" :title="user | acct" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url"/>
 </span>
-<router-link class="eiwwqkts" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url"/>
 </router-link>
 </template>
@@ -10,6 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { acct, userPage } from '../filters/user';
 
 export default defineComponent({
 	props: {
@@ -60,7 +61,9 @@ export default defineComponent({
 		},
 		onClick(e) {
 			this.$emit('click', e);
-		}
+		},
+		acct,
+		userPage
 	}
 });
 </script>
@@ -95,7 +98,7 @@ export default defineComponent({
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
 	}
-	
+
 	.inner {
 		position: absolute;
 		bottom: 0;
diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index c9dbb42968..7f976c22d5 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -2,7 +2,7 @@
 <x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
 	<template #header>
 		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span>
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(number) }})</span>
 	</template>
 	<div>
 		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
@@ -14,6 +14,7 @@
 import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
 import XWindow from './window.vue';
+import number from '../filters/number';
 
 export default defineComponent({
 	components: {
@@ -25,7 +26,7 @@ export default defineComponent({
 		type: {
 			type: String,
 			required: false,
-			default: 'file' 
+			default: 'file'
 		},
 		multiple: {
 			type: Boolean,
@@ -47,7 +48,9 @@ export default defineComponent({
 
 		onChangeSelection(xs) {
 			this.selected = xs;
-		}
+		},
+
+		number
 	}
 });
 </script>
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index cf6c4869a0..571b751ef4 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -37,6 +37,7 @@ import copyToClipboard from '../scripts/copy-to-clipboard';
 //import updateBanner from '../api/update-banner';
 import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import bytes from '../filters/bytes';
 
 export default defineComponent({
 	components: {
@@ -72,7 +73,7 @@ export default defineComponent({
 			return this.$parent;
 		},
 		title(): string {
-			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.size)}`;
+			return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
 		}
 	},
 
@@ -181,7 +182,9 @@ export default defineComponent({
 			this.$root.api('drive/files/delete', {
 				fileId: this.file.id
 			});
-		}
+		},
+
+		bytes
 	}
 });
 </script>
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 851a5bbcd1..59ea57f61b 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -9,15 +9,15 @@
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalUsersCount | number }}</dd>
+					<dd>{{ number(info.originalUsersCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersLocalDoD | number }}</dd>
+					<dd>{{ number(usersLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersLocalWoW | number }}</dd>
+					<dd>{{ number(usersLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
@@ -29,15 +29,15 @@
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.usersCount - info.originalUsersCount) | number }}</dd>
+					<dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersRemoteDoD | number }}</dd>
+					<dd>{{ number(usersRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersRemoteWoW | number }}</dd>
+					<dd>{{ number(usersRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
@@ -49,15 +49,15 @@
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalNotesCount | number }}</dd>
+					<dd>{{ number(info.originalNotesCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesLocalDoD | number }}</dd>
+					<dd>{{ number(notesLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesLocalWoW | number }}</dd>
+					<dd>{{ number(notesLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
@@ -69,15 +69,15 @@
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.notesCount - info.originalNotesCount) | number }}</dd>
+					<dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesRemoteDoD | number }}</dd>
+					<dd>{{ number(notesRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesRemoteWoW | number }}</dd>
+					<dd>{{ number(notesRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
@@ -126,6 +126,7 @@ import { defineComponent } from 'vue';
 import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
+import number from '../filters/number';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -580,6 +581,8 @@ export default defineComponent({
 				}]
 			};
 		},
+
+		number
 	}
 });
 </script>
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 2cf06f2cd0..978f670fea 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -1,6 +1,6 @@
 <template>
 <header class="kkwtjztg">
-	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
+	<router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
 		<mk-user-name :user="note.user"/>
 	</router-link>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
@@ -26,6 +26,8 @@
 import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	props: {
@@ -39,6 +41,11 @@ export default defineComponent({
 		return {
 			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
+	},
+
+	methods: {
+		notePage,
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 7f01a4facc..885fd764ab 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -16,7 +16,7 @@
 		<mk-avatar class="avatar" :user="note.user"/>
 		<fa :icon="faRetweet"/>
 		<i18n-t path="renotedBy" tag="span">
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">
+			<router-link class="name" :to="userPage(note.user)" v-user-preview="note.userId" place="user">
 				<mk-user-name :user="note.user"/>
 			</router-link>
 		</i18n-t>
@@ -106,6 +106,7 @@ import pleaseLogin from '../scripts/please-login';
 import { focusPrev, focusNext } from '../scripts/focus';
 import { url } from '../config';
 import copyToClipboard from '../scripts/copy-to-clipboard';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	components: {
@@ -722,7 +723,9 @@ export default defineComponent({
 
 		focusAfter() {
 			focusNext(this.$el);
-		}
+		},
+
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 7544c60bd6..35168e911f 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -18,30 +18,30 @@
 	</div>
 	<div class="tail">
 		<header>
-			<router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
+			<router-link v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
 			<span v-else>{{ notification.header }}</span>
 			<mk-time :time="notification.createdAt" v-if="withTime"/>
 		</header>
-		<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+		<router-link v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<fa :icon="faQuoteLeft"/>
 			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 			<fa :icon="faQuoteRight"/>
 		</router-link>
-		<router-link v-if="notification.type === 'renote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
+		<router-link v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 			<fa :icon="faQuoteLeft"/>
 			<mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
 			<fa :icon="faQuoteRight"/>
 		</router-link>
-		<router-link v-if="notification.type === 'reply'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+		<router-link v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'mention'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+		<router-link v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+		<router-link v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'pollVote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
+		<router-link v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<fa :icon="faQuoteLeft"/>
 			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 			<fa :icon="faQuoteRight"/>
@@ -64,6 +64,8 @@ import { faClock } from '@fortawesome/free-regular-svg-icons';
 import noteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	components: {
@@ -141,6 +143,8 @@ export default defineComponent({
 			this.groupInviteDone = true;
 			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
 		},
+		notePage,
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index 17275e6761..d7daaeae96 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -8,7 +8,7 @@
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
 			<img class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ page.user | userName }}</p>
+			<p>{{ userName(page.user) }}</p>
 		</footer>
 	</article>
 </router-link>
@@ -16,6 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { userName } from '../filters/user';
 
 export default defineComponent({
 	props: {
@@ -24,6 +25,9 @@ export default defineComponent({
 			required: true
 		},
 	},
+	methods: {
+		userName
+	}
 });
 </script>
 
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 9fda55a01d..04e35716f6 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -12,7 +12,7 @@
 			<mk-avatar class="avatar" :user="user"/>
 			<div class="body">
 				<div class="name">
-					<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
+					<router-link class="name" :to="userPage(user)" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
 					<span class="username"><mk-acct :user="user"/></span>
 				</div>
 				<div class="description">
@@ -34,6 +34,7 @@ import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import MkContainer from './ui/container.vue';
 import MkFollowButton from './follow-button.vue';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	components: {
@@ -62,6 +63,10 @@ export default defineComponent({
 		users() {
 			return this.extract ? this.extract(this.items) : this.items;
 		}
+	},
+
+	methods: {
+		userPage
 	}
 });
 </script>
@@ -96,7 +101,7 @@ export default defineComponent({
 
 			> .name {
 				font-weight: bold;
-						
+
 				> .name {
 					margin-right: 8px;
 				}
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index f9ea2a3a1b..78b8ecd692 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -4,7 +4,7 @@
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
 		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
-			<router-link class="name" :to="u | userPage"><mk-user-name :user="u" :nowrap="false"/></router-link>
+			<router-link class="name" :to="userPage(u)"><mk-user-name :user="u" :nowrap="false"/></router-link>
 			<p class="username"><mk-acct :user="u"/></p>
 		</div>
 		<div class="description">
@@ -30,6 +30,7 @@
 import { defineComponent } from 'vue';
 import parseAcct from '../../misc/acct/parse';
 import MkFollowButton from './follow-button.vue';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	components: {
@@ -85,7 +86,8 @@ export default defineComponent({
 			this.closed = true;
 			this.show = false;
 			if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none';
-		}
+		},
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index ed9e9170d5..236953c0f6 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -7,7 +7,7 @@
 		</div>
 
 		<div class="users">
-			<router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
+			<router-link v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
 				<mk-avatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
 				<div class="body">
 					<mk-user-name :user="extract ? extract(item) : item" class="name"/>
@@ -32,6 +32,7 @@ import { defineComponent } from 'vue';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import paging from '../scripts/paging';
 import XModal from './modal.vue';
+import { userPage } from '../filters/user';
 
 export default defineComponent({
 	components: {
@@ -64,6 +65,7 @@ export default defineComponent({
 		close() {
 			this.$refs.modal.close();
 		},
+		userPage
 	}
 });
 </script>
diff --git a/src/client/filters/bytes.ts b/src/client/filters/bytes.ts
index 5b5d966cfd..874a72d047 100644
--- a/src/client/filters/bytes.ts
+++ b/src/client/filters/bytes.ts
@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-Vue.filter('bytes', (v, digits = 0) => {
+export default (v, digits = 0) => {
 	if (v == null) return '?';
 	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
 	if (v == 0) return '0';
@@ -8,4 +6,4 @@ Vue.filter('bytes', (v, digits = 0) => {
 	if (isMinus) v = -v;
 	const i = Math.floor(Math.log(v) / Math.log(1024));
 	return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
-});
+};
\ No newline at end of file
diff --git a/src/client/filters/note.ts b/src/client/filters/note.ts
index 3c9c8b7485..0666085a27 100644
--- a/src/client/filters/note.ts
+++ b/src/client/filters/note.ts
@@ -1,5 +1,3 @@
-import Vue from 'vue';
-
-Vue.filter('notePage', note => {
+export default note => {
 	return `/notes/${note.id}`;
-});
+};
\ No newline at end of file
diff --git a/src/client/filters/number.ts b/src/client/filters/number.ts
index 8c799d9442..98866cc961 100644
--- a/src/client/filters/number.ts
+++ b/src/client/filters/number.ts
@@ -1,3 +1 @@
-import Vue from 'vue';
-
-Vue.filter('number', n => n == null ? 'N/A' : n.toLocaleString());
+export default n => n == null ? 'N/A' : n.toLocaleString()
\ No newline at end of file
diff --git a/src/client/filters/user.ts b/src/client/filters/user.ts
index e8f10c3db6..c57402a963 100644
--- a/src/client/filters/user.ts
+++ b/src/client/filters/user.ts
@@ -1,16 +1,15 @@
-import Vue from 'vue';
 import getAcct from '../../misc/acct/render';
 import getUserName from '../../misc/get-user-name';
 import { url } from '../config';
 
-Vue.filter('acct', user => {
+export const acct = user => {
 	return getAcct(user);
-});
+}
 
-Vue.filter('userName', user => {
+export const userName = user => {
 	return getUserName(user);
-});
+}
 
-Vue.filter('userPage', (user, path?, absolute = false) => {
-	return `${absolute ? url : ''}/@${Vue.filter('acct')(user)}${(path ? `/${path}` : '')}`;
-});
+export const userPage = (user, path?, absolute = false) => {
+	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
+}
\ No newline at end of file
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 4a5a1fd032..d6ca0d7b6f 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -59,6 +59,7 @@ import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-soli
 import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 import XUserList from '../components/user-list.vue';
 import MkContainer from '../components/ui/container.vue';
+import number from '../filters/number';
 
 export default defineComponent({
 	metaInfo() {
@@ -112,7 +113,7 @@ export default defineComponent({
 			tagsLocal: [],
 			tagsRemote: [],
 			stats: null,
-			num: Vue.filter('number'),
+			num: number,
 			faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket
 		};
 	},
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 71c73809a3..8483c655b0 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -15,8 +15,8 @@
 				<mk-avatar class="avatar" :user="req.follower"/>
 				<div class="body">
 					<div class="name">
-						<router-link class="name" :to="req.follower | userPage" v-user-preview="req.follower.id"><mk-user-name :user="req.follower"/></router-link>
-						<p class="acct">@{{ req.follower | acct }}</p>
+						<router-link class="name" :to="userPage(req.follower)" v-user-preview="req.follower.id"><mk-user-name :user="req.follower"/></router-link>
+						<p class="acct">@{{ acct(req.follower) }}</p>
 					</div>
 					<div class="description" v-if="req.follower.description" :title="req.follower.description">
 						<mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$store.state.i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
@@ -36,6 +36,7 @@
 import { defineComponent } from 'vue';
 import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../components/ui/pagination.vue';
+import { userPage, acct } from '../filters/user';
 
 export default defineComponent({
 	metaInfo() {
@@ -68,7 +69,9 @@ export default defineComponent({
 			this.$root.api('following/requests/reject', { userId: user.id }).then(() => {
 				this.$refs.list.reload();
 			});
-		}
+		},
+		userPage,
+		acct
 	}
 });
 </script>
diff --git a/src/client/pages/instance/federation.instance.vue b/src/client/pages/instance/federation.instance.vue
index cb72b4fd85..c51303942d 100644
--- a/src/client/pages/instance/federation.instance.vue
+++ b/src/client/pages/instance/federation.instance.vue
@@ -24,31 +24,31 @@
 			<div class="row">
 				<div class="cell">
 					<div class="label"><fa :icon="faCloudDownloadAlt" fixed-width class="icon"/>{{ $t('following') }}</div>
-					<div class="data clickable" @click="showFollowing()">{{ instance.followingCount | number }}</div>
+					<div class="data clickable" @click="showFollowing()">{{ number(instance.followingCount) }}</div>
 				</div>
 				<div class="cell">
 					<div class="label"><fa :icon="faCloudUploadAlt" fixed-width class="icon"/>{{ $t('followers') }}</div>
-					<div class="data clickable" @click="showFollowers()">{{ instance.followersCount | number }}</div>
+					<div class="data clickable" @click="showFollowers()">{{ number(instance.followersCount) }}</div>
 				</div>
 			</div>
 			<div class="row">
 				<div class="cell">
 					<div class="label"><fa :icon="faUsers" fixed-width class="icon"/>{{ $t('users') }}</div>
-					<div class="data clickable" @click="showUsers()">{{ instance.usersCount | number }}</div>
+					<div class="data clickable" @click="showUsers()">{{ number(instance.usersCount) }}</div>
 				</div>
 				<div class="cell">
 					<div class="label"><fa :icon="faPencilAlt" fixed-width class="icon"/>{{ $t('notes') }}</div>
-					<div class="data">{{ instance.notesCount | number }}</div>
+					<div class="data">{{ number(instance.notesCount) }}</div>
 				</div>
 			</div>
 			<div class="row">
 				<div class="cell">
 					<div class="label"><fa :icon="faFileImage" fixed-width class="icon"/>{{ $t('files') }}</div>
-					<div class="data">{{ instance.driveFiles | number }}</div>
+					<div class="data">{{ number(instance.driveFiles) }}</div>
 				</div>
 				<div class="cell">
 					<div class="label"><fa :icon="faDatabase" fixed-width class="icon"/>{{ $t('storageUsage') }}</div>
-					<div class="data">{{ instance.driveUsage | bytes }}</div>
+					<div class="data">{{ bytes(instance.driveUsage) }}</div>
 				</div>
 			</div>
 			<div class="row">
@@ -127,6 +127,8 @@ import MkSelect from '../../components/ui/select.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import MkInfo from '../../components/ui/info.vue';
+import bytes from '../../filters/bytes';
+import number from '../../filters/number';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -220,7 +222,7 @@ export default defineComponent({
 		}
 	},
 
-	async created() {	
+	async created() {
 		this.now = new Date();
 
 		const [perHour, perDay] = await Promise.all([
@@ -474,7 +476,11 @@ export default defineComponent({
 					}
 				}
 			});
-		}
+		},
+
+		bytes,
+
+		number
 	}
 });
 </script>
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index d4b0aec360..a61793737a 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -48,9 +48,9 @@
 					<div class="cell"><div class="label">CPU</div>{{ serverInfo.cpu.model }}</div>
 				</div>
 				<div class="row">
-					<div class="cell"><div class="label">MEM total</div>{{ serverInfo.mem.total | bytes }}</div>
-					<div class="cell"><div class="label">MEM used</div>{{ memUsage | bytes }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="cell"><div class="label">MEM free</div>{{ serverInfo.mem.total - memUsage | bytes }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+					<div class="cell"><div class="label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
+					<div class="cell"><div class="label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+					<div class="cell"><div class="label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
 				</div>
 			</div>
 		</div>
@@ -63,9 +63,9 @@
 		<div class="_content" v-if="serverInfo">
 			<div class="table">
 				<div class="row">
-					<div class="cell"><div class="label">Disk total</div>{{ serverInfo.fs.total | bytes }}</div>
-					<div class="cell"><div class="label">Disk used</div>{{ serverInfo.fs.used | bytes }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="cell"><div class="label">Disk free</div>{{ serverInfo.fs.total - serverInfo.fs.used | bytes }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+					<div class="cell"><div class="label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
+					<div class="cell"><div class="label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+					<div class="cell"><div class="label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
 				</div>
 			</div>
 		</div>
@@ -107,6 +107,7 @@ import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkInput from '../../components/ui/input.vue';
 import { version, url } from '../../config';
+import bytes from '../../filters/bytes';
 
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@@ -167,7 +168,7 @@ export default defineComponent({
 
 	mounted() {
 		this.fetchLogs();
-	
+
 		Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
 		this.chartCpuMem = new Chart(this.$refs.cpumem, {
@@ -439,7 +440,9 @@ export default defineComponent({
 			for (const stats of statsLog.reverse()) {
 				this.onStats(stats);
 			}
-		}
+		},
+
+		bytes
 	}
 });
 </script>
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue
index b35b0119b5..ff6a389794 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.queue.vue
@@ -2,10 +2,10 @@
 <section class="_card mk-queue-queue">
 	<div class="_title"><slot name="title"></slot></div>
 	<div class="_content status">
-		<div class="cell"><div class="label">Process</div>{{ activeSincePrevTick | number }}</div>
-		<div class="cell"><div class="label">Active</div>{{ active | number }}</div>
-		<div class="cell"><div class="label">Waiting</div>{{ waiting | number }}</div>
-		<div class="cell"><div class="label">Delayed</div>{{ delayed | number }}</div>
+		<div class="cell"><div class="label">Process</div>{{ number(activeSincePrevTick) }}</div>
+		<div class="cell"><div class="label">Active</div>{{ number(active) }}</div>
+		<div class="cell"><div class="label">Waiting</div>{{ number(waiting) }}</div>
+		<div class="cell"><div class="label">Delayed</div>{{ number(delayed) }}</div>
 	</div>
 	<div class="_content" style="margin-bottom: -8px;">
 		<canvas ref="chart"></canvas>
@@ -14,7 +14,7 @@
 		<div v-if="jobs.length > 0">
 			<div v-for="job in jobs" :key="job[0]">
 				<span>{{ job[0] }}</span>
-				<span style="margin-left: 8px; opacity: 0.7;">({{ job[1] | number }} jobs)</span>
+				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
 			</div>
 		</div>
 		<span v-else style="opacity: 0.5;">{{ $t('noJobs') }}</span>
@@ -25,6 +25,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Chart from 'chart.js';
+import number from '../../filters/number';
 
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@@ -179,6 +180,8 @@ export default defineComponent({
 				this.jobs = jobs;
 			});
 		},
+
+		number
 	}
 });
 </script>
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index f6b8db593d..17c78f841f 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -7,7 +7,7 @@
 		<div class="_title">
 			<mk-avatar class="avatar" :user="user"/>
 			<mk-user-name class="name" :user="user"/>
-			<span class="acct">@{{ user | acct }}</span>
+			<span class="acct">@{{ acct(user) }}</span>
 			<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
 			<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
 			<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@@ -40,6 +40,7 @@ import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesom
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import Progress from '../../scripts/loading';
+import { acct, userPage } from '../../filters/user';
 
 export default defineComponent({
 	components: {
@@ -84,7 +85,7 @@ export default defineComponent({
 		},
 
 		openProfile() {
-			window.open(Vue.filter('userPage')(this.user, null, true), '_blank');
+			window.open(userPage(this.user, null, true), '_blank');
 		},
 
 		async updateRemoteUser() {
@@ -175,6 +176,8 @@ export default defineComponent({
 			});
 			await this.refreshUser();
 		},
+
+		acct
 	}
 });
 </script>
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 58e45e99a6..7705c9a745 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -59,7 +59,7 @@
 					<div class="body">
 						<header>
 							<mk-user-name class="name" :user="user"/>
-							<span class="acct">@{{ user | acct }}</span>
+							<span class="acct">@{{ acct(user) }}</span>
 							<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
 							<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
 							<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
@@ -92,6 +92,7 @@ import MkInput from '../../components/ui/input.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkPagination from '../../components/ui/pagination.vue';
 import MkUserSelect from '../../components/user-select.vue';
+import { acct } from '../../filters/user';
 
 export default defineComponent({
 	metaInfo() {
@@ -223,7 +224,9 @@ export default defineComponent({
 
 		async show(user) {
 			this.$router.push('./users/' + user.id);
-		}
+		},
+
+		acct
 	}
 });
 </script>
@@ -234,7 +237,7 @@ export default defineComponent({
 		> ._content {
 			max-height: 300px;
 			overflow: auto;
-			
+
 			> .users {
 				> .user {
 					display: flex;
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 49084961b5..3edc630387 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -22,7 +22,7 @@
 				</header>
 				<header v-else>
 					<span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
-					<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
+					<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
 					<mk-time :time="message.createdAt"/>
 				</header>
 				<div class="body">
@@ -45,6 +45,7 @@ import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg
 import getAcct from '../../../misc/acct/render';
 import MkButton from '../../components/ui/button.vue';
 import MkUserSelect from '../../components/user-select.vue';
+import { acct } from '../../filters/user';
 
 export default defineComponent({
 	components: {
@@ -159,7 +160,9 @@ export default defineComponent({
 			});
 			if (canceled) return;
 			this.$router.push(`/my/messaging/group/${group.id}`);
-		}
+		},
+
+		acct
 	}
 });
 </script>
diff --git a/src/client/pages/my-settings/mute-block.vue b/src/client/pages/my-settings/mute-block.vue
index 85f51d7d82..4d73dcf93e 100644
--- a/src/client/pages/my-settings/mute-block.vue
+++ b/src/client/pages/my-settings/mute-block.vue
@@ -7,7 +7,7 @@
 			<template #empty><span>{{ $t('noUsers') }}</span></template>
 			<template #default="{items}">
 				<div class="user" v-for="(mute, i) in items" :key="mute.id">
-					<router-link class="name" :to="mute.mutee | userPage">
+					<router-link class="name" :to="userPage(mute.mutee)">
 						<mk-acct :user="mute.mutee"/>
 					</router-link>
 				</div>
@@ -20,7 +20,7 @@
 			<template #empty><span>{{ $t('noUsers') }}</span></template>
 			<template #default="{items}">
 				<div class="user" v-for="(block, i) in items" :key="block.id">
-					<router-link class="name" :to="block.blockee | userPage">
+					<router-link class="name" :to="userPage(block.blockee)">
 						<mk-acct :user="block.blockee"/>
 					</router-link>
 				</div>
@@ -34,6 +34,7 @@
 import { defineComponent } from 'vue';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '../../components/ui/pagination.vue';
+import { userPage } from '../../filters/user';
 
 export default defineComponent({
 	components: {
@@ -53,6 +54,10 @@ export default defineComponent({
 			faBan
 		}
 	},
+
+	methods: {
+		userPage
+	}
 });
 </script>
 
diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue
index 7d2ce353f9..4c816bf6a4 100644
--- a/src/client/pages/user/follow-list.vue
+++ b/src/client/pages/user/follow-list.vue
@@ -4,8 +4,8 @@
 		<mk-avatar class="avatar" :user="user"/>
 		<div class="body">
 			<div class="name">
-				<router-link class="name" :to="user | userPage" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
-				<p class="acct">@{{ user | acct }}</p>
+				<router-link class="name" :to="userPage(user)" v-user-preview="user.id"><mk-user-name :user="user"/></router-link>
+				<p class="acct">@{{ acct(user) }}</p>
 			</div>
 			<div class="description" v-if="user.description" :title="user.description">
 				<mfm :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :plain="true" :nowrap="true"/>
@@ -21,6 +21,7 @@ import { defineComponent } from 'vue';
 import parseAcct from '../../../misc/acct/parse';
 import MkFollowButton from '../../components/follow-button.vue';
 import MkPagination from '../../components/ui/pagination.vue';
+import { userPage, acct } from '../../filters/user';
 
 export default defineComponent({
 	components: {
@@ -55,6 +56,12 @@ export default defineComponent({
 		'$route'() {
 			this.$refs.list.reload();
 		}
+	},
+
+	methods: {
+		userPage,
+		
+		acct
 	}
 });
 </script>
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index e810a6b992..179bd49f0d 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -5,7 +5,7 @@
 		<router-link v-for="(image, i) in images" :key="i"
 			class="img"
 			:style="`background-image: url(${thumbnail(image.file)})`"
-			:to="image.note | notePage"
+			:to="notePage(image.note)"
 		></router-link>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p>
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../../scripts/get-static-image-url';
+import notePage from '../../filters/note';
 
 export default defineComponent({
 	props: ['user'],
@@ -57,6 +58,7 @@ export default defineComponent({
 				? getStaticImageUrl(image.thumbnailUrl)
 				: image.thumbnailUrl;
 		},
+		notePage
 	},
 });
 </script>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index a15d904194..ec342f1624 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -66,16 +66,16 @@
 			</dl>
 		</div>
 		<div class="status">
-			<router-link :to="user | userPage()" :class="{ active: $route.name === 'user' }">
-				<b>{{ user.notesCount | number }}</b>
+			<router-link :to="userPage(user)" :class="{ active: $route.name === 'user' }">
+				<b>{{ number(user.notesCount) }}</b>
 				<span>{{ $t('notes') }}</span>
 			</router-link>
-			<router-link :to="user | userPage('following')" :class="{ active: $route.name === 'userFollowing' }">
-				<b>{{ user.followingCount | number }}</b>
+			<router-link :to="userPage(user, 'following')" :class="{ active: $route.name === 'userFollowing' }">
+				<b>{{ number(user.followingCount) }}</b>
 				<span>{{ $t('following') }}</span>
 			</router-link>
-			<router-link :to="user | userPage('followers')" :class="{ active: $route.name === 'userFollowers' }">
-				<b>{{ user.followersCount | number }}</b>
+			<router-link :to="userPage(user, 'followers')" :class="{ active: $route.name === 'userFollowers' }">
+				<b>{{ number(user.followersCount) }}</b>
 				<span>{{ $t('followers') }}</span>
 			</router-link>
 		</div>
@@ -119,6 +119,8 @@ import MkRemoteCaution from '../../components/remote-caution.vue';
 import Progress from '../../scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
 import { getScrollPosition } from '../../scripts/scroll';
+import number from '../../filters/number';
+import { userPage, acct } from '../../filters/user';
 
 export default defineComponent({
 	components: {
@@ -133,7 +135,7 @@ export default defineComponent({
 
 	metaInfo() {
 		return {
-			title: (this.user ? '@' + Vue.filter('acct')(this.user).replace('@', ' | ') : null) as string
+			title: (this.user ? '@' + acct(this.user).replace('@', ' | ') : null) as string
 		};
 	},
 
@@ -210,6 +212,10 @@ export default defineComponent({
 			const pos = -(top / z);
 			banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
 		},
+
+		number,
+
+		userPage
 	}
 });
 </script>
@@ -271,7 +277,7 @@ export default defineComponent({
 				background: rgba(0, 0, 0, 0.2);
 				padding: 8px;
 				border-radius: 24px;
-		
+
 				> .menu {
 					vertical-align: bottom;
 					height: 31px;