From 7199e6f4e0b3a2c2bc198e689c3e0cd0d0f0354a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 17 Oct 2020 20:12:00 +0900
Subject: Migrate to Vue3 (#6587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

* v-sizeは単にwindowのresizeを監視するだけで良いかもしれない

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip
---
 src/client/components/acct.vue                     |   6 +-
 src/client/components/analog-clock.vue             |   7 +-
 src/client/components/autocomplete.vue             |  62 +--
 src/client/components/avatar.vue                   |  33 +-
 src/client/components/avatars.vue                  |   9 +-
 src/client/components/captcha.vue                  |  11 +-
 src/client/components/channel-follow-button.vue    |  15 +-
 src/client/components/channel-preview.vue          |  29 +-
 src/client/components/code-core.vue                |   9 +-
 src/client/components/code.vue                     |   9 +-
 src/client/components/cw-button.vue                |  14 +-
 src/client/components/date-separated-list.vue      |  16 +-
 src/client/components/deck/antenna-column.vue      |  19 +-
 src/client/components/deck/column-core.vue         |  20 +-
 src/client/components/deck/column.vue              |  68 ++-
 src/client/components/deck/direct-column.vue       |  15 +-
 src/client/components/deck/list-column.vue         |  19 +-
 src/client/components/deck/mentions-column.vue     |  15 +-
 .../components/deck/notifications-column.vue       |  28 +-
 src/client/components/deck/tl-column.vue           |  25 +-
 src/client/components/deck/widgets-column.vue      |  38 +-
 src/client/components/dialog.vue                   | 257 +++++------
 src/client/components/drive-file-thumbnail.vue     |  24 +-
 src/client/components/drive-window.vue             |  43 +-
 src/client/components/drive.file.vue               | 114 ++---
 src/client/components/drive.folder.vue             |  45 +-
 src/client/components/drive.nav-folder.vue         |  23 +-
 src/client/components/drive.vue                    | 146 ++++---
 src/client/components/emoji-picker.vue             |  43 +-
 src/client/components/emoji.vue                    |   7 +-
 src/client/components/error.vue                    |  10 +-
 src/client/components/file-type-icon.vue           |   7 +-
 src/client/components/follow-button.vue            |  33 +-
 src/client/components/form-dialog.vue              | 106 +++++
 src/client/components/form-window.vue              |  83 ----
 src/client/components/formula-core.vue             |   7 +-
 src/client/components/formula.vue                  |   9 +-
 src/client/components/google.vue                   |   9 +-
 src/client/components/header-clock.vue             |   9 +-
 src/client/components/icon-dialog.vue              |  73 ++++
 src/client/components/image-viewer.vue             |  80 ++--
 src/client/components/img-with-blurhash.vue        |  26 +-
 src/client/components/index.ts                     |  26 +-
 src/client/components/instance-stats.vue           |  80 ++--
 src/client/components/link.vue                     |  45 +-
 src/client/components/loading.vue                  |   5 +-
 src/client/components/media-banner.vue             |   9 +-
 src/client/components/media-image.vue              |  33 +-
 src/client/components/media-list.vue               |  15 +-
 src/client/components/media-video.vue              |  11 +-
 src/client/components/mention.vue                  |   7 +-
 src/client/components/menu.vue                     | 191 --------
 src/client/components/mfm.ts                       | 189 +++-----
 src/client/components/mini-chart.vue               |   7 +-
 .../components/misskey-flavored-markdown.vue       |  12 +-
 src/client/components/modal.vue                    |  90 ----
 src/client/components/note-header.vue              |  36 +-
 src/client/components/note-preview.vue             |  13 +-
 src/client/components/note.sub.vue                 |  21 +-
 src/client/components/note.vue                     | 399 ++++++++---------
 src/client/components/notes.vue                    |  34 +-
 .../components/notification-setting-window.vue     |  61 ++-
 src/client/components/notification.vue             |  99 +++--
 src/client/components/notifications.vue            |  51 ++-
 src/client/components/page-preview.vue             |  11 +-
 src/client/components/page-window.vue              |  86 ++++
 src/client/components/page/page.block.vue          |   4 +-
 src/client/components/page/page.button.vue         |  13 +-
 src/client/components/page/page.canvas.vue         |   5 +-
 src/client/components/page/page.counter.vue        |   7 +-
 src/client/components/page/page.if.vue             |   7 +-
 src/client/components/page/page.image.vue          |   5 +-
 src/client/components/page/page.number-input.vue   |   7 +-
 src/client/components/page/page.post.vue           |  19 +-
 src/client/components/page/page.radio-button.vue   |   7 +-
 src/client/components/page/page.section.vue        |   7 +-
 src/client/components/page/page.switch.vue         |   7 +-
 src/client/components/page/page.text-input.vue     |   7 +-
 src/client/components/page/page.text.vue           |  11 +-
 src/client/components/page/page.textarea-input.vue |   7 +-
 src/client/components/page/page.textarea.vue       |   7 +-
 src/client/components/page/page.vue                |  19 +-
 src/client/components/particle.vue                 |  72 +--
 src/client/components/poll-editor.vue              | 127 ++++--
 src/client/components/poll.vue                     |  15 +-
 src/client/components/popup.vue                    | 148 -------
 src/client/components/post-form-attaches.vue       |  71 +--
 src/client/components/post-form-dialog.vue         | 157 +------
 src/client/components/post-form.vue                | 384 ++++++++--------
 src/client/components/reaction-icon.vue            |   7 +-
 src/client/components/reaction-picker.vue          |  49 ++-
 src/client/components/reactions-viewer.details.vue |  69 ++-
 .../components/reactions-viewer.reaction.vue       |  43 +-
 src/client/components/reactions-viewer.vue         |  16 +-
 src/client/components/remote-caution.vue           |   7 +-
 src/client/components/sidebar.vue                  | 272 ++++++------
 src/client/components/signin-dialog.vue            |  28 +-
 src/client/components/signin.vue                   |  79 ++--
 src/client/components/signup-dialog.vue            |  28 +-
 src/client/components/signup.vue                   | 113 +++--
 src/client/components/stream-indicator.vue         |  13 +-
 src/client/components/sub-note-content.vue         |  13 +-
 src/client/components/tab.vue                      |  14 +-
 src/client/components/time.vue                     |  12 +-
 src/client/components/timeline.vue                 |  47 +-
 src/client/components/toast.vue                    |  19 +-
 src/client/components/token-generate-window.vue    |  64 +--
 src/client/components/ui/button.vue                |  44 +-
 src/client/components/ui/container.vue             |  30 +-
 src/client/components/ui/context-menu.vue          |  63 +++
 src/client/components/ui/folder.vue                |  32 +-
 src/client/components/ui/hr.vue                    |   5 +-
 src/client/components/ui/info.vue                  |   9 +-
 src/client/components/ui/input.vue                 | 262 +++++------
 src/client/components/ui/menu.vue                  | 237 ++++++++++
 src/client/components/ui/modal-menu.vue            |  47 ++
 src/client/components/ui/modal-window.vue          | 145 +++++++
 src/client/components/ui/modal.vue                 | 232 ++++++++++
 src/client/components/ui/pagination.vue            |  12 +-
 src/client/components/ui/radio.vue                 |  17 +-
 src/client/components/ui/range.vue                 |   7 +-
 src/client/components/ui/select.vue                |  10 +-
 src/client/components/ui/switch.vue                |  11 +-
 src/client/components/ui/textarea.vue              |   7 +-
 src/client/components/ui/tooltip.vue               |  74 +---
 src/client/components/ui/window.vue                | 481 +++++++++++++++++++++
 src/client/components/upload.vue                   | 136 ++++++
 src/client/components/uploader.vue                 | 192 --------
 src/client/components/url-preview-popup.vue        |  18 +-
 src/client/components/url-preview.vue              |  15 +-
 src/client/components/url.vue                      |  39 +-
 src/client/components/user-info.vue                | 144 ++++++
 src/client/components/user-list.vue                | 104 ++---
 src/client/components/user-menu.vue                | 258 -----------
 src/client/components/user-name.vue                |   6 +-
 src/client/components/user-preview.vue             | 209 ++++-----
 src/client/components/user-select-dialog.vue       | 169 ++++++++
 src/client/components/user-select.vue              | 149 -------
 src/client/components/users-dialog.vue             |  64 ++-
 src/client/components/visibility-chooser.vue       | 170 --------
 src/client/components/visibility-picker.vue        | 173 ++++++++
 src/client/components/window.vue                   | 160 -------
 142 files changed, 4754 insertions(+), 4135 deletions(-)
 create mode 100644 src/client/components/form-dialog.vue
 delete mode 100644 src/client/components/form-window.vue
 create mode 100644 src/client/components/icon-dialog.vue
 delete mode 100644 src/client/components/menu.vue
 delete mode 100644 src/client/components/modal.vue
 create mode 100644 src/client/components/page-window.vue
 delete mode 100644 src/client/components/popup.vue
 create mode 100644 src/client/components/ui/context-menu.vue
 create mode 100644 src/client/components/ui/menu.vue
 create mode 100644 src/client/components/ui/modal-menu.vue
 create mode 100644 src/client/components/ui/modal-window.vue
 create mode 100644 src/client/components/ui/modal.vue
 create mode 100644 src/client/components/ui/window.vue
 create mode 100644 src/client/components/upload.vue
 delete mode 100644 src/client/components/uploader.vue
 create mode 100644 src/client/components/user-info.vue
 delete mode 100644 src/client/components/user-menu.vue
 create mode 100644 src/client/components/user-select-dialog.vue
 delete mode 100644 src/client/components/user-select.vue
 delete mode 100644 src/client/components/visibility-chooser.vue
 create mode 100644 src/client/components/visibility-picker.vue
 delete mode 100644 src/client/components/window.vue

(limited to 'src/client/components')

diff --git a/src/client/components/acct.vue b/src/client/components/acct.vue
index 250e8b2371..9d434de6cd 100644
--- a/src/client/components/acct.vue
+++ b/src/client/components/acct.vue
@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host } from '../config';
+import { host } from '@/config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['user', 'detail'],
 	data() {
 		return {
diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue
index 81c6598c7a..b3fb7a515d 100644
--- a/src/client/components/analog-clock.vue
+++ b/src/client/components/analog-clock.vue
@@ -34,10 +34,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			now: new Date(),
@@ -127,7 +128,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.enabled = false;
 	},
 
diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index e77b0d1a99..7f4b565723 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="swhvrteh" @contextmenu.prevent="() => {}">
+<div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
 	<ol class="users" ref="suggests" v-if="type === 'user'">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
 			<img class="avatar" :src="user.avatarUrl"/>
 			<span class="name">
-				<mk-user-name :user="user" :key="user.id"/>
+				<MkUserName :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>
@@ -28,12 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import contains from '../scripts/contains';
+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 { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { acct } from '@/filters/user';
+import * as os from '@/os';
 
 type EmojiDef = {
 	emoji: string;
@@ -74,7 +75,7 @@ for (const x of lib) {
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
@@ -91,11 +92,6 @@ export default Vue.extend({
 			required: true,
 		},
 
-		complete: {
-			type: Function,
-			required: true,
-		},
-
 		close: {
 			type: Function,
 			required: true,
@@ -110,8 +106,15 @@ export default Vue.extend({
 			type: Number,
 			required: true,
 		},
+
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			getStaticImageUrl,
@@ -135,6 +138,14 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		showing() {
+			if (!this.showing) {
+				this.$emit('closed');
+			}
+		}
+	},
+
 	updated() {
 		this.setPosition();
 	},
@@ -189,7 +200,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.textarea.removeEventListener('keydown', this.onKeydown);
 
 		for (const el of Array.from(document.querySelectorAll('body *'))) {
@@ -198,6 +209,11 @@ export default Vue.extend({
 	},
 
 	methods: {
+		complete(type, value) {
+			this.$emit('done', { type, value });
+			this.$emit('closed');
+		},
+
 		setPosition() {
 			if (this.x + this.$el.offsetWidth > window.innerWidth) {
 				this.$el.style.left = (window.innerWidth - this.$el.offsetWidth) + 'px';
@@ -236,8 +252,8 @@ export default Vue.extend({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					this.$root.api('users/search', {
-						query: this.q,
+					os.api('users/search-by-username-and-host', {
+						username: this.q,
 						limit: 10,
 						detail: false
 					}).then(users => {
@@ -260,7 +276,7 @@ export default Vue.extend({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						this.$root.api('hashtags/search', {
+						os.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {
@@ -374,14 +390,13 @@ export default Vue.extend({
 
 		chooseUser() {
 			this.close();
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
+			os.selectUser().then(user => {
 				this.complete('user', user);
-			});
-			vm.$once('closed', () => {
 				this.textarea.focus();
 			});
-		}
+		},
+
+		acct
 	}
 });
 </script>
@@ -393,9 +408,6 @@ export default Vue.extend({
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
 	overflow: hidden;
-	background: var(--panel);
-	border: solid 1px rgba(#000, 0.1);
-	border-radius: 4px;
 	transition: top 0.1s ease, left 0.1s ease;
 
 	> ol {
diff --git a/src/client/components/avatar.vue b/src/client/components/avatar.vue
index ec48d73214..627818a8e7 100644
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -1,17 +1,19 @@
 <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>
 
 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '../filters/user';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +32,7 @@ export default Vue.extend({
 			default: false
 		}
 	},
+	emits: ['click'],
 	computed: {
 		cat(): boolean {
 			return this.user.isCat;
@@ -42,25 +45,19 @@ export default Vue.extend({
 	},
 	watch: {
 		'user.avatarBlurhash'() {
-			this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+			if (this.$el == null) return;
+			this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 		}
 	},
 	mounted() {
-		this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+		this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 	},
 	methods: {
-		getBlurhashAvgColor(s) {
-			return typeof s == 'string'
-				? '#' + [...s.slice(2, 6)]
-						.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
-						.reduce((a, c) => a * 83 + c, 0)
-						.toString(16)
-						.padStart(6, '0')
-				: undefined;
-		},
 		onClick(e) {
 			this.$emit('click', e);
-		}
+		},
+		acct,
+		userPage
 	}
 });
 </script>
@@ -95,7 +92,7 @@ export default Vue.extend({
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
 	}
-	
+
 	.inner {
 		position: absolute;
 		bottom: 0;
diff --git a/src/client/components/avatars.vue b/src/client/components/avatars.vue
index db618dc7bf..8bf64d79b5 100644
--- a/src/client/components/avatars.vue
+++ b/src/client/components/avatars.vue
@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<mk-avatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		userIds: {
 			required: true
@@ -21,7 +22,7 @@ export default Vue.extend({
 		};
 	},
 	async created() {
-		this.us = await this.$root.api('users/show', {
+		this.us = await os.api('users/show', {
 			userIds: this.userIds
 		});
 	}
diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
index 1a894d9350..94a13a8b5b 100644
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -1,12 +1,12 @@
 <template>
 <div>
-	<span v-if="!available">{{ $t('waiting') }}<mk-ellipsis/></span>
+	<span v-if="!available">{{ $t('waiting') }}<MkEllipsis/></span>
 	<div ref="captcha"></div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 type Captcha = {
 	render(container: string | Node, options: {
@@ -28,8 +28,9 @@ declare global {
 	interface Window extends CaptchaContainer {
 	}
 }
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		provider: {
 			type: String,
@@ -88,7 +89,7 @@ export default Vue.extend({
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.reset();
 	},
 
@@ -110,7 +111,7 @@ export default Vue.extend({
 			}
 		},
 		callback(response?: string) {
-			this.$emit('input', typeof response == 'string' ? response : null);
+			this.$emit('update:value', typeof response == 'string' ? response : null);
 		},
 	},
 });
diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
index 3b83865b55..c59c319fd2 100644
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -6,23 +6,24 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -49,12 +50,12 @@ export default Vue.extend({
 
 			try {
 				if (this.isFollowing) {
-					await this.$root.api('channels/unfollow', {
+					await os.api('channels/unfollow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = false;
 				} else {
-					await this.$root.api('channels/follow', {
+					await os.api('channels/follow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = true;
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index bef4759570..705d3b09c4 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -2,28 +2,42 @@
 <router-link :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
 		<div class="fade"></div>
-		<div class="name"><fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="name"><Fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
 		<div class="status">
-			<div><fa :icon="faUsers" fixed-width/><i18n path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
-			<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+			<div>
+				<Fa :icon="faUsers" fixed-width/>
+				<i18n-t keypath="_channel.usersCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.usersCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
+			<div>
+				<Fa :icon="faPencilAlt" fixed-width/>
+				<i18n-t keypath="_channel.notesCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.notesCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
 		</div>
 	</div>
 	<article v-if="channel.description">
 		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
 	</article>
 	<footer>
-		<span>
-			{{ $t('updatedAt') }}: <mk-time :time="channel.lastNotedAt"/>
+		<span v-if="channel.lastNotedAt">
+			{{ $t('updatedAt') }}: <MkTime :time="channel.lastNotedAt"/>
 		</span>
 	</footer>
 </router-link>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -44,7 +58,6 @@ export default Vue.extend({
 	display: block;
 	overflow: hidden;
 	width: 100%;
-	border: 1px solid var(--divider);
 
 	&:hover {
 		text-decoration: none;
diff --git a/src/client/components/code-core.vue b/src/client/components/code-core.vue
index a9253528d9..cfb9d47ed9 100644
--- a/src/client/components/code-core.vue
+++ b/src/client/components/code-core.vue
@@ -1,13 +1,14 @@
 <template>
-<x-prism :inline="inline" :language="prismLang">{{ code }}</x-prism>
+<XPrism :inline="inline" :language="prismLang">{{ code }}</XPrism>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
-import XPrism from 'vue-prism-component';
-export default Vue.extend({
+import XPrism from 'vue-prism-component';import * as os from '@/os';
+
+export default defineComponent({
 	components: {
 		XPrism
 	},
diff --git a/src/client/components/code.vue b/src/client/components/code.vue
index 94cad57be4..f5d6c5673a 100644
--- a/src/client/components/code.vue
+++ b/src/client/components/code.vue
@@ -1,12 +1,13 @@
 <template>
-<x-code :code="code" :lang="lang" :inline="inline"/>
+<XCode :code="code" :lang="lang" :inline="inline"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';
+
+export default defineComponent({
 	components: {
-		XCode: () => import('./code-core.vue').then(m => m.default)
+		XCode: defineAsyncComponent(() => import('./code-core.vue'))
 	},
 	props: {
 		code: {
diff --git a/src/client/components/cw-button.vue b/src/client/components/cw-button.vue
index 16a9b84f62..d052c410d1 100644
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -1,16 +1,16 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh _button" @click="toggle">
-	<b>{{ value ? this.$t('_cw.hide') : this.$t('_cw.show') }}</b>
-	<span v-if="!value">{{ this.label }}</span>
+<button class="nrvgflfu _button" @click="toggle">
+	<b>{{ value ? $t('_cw.hide') : $t('_cw.show') }}</b>
+	<span v-if="!value">{{ label }}</span>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
@@ -36,14 +36,14 @@ export default Vue.extend({
 		length,
 
 		toggle() {
-			this.$emit('input', !this.value);
+			this.$emit('update:value', !this.value);
 		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.nrvgflfuaxwgkxoynpnumyookecqrrvh {
+.nrvgflfu {
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.7em;
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 6d42429166..ef96297465 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,22 +1,22 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<transition-group class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item"></slot>
 		<div class="separator" v-if="showDate(i, item)" :key="item.id + '_date'">
 			<p class="date">
-				<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
-				<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
+				<span><Fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
+				<span>{{ getDateText(items[i + 1].createdAt) }}<Fa class="icon" :icon="faAngleDown"/></span>
 			</p>
 		</div>
 	</template>
-</component>
+</transition-group>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,
@@ -82,14 +82,14 @@ export default Vue.extend({
 	}
 
 	&[data-direction="up"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(64px);
 		}
 	}
 
 	&[data-direction="down"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(-64px);
 		}
diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index dd38a087e9..e7cb9d8482 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -1,20 +1,21 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<x-timeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
-</x-column>
+	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
 
 	methods: {
 		async setAntenna() {
-			const antennas = await this.$root.api('antennas/list');
-			const { canceled, result: antenna } = await this.$root.dialog({
+			const antennas = await os.api('antennas/list');
+			const { canceled, result: antenna } = await os.dialog({
 				title: this.$t('selectAntenna'),
 				type: null,
 				select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			Vue.set(this.column, 'antennaId', antenna.id);
+			this.column.antennaId = antenna.id;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 
diff --git a/src/client/components/deck/column-core.vue b/src/client/components/deck/column-core.vue
index 44f19e7eda..36872d987c 100644
--- a/src/client/components/deck/column-core.vue
+++ b/src/client/components/deck/column-core.vue
@@ -1,17 +1,17 @@
 <template>
 <!-- TODO: リファクタの余地がありそう -->
-<x-widgets-column v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-notifications-column v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-list-column v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-antenna-column v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<!-- TODO: <x-tl-column v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
-<x-mentions-column v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-direct-column v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<!-- TODO: <XTlColumn v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
 import XListColumn from './list-column.vue';
@@ -20,7 +20,7 @@ import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XTlColumn,
 		XAntennaColumn,
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index 61b7ac9c69..a8ae7e4cc2 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ naked, paged: isMainColumn, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -15,15 +15,14 @@
 		@contextmenu.prevent.stop="onContextmenu"
 	>
 		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
-			<template v-if="active"><fa :icon="faAngleUp"/></template>
-			<template v-else><fa :icon="faAngleDown"/></template>
+			<template v-if="active"><Fa :icon="faAngleUp"/></template>
+			<template v-else><Fa :icon="faAngleDown"/></template>
 		</button>
 		<div class="action">
 			<slot name="action"></slot>
 		</div>
 		<span class="header"><slot name="header"></slot></span>
-		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><fa :icon="faCaretDown"/></button>
-		<button v-else-if="$route.name !== 'index'" class="close _button" @click.stop="close"><fa :icon="faTimes"/></button>
+		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -32,11 +31,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		column: {
 			type: Object,
@@ -71,7 +71,7 @@ export default Vue.extend({
 			dragging: false,
 			draghover: false,
 			dropready: false,
-			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes,
+			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
 		};
 	},
 
@@ -86,10 +86,10 @@ export default Vue.extend({
 
 		keymap(): any {
 			return {
-				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
-				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
-				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
-				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
 			};
 		}
 	},
@@ -100,21 +100,21 @@ export default Vue.extend({
 		},
 
 		dragging(v) {
-			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
 		}
 	},
 
 	mounted() {
 		if (!this.isMainColumn) {
-			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (!this.isMainColumn) {
-			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
@@ -137,7 +137,7 @@ export default Vue.extend({
 				icon: faPencilAlt,
 				text: this.$t('rename'),
 				action: () => {
-					this.$root.dialog({
+					os.dialog({
 						title: this.$t('rename'),
 						input: {
 							default: this.column.name,
@@ -207,14 +207,7 @@ export default Vue.extend({
 		},
 
 		showMenu() {
-			this.$root.menu({
-				items: this.getMenu(),
-				source: this.$refs.menu,
-			});
-		},
-
-		close() {
-			this.$router.push('/');
+			os.modalMenu(this.getMenu(), this.$refs.menu);
 		},
 
 		goTop() {
@@ -232,7 +225,7 @@ export default Vue.extend({
 			}
 
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
 			this.dragging = true;
 		},
 
@@ -254,7 +247,7 @@ export default Vue.extend({
 				return;
 			}
 
-			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
 
 			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -267,9 +260,9 @@ export default Vue.extend({
 
 		onDrop(e) {
 			this.draghover = false;
-			this.$root.$emit('deck.column.dragEnd');
+			os.deckGlobalEvents.emit('column.dragEnd');
 
-			const id = e.dataTransfer.getData('mk-deck-column');
+			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
 			if (id != null && id != '') {
 				this.$store.commit('deviceUser/swapDeckColumn', {
 					a: this.column.id,
@@ -285,9 +278,11 @@ export default Vue.extend({
 .dnpfarvg {
 	$header-height: 42px;
 
+	--section-padding: 10px;
+
 	height: 100%;
 	overflow: hidden;
-	box-shadow: 0 0 0 1px var(--deckColumnBorder);
+	contain: content;
 
 	&.draghover {
 		box-shadow: 0 0 0 2px var(--focus);
@@ -341,7 +336,6 @@ export default Vue.extend({
 	&.paged {
 		> div {
 			background: var(--bg);
-			padding: var(--margin);
 		}
 	}
 
@@ -379,8 +373,7 @@ export default Vue.extend({
 
 		> .toggleActive,
 		> .action > *,
-		> .menu,
-		> .close {
+		> .menu {
 			z-index: 1;
 			width: $header-height;
 			line-height: $header-height;
@@ -408,8 +401,7 @@ export default Vue.extend({
 			display: none;
 		}
 
-		> .menu,
-		> .close {
+		> .menu {
 			margin-left: auto;
 			margin-right: -16px;
 		}
diff --git a/src/client/components/deck/direct-column.vue b/src/client/components/deck/direct-column.vue
index daf83cabff..ec598cebcb 100644
--- a/src/client/components/deck/direct-column.vue
+++ b/src/client/components/deck/direct-column.vue
@@ -1,19 +1,20 @@
 <template>
-<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotes
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index a6e50802e0..4b8fc4a895 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -1,20 +1,21 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<x-timeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
-</x-column>
+	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
 
 	methods: {
 		async setList() {
-			const lists = await this.$root.api('users/lists/list');
-			const { canceled, result: list } = await this.$root.dialog({
+			const lists = await os.api('users/lists/list');
+			const { canceled, result: list } = await os.dialog({
 				title: this.$t('selectList'),
 				type: null,
 				select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			Vue.set(this.column, 'listId', list.id);
+			this.column.listId = list.id;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 
diff --git a/src/client/components/deck/mentions-column.vue b/src/client/components/deck/mentions-column.vue
index 7f5382a155..dfa82af9b9 100644
--- a/src/client/components/deck/mentions-column.vue
+++ b/src/client/components/deck/mentions-column.vue
@@ -1,19 +1,20 @@
 <template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotes
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index ac49aec06d..23fcb15681 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -1,19 +1,20 @@
 <template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notifications :include-types="column.includingTypes"/>
-</x-column>
+	<XNotifications :include-types="column.includingTypes"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '../notifications.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotifications
@@ -42,12 +43,17 @@ export default Vue.extend({
 			icon: faCog,
 			text: this.$t('notificationSetting'),
 			action: async () => {
-				this.$root.new(await import('../notification-setting-window.vue').then(m => m.default), {
+				os.popup(await import('@/components/notification-setting-window.vue'), {
 					includingTypes: this.column.includingTypes,
-				}).$on('ok', async ({ includingTypes }) => {
-					this.$set(this.column, 'includingTypes', includingTypes);
-					this.$store.commit('deviceUser/updateDeckColumn', this.column);
-				});
+				}, {
+					done: async (res) => {
+						const { includingTypes } = res;
+						this.$store.commit('deviceUser/updateDeckColumn', {
+							...this.column,
+							includingTypes: includingTypes
+						});
+					},
+				}, 'closed');
 			}
 		}];
 	},
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
index d2d1749c7c..f757618881 100644
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -1,31 +1,32 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
 	<template #header>
-		<fa v-if="column.tl === 'home'" :icon="faHome"/>
-		<fa v-else-if="column.tl === 'local'" :icon="faComments"/>
-		<fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
-		<fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
+		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
+		<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
+		<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div class="iwaalbte" v-if="disabled">
 		<p>
-			<fa :icon="faMinusCircle"/>
+			<Fa :icon="faMinusCircle"/>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 	</div>
-	<x-timeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
-</x-column>
+	<XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -78,7 +79,7 @@ export default Vue.extend({
 
 	methods: {
 		async setType() {
-			const { canceled, result: src } = await this.$root.dialog({
+			const { canceled, result: src } = await os.dialog({
 				title: this.$t('timeline'),
 				type: null,
 				select: {
@@ -99,7 +100,7 @@ export default Vue.extend({
 				}
 				return;
 			}
-			Vue.set(this.column, 'tl', src);
+			this.column.tl = src;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index 31d1e3d53c..e19fb01e5e 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -1,47 +1,46 @@
 <template>
-<x-column :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
-	<template #header><fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
+	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
 		<template v-if="edit">
 			<header>
-				<mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
+				<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
 					<template #label>{{ $t('selectWidget') }}</template>
 					<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
-				</mk-select>
-				<mk-button inline @click="addWidget" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
-				<mk-button inline @click="edit = false">{{ $t('close') }}</mk-button>
+				</MkSelect>
+				<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
+				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
 			</header>
-			<x-draggable
+			<XDraggable
 				:list="column.widgets"
 				animation="150"
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><fa :icon="faTimes"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :column="column"/>
+					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
 				</div>
-			</x-draggable>
+			</XDraggable>
 		</template>
-		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :column="column"/>
+		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
 	</div>
-</x-column>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '../../components/ui/select.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkButton from '@/components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		MkSelect,
 		MkButton,
 	},
@@ -63,6 +62,7 @@ export default Vue.extend({
 			menu: null,
 			widgetAdderSelected: null,
 			widgets,
+			settings: {},
 			faWindowMaximize, faTimes, faPlus
 		};
 	},
@@ -79,7 +79,7 @@ export default Vue.extend({
 
 	methods: {
 		widgetFunc(id) {
-			this.$refs[id][0].setting();
+			this.settings[id]();
 		},
 
 		onWidgetSort() {
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 0ca9a5c69e..3517aa3339 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -1,69 +1,60 @@
 <template>
-<div class="mk-dialog" :class="{ iconOnly }">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
-		<div class="main" ref="main" v-if="show">
-			<template v-if="type == 'signin'">
-				<mk-signin/>
+<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+	<div class="mk-dialog">
+		<div class="icon" v-if="icon">
+			<Fa :icon="icon"/>
+		</div>
+		<div class="icon" v-else-if="!input && !select && !user" :class="type">
+			<Fa :icon="faCheck" v-if="type === 'success'"/>
+			<Fa :icon="faTimesCircle" v-if="type === 'error'"/>
+			<Fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
+			<Fa :icon="faInfoCircle" v-if="type === 'info'"/>
+			<Fa :icon="faQuestionCircle" v-if="type === 'question'"/>
+			<Fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
+		</div>
+		<header v-if="title" v-html="title"></header>
+		<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
+		<div class="body" v-if="text" v-html="text"></div>
+		<MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
+		<MkInput v-if="user" v-model:value="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></MkInput>
+		<MkSelect v-if="select" v-model:value="selectedValue" autofocus>
+			<template v-if="select.items">
+				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>
 			<template v-else>
-				<div class="icon" v-if="icon">
-					<fa :icon="icon"/>
-				</div>
-				<div class="icon" v-else-if="!input && !select && !user" :class="type">
-					<fa :icon="faCheck" v-if="type === 'success'"/>
-					<fa :icon="faTimesCircle" v-if="type === 'error'"/>
-					<fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
-					<fa :icon="faInfoCircle" v-if="type === 'info'"/>
-					<fa :icon="faQuestionCircle" v-if="type === 'question'"/>
-					<fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
-				</div>
-				<header v-if="title" v-html="title"></header>
-				<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
-				<div class="body" v-if="text" v-html="text"></div>
-				<mk-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
-				<mk-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
-				<mk-select v-if="select" v-model="selectedValue" autofocus>
-					<template v-if="select.items">
-						<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
-					</template>
-					<template v-else>
-						<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-							<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
-						</optgroup>
-					</template>
-				</mk-select>
-				<div class="buttons" v-if="!iconOnly && (showOkButton || showCancelButton) && !actions">
-					<mk-button inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</mk-button>
-					<mk-button inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</mk-button>
-				</div>
-				<div class="buttons" v-if="actions">
-					<mk-button v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</mk-button>
-				</div>
+				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
+					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+				</optgroup>
 			</template>
+		</MkSelect>
+		<div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
+			<MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</MkButton>
+			<MkButton inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</MkButton>
+		</div>
+		<div class="buttons" v-if="actions">
+			<MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
 		</div>
-	</transition>
-</div>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import MkButton from './ui/button.vue';
-import MkInput from './ui/input.vue';
-import MkSelect from './ui/select.vue';
-import MkSignin from './signin.vue';
+import MkModal from '@/components/ui/modal.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSelect from '@/components/ui/select.vue';
 import parseAcct from '../../misc/acct/parse';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
+		MkModal,
 		MkButton,
 		MkInput,
 		MkSelect,
-		MkSignin,
 	},
 
 	props: {
@@ -107,19 +98,12 @@ export default Vue.extend({
 			type: Boolean,
 			default: true
 		},
-		iconOnly: {
-			type: Boolean,
-			default: false
-		},
-		autoClose: {
-			type: Boolean,
-			default: false
-		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
-			show: true,
 			inputValue: this.input && this.input.default ? this.input.default : null,
 			userInputValue: null,
 			selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
@@ -131,63 +115,51 @@ export default Vue.extend({
 	watch: {
 		userInputValue() {
 			if (this.user) {
-				this.$root.api('users/show', parseAcct(this.userInputValue)).then(u => {
+				os.api('users/show', parseAcct(this.userInputValue)).then(u => {
 					this.canOk = u != null;
 				}).catch(() => {
 					this.canOk = false;
 				});
 			}
-		}
+		},
 	},
 
 	mounted() {
 		if (this.user) this.canOk = false;
 
-		if (this.autoClose) {
-			setTimeout(() => {
-				this.close();
-			}, 1000);
-		}
-
 		document.addEventListener('keydown', this.onKeydown);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('keydown', this.onKeydown);
 	},
 
 	methods: {
+		done(canceled, result?) {
+			this.$emit('done', { canceled, result });
+			this.$refs.modal.close();
+		},
+
 		async ok() {
 			if (!this.canOk) return;
 			if (!this.showOkButton) return;
 
 			if (this.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
+				const user = await os.api('users/show', parseAcct(this.userInputValue));
 				if (user) {
-					this.$emit('ok', user);
-					this.close();
+					this.done(false, user);
 				}
 			} else {
 				const result =
 					this.input ? this.inputValue :
 					this.select ? this.selectedValue :
 					true;
-				this.$emit('ok', result);
-				this.close();
+				this.done(false, result);
 			}
 		},
 
 		cancel() {
-			this.$emit('cancel');
-			this.close();
-		},
-
-		close() {
-			if (!this.show) return;
-			this.show = false;
-			this.$el.style.pointerEvents = 'none';
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.main as any).style.pointerEvents = 'none';
+			this.done(true);
 		},
 
 		onBgClick() {
@@ -214,95 +186,60 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.dialog-enter-active, .dialog-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.dialog-enter, .dialog-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
 .mk-dialog {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: fixed;
-	z-index: 30000;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-
-	&.iconOnly > .main {
-		min-width: 0;
-		width: initial;
-	}
-
-	> .main {
-		display: block;
-		position: fixed;
-		margin: auto;
-		padding: 32px;
-		min-width: 320px;
-		max-width: 480px;
-		box-sizing: border-box;
-		width: calc(100% - 32px);
-		text-align: center;
-		background: var(--panel);
-		border-radius: var(--radius);
-
-		> .icon {
-			font-size: 32px;
-
-			&.success {
-				color: var(--accent);
-			}
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--accent);
+		}
 
-			&.error {
-				color: #ec4137;
-			}
+		&.error {
+			color: #ec4137;
+		}
 
-			&.warning {
-				color: #ecb637;
-			}
+		&.warning {
+			color: #ecb637;
+		}
 
-			> * {
-				display: block;
-				margin: 0 auto;
-			}
+		> * {
+			display: block;
+			margin: 0 auto;
+		}
 
-			& + header {
-				margin-top: 16px;
-			}
+		& + header {
+			margin-top: 16px;
 		}
+	}
 
-		> header {
-			margin: 0 0 8px 0;
-			font-weight: bold;
-			font-size: 20px;
+	> header {
+		margin: 0 0 8px 0;
+		font-weight: bold;
+		font-size: 20px;
 
-			& + .body {
-				margin-top: 8px;
-			}
+		& + .body {
+			margin-top: 8px;
 		}
+	}
 
-		> .body {
-			margin: 16px 0 0 0;
-		}
+	> .body {
+		margin: 16px 0 0 0;
+	}
 
-		> .buttons {
-			margin-top: 16px;
+	> .buttons {
+		margin-top: 16px;
 
-			> * {
-				margin: 0 8px;
-			}
+		> * {
+			margin: 0 8px;
 		}
 	}
 }
diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue
index 4bc1e569b7..7615014ba9 100644
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -1,20 +1,20 @@
 <template>
 <div class="zdjebgpv" ref="thumbnail">
-	<img-with-blurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
-	<fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
-	<fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
-	<fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
-	<fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
-	<fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
-	<fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
-	<fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
-	<fa :icon="faFile" class="icon" v-else/>
-	<fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
+	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
+	<Fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
+	<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
+	<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
+	<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
+	<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
+	<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
+	<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
+	<Fa :icon="faFile" class="icon" v-else/>
+	<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	faFile,
 	faFileAlt,
@@ -28,7 +28,7 @@ import {
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index c42cb66617..d989d982d9 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -1,31 +1,41 @@
 <template>
-<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()">
+<XModalWindow ref="dialog"
+	:width="800"
+	:height="500"
+	:with-ok-button="true"
+	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
 	<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(selected.length) }})</span>
 	</template>
 	<div>
-		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
+		<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
 	</div>
-</x-window>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
-import XWindow from './window.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import number from '@/filters/number';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDrive,
-		XWindow,
+		XModalWindow,
 	},
 
 	props: {
 		type: {
 			type: String,
 			required: false,
-			default: 'file' 
+			default: 'file'
 		},
 		multiple: {
 			type: Boolean,
@@ -33,6 +43,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			selected: []
@@ -41,13 +53,20 @@ export default Vue.extend({
 
 	methods: {
 		ok() {
-			this.$emit('selected', this.selected);
-			this.$refs.window.close();
+			this.$emit('done', this.selected);
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('done');
+			this.$refs.dialog.close();
 		},
 
 		onChangeSelection(xs) {
 			this.selected = xs;
-		}
+		},
+
+		number
 	}
 });
 </script>
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index b31a4e6375..261bbc83ec 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -1,7 +1,8 @@
 <template>
 <div class="ncvczrfv"
-	:data-is-selected="isSelected"
+	:class="{ isSelected }"
 	@click="onClick"
+	@contextmenu.stop="onContextmenu"
 	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
@@ -20,7 +21,7 @@
 		<p>{{ $t('nsfw') }}</p>
 	</div>
 
-	<x-file-thumbnail class="thumbnail" :file="file" fit="contain"/>
+	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 
 	<p class="name">
 		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
@@ -30,17 +31,17 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-//import updateAvatar from '../api/update-avatar';
-//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 copyToClipboard from '@/scripts/copy-to-clipboard';
+import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import bytes from '../filters/bytes';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XFileThumbnail
+		MkDriveFileThumbnail
 	},
 
 	props: {
@@ -60,6 +61,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['chosen'],
+
 	data() {
 		return {
 			isDragging: false
@@ -72,48 +75,54 @@ export default Vue.extend({
 			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)}`;
 		}
 	},
 
 	methods: {
+		getMenu() {
+			return [{
+				text: this.$t('rename'),
+				icon: faICursor,
+				action: this.rename
+			}, {
+				text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
+				icon: this.file.isSensitive ? faEye : faEyeSlash,
+				action: this.toggleSensitive
+			}, null, {
+				text: this.$t('copyUrl'),
+				icon: faLink,
+				action: this.copyUrl
+			}, {
+				type: 'a',
+				href: this.file.url,
+				target: '_blank',
+				text: this.$t('download'),
+				icon: faDownload,
+				download: this.file.name
+			}, null, {
+				text: this.$t('delete'),
+				icon: faTrashAlt,
+				danger: true,
+				action: this.deleteFile
+			}];
+		},
+
 		onClick(ev) {
 			if (this.selectMode) {
 				this.$emit('chosen', this.file);
 			} else {
-				this.$root.menu({
-					items: [{
-						text: this.$t('rename'),
-						icon: faICursor,
-						action: this.rename
-					}, {
-						text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
-						icon: this.file.isSensitive ? faEye : faEyeSlash,
-						action: this.toggleSensitive
-					}, null, {
-						text: this.$t('copyUrl'),
-						icon: faLink,
-						action: this.copyUrl
-					}, {
-						type: 'a',
-						href: this.file.url,
-						target: '_blank',
-						text: this.$t('download'),
-						icon: faDownload,
-						download: this.file.name
-					}, null, {
-						text: this.$t('delete'),
-						icon: faTrashAlt,
-						action: this.deleteFile
-					}],
-					source: ev.currentTarget || ev.target,
-				});
+				os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
 			}
 		},
 
+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
+
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_file', JSON.stringify(this.file));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(this.file));
 			this.isDragging = true;
 
 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -127,7 +136,7 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFile'),
 				input: {
 					placeholder: this.$t('inputNewFileName'),
@@ -136,7 +145,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: this.file.id,
 					name: name
 				});
@@ -144,7 +153,7 @@ export default Vue.extend({
 		},
 
 		toggleSensitive() {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: this.file.id,
 				isSensitive: !this.file.isSensitive
 			});
@@ -152,18 +161,15 @@ export default Vue.extend({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		setAsAvatar() {
-			updateAvatar(this.$root)(this.file);
+			os.updateAvatar(this.file);
 		},
 
 		setAsBanner() {
-			updateBanner(this.$root)(this.file);
+			os.updateBanner(this.file);
 		},
 
 		addApp() {
@@ -171,17 +177,19 @@ export default Vue.extend({
 		},
 
 		async deleteFile() {
-			const { canceled } = await this.$root.dialog({
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			this.$root.api('drive/files/delete', {
+			os.api('drive/files/delete', {
 				fileId: this.file.id
 			});
-		}
+		},
+
+		bytes
 	}
 });
 </script>
@@ -197,6 +205,10 @@ export default Vue.extend({
 		cursor: pointer;
 	}
 
+	> * {
+		pointer-events: none;
+	}
+
 	&:hover {
 		background: rgba(#000, 0.05);
 
@@ -233,7 +245,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-is-selected] {
+	&.isSelected {
 		background: var(--accent);
 
 		&:hover {
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 9e80653194..bf2c9b6494 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="rghtznwe"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@mouseover="onMouseover"
 	@mouseout="onMouseout"
@@ -14,8 +14,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover"><fa :icon="faFolderOpen" fixed-width/></template>
-		<template v-if="!hover"><fa :icon="faFolder" fixed-width/></template>
+		<template v-if="hover"><Fa :icon="faFolderOpen" fixed-width/></template>
+		<template v-if="!hover"><Fa :icon="faFolder" fixed-width/></template>
 		{{ folder.name }}
 	</p>
 	<p class="upload" v-if="$store.state.settings.uploadFolder == folder.id">
@@ -26,10 +26,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -47,6 +48,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['chosen'],
+
 	data() {
 		return {
 			hover: false,
@@ -91,8 +94,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -121,11 +124,11 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder.id
 				});
@@ -133,7 +136,7 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 
@@ -141,7 +144,7 @@ export default Vue.extend({
 				if (folder.id == this.folder.id) return;
 
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder.id
 				}).then(() => {
@@ -149,15 +152,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -167,7 +170,7 @@ export default Vue.extend({
 
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_folder', JSON.stringify(this.folder));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(this.folder));
 			this.isDragging = true;
 
 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -189,7 +192,7 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -197,7 +200,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: this.folder.id,
 					name: name
 				});
@@ -205,7 +208,7 @@ export default Vue.extend({
 		},
 
 		deleteFolder() {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: this.folder.id
 			}).then(() => {
 				if (this.$store.state.settings.uploadFolder === this.folder.id) {
@@ -217,14 +220,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -272,7 +275,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-draghover] {
+	&.draghover {
 		&:after {
 			content: "";
 			pointer-events: none;
diff --git a/src/client/components/drive.nav-folder.vue b/src/client/components/drive.nav-folder.vue
index 9e805a5e93..16ebc433fa 100644
--- a/src/client/components/drive.nav-folder.vue
+++ b/src/client/components/drive.nav-folder.vue
@@ -1,22 +1,23 @@
 <template>
 <div class="drylbebk"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null"><fa :icon="faCloud"/></i>
+	<i v-if="folder == null"><Fa :icon="faCloud"/></i>
 	<span>{{ folder == null ? $t('drive') : folder.name }}</span>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -58,8 +59,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -90,11 +91,11 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -102,13 +103,13 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 				// 移動先が自分自身ならreject
 				if (this.folder && folder.id == this.folder.id) return;
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				});
@@ -125,7 +126,7 @@ export default Vue.extend({
 		pointer-events: none;
 	}
 
-	&[data-draghover] {
+	&.draghover {
 		background: #eee;
 	}
 
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 3e7b7d04ae..2c3203b387 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -2,34 +2,35 @@
 <div class="yfudmmck">
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<x-nav-folder :class="{ current: folder == null }"/>
+			<XNavFolder :class="{ current: folder == null }"/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
-				<x-nav-folder :folder="f" :key="f.id"/>
+				<span class="separator"><Fa :icon="faAngleRight"/></span>
+				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><fa :icon="faAngleRight"/></span>
+			<span class="separator" v-if="folder != null"><Fa :icon="faAngleRight"/></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
-	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
+	<div class="main _section" :class="{ uploading: uploadings.length > 0, fetching }"
 		ref="main"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
+		@contextmenu="onContextmenu"
 	>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
-				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
+				<XFolder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="files" ref="filesContainer" v-show="files.length > 0">
-				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
+				<XFile v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
@@ -37,29 +38,28 @@
 				<p v-if="!draghover && folder != null">{{ $t('emptyFolder') }}</p>
 			</div>
 		</div>
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 	</div>
 	<div class="dropzone" v-if="draghover"></div>
-	<x-uploader ref="uploader" @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/>
 	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faAngleRight, faFolderPlus, faICursor, faLink, faUpload } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
-import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNavFolder,
 		XFolder,
 		XFile,
-		XUploader,
 		MkButton,
 	},
 
@@ -85,6 +85,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['selected', 'change-selection', 'move-root', 'cd', 'open-folder'],
+
 	data() {
 		return {
 			/**
@@ -100,7 +102,7 @@ export default Vue.extend({
 			hierarchyFolders: [],
 			selectedFiles: [],
 			selectedFolders: [],
-			uploadings: [],
+			uploadings: os.uploads,
 			connection: null,
 
 			/**
@@ -140,7 +142,7 @@ export default Vue.extend({
 			});
 		}
 
-		this.connection = this.$root.stream.useSharedConnection('drive');
+		this.connection = os.stream.useSharedConnection('drive');
 
 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
 		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
@@ -164,7 +166,7 @@ export default Vue.extend({
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 		this.ilFilesObserver.disconnect();
 	},
@@ -204,14 +206,6 @@ export default Vue.extend({
 			this.removeFolder(folderId);
 		},
 
-		onChangeUploaderUploads(uploads) {
-			this.uploadings = uploads;
-		},
-
-		onUploaderUploaded(file) {
-			this.addFile(file, true);
-		},
-
 		onDragover(e): any {
 			// ドラッグ元が自分自身の所有するアイテムだったら
 			if (this.isDragSource) {
@@ -221,8 +215,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -253,12 +247,12 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				if (this.files.some(f => f.id == file.id)) return;
 				this.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -266,7 +260,7 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 
@@ -274,7 +268,7 @@ export default Vue.extend({
 				if (this.folder && folder.id == this.folder.id) return false;
 				if (this.folders.some(f => f.id == folder.id)) return false;
 				this.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				}).then(() => {
@@ -282,15 +276,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -303,19 +297,19 @@ export default Vue.extend({
 		},
 
 		urlUpload() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('uploadFromUrl'),
 				input: {
 					placeholder: this.$t('uploadFromUrlDescription')
 				}
 			}).then(({ canceled, result: url }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/upload_from_url', {
+				os.api('drive/files/upload_from_url', {
 					url: url,
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$root.dialog({
+				os.dialog({
 					title: this.$t('uploadFromUrlRequested'),
 					text: this.$t('uploadFromUrlMayTakeTime')
 				});
@@ -323,14 +317,14 @@ export default Vue.extend({
 		},
 
 		createFolder() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('createFolder'),
 				input: {
 					placeholder: this.$t('folderName')
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/create', {
+				os.api('drive/folders/create', {
 					name: name,
 					parentId: this.folder ? this.folder.id : undefined
 				}).then(folder => {
@@ -340,7 +334,7 @@ export default Vue.extend({
 		},
 
 		renameFolder(folder) {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -348,7 +342,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					name: name
 				}).then(folder => {
@@ -359,7 +353,7 @@ export default Vue.extend({
 		},
 
 		deleteFolder(folder) {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: folder.id
 			}).then(() => {
 				// 削除時に親フォルダに移動
@@ -367,14 +361,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -390,7 +384,9 @@ export default Vue.extend({
 
 		upload(file, folder) {
 			if (folder && typeof folder == 'object') folder = folder.id;
-			(this.$refs.uploader as any).upload(file, folder);
+			os.upload(file, folder).then(res => {
+				this.addFile(res, true);
+			});
 		},
 
 		chooseFile(file) {
@@ -441,7 +437,7 @@ export default Vue.extend({
 
 			this.fetching = true;
 
-			this.$root.api('drive/folders/show', {
+			os.api('drive/folders/show', {
 				folderId: target
 			}).then(folder => {
 				this.folder = folder;
@@ -465,7 +461,7 @@ export default Vue.extend({
 
 			if (this.folders.some(f => f.id == folder.id)) {
 				const exist = this.folders.map(f => f.id).indexOf(folder.id);
-				Vue.set(this.folders, exist, folder);
+				this.folders[exist] = folder;
 				return;
 			}
 
@@ -482,7 +478,7 @@ export default Vue.extend({
 
 			if (this.files.some(f => f.id == file.id)) {
 				const exist = this.files.map(f => f.id).indexOf(file.id);
-				Vue.set(this.files, exist, file);
+				this.files[exist] = file;
 				return;
 			}
 
@@ -543,7 +539,7 @@ export default Vue.extend({
 			const filesMax = 30;
 
 			// フォルダ一覧取得
-			this.$root.api('drive/folders', {
+			os.api('drive/folders', {
 				folderId: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -556,7 +552,7 @@ export default Vue.extend({
 			});
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				limit: filesMax + 1
@@ -587,7 +583,7 @@ export default Vue.extend({
 			const max = 30;
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				untilId: this.files[this.files.length - 1].id,
@@ -602,7 +598,41 @@ export default Vue.extend({
 				for (const x of files) this.appendFile(x);
 				this.fetching = false;
 			});
-		}
+		},
+
+		getMenu() {
+			return [{
+				text: this.$t('addFile'),
+				type: 'label'
+			}, {
+				text: this.$t('upload'),
+				icon: faUpload,
+				action: () => { this.selectLocalFile(); }
+			}, {
+				text: this.$t('fromUrl'),
+				icon: faLink,
+				action: () => { this.urlUpload(); }
+			}, null, {
+				text: this.folder ? this.folder.name : this.$t('drive'),
+				type: 'label'
+			}, this.folder ? {
+				text: this.$t('renameFolder'),
+				icon: faICursor,
+				action: () => { this.renameFolder(this.folder); }
+			} : undefined, this.folder ? {
+				text: this.$t('deleteFolder'),
+				icon: faTrashAlt,
+				action: () => { this.deleteFolder(this.folder); }
+			} : undefined, {
+				text: this.$t('createFolder'),
+				icon: faFolderPlus,
+				action: () => { this.createFolder(); }
+			}];
+		},
+
+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
 	}
 });
 </script>
@@ -613,6 +643,8 @@ export default Vue.extend({
 		display: block;
 		z-index: 2;
 		width: 100%;
+		padding: 0 8px;
+		box-sizing: border-box;
 		overflow: auto;
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
@@ -666,7 +698,6 @@ export default Vue.extend({
 	}
 
 	> .main {
-		padding: 8px 0;
 		overflow: auto;
 
 		&, * {
@@ -734,11 +765,6 @@ export default Vue.extend({
 		pointer-events: none;
 	}
 
-	> .mk-uploader {
-		height: 100px;
-		padding: 16px;
-	}
-
 	> input {
 		display: none;
 	}
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 7871b438c9..e79f3c9292 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,6 +1,6 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="omfetrab">
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="omfetrab _popup">
 		<header>
 			<button v-for="(category, i) in categories"
 				class="_button"
@@ -8,26 +8,26 @@
 				:class="{ active: category.isActive }"
 				:key="i"
 			>
-				<fa :icon="category.icon" fixed-width/>
+				<Fa :icon="category.icon" fixed-width/>
 			</button>
 		</header>
 
 		<div class="emojis">
 			<template v-if="categories[0].isActive">
-				<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+				<header class="category"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
 				<div class="list">
-					<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+					<button v-for="emoji in ($store.state.device.recentEmojis || [])"
 						class="_button"
 						:title="emoji.name"
 						@click="chosen(emoji)"
-						:key="i"
+						:key="emoji"
 					>
-						<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+						<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
 						<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 					</button>
 				</div>
 
-				<header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
+				<header class="category"><Fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
 			</template>
 
 			<template v-if="categories.find(x => x.isActive).name">
@@ -38,7 +38,7 @@
 						@click="chosen(emoji)"
 						:key="emoji.name"
 					>
-						<mk-emoji :emoji="emoji.char"/>
+						<MkEmoji :emoji="emoji.char"/>
 					</button>
 				</div>
 			</template>
@@ -59,29 +59,31 @@
 			</template>
 		</div>
 	</div>
-</x-popup>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
-import XPopup from './popup.vue';
+import MkModal from '@/components/ui/modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPopup,
+		MkModal,
 	},
 
 	props: {
-		source: {
-			required: true
+		src: {
+			required: false
 		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			emojilist,
@@ -162,12 +164,9 @@ export default Vue.extend({
 			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
 			recents.unshift(emoji)
 			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
-			this.$emit('chosen', getKey(emoji));
+			this.$emit('done', getKey(emoji));
+			this.$refs.modal.close();
 		},
-
-		close() {
-			this.$refs.popup.close();
-		}
 	}
 });
 </script>
diff --git a/src/client/components/emoji.vue b/src/client/components/emoji.vue
index 277ba1a07d..ba65ada8ac 100644
--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -6,11 +6,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		name: {
 			type: String,
diff --git a/src/client/components/error.vue b/src/client/components/error.vue
index 90efa700b2..cac24efc8c 100644
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -1,19 +1,19 @@
 <template>
 <transition :name="$store.state.device.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg _panel">
+	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
-		<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
+		<p><Fa :icon="faExclamationTriangle"/> {{ $t('somethingHappened') }}</p>
+		<MkButton @click="() => $emit('retry')" class="button">{{ $t('retry') }}</MkButton>
 	</div>
 </transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
diff --git a/src/client/components/file-type-icon.vue b/src/client/components/file-type-icon.vue
index 8492567ad7..ec29d5c882 100644
--- a/src/client/components/file-type-icon.vue
+++ b/src/client/components/file-type-icon.vue
@@ -1,14 +1,15 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><fa :icon="faFileImage"/></template>
+	<template v-if="kind == 'image'"><Fa :icon="faFileImage"/></template>
 </span>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 7967c0e159..3b8f7454c2 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -7,32 +7,33 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
+			<span v-if="full">{{ $t('followRequestPending') }}</span><Fa :icon="faHourglassHalf"/>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
+			<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse/>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('followRequest') }}</span><Fa :icon="faPlus"/>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -58,7 +59,7 @@ export default Vue.extend({
 	created() {
 		// 渡されたユーザー情報が不完全な場合
 		if (this.user.isFollowing == null) {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				userId: this.user.id
 			}).then(u => {
 				this.isFollowing = u.isFollowing;
@@ -68,13 +69,13 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 
 		this.connection.on('follow', this.onFollowChange);
 		this.connection.on('unfollow', this.onFollowChange);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},
 
@@ -91,7 +92,7 @@ export default Vue.extend({
 
 			try {
 				if (this.isFollowing) {
-					const { canceled } = await this.$root.dialog({
+					const { canceled } = await os.dialog({
 						type: 'warning',
 						text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
 						showCancelButton: true
@@ -99,21 +100,21 @@ export default Vue.extend({
 
 					if (canceled) return;
 
-					await this.$root.api('following/delete', {
+					await os.api('following/delete', {
 						userId: this.user.id
 					});
 				} else {
 					if (this.hasPendingFollowRequestFromYou) {
-						await this.$root.api('following/requests/cancel', {
+						await os.api('following/requests/cancel', {
 							userId: this.user.id
 						});
 					} else if (this.user.isLocked) {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
 					} else {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
diff --git a/src/client/components/form-dialog.vue b/src/client/components/form-dialog.vue
new file mode 100644
index 0000000000..2a067b67fa
--- /dev/null
+++ b/src/client/components/form-dialog.vue
@@ -0,0 +1,106 @@
+<template>
+<XModalWindow ref="dialog"
+	:width="400"
+	:can-close="false"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@click="cancel()"
+	@ok="ok()"
+	@close="cancel()"
+	@closed="$emit('closed')"
+>
+	<template #header>
+		{{ title }}
+	</template>
+	<div class="xkpnjxcv _section">
+		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
+			<MkInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</MkInput>
+			<MkInput v-else-if="form[item].type === 'string' && !item.multiline" v-model:value="values[item]" type="text">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</MkInput>
+			<MkTextarea v-else-if="form[item].type === 'string' && item.multiline" v-model:value="values[item]">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</MkTextarea>
+			<MkSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
+				<span v-text="form[item].label || item"></span>
+				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
+			</MkSwitch>
+		</label>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import MkInput from './ui/input.vue';
+import MkTextarea from './ui/textarea.vue';
+import MkSwitch from './ui/switch.vue';
+
+export default defineComponent({
+	components: {
+		XModalWindow,
+		MkInput,
+		MkTextarea,
+		MkSwitch,
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		form: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['done'],
+
+	data() {
+		return {
+			values: {}
+		};
+	},
+
+	created() {
+		for (const item in this.form) {
+			this.values[item] = this.form[item].hasOwnProperty('default') ? this.form[item].default : null;
+		}
+	},
+
+	methods: {
+		ok() {
+			this.$emit('done', {
+				result: this.values
+			});
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('done', {
+				canceled: true
+			});
+			this.$refs.dialog.close();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.xkpnjxcv {
+	> label {
+		display: block;
+
+		&:not(:last-child) {
+			margin-bottom: 32px;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/form-window.vue b/src/client/components/form-window.vue
deleted file mode 100644
index a656d64f84..0000000000
--- a/src/client/components/form-window.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
-	<template #header>
-		{{ title }}
-	</template>
-	<div class="xkpnjxcv">
-		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
-				<span v-text="form[item].label || item"></span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text">
-				<span v-text="form[item].label || item"></span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]">
-				<span v-text="form[item].label || item"></span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-textarea>
-			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
-				<span v-text="form[item].label || item"></span>
-				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-switch>
-		</label>
-	</div>
-</x-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XWindow from './window.vue';
-import MkInput from './ui/input.vue';
-import MkTextarea from './ui/textarea.vue';
-import MkSwitch from './ui/switch.vue';
-
-export default Vue.extend({
-	components: {
-		XWindow,
-		MkInput,
-		MkTextarea,
-		MkSwitch,
-	},
-
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-		form: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			values: {}
-		};
-	},
-
-	created() {
-		for (const item in this.form) {
-			Vue.set(this.values, item, this.form[item].hasOwnProperty('default') ? this.form[item].default : null);
-		}
-	},
-
-	methods: {
-		ok() {
-			this.$emit('ok', this.values);
-			this.$refs.window.close();
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.xkpnjxcv {
-	> label {
-		display: block;
-		padding: 16px 24px;
-	}
-}
-</style>
diff --git a/src/client/components/formula-core.vue b/src/client/components/formula-core.vue
index 45b27f9026..29c049297e 100644
--- a/src/client/components/formula-core.vue
+++ b/src/client/components/formula-core.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as katex from 'katex';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+import * as katex from 'katex';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		formula: {
 			type: String,
diff --git a/src/client/components/formula.vue b/src/client/components/formula.vue
index 4aaad1bf3e..fbb40bace7 100644
--- a/src/client/components/formula.vue
+++ b/src/client/components/formula.vue
@@ -1,12 +1,13 @@
 <template>
-<x-formula :formula="formula" :block="block" />
+<XFormula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	components: {
-		XFormula: () => import('./formula-core.vue').then(m => m.default)
+		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
 	},
 	props: {
 		formula: {
diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 630e8b83bc..bec670ac5f 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -1,15 +1,16 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
+	<button @click="search"><Fa :icon="faSearch"/> {{ $t('search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['q'],
 	data() {
 		return {
@@ -23,7 +24,7 @@ export default Vue.extend({
 	methods: {
 		search() {
 			const engine = this.$store.state.settings.webSearchEngine ||
-				'https://www.google.com/?#q={{query}}';
+				'https://www.google.com/search?q={{query}}';
 			const url = engine.replace('{{query}}', this.query)
 			window.open(url, '_blank');
 		}
diff --git a/src/client/components/header-clock.vue b/src/client/components/header-clock.vue
index 696fd4eb67..6be8effbb7 100644
--- a/src/client/components/header-clock.vue
+++ b/src/client/components/header-clock.vue
@@ -8,16 +8,17 @@
 		</time>
 	</div>
 	<div class="content _panel _ghost">
-		<mk-clock/>
+		<MkClock/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkClock from './analog-clock.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkClock
 	},
@@ -48,7 +49,7 @@ export default Vue.extend({
 		this.tick();
 		this.clock = setInterval(this.tick, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
diff --git a/src/client/components/icon-dialog.vue b/src/client/components/icon-dialog.vue
new file mode 100644
index 0000000000..e8eae3342f
--- /dev/null
+++ b/src/client/components/icon-dialog.vue
@@ -0,0 +1,73 @@
+<template>
+<MkModal ref="modal" @click="type === 'success' ? done() : () => {}" @closed="$emit('closed')">
+	<div class="iuyakobc" :class="type">
+		<Fa class="icon" v-if="type === 'success'" :icon="faCheck"/>
+		<Fa class="icon" v-else-if="type === 'waiting'" :icon="faSpinner" pulse/>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import MkModal from '@/components/ui/modal.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+	},
+
+	props: {
+		type: {
+			required: true
+		},
+		showing: {
+			required: true
+		}
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			faCheck, faSpinner,
+		};
+	},
+
+	watch: {
+		showing() {
+			if (!this.showing) this.done();
+		}
+	},
+
+	methods: {
+		done() {
+			this.$emit('done');
+			this.$refs.modal.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.iuyakobc {
+	position: relative;
+	padding: 32px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	width: initial;
+	font-size: 32px;
+
+	&.success {
+		color: var(--accent);
+	}
+
+	&.waiting {
+		> .icon {
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/image-viewer.vue b/src/client/components/image-viewer.vue
index c78112b988..adde74cb3a 100644
--- a/src/client/components/image-viewer.vue
+++ b/src/client/components/image-viewer.vue
@@ -1,16 +1,26 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
-</x-modal>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="xubzgfga">
+		<header>{{ image.name }}</header>
+		<img :src="image.url" :alt="image.name" :title="image.name" @click="$refs.modal.close()"/>
+		<footer>
+			<span>{{ image.type }}</span>
+			<span>{{ bytes(image.size) }}</span>
+			<span v-if="image.properties?.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+		</footer>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XModal from './modal.vue';
+import { defineComponent } from 'vue';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+import MkModal from '@/components/ui/modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XModal,
+		MkModal,
 	},
 
 	props: {
@@ -20,32 +30,50 @@ export default Vue.extend({
 		},
 	},
 
-	mounted() {
-		this.$nextTick(() => {
-			this.$refs.img.focus();
-		});
-	},
+	emits: ['closed'],
 
 	methods: {
-		close() {
-			this.$refs.modal.close();
-		},
+		bytes,
+		number,
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .xubzgfga {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	max-width: 100%;
-	max-height: 100%;
-	margin: auto;
-	cursor: zoom-out;
-	image-orientation: from-image;
+	max-width: 1024px;
+
+	> header,
+	> footer {
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		max-width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
 }
 </style>
diff --git a/src/client/components/img-with-blurhash.vue b/src/client/components/img-with-blurhash.vue
index 6e6a2a8965..7606708e9b 100644
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="xubzgfgb" :title="title">
+<div class="xubzgfgb" :class="{ cover }" :title="title">
 	<canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
 	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { decode } from 'blurhash';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: String,
@@ -35,6 +35,11 @@ export default Vue.extend({
 			required: false,
 			default: 64
 		},
+		cover: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
 	},
 
 	data() {
@@ -49,6 +54,7 @@ export default Vue.extend({
 
 	methods: {
 		draw() {
+			if (this.hash == null) return;
 			const pixels = decode(this.hash, this.size, this.size);
 			const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
 			const imageData = ctx!.createImageData(this.size, this.size);
@@ -70,9 +76,23 @@ export default Vue.extend({
 
 	> canvas,
 	> img {
+		display: block;
 		width: 100%;
 		height: 100%;
+	}
+
+	> canvas {
 		object-fit: cover;
 	}
+
+	> img {
+		object-fit: contain;
+	}
+
+	&.cover {
+		> img {
+			object-fit: cover;
+		}
+	}
 }
 </style>
diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index 87547599a9..6cc06e37c3 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { App } from 'vue';
 
 import mfm from './misskey-flavored-markdown.vue';
 import acct from './acct.vue';
@@ -12,14 +12,16 @@ import loading from './loading.vue';
 import error from './error.vue';
 import streamIndicator from './stream-indicator.vue';
 
-Vue.component('mfm', mfm);
-Vue.component('mk-acct', acct);
-Vue.component('mk-avatar', avatar);
-Vue.component('mk-emoji', emoji);
-Vue.component('mk-user-name', userName);
-Vue.component('mk-ellipsis', ellipsis);
-Vue.component('mk-time', time);
-Vue.component('mk-url', url);
-Vue.component('mk-loading', loading);
-Vue.component('mk-error', error);
-Vue.component('stream-indicator', streamIndicator);
+export default function(app: App) {
+	app.component('Mfm', mfm);
+	app.component('MkAcct', acct);
+	app.component('MkAvatar', avatar);
+	app.component('MkEmoji', emoji);
+	app.component('MkUserName', userName);
+	app.component('MkEllipsis', ellipsis);
+	app.component('MkTime', time);
+	app.component('MkUrl', url);
+	app.component('MkLoading', loading);
+	app.component('MkError', error);
+	app.component('StreamIndicator', streamIndicator);
+}
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 1f3d45d4d9..dcb3c75fa0 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -1,93 +1,93 @@
 <template>
-<div class="zbcjwnqg" v-size="{ max: [550, 1200] }">
+<div class="zbcjwnqg" v-size="{ max: [550, 1000] }">
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<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>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<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>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<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>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<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>
 	</div>
 
 	<section class="_card">
-		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
+		<div class="_title" style="position: relative;"><Fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><Fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
-				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
+				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="$t('federation')">
 						<option value="federation-instances">{{ $t('_charts.federationInstancesIncDec') }}</option>
 						<option value="federation-instances-total">{{ $t('_charts.federationInstancesTotal') }}</option>
@@ -109,11 +109,11 @@
 						<option value="drive">{{ $t('_charts.storageUsageIncDec') }}</option>
 						<option value="drive-total">{{ $t('_charts.storageUsageTotal') }}</option>
 					</optgroup>
-				</mk-select>
-				<mk-select v-model="chartSpan" style="margin: 0;">
+				</MkSelect>
+				<MkSelect v-model:value="chartSpan" style="margin: 0;">
 					<option value="hour">{{ $t('perHour') }}</option>
 					<option value="day">{{ $t('perDay') }}</option>
-				</mk-select>
+				</MkSelect>
 			</div>
 			<canvas ref="chart"></canvas>
 		</div>
@@ -122,10 +122,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
+import number from '@/filters/number';
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
@@ -136,8 +137,9 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect
 	},
@@ -216,7 +218,7 @@ export default Vue.extend({
 	},
 
 	async created() {
-		this.info = await this.$root.api('stats');
+		this.info = await os.api('stats');
 
 		this.now = new Date();
 
@@ -226,17 +228,17 @@ export default Vue.extend({
 	methods: {
 		async fetchChart() {
 			const [perHour, perDay] = await Promise.all([Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
 			]), Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
 			])]);
 
 			const chart = {
@@ -279,7 +281,7 @@ export default Vue.extend({
 			const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-			this.chartInstance = new Chart(this.$refs.chart, {
+			this.chartInstance = markRaw(new Chart(this.$refs.chart, {
 				type: 'line',
 				data: {
 					labels: new Array(this.chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -344,7 +346,7 @@ export default Vue.extend({
 						mode: 'index',
 					}
 				}
-			});
+			}));
 		},
 
 		getDate(ago: number) {
@@ -622,13 +624,15 @@ export default Vue.extend({
 				}]
 			};
 		},
+
+		number
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .zbcjwnqg {
-	&.max-width_1200px {
+	&.max-width_1000px {
 		> .stats {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr 1fr;
diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index 7a364d0986..e0a7f43477 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -5,18 +5,18 @@
 	:title="url"
 >
 	<slot></slot>
-	<fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
 </component>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { url as local } from '../config';
-import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { url as local } from '@/config';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
@@ -36,29 +36,34 @@ export default Vue.extend({
 			target: self ? null : '_blank',
 			showTimer: null,
 			hideTimer: null,
-			preview: null,
+			checkTimer: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;
 
-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const { dispose } = os.popup(await import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});
 
-			document.body.appendChild(this.preview.$el);
+			this.close = () => {
+				dispose();
+			};
+
+			this.checkTimer = setInterval(() => {
+				if (!document.body.contains(this.$el)) this.closePreview();
+			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
-				this.preview.destroyDom();
-				this.preview = null;
+			if (this.close) {
+				clearInterval(this.checkTimer);
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {
diff --git a/src/client/components/loading.vue b/src/client/components/loading.vue
index b819c692e8..b4693258b9 100644
--- a/src/client/components/loading.vue
+++ b/src/client/components/loading.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		inline: {
 			type: Boolean,
diff --git a/src/client/components/media-banner.vue b/src/client/components/media-banner.vue
index 0f746d4340..dd95b66de2 100644
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="icon"><fa :icon="faExclamationTriangle"/></span>
+		<span class="icon"><Fa :icon="faExclamationTriangle"/></span>
 		<b>{{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
@@ -19,17 +19,18 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><fa icon="download"/></span>
+		<span class="icon"><Fa icon="download"/></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		media: {
 			type: Object,
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 7c4ac324cb..64e3efab31 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -1,34 +1,36 @@
 <template>
 <div class="qjewsnkg" v-if="hide" @click="hide = false">
-	<img-with-blurhash class="bg" :hash="image.blurhash" :title="image.name"/>
+	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.name"/>
 	<div class="text">
 		<div>
-			<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+			<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 			<span>{{ $t('clickToShow') }}</span>
 		</div>
 	</div>
 </div>
-<div class="gqnyydlz" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+<div class="gqnyydlz" :style="{ background: color }" v-else>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="image.url"
 		:title="image.name"
 		@click.prevent="onClick"
 	>
-		<img-with-blurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name"/>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name" :cover="false"/>
 		<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
@@ -44,8 +46,8 @@ export default Vue.extend({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle,
-			faEyeSlash
+			color: null,
+			faExclamationTriangle, faEyeSlash,
 		};
 	},
 	computed: {
@@ -67,6 +69,9 @@ export default Vue.extend({
 		// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 		this.$watch('image', () => {
 			this.hide = this.image.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+			if (this.image.blurhash) {
+				this.color = extractAvgColorFromBlurhash(this.image.blurhash);
+			}
 		}, {
 			deep: true,
 			immediate: true,
@@ -77,12 +82,9 @@ export default Vue.extend({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = this.$root.new(ImageViewer, {
+				os.popup(ImageViewer, {
 					image: this.image
-				});
-				this.$once('hook:beforeDestroy', () => {
-					viewer.close();
-				});
+				}, {}, 'closed');
 			}
 		}
 	}
@@ -123,6 +125,7 @@ export default Vue.extend({
 
 .gqnyydlz {
 	position: relative;
+	border: solid 1px var(--divider);
 
 	> i {
 		display: block;
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index fd0035f10c..ce266acd20 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -1,13 +1,11 @@
 <template>
 <div class="mk-media-list">
-	<template v-for="media in mediaList.filter(media => !previewable(media))">
-		<x-banner :media="media" :key="media.id"/>
-	</template>
+	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
 		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle">
 			<template v-for="media in mediaList">
-				<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
-				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+				<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<XImage :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
 			</template>
 		</div>
 	</div>
@@ -15,12 +13,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBanner,
 		XImage,
@@ -46,7 +45,7 @@ export default Vue.extend({
 		this.size();
 		window.addEventListener('resize', this.size);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('resize', this.size);
 	},
 	activated() {
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index a5e06bfaa9..21faddf73b 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
-		<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+		<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="video.url"
 		rel="nofollow noopener"
@@ -14,17 +14,18 @@
 		:style="imageStyle"
 		:title="video.name"
 	>
-		<fa :icon="faPlayCircle"/>
+		<Fa :icon="faPlayCircle"/>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		video: {
 			type: Object,
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index dd68aab146..50b43df07b 100644
--- a/src/client/components/mention.vue
+++ b/src/client/components/mention.vue
@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host as localHost } from '../config';
+import { host as localHost } from '@/config';
 import { wellKnownServices } from '../../well-known-services';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		username: {
 			type: String,
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
deleted file mode 100644
index 74e9a29ccf..0000000000
--- a/src/client/components/menu.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
-		<template v-for="(item, i) in items.filter(item => item !== undefined)">
-			<div v-if="item === null" class="divider" :key="i"></div>
-			<span v-else-if="item.type === 'label'" class="label item" :key="i">
-				<span>{{ item.text }}</span>
-			</span>
-			<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</router-link>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</a>
-			<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-			<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-		</template>
-	</div>
-</x-popup>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
-import XPopup from './popup.vue';
-import { focusPrev, focusNext } from '../scripts/focus';
-
-export default Vue.extend({
-	components: {
-		XPopup
-	},
-	props: {
-		source: {
-			required: true
-		},
-		items: {
-			type: Array,
-			required: true
-		},
-		align: {
-			type: String,
-			required: false
-		},
-		noCenter: {
-			type: Boolean,
-			required: false
-		},
-		fixed: {
-			type: Boolean,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		},
-		direction: {
-			type: String,
-			required: false
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-	},
-	data() {
-		return {
-			faCircle
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'up|k|shift+tab': this.focusUp,
-				'down|j|tab': this.focusDown,
-			};
-		},
-	},
-	mounted() {
-		if (this.viaKeyboard) {
-			this.$nextTick(() => {
-				focusNext(this.$refs.items.children[0], true);
-			});
-		}
-	},
-	methods: {
-		clicked(fn) {
-			fn();
-			this.close();
-		},
-		close() {
-			this.$refs.popup.close();
-		},
-		focusUp() {
-			focusPrev(document.activeElement);
-		},
-		focusDown() {
-			focusNext(document.activeElement);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rrevdjwt {
-	padding: 8px 0;
-
-	&.left {
-		> .item {
-			text-align: left;
-		}
-	}
-
-	> .item {
-		display: block;
-		position: relative;
-		padding: 8px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:hover {
-			color: #fff;
-			background: var(--accent);
-			text-decoration: none;
-		}
-
-		&:active {
-			color: #fff;
-			background: var(--accentDarken);
-		}
-
-		&:not(:active):focus {
-			box-shadow: 0 0 0 2px var(--focus) inset;
-		}
-
-		&.label {
-			pointer-events: none;
-			font-size: 0.7em;
-			padding-bottom: 4px;
-
-			> span {
-				opacity: 0.7;
-			}
-		}
-
-		> [data-icon] {
-			margin-right: 4px;
-			width: 20px;
-		}
-
-		> .avatar {
-			margin-right: 4px;
-			width: 20px;
-			height: 20px;
-		}
-
-		> i {
-			position: absolute;
-			top: 5px;
-			left: 13px;
-			color: var(--indicator);
-			font-size: 12px;
-			animation: blink 1s infinite;
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		height: 1px;
-		background: var(--divider);
-	}
-}
-</style>
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index 1dc8780389..791fd1b4e5 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -1,16 +1,18 @@
-import Vue, { VNode } from 'vue';
+import { VNode, defineComponent, h } from 'vue';
 import { MfmForest } from '../../mfm/prelude';
 import { parse, parsePlain } from '../../mfm/parse';
 import MkUrl from './url.vue';
 import MkLink from './link.vue';
 import MkMention from './mention.vue';
+import MkEmoji from './emoji.vue';
 import { concat } from '../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../config';
+import { host } from '@/config';
+import { RouterLink } from 'vue-router';
 
-export default Vue.component('misskey-flavored-markdown', {
+export default defineComponent({
 	props: {
 		text: {
 			type: String,
@@ -41,7 +43,7 @@ export default Vue.component('misskey-flavored-markdown', {
 		},
 	},
 
-	render(createElement) {
+	render() {
 		if (this.text == null || this.text == '') return;
 
 		const ast = (this.plain ? parsePlain : parse)(this.text);
@@ -53,67 +55,49 @@ export default Vue.component('misskey-flavored-markdown', {
 
 					if (!this.plain) {
 						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [this._v(t), createElement('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
+							.map(t => t == '' ? [h('br')] : [t, h('br')]);
 						x[x.length - 1].pop();
 						return x;
 					} else {
-						return [this._v(text.replace(/\n/g, ' '))];
+						return [text.replace(/\n/g, ' ')];
 					}
 				}
 
 				case 'bold': {
-					return [createElement('b', genEl(token.children))];
+					return [h('b', genEl(token.children))];
 				}
 
 				case 'strike': {
-					return [createElement('del', genEl(token.children))];
+					return [h('del', genEl(token.children))];
 				}
 
 				case 'italic': {
-					return (createElement as any)('i', {
-						attrs: {
-							style: 'font-style: oblique;'
-						},
+					return h('i', {
+						style: 'font-style: oblique;'
 					}, genEl(token.children));
 				}
 
 				case 'big': {
-					return (createElement as any)('strong', {
-						attrs: {
-							style: `display: inline-block; font-size: 150%;`
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'tada', iteration: 'infinite' }
-						}: {}]
+					return h('strong', {
+						style: `display: inline-block; font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: anime-tada 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}
 
 				case 'small': {
-					return [createElement('small', {
-						attrs: {
-							style: 'opacity: 0.7;'
-						},
+					return [h('small', {
+						style: 'opacity: 0.7;'
 					}, genEl(token.children))];
 				}
 
 				case 'center': {
-					return [createElement('div', {
-						attrs: {
-							style: 'text-align:center;'
-						}
+					return [h('div', {
+						style: 'text-align:center;'
 					}, genEl(token.children))];
 				}
 
 				case 'motion': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;'
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'rubberBand', iteration: 'infinite' }
-						} : {}]
+					return h('span', {
+						style: 'display: inline-block;' + (this.$store.state.device.animatedMfm ? 'animation: anime-rubberBand 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}
 
@@ -123,163 +107,126 @@ export default Vue.component('misskey-flavored-markdown', {
 						token.node.props.attr == 'alternate' ? 'alternate' :
 						'normal';
 					const style = this.$store.state.device.animatedMfm
-						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;' + style
-						},
+						? `animation: anime-spin 1.5s linear infinite; animation-direction: ${direction};` : '';
+					return h('span', {
+						style: 'display: inline-block;' + style
 					}, genEl(token.children));
 				}
 
 				case 'jump': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
-						},
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-jump 0.75s linear infinite;' : 'display: inline-block;'
 					}, genEl(token.children));
 				}
 
 				case 'flip': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block; transform: scaleX(-1);'
-						},
+					return h('span', {
+						style: 'display: inline-block; transform: scaleX(-1);'
 					}, genEl(token.children));
 				}
 
 				case 'url': {
-					return [createElement(MkUrl, {
+					return [h(MkUrl, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					})];
 				}
 
 				case 'link': {
-					return [createElement(MkLink, {
+					return [h(MkLink, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					}, genEl(token.children))];
 				}
 
 				case 'mention': {
-					return [createElement(MkMention, {
+					return [h(MkMention, {
 						key: Math.random(),
-						props: {
-							host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
-							username: token.node.props.username
-						}
+						host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
+						username: token.node.props.username
 					})];
 				}
 
 				case 'hashtag': {
-					return [createElement('router-link', {
+					return [h(RouterLink, {
 						key: Math.random(),
-						attrs: {
-							to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
-							style: 'color:var(--hashtag);'
-						}
+						to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
+						style: 'color:var(--hashtag);'
 					}, `#${token.node.props.hashtag}`)];
 				}
 
 				case 'blockCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
 					})];
 				}
 
 				case 'inlineCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-							inline: true
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
+						inline: true
 					})];
 				}
 
 				case 'quote': {
-					if (this.shouldBreak) {
-						return [createElement('div', {
-							attrs: {
-								class: 'quote'
-							}
+					if (!this.nowrap) {
+						return [h('div', {
+							class: 'quote'
 						}, genEl(token.children))];
 					} else {
-						return [createElement('span', {
-							attrs: {
-								class: 'quote'
-							}
+						return [h('span', {
+							class: 'quote'
 						}, genEl(token.children))];
 					}
 				}
 
 				case 'title': {
-					return [createElement('div', {
-						attrs: {
-							class: 'title'
-						}
+					return [h('div', {
+						class: 'title'
 					}, genEl(token.children))];
 				}
 
 				case 'emoji': {
-					return [createElement('mk-emoji', {
+					return [h(MkEmoji, {
 						key: Math.random(),
-						attrs: {
-							emoji: token.node.props.emoji,
-							name: token.node.props.name
-						},
-						props: {
-							customEmojis: this.customEmojis,
-							normal: this.plain
-						}
+						emoji: token.node.props.emoji,
+						name: token.node.props.name,
+						customEmojis: this.customEmojis,
+						normal: this.plain
 					})];
 				}
 
 				case 'mathInline': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: false
-						}
+						formula: token.node.props.formula,
+						block: false
 					})];
 				}
 
 				case 'mathBlock': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: true
-						}
+						formula: token.node.props.formula,
+						block: true
 					})];
 				}
 
 				case 'search': {
-					//const MkGoogle = () => import('./google.vue').then(m => m.default);
-					return [createElement(MkGoogle, {
+					return [h(MkGoogle, {
 						key: Math.random(),
-						props: {
-							q: token.node.props.query
-						}
+						q: token.node.props.query
 					})];
 				}
 
 				default: {
-					console.log('unrecognized ast type:', token.node.type);
+					console.error('unrecognized ast type:', token.node.type);
 
 					return [];
 				}
@@ -287,6 +234,6 @@ export default Vue.component('misskey-flavored-markdown', {
 		}));
 
 		// Parse ast to DOM
-		return createElement('span', genEl(ast));
+		return h('span', genEl(ast));
 	}
 });
diff --git a/src/client/components/mini-chart.vue b/src/client/components/mini-chart.vue
index 5c4f74b6b4..2eb9ae8cbe 100644
--- a/src/client/components/mini-chart.vue
+++ b/src/client/components/mini-chart.vue
@@ -30,10 +30,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: Array,
@@ -64,7 +65,7 @@ export default Vue.extend({
 		// Vueが何故かWatchを発動させない場合があるので
 		this.clock = setInterval(this.draw, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
diff --git a/src/client/components/misskey-flavored-markdown.vue b/src/client/components/misskey-flavored-markdown.vue
index 7425f1f7be..030507ead2 100644
--- a/src/client/components/misskey-flavored-markdown.vue
+++ b/src/client/components/misskey-flavored-markdown.vue
@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MfmCore from './mfm';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MfmCore
 	}
@@ -24,7 +24,7 @@ export default Vue.extend({
 		text-overflow: ellipsis;
 	}
 
-	::v-deep .quote {
+	::v-deep(.quote) {
 		display: block;
 		margin: 8px;
 		padding: 6px 0 6px 12px;
@@ -33,15 +33,15 @@ export default Vue.extend({
 		opacity: 0.7;
 	}
 
-	::v-deep pre {
+	::v-deep(pre) {
 		font-size: 0.8em;
 	}
 
-	::v-deep > code {
+	> ::v-deep(code) {
 		word-break: break-all;
 	}
 
-	::v-deep .title {
+	::v-deep(.title) {
 		text-align: center;
 		border-bottom: solid 1px var(--divider);
 	}
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
deleted file mode 100644
index 6ae46d451e..0000000000
--- a/src/client/components/modal.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<div class="mk-modal" v-hotkey.global="keymap">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-		<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		canClose: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			show: true,
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': this.close,
-			};
-		},
-	},
-	methods: {
-		close() {
-			this.show = false;
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.content as any).style.pointerEvents = 'none';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-enter-active, .modal-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.modal-enter, .modal-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
-.mk-modal {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .content {
-		position: fixed;
-		z-index: 10000;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		max-width: calc(100% - 16px);
-		max-height: calc(100% - 16px);
-		overflow: auto;
-		margin: auto;
-
-		::v-deep > * {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			max-height: 100%;
-			max-width: 100%;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 039287818f..3be0ba38fe 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -1,33 +1,36 @@
 <template>
 <header class="kkwtjztg">
-	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
-		<mk-user-name :user="note.user"/>
+	<router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+		<MkUserName :user="note.user"/>
 	</router-link>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
-	<span class="username"><mk-acct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><fa :icon="faBookmark"/></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><fa :icon="farBookmark"/></span>
+	<span class="username"><MkAcct :user="note.user"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><fa :icon="faMobileAlt"/></span>
-		<router-link class="created-at" :to="note | notePage">
-			<mk-time :time="note.createdAt"/>
+		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<router-link class="created-at" :to="notePage(note)">
+			<MkTime :time="note.createdAt"/>
 		</router-link>
 		<span class="visibility" v-if="note.visibility !== 'public'">
-			<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-			<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-			<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+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';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
@@ -39,6 +42,11 @@ export default Vue.extend({
 		return {
 			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
+	},
+
+	methods: {
+		notePage,
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
index 14314889a3..4ea97d17ee 100644
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="yohlumlk">
-	<mk-avatar class="avatar" :user="note.user"/>
+	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<x-note-header class="header" :note="note" :mini="true"/>
+		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<x-cw-button v-model="showContent" :note="note"/>
+				<XCwButton v-model:value="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
-				<x-sub-note-content class="text" :note="note"/>
+				<XSubNote-content class="text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -17,12 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNoteHeader,
 		XSubNoteContent,
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index 329fb62d53..2ce045a34e 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,32 +1,33 @@
 <template>
 <div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
 	<div class="main">
-		<mk-avatar class="avatar" :user="note.user"/>
+		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<x-note-header class="header" :note="note" :mini="true"/>
+			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-					<x-cw-button v-model="showContent" :note="note"/>
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
+					<XCwButton v-model:value="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">
-					<x-sub-note-content class="text" :note="note"/>
+					<XSubNote-content class="text" :note="note"/>
 				</div>
 			</div>
 		</div>
 	</div>
-	<x-sub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
+	<XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
-	name: 'x-sub',
+export default defineComponent({
+	name: 'XSub',
 
 	components: {
 		XNoteHeader,
@@ -65,7 +66,7 @@ export default Vue.extend({
 
 	created() {
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.note.id,
 				limit: 5
 			}).then(replies => {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 31acd49003..b2cc5cce2c 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -8,95 +8,99 @@
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
 >
-	<x-sub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
-	<x-sub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
-	<div class="info" v-if="appearNote._prId_"><fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <fa :icon="faTimes"/></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><fa :icon="faBolt"/> {{ $t('featured') }}</div>
+	<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
+	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
+	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
+	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <Fa :icon="faTimes"/></button></div>
+	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $t('featured') }}</div>
 	<div class="renote" v-if="isRenote">
-		<mk-avatar class="avatar" :user="note.user"/>
-		<fa :icon="faRetweet"/>
-		<i18n path="renotedBy" tag="span">
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">
-				<mk-user-name :user="note.user"/>
-			</router-link>
-		</i18n>
+		<MkAvatar class="avatar" :user="note.user"/>
+		<Fa :icon="faRetweet"/>
+		<i18n-t keypath="renotedBy" tag="span">
+			<template #user>
+				<router-link class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+					<MkUserName :user="note.user"/>
+				</router-link>
+			</template>
+		</i18n-t>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
-				<mk-time :time="note.createdAt"/>
+				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
-	<article class="article">
-		<mk-avatar class="avatar" :user="appearNote.user"/>
+	<article class="article" @contextmenu="onContextmenu">
+		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<x-note-header class="header" :note="appearNote" :mini="true"/>
+			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
-					<x-cw-button v-model="showContent" :note="appearNote"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+					<XCwButton v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
-						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><fa :icon="faReply"/></router-link>
-						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></router-link>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
-						<x-media-list :media-list="appearNote.files" :parent-element="noteBody"/>
+						<XMediaList :media-list="appearNote.files" :parent-element="noteBody"/>
 					</div>
-					<x-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
-					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
+					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
+					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
+					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 				</div>
-				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
+				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
 			</div>
 			<footer class="footer">
-				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
+				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><fa :icon="faReplyAll"/></template>
-					<template v-else><fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
+					<template v-else><Fa :icon="faReply"/></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
-					<fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<fa :icon="faBan"/>
+					<Fa :icon="faBan"/>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<fa :icon="faPlus"/>
+					<Fa :icon="faPlus"/>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<fa :icon="faMinus"/>
+					<Fa :icon="faMinus"/>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<fa :icon="faEllipsisH"/>
+					<Fa :icon="faEllipsisH"/>
 				</button>
 			</footer>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
+	<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 <div v-else class="_panel muted" @click="muted = false">
-	<i18n path="userSaysSomething" tag="small">
-		<router-link class="name" :to="appearNote.user | userPage" v-user-preview="appearNote.userId" place="name">
-			<mk-user-name :user="appearNote.user"/>
-		</router-link>
-	</i18n>
+	<i18n-t keypath="userSaysSomething" tag="small">
+		<template #name>
+			<router-link class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+				<MkUserName :user="appearNote.user"/>
+			</router-link>
+		</template>
+	</i18n-t>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { computed, defineAsyncComponent, defineComponent, markRaw, ref } from 'vue';
 import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
@@ -108,21 +112,24 @@ import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
-import MkUrlPreview from './url-preview.vue';
-import MkReactionPicker from './reaction-picker.vue';
-import pleaseLogin from '../scripts/please-login';
-import { focusPrev, focusNext } from '../scripts/focus';
-import { url } from '../config';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { checkWordMute } from '../scripts/check-word-mute';
-import { utils } from '@syuilo/aiscript';
-
-export default Vue.extend({
-	model: {
-		prop: 'note',
-		event: 'updated'
-	},
+import { pleaseLogin } from '@/scripts/please-login';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import { url } from '@/config';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { checkWordMute } from '@/scripts/check-word-mute';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { noteActions, noteViewInterruptors } from '@/store';
+
+function markRawAll(...xs) {
+	for (const x of xs) {
+		markRaw(x);
+	}
+}
+
+markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
 
+export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
@@ -131,7 +138,7 @@ export default Vue.extend({
 		XMediaList,
 		XCwButton,
 		XPoll,
-		MkUrlPreview,
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
 	},
 
 	inject: {
@@ -157,6 +164,8 @@ export default Vue.extend({
 		},
 	},
 
+	emits: ['update:note'],
+
 	data() {
 		return {
 			connection: null,
@@ -171,6 +180,9 @@ export default Vue.extend({
 	},
 
 	computed: {
+		rs() {
+			return this.$store.state.settings.reactions;
+		},
 		keymap(): any {
 			return {
 				'r': () => this.reply(true),
@@ -184,16 +196,16 @@ export default Vue.extend({
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
-				'1': () => this.reactDirectly(this.$store.state.settings.reactions[0]),
-				'2': () => this.reactDirectly(this.$store.state.settings.reactions[1]),
-				'3': () => this.reactDirectly(this.$store.state.settings.reactions[2]),
-				'4': () => this.reactDirectly(this.$store.state.settings.reactions[3]),
-				'5': () => this.reactDirectly(this.$store.state.settings.reactions[4]),
-				'6': () => this.reactDirectly(this.$store.state.settings.reactions[5]),
-				'7': () => this.reactDirectly(this.$store.state.settings.reactions[6]),
-				'8': () => this.reactDirectly(this.$store.state.settings.reactions[7]),
-				'9': () => this.reactDirectly(this.$store.state.settings.reactions[8]),
-				'0': () => this.reactDirectly(this.$store.state.settings.reactions[9]),
+				'1': () => this.reactDirectly(this.rs[0]),
+				'2': () => this.reactDirectly(this.rs[1]),
+				'3': () => this.reactDirectly(this.rs[2]),
+				'4': () => this.reactDirectly(this.rs[3]),
+				'5': () => this.reactDirectly(this.rs[4]),
+				'6': () => this.reactDirectly(this.rs[5]),
+				'7': () => this.reactDirectly(this.rs[6]),
+				'8': () => this.reactDirectly(this.rs[7]),
+				'9': () => this.reactDirectly(this.rs[8]),
+				'0': () => this.reactDirectly(this.rs[9]),
 			};
 		},
 
@@ -251,22 +263,22 @@ export default Vue.extend({
 
 	async created() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = this.$root.stream;
+			this.connection = os.stream;
 		}
 
 		// plugin
-		if (this.$store.state.noteViewInterruptors.length > 0) {
+		if (noteViewInterruptors.length > 0) {
 			let result = this.note;
-			for (const interruptor of this.$store.state.noteViewInterruptors) {
-				result = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(result))));
+			for (const interruptor of noteViewInterruptors) {
+				result = await interruptor.handler(JSON.parse(JSON.stringify(result)));
 			}
-			this.$emit('updated', Object.freeze(result));
+			this.$emit('update:note', Object.freeze(result));
 		}
 
 		this.muted = await checkWordMute(this.appearNote, this.$store.state.i, this.$store.state.settings.mutedWords);
 
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.appearNote.id,
 				limit: 30
 			}).then(replies => {
@@ -274,7 +286,7 @@ export default Vue.extend({
 			});
 
 			if (this.appearNote.replyId) {
-				this.$root.api('notes/conversation', {
+				os.api('notes/conversation', {
 					noteId: this.appearNote.replyId
 				}).then(conversation => {
 					this.conversation = conversation.reverse();
@@ -293,7 +305,7 @@ export default Vue.extend({
 		this.noteBody = this.$refs.noteBody;
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.decapture(true);
 
 		if (this.$store.getters.isSignedIn) {
@@ -303,7 +315,7 @@ export default Vue.extend({
 
 	methods: {
 		updateAppearNote(v) {
-			this.$emit('updated', Object.freeze(this.isRenote ? {
+			this.$emit('update:note', Object.freeze(this.isRenote ? {
 				...this.note,
 				renote: {
 					...this.note.renote,
@@ -316,7 +328,7 @@ export default Vue.extend({
 		},
 
 		readPromo() {
-			(this as any).$root.api('promo/read', {
+			os.api('promo/read', {
 				noteId: this.appearNote.id
 			});
 			this.isDeleted = true;
@@ -439,8 +451,8 @@ export default Vue.extend({
 		},
 
 		reply(viaKeyboard = false) {
-			pleaseLogin(this.$root);
-			this.$root.post({
+			pleaseLogin();
+			os.post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
 			}, () => {
@@ -449,57 +461,56 @@ export default Vue.extend({
 		},
 
 		renote(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			this.$root.menu({
-				items: [{
-					text: this.$t('renote'),
-					icon: faRetweet,
-					action: () => {
-						(this as any).$root.api('notes/create', {
-							renoteId: this.appearNote.id
-						});
-					}
-				}, {
-					text: this.$t('quote'),
-					icon: faQuoteRight,
-					action: () => {
-						this.$root.post({
-							renote: this.appearNote,
-						});
-					}
-				}]
-				source: this.$refs.renoteButton,
+			os.modalMenu([{
+				text: this.$t('renote'),
+				icon: faRetweet,
+				action: () => {
+					os.api('notes/create', {
+						renoteId: this.appearNote.id
+					});
+				}
+			}, {
+				text: this.$t('quote'),
+				icon: faQuoteRight,
+				action: () => {
+					os.post({
+						renote: this.appearNote,
+					});
+				}
+			}], this.$refs.renoteButton, {
 				viaKeyboard
 			});
 		},
 
 		renoteDirectly() {
-			(this as any).$root.api('notes/create', {
+			os.api('notes/create', {
 				renoteId: this.appearNote.id
 			});
 		},
 
 		react(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			const picker = this.$root.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
+			os.popup(defineAsyncComponent(() => import('@/components/reaction-picker.vue')), {
 				showFocus: viaKeyboard,
-			});
-			picker.$once('chosen', reaction => {
-				this.$root.api('notes/reactions/create', {
-					noteId: this.appearNote.id,
-					reaction: reaction
-				}).then(() => {
-					picker.close();
-				});
-			});
-			picker.$once('closed', this.focus);
+				src: this.$refs.reactButton,
+			}, {
+				done: reaction => {
+					if (reaction) {
+						os.api('notes/reactions/create', {
+							noteId: this.appearNote.id,
+							reaction: reaction
+						});
+					}
+					this.focus();
+				},
+			}, 'closed');
 		},
 
 		reactDirectly(reaction) {
-			this.$root.api('notes/reactions/create', {
+			os.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
@@ -508,81 +519,67 @@ export default Vue.extend({
 		undoReact(note) {
 			const oldReaction = note.myReaction;
 			if (!oldReaction) return;
-			this.$root.api('notes/reactions/delete', {
+			os.api('notes/reactions/delete', {
 				noteId: note.id
 			});
 		},
 
 		favorite() {
-			pleaseLogin(this.$root);
-			this.$root.api('notes/favorites/create', {
+			pleaseLogin();
+			os.apiWithDialog('notes/favorites/create', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
 		del() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('noteDeleteConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 			});
 		},
 
 		delEdit() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('deleteAndEditConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 
-				this.$root.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply, channel: this.appearNote.channel });
+				os.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply, channel: this.appearNote.channel });
 			});
 		},
 
 		toggleFavorite(favorite: boolean) {
-			this.$root.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
 		toggleWatch(watch: boolean) {
-			this.$root.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
+			os.apiWithDialog(watch ? 'notes/watching/create' : 'notes/watching/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
-		async menu(viaKeyboard = false) {
+		getMenu() {
 			let menu;
 			if (this.$store.getters.isSignedIn) {
-				const state = await this.$root.api('notes/state', {
+				const statePromise = os.api('notes/state', {
 					noteId: this.appearNote.id
 				});
+
 				menu = [{
 					type: 'link',
 					icon: faInfoCircle,
@@ -604,7 +601,7 @@ export default Vue.extend({
 					}
 				} : undefined,
 				null,
-				state.isFavorited ? {
+				statePromise.then(state => state.isFavorited ? {
 					icon: faStar,
 					text: this.$t('unfavorite'),
 					action: () => this.toggleFavorite(false)
@@ -612,8 +609,8 @@ export default Vue.extend({
 					icon: faStar,
 					text: this.$t('favorite'),
 					action: () => this.toggleFavorite(true)
-				},
-				this.appearNote.userId != this.$store.state.i.id ? state.isWatching ? {
+				}),
+				(this.appearNote.userId != this.$store.state.i.id) ? statePromise.then(state => state.isWatching ? {
 					icon: faEyeSlash,
 					text: this.$t('unwatch'),
 					action: () => this.toggleWatch(false)
@@ -621,7 +618,7 @@ export default Vue.extend({
 					icon: faEye,
 					text: this.$t('watch'),
 					action: () => this.toggleWatch(true)
-				} : undefined,
+				}) : undefined,
 				this.appearNote.userId == this.$store.state.i.id ? (this.$store.state.i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
 					icon: faThumbtack,
 					text: this.$t('unpin'),
@@ -650,6 +647,7 @@ export default Vue.extend({
 					{
 						icon: faTrashAlt,
 						text: this.$t('delete'),
+						danger: true,
 						action: this.del
 					}]
 					: []
@@ -674,8 +672,8 @@ export default Vue.extend({
 				.filter(x => x !== undefined);
 			}
 
-			if (this.$store.state.noteActions.length > 0) {
-				menu = menu.concat([null, ...this.$store.state.noteActions.map(action => ({
+			if (noteActions.length > 0) {
+				menu = menu.concat([null, ...noteActions.map(action => ({
 					icon: faPlug,
 					text: action.title,
 					action: () => {
@@ -684,27 +682,39 @@ export default Vue.extend({
 				}))]);
 			}
 
-			this.$root.menu({
-				items: menu,
-				source: this.$refs.menuButton,
+			return menu;
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (window.getSelection().toString() !== '') return;
+			os.contextMenu(this.getMenu(), e).then(this.focus);
+		},
+
+		menu(viaKeyboard = false) {
+			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(this.focus);
 		},
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			this.$root.menu({
-				items: [{
-					text: this.$t('unrenote'),
-					icon: faTrashAlt,
-					action: () => {
-						this.$root.api('notes/delete', {
-							noteId: this.note.id
-						});
-						this.isDeleted = true;
-					}
-				}],
-				source: this.$refs.renoteTime,
+			os.modalMenu([{
+				text: this.$t('unrenote'),
+				icon: faTrashAlt,
+				action: () => {
+					os.api('notes/delete', {
+						noteId: this.note.id
+					});
+					this.isDeleted = true;
+				}
+			}], this.$refs.renoteTime, {
 				viaKeyboard: viaKeyboard
 			});
 		},
@@ -715,31 +725,20 @@ export default Vue.extend({
 
 		copyContent() {
 			copyToClipboard(this.appearNote.text);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.appearNote.id}`);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		togglePin(pin: boolean) {
-			this.$root.api(pin ? 'i/pin' : 'i/unpin', {
+			os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
+			}, undefined, null, e => {
 				if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-					this.$root.dialog({
+					os.dialog({
 						type: 'error',
 						text: this.$t('pinLimitExceeded')
 					});
@@ -748,26 +747,16 @@ export default Vue.extend({
 		},
 
 		async promote() {
-			const { canceled, result: days } = await this.$root.dialog({
+			const { canceled, result: days } = await os.dialog({
 				title: this.$t('numberOfDays'),
 				input: { type: 'number' }
 			});
 
 			if (canceled) return;
 
-			this.$root.api('admin/promo/create', {
+			os.apiWithDialog('admin/promo/create', {
 				noteId: this.appearNote.id,
 				expiresAt: Date.now() + (86400000 * days)
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
 			});
 		},
 
@@ -785,7 +774,9 @@ export default Vue.extend({
 
 		focusAfter() {
 			focusNext(this.$el);
-		}
+		},
+
+		userPage
 	}
 });
 </script>
@@ -795,10 +786,28 @@ export default Vue.extend({
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
+	contain: content;
 
 	&:focus {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--focus);
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
 	}
 
 	&:hover > .article > .main > .footer > .button {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 2ae8f696f6..f2ea7e929b 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -1,42 +1,41 @@
 <template>
-<div class="mk-notes">
+<div class="_list_">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>
 
-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>
 
-	<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
-	</x-list>
+	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+		<XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
+	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent } from 'vue';
+import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
-import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XNote, XList, MkButton
+		XNote, XList,
 	},
 
 	mixins: [
@@ -68,6 +67,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['before', 'after'],
+
 	computed: {
 		notes(): any[] {
 			return this.prop ? this.items.map(item => item[this.prop]) : this.items;
@@ -82,9 +83,9 @@ export default Vue.extend({
 		updated(oldValue, newValue) {
 			const i = this.notes.findIndex(n => n === oldValue);
 			if (this.prop) {
-				Vue.set(this.items[i], this.prop, newValue);
+				this.items[i][this.prop] = newValue;
 			} else {
-				Vue.set(this.items, i, newValue);
+				this.items[i] = newValue;
 			}
 		},
 
@@ -94,4 +95,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue
index d63a3d48a5..e6d109e3a5 100644
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -1,34 +1,40 @@
 <template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()">
+<XModalWindow ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
 	<template #header>{{ $t('notificationSetting') }}</template>
-	<div class="vv94n3oa">
-		<div v-if="showGlobalToggle">
-			<mk-switch v-model="useGlobalSetting">
-				{{ $t('useGlobalSetting') }}
-				<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
-			</mk-switch>
-		</div>
-		<div v-if="!useGlobalSetting">
-			<mk-info>{{ $t('notificationSettingDesc') }}</mk-info>
-			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
-			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
-			<mk-switch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch>
-		</div>
+	<div v-if="showGlobalToggle" class="_section">
+		<MkSwitch v-model:value="useGlobalSetting">
+			{{ $t('useGlobalSetting') }}
+			<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
+		</MkSwitch>
 	</div>
-</x-window>
+	<div v-if="!useGlobalSetting" class="_section">
+		<MkInfo>{{ $t('notificationSettingDesc') }}</MkInfo>
+		<MkButton inline @click="disableAll">{{ $t('disableAll') }}</MkButton>
+		<MkButton inline @click="enableAll">{{ $t('enableAll') }}</MkButton>
+		<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
+	</div>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import XWindow from './window.vue';
+import { defineComponent, PropType } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkSwitch from './ui/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import { notificationTypes } from '../../types';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XWindow,
+		XModalWindow,
 		MkSwitch,
 		MkInfo,
 		MkButton
@@ -48,6 +54,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			typesMap: {} as Record<typeof notificationTypes[number], boolean>,
@@ -60,7 +68,7 @@ export default Vue.extend({
 		this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle;
 
 		for (const type of this.notificationTypes) {
-			Vue.set(this.typesMap, type, this.includingTypes === null || this.includingTypes.includes(type));
+			this.typesMap[type] = this.includingTypes === null || this.includingTypes.includes(type);
 		}
 	},
 
@@ -69,8 +77,8 @@ export default Vue.extend({
 			const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][])
 				.filter(type => this.typesMap[type]);
 
-			this.$emit('ok', { includingTypes });
-			this.$refs.window.close();
+			this.$emit('done', { includingTypes });
+			this.$refs.dialog.close();
 		},
 
 		disableAll() {
@@ -87,12 +95,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-.vv94n3oa {
-	> div {
-		border-top: solid 1px var(--divider);
-		padding: 24px;
-	}
-}
-</style>
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 71ac963a58..ab890bbf0f 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -1,71 +1,75 @@
 <template>
 <div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }">
 	<div class="head">
-		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
-		<img v-else class="icon" :src="notification.icon" alt=""/>
+		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
+		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<fa :icon="faPlus" v-if="notification.type === 'follow'"/>
-			<fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
-			<fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
-			<fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
-			<fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
-			<fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
-			<fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
-			<fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
-			<fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
-			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
+			<Fa :icon="faPlus" v-if="notification.type === 'follow'"/>
+			<Fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
+			<Fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
+			<Fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
+			<Fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
+			<Fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
+			<Fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
+			<Fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
+			<Fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
+			<XReactionIcon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</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"><MkUserName :user="notification.user"/></router-link>
 			<span v-else>{{ notification.header }}</span>
-			<mk-time :time="notification.createdAt" v-if="withTime"/>
+			<MkTime :time="notification.createdAt" v-if="withTime"/>
 		</header>
-		<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :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 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)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<fa :icon="faQuoteRight"/>
+		<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)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<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)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<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)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<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)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<fa :icon="faQuoteRight"/>
+		<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"/>
 		</router-link>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
+		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'app'" class="text">
-			<mfm :text="notification.body" :nowrap="!full"/>
+			<Mfm :text="notification.body" :nowrap="!full"/>
 		</span>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
 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';
+import { locale } from '../i18n';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon, MkFollowButton
 	},
@@ -87,7 +91,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			getNoteSummary: (text: string) => noteSummary(text, this.$root.i18n.messages[this.$root.i18n.locale]),
+			getNoteSummary: (text: string) => noteSummary(text, locale),
 			followRequestDone: false,
 			groupInviteDone: false,
 			connection: null,
@@ -100,7 +104,7 @@ export default Vue.extend({
 		if (!this.notification.isRead) {
 			this.readObserver = new IntersectionObserver((entries, observer) => {
 				if (!entries.some(entry => entry.isIntersecting)) return;
-				this.$root.stream.send('readNotification', {
+				os.stream.send('readNotification', {
 					id: this.notification.id
 				});
 				entries.map(({ target }) => observer.unobserve(target));
@@ -108,12 +112,12 @@ export default Vue.extend({
 
 			this.readObserver.observe(this.$el);
 
-			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection = os.stream.useSharedConnection('main');
 			this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (!this.notification.isRead) {
 			this.readObserver.unobserve(this.$el);
 			this.connection.dispose();
@@ -123,24 +127,22 @@ export default Vue.extend({
 	methods: {
 		acceptFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/accept', { userId: this.notification.user.id });
+			os.api('following/requests/accept', { userId: this.notification.user.id });
 		},
 		rejectFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/reject', { userId: this.notification.user.id });
+			os.api('following/requests/reject', { userId: this.notification.user.id });
 		},
 		acceptGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.apiWithDialog('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
 		},
 		rejectGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
+			os.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
 		},
+		notePage,
+		userPage
 	}
 });
 </script>
@@ -153,6 +155,7 @@ export default Vue.extend({
 	font-size: 0.9em;
 	overflow-wrap: break-word;
 	display: flex;
+	contain: content;
 
 	&.max-width_600px {
 		padding: 16px;
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 0e512e1967..3eedf86558 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,30 +1,31 @@
 <template>
 <div class="mfcuwfyp">
-	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
-		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @updated="noteUpdated(notification.note, $event)" :key="notification.id"/>
-		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
-	</x-list>
+	<XList class="notifications" :items="items" v-slot="{ item: notification }">
+		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
+		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+	</XList>
 
-	<button class="_panel _button" ref="loadMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+	<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><mk-loading inline/></template>
+		<template v-if="moreFetching"><MkLoading inline/></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
 
-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent, PropType } from 'vue';
+import paging from '@/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 import { notificationTypes } from '../../types';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification,
 		XList,
@@ -63,22 +64,30 @@ export default Vue.extend({
 	},
 
 	watch: {
-		includeTypes() {
-			this.reload();
-		},
-		'$store.state.i.mutingNotificationTypes'() {
-			if (this.includeTypes === null) {
+		includeTypes: {
+			handler() {
 				this.reload();
-			}
+			},
+			deep: true
+		},
+		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $store.state.i が更新されると、
+		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
+		'$store.state.i.mutingNotificationTypes': {
+			handler() {
+				if (this.includeTypes === null) {
+					this.reload();
+				}
+			},
+			deep: true
 		}
 	},
 
 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},
 
@@ -86,7 +95,7 @@ export default Vue.extend({
 		onNotification(notification) {
 			const isMuted = !this.allIncludeTypes.includes(notification.type);
 			if (isMuted || document.visibilityState === 'visible') {
-				this.$root.stream.send('readNotification', {
+				os.stream.send('readNotification', {
 					id: notification.id
 				});
 			}
@@ -101,10 +110,10 @@ export default Vue.extend({
 
 		noteUpdated(oldValue, newValue) {
 			const i = this.items.findIndex(n => n.note === oldValue);
-			Vue.set(this.items, i, {
+			this.items[i] = {
 				...this.items[i],
 				note: newValue
-			});
+			};
 		},
 	}
 });
diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index 8c41a070bd..ad1069f53f 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -8,22 +8,27 @@
 		<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>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { userName } from '../filters/user';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		page: {
 			type: Object,
 			required: true
 		},
 	},
+	methods: {
+		userName
+	}
 });
 </script>
 
diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
new file mode 100644
index 0000000000..77312fec7f
--- /dev/null
+++ b/src/client/components/page-window.vue
@@ -0,0 +1,86 @@
+<template>
+<XWindow ref="window" :initial-width="400" :initial-height="450" :can-resize="true" @closed="$emit('closed')">
+	<template #header>
+		<XHeader :info="pageInfo" :with-back="false"/>
+	</template>
+	<template #buttons>
+		<button class="_button" @click="expand" v-tooltip="$t('showInPage')"><Fa :icon="faExpandAlt"/></button>
+		<button class="_button" @click="popout" v-tooltip="$t('popout')"><Fa :icon="faExternalLinkAlt"/></button>
+	</template>
+	<div style="min-height: 100%; background: var(--bg);">
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue';
+import { faExternalLinkAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons';
+import XWindow from '@/components/ui/window.vue';
+import XHeader from '@/ui/_common_/header.vue';
+import { popout } from '@/scripts/popout';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		XHeader,
+	},
+
+	props: {
+		initialUrl: {
+			type: String,
+			required: true,
+		},
+		initialComponent: {
+			type: Object,
+			required: true,
+		},
+		initialProps: {
+			type: Object,
+			required: false,
+			default: {},
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			pageInfo: null,
+			url: this.initialUrl,
+			component: this.initialComponent,
+			props: this.initialProps,
+			faExternalLinkAlt, faExpandAlt,
+		};
+	},
+
+	provide() {
+		return {
+			navHook: (url, component, props) => {
+				this.url = url;
+				this.component = markRaw(component);
+				this.props = props;
+			}
+		};
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		expand() {
+			this.$router.push(this.url);
+			this.$refs.window.close();
+		},
+
+		popout() {
+			popout(this.url, this.$el);
+			this.$refs.window.close();
+		},
+	},
+});
+</script>
diff --git a/src/client/components/page/page.block.vue b/src/client/components/page/page.block.vue
index 0a4b068b63..412c91ee0d 100644
--- a/src/client/components/page/page.block.vue
+++ b/src/client/components/page/page.block.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
@@ -19,7 +19,7 @@ import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
 	},
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
index 83753b4e80..ff4c88554b 100644
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
@@ -24,14 +25,14 @@ export default Vue.extend({
 		click() {
 			if (this.value.action === 'dialog') {
 				this.hpml.eval();
-				this.$root.dialog({
+				os.dialog({
 					text: this.hpml.interpolate(this.value.content)
 				});
 			} else if (this.value.action === 'resetRandom') {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
 			} else if (this.value.action === 'pushEvent') {
-				this.$root.api('page-push', {
+				os.api('page-push', {
 					pageId: this.hpml.page.id,
 					event: this.value.event,
 					...(this.value.var ? {
@@ -39,7 +40,7 @@ export default Vue.extend({
 					} : {})
 				});
 
-				this.$root.dialog({
+				os.dialog({
 					type: 'success',
 					text: this.hpml.interpolate(this.value.message)
 				});
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
index 2d7cc1f8f9..d3bf5c1de6 100644
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.counter.vue b/src/client/components/page/page.counter.vue
index a3674b87a2..9eee47c4ec 100644
--- a/src/client/components/page/page.counter.vue
+++ b/src/client/components/page/page.counter.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index 6bdf9cd97d..1e0c841541 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -1,13 +1,14 @@
 <template>
 <div v-show="hpml.vars[value.var]">
-	<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
+	<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.image.vue b/src/client/components/page/page.image.vue
index f515958515..ddcce5c37b 100644
--- a/src/client/components/page/page.image.vue
+++ b/src/client/components/page/page.image.vue
@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index 56899b1b20..cf4000010f 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
+	<MkInput class="kudkigyw" v-model:value="v" type="number">{{ hpml.interpolate(value.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index da5bc8bfab..e2b712667a 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -1,18 +1,19 @@
 <template>
 <div class="ngbfujlo">
-	<mk-textarea :value="text" readonly style="margin: 0;"></mk-textarea>
-	<mk-button class="button" primary @click="post()" :disabled="posting || posted"><fa v-if="posted" :icon="faCheck"/><fa v-else :icon="faPaperPlane"/></mk-button>
+	<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
+	<MkButton class="button" primary @click="post()" :disabled="posting || posted"><Fa v-if="posted" :icon="faCheck"/><Fa v-else :icon="faPaperPlane"/></MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
-import { apiUrl } from '../../config';
+import { apiUrl } from '@/config';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea,
 		MkButton,
@@ -44,7 +45,7 @@ export default Vue.extend({
 	methods: {
 		upload() {
 			return new Promise((ok) => {
-				const dialog = this.$root.dialog({
+				const dialog = os.dialog({
 					type: 'waiting',
 					text: this.$t('uploading') + '...',
 					showOkButton: false,
@@ -75,15 +76,11 @@ export default Vue.extend({
 		async post() {
 			this.posting = true;
 			const file = this.value.attachCanvasImage ? await this.upload() : null;
-			this.$root.api('notes/create', {
+			os.apiWithDialog('notes/create', {
 				text: this.text === '' ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		}
 	}
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
index 99d9ead385..9341c2421e 100644
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(value.title) }}</div>
-	<mk-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</mk-radio>
+	<MkRadio v-for="x in value.values" v-model:value="v" :value="x" :key="x">{{ x }}</MkRadio>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio
 	},
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
index c9758a0dbe..d31610bc87 100644
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -3,15 +3,16 @@
 	<component :is="'h' + h">{{ value.title }}</component>
 
 	<div class="children">
-		<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
+		<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
 	</div>
 </section>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
index 9f04ad19c4..33e4371695 100644
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -1,14 +1,15 @@
 <template>
 <div class="hkcxmtwj">
-	<mk-switch v-model="v">{{ hpml.interpolate(value.text) }}</mk-switch>
+	<MkSwitch v-model:value="v">{{ hpml.interpolate(value.text) }}</MkSwitch>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkSwitch from '../ui/switch.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSwitch
 	},
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index 0d09f9fb5e..f0fe70e335 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="text">{{ hpml.interpolate(value.text) }}</mk-input>
+	<MkInput class="kudkigyw" v-model:value="v" type="text">{{ hpml.interpolate(value.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},
diff --git a/src/client/components/page/page.text.vue b/src/client/components/page/page.text.vue
index 66e2acb90a..fff840f743 100644
--- a/src/client/components/page/page.text.vue
+++ b/src/client/components/page/page.text.vue
@@ -1,16 +1,19 @@
 <template>
 <div class="mrdgzndn">
-	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
-	<mk-url-preview v-for="url in urls" :url="url" :key="url" class="url"/>
+	<Mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
+	<MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
+	components: {
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
+	},
 	props: {
 		value: {
 			required: true
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
index 5e0cc43779..9e3283aa08 100644
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-textarea v-model="v">{{ hpml.interpolate(value.text) }}</mk-textarea>
+	<MkTextarea v-model:value="v">{{ hpml.interpolate(value.text) }}</MkTextarea>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
index abb30d78ee..e2929de5f0 100644
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -1,12 +1,13 @@
 <template>
-<mk-textarea :value="text" readonly></mk-textarea>
+<MkTextarea :value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index b3cc01ec22..f7f565a8d1 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -1,19 +1,20 @@
 <template>
 <div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
-	<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
+	<XBlock v-for="child in page.content" :value="child" @update:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '@syuilo/aiscript';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
-import { Hpml } from '../../scripts/hpml/evaluator';
-import { url } from '../../config';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { url } from '@/config';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBlock
 	},
@@ -33,7 +34,7 @@ export default Vue.extend({
 	},
 
 	created() {
-		this.hpml = new Hpml(this, this.page, {
+		this.hpml = new Hpml(this.page, {
 			randomSeed: Math.random(),
 			visitor: this.$store.state.i,
 			url: url,
@@ -49,7 +50,7 @@ export default Vue.extend({
 					ast = parse(this.page.script);
 				} catch (e) {
 					console.error(e);
-					/*this.$root.dialog({
+					/*os.dialog({
 						type: 'error',
 						text: 'Syntax error :('
 					});*/
@@ -59,7 +60,7 @@ export default Vue.extend({
 					this.hpml.eval();
 				}).catch(e => {
 					console.error(e);
-					/*this.$root.dialog({
+					/*os.dialog({
 						type: 'error',
 						text: e
 					});*/
@@ -70,7 +71,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.hpml.aiscript) this.hpml.aiscript.abort();
 	},
 });
diff --git a/src/client/components/particle.vue b/src/client/components/particle.vue
index bcdc56be63..d82705c1e8 100644
--- a/src/client/components/particle.vue
+++ b/src/client/components/particle.vue
@@ -3,43 +3,48 @@
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
 			<animate attributeName="r"
-					begin="0s" dur="0.5s"
-					values="4; 32"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.165, 0.84, 0.44, 1"
-					repeatCount="1" />
+				begin="0s" dur="0.5s"
+				values="4; 32"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.165, 0.84, 0.44, 1"
+				repeatCount="1"
+			/>
 			<animate attributeName="stroke-width"
-					begin="0s" dur="0.5s"
-					values="16; 0"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1" />
+				begin="0s" dur="0.5s"
+				values="16; 0"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.3, 0.61, 0.355, 1"
+				repeatCount="1"
+			/>
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
 				<animate attributeName="r"
-						begin="0s" dur="0.8s"
-						:values="`${particle.size}; 0`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.165, 0.84, 0.44, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.size}; 0`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.165, 0.84, 0.44, 1"
+					repeatCount="1"
+				/>
 				<animate attributeName="cx"
-						begin="0s" dur="0.8s"
-						:values="`${particle.xA}; ${particle.xB}`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.xA}; ${particle.xB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
 				<animate attributeName="cy"
-						begin="0s" dur="0.8s"
-						:values="`${particle.yA}; ${particle.yB}`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.yA}; ${particle.yB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
 			</circle>
 		</g>
 	</svg>
@@ -47,9 +52,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		x: {
 			type: Number,
@@ -60,6 +65,7 @@ export default Vue.extend({
 			required: true
 		}
 	},
+	emits: ['end'],
 	data() {
 		const particles = [];
 		const origin = 64;
@@ -85,7 +91,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		setTimeout(() => {
-			this.destroyDom();
+			this.$emit('end');
 		}, 1100);
 	}
 });
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index 0687e999b5..5b615677dc 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -1,47 +1,47 @@
 <template>
 <div class="zmdxowus">
 	<p class="caution" v-if="choices.length < 2">
-		<fa :icon="faExclamationTriangle"/>{{ $t('_poll.noOnlyOneChoice') }}
+		<Fa :icon="faExclamationTriangle"/>{{ $t('_poll.noOnlyOneChoice') }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<mk-input class="input" :value="choice" @input="onInput(i, $event)">
+			<MkInput class="input" :value="choice" @update:value="onInput(i, $event)">
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
-			</mk-input>
+			</MkInput>
 			<button @click="remove(i)" class="_button">
-				<fa :icon="faTimes"/>
+				<Fa :icon="faTimes"/>
 			</button>
 		</li>
 	</ul>
-	<mk-button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</mk-button>
-	<mk-button class="add" v-else disabled>{{ $t('_poll.noMore') }}</mk-button>
+	<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</MkButton>
+	<MkButton class="add" v-else disabled>{{ $t('_poll.noMore') }}</MkButton>
 	<section>
-		<mk-switch v-model="multiple">{{ $t('_poll.canMultipleVote') }}</mk-switch>
+		<MkSwitch v-model:value="multiple">{{ $t('_poll.canMultipleVote') }}</MkSwitch>
 		<div>
-			<mk-select v-model="expiration">
+			<MkSelect v-model:value="expiration">
 				<template #label>{{ $t('_poll.expiration') }}</template>
 				<option value="infinite">{{ $t('_poll.infinite') }}</option>
 				<option value="at">{{ $t('_poll.at') }}</option>
 				<option value="after">{{ $t('_poll.after') }}</option>
-			</mk-select>
+			</MkSelect>
 			<section v-if="expiration === 'at'">
-				<mk-input v-model="atDate" type="date" class="input">
+				<MkInput v-model:value="atDate" type="date" class="input">
 					<span>{{ $t('_poll.deadlineDate') }}</span>
-				</mk-input>
-				<mk-input v-model="atTime" type="time" class="input">
+				</MkInput>
+				<MkInput v-model:value="atTime" type="time" class="input">
 					<span>{{ $t('_poll.deadlineTime') }}</span>
-				</mk-input>
+				</MkInput>
 			</section>
 			<section v-if="expiration === 'after'">
-				<mk-input v-model="after" type="number" class="input">
+				<MkInput v-model:value="after" type="number" class="input">
 					<span>{{ $t('_poll.duration') }}</span>
-				</mk-input>
-				<mk-select v-model="unit">
+				</MkInput>
+				<MkSelect v-model:value="unit">
 					<option value="second">{{ $t('_time.second') }}</option>
 					<option value="minute">{{ $t('_time.minute') }}</option>
 					<option value="hour">{{ $t('_time.hour') }}</option>
 					<option value="day">{{ $t('_time.day') }}</option>
-				</mk-select>
+				</MkSelect>
 			</section>
 		</div>
 	</section>
@@ -49,23 +49,33 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { erase } from '../../prelude/array';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '../../misc/format-time-string';
 import MkInput from './ui/input.vue';
 import MkSelect from './ui/select.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkSelect,
 		MkSwitch,
 		MkButton,
 	},
+
+	props: {
+		poll: {
+			type: Object,
+			required: true
+		}
+	},
+
+	emits: ['updated'],
+
 	data() {
 		return {
 			choices: ['', ''],
@@ -78,20 +88,66 @@ export default Vue.extend({
 			faExclamationTriangle, faTimes
 		};
 	},
+
 	watch: {
-		choices() {
-			this.$emit('updated');
-		}
+		poll: {
+			handler(poll) {
+				if (poll == null) return;
+				if (poll.choices.length == 0) return;
+				this.choices = poll.choices;
+				if (poll.choices.length == 1) this.choices = this.choices.concat('');
+				this.multiple = poll.multiple;
+				if (poll.expiresAt) {
+					this.expiration = 'at';
+					this.atDate = this.atTime = poll.expiresAt;
+				} else if (typeof poll.expiredAfter === 'number') {
+					this.expiration = 'after';
+					this.after = poll.expiredAfter;
+				} else {
+					this.expiration = 'infinite';
+				}
+			},
+			deep: true,
+			immediate: true
+		},
+		choices: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+			deep: true
+		},
+		multiple: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		expiration: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		atDate: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		after: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
 	},
+
 	methods: {
 		onInput(i, e) {
-			Vue.set(this.choices, i, e);
+			this.choices[i] = e;
 		},
 
 		add() {
 			this.choices.push('');
 			this.$nextTick(() => {
-				(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
+				// TODO
+				//(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
 			});
 		},
 
@@ -116,29 +172,14 @@ export default Vue.extend({
 			};
 
 			return {
-				choices: erase('', this.choices),
+				choices: this.choices,
 				multiple: this.multiple,
 				...(
 					this.expiration === 'at' ? { expiresAt: at() } :
-					this.expiration === 'after' ? { expiredAfter: after() } : {})
+					this.expiration === 'after' ? { expiredAfter: after() } : {}
+				)
 			};
 		},
-
-		set(data) {
-			if (data.choices.length == 0) return;
-			this.choices = data.choices;
-			if (data.choices.length == 1) this.choices = this.choices.concat('');
-			this.multiple = data.multiple;
-			if (data.expiresAt) {
-				this.expiration = 'at';
-				this.atDate = this.atTime = data.expiresAt;
-			} else if (typeof data.expiredAfter === 'number') {
-				this.expiration = 'after';
-				this.after = data.expiredAfter;
-			} else {
-				this.expiration = 'infinite';
-			}
-		}
 	}
 });
 </script>
diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index f67abf1543..071e3d539e 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -1,11 +1,11 @@
 <template>
-<div class="tivcixzd" :data-done="closed || isVoted">
+<div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
 		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><fa :icon="faCheck"/></template>
-				<mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
+				<template v-if="choice.isVoted"><Fa :icon="faCheck"/></template>
+				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
 		</li>
@@ -22,11 +22,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
@@ -85,7 +86,7 @@ export default Vue.extend({
 		},
 		vote(id) {
 			if (this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
-			this.$root.api('notes/polls/vote', {
+			os.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {
@@ -153,7 +154,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-done] {
+	&.done {
 		> ul > li {
 			cursor: default;
 
diff --git a/src/client/components/popup.vue b/src/client/components/popup.vue
deleted file mode 100644
index 6d27ff7ae0..0000000000
--- a/src/client/components/popup.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-<div class="mk-popup" v-hotkey.global="keymap">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		source: {
-			required: true
-		},
-		noCenter: {
-			type: Boolean,
-			required: false
-		},
-		fixed: {
-			type: Boolean,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		}
-	},
-	data() {
-		return {
-			show: true,
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': this.close,
-			};
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			const popover = this.$refs.content as any;
-
-			const rect = this.source.getBoundingClientRect();
-			const width = popover.offsetWidth;
-			const height = popover.offsetHeight;
-
-			let left;
-			let top;
-
-			if (this.$root.isMobile && !this.noCenter) {
-				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.source.offsetWidth / 2);
-				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.source.offsetHeight / 2);
-				left = (x - (width / 2));
-				top = (y - (height / 2));
-				popover.style.transformOrigin = 'center';
-			} else {
-				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.source.offsetWidth / 2);
-				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.source.offsetHeight;
-				left = (x - (width / 2));
-				top = y;
-			}
-
-			if (this.fixed) {
-				if (left + width > window.innerWidth) {
-					left = window.innerWidth - width;
-					popover.style.transformOrigin = 'center';
-				}
-
-				if (top + height > window.innerHeight) {
-					top = window.innerHeight - height;
-					popover.style.transformOrigin = 'center';
-				}
-			} else {
-				if (left + width - window.pageXOffset > window.innerWidth) {
-					left = window.innerWidth - width + window.pageXOffset;
-					popover.style.transformOrigin = 'center';
-				}
-
-				if (top + height - window.pageYOffset > window.innerHeight) {
-					top = window.innerHeight - height + window.pageYOffset;
-					popover.style.transformOrigin = 'center';
-				}
-			}
-
-			if (top < 0) {
-				top = 0;
-			}
-
-			if (left < 0) {
-				left = 0;
-			}
-
-			popover.style.left = left + 'px';
-			popover.style.top = top + 'px';
-		});
-	},
-	methods: {
-		close() {
-			this.show = false;
-			if (this.$refs.bg) (this.$refs.bg as any).style.pointerEvents = 'none';
-			if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.popup-enter-active, .popup-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.popup-enter, .popup-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
-.mk-popup {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .content {
-		position: absolute;
-		z-index: 10001;
-		background: var(--panel);
-		border-radius: 8px;
-		box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
-		overflow: hidden;
-		transform-origin: center top;
-
-		&.fixed {
-			position: fixed;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 2415bf28ec..6f3d1bca66 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="skeikyzd" v-show="files.length != 0">
-	<x-draggable class="files" :list="files" animation="150" delay="100" delayOnTouchOnly="true">
+	<XDraggable class="files" :list="files" animation="150" delay="100" delay-on-touch-only="true">
 		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
-			<x-file-thumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
+			<MkDriveFileThumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
 			<div class="sensitive" v-if="file.isSensitive">
-				<fa class="icon" :icon="faExclamationTriangle"/>
+				<Fa class="icon" :icon="faExclamationTriangle"/>
 			</div>
 		</div>
-	</x-draggable>
+	</XDraggable>
 	<p class="remain">{{ 4 - files.length }}/4</p>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
-import XFileThumbnail from './drive-file-thumbnail.vue'
+import MkDriveFileThumbnail from './drive-file-thumbnail.vue'
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XDraggable,
-		XFileThumbnail
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		MkDriveFileThumbnail
 	},
 
 	props: {
@@ -36,6 +36,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['updated', 'detach'],
+
 	data() {
 		return {
 			menu: null as Promise<null> | null,
@@ -48,21 +50,21 @@ export default Vue.extend({
 		detachMedia(id) {
 			if (this.detachMediaFn) {
 				this.detachMediaFn(id);
-			} else if (this.$parent.detachMedia) {
-				this.$parent.detachMedia(id);
+			} else {
+				this.$emit('detach', id);
 			}
 		},
 		toggleSensitive(file) {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				isSensitive: !file.isSensitive
 			}).then(() => {
 				file.isSensitive = !file.isSensitive;
-				this.$parent.updateMedia(file);
+				this.$emit('updated', file);
 			});
 		},
 		async rename(file) {
-			const { canceled, result } = await this.$root.dialog({
+			const { canceled, result } = await os.dialog({
 				title: this.$t('enterFileName'),
 				input: {
 					default: file.name
@@ -70,32 +72,29 @@ export default Vue.extend({
 				allowEmpty: false
 			});
 			if (canceled) return;
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				name: result
 			}).then(() => {
 				file.name = result;
-				this.$parent.updateMedia(file);
+				this.$emit('updated', file);
 			});
 		},
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = this.$root.menu({
-				items: [{
-					text: this.$t('renameFile'),
-					icon: faICursor,
-					action: () => { this.rename(file) }
-				}, {
-					text: file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
-					icon: file.isSensitive ? faEyeSlash : faEye,
-					action: () => { this.toggleSensitive(file) }
-				}, {
-					text: this.$t('attachCancel'),
-					icon: faTimesCircle,
-					action: () => { this.detachMedia(file.id) }
-				}],
-				source: ev.currentTarget || ev.target
-			}).then(() => this.menu = null);
+			this.menu = os.modalMenu([{
+				text: this.$t('renameFile'),
+				icon: faICursor,
+				action: () => { this.rename(file) }
+			}, {
+				text: file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
+				icon: file.isSensitive ? faEyeSlash : faEye,
+				action: () => { this.toggleSensitive(file) }
+			}, {
+				text: this.$t('attachCancel'),
+				icon: faTimesCircle,
+				action: () => { this.detachMedia(file.id) }
+			}], ev.currentTarget || ev.target).then(() => this.menu = null);
 		}
 	}
 });
@@ -103,7 +102,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .skeikyzd {
-	padding: 4px;
+	padding: 8px 16px;
 	position: relative;
 
 	> .files {
@@ -114,7 +113,9 @@ export default Vue.extend({
 			position: relative;
 			width: 64px;
 			height: 64px;
-			margin: 4px;
+			margin-right: 4px;
+			border-radius: 4px;
+			overflow: hidden;
 			cursor: move;
 
 			&:hover > .remove {
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index 8a56dd24e2..f2563a9bec 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -1,156 +1,19 @@
 <template>
-<div class="ulveipgl">
-	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
-		<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
-	</transition>
-	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
-		<transition :name="$store.state.device.animation ? 'form' : ''" appear
-			@after-leave="destroyDom"
-		>
-			<x-post-form ref="form"
-				v-if="show"
-				:reply="reply"
-				:renote="renote"
-				:mention="mention"
-				:specified="specified"
-				:initial-text="initialText"
-				:initial-note="initialNote"
-				:instant="instant"
-				:channel="channel"
-				@posted="onPosted"
-				@cancel="onCanceled"
-				style="border-radius: var(--radius);"/>
-		</transition>
-	</div>
-</div>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')" :position="'top'">
+	<MkPostForm @done="$refs.modal.close()" @esc="$refs.modal.close()" v-bind="$attrs"/>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XPostForm from './post-form.vue';
+import { defineComponent } from 'vue';
+import MkModal from '@/components/ui/modal.vue';
+import MkPostForm from '@/components/post-form.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPostForm
+		MkModal,
+		MkPostForm,
 	},
-
-	props: {
-		reply: {
-			type: Object,
-			required: false
-		},
-		renote: {
-			type: Object,
-			required: false
-		},
-		mention: {
-			type: Object,
-			required: false
-		},
-		specified: {
-			type: Object,
-			required: false
-		},
-		initialText: {
-			type: String,
-			required: false
-		},
-		initialNote: {
-			type: Object,
-			required: false
-		},
-		instant: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		channel: {
-			type: Object,
-			required: false
-		},
-	},
-
-	data() {
-		return {
-			show: true
-		};
-	},
-
-	methods: {
-		focus() {
-			this.$refs.form.focus();
-		},
-
-		close() {
-			this.show = false;
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.main as any).style.pointerEvents = 'none';
-		},
-
-		onPosted() {
-			this.$emit('posted');
-			this.close();
-		},
-
-		onCanceled() {
-			this.$emit('cancel');
-			this.close();
-		},
-
-		onKeydown(e) {
-			if (e.which === 27) { // Esc
-				e.preventDefault();
-				e.stopPropagation();
-				this.close();
-			}
-		},
-	}
+	emits: ['closed'],
 });
 </script>
-
-<style lang="scss" scoped>
-.form-enter-active, .form-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.form-enter, .form-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.form-fade-enter-active, .form-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.form-fade-enter, .form-fade-leave-to {
-	opacity: 0;
-}
-
-.ulveipgl {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .main {
-		display: block;
-		position: fixed;
-		z-index: 10000;
-		top: 32px;
-		left: 0;
-		right: 0;
-		height: calc(100% - 64px);
-		width: 500px;
-		max-width: calc(100% - 16px);
-		overflow: auto;
-		margin: 0 auto 0 auto;
-
-		@media (max-width: 550px) {
-			top: 16px;
-			height: calc(100% - 32px);
-		}
-
-		@media (max-width: 520px) {
-			top: 8px;
-			height: calc(100% - 16px);
-		}
-	}
-}
-</style>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index a0d2cd153c..ba7770345a 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -1,84 +1,84 @@
 <template>
-<div class="gafaadew"
+<div class="gafaadew" :class="{ modal, _popup: modal }"
+	v-size="{ max: [500] }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
 	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><fa :icon="faTimes"/></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><Fa :icon="faTimes"/></button>
 		<div>
-			<span class="local-only" v-if="localOnly" v-text="$t('_visibility.localOnly')" />
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
+			<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')" :disabled="channel != null">
-				<span v-if="visibility === 'public'"><fa :icon="faGlobe"/></span>
-				<span v-if="visibility === 'home'"><fa :icon="faHome"/></span>
-				<span v-if="visibility === 'followers'"><fa :icon="faUnlock"/></span>
-				<span v-if="visibility === 'specified'"><fa :icon="faEnvelope"/></span>
+				<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
+				<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
+				<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
+				<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
-		<x-note-preview class="preview" v-if="reply" :note="reply"/>
-		<x-note-preview class="preview" v-if="renote" :note="renote"/>
-		<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
+		<XNotePreview class="preview" v-if="reply" :note="reply"/>
+		<XNotePreview class="preview" v-if="renote" :note="renote"/>
+		<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $t('recipient') }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
-					<mk-acct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><fa :icon="faTimes"/></button>
+					<MkAcct :user="u"/>
+					<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><fa :icon="faPlus" fixed-width/></button>
+				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
 			</div>
 		</div>
-		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" v-autocomplete="{ model: 'cw' }" @keydown="onKeydown">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @keydown="onKeydown" @paste="onPaste"></textarea>
-		<x-post-form-attaches class="attaches" :files="files"/>
-		<x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
-		<x-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
+		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" @keydown="onKeydown">
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
+		<XPostFormAttaches class="attaches" :files="files" @updated="updateMedia" @detach="detachMedia"/>
+		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
-			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><fa :icon="faPhotoVideo"/></button>
-			<button class="_button" @click="poll = !poll" :class="{ active: poll }" v-tooltip="$t('poll')"><fa :icon="faPollH"/></button>
-			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$t('useCw')"><fa :icon="faEyeSlash"/></button>
-			<button class="_button" @click="insertMention" v-tooltip="$t('mention')"><fa :icon="faAt"/></button>
-			<button class="_button" @click="insertEmoji" v-tooltip="$t('emoji')"><fa :icon="faLaughSquint"/></button>
-			<button class="_button" @click="showActions" v-tooltip="$t('plugin')" v-if="$store.state.postFormActions.length > 0"><fa :icon="faPlug"/></button>
+			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><Fa :icon="faPhotoVideo"/></button>
+			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$t('poll')"><Fa :icon="faPollH"/></button>
+			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$t('useCw')"><Fa :icon="faEyeSlash"/></button>
+			<button class="_button" @click="insertMention" v-tooltip="$t('mention')"><Fa :icon="faAt"/></button>
+			<button class="_button" @click="insertEmoji" v-tooltip="$t('emoji')"><Fa :icon="faLaughSquint"/></button>
+			<button class="_button" @click="showActions" v-tooltip="$t('plugin')" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
 		</footer>
-		<input ref="file" class="file _button" type="file" multiple="multiple" @change="onChangeFile"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode';
-import MkVisibilityChooser from './visibility-chooser.vue';
-import MkUserSelect from './user-select.vue';
 import XNotePreview from './note-preview.vue';
 import { parse } from '../../mfm/parse';
-import { host, url } from '../config';
+import { host, url } from '@/config';
 import { erase, unique } from '../../prelude/array';
 import extractMentions from '../../misc/extract-mentions';
 import getAcct from '../../misc/acct/render';
 import { formatTimeString } from '../../misc/format-time-string';
-import { selectDriveFile } from '../scripts/select-drive-file';
+import { Autocomplete } from '@/scripts/autocomplete';
 import { noteVisibilities } from '../../types';
-import { utils } from '@syuilo/aiscript';
+import * as os from '@/os';
+import { selectFile } from '@/scripts/select-file';
+import { notePostInterruptors, postFormActions } from '@/store';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotePreview,
-		XUploader: () => import('./uploader.vue').then(m => m.default),
-		XPostFormAttaches: () => import('./post-form-attaches.vue').then(m => m.default),
-		XPollEditor: () => import('./poll-editor.vue').then(m => m.default)
+		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue'))
 	},
 
+	inject: ['modal'],
+
 	props: {
 		reply: {
 			type: Object,
@@ -117,19 +117,22 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
 	},
 
+	emits: ['posted', 'done', 'esc'],
+
 	data() {
 		return {
 			posting: false,
 			text: '',
 			files: [],
-			uploadings: [],
-			poll: false,
-			pollChoices: [],
-			pollMultiple: false,
-			pollExpiration: [],
+			poll: null,
 			useCw: false,
 			cw: null,
 			localOnly: false,
@@ -139,7 +142,8 @@ export default Vue.extend({
 			draghover: false,
 			quoteId: null,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug
+			postFormActions,
+			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
 	},
 
@@ -190,7 +194,7 @@ export default Vue.extend({
 			return !this.posting &&
 				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
 				(length(this.text.trim()) <= this.max) &&
-				(!this.poll || this.pollChoices.length >= 2);
+				(!this.poll || this.poll.choices.length >= 2);
 		},
 
 		max(): number {
@@ -246,14 +250,14 @@ export default Vue.extend({
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
 			this.visibility = this.reply.visibility;
 			if (this.reply.visibility === 'specified') {
-				this.$root.api('users/show', {
+				os.api('users/show', {
 					userIds: this.reply.visibleUserIds.filter(uid => uid !== this.$store.state.i.id && uid !== this.reply.userId)
 				}).then(users => {
 					this.visibleUsers.push(...users);
 				});
 
 				if (this.reply.userId !== this.$store.state.i.id) {
-					this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
+					os.api('users/show', { userId: this.reply.userId }).then(user => {
 						this.visibleUsers.push(user);
 					});
 				}
@@ -271,15 +275,21 @@ export default Vue.extend({
 			this.cw = this.reply.cw;
 		}
 
-		this.focus();
-
-		this.$nextTick(() => {
+		if (this.autofocus) {
 			this.focus();
-		});
+
+			this.$nextTick(() => {
+				this.focus();
+			});
+		}
+
+		// TODO: detach when unmount
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
+		new Autocomplete(this.$refs.cw, this, { model: 'cw' });
 
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
-			if (!this.instant && !this.mention) {
+			if (!this.instant && !this.mention && !this.specified) {
 				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
 				if (draft) {
 					this.text = draft.data.text;
@@ -289,10 +299,7 @@ export default Vue.extend({
 					this.localOnly = draft.data.localOnly;
 					this.files = (draft.data.files || []).filter(e => e);
 					if (draft.data.poll) {
-						this.poll = true;
-						this.$nextTick(() => {
-							(this.$refs.poll as any).set(draft.data.poll);
-						});
+						this.poll = draft.data.poll;
 					}
 				}
 			}
@@ -305,13 +312,7 @@ export default Vue.extend({
 				this.cw = init.cw;
 				this.useCw = init.cw != null;
 				if (init.poll) {
-					this.poll = true;
-					this.$nextTick(() => {
-						(this.$refs.poll as any).set({
-							choices: init.poll.choices.map(c => c.text),
-							multiple: init.poll.multiple
-						});
-					});
+					this.poll = init.poll;
 				}
 				this.visibility = init.visibility;
 				this.localOnly = init.localOnly;
@@ -328,11 +329,24 @@ export default Vue.extend({
 			this.$watch('useCw', () => this.saveDraft());
 			this.$watch('cw', () => this.saveDraft());
 			this.$watch('poll', () => this.saveDraft());
-			this.$watch('files', () => this.saveDraft());
+			this.$watch('files', () => this.saveDraft(), { deep: true });
 			this.$watch('visibility', () => this.saveDraft());
 			this.$watch('localOnly', () => this.saveDraft());
 		},
 
+		togglePoll() {
+			if (this.poll) {
+				this.poll = null;
+			} else {
+				this.poll = {
+					choices: ['', ''],
+					multiple: false,
+					expiresAt: null,
+					expiredAfter: null,
+				};
+			}
+		},
+
 		trimmedLength(text: string) {
 			return length(text.trim());
 		},
@@ -346,85 +360,50 @@ export default Vue.extend({
 		},
 
 		chooseFileFrom(ev) {
-			this.$root.menu({
-				items: [{
-					type: 'label',
-					text: this.$t('attachFile'),
-				}, {
-					text: this.$t('upload'),
-					icon: faUpload,
-					action: () => { this.chooseFileFromPc() }
-				}, {
-					text: this.$t('fromDrive'),
-					icon: faCloud,
-					action: () => { this.chooseFileFromDrive() }
-				}, {
-					text: this.$t('fromUrl'),
-					icon: faLink,
-					action: () => { this.chooseFileFromUrl() }
-				}],
-				source: ev.currentTarget || ev.target
-			});
-		},
-
-		chooseFileFromPc() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			selectDriveFile(this.$root, true).then(files => {
+			selectFile(ev.currentTarget || ev.target, this.$t('attachFile'), true).then(files => {
 				for (const file of files) {
-					this.attachMedia(file);
+					this.files.push(file);
 				}
 			});
 		},
 
-		attachMedia(driveFile) {
-			this.files.push(driveFile);
-		},
-
 		detachMedia(id) {
 			this.files = this.files.filter(x => x.id != id);
 		},
 
 		updateMedia(file) {
-			Vue.set(this.files, this.files.findIndex(x => x.id === file.id), file);
-		},
-
-		onChangeFile() {
-			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
+			this.files[this.files.findIndex(x => x.id === file.id)] = file;
 		},
 
 		upload(file: File, name?: string) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
-		},
-
-		onChangeUploadings(uploads) {
-			this.$emit('change-uploadings', uploads);
+			os.upload(file, this.$store.state.settings.uploadFolder, name).then(res => {
+				this.files.push(res);
+			});
 		},
 
-		onPollUpdate() {
-			const got = this.$refs.poll.get();
-			this.pollChoices = got.choices;
-			this.pollMultiple = got.multiple;
-			this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter];
+		onPollUpdate(poll) {
+			this.poll = poll;
 			this.saveDraft();
 		},
 
-		setVisibility() {
+		async setVisibility() {
 			if (this.channel) {
 				// TODO: information dialog
 				return;
 			}
-			const w = this.$root.new(MkVisibilityChooser, {
-				source: this.$refs.visibilityButton,
+
+			os.popup(await import('./visibility-picker.vue'), {
 				currentVisibility: this.visibility,
-				currentLocalOnly: this.localOnly
-			});
-			w.$once('chosen', ({ visibility, localOnly }) => {
-				this.applyVisibility(visibility);
-				this.localOnly = localOnly;
-			});
+				currentLocalOnly: this.localOnly,
+				src: this.$refs.visibilityButton
+			}, {
+				changeVisibility: visibility => {
+					this.applyVisibility(visibility);
+				},
+				changeLocalOnly: localOnly => {
+					this.localOnly = localOnly;
+				}
+			}, 'closed');
 		},
 
 		applyVisibility(v: string) {
@@ -432,8 +411,7 @@ export default Vue.extend({
 		},
 
 		addVisibleUser() {
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
+			os.selectUser().then(user => {
 				this.visibleUsers.push(user);
 			});
 		},
@@ -445,12 +423,13 @@ export default Vue.extend({
 		clear() {
 			this.text = '';
 			this.files = [];
-			this.poll = false;
+			this.poll = null;
 			this.quoteId = null;
 		},
 
 		onKeydown(e) {
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
+			if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
+			if (e.which === 27) this.$emit('esc');
 		},
 
 		async onPaste(e: ClipboardEvent) {
@@ -469,7 +448,7 @@ export default Vue.extend({
 			if (!this.renote && !this.quoteId && paste.startsWith(url + '/notes/')) {
 				e.preventDefault();
 
-				this.$root.dialog({
+				os.dialog({
 					type: 'info',
 					text: this.$t('quoteQuestion'),
 					showCancelButton: true
@@ -487,7 +466,7 @@ export default Vue.extend({
 		onDragover(e) {
 			if (!e.dataTransfer.items[0]) return;
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
 			if (isFile || isDriveFile) {
 				e.preventDefault();
 				this.draghover = true;
@@ -514,7 +493,7 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.files.push(file);
@@ -537,7 +516,7 @@ export default Vue.extend({
 					visibility: this.visibility,
 					localOnly: this.localOnly,
 					files: this.files,
-					poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
+					poll: this.poll
 				}
 			};
 
@@ -559,29 +538,30 @@ export default Vue.extend({
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
 				channelId: this.channel ? this.channel.id : undefined,
-				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				poll: this.poll,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,
 				visibility: this.visibility,
 				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
-				viaMobile: this.$root.isMobile
+				viaMobile: os.isMobile
 			};
 
 			// plugin
-			if (this.$store.state.notePostInterruptors.length > 0) {
-				for (const interruptor of this.$store.state.notePostInterruptors) {
-					data = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(data))));
+			if (notePostInterruptors.length > 0) {
+				for (const interruptor of notePostInterruptors) {
+					data = await interruptor.handler(JSON.parse(JSON.stringify(data)));
 				}
 			}
 
 			this.posting = true;
-			this.$root.api('notes/create', data).then(() => {
+			os.api('notes/create', data).then(() => {
 				this.clear();
 				this.deleteDraft();
 				this.$emit('posted');
 			}).catch(err => {
 			}).then(() => {
 				this.posting = false;
+				this.$emit('done');
 			});
 
 			if (this.text && this.text != '') {
@@ -592,39 +572,32 @@ export default Vue.extend({
 		},
 
 		cancel() {
-			this.$emit('cancel');
+			this.$emit('done');
 		},
 
 		insertMention() {
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
-				insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
+			os.selectUser().then(user => {
+				insertTextAtCursor(this.$refs.text, '@' + getAcct(user) + ' ');
 			});
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('./emoji-picker.vue').then(m => m.default), {
-				source: ev.currentTarget || ev.target
-			}).$once('chosen', emoji => {
+			os.pickEmoji(ev.currentTarget || ev.target).then(emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
-				vm.close();
 			});
 		},
 
 		showActions(ev) {
-			this.$root.menu({
-				items: this.$store.state.postFormActions.map(action => ({
-					text: action.title,
-					action: () => {
-						action.handler({
-							text: this.text
-						}, (key, value) => {
-							if (key === 'text') { this.text = value; }
-						});
-					}
-				})),
-				source: ev.currentTarget || ev.target,
-			});
+			os.modalMenu(postFormActions.map(action => ({
+				text: action.title,
+				action: () => {
+					action.handler({
+						text: this.text
+					}, (key, value) => {
+						if (key === 'text') { this.text = value; }
+					});
+				}
+			})), ev.currentTarget || ev.target);
 		}
 	}
 });
@@ -632,26 +605,22 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .gafaadew {
-	background: var(--panel);
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
 
 	> header {
 		z-index: 1000;
 		height: 66px;
 
-		@media (max-width: 500px) {
-			height: 50px;
-		}
-
 		> .cancel {
 			padding: 0;
 			font-size: 20px;
 			width: 64px;
 			line-height: 66px;
-
-			@media (max-width: 500px) {
-				width: 50px;
-				line-height: 50px;
-			}
 		}
 
 		> div {
@@ -662,10 +631,6 @@ export default Vue.extend({
 			> .text-count {
 				opacity: 0.7;
 				line-height: 66px;
-
-				@media (max-width: 500px) {
-					line-height: 50px;
-				}
 			}
 
 			> .visibility {
@@ -678,8 +643,9 @@ export default Vue.extend({
 				}
 			}
 			
-			.local-only {
-				margin: 0 8px;
+			> .local-only {
+				margin: 0 0 0 12px;
+				opacity: 0.7;
 			}
 
 			> .submit {
@@ -690,10 +656,6 @@ export default Vue.extend({
 				vertical-align: bottom;
 				border-radius: 4px;
 
-				@media (max-width: 500px) {
-					margin: 8px;
-				}
-
 				&:disabled {
 					opacity: 0.7;
 				}
@@ -706,13 +668,6 @@ export default Vue.extend({
 	}
 
 	> .form {
-		max-width: 500px;
-		margin: 0 auto;
-
-		&.fixed {
-			max-width: unset;
-		}
-
 		> .preview {
 			padding: 16px;
 		}
@@ -741,10 +696,6 @@ export default Vue.extend({
 			overflow: auto;
 			white-space: nowrap;
 
-			@media (max-width: 500px) {
-				padding: 6px 16px;
-			}
-
 			> .visibleUsers {
 				display: inline;
 				top: -1px;
@@ -782,10 +733,6 @@ export default Vue.extend({
 			color: var(--fg);
 			font-family: inherit;
 
-			@media (max-width: 500px) {
-				padding: 0 16px;
-			}
-
 			&:focus {
 				outline: none;
 			}
@@ -806,31 +753,14 @@ export default Vue.extend({
 			min-width: 100%;
 			min-height: 90px;
 
-			@media (max-width: 500px) {
-				min-height: 80px;
-			}
-
 			&.withCw {
 				padding-top: 8px;
 			}
 		}
 
-		> .mk-uploader {
-			margin: 8px 0 0 0;
-			padding: 8px;
-		}
-
-		> .file {
-			display: none;
-		}
-
 		> footer {
 			padding: 0 16px 16px 16px;
 
-			@media (max-width: 500px) {
-				padding: 0 8px 8px 8px;
-			}
-
 			> button {
 				display: inline-block;
 				padding: 0;
@@ -850,5 +780,45 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	&.max-width_500px {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> div {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
 }
 </style>
diff --git a/src/client/components/reaction-icon.vue b/src/client/components/reaction-icon.vue
index fe2b528368..f781f63d79 100644
--- a/src/client/components/reaction-icon.vue
+++ b/src/client/components/reaction-icon.vue
@@ -1,10 +1,11 @@
 <template>
-<mk-emoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkEmoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		reaction: {
 			type: String,
diff --git a/src/client/components/reaction-picker.vue b/src/client/components/reaction-picker.vue
index cf5de327a3..fca1e858bb 100644
--- a/src/client/components/reaction-picker.vue
+++ b/src/client/components/reaction-picker.vue
@@ -1,31 +1,28 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<div class="rdfaahpb">
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="rdfaahpb _popup" v-hotkey="keymap">
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
-			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
+			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><XReactionIcon :reaction="reaction"/></button>
 		</div>
-		<input class="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+		<input class="text" ref="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText">
 	</div>
-</x-popup>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
-import XReactionIcon from './reaction-icon.vue';
-import XPopup from './popup.vue';
+import XReactionIcon from '@/components/reaction-icon.vue';
+import MkModal from '@/components/ui/modal.vue';
+import { Autocomplete } from '@/scripts/autocomplete';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPopup,
 		XReactionIcon,
+		MkModal,
 	},
 
 	props: {
-		source: {
-			required: true
-		},
-
 		reactions: {
 			required: false
 		},
@@ -35,8 +32,14 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+
+		src: {
+			required: false
+		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			rs: this.reactions || this.$store.state.settings.reactions,
@@ -70,21 +73,30 @@ export default Vue.extend({
 
 	watch: {
 		focus(i) {
-			this.$refs.buttons.children[i].focus();
+			this.$refs.buttons.children[i].focus({
+				preventScroll: true
+			});
 		}
 	},
 
 	mounted() {
-		this.focus = 0;
+		this.$nextTick(() => {
+			this.focus = 0;
+		});
+
+		// TODO: detach when unmount
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
 	},
 
 	methods: {
 		close() {
-			this.$refs.popup.close();
+			this.$emit('done');
+			this.$refs.modal.close();
 		},
 	
 		react(reaction) {
-			this.$emit('chosen', reaction);
+			this.$emit('done', reaction);
+			this.$refs.modal.close();
 		},
 
 		reactText() {
@@ -136,6 +148,7 @@ export default Vue.extend({
 
 		&.showFocus {
 			> button:focus {
+				position: relative;
 				z-index: 1;
 
 				&:after {
diff --git a/src/client/components/reactions-viewer.details.vue b/src/client/components/reactions-viewer.details.vue
index 96d1408fc1..e6d541e7f0 100644
--- a/src/client/components/reactions-viewer.details.vue
+++ b/src/client/components/reactions-viewer.details.vue
@@ -1,28 +1,36 @@
 <template>
-<mk-tooltip :source="source" ref="tooltip">
-	<template v-if="users.length <= 10">
-		<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-			<mk-avatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-			<mk-user-name :user="u" :nowrap="false" style="line-height: 24px;"/>
-		</b>
-	</template>
-	<template v-if="10 < users.length">
-		<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-			<mk-avatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-			<mk-user-name :user="u" :nowrap="false" style="line-height: 24px;"/>
-		</b>
-		<span slot="omitted">+{{ count - 10 }}</span>
-	</template>
-</mk-tooltip>
+<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')">
+	<div class="bqxuuuey">
+		<div class="info">
+			<div>{{ reaction.replace('@.', '') }}</div>
+			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon"/>
+		</div>
+		<template v-if="users.length <= 10">
+			<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
+				<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
+				<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+			</b>
+		</template>
+		<template v-if="10 < users.length">
+			<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
+				<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
+				<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+			</b>
+			<span slot="omitted">+{{ count - 10 }}</span>
+		</template>
+	</div>
+</MkTooltip>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
+import XReactionIcon from './reaction-icon.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		MkTooltip
+		MkTooltip,
+		XReactionIcon
 	},
 	props: {
 		reaction: {
@@ -37,15 +45,30 @@ export default Vue.extend({
 			type: Number,
 			required: true,
 		},
+		emojis: {
+			type: Array,
+			required: true,
+		},
 		source: {
 			required: true,
 		}
 	},
+	emits: ['closed'],
+})
+</script>
+
+<style lang="scss" scoped>
+.bqxuuuey {
+	> .info {
+		padding: 0 0 8px 0;
+		text-align: center;
 
-	methods: {
-		close() {
-			this.$refs.tooltip.close();
+		> .icon {
+			display: block;
+			width: 60px;
+			height: 60px;
+			margin: 0 auto;
 		}
 	}
-})
-</script>
+}
+</style>
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 763f4e9e9a..62128d7e66 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -4,24 +4,25 @@
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction(reaction)"
 	v-if="count > 0"
-	@touchstart="onMouseover"
+	@touchstart.passive="onMouseover"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
 	@touchend="onMouseleave"
 	ref="reaction"
 	v-particle="canToggle"
 >
-	<x-reaction-icon :reaction="reaction" :custom-emojis="note.emojis" ref="icon"/>
+	<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
 	<span>{{ count }}</span>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XDetails from './reactions-viewer.details.vue';
-import XReactionIcon from './reaction-icon.vue';
+import { defineComponent, ref } from 'vue';
+import XDetails from '@/components/reactions-viewer.details.vue';
+import XReactionIcon from '@/components/reaction-icon.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon
 	},
@@ -45,7 +46,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			details: null,
+			close: null,
 			detailsTimeoutId: null,
 			isHovering: false
 		};
@@ -58,7 +59,7 @@ export default Vue.extend({
 	watch: {
 		count(newCount, oldCount) {
 			if (oldCount < newCount) this.anime();
-			if (this.details != null) this.openDetails();
+			if (this.close != null) this.openDetails();
 		},
 	},
 	mounted() {
@@ -70,18 +71,18 @@ export default Vue.extend({
 
 			const oldReaction = this.note.myReaction;
 			if (oldReaction) {
-				this.$root.api('notes/reactions/delete', {
+				os.api('notes/reactions/delete', {
 					noteId: this.note.id
 				}).then(() => {
 					if (oldReaction !== this.reaction) {
-						this.$root.api('notes/reactions/create', {
+						os.api('notes/reactions/create', {
 							noteId: this.note.id,
 							reaction: this.reaction
 						});
 					}
 				});
 			} else {
-				this.$root.api('notes/reactions/create', {
+				os.api('notes/reactions/create', {
 					noteId: this.note.id,
 					reaction: this.reaction
 				});
@@ -99,7 +100,7 @@ export default Vue.extend({
 			this.closeDetails();
 		},
 		openDetails() {
-			this.$root.api('notes/reactions', {
+			os.api('notes/reactions', {
 				noteId: this.note.id,
 				type: this.reaction,
 				limit: 11
@@ -110,18 +111,26 @@ export default Vue.extend({
 
 				this.closeDetails();
 				if (!this.isHovering) return;
-				this.details = this.$root.new(XDetails, {
+
+				const showing = ref(true);
+				os.popup(XDetails, {
+					showing,
 					reaction: this.reaction,
+					emojis: this.note.emojis,
 					users,
 					count: this.count,
 					source: this.$refs.reaction
-				});
+				}, {}, 'closed');
+
+				this.close = () => {
+					showing.value = false;
+				};
 			});
 		},
 		closeDetails() {
-			if (this.details != null) {
-				this.details.close();
-				this.details = null;
+			if (this.close != null) {
+				this.close();
+				this.close = null;
 			}
 		},
 		anime() {
diff --git a/src/client/components/reactions-viewer.vue b/src/client/components/reactions-viewer.vue
index 88e7df4646..df10294d04 100644
--- a/src/client/components/reactions-viewer.vue
+++ b/src/client/components/reactions-viewer.vue
@@ -1,28 +1,28 @@
 <template>
 <div class="tdflqwzn" :class="{ isMe }">
-	<x-reaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
+	<XReaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XReaction from './reactions-viewer.reaction.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReaction
 	},
-	data() {
-		return {
-			initialReactions: new Set(Object.keys(this.note.reactions))
-		};
-	},
 	props: {
 		note: {
 			type: Object,
 			required: true
 		},
 	},
+	data() {
+		return {
+			initialReactions: new Set(Object.keys(this.note.reactions))
+		};
+	},
 	computed: {
 		isMe(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId;
diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
index 21af9f766a..fe65bcd9cc 100644
--- a/src/client/components/remote-caution.vue
+++ b/src/client/components/remote-caution.vue
@@ -1,12 +1,13 @@
 <template>
-<div class="jmgmzlwq _panel"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
+<div class="jmgmzlwq _panel"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $t('remoteUserCaution') }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $t('showOnRemote') }}</a></div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		href: {
 			type: String,
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index 77e9af27e5..7548b136ea 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -4,7 +4,7 @@
 		<div class="nav-back _modalBg"
 			v-if="showing"
 			@click="showing = false"
-			@touchstart="showing = false"
+			@touchstart.passive="showing = false"
 		></div>
 	</transition>
 
@@ -12,31 +12,31 @@
 		<nav class="nav" :class="{ iconOnly, hidden }" v-show="showing">
 			<div>
 				<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
-					<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
+					<MkAvatar :user="$store.state.i" class="avatar"/><MkAcct class="text" :user="$store.state.i"/>
 				</button>
 				<button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
-					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
+					<Fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
 				</button>
 				<router-link class="item index" active-class="active" to="/" exact v-else>
-					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
+					<Fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
 				</router-link>
 				<template v-for="item in menu">
 					<div v-if="item === '-'" class="divider"></div>
-					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" @click="() => { if (menuDef[item].action) menuDef[item].action() }" :to="menuDef[item].to">
-						<fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span>
-						<i v-if="menuDef[item].indicated"><fa :icon="faCircle"/></i>
+					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}" :to="menuDef[item].to">
+						<Fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span>
+						<i v-if="menuDef[item].indicated"><Fa :icon="faCircle"/></i>
 					</component>
 				</template>
 				<div class="divider"></div>
 				<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
-					<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
+					<Fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
 				</button>
 				<button class="item _button" @click="more">
-					<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
-					<i v-if="otherNavItemIndicated"><fa :icon="faCircle"/></i>
+					<Fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
+					<i v-if="otherNavItemIndicated"><Fa :icon="faCircle"/></i>
 				</button>
-				<router-link class="item" active-class="active" to="/preferences">
-					<fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
+				<router-link class="item" active-class="active" to="/settings">
+					<Fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
 				</router-link>
 			</div>
 		</nav>
@@ -45,13 +45,15 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram, faStream } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
-import { host, instanceName } from '../config';
-import { search } from '../scripts/search';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { sidebarDef } from '@/sidebar';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			host: host,
@@ -59,9 +61,7 @@ export default Vue.extend({
 			searching: false,
 			accounts: [],
 			connection: null,
-			menuDef: this.$store.getters.nav({
-				search: this.search
-			}),
+			menuDef: sidebarDef,
 			iconOnly: false,
 			hidden: false,
 			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
@@ -127,7 +127,7 @@ export default Vue.extend({
 		search() {
 			if (this.searching) return;
 
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -141,7 +141,7 @@ export default Vue.extend({
 		},
 
 		async openAccountMenu(ev) {
-			const accounts = (await this.$root.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
+			const accounts = (await os.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
 
 			const accountItems = accounts.map(account => ({
 				type: 'user',
@@ -149,96 +149,80 @@ export default Vue.extend({
 				action: () => { this.switchAccount(account); }
 			}));
 
-			this.$root.menu({
-				items: [...[{
-					type: 'link',
-					text: this.$t('profile'),
-					to: `/@${ this.$store.state.i.username }`,
-					avatar: this.$store.state.i,
-				}, {
-					type: 'link',
-					text: this.$t('accountSettings'),
-					to: '/my/settings',
-					icon: faCog,
-				}, null, ...accountItems, {
-					icon: faPlus,
-					text: this.$t('addAcount'),
-					action: () => {
-						this.$root.menu({
-							items: [{
-								text: this.$t('existingAcount'),
-								action: () => { this.addAcount(); },
-							}, {
-								text: this.$t('createAccount'),
-								action: () => { this.createAccount(); },
-							}],
-							align: 'left',
-							fixed: true,
-							width: 240,
-							source: ev.currentTarget || ev.target,
-						});
-					},
-				}]],
-				align: 'left',
-				fixed: true,
-				width: 240,
-				source: ev.currentTarget || ev.target,
+			os.modalMenu([...[{
+				type: 'link',
+				text: this.$t('profile'),
+				to: `/@${ this.$store.state.i.username }`,
+				avatar: this.$store.state.i,
+			}, null, ...accountItems, {
+				icon: faPlus,
+				text: this.$t('addAcount'),
+				action: () => {
+					os.modalMenu([{
+						text: this.$t('existingAcount'),
+						action: () => { this.addAcount(); },
+					}, {
+						text: this.$t('createAccount'),
+						action: () => { this.createAccount(); },
+					}], ev.currentTarget || ev.target);
+				},
+			}]], ev.currentTarget || ev.target, {
+				align: 'left'
 			});
 		},
 
 		oepnInstanceMenu(ev) {
-			this.$root.menu({
-				items: [{
-					type: 'link',
-					text: this.$t('dashboard'),
-					to: '/instance',
-					icon: faTachometerAlt,
-				}, null, {
-					type: 'link',
-					text: this.$t('settings'),
-					to: '/instance/settings',
-					icon: faCog,
-				}, {
-					type: 'link',
-					text: this.$t('customEmojis'),
-					to: '/instance/emojis',
-					icon: faLaugh,
-				}, {
-					type: 'link',
-					text: this.$t('users'),
-					to: '/instance/users',
-					icon: faUsers,
-				}, {
-					type: 'link',
-					text: this.$t('files'),
-					to: '/instance/files',
-					icon: faCloud,
-				}, {
-					type: 'link',
-					text: this.$t('jobQueue'),
-					to: '/instance/queue',
-					icon: faExchangeAlt,
-				}, {
-					type: 'link',
-					text: this.$t('federation'),
-					to: '/instance/federation',
-					icon: faGlobe,
-				}, {
-					type: 'link',
-					text: this.$t('relays'),
-					to: '/instance/relays',
-					icon: faProjectDiagram,
-				}, {
-					type: 'link',
-					text: this.$t('announcements'),
-					to: '/instance/announcements',
-					icon: faBroadcastTower,
-				}],
-				align: 'left',
-				fixed: true,
-				width: 200,
-				source: ev.currentTarget || ev.target,
-			});
+			os.modalMenu([{
+				type: 'link',
+				text: this.$t('dashboard'),
+				to: '/instance',
+				icon: faTachometerAlt,
+			}, null, this.$store.state.i.isAdmin ? {
+				type: 'link',
+				text: this.$t('settings'),
+				to: '/instance/settings',
+				icon: faCog,
+			} : undefined, {
+				type: 'link',
+				text: this.$t('customEmojis'),
+				to: '/instance/emojis',
+				icon: faLaugh,
+			}, {
+				type: 'link',
+				text: this.$t('users'),
+				to: '/instance/users',
+				icon: faUsers,
+			}, {
+				type: 'link',
+				text: this.$t('files'),
+				to: '/instance/files',
+				icon: faCloud,
+			}, {
+				type: 'link',
+				text: this.$t('jobQueue'),
+				to: '/instance/queue',
+				icon: faExchangeAlt,
+			}, {
+				type: 'link',
+				text: this.$t('federation'),
+				to: '/instance/federation',
+				icon: faGlobe,
+			}, {
+				type: 'link',
+				text: this.$t('relays'),
+				to: '/instance/relays',
+				icon: faProjectDiagram,
+			}, {
+				type: 'link',
+				text: this.$t('announcements'),
+				to: '/instance/announcements',
+				icon: faBroadcastTower,
+			}, {
+				type: 'link',
+				text: this.$t('logs'),
+				to: '/instance/logs',
+				icon: faStream,
+			}], ev.currentTarget || ev.target);
 		},
 
 		more(ev) {
@@ -250,45 +234,40 @@ export default Vue.extend({
 				action: def.action,
 				indicate: def.indicated,
 			}));
-			this.$root.menu({
-				items: [...items, null, {
-					type: 'link',
-					text: this.$t('help'),
-					to: '/docs',
-					icon: faQuestionCircle,
-				}, {
-					type: 'link',
-					text: this.$t('aboutX', { x: instanceName || host }),
-					to: '/about',
-					icon: faInfoCircle,
-				}, {
-					type: 'link',
-					text: this.$t('aboutMisskey'),
-					to: '/about-misskey',
-					icon: faInfoCircle,
-				}],
-				align: 'left',
-				fixed: true,
-				width: 200,
-				source: ev.currentTarget || ev.target,
-			});
+			os.modalMenu([...items, null, {
+				type: 'link',
+				text: this.$t('help'),
+				to: '/docs',
+				icon: faQuestionCircle,
+			}, {
+				type: 'link',
+				text: this.$t('aboutX', { x: instanceName || host }),
+				to: '/about',
+				icon: faInfoCircle,
+			}, {
+				type: 'link',
+				text: this.$t('aboutMisskey'),
+				to: '/about-misskey',
+				icon: faInfoCircle,
+			}], ev.currentTarget || ev.target);
 		},
 
 		async addAcount() {
-			this.$root.new(await import('./signin-dialog.vue').then(m => m.default)).$once('login', res => {
-				this.$store.dispatch('addAcount', res);
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			});
+			os.popup(await import('./signin-dialog.vue'), {}, {
+				done: res => {
+					this.$store.dispatch('addAcount', res);
+					os.success();
+				},
+			}, 'closed');
 		},
 
 		async createAccount() {
-			this.$root.new(await import('./signup-dialog.vue').then(m => m.default)).$once('signup', res => {
-				this.$store.dispatch('addAcount', res);
-				this.switchAccountWithToken(res.i);
-			});
+			os.popup(await import('./signup-dialog.vue'), {}, {
+				done: res => {
+					this.$store.dispatch('addAcount', res);
+					this.switchAccountWithToken(res.i);
+				},
+			}, 'closed');
 		},
 
 		async switchAccount(account: any) {
@@ -297,12 +276,9 @@ export default Vue.extend({
 		},
 
 		switchAccountWithToken(token: string) {
-			this.$root.dialog({
-				type: 'waiting',
-				iconOnly: true
-			});
+			os.waiting();
 
-			this.$root.api('i', {}, token).then((i: any) => {
+			os.api('i', {}, token).then((i: any) => {
 				this.$store.dispatch('switchAccount', {
 					...i,
 					token: token
@@ -324,7 +300,7 @@ export default Vue.extend({
 	transform: translateX(0);
 	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.nav-enter,
+.nav-enter-from,
 .nav-leave-active {
 	opacity: 0;
 	transform: translateX(-240px);
@@ -335,7 +311,7 @@ export default Vue.extend({
 	opacity: 1;
 	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.nav-back-enter,
+.nav-back-enter-from,
 .nav-back-leave-active {
 	opacity: 0;
 }
diff --git a/src/client/components/signin-dialog.vue b/src/client/components/signin-dialog.vue
index 98b75e627c..3a820c8f96 100644
--- a/src/client/components/signin-dialog.vue
+++ b/src/client/components/signin-dialog.vue
@@ -1,19 +1,27 @@
 <template>
-<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }">
+<XModalWindow ref="dialog"
+	:width="370"
+	:height="400"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
 	<template #header>{{ $t('login') }}</template>
-	<mk-signin :auto-set="autoSet" @login="onLogin"/>
-</x-window>
+
+	<div class="_section">
+		<MkSignin :auto-set="autoSet" @login="onLogin"/>
+	</div>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XWindow from './window.vue';
+import { defineComponent } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkSignin from './signin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSignin,
-		XWindow,
+		XModalWindow,
 	},
 
 	props: {
@@ -24,10 +32,12 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	methods: {
 		onLogin(res) {
-			this.$emit('login', res);
-			this.$refs.window.close();
+			this.$emit('done', res);
+			this.$refs.dialog.close();
 		}
 	}
 });
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index a7653b17b0..b02ef2e940 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -2,57 +2,58 @@
 <form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<div class="normal-signin" v-if="!totpLogin">
-		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
+		<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
-		</mk-input>
-		<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
+		</MkInput>
+		<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 			<span>{{ $t('password') }}</span>
-			<template #prefix><fa :icon="faLock"/></template>
-		</mk-input>
-		<mk-button type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</mk-button>
-		<a class="_panel _button" style="margin: 8px auto;" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a class="_panel _button" style="margin: 8px auto;" v-if="meta && meta.enableGithubIntegration"  :href="`${apiUrl}/signin/github`"><fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a class="_panel _button" style="margin: 8px auto;" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+			<template #prefix><Fa :icon="faLock"/></template>
+		</MkInput>
+		<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</MkButton>
+		<a class="_panelButton" style="margin: 8px auto;" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a class="_panelButton" style="margin: 8px auto;" v-if="meta && meta.enableGithubIntegration"  :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a class="_panelButton" style="margin: 8px auto;" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 	<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
 		<div v-if="user && user.securityKeys" class="twofa-group tap-group">
 			<p>{{ $t('tapSecurityKey') }}</p>
-			<mk-button @click="queryKey" v-if="!queryingKey">
+			<MkButton @click="queryKey" v-if="!queryingKey">
 				{{ $t('retry') }}
-			</mk-button>
+			</MkButton>
 		</div>
 		<div class="or-hr" v-if="user && user.securityKeys">
 			<p class="or-msg">{{ $t('or') }}</p>
 		</div>
 		<div class="twofa-group totp-group">
 			<p style="margin-bottom:0;">{{ $t('twoStepAuthentication') }}</p>
-			<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+			<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
 				<span>{{ $t('password') }}</span>
-				<template #prefix><fa :icon="faLock"/></template>
-			</mk-input>
-			<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
+				<template #prefix><Fa :icon="faLock"/></template>
+			</MkInput>
+			<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
 				<span>{{ $t('token') }}</span>
-				<template #prefix><fa :icon="faGavel"/></template>
-			</mk-input>
-			<mk-button type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</mk-button>
+				<template #prefix><Fa :icon="faGavel"/></template>
+			</MkInput>
+			<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $t('loggingIn') : $t('login') }}</MkButton>
 		</div>
 	</div>
 </form>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
-import { apiUrl, host } from '../config';
-import { byteify, hexify } from '../scripts/2fa';
+import { apiUrl, host } from '@/config';
+import { byteify, hexify } from '@/scripts/2fa';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
@@ -71,6 +72,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['login'],
+
 	data() {
 		return {
 			signing: false,
@@ -94,18 +97,9 @@ export default Vue.extend({
 		},
 	},
 
-	created() {
-		if (this.autoSet) {
-			this.$once('login', res => {
-				localStorage.setItem('i', res.i);
-				location.reload();
-			});
-		}
-	},
-
 	methods: {
 		onUsernameChange() {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				username: this.username
 			}).then(user => {
 				this.user = user;
@@ -114,6 +108,13 @@ export default Vue.extend({
 			});
 		},
 
+		onLogin(res) {
+			if (this.autoSet) {
+				localStorage.setItem('i', res.i);
+				location.reload();
+			}
+		},
+
 		queryKey() {
 			this.queryingKey = true;
 			return navigator.credentials.get({
@@ -132,7 +133,7 @@ export default Vue.extend({
 			}).then(credential => {
 				this.queryingKey = false;
 				this.signing = true;
-				return this.$root.api('signin', {
+				return os.api('signin', {
 					username: this.username,
 					password: this.password,
 					signature: hexify(credential.response.signature),
@@ -143,9 +144,10 @@ export default Vue.extend({
 				});
 			}).then(res => {
 				this.$emit('login', res);
+				this.onLogin(res);
 			}).catch(err => {
 				if (err === null) return;
-				this.$root.dialog({
+				os.dialog({
 					type: 'error',
 					text: this.$t('signinFailed')
 				});
@@ -157,7 +159,7 @@ export default Vue.extend({
 			this.signing = true;
 			if (!this.totpLogin && this.user && this.user.twoFactorEnabled) {
 				if (window.PublicKeyCredential && this.user.securityKeys) {
-					this.$root.api('signin', {
+					os.api('signin', {
 						username: this.username,
 						password: this.password
 					}).then(res => {
@@ -166,7 +168,7 @@ export default Vue.extend({
 						this.challengeData = res;
 						return this.queryKey();
 					}).catch(() => {
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('signinFailed')
 						});
@@ -179,14 +181,15 @@ export default Vue.extend({
 					this.signing = false;
 				}
 			} else {
-				this.$root.api('signin', {
+				os.api('signin', {
 					username: this.username,
 					password: this.password,
 					token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 				}).then(res => {
 					this.$emit('login', res);
+					this.onLogin(res);
 				}).catch(() => {
-					this.$root.dialog({
+					os.dialog({
 						type: 'error',
 						text: this.$t('loginFailed')
 					});
diff --git a/src/client/components/signup-dialog.vue b/src/client/components/signup-dialog.vue
index eff1f79c48..eb0c40523b 100644
--- a/src/client/components/signup-dialog.vue
+++ b/src/client/components/signup-dialog.vue
@@ -1,19 +1,27 @@
 <template>
-<x-window ref="window" :width="366" :height="506" @closed="() => { $emit('closed'); destroyDom(); }">
+<XModalWindow ref="dialog"
+	:width="366"
+	:height="500"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
 	<template #header>{{ $t('signup') }}</template>
-	<x-signup :auto-set="autoSet" @signup="onSignup"/>
-</x-window>
+
+	<div class="_section">
+		<XSignup :auto-set="autoSet" @signup="onSignup"/>
+	</div>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XWindow from './window.vue';
+import { defineComponent } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import XSignup from './signup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSignup,
-		XWindow,
+		XModalWindow,
 	},
 
 	props: {
@@ -24,10 +32,12 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	methods: {
 		onSignup(res) {
-			this.$emit('signup', res);
-			this.$refs.window.close();
+			this.$emit('done', res);
+			this.$refs.dialog.close();
 		}
 	}
 });
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index ff1932b42d..3337330430 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -1,71 +1,82 @@
 <template>
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
-		<mk-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+		<MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<span>{{ $t('invitationCode') }}</span>
-			<template #prefix><fa :icon="faKey"/></template>
-		</mk-input>
-		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
+			<template #prefix><Fa :icon="faKey"/></template>
+		</MkInput>
+		<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #desc>
-				<span v-if="usernameState == 'wait'" style="color:#999"><fa :icon="faSpinner" pulse fixed-width/> {{ $t('checking') }}</span>
-				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('available') }}</span>
-				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('unavailable') }}</span>
-				<span v-if="usernameState == 'error'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('error') }}</span>
-				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('usernameInvalidFormat') }}</span>
-				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooShort') }}</span>
-				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span>
+				<span v-if="usernameState == 'wait'" style="color:#999"><Fa :icon="faSpinner" pulse fixed-width/> {{ $t('checking') }}</span>
+				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $t('available') }}</span>
+				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('unavailable') }}</span>
+				<span v-if="usernameState == 'error'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('error') }}</span>
+				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('usernameInvalidFormat') }}</span>
+				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooShort') }}</span>
+				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span>
 			</template>
-		</mk-input>
-		<mk-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword">
+		</MkInput>
+		<MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
 			<span>{{ $t('password') }}</span>
-			<template #prefix><fa :icon="faLock"/></template>
+			<template #prefix><Fa :icon="faLock"/></template>
 			<template #desc>
-				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('weakPassword') }}</p>
-				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('normalPassword') }}</p>
-				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p>
+				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('weakPassword') }}</p>
+				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $t('normalPassword') }}</p>
+				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p>
 			</template>
-		</mk-input>
-		<mk-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
+		</MkInput>
+		<MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
 			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
-			<template #prefix><fa :icon="faLock"/></template>
+			<template #prefix><Fa :icon="faLock"/></template>
 			<template #desc>
-				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('passwordMatched') }}</p>
-				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('passwordNotMatched') }}</p>
+				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $t('passwordMatched') }}</p>
+				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $t('passwordNotMatched') }}</p>
 			</template>
-		</mk-input>
-		<mk-switch v-model="ToSAgreement" v-if="meta.tosUrl">
-			<i18n path="agreeTo">
+		</MkInput>
+		<MkSwitch v-model:value="ToSAgreement" v-if="meta.tosUrl">
+			<i18n-t keypath="agreeTo">
 				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
-			</i18n>
-		</mk-switch>
-		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
-		<mk-button type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</mk-button>
+			</i18n-t>
+		</MkSwitch>
+		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</MkButton>
 	</template>
 </form>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode';
-import { host, url } from '../config';
+import { host, url } from '@/config';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import MkSwitch from './ui/switch.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
 		MkSwitch,
-		captcha: () => import('./captcha.vue').then(x => x.default),
+		captcha: defineAsyncComponent(() => import('./captcha.vue')),
 	},
 
+	props: {
+		autoSet: {
+			type: Boolean,
+			required: false,
+			default: false,
+		}
+	},
+
+	emits: ['signup'],
+
 	data() {
 		return {
 			host: toUnicode(host),
@@ -85,14 +96,6 @@ export default Vue.extend({
 		}
 	},
 
-	props: {
-		autoSet: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
 	computed: {
 		meta() {
 			return this.$store.state.instance.meta;
@@ -114,15 +117,6 @@ export default Vue.extend({
 		}
 	},
 
-	created() {
-		if (this.autoSet) {
-			this.$once('signup', res => {
-				localStorage.setItem('i', res.i);
-				location.reload();
-			});
-		}
-	},
-
 	methods: {
 		onChangeUsername() {
 			if (this.username == '') {
@@ -143,7 +137,7 @@ export default Vue.extend({
 
 			this.usernameState = 'wait';
 
-			this.$root.api('username/available', {
+			os.api('username/available', {
 				username: this.username
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
@@ -175,27 +169,32 @@ export default Vue.extend({
 			if (this.submitting) return;
 			this.submitting = true;
 
-			this.$root.api('signup', {
+			os.api('signup', {
 				username: this.username,
 				password: this.password,
 				invitationCode: this.invitationCode,
 				'hcaptcha-response': this.hCaptchaResponse,
 				'g-recaptcha-response': this.reCaptchaResponse,
 			}).then(() => {
-				this.$root.api('signin', {
+				os.api('signin', {
 					username: this.username,
 					password: this.password
 				}).then(res => {
 					this.$emit('signup', res);
+
+					if (this.autoSet) {
+						localStorage.setItem('i', res.i);
+						location.reload();
+					}
 				});
 			}).catch(() => {
 				this.submitting = false;
 				this.$refs.hcaptcha?.reset?.();
 				this.$refs.recaptcha?.reset?.();
 
-				this.$root.dialog({
+				os.dialog({
 					type: 'error',
-					text: this.$t('error')
+					text: this.$t('somethingHappened')
 				});
 			});
 		}
@@ -205,8 +204,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-signup {
-	padding: 32px 0 0;
-
 	.captcha {
 		margin: 16px 0;
 	}
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
index 9005cb9a8b..7b020171a4 100644
--- a/src/client/components/stream-indicator.vue
+++ b/src/client/components/stream-indicator.vue
@@ -9,9 +9,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			hasDisconnected: false,
@@ -19,14 +20,14 @@ export default Vue.extend({
 	},
 	computed: {
 		stream() {
-			return this.$root.stream;
+			return os.stream;
 		},
 	},
 	created() {
-		this.$root.stream.on('_disconnected_', this.onDisconnected);
+		os.stream.on('_disconnected_', this.onDisconnected);
 	},
-	beforeDestroy() {
-		this.$root.stream.off('_disconnected_', this.onDisconnected);
+	beforeUnmount() {
+		os.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
 		onDisconnected() {
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index a14c832ea8..0bef072fe4 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -3,28 +3,29 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $t('deleted') }})</span>
-		<router-link class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><fa :icon="faReply"/></router-link>
-		<mfm v-if="note.text" :text="note.text" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis"/>
+		<router-link class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><Fa :icon="faReply"/></router-link>
+		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis"/>
 		<router-link class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</router-link>
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<x-media-list :media-list="note.files"/>
+		<XMediaList :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ $t('poll') }}</summary>
-		<x-poll :note="note"/>
+		<XPoll :note="note"/>
 	</details>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPoll,
 		XMediaList,
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index a10c7fdbf3..642dbb0e61 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -1,13 +1,13 @@
 <template>
 <div class="pxhvhrfw" v-size="{ max: [500] }">
-	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
+	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :key="item.value"><Fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,
@@ -23,10 +23,12 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .pxhvhrfw {
 	display: flex;
+	max-width: var(--baseContentWidth);
+	margin: 0 auto;
 
 	> button {
 		flex: 1;
-		padding: 11px 8px 8px 8px;
+		padding: 15px 12px 12px 12px;
 		border-bottom: solid 3px transparent;
 
 		&.active {
@@ -41,6 +43,10 @@ export default Vue.extend({
 
 	&.max-width_500px {
 		font-size: 80%;
+
+		> button {
+			padding: 11px 8px 8px 8px;
+		}
 	}
 }
 </style>
diff --git a/src/client/components/time.vue b/src/client/components/time.vue
index e84f0aa25c..3219373739 100644
--- a/src/client/components/time.vue
+++ b/src/client/components/time.vue
@@ -1,15 +1,15 @@
 <template>
 <time class="mk-time" :title="absolute">
-	<span v-if="mode == 'relative'">{{ relative }}</span>
-	<span v-if="mode == 'absolute'">{{ absolute }}</span>
-	<span v-if="mode == 'detail'">{{ absolute }} ({{ relative }})</span>
+	<template v-if="mode == 'relative'">{{ relative }}</template>
+	<template v-else-if="mode == 'absolute'">{{ absolute }}</template>
+	<template v-else-if="mode == 'detail'">{{ absolute }} ({{ relative }})</template>
 </time>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		time: {
 			type: [Date, String],
@@ -54,7 +54,7 @@ export default Vue.extend({
 			this.tickId = window.requestAnimationFrame(this.tick);
 		}
 	},
-	destroyed() {
+	unmounted() {
 		if (this.mode === 'relative' || this.mode === 'detail') {
 			window.clearTimeout(this.tickId);
 		}
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index cd78d53cfc..930f47b1a5 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -1,16 +1,23 @@
 <template>
-<x-notes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotes from './notes.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotes
 	},
 
+	provide() {
+		return {
+			inChannel: this.src === 'channel'
+		};
+	},
+
 	props: {
 		src: {
 			type: String,
@@ -35,11 +42,7 @@ export default Vue.extend({
 		}
 	},
 
-	provide() {
-		return {
-			inChannel: this.src === 'channel'
-		};
-	},
+	emits: ['note', 'queue', 'before', 'after'],
 
 	data() {
 		return {
@@ -56,18 +59,13 @@ export default Vue.extend({
 	},
 
 	created() {
-		this.$once('hook:beforeDestroy', () => {
-			this.connection.dispose();
-			if (this.connection2) this.connection2.dispose();
-		});
-
 		const prepend = note => {
 			(this.$refs.tl as any).prepend(note);
 
 			this.$emit('note');
 
 			if (this.sound) {
-				this.$root.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
+				os.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
 			}
 		};
 
@@ -92,36 +90,36 @@ export default Vue.extend({
 			this.query = {
 				antennaId: this.antenna
 			};
-			this.connection = this.$root.stream.connectToChannel('antenna', {
+			this.connection = os.stream.connectToChannel('antenna', {
 				antennaId: this.antenna
 			});
 			this.connection.on('note', prepend);
 		} else if (this.src == 'home') {
 			endpoint = 'notes/timeline';
-			this.connection = this.$root.stream.useSharedConnection('homeTimeline');
+			this.connection = os.stream.useSharedConnection('homeTimeline');
 			this.connection.on('note', prepend);
 
-			this.connection2 = this.$root.stream.useSharedConnection('main');
+			this.connection2 = os.stream.useSharedConnection('main');
 			this.connection2.on('follow', onChangeFollowing);
 			this.connection2.on('unfollow', onChangeFollowing);
 		} else if (this.src == 'local') {
 			endpoint = 'notes/local-timeline';
-			this.connection = this.$root.stream.useSharedConnection('localTimeline');
+			this.connection = os.stream.useSharedConnection('localTimeline');
 			this.connection.on('note', prepend);
 		} else if (this.src == 'social') {
 			endpoint = 'notes/hybrid-timeline';
-			this.connection = this.$root.stream.useSharedConnection('hybridTimeline');
+			this.connection = os.stream.useSharedConnection('hybridTimeline');
 			this.connection.on('note', prepend);
 		} else if (this.src == 'global') {
 			endpoint = 'notes/global-timeline';
-			this.connection = this.$root.stream.useSharedConnection('globalTimeline');
+			this.connection = os.stream.useSharedConnection('globalTimeline');
 			this.connection.on('note', prepend);
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {
 				listId: this.list
 			};
-			this.connection = this.$root.stream.connectToChannel('userList', {
+			this.connection = os.stream.connectToChannel('userList', {
 				listId: this.list
 			});
 			this.connection.on('note', prepend);
@@ -132,7 +130,7 @@ export default Vue.extend({
 			this.query = {
 				channelId: this.channel
 			};
-			this.connection = this.$root.stream.connectToChannel('channel', {
+			this.connection = os.stream.connectToChannel('channel', {
 				channelId: this.channel
 			});
 			this.connection.on('note', prepend);
@@ -148,6 +146,11 @@ export default Vue.extend({
 		};
 	},
 
+	beforeUnmount() {
+		this.connection.dispose();
+		if (this.connection2) this.connection2.dispose();
+	},
+
 	methods: {
 		focus() {
 			this.$refs.tl.focus();
diff --git a/src/client/components/toast.vue b/src/client/components/toast.vue
index fefe91e3bd..fb0de68092 100644
--- a/src/client/components/toast.vue
+++ b/src/client/components/toast.vue
@@ -1,16 +1,16 @@
 <template>
 <div class="mk-toast">
-	<transition name="notification-slide" appear @after-leave="() => { destroyDom(); }">
-		<x-notification :notification="notification" class="notification" v-if="show"/>
+	<transition name="notification-slide" appear @after-leave="$emit('closed')">
+		<XNotification :notification="notification" class="notification _acrylic" v-if="showing"/>
 	</transition>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotification from './notification.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification
 	},
@@ -20,14 +20,15 @@ export default Vue.extend({
 			required: true
 		}
 	},
+	emits: ['closed'],
 	data() {
 		return {
-			show: true
+			showing: true
 		};
 	},
 	mounted() {
 		setTimeout(() => {
-			this.show = false;
+			this.showing = false;
 		}, 6000);
 	}
 });
@@ -37,7 +38,7 @@ export default Vue.extend({
 .notification-slide-enter-active, .notification-slide-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-slide-enter, .notification-slide-leave-to {
+.notification-slide-enter-from, .notification-slide-leave-to {
 	opacity: 0;
 	transform: translateX(-250px);
 }
@@ -64,12 +65,8 @@ export default Vue.extend({
 
 	> .notification {
 		height: 100%;
-		-webkit-backdrop-filter: blur(12px);
-		backdrop-filter: blur(12px);
-		background-color: var(--toastBg);
 		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 		border-radius: 8px;
-		color: var(--toastFg);
 		overflow: hidden;
 	}
 }
diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue
index 51358d71bc..b46bb67b0f 100644
--- a/src/client/components/token-generate-window.vue
+++ b/src/client/components/token-generate-window.vue
@@ -1,36 +1,43 @@
 <template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
+<XModalWindow ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	:can-close="false"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+	@ok="ok()"
+>
 	<template #header>{{ title || $t('generateAccessToken') }}</template>
-	<div class="ugkkpisj">
-		<div v-if="information">
-			<mk-info warn>{{ information }}</mk-info>
-		</div>
-		<div>
-			<mk-input v-model="name">{{ $t('name') }}</mk-input>
-		</div>
-		<div>
-			<div style="margin-bottom: 16px;"><b>{{ $t('permission') }}</b></div>
-			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
-			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
-			<mk-switch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</mk-switch>
-		</div>
+	<div v-if="information" class="_section">
+		<MkInfo warn>{{ information }}</MkInfo>
 	</div>
-</x-window>
+	<div class="_section">
+		<MkInput v-model:value="name">{{ $t('name') }}</MkInput>
+	</div>
+	<div class="_section">
+		<div style="margin-bottom: 16px;"><b>{{ $t('permission') }}</b></div>
+		<MkButton inline @click="disableAll">{{ $t('disableAll') }}</MkButton>
+		<MkButton inline @click="enableAll">{{ $t('enableAll') }}</MkButton>
+		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model:value="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
+	</div>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { kinds } from '../../misc/api-permissions';
-import XWindow from './window.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XWindow,
+		XModalWindow,
 		MkInput,
 		MkTextarea,
 		MkSwitch,
@@ -61,6 +68,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			name: this.initialName,
@@ -72,22 +81,22 @@ export default Vue.extend({
 	created() {
 		if (this.initialPermissions) {
 			for (const kind of this.initialPermissions) {
-				Vue.set(this.permissions, kind, true);
+				this.permissions[kind] = true;
 			}
 		} else {
 			for (const kind of this.kinds) {
-				Vue.set(this.permissions, kind, false);
+				this.permissions[kind] = false;
 			}
 		}
 	},
 
 	methods: {
 		ok() {
-			this.$emit('ok', {
+			this.$emit('done', {
 				name: this.name,
 				permissions: Object.keys(this.permissions).filter(p => this.permissions[p])
 			});
-			this.$refs.window.close();
+			this.$refs.dialog.close();
 		},
 
 		disableAll() {
@@ -104,12 +113,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-.ugkkpisj {
-	> div {
-		padding: 24px;
-		border-top: solid 1px var(--divider);
-	}
-}
-</style>
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index e5abf37be3..58b0f7b6d0 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
 <component class="bghgjjyj _button"
 	:is="link ? 'a' : 'button'"
-	:class="{ inline, primary }"
+	:class="{ inline, primary, danger, full }"
 	:type="type"
 	@click="$emit('click', $event)"
 	@mousedown="onMousedown"
@@ -14,8 +14,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
@@ -46,7 +47,18 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+		danger: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		full: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
+	emits: ['click'],
 	mounted() {
 		if (this.autofocus) {
 			this.$nextTick(() => {
@@ -100,6 +112,7 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .bghgjjyj {
 	position: relative;
+	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
 	padding: 8px 14px;
@@ -121,6 +134,10 @@ export default Vue.extend({
 		background: var(--buttonHoverBg);
 	}
 
+	&.full {
+		width: 100%;
+	}
+
 	&.primary {
 		color: #fff;
 		background: var(--accent);
@@ -134,6 +151,23 @@ export default Vue.extend({
 		}
 	}
 
+	&.danger {
+		color: #ff2a2a;
+
+		&.primary {
+			color: #fff;
+			background: #ff2a2a;
+
+			&:not(:disabled):hover {
+				background: #ff4242;
+			}
+
+			&:not(:disabled):active {
+				background: #d42e2e;
+			}
+		}
+	}
+
 	&:disabled {
 		opacity: 0.7;
 	}
@@ -180,7 +214,7 @@ export default Vue.extend({
 		border-radius: 6px;
 		overflow: hidden;
 
-		::v-deep div {
+		::v-deep(div) {
 			position: absolute;
 			width: 2px;
 			height: 2px;
@@ -192,7 +226,7 @@ export default Vue.extend({
 		}
 	}
 
-	&.primary > .ripples ::v-deep div {
+	&.primary > .ripples ::v-deep(div) {
 		background: rgba(0, 0, 0, 0.15);
 	}
 
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 382dd76eff..a47b174e8c 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380], el: resizeBaseEl }">
+<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
 	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
 			<slot name="func"></slot>
 			<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
-				<template v-if="showBody"><fa :icon="faAngleUp"/></template>
-				<template v-else><fa :icon="faAngleDown"/></template>
+				<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
+				<template v-else><Fa :icon="faAngleDown"/></template>
 			</button>
 		</div>
 	</header>
@@ -24,10 +24,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		showHeader: {
 			type: Boolean,
@@ -54,9 +54,6 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
-		resizeBaseEl: {
-			required: false,
-		},
 	},
 	data() {
 		return {
@@ -66,11 +63,12 @@ export default Vue.extend({
 	},
 	mounted() {
 		this.$watch('showBody', showBody => {
-			this.$el.style.minHeight = `${this.$refs.header.offsetHeight}px`;
+			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
+			this.$el.style.minHeight = `${headerHeight}px`;
 			if (showBody) {
 				this.$el.style.flexBasis = `auto`;
 			} else {
-				this.$el.style.flexBasis = `${this.$refs.header.offsetHeight}px`;
+				this.$el.style.flexBasis = `${headerHeight}px`;
 			}
 		}, {
 			immediate: true
@@ -109,7 +107,7 @@ export default Vue.extend({
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.container-toggle-enter {
+.container-toggle-enter-from {
 	opacity: 0;
 }
 .container-toggle-leave-to {
@@ -138,15 +136,13 @@ export default Vue.extend({
 		position: relative;
 		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
 		z-index: 2;
-		background: var(--panelHeaderBg);
-		color: var(--panelHeaderFg);
 		line-height: 1.4em;
 
 		> .title {
 			margin: 0;
 			padding: 12px 16px;
 
-			> [data-icon] {
+			> ::v-deep([data-icon]) {
 				margin-right: 6px;
 			}
 
@@ -162,7 +158,7 @@ export default Vue.extend({
 			right: 0;
 			height: 100%;
 
-			> button {
+			> ::v-deep(button) {
 				width: 42px;
 				height: 100%;
 			}
@@ -170,7 +166,7 @@ export default Vue.extend({
 	}
 
 	> div {
-		> ::v-deep ._content {
+		> ::v-deep(._content) {
 			padding: 24px;
 
 			& + ._content {
@@ -187,7 +183,7 @@ export default Vue.extend({
 		}
 
 		> div {
-			> ::v-deep ._content {
+			> ::v-deep(._content) {
 				padding: 16px;
 			}
 		}
diff --git a/src/client/components/ui/context-menu.vue b/src/client/components/ui/context-menu.vue
new file mode 100644
index 0000000000..98586cf3fe
--- /dev/null
+++ b/src/client/components/ui/context-menu.vue
@@ -0,0 +1,63 @@
+<template>
+<div class="nvlagfpb">
+	<MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import contains from '@/scripts/contains';
+import MkMenu from './menu.vue';
+
+export default defineComponent({
+	components: {
+		MkMenu,
+	},
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		ev: {
+			required: true
+		},
+		viaKeyboard: {
+			type: Boolean,
+			required: false
+		},
+	},
+	emits: ['closed'],
+	computed: {
+		keymap(): any {
+			return {
+				'esc': () => this.$emit('closed'),
+			};
+		},
+	},
+	mounted() {
+		this.$el.style.top = this.ev.pageY + 'px';
+		this.$el.style.left = this.ev.pageX + 'px';
+
+		for (const el of Array.from(document.querySelectorAll('body *'))) {
+			el.addEventListener('mousedown', this.onMousedown);
+		}
+	},
+	beforeUnmount() {
+		for (const el of Array.from(document.querySelectorAll('body *'))) {
+			el.removeEventListener('mousedown', this.onMousedown);
+		}
+	},
+	methods: {
+		onMousedown(e) {
+			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.$emit('closed');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nvlagfpb {
+	position: absolute;
+	z-index: 65535;
+}
+</style>
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index 0b489fe9ad..1eaf881ffe 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="ssazuxis" v-size="{ max: [500] }">
-	<header @click="() => showBody = !showBody" class="_button">
+	<header @click="showBody = !showBody" class="_button">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">
-			<template v-if="showBody"><fa :icon="faAngleUp"/></template>
-			<template v-else><fa :icon="faAngleDown"/></template>
+			<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
+			<template v-else><Fa :icon="faAngleDown"/></template>
 		</button>
 	</header>
 	<transition name="folder-toggle"
@@ -22,23 +22,37 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+const localStoragePrefix = 'ui:folder:';
+
+export default defineComponent({
 	props: {
 		expanded: {
 			type: Boolean,
 			required: false,
 			default: true
 		},
+		persistKey: {
+			type: String,
+			required: false,
+			default: null
+		},
 	},
 	data() {
 		return {
-			showBody: this.expanded,
+			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
 			faAngleUp, faAngleDown
 		};
 	},
+	watch: {
+		showBody() {
+			if (this.persistKey) {
+				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
+			}
+		}
+	},
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
@@ -71,7 +85,7 @@ export default Vue.extend({
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
-.folder-toggle-enter {
+.folder-toggle-enter-from {
 	opacity: 0;
 }
 .folder-toggle-leave-to {
@@ -92,7 +106,7 @@ export default Vue.extend({
 
 		> .title {
 			margin: 0;
-			padding: 12px 16px 12px 8px;
+			padding: 12px 16px 12px 0;
 
 			> [data-icon] {
 				margin-right: 6px;
@@ -111,7 +125,7 @@ export default Vue.extend({
 		}
 
 		> button {
-			width: 42px;
+			padding: 12px 0 12px 16px;
 		}
 	}
 
diff --git a/src/client/components/ui/hr.vue b/src/client/components/ui/hr.vue
index ae7f7dbf8e..6b075cb440 100644
--- a/src/client/components/ui/hr.vue
+++ b/src/client/components/ui/hr.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({});
+import { defineComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/client/components/ui/info.vue b/src/client/components/ui/info.vue
index 3e87fe261d..3bdb69b3d1 100644
--- a/src/client/components/ui/info.vue
+++ b/src/client/components/ui/info.vue
@@ -1,16 +1,17 @@
 <template>
 <div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn"><fa :icon="faExclamationTriangle"/></i>
-	<i v-else><fa :icon="faInfoCircle"/></i>
+	<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
+	<i v-else><Fa :icon="faInfoCircle"/></i>
 	<slot></slot>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		warn: {
 			type: Boolean,
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index f9c2d9a43a..dec4a08712 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -2,66 +2,51 @@
 <div class="juejbjww" :class="{ focused, filled, inline, disabled }">
 	<div class="icon" ref="icon"><slot name="icon"></slot></div>
 	<div class="input">
-		<span class="label" ref="label"><slot></slot></span>
+		<span class="label" ref="labelEl"><slot></slot></span>
 		<span class="title" ref="title">
 			<slot name="title"></slot>
-			<span class="warning" v-if="invalid"><fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
+			<span class="warning" v-if="invalid"><Fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
 		</span>
-		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
-		<template v-if="type != 'file'">
-			<input v-if="debounce" ref="input"
-				v-debounce="500"
-				:type="type"
-				v-model.lazy="v"
-				:disabled="disabled"
-				:required="required"
-				:readonly="readonly"
-				:placeholder="placeholder"
-				:pattern="pattern"
-				:autocomplete="autocomplete"
-				:spellcheck="spellcheck"
-				:step="step"
-				@focus="focused = true"
-				@blur="focused = false"
-				@keydown="$emit('keydown', $event)"
-				@input="onInput"
-				:list="id"
-			>
-			<input v-else ref="input"
-				:type="type"
-				v-model="v"
-				:disabled="disabled"
-				:required="required"
-				:readonly="readonly"
-				:placeholder="placeholder"
-				:pattern="pattern"
-				:autocomplete="autocomplete"
-				:spellcheck="spellcheck"
-				:step="step"
-				@focus="focused = true"
-				@blur="focused = false"
-				@keydown="$emit('keydown', $event)"
-				@input="onInput"
-				:list="id"
-			>
-			<datalist :id="id" v-if="datalist">
-				<option v-for="data in datalist" :value="data"/>
-			</datalist>
-		</template>
-		<template v-else>
-			<input ref="input"
-				type="text"
-				:value="filePlaceholder"
-				readonly
-				@click="chooseFile"
-			>
-			<input ref="file"
-				type="file"
-				:value="value"
-				@change="onChangeFile"
-			>
-		</template>
-		<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<input v-if="debounce" ref="inputEl"
+			v-debounce="500"
+			:type="type"
+			v-model.lazy="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+			:list="id"
+		>
+		<input v-else ref="inputEl"
+			:type="type"
+			v-model="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+			:list="id"
+		>
+		<datalist :id="id" v-if="datalist">
+			<option v-for="data in datalist" :value="data"/>
+		</datalist>
+		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
 	</div>
 	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $t('save') }}</button>
 	<div class="desc _caption"><slot name="desc"></slot></div>
@@ -69,11 +54,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
 import debounce from 'v-debounce';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	directives: {
 		debounce
 	},
@@ -136,106 +122,92 @@ export default Vue.extend({
 			required: false,
 		},
 	},
-	data() {
-		return {
-			v: this.value,
-			focused: false,
-			invalid: false,
-			changed: false,
-			id: Math.random().toString(),
-			faExclamationCircle
+	emits: ['change', 'keydown', 'enter'],
+	setup(props, context) {
+		const { value, type, autofocus } = toRefs(props);
+		const v = ref(value.value);
+		const id = Math.random().toString(); // TODO: uuid?
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+		const prefixEl = ref(null);
+		const suffixEl = ref(null);
+		const labelEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
 		};
-	},
-	computed: {
-		filled(): boolean {
-			return this.v !== '' && this.v != null;
-		},
-		filePlaceholder(): string | null {
-			if (this.type != 'file') return null;
-			if (this.v == null) return null;
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
 
-			if (typeof this.v == 'string') return this.v;
-
-			if (Array.isArray(this.v)) {
-				return this.v.map(file => file.name).join(', ');
-			} else {
-				return this.v.name;
+			if (ev.code === 'Enter') {
+				context.emit('enter');
 			}
-		}
-	},
-	watch: {
-		value(v) {
-			this.v = v;
-		},
-		v(v) {
-			if (this.type === 'number') {
-				this.$emit('input', parseFloat(v));
+		};
+
+		watch(value, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (type?.value === 'number') {
+				context.emit('update:value', parseFloat(newValue));
 			} else {
-				this.$emit('input', v);
+				context.emit('update:value', newValue);
 			}
 
-			this.invalid = this.$refs.input.validity.badInput;
-		}
-	},
-	mounted() {
-		if (this.autofocus) {
-			this.$nextTick(() => {
-				this.$refs.input.focus();
-			});
-		}
+			invalid.value = inputEl.value.validity.badInput;
+		});
 
-		this.$nextTick(() => {
-			// このコンポーネントが作成された時、非表示状態である場合がある
-			// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-			const clock = setInterval(() => {
-				if (this.$refs.prefix) {
-					this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
-					if (this.$refs.prefix.offsetWidth) {
-						this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
-					}
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
 				}
-				if (this.$refs.suffix) {
-					if (this.$refs.suffix.offsetWidth) {
-						this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
+
+				// このコンポーネントが作成された時、非表示状態である場合がある
+				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+				const clock = setInterval(() => {
+					if (prefixEl.value) {
+						labelEl.value.style.left = (prefixEl.value.offsetLeft + prefixEl.value.offsetWidth) + 'px';
+						if (prefixEl.value.offsetWidth) {
+							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+						}
 					}
-				}
-			}, 100);
+					if (suffixEl.value) {
+						if (suffixEl.value.offsetWidth) {
+							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+						}
+					}
+				}, 100);
 
-			this.$once('hook:beforeDestroy', () => {
-				clearInterval(clock);
+				onUnmounted(() => {
+					clearInterval(clock);
+				});
 			});
 		});
 
-		this.$on('keydown', (e: KeyboardEvent) => {
-			if (e.code == 'Enter') {
-				this.$emit('enter');
-			}
-		});
+		return {
+			id,
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			prefixEl,
+			suffixEl,
+			labelEl,
+			focus,
+			onInput,
+			onKeydown,
+			faExclamationCircle,
+		};
 	},
-	methods: {
-		focus() {
-			this.$refs.input.focus();
-		},
-		togglePassword() {
-			if (this.type == 'password') {
-				this.type = 'text'
-			} else {
-				this.type = 'password'
-			}
-		},
-		chooseFile() {
-			this.$refs.file.click();
-		},
-		onChangeFile() {
-			this.v = Array.from((this.$refs.file as any).files);
-			this.$emit('input', this.v);
-			this.$emit('change', this.v);
-		},
-		onInput(ev) {
-			this.changed = true;
-			this.$emit('change', ev);
-		}
-	}
 });
 </script>
 
diff --git a/src/client/components/ui/menu.vue b/src/client/components/ui/menu.vue
new file mode 100644
index 0000000000..5e74828c20
--- /dev/null
+++ b/src/client/components/ui/menu.vue
@@ -0,0 +1,237 @@
+<template>
+<div class="rrevdjwt" :class="{ left: align === 'left' }"
+	ref="items"
+	@contextmenu.self="e => e.preventDefault()"
+	v-hotkey="keymap"
+>
+	<template v-for="(item, i) in _items">
+		<div v-if="item === null" class="divider"></div>
+		<span v-else-if="item.type === 'label'" class="label item">
+			<span>{{ item.text }}</span>
+		</span>
+		<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
+			<span><MkEllipsis/></span>
+		</span>
+		<router-link v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
+			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+			<span>{{ item.text }}</span>
+			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+		</router-link>
+		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
+			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<span>{{ item.text }}</span>
+			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+		</a>
+		<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item">
+			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
+			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+		</button>
+		<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
+			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+			<span>{{ item.text }}</span>
+			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+		</button>
+	</template>
+	<span v-if="_items.length === 0" class="none item">
+		<span>{{ $t('none') }}</span>
+	</span>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import contains from '@/scripts/contains';
+
+export default defineComponent({
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		viaKeyboard: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: String,
+			requried: false
+		}
+	},
+	emits: ['close'],
+	data() {
+		return {
+			_items: [],
+			faCircle,
+		};
+	},
+	computed: {
+		keymap(): any {
+			return {
+				'up|k|shift+tab': this.focusUp,
+				'down|j|tab': this.focusDown,
+				'esc': this.close,
+			};
+		},
+	},
+	created() {
+		const items = ref(this.items.filter(item => item !== undefined));
+
+		for (let i = 0; i < items.value.length; i++) {
+			const item = items.value[i];
+			
+			if (item && item.then) { // if item is Promise
+				items.value[i] = { type: 'pending' };
+				item.then(actualItem => {
+					items.value[i] = actualItem;
+				});
+			}
+		}
+
+		this._items = items;
+	},
+	mounted() {
+		if (this.viaKeyboard) {
+			this.$nextTick(() => {
+				focusNext(this.$refs.items.children[0], true, false);
+			});
+		}
+
+		if (this.contextmenuEvent) {
+			this.$el.style.top = this.contextmenuEvent.pageY + 'px';
+			this.$el.style.left = this.contextmenuEvent.pageX + 'px';
+
+			for (const el of Array.from(document.querySelectorAll('body *'))) {
+				el.addEventListener('mousedown', this.onMousedown);
+			}
+		}
+	},
+	beforeUnmount() {
+		for (const el of Array.from(document.querySelectorAll('body *'))) {
+			el.removeEventListener('mousedown', this.onMousedown);
+		}
+	},
+	methods: {
+		clicked(fn) {
+			fn();
+			this.close();
+		},
+		close() {
+			this.$emit('close');
+		},
+		focusUp() {
+			focusPrev(document.activeElement);
+		},
+		focusDown() {
+			focusNext(document.activeElement);
+		},
+		onMousedown(e) {
+			if (!contains(this.$el, e.target) && (this.$el != e.target)) this.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rrevdjwt {
+	padding: 8px 0;
+
+	&.left {
+		> .item {
+			text-align: left;
+		}
+	}
+
+	> .item {
+		display: block;
+		position: relative;
+		padding: 8px 16px;
+		width: 100%;
+		box-sizing: border-box;
+		white-space: nowrap;
+		font-size: 0.9em;
+		line-height: 20px;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&.danger {
+			color: #ff2a2a;
+
+			&:hover {
+				color: #fff;
+				background: #ff4242;
+			}
+
+			&:active {
+				color: #fff;
+				background: #d42e2e;
+			}
+		}
+
+		&:hover {
+			color: #fff;
+			background: var(--accent);
+			text-decoration: none;
+		}
+
+		&:active {
+			color: #fff;
+			background: var(--accentDarken);
+		}
+
+		&:not(:active):focus {
+			box-shadow: 0 0 0 2px var(--focus) inset;
+		}
+
+		&.label {
+			pointer-events: none;
+			font-size: 0.7em;
+			padding-bottom: 4px;
+
+			> span {
+				opacity: 0.7;
+			}
+		}
+
+		&.pending {
+			pointer-events: none;
+			opacity: 0.7;
+		}
+
+		&.none {
+			pointer-events: none;
+			opacity: 0.7;
+		}
+
+		> [data-icon] {
+			margin-right: 4px;
+			width: 20px;
+		}
+
+		> .avatar {
+			margin-right: 4px;
+			width: 20px;
+			height: 20px;
+		}
+
+		> i {
+			position: absolute;
+			top: 5px;
+			left: 13px;
+			color: var(--indicator);
+			font-size: 12px;
+			animation: blink 1s infinite;
+		}
+	}
+
+	> .divider {
+		margin: 8px 0;
+		height: 1px;
+		background: var(--divider);
+	}
+}
+</style>
diff --git a/src/client/components/ui/modal-menu.vue b/src/client/components/ui/modal-menu.vue
new file mode 100644
index 0000000000..aac4be9c3b
--- /dev/null
+++ b/src/client/components/ui/modal-menu.vue
@@ -0,0 +1,47 @@
+<template>
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<MkMenu :items="items" :align="align" @close="$refs.modal.close()" class="_popup"/>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkModal from './modal.vue';
+import MkMenu from './menu.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+		MkMenu,
+	},
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		align: {
+			type: String,
+			required: false
+		},
+		viaKeyboard: {
+			type: Boolean,
+			required: false
+		},
+		src: {
+			required: false
+		},
+	},
+	emits: ['closed'],
+	computed: {
+		keymap(): any {
+			return {
+				'esc': () => this.$refs.modal.close(),
+			};
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/components/ui/modal-window.vue b/src/client/components/ui/modal-window.vue
new file mode 100644
index 0000000000..2cdf961379
--- /dev/null
+++ b/src/client/components/ui/modal-window.vue
@@ -0,0 +1,145 @@
+<template>
+<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+	<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: height ? `${height}px` : null }">
+		<div class="header">
+			<button class="_button" v-if="withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
+			<span class="title">
+				<slot name="header"></slot>
+			</span>
+			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
+			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><Fa :icon="faCheck"/></button>
+		</div>
+		<div class="body" v-if="padding">
+			<div class="_section">
+				<slot></slot>
+			</div>
+		</div>
+		<div class="body" v-else>
+			<slot></slot>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
+import MkModal from './modal.vue';
+
+export default defineComponent({
+	components: {
+		MkModal
+	},
+	props: {
+		withOkButton: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		okButtonDisabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		padding: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 400
+		},
+		height: {
+			type: Number,
+			required: false,
+			default: null
+		},
+		canClose: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+	},
+
+	emits: ['click', 'close', 'closed', 'ok'],
+
+	data() {
+		return {
+			faTimes, faCheck
+		};
+	},
+
+	methods: {
+		close() {
+			this.$refs.modal.close();
+		},
+
+		onKeydown(e) {
+			if (e.which === 27) { // Esc
+				e.preventDefault();
+				e.stopPropagation();
+				this.close();
+			}
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ebkgoccj {
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	contain: content;
+
+	--section-padding: 24px;
+
+	@media (max-width: 500px) {
+		--section-padding: 16px;
+	}
+
+	> .header {
+		$height: 58px;
+		$height-narrow: 42px;
+		display: flex;
+		flex-shrink: 0;
+		box-shadow: 0px 1px var(--divider);
+
+		> button {
+			height: $height;
+			width: $height;
+
+			@media (max-width: 500px) {
+				height: $height-narrow;
+				width: $height-narrow;
+			}
+		}
+
+		> .title {
+			flex: 1;
+			line-height: $height;
+			padding-left: 32px;
+			font-weight: bold;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			pointer-events: none;
+
+			@media (max-width: 500px) {
+				line-height: $height-narrow;
+				padding-left: 16px;
+			}
+		}
+
+		> button + .title {
+			padding-left: 0;
+		}
+	}
+
+	> .body {
+		overflow: auto;
+	}
+}
+</style>
diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue
new file mode 100644
index 0000000000..4cc96bb8da
--- /dev/null
+++ b/src/client/components/ui/modal.vue
@@ -0,0 +1,232 @@
+<template>
+<div class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: showing ? 'auto' : 'none' }">
+	<transition :name="$store.state.device.animation ? 'modal-bg' : ''" appear>
+		<div class="bg _modalBg" v-if="showing" @click="onBgClick"></div>
+	</transition>
+	<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
+		<transition :name="$store.state.device.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="$emit('closed')" @after-enter="childRendered">
+			<slot v-if="showing"></slot>
+		</transition>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+function getFixedContainer(el: Element | null): Element | null {
+	if (el == null || el.tagName === 'BODY') return null;
+	const position = window.getComputedStyle(el).getPropertyValue('position');
+	if (position === 'fixed') {
+		return el;
+	} else {
+		return getFixedContainer(el.parentElement);
+	}
+}
+
+export default defineComponent({
+	provide: {
+		modal: true
+	},
+	props: {
+		srcCenter: {
+			type: Boolean,
+			required: false
+		},
+		src: {
+			required: false,
+		},
+		position: {
+			required: false
+		}
+	},
+	emits: ['click', 'esc', 'closed'],
+	data() {
+		return {
+			showing: true,
+			fixed: false,
+			transformOrigin: 'center',
+			contentClicking: false,
+		};
+	},
+	computed: {
+		keymap(): any {
+			return {
+				'esc': () => this.$emit('esc'),
+			};
+		},
+		popup(): boolean {
+			return this.src != null;
+		}
+	},
+	mounted() {
+		this.fixed = getFixedContainer(this.src) != null;
+
+		this.$nextTick(() => {
+			if (!this.popup) return;
+
+			const popover = this.$refs.content as any;
+
+			// TODO: ResizeObserver無くしたい
+			new ResizeObserver((entries, observer) => {
+				const rect = this.src.getBoundingClientRect();
+				const width = popover.offsetWidth;
+				const height = popover.offsetHeight;
+
+				let left;
+				let top;
+
+				if (this.srcCenter) {
+					const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
+					const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.src.offsetHeight / 2);
+					left = (x - (width / 2));
+					top = (y - (height / 2));
+				} else {
+					const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.src.offsetWidth / 2);
+					const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.src.offsetHeight;
+					left = (x - (width / 2));
+					top = y;
+				}
+
+				if (this.fixed) {
+					if (left + width > window.innerWidth) {
+						left = window.innerWidth - width;
+					}
+
+					if (top + height > window.innerHeight) {
+						top = window.innerHeight - height;
+					}
+				} else {
+					if (left + width - window.pageXOffset > window.innerWidth) {
+						left = window.innerWidth - width + window.pageXOffset;
+					}
+
+					if (top + height - window.pageYOffset > window.innerHeight) {
+						top = window.innerHeight - height + window.pageYOffset;
+					}
+				}
+
+				if (top < 0) {
+					top = 0;
+				}
+
+				if (left < 0) {
+					left = 0;
+				}
+
+				if (top > rect.top + (this.fixed ? 0 : window.pageYOffset)) {
+					this.transformOrigin = 'center top';
+				}
+
+				popover.style.left = left + 'px';
+				popover.style.top = top + 'px';
+			}).observe(popover);
+		});
+	},
+	methods: {
+		childRendered() {
+			// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
+			const content = this.$refs.content.children[0];
+			content.addEventListener('mousedown', e => {
+				this.contentClicking = true;
+				window.addEventListener('mouseup', e => {
+					// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
+					setTimeout(() => {
+						this.contentClicking = false;
+					}, 100);
+				}, { passive: true, once: true });
+			}, { passive: true });
+		},
+
+		close() {
+			this.showing = false;
+		},
+
+		onBgClick() {
+			if (this.contentClicking) return;
+			this.$emit('click');
+		}
+	}
+});
+</script>
+
+<style vars="{ transformOrigin }">
+.modal-popup-content-enter-active, .modal-popup-content-leave-active,
+.modal-content-enter-from, .modal-content-leave-to {
+  transform-origin: var(--transformOrigin);
+}
+</style>
+
+<style lang="scss" scoped>
+.modal-bg-enter-active, .modal-bg-leave-active {
+	transition: opacity 0.3s !important;
+}
+.modal-bg-enter-from, .modal-bg-leave-to {
+	opacity: 0;
+}
+
+.modal-content-enter-active, .modal-content-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.modal-content-enter-from, .modal-content-leave-to {
+	pointer-events: none;
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.modal-popup-content-enter-active, .modal-popup-content-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.modal-popup-content-enter-from, .modal-popup-content-leave-to {
+	pointer-events: none;
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.mk-modal {
+	> .bg {
+		z-index: 10000;
+	}
+
+	> .content:not(.popup) {
+		position: fixed;
+		z-index: 10000;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		padding: 32px;
+		// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
+		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+		overflow: auto;
+		display: flex;
+
+		@media (max-width: 500px) {
+			padding: 16px;
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+		}
+
+		> * {
+			margin: auto;
+		}
+
+		&.top {
+			> * {
+				margin-top: 0;
+			}
+		}
+	}
+
+	> .content.popup {
+		position: absolute;
+		z-index: 10000;
+
+		&.fixed {
+			position: fixed;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index 0db6ee20dc..fa584f3aab 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -5,20 +5,20 @@
 		<slot name="empty"></slot>
 	</div>
 	<div class="more" v-show="more" key="_more_">
-		<mk-button class="button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+		<MkButton class="button" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
-		</mk-button>
+			<template v-if="moreFetching"><MkLoading inline/></template>
+		</MkButton>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from './button.vue';
-import paging from '../../scripts/paging';
+import paging from '@/scripts/paging';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
diff --git a/src/client/components/ui/radio.vue b/src/client/components/ui/radio.vue
index 311cdce32d..8f2b843ee6 100644
--- a/src/client/components/ui/radio.vue
+++ b/src/client/components/ui/radio.vue
@@ -17,14 +17,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	model: {
-		prop: 'model',
-		event: 'change'
-	},
+import { defineComponent } from 'vue';
+import * as os from '@/os';
+
+export default defineComponent({
 	props: {
-		model: {
+		modelValue: {
 			required: false
 		},
 		value: {
@@ -37,13 +35,13 @@ export default Vue.extend({
 	},
 	computed: {
 		checked(): boolean {
-			return this.model === this.value;
+			return this.modelValue === this.value;
 		}
 	},
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('change', this.value);
+			this.$emit('update:modelValue', this.value);
 		}
 	}
 });
@@ -51,6 +49,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .novjtctn {
+	position: relative;
 	display: inline-block;
 	margin: 0 32px 0 0;
 	cursor: pointer;
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 2c815912bb..c6e585cf50 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -13,14 +13,15 @@
 		:autofocus="autofocus"
 		@focus="focused = true"
 		@blur="focused = false"
-		@input="$emit('input', $event.target.value)"
+		@input="$emit('update:value', $event.target.value)"
 	/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
+import { defineComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		value: {
 			type: Number,
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index cb737df6ed..aaaddacb29 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -15,7 +15,7 @@
 		</select>
 		<div class="suffix">
 			<slot name="suffix">
-				<fa :icon="faChevronDown"/>
+				<Fa :icon="faChevronDown"/>
 			</slot>
 		</div>
 	</div>
@@ -24,10 +24,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false
@@ -58,7 +59,7 @@ export default Vue.extend({
 				return this.value;
 			},
 			set(v) {
-				this.$emit('input', v);
+				this.$emit('update:value', v);
 			}
 		},
 		filled(): boolean {
@@ -169,6 +170,7 @@ export default Vue.extend({
 
 			option,
 			optgroup {
+				color: var(--fg);
 				background: var(--bg);
 			}
 		}
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index 9652a01024..f738257232 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -26,12 +26,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	model: {
-		prop: 'value',
-		event: 'change'
-	},
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
@@ -50,7 +47,7 @@ export default Vue.extend({
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('change', !this.checked);
+			this.$emit('update:value', !this.checked);
 		}
 	}
 });
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index fba9fc9d78..6820be8a7c 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -19,9 +19,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false
@@ -74,7 +75,7 @@ export default Vue.extend({
 		},
 		onInput(ev) {
 			this.changed = true;
-			this.$emit('input', ev.target.value);
+			this.$emit('update:value', ev.target.value);
 		}
 	}
 });
diff --git a/src/client/components/ui/tooltip.vue b/src/client/components/ui/tooltip.vue
index b7a56708b7..6ea344c54d 100644
--- a/src/client/components/ui/tooltip.vue
+++ b/src/client/components/ui/tooltip.vue
@@ -1,16 +1,20 @@
 <template>
-<transition name="zoom-in-top" appear>
-	<div class="buebdbiu" v-if="show">
+<transition name="zoom-in-top" appear @after-leave="$emit('closed')">
+	<div class="buebdbiu _acrylic _shadow" v-if="showing">
 		<slot>{{ text }}</slot>
 	</div>
 </transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
+		showing: {
+			type: Boolean,
+			required: true,
+		},
 		source: {
 			required: true,
 		},
@@ -20,77 +24,39 @@ export default Vue.extend({
 		}
 	},
 
-	data() {
-		return {
-			show: false
-		};
-	},
+	emits: ['closed'],
 
 	mounted() {
-		this.show = true;
-
 		this.$nextTick(() => {
 			if (this.source == null) {
-				this.destroyDom();
+				this.$emit('closed');
 				return;
 			}
+
 			const rect = this.source.getBoundingClientRect();
 
-			const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-			const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-			this.$el.style.left = (x - 28) + 'px';
-			this.$el.style.top = (y + 16) + 'px';
+			let x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+			let y = rect.top + window.pageYOffset + this.source.offsetHeight;
+
+			x -= (this.$el.offsetWidth / 2);
+
+			this.$el.style.left = x + 'px';
+			this.$el.style.top = y + 'px';
 		});
 	},
-
-	methods: {
-		close() {
-			this.show = false;
-			setTimeout(this.destroyDom, 300);
-		}
-	}
 })
 </script>
 
 <style lang="scss" scoped>
 .buebdbiu {
-	z-index: 11000;
-	display: block;
 	position: absolute;
+	z-index: 11000;
 	max-width: 240px;
 	font-size: 0.8em;
-	padding: 6px 8px;
-	background: var(--panel);
+	padding: 8px 12px;
 	text-align: center;
 	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
 	pointer-events: none;
 	transform-origin: center -16px;
-
-	&:before {
-		content: "";
-		pointer-events: none;
-		display: block;
-		position: absolute;
-		top: -28px;
-		left: 12px;
-		border-top: solid 14px transparent;
-		border-right: solid 14px transparent;
-		border-bottom: solid 14px rgba(0,0,0,0.1);
-		border-left: solid 14px transparent;
-	}
-
-	&:after {
-		content: "";
-		pointer-events: none;
-		display: block;
-		position: absolute;
-		top: -27px;
-		left: 12px;
-		border-top: solid 14px transparent;
-		border-right: solid 14px transparent;
-		border-bottom: solid 14px var(--panel);
-		border-left: solid 14px transparent;
-	}
 }
 </style>
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
new file mode 100644
index 0000000000..cf76347d39
--- /dev/null
+++ b/src/client/components/ui/window.vue
@@ -0,0 +1,481 @@
+<template>
+<transition :name="$store.state.device.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
+	<div class="ebkgocck" v-if="showing">
+		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+			<div class="header">
+				<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
+					<slot name="header"></slot>
+				</span>
+				<slot name="buttons"></slot>
+			</div>
+			<div class="body" v-if="padding">
+				<div class="_section">
+					<slot></slot>
+				</div>
+			</div>
+			<div class="body" v-else>
+				<slot></slot>
+			</div>
+		</div>
+		<template v-if="canResize">
+			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
+			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
+			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
+			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
+			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
+			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		</template>
+	</div>
+</transition>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
+import contains from '@/scripts/contains';
+import * as os from '@/os';
+
+const minHeight = 50;
+const minWidth = 250;
+
+function dragListen(fn) {
+	window.addEventListener('mousemove',  fn);
+	window.addEventListener('touchmove',  fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup',    dragClear.bind(null, fn));
+	window.addEventListener('touchend',   dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove',  fn);
+	window.removeEventListener('touchmove',  fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup',    dragClear);
+	window.removeEventListener('touchend',   dragClear);
+}
+
+export default defineComponent({
+	provide: {
+		inWindow: true
+	},
+
+	props: {
+		padding: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		initialWidth: {
+			type: Number,
+			required: false,
+			default: 400
+		},
+		initialHeight: {
+			type: Number,
+			required: false,
+			default: null
+		},
+		canResize: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			showing: true,
+			id: Math.random().toString(), // TODO: UUIDとかにする
+			faTimes
+		};
+	},
+
+	mounted() {
+		if (this.initialWidth) this.applyTransformWidth(this.initialWidth);
+		if (this.initialHeight) this.applyTransformHeight(this.initialHeight);
+
+		this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
+		this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 2));
+
+		os.windows.set(this.id, {
+			z: Number(document.defaultView.getComputedStyle(this.$el, null).zIndex)
+		});
+
+		window.addEventListener('resize', this.onBrowserResize);
+	},
+
+	unmounted() {
+		os.windows.delete(this.id);
+		window.removeEventListener('resize', this.onBrowserResize);
+	},
+
+	methods: {
+		close() {
+			this.showing = false;
+		},
+
+		onKeydown(e) {
+			if (e.which === 27) { // Esc
+				e.preventDefault();
+				e.stopPropagation();
+				this.close();
+			}
+		},
+
+		// 最前面へ移動
+		top() {
+			let z = 0;
+			const ws = Array.from(os.windows.entries()).filter(([k, v]) => k !== this.id).map(([k, v]) => v);
+			for (const w of ws) {
+				if (w.z > z) z = w.z;
+			}
+			if (z > 0) {
+				(this.$el as any).style.zIndex = z + 1;
+				os.windows.set(this.id, {
+					z: z + 1
+				});
+			}
+		},
+
+		onBodyMousedown() {
+			this.top();
+		},
+
+		onHeaderMousedown(e) {
+			const main = this.$el as any;
+
+			if (!contains(main, document.activeElement)) main.focus();
+
+			const position = main.getBoundingClientRect();
+
+			const clickX = e.touches && e.touches.length > 0 ? e.touches[0].clientX : e.clientX;
+			const clickY = e.touches && e.touches.length > 0 ? e.touches[0].clientY : e.clientY;
+			const moveBaseX = clickX - position.left;
+			const moveBaseY = clickY - position.top;
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = main.offsetWidth;
+			const windowHeight = main.offsetHeight;
+
+			// 動かした時
+			dragListen(me => {
+				const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
+				const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
+
+				let moveLeft = x - moveBaseX;
+				let moveTop = y - moveBaseY;
+
+				// 下はみ出し
+				if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+
+				// 左はみ出し
+				if (moveLeft < 0) moveLeft = 0;
+
+				// 上はみ出し
+				if (moveTop < 0) moveTop = 0;
+
+				// 右はみ出し
+				if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+
+				this.$el.style.left = moveLeft + 'px';
+				this.$el.style.top = moveTop + 'px';
+			});
+		},
+
+		// 上ハンドル掴み時
+		onTopHandleMousedown(e) {
+			const main = this.$el as any;
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(main, '').height, 10);
+			const top = parseInt(getComputedStyle(main, '').top, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + move > 0) {
+					if (height + -move > minHeight) {
+						this.applyTransformHeight(height + -move);
+						this.applyTransformTop(top + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(minHeight);
+						this.applyTransformTop(top + (height - minHeight));
+					}
+				} else { // 上のはみ出し時
+					this.applyTransformHeight(top + height);
+					this.applyTransformTop(0);
+				}
+			});
+		},
+
+		// 右ハンドル掴み時
+		onRightHandleMousedown(e) {
+			const main = this.$el as any;
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(main, '').width, 10);
+			const left = parseInt(getComputedStyle(main, '').left, 10);
+			const browserWidth = window.innerWidth;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + width + move < browserWidth) {
+					if (width + move > minWidth) {
+						this.applyTransformWidth(width + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(minWidth);
+					}
+				} else { // 右のはみ出し時
+					this.applyTransformWidth(browserWidth - left);
+				}
+			});
+		},
+
+		// 下ハンドル掴み時
+		onBottomHandleMousedown(e) {
+			const main = this.$el as any;
+
+			const base = e.clientY;
+			const height = parseInt(getComputedStyle(main, '').height, 10);
+			const top = parseInt(getComputedStyle(main, '').top, 10);
+			const browserHeight = window.innerHeight;
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientY - base;
+				if (top + height + move < browserHeight) {
+					if (height + move > minHeight) {
+						this.applyTransformHeight(height + move);
+					} else { // 最小の高さより小さくなろうとした時
+						this.applyTransformHeight(minHeight);
+					}
+				} else { // 下のはみ出し時
+					this.applyTransformHeight(browserHeight - top);
+				}
+			});
+		},
+
+		// 左ハンドル掴み時
+		onLeftHandleMousedown(e) {
+			const main = this.$el as any;
+
+			const base = e.clientX;
+			const width = parseInt(getComputedStyle(main, '').width, 10);
+			const left = parseInt(getComputedStyle(main, '').left, 10);
+
+			// 動かした時
+			dragListen(me => {
+				const move = me.clientX - base;
+				if (left + move > 0) {
+					if (width + -move > minWidth) {
+						this.applyTransformWidth(width + -move);
+						this.applyTransformLeft(left + move);
+					} else { // 最小の幅より小さくなろうとした時
+						this.applyTransformWidth(minWidth);
+						this.applyTransformLeft(left + (width - minWidth));
+					}
+				} else { // 左のはみ出し時
+					this.applyTransformWidth(left + width);
+					this.applyTransformLeft(0);
+				}
+			});
+		},
+
+		// 左上ハンドル掴み時
+		onTopLeftHandleMousedown(e) {
+			this.onTopHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		},
+
+		// 右上ハンドル掴み時
+		onTopRightHandleMousedown(e) {
+			this.onTopHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		},
+
+		// 右下ハンドル掴み時
+		onBottomRightHandleMousedown(e) {
+			this.onBottomHandleMousedown(e);
+			this.onRightHandleMousedown(e);
+		},
+
+		// 左下ハンドル掴み時
+		onBottomLeftHandleMousedown(e) {
+			this.onBottomHandleMousedown(e);
+			this.onLeftHandleMousedown(e);
+		},
+
+		// 高さを適用
+		applyTransformHeight(height) {
+			(this.$el as any).style.height = height + 'px';
+		},
+
+		// 幅を適用
+		applyTransformWidth(width) {
+			(this.$el as any).style.width = width + 'px';
+		},
+
+		// Y座標を適用
+		applyTransformTop(top) {
+			(this.$el as any).style.top = top + 'px';
+		},
+
+		// X座標を適用
+		applyTransformLeft(left) {
+			(this.$el as any).style.left = left + 'px';
+		},
+
+		onBrowserResize() {
+			const main = this.$el as any;
+			const position = main.getBoundingClientRect();
+			const browserWidth = window.innerWidth;
+			const browserHeight = window.innerHeight;
+			const windowWidth = main.offsetWidth;
+			const windowHeight = main.offsetHeight;
+			if (position.left < 0) main.style.left = 0;     // 左はみ出し
+			if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px';  // 下はみ出し
+			if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px';    // 右はみ出し
+			if (position.top < 0) main.style.top = 0;       // 上はみ出し
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.window-enter-active, .window-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.window-enter-from, .window-leave-to {
+	pointer-events: none;
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.ebkgocck {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 5000;
+
+	> .body {
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		contain: content;
+		width: 100%;
+    height: 100%;
+
+		--section-padding: 16px;
+
+		> .header {
+			$height: 50px;
+			display: flex;
+			position: relative;
+			flex-shrink: 0;
+			box-shadow: 0px 1px var(--divider);
+			cursor: move;
+			user-select: none;
+			height: $height;
+
+			> ::v-deep(button) {
+				height: $height;
+				width: $height;
+
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+				line-height: $height;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+
+		> .body {
+			flex: 1;
+			overflow: auto;
+		}
+	}
+
+	> .handle {
+		$size: 8px;
+
+		position: absolute;
+
+		&.top {
+			top: -($size);
+			left: 0;
+			width: 100%;
+			height: $size;
+			cursor: ns-resize;
+		}
+
+		&.right {
+			top: 0;
+			right: -($size);
+			width: $size;
+			height: 100%;
+			cursor: ew-resize;
+		}
+
+		&.bottom {
+			bottom: -($size);
+			left: 0;
+			width: 100%;
+			height: $size;
+			cursor: ns-resize;
+		}
+
+		&.left {
+			top: 0;
+			left: -($size);
+			width: $size;
+			height: 100%;
+			cursor: ew-resize;
+		}
+
+		&.top-left {
+			top: -($size);
+			left: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nwse-resize;
+		}
+
+		&.top-right {
+			top: -($size);
+			right: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nesw-resize;
+		}
+
+		&.bottom-right {
+			bottom: -($size);
+			right: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nwse-resize;
+		}
+
+		&.bottom-left {
+			bottom: -($size);
+			left: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nesw-resize;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/upload.vue b/src/client/components/upload.vue
new file mode 100644
index 0000000000..2ba2186f57
--- /dev/null
+++ b/src/client/components/upload.vue
@@ -0,0 +1,136 @@
+<template>
+<div class="mk-uploader _acrylic">
+	<ol v-if="uploads.length > 0">
+		<li v-for="ctx in uploads" :key="ctx.id">
+			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
+			<div class="top">
+				<p class="name"><Fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
+				<p class="status">
+					<span class="initing" v-if="ctx.progressValue === undefined">{{ $t('waiting') }}<MkEllipsis/></span>
+					<span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+					<span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
+				</p>
+			</div>
+			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
+		</li>
+	</ol>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
+
+export default defineComponent({
+	data() {
+		return {
+			uploads: os.uploads,
+			faSpinner
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-uploader {
+	position: fixed;
+	z-index: 10000;
+	right: 16px;
+	width: 260px;
+	top: 32px;
+	padding: 16px 20px;
+	pointer-events: none;
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+	border-radius: 8px;
+}
+.mk-uploader:empty {
+  display: none;
+}
+.mk-uploader > ol {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mk-uploader > ol > li {
+  display: grid;
+  margin: 8px 0 0 0;
+  padding: 0;
+  height: 36px;
+  width: 100%;
+  border-top: solid 8px transparent;
+  grid-template-columns: 36px calc(100% - 44px);
+  grid-template-rows: 1fr 8px;
+  column-gap: 8px;
+  box-sizing: content-box;
+}
+.mk-uploader > ol > li:first-child {
+  margin: 0;
+  box-shadow: none;
+  border-top: none;
+}
+.mk-uploader > ol > li > .img {
+  display: block;
+  background-size: cover;
+  background-position: center center;
+  grid-column: 1/2;
+  grid-row: 1/3;
+}
+.mk-uploader > ol > li > .top {
+  display: flex;
+  grid-column: 2/3;
+  grid-row: 1/2;
+}
+.mk-uploader > ol > li > .top > .name {
+  display: block;
+  padding: 0 8px 0 0;
+  margin: 0;
+  font-size: 0.8em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-shrink: 1;
+}
+.mk-uploader > ol > li > .top > .name > [data-icon] {
+  margin-right: 4px;
+}
+.mk-uploader > ol > li > .top > .status {
+  display: block;
+  margin: 0 0 0 auto;
+  padding: 0;
+  font-size: 0.8em;
+  flex-shrink: 0;
+}
+.mk-uploader > ol > li > .top > .status > .initing {
+}
+.mk-uploader > ol > li > .top > .status > .kb {
+}
+.mk-uploader > ol > li > .top > .status > .percentage {
+  display: inline-block;
+  width: 48px;
+  text-align: right;
+}
+.mk-uploader > ol > li > .top > .status > .percentage:after {
+  content: '%';
+}
+.mk-uploader > ol > li > progress {
+  display: block;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  overflow: hidden;
+  grid-column: 2/3;
+  grid-row: 2/3;
+  z-index: 2;
+	width: 100%;
+	height: 8px;
+}
+.mk-uploader > ol > li > progress::-webkit-progress-value {
+  background: var(--accent);
+}
+.mk-uploader > ol > li > progress::-webkit-progress-bar {
+  //background: var(--accentAlpha01);
+	background: transparent;
+}
+</style>
diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
deleted file mode 100644
index 2d28bc84ac..0000000000
--- a/src/client/components/uploader.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-<div class="mk-uploader">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><fa :icon="faSpinner" pulse/>{{ ctx.name }}</p>
-				<p class="status">
-					<span class="initing" v-if="ctx.progressValue === undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
-					<span class="kb" v-if="ctx.progressValue !== undefined">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue" :max="ctx.progressMax" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { apiUrl } from '../config';
-//import getMD5 from '../../scripts/get-md5';
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-
-export default Vue.extend({
-	data() {
-		return {
-			uploads: [],
-			faSpinner
-		};
-	},
-	methods: {
-		checkExistence(fileData: ArrayBuffer): Promise<any> {
-			return new Promise((resolve, reject) => {
-				const data = new FormData();
-				data.append('md5', getMD5(fileData));
-
-				this.$root.api('drive/files/find-by-hash', {
-					md5: getMD5(fileData)
-				}).then(resp => {
-					resolve(resp.length > 0 ? resp[0] : null);
-				});
-			});
-		},
-
-		upload(file: File, folder: any, name?: string) {
-			if (folder && typeof folder == 'object') folder = folder.id;
-
-			const id = Math.random();
-
-			const reader = new FileReader();
-			reader.onload = (e: any) => {
-				const ctx = {
-					id: id,
-					name: name || file.name || 'untitled',
-					progressMax: undefined,
-					progressValue: undefined,
-					img: window.URL.createObjectURL(file)
-				};
-
-				this.uploads.push(ctx);
-				this.$emit('change', this.uploads);
-
-				const data = new FormData();
-				data.append('i', this.$store.state.i.token);
-				data.append('force', 'true');
-				data.append('file', file);
-
-				if (folder) data.append('folderId', folder);
-				if (name) data.append('name', name);
-
-				const xhr = new XMLHttpRequest();
-				xhr.open('POST', apiUrl + '/drive/files/create', true);
-				xhr.onload = (e: any) => {
-					const driveFile = JSON.parse(e.target.response);
-
-					this.$emit('uploaded', driveFile);
-
-					this.uploads = this.uploads.filter(x => x.id != id);
-					this.$emit('change', this.uploads);
-				};
-
-				xhr.upload.onprogress = e => {
-					if (e.lengthComputable) {
-						ctx.progressMax = e.total;
-						ctx.progressValue = e.loaded;
-					}
-				};
-
-				xhr.send(data);
-			}
-			reader.readAsArrayBuffer(file);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-uploader {
-  overflow: auto;
-}
-.mk-uploader:empty {
-  display: none;
-}
-.mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
-}
-.mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
-}
-.mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
-}
-.mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
-}
-.mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
-}
-.mk-uploader > ol > li > .top > .name > [data-icon] {
-  margin-right: 4px;
-}
-.mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
-}
-.mk-uploader > ol > li > .top > .status > .initing {
-}
-.mk-uploader > ol > li > .top > .status > .kb {
-}
-.mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
-}
-.mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
-}
-.mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
-	width: 100%;
-	height: 8px;
-}
-.mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--accent);
-}
-.mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--accentAlpha01);
-	background: transparent;
-}
-</style>
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 6d00d18607..0a402f793f 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,14 +1,17 @@
 <template>
-<div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
-	<mk-url-preview :url="url"/>
+<div class="fgmtyycl" :style="{ top: top + 'px', left: left + 'px' }">
+	<transition name="zoom" @after-leave="$emit('closed')">
+		<MkUrlPreview class="_popup _shadow" :url="url" v-if="showing"/>
+	</transition>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkUrlPreview from './url-preview.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkUrlPreview
 	},
@@ -20,7 +23,11 @@ export default Vue.extend({
 		},
 		source: {
 			required: true
-		}
+		},
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},
 
 	data() {
@@ -48,7 +55,6 @@ export default Vue.extend({
 	z-index: 11000;
 	width: 500px;
 	max-width: calc(90vw - 12px);
-	overflow: hidden;
 	pointer-events: none;
 }
 </style>
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index a5052d6132..df02698b5d 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" @click="playerEnabled = false" :title="$t('disablePlayer')"><fa icon="times"/></button>
+	<button class="disablePlayer" @click="playerEnabled = false" :title="$t('disablePlayer')"><Fa icon="times"/></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
 </div>
 <div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
@@ -10,7 +10,7 @@
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'router-link' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 			<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enablePlayer')"><fa :icon="faPlayCircle"/></button>
+				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enablePlayer')"><Fa :icon="faPlayCircle"/></button>
 			</div>
 			<article>
 				<header>
@@ -26,19 +26,20 @@
 	</transition>
 	<div class="expandTweet" v-if="tweetId">
 		<a @click="tweetExpanded = true">
-			<fa :icon="faTwitter"/> {{ $t('expandTweet') }}
+			<Fa :icon="faTwitter"/> {{ $t('expandTweet') }}
 		</a>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
-import { url as local, lang } from '../config';
+import { url as local, lang } from '@/config';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
@@ -135,7 +136,7 @@ export default Vue.extend({
  		},
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		(window as any).removeEventListener('message', this.adjustTweetHeight);
 	},
 });
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 0a5a5bc508..649ce5fa24 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -14,19 +14,19 @@
 	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
 </component>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
-import { url as local } from '../config';
-import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { url as local } from '@/config';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
@@ -53,7 +53,7 @@ export default Vue.extend({
 			showTimer: null,
 			hideTimer: null,
 			checkTimer: null,
-			preview: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
@@ -67,29 +67,28 @@ export default Vue.extend({
 		this.hash = decodeURIComponent(url.hash);
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;
 
-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const { dispose } = os.popup(await import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});
 
-			document.body.appendChild(this.preview.$el);
+			this.close = () => {
+				dispose();
+			};
 
 			this.checkTimer = setInterval(() => {
 				if (!document.body.contains(this.$el)) this.closePreview();
 			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
+			if (this.close) {
 				clearInterval(this.checkTimer);
-				this.preview.destroyDom();
-				this.preview = null;
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {
diff --git a/src/client/components/user-info.vue b/src/client/components/user-info.vue
new file mode 100644
index 0000000000..893747b7c4
--- /dev/null
+++ b/src/client/components/user-info.vue
@@ -0,0 +1,144 @@
+<template>
+<div class="_panel vjnjpkug">
+	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+	<div class="title">
+		<router-link class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></router-link>
+		<p class="username"><MkAcct :user="user"/></p>
+	</div>
+	<div class="description">
+		<div class="mfm" v-if="user.description">
+			<Mfm :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+		</div>
+		<span v-else style="opacity: 0.7;">{{ $t('noAccountDescription') }}</span>
+	</div>
+	<div class="status">
+		<div>
+			<p>{{ $t('notes') }}</p><span>{{ user.notesCount }}</span>
+		</div>
+		<div>
+			<p>{{ $t('following') }}</p><span>{{ user.followingCount }}</span>
+		</div>
+		<div>
+			<p>{{ $t('followers') }}</p><span>{{ user.followersCount }}</span>
+		</div>
+	</div>
+	<MkFollowButton class="koudoku-button" v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" mini/>
+</div>
+</template>
+
+<script lang="ts">
+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: {
+		MkFollowButton
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	data() {
+		return {
+		};
+	},
+
+	methods: {
+		userPage,
+		parseAcct,
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.vjnjpkug {
+	position: relative;
+
+	> .banner {
+		height: 84px;
+		background-color: rgba(0, 0, 0, 0.1);
+		background-size: cover;
+		background-position: center;
+	}
+
+	> .avatar {
+		display: block;
+		position: absolute;
+		top: 62px;
+		left: 13px;
+		z-index: 2;
+		width: 58px;
+		height: 58px;
+		border: solid 4px var(--panel);
+	}
+
+	> .title {
+		display: block;
+		padding: 10px 0 10px 88px;
+
+		> .name {
+			display: inline-block;
+			margin: 0;
+			font-weight: bold;
+			line-height: 16px;
+			word-break: break-all;
+		}
+
+		> .username {
+			display: block;
+			margin: 0;
+			line-height: 16px;
+			font-size: 0.8em;
+			color: var(--text);
+			opacity: 0.7;
+		}
+	}
+
+	> .description {
+		padding: 16px;
+		font-size: 0.8em;
+		border-top: solid 1px var(--divider);
+
+		> .mfm {
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;  
+			overflow: hidden;
+		}
+	}
+
+	> .status {
+		padding: 10px 16px;
+		border-top: solid 1px var(--divider);
+
+		> div {
+			display: inline-block;
+			width: 33%;
+
+			> p {
+				margin: 0;
+				font-size: 0.7em;
+				color: var(--text);
+			}
+
+			> span {
+				font-size: 1em;
+				color: var(--accent);
+			}
+		}
+	}
+
+	> .koudoku-button {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+	}
+}
+</style>
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 0204cf9d06..0d58a2672a 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -1,44 +1,28 @@
 <template>
-<mk-container :body-togglable="true" :expanded="expanded">
-	<template #header><slot></slot></template>
+<MkError v-if="error" @retry="init()"/>
 
-	<mk-error v-if="error" @retry="init()"/>
-
-	<div class="efvhhmdq">
-		<div class="no-users" v-if="empty">
-			<p>{{ $t('noUsers') }}</p>
-		</div>
-		<div class="user" v-for="user in users" :key="user.id">
-			<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>
-					<span class="username"><mk-acct :user="user"/></span>
-				</div>
-				<div class="description">
-					<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
-					<span v-else class="empty">{{ $t('noAccountDescription') }}</span>
-				</div>
-			</div>
-			<mk-follow-button class="koudoku-button" v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" mini/>
-		</div>
-		<button class="more" ref="loadMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
-			<template v-if="moreFetching"><fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $t('loading') : $t('loadMore') }}
-		</button>
+<div v-else class="efvhhmdq">
+	<div class="no-users" v-if="empty">
+		<p>{{ $t('noUsers') }}</p>
+	</div>
+	<div class="users">
+		<MkUserInfo class="user" v-for="user in users" :user="user" :key="user.id"/>
 	</div>
-</mk-container>
+	<button class="more" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
+		<template v-if="moreFetching"><Fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $t('loading') : $t('loadMore') }}
+	</button>
+</div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import paging from '../scripts/paging';
-import MkContainer from './ui/container.vue';
-import MkFollowButton from './follow-button.vue';
+import { defineComponent } from 'vue';
+import paging from '@/scripts/paging';
+import MkUserInfo from './user-info.vue';
+import { userPage } from '../filters/user';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		MkContainer,
-		MkFollowButton,
+		MkUserInfo,
 	},
 
 	mixins: [
@@ -62,6 +46,10 @@ export default Vue.extend({
 		users() {
 			return this.extract ? this.extract(this.items) : this.items;
 		}
+	},
+
+	methods: {
+		userPage
 	}
 });
 </script>
@@ -72,52 +60,10 @@ export default Vue.extend({
 		text-align: center;
 	}
 
-	> .user {
-		position: relative;
-		display: flex;
-		padding: 16px;
-		border-bottom: solid 1px var(--divider);
-
-		&:last-child {
-			border-bottom: none;
-		}
-
-		> .avatar {
-			display: block;
-			flex-shrink: 0;
-			margin: 0 12px 0 0;
-			width: 42px;
-			height: 42px;
-			border-radius: 8px;
-		}
-
-		> .body {
-			flex: 1;
-
-			> .name {
-				font-weight: bold;
-						
-				> .name {
-					margin-right: 8px;
-				}
-
-				> .username {
-					opacity: 0.7;
-				}
-			}
-
-			> .description {
-				font-size: 90%;
-
-				> .empty {
-					opacity: 0.7;
-				}
-			}
-		}
-
-		> .koudoku-button {
-			flex-shrink: 0;
-		}
+	> .users {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		grid-gap: var(--margin);
 	}
 
 	> .more {
diff --git a/src/client/components/user-menu.vue b/src/client/components/user-menu.vue
deleted file mode 100644
index cbfa7b346d..0000000000
--- a/src/client/components/user-menu.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-<x-menu :source="source" :items="items" @closed="$emit('closed')"/>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug } from '@fortawesome/free-solid-svg-icons';
-import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import XMenu from './menu.vue';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { host } from '../config';
-import getAcct from '../../misc/acct/render';
-
-export default Vue.extend({
-	components: {
-		XMenu
-	},
-
-	props: ['user', 'source'],
-
-	data() {
-		let menu = [{
-			icon: faAt,
-			text: this.$t('copyUsername'),
-			action: () => {
-				copyToClipboard(`@${this.user.username}@${this.user.host || host}`);
-			}
-		}, {
-			icon: faEnvelope,
-			text: this.$t('sendMessage'),
-			action: () => {
-				this.$root.post({ specified: this.user });
-			}
-		}, this.$store.state.i.id != this.user.id ? {
-			type: 'link',
-			to: `/my/messaging/${getAcct(this.user)}`,
-			icon: faComments,
-			text: this.$t('startMessaging'),
-		} : undefined, null, {
-			icon: faListUl,
-			text: this.$t('addToList'),
-			action: this.pushList
-		}, this.$store.state.i.id != this.user.id ? {
-			icon: faUsers,
-			text: this.$t('inviteToGroup'),
-			action: this.inviteGroup
-		} : undefined] as any;
-
-		if (this.$store.getters.isSignedIn && this.$store.state.i.id != this.user.id) {
-			menu = menu.concat([null, {
-				icon: this.user.isMuted ? faEye : faEyeSlash,
-				text: this.user.isMuted ? this.$t('unmute') : this.$t('mute'),
-				action: this.toggleMute
-			}, {
-				icon: faBan,
-				text: this.user.isBlocking ? this.$t('unblock') : this.$t('block'),
-				action: this.toggleBlock
-			}]);
-
-			if (this.$store.getters.isSignedIn && (this.$store.state.i.isAdmin || this.$store.state.i.isModerator)) {
-				menu = menu.concat([null, {
-					icon: faMicrophoneSlash,
-					text: this.user.isSilenced ? this.$t('unsilence') : this.$t('silence'),
-					action: this.toggleSilence
-				}, {
-					icon: faSnowflake,
-					text: this.user.isSuspended ? this.$t('unsuspend') : this.$t('suspend'),
-					action: this.toggleSuspend
-				}]);
-			}
-		}
-
-		if (this.$store.getters.isSignedIn && this.$store.state.i.id === this.user.id) {
-			menu = menu.concat([null, {
-				icon: faPencilAlt,
-				text: this.$t('editProfile'),
-				action: () => {
-					this.$router.push('/my/settings');
-				}
-			}]);
-		}
-
-		if (this.$store.state.userActions.length > 0) {
-			menu = menu.concat([null, ...this.$store.state.userActions.map(action => ({
-				icon: faPlug,
-				text: action.title,
-				action: () => {
-					action.handler(this.user);
-				}
-			}))]);
-		}
-
-		return {
-			items: menu
-		};
-	},
-
-	methods: {
-		async pushList() {
-			const t = this.$t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
-			const lists = await this.$root.api('users/lists/list');
-			if (lists.length === 0) {
-				this.$root.dialog({
-					type: 'error',
-					text: this.$t('youHaveNoLists')
-				});
-				return;
-			}
-			const { canceled, result: listId } = await this.$root.dialog({
-				type: null,
-				title: t,
-				select: {
-					items: lists.map(list => ({
-						value: list.id, text: list.name
-					}))
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.$root.api('users/lists/push', {
-				listId: listId,
-				userId: this.user.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async inviteGroup() {
-			const groups = await this.$root.api('users/groups/owned');
-			if (groups.length === 0) {
-				this.$root.dialog({
-					type: 'error',
-					text: this.$t('youHaveNoGroups')
-				});
-				return;
-			}
-			const { canceled, result: groupId } = await this.$root.dialog({
-				type: null,
-				title: this.$t('group'),
-				select: {
-					items: groups.map(group => ({
-						value: group.id, text: group.name
-					}))
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.$root.api('users/groups/invite', {
-				groupId: groupId,
-				userId: this.user.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async toggleMute() {
-			this.$root.api(this.user.isMuted ? 'mute/delete' : 'mute/create', {
-				userId: this.user.id
-			}).then(() => {
-				this.user.isMuted = !this.user.isMuted;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}, e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async toggleBlock() {
-			if (!await this.getConfirmed(this.user.isBlocking ? this.$t('unblockConfirm') : this.$t('blockConfirm'))) return;
-
-			this.$root.api(this.user.isBlocking ? 'blocking/delete' : 'blocking/create', {
-				userId: this.user.id
-			}).then(() => {
-				this.user.isBlocking = !this.user.isBlocking;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}, e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async toggleSilence() {
-			if (!await this.getConfirmed(this.$t(this.user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
-
-			this.$root.api(this.user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
-				userId: this.user.id
-			}).then(() => {
-				this.user.isSilenced = !this.user.isSilenced;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}, e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async toggleSuspend() {
-			if (!await this.getConfirmed(this.$t(this.user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
-
-			this.$root.api(this.user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
-				userId: this.user.id
-			}).then(() => {
-				this.user.isSuspended = !this.user.isSuspended;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}, e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			});
-		},
-
-		async getConfirmed(text: string): Promise<Boolean> {
-			const confirm = await this.$root.dialog({
-				type: 'warning',
-				showCancelButton: true,
-				title: 'confirm',
-				text,
-			});
-
-			return !confirm.canceled;
-		},
-	}
-});
-</script>
diff --git a/src/client/components/user-name.vue b/src/client/components/user-name.vue
index 425cb587c4..bc93a8ea30 100644
--- a/src/client/components/user-name.vue
+++ b/src/client/components/user-name.vue
@@ -1,11 +1,11 @@
 <template>
-<mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index 410de6b488..d1a11dc790 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -1,44 +1,55 @@
 <template>
-<transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-	<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
-		<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>
-			<p class="username"><mk-acct :user="u"/></p>
-		</div>
-		<div class="description">
-			<mfm v-if="u.description" :text="u.description" :author="u" :i="$store.state.i" :custom-emojis="u.emojis"/>
-		</div>
-		<div class="status">
-			<div>
-				<p>{{ $t('notes') }}</p><span>{{ u.notesCount }}</span>
+<transition name="popup" appear @after-leave="$emit('closed')">
+	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
+		<div v-if="fetched" class="info">
+			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+			<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+			<div class="title">
+				<router-link class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></router-link>
+				<p class="username"><MkAcct :user="user"/></p>
 			</div>
-			<div>
-				<p>{{ $t('following') }}</p><span>{{ u.followingCount }}</span>
+			<div class="description">
+				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 			</div>
-			<div>
-				<p>{{ $t('followers') }}</p><span>{{ u.followersCount }}</span>
+			<div class="status">
+				<div>
+					<p>{{ $t('notes') }}</p><span>{{ user.notesCount }}</span>
+				</div>
+				<div>
+					<p>{{ $t('following') }}</p><span>{{ user.followingCount }}</span>
+				</div>
+				<div>
+					<p>{{ $t('followers') }}</p><span>{{ user.followersCount }}</span>
+				</div>
 			</div>
+			<MkFollowButton class="koudoku-button" v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" mini/>
+		</div>
+		<div v-else>
+			<MkLoading/>
 		</div>
-		<mk-follow-button class="koudoku-button" v-if="$store.getters.isSignedIn && u.id != $store.state.i.id" :user="u" mini/>
 	</div>
 </transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import parseAcct from '../../misc/acct/parse';
 import MkFollowButton from './follow-button.vue';
+import { userPage } from '../filters/user';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkFollowButton
 	},
 
 	props: {
-		user: {
-			type: [Object, String],
+		showing: {
+			type: Boolean,
+			required: true
+		},
+		q: {
+			type: String,
 			required: true
 		},
 		source: {
@@ -46,29 +57,30 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['closed', 'mouseover', 'mouseleave'],
+
 	data() {
 		return {
-			u: null,
-			show: false,
-			closed: false,
+			user: null,
+			fetched: false,
 			top: 0,
 			left: 0,
 		};
 	},
 
 	mounted() {
-		if (typeof this.user == 'object') {
-			this.u = this.user;
-			this.show = true;
+		if (typeof this.q == 'object') {
+			this.user = this.q;
+			this.fetched = true;
 		} else {
-			const query = this.user.startsWith('@') ?
-				parseAcct(this.user.substr(1)) :
-				{ userId: this.user };
-
-			this.$root.api('users/show', query).then(user => {
-				if (this.closed) return;
-				this.u = user;
-				this.show = true;
+			const query = this.q.startsWith('@') ?
+				parseAcct(this.q.substr(1)) :
+				{ userId: this.q };
+
+			os.api('users/show', query).then(user => {
+				if (!this.showing) return;
+				this.user = user;
+				this.fetched = true;
 			});
 		}
 
@@ -81,11 +93,7 @@ export default Vue.extend({
 	},
 
 	methods: {
-		close() {
-			this.closed = true;
-			this.show = false;
-			if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none';
-		}
+		userPage
 	}
 });
 </script>
@@ -94,7 +102,7 @@ export default Vue.extend({
 .popup-enter-active, .popup-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.popup-enter, .popup-leave-to {
+.popup-enter-from, .popup-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
@@ -104,78 +112,81 @@ export default Vue.extend({
 	z-index: 11000;
 	width: 300px;
 	overflow: hidden;
+	transform-origin: center top;
+
+	> .info {
+		> .banner {
+			height: 84px;
+			background-color: rgba(0, 0, 0, 0.1);
+			background-size: cover;
+			background-position: center;
+		}
 
-	> .banner {
-		height: 84px;
-		background-color: rgba(0, 0, 0, 0.1);
-		background-size: cover;
-		background-position: center;
-	}
+		> .avatar {
+			display: block;
+			position: absolute;
+			top: 62px;
+			left: 13px;
+			z-index: 2;
+			width: 58px;
+			height: 58px;
+			border: solid 3px var(--face);
+			border-radius: 8px;
+		}
 
-	> .avatar {
-		display: block;
-		position: absolute;
-		top: 62px;
-		left: 13px;
-		z-index: 2;
-		width: 58px;
-		height: 58px;
-		border: solid 3px var(--face);
-		border-radius: 8px;
-	}
+		> .title {
+			display: block;
+			padding: 8px 0 8px 82px;
 
-	> .title {
-		display: block;
-		padding: 8px 0 8px 82px;
+			> .name {
+				display: inline-block;
+				margin: 0;
+				font-weight: bold;
+				line-height: 16px;
+				word-break: break-all;
+			}
 
-		> .name {
-			display: inline-block;
-			margin: 0;
-			font-weight: bold;
-			line-height: 16px;
-			word-break: break-all;
+			> .username {
+				display: block;
+				margin: 0;
+				line-height: 16px;
+				font-size: 0.8em;
+				color: var(--text);
+				opacity: 0.7;
+			}
 		}
 
-		> .username {
-			display: block;
-			margin: 0;
-			line-height: 16px;
+		> .description {
+			padding: 0 16px;
 			font-size: 0.8em;
 			color: var(--text);
-			opacity: 0.7;
 		}
-	}
 
-	> .description {
-		padding: 0 16px;
-		font-size: 0.8em;
-		color: var(--text);
-	}
+		> .status {
+			padding: 8px 16px;
 
-	> .status {
-		padding: 8px 16px;
+			> div {
+				display: inline-block;
+				width: 33%;
 
-		> div {
-			display: inline-block;
-			width: 33%;
+				> p {
+					margin: 0;
+					font-size: 0.7em;
+					color: var(--text);
+				}
 
-			> p {
-				margin: 0;
-				font-size: 0.7em;
-				color: var(--text);
-			}
-
-			> span {
-				font-size: 1em;
-				color: var(--accent);
+				> span {
+					font-size: 1em;
+					color: var(--accent);
+				}
 			}
 		}
-	}
 
-	> .koudoku-button {
-		position: absolute;
-		top: 8px;
-		right: 8px;
+		> .koudoku-button {
+			position: absolute;
+			top: 8px;
+			right: 8px;
+		}
 	}
 }
 </style>
diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue
new file mode 100644
index 0000000000..e7bfcafbb3
--- /dev/null
+++ b/src/client/components/user-select-dialog.vue
@@ -0,0 +1,169 @@
+<template>
+<XModalWindow ref="dialog"
+	:with-ok-button="true"
+	:ok-button-disabled="selected == null"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ $t('selectUser') }}</template>
+	<div class="tbhwbxda _section">
+		<div class="inputs">
+			<MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></MkInput>
+			<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></MkInput>
+		</div>
+	</div>
+	<div class="tbhwbxda _section" :style="users.length > 0 ? 'padding: 0;' : ''">
+		<div class="users" v-if="users.length > 0">
+			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+				<MkAvatar :user="user" class="avatar" :disable-link="true"/>
+				<div class="body">
+					<MkUserName :user="user" class="name"/>
+					<MkAcct :user="user" class="acct"/>
+				</div>
+			</div>
+		</div>
+		<div v-else class="empty">
+			<span>{{ $t('noUsers') }}</span>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
+import MkInput from './ui/input.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		MkInput,
+		XModalWindow,
+	},
+
+	props: {
+	},
+
+	emits: ['ok', 'cancel', 'closed'],
+
+	data() {
+		return {
+			username: '',
+			host: '',
+			users: [],
+			selected: null,
+			faTimes, faCheck
+		};
+	},
+
+	mounted() {
+		this.focus();
+
+		this.$nextTick(() => {
+			this.focus();
+		});
+	},
+
+	methods: {
+		search() {
+			if (this.username == '' && this.host == '') {
+				this.users = [];
+				return;
+			}
+			os.api('users/search-by-username-and-host', {
+				username: this.username,
+				host: this.host,
+				limit: 10,
+				detail: false
+			}).then(users => {
+				this.users = users;
+			});
+		},
+
+		focus() {
+			this.$refs.username.focus();
+		},
+
+		ok() {
+			this.$emit('ok', this.selected);
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('cancel');
+			this.$refs.dialog.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.tbhwbxda {
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+	height: 100%;
+
+	> .inputs {
+		> .input {
+			display: inline-block;
+			width: 50%;
+			margin: 0;
+		}
+	}
+
+	> .users {
+		flex: 1;
+		overflow: auto;
+		padding: 8px 0;
+
+		> .user {
+			display: flex;
+			align-items: center;
+			padding: 8px var(--section-padding);
+			font-size: 14px;
+
+			&:hover {
+				background: var(--X7);
+			}
+
+			&.selected {
+				background: var(--accent);
+				color: #fff;
+			}
+
+			> * {
+				pointer-events: none;
+				user-select: none;
+			}
+
+			> .avatar {
+				width: 45px;
+				height: 45px;
+			}
+
+			> .body {
+				padding: 0 8px;
+				min-width: 0;
+
+				> .name {
+					display: block;
+					font-weight: bold;
+				}
+
+				> .acct {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .empty {
+		opacity: 0.7;
+		text-align: center;
+	}
+}
+</style>
diff --git a/src/client/components/user-select.vue b/src/client/components/user-select.vue
deleted file mode 100644
index a0d1f3432a..0000000000
--- a/src/client/components/user-select.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-<x-window ref="window" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="selected == null" @ok="ok()">
-	<template #header>{{ $t('selectUser') }}</template>
-	<div class="tbhwbxda">
-		<div class="inputs">
-			<mk-input v-model="username" class="input" @input="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
-			<mk-input v-model="host" class="input" @input="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
-		</div>
-		<div class="users">
-			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<mk-avatar :user="user" class="avatar" :disable-link="true"/>
-				<div class="body">
-					<mk-user-name :user="user" class="name"/>
-					<mk-acct :user="user" class="acct"/>
-				</div>
-			</div>
-		</div>
-	</div>
-</x-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
-import MkInput from './ui/input.vue';
-import XWindow from './window.vue';
-
-export default Vue.extend({
-	components: {
-		MkInput,
-		XWindow,
-	},
-
-	props: {
-	},
-
-	data() {
-		return {
-			username: '',
-			host: '',
-			users: [],
-			selected: null,
-			faTimes, faCheck
-		};
-	},
-
-	mounted() {
-		this.focus();
-
-		this.$nextTick(() => {
-			this.focus();
-		});
-	},
-
-	methods: {
-		search() {
-			if (this.username == '' && this.host == '') {
-				this.users = [];
-				return;
-			}
-			this.$root.api('users/search-by-username-and-host', {
-				username: this.username,
-				host: this.host,
-				limit: 10,
-				detail: false
-			}).then(users => {
-				this.users = users;
-			});
-		},
-
-		focus() {
-			this.$refs.username.focus();
-		},
-
-		close() {
-			this.$refs.window.close();
-		},
-
-		ok() {
-			this.$emit('selected', this.selected);
-			this.close();
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.tbhwbxda {
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-	height: 100%;
-		
-	> .inputs {
-		margin-top: 16px;
-
-		> .input {
-			display: inline-block;
-			width: 50%;
-			margin: 0;
-		}
-	}
-
-	> .users {
-		flex: 1;
-		overflow: auto;
-
-		> .user {
-			display: flex;
-			align-items: center;
-			padding: 8px 16px;
-			font-size: 14px;
-
-			&:hover {
-				background: var(--X7);
-			}
-
-			&.selected {
-				background: var(--accent);
-				color: #fff;
-			}
-
-			> * {
-				pointer-events: none;
-				user-select: none;
-			}
-
-			> .avatar {
-				width: 45px;
-				height: 45px;
-			}
-
-			> .body {
-				padding: 0 8px;
-				min-width: 0;
-
-				> .name {
-					display: block;
-					font-weight: bold;
-				}
-
-				> .acct {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 575d031182..c8ca93703d 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -1,43 +1,37 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="mk-users-dialog">
-		<div class="header">
-			<span>{{ title }}</span>
-			<button class="_button" @click="close()"><fa :icon="faTimes"/></button>
-		</div>
-
-		<div class="users">
-			<router-link v-for="item in items" class="user" :key="item.id" :to="extract ? extract(item) : item | userPage">
-				<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"/>
-					<mk-acct :user="extract ? extract(item) : item" class="acct"/>
-				</div>
-			</router-link>
-		</div>
-		<button class="more _button" ref="loadMore" v-show="more" @click="fetchMore" :disabled="moreFetching">
-			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><fa :icon="faSpinner" pulse fixed-width/></template>
-		</button>
-
-		<p class="empty" v-if="empty">{{ $t('noUsers') }}</p>
-
-		<mk-error v-if="error" @retry="init()"/>
+<div class="mk-users-dialog">
+	<div class="header">
+		<span>{{ title }}</span>
+		<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
 	</div>
-</x-modal>
+
+	<div class="users">
+		<router-link v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
+			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
+			<div class="body">
+				<MkUserName :user="extract ? extract(item) : item" class="name"/>
+				<MkAcct :user="extract ? extract(item) : item" class="acct"/>
+			</div>
+		</router-link>
+	</div>
+	<button class="more _button" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching">
+		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
+		<template v-if="moreFetching"><Fa :icon="faSpinner" pulse fixed-width/></template>
+	</button>
+
+	<p class="empty" v-if="empty">{{ $t('noUsers') }}</p>
+
+	<MkError v-if="error" @retry="init()"/>
+</div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import paging from '../scripts/paging';
-import XModal from './modal.vue';
-
-export default Vue.extend({
-	components: {
-		XModal,
-	},
+import paging from '@/scripts/paging';
+import { userPage } from '../filters/user';
 
+export default defineComponent({
 	mixins: [
 		paging({}),
 	],
@@ -61,9 +55,7 @@ export default Vue.extend({
 	},
 
 	methods: {
-		close() {
-			this.$refs.modal.close();
-		},
+		userPage
 	}
 });
 </script>
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
deleted file mode 100644
index 75368cd60d..0000000000
--- a/src/client/components/visibility-chooser.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-<x-popup :source="source" ref="popup" @closed="closed">
-	<div class="gqyayizv">
-		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
-			<div><fa :icon="faGlobe"/></div>
-			<div>
-				<span>{{ $t('_visibility.public') }}</span>
-				<span>{{ $t('_visibility.publicDescription') }}</span>
-			</div>
-		</button>
-		<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
-			<div><fa :icon="faHome"/></div>
-			<div>
-				<span>{{ $t('_visibility.home') }}</span>
-				<span>{{ $t('_visibility.homeDescription') }}</span>
-			</div>
-		</button>
-		<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
-			<div><fa :icon="faUnlock"/></div>
-			<div>
-				<span>{{ $t('_visibility.followers') }}</span>
-				<span>{{ $t('_visibility.followersDescription') }}</span>
-			</div>
-		</button>
-		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
-			<div><fa :icon="faEnvelope"/></div>
-			<div>
-				<span>{{ $t('_visibility.specified') }}</span>
-				<span>{{ $t('_visibility.specifiedDescription') }}</span>
-			</div>
-		</button>
-		<div class="divider"></div>
-		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
-			<div><fa :icon="faBiohazard"/></div>
-			<div>
-				<span>{{ $t('_visibility.localOnly') }}</span>
-				<span>{{ $t('_visibility.localOnlyDescription') }}</span>
-			</div>
-			<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
-		</button>
-	</div>
-</x-popup>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
-import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
-import XPopup from './popup.vue';
-
-export default Vue.extend({
-	components: {
-		XPopup
-	},
-	props: {
-		source: {
-			required: true
-		},
-		currentVisibility: {
-			type: String,
-			required: false
-		},
-		currentLocalOnly: {
-			type: Boolean,
-			required: false
-		}
-	},
-	data() {
-		return {
-			v: this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : (this.currentVisibility || this.$store.state.settings.defaultNoteVisibility),
-			localOnly: this.currentLocalOnly,
-			faGlobe, faUnlock, faEnvelope, faHome, faBiohazard, faToggleOn, faToggleOff
-		}
-	},
-	methods: {
-		choose(visibility) {
-			if (this.$store.state.settings.rememberNoteVisibility) {
-				this.$store.commit('deviceUser/setVisibility', visibility);
-			}
-			this.$emit('chosen', { visibility, localOnly: this.localOnly });
-			this.destroyDom();
-		},
-		closed() {
-			this.$emit('closed');
-			// localOnly フラグの更新の為に chosen イベントも呼ぶ
-			this.choose(this.v);
-			this.destroyDom();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.gqyayizv {
-	width: 240px;
-	padding: 8px 0;
-
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 1px var(--divider);
-	}
-
-	> button {
-		display: flex;
-		padding: 8px 14px;
-		font-size: 12px;
-		text-align: left;
-		width: 100%;
-		box-sizing: border-box;
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
-
-		&:active {
-			background: rgba(0, 0, 0, 0.1);
-		}
-
-		&.active {
-			color: #fff;
-			background: var(--accent);
-		}
-
-		&.localOnly.active {
-			color: var(--accent);
-			background: inherit;
-		}
-
-		> *:nth-child(1) {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-right: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-
-		> *:nth-child(2) {
-			flex: 1 1 auto;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> span:first-child {
-				display: block;
-				font-weight: bold;
-			}
-
-			> span:last-child:not(:first-child) {
-				opacity: 0.6;
-			}
-		}
-
-		> *:nth-child(3) {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-left: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/visibility-picker.vue b/src/client/components/visibility-picker.vue
new file mode 100644
index 0000000000..06901378b7
--- /dev/null
+++ b/src/client/components/visibility-picker.vue
@@ -0,0 +1,173 @@
+<template>
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="gqyayizv _popup">
+		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
+			<div><Fa :icon="faGlobe"/></div>
+			<div>
+				<span>{{ $t('_visibility.public') }}</span>
+				<span>{{ $t('_visibility.publicDescription') }}</span>
+			</div>
+		</button>
+		<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
+			<div><Fa :icon="faHome"/></div>
+			<div>
+				<span>{{ $t('_visibility.home') }}</span>
+				<span>{{ $t('_visibility.homeDescription') }}</span>
+			</div>
+		</button>
+		<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
+			<div><Fa :icon="faUnlock"/></div>
+			<div>
+				<span>{{ $t('_visibility.followers') }}</span>
+				<span>{{ $t('_visibility.followersDescription') }}</span>
+			</div>
+		</button>
+		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
+			<div><Fa :icon="faEnvelope"/></div>
+			<div>
+				<span>{{ $t('_visibility.specified') }}</span>
+				<span>{{ $t('_visibility.specifiedDescription') }}</span>
+			</div>
+		</button>
+		<div class="divider"></div>
+		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
+			<div><Fa :icon="faBiohazard"/></div>
+			<div>
+				<span>{{ $t('_visibility.localOnly') }}</span>
+				<span>{{ $t('_visibility.localOnlyDescription') }}</span>
+			</div>
+			<div><Fa :icon="localOnly ? faToggleOn : faToggleOff" :key="localOnly"/></div>
+		</button>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
+import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
+import MkModal from '@/components/ui/modal.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+	},
+	props: {
+		currentVisibility: {
+			type: String,
+			required: false
+		},
+		currentLocalOnly: {
+			type: Boolean,
+			required: false
+		},
+		src: {
+			required: false
+		},
+	},
+	emits: ['change-visibility', 'change-local-only', 'closed'],
+	data() {
+		return {
+			v: this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : (this.currentVisibility || this.$store.state.settings.defaultNoteVisibility),
+			localOnly: this.currentLocalOnly,
+			faGlobe, faUnlock, faEnvelope, faHome, faBiohazard, faToggleOn, faToggleOff
+		}
+	},
+	watch: {
+		localOnly() {
+			this.$emit('change-local-only', this.localOnly);
+		}
+	},
+	methods: {
+		choose(visibility) {
+			this.v = visibility;
+			if (this.$store.state.settings.rememberNoteVisibility) {
+				this.$store.commit('deviceUser/setVisibility', visibility);
+			}
+			this.$emit('change-visibility', visibility);
+			this.$nextTick(() => {
+				this.$refs.modal.close();
+			});
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.gqyayizv {
+	width: 240px;
+	padding: 8px 0;
+
+	> .divider {
+		margin: 8px 0;
+		border-top: solid 1px var(--divider);
+	}
+
+	> button {
+		display: flex;
+		padding: 8px 14px;
+		font-size: 12px;
+		text-align: left;
+		width: 100%;
+		box-sizing: border-box;
+
+		&:hover {
+			background: rgba(0, 0, 0, 0.05);
+		}
+
+		&:active {
+			background: rgba(0, 0, 0, 0.1);
+		}
+
+		&.active {
+			color: #fff;
+			background: var(--accent);
+		}
+
+		&.localOnly.active {
+			color: var(--accent);
+			background: inherit;
+		}
+
+		> *:nth-child(1) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-right: 10px;
+			width: 16px;
+			top: 0;
+			bottom: 0;
+			margin-top: auto;
+			margin-bottom: auto;
+		}
+
+		> *:nth-child(2) {
+			flex: 1 1 auto;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			> span:first-child {
+				display: block;
+				font-weight: bold;
+			}
+
+			> span:last-child:not(:first-child) {
+				opacity: 0.6;
+			}
+		}
+
+		> *:nth-child(3) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 10px;
+			width: 16px;
+			top: 0;
+			bottom: 0;
+			margin-top: auto;
+			margin-bottom: auto;
+		}
+	}
+}
+</style>
diff --git a/src/client/components/window.vue b/src/client/components/window.vue
deleted file mode 100644
index a0bff869b9..0000000000
--- a/src/client/components/window.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }" :can-close="canClose">
-	<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown" :style="{ width: `${width}px`, height: `${height}px` }">
-		<div class="header">
-			<button class="_button" v-if="withOkButton" @click="close()"><fa :icon="faTimes"/></button>
-			<span class="title">
-				<mk-avatar :user="avatar" v-if="avatar" class="avatar"/>
-				<slot name="header"></slot>
-			</span>
-			<button class="_button" v-if="!withOkButton" @click="close()"><fa :icon="faTimes"/></button>
-			<button class="_button" v-if="withOkButton" @click="() => { $emit('ok'); close(); }" :disabled="okButtonDisabled"><fa :icon="faCheck"/></button>
-		</div>
-		<div class="body">
-			<slot></slot>
-		</div>
-	</div>
-</x-modal>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
-import XModal from './modal.vue';
-
-export default Vue.extend({
-	components: {
-		XModal,
-	},
-
-	props: {
-		avatar: {
-			type: Object,
-			required: false
-		},
-		withOkButton: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		okButtonDisabled: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		noPadding: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		width: {
-			type: Number,
-			required: false,
-			default: 400
-		},
-		height: {
-			type: Number,
-			required: false,
-			default: 400
-		},
-		canClose: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-
-	data() {
-		return {
-			faTimes, faCheck
-		};
-	},
-
-	methods: {
-		close() {
-			this.$refs.modal.close();
-		},
-
-		onKeydown(e) {
-			if (e.which === 27) { // Esc
-				e.preventDefault();
-				e.stopPropagation();
-				this.close();
-			}
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ebkgoccj {
-	background: var(--panel);
-	border-radius: var(--radius);
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-
-	> .header {
-		$height: 58px;
-		$height-narrow: 42px;
-		display: flex;
-		flex-shrink: 0;
-
-		> button {
-			height: $height;
-			width: $height;
-
-			@media (max-width: 500px) {
-				height: $height-narrow;
-				width: $height-narrow;
-			}
-		}
-
-		> .title {
-			flex: 1;
-			line-height: $height;
-			padding-left: 32px;
-			font-weight: bold;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			pointer-events: none;
-
-			@media (max-width: 500px) {
-				line-height: $height-narrow;
-				padding-left: 16px;
-			}
-
-			> .avatar {
-				$size: 32px;
-				height: $size;
-				width: $size;
-				margin: (($height - $size) / 2) 8px (($height - $size) / 2) 0;
-
-				@media (max-width: 500px) {
-					$size: 24px;
-					height: $size;
-					width: $size;
-					margin: (($height-narrow - $size) / 2) 8px (($height-narrow - $size) / 2) 0;
-				}
-			}
-		}
-
-		> button + .title {
-			padding-left: 0;
-		}
-	}
-
-	> .body {
-		overflow: auto;
-	}
-
-	&:not(.noPadding) > .body {
-		padding: 0 32px 32px 32px;
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
-	}
-}
-</style>
-- 
cgit v1.2.3-freya