From d79a1a4e0ef028ffcae68c847dfe55222aa4a69a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 6 Sep 2020 18:38:09 +0900
Subject: [PATCH] wip

---
 src/client/components/autocomplete.vue        |  2 +-
 .../components/deck/notifications-column.vue  |  2 +-
 src/client/components/dialog.vue              |  9 ++-
 src/client/components/media-image.vue         |  2 +-
 src/client/components/menu.vue                |  4 +-
 src/client/components/note.vue                | 20 +++---
 src/client/components/particle.vue            | 70 +++++++++++--------
 src/client/components/post-form.vue           |  8 +--
 .../components/reactions-viewer.reaction.vue  |  2 +-
 src/client/components/sidebar.vue             |  4 +-
 src/client/deck.vue                           |  2 +-
 src/client/default.vue                        |  2 +-
 src/client/directives/index.ts                |  2 +-
 src/client/directives/particle.ts             | 14 ++--
 src/client/os.ts                              | 35 +++++++---
 src/client/pages/index.welcome.entrance.vue   |  4 +-
 src/client/pages/instance/federation.vue      |  2 +-
 src/client/pages/instance/index.vue           |  2 +-
 src/client/pages/instance/instance.vue        |  6 +-
 src/client/pages/instance/settings.vue        |  4 +-
 src/client/pages/instance/users.vue           |  2 +-
 src/client/pages/messaging/index.vue          |  2 +-
 .../pages/messaging/messaging-room.form.vue   |  2 +-
 .../pages/my-antennas/index.antenna.vue       |  2 +-
 src/client/pages/my-groups/group.vue          |  4 +-
 src/client/pages/my-lists/list.vue            |  2 +-
 src/client/pages/my-settings/api.vue          |  2 +-
 src/client/pages/my-settings/index.vue        |  2 +-
 src/client/pages/my-settings/reaction.vue     |  4 +-
 src/client/pages/preferences/plugins.vue      |  2 +-
 src/client/pages/share.vue                    |  2 +-
 src/client/pages/user/index.vue               |  2 +-
 src/client/scripts/please-login.ts            | 14 ++--
 src/client/store.ts                           | 21 +-----
 src/client/widgets/notifications.vue          |  2 +-
 src/client/widgets/welcome.vue                |  4 +-
 36 files changed, 135 insertions(+), 130 deletions(-)

diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index 27a8fcdcb4..2ec6e8a3b9 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -376,7 +376,7 @@ export default defineComponent({
 
 		chooseUser() {
 			this.close();
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				this.complete('user', user);
 			});
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index c6f6b2bbdb..a8ffbaa575 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -43,7 +43,7 @@ export default defineComponent({
 			icon: faCog,
 			text: this.$t('notificationSetting'),
 			action: async () => {
-				this.$root.new(await import('../notification-setting-window.vue'), {
+				os.popup(await import('../notification-setting-window.vue'), {
 					includingTypes: this.column.includingTypes,
 				}).$on('ok', async ({ includingTypes }) => {
 					this.$set(this.column, 'includingTypes', includingTypes);
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 52d9dea8b1..9aab76c730 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<x-modal ref="modal" @closed="$store.commit('removePopup', id)" @click="onBgClick" :showing="showing">
+<x-modal ref="modal" @closed="destroy" @click="onBgClick" :showing="showing">
 	<div class="mk-dialog" :class="{ iconOnly }">
 		<template v-if="type == 'signin'">
 			<mk-signin/>
@@ -65,7 +65,10 @@ export default defineComponent({
 	},
 
 	props: {
-		id: {
+		destroy: {
+			required: true
+		},
+		emit: {
 			required: true
 		},
 		type: {
@@ -160,7 +163,7 @@ export default defineComponent({
 	methods: {
 		done(canceled, result?) {
 			this.showing = false;
-			os.dialogCallbacks[this.id]({ canceled, result });
+			this.emit({ canceled, result });
 		},
 
 		async ok() {
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index dc5e0a73bb..3facebd970 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -72,7 +72,7 @@ export default defineComponent({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = this.$root.new(ImageViewer, {
+				const viewer = os.popup(ImageViewer, {
 					image: this.image
 				});
 				this.$once('hook:beforeDestroy', () => {
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index 71920b15e8..b9789a4ea3 100644
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -1,5 +1,5 @@
 <template>
-<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$store.commit('removePopup', id)" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="destroy" :showing="showing">
 	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>
@@ -44,7 +44,7 @@ export default defineComponent({
 		XModal
 	},
 	props: {
-		id: {
+		destroy: {
 			required: true
 		},
 		source: {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 88ad6abe9d..e74ec55d06 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -110,7 +110,7 @@ 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 { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { url } from '@/config';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
@@ -441,7 +441,7 @@ export default defineComponent({
 		},
 
 		reply(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.$root.post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
@@ -451,7 +451,7 @@ export default defineComponent({
 		},
 
 		renote(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
 			os.menu({
 				items: [{
@@ -483,21 +483,19 @@ export default defineComponent({
 		},
 
 		react(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			const picker = this.$root.new(MkReactionPicker, {
+			const close = os.popup(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				showFocus: viaKeyboard,
-			});
-			picker.$once('chosen', reaction => {
+			}, reaction => {
 				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction
 				}).then(() => {
-					picker.close();
+					close();
 				});
-			});
-			picker.$once('closed', this.focus);
+			}, this.focus);
 		},
 
 		reactDirectly(reaction) {
@@ -516,7 +514,7 @@ export default defineComponent({
 		},
 
 		favorite() {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			os.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
diff --git a/src/client/components/particle.vue b/src/client/components/particle.vue
index 29da5201b8..3fe0256cf6 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>
@@ -52,6 +57,9 @@ import * as os from '@/os';
 
 export default defineComponent({
 	props: {
+		destroy: {
+			required: true
+		},
 		x: {
 			type: Number,
 			required: true
@@ -86,7 +94,7 @@ export default defineComponent({
 	},
 	mounted() {
 		setTimeout(() => {
-			this.destroyDom();
+			this.destroy();
 		}, 1100);
 	}
 });
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index c8fcc61d76..5422261f11 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -417,7 +417,7 @@ export default defineComponent({
 				// TODO: information dialog
 				return;
 			}
-			const w = this.$root.new(MkVisibilityChooser, {
+			const w = os.popup(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
 				currentVisibility: this.visibility,
 				currentLocalOnly: this.localOnly
@@ -433,7 +433,7 @@ export default defineComponent({
 		},
 
 		addVisibleUser() {
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				this.visibleUsers.push(user);
 			});
@@ -597,14 +597,14 @@ export default defineComponent({
 		},
 
 		insertMention() {
-			const vm = this.$root.new(MkUserSelect, {});
+			const vm = os.popup(MkUserSelect, {});
 			vm.$once('selected', user => {
 				insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
 			});
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('./emoji-picker.vue'), {
+			const vm = os.popup(await import('./emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index 761d130496..f61374b7e2 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -111,7 +111,7 @@ export default defineComponent({
 
 				this.closeDetails();
 				if (!this.isHovering) return;
-				this.details = this.$root.new(XDetails, {
+				this.details = os.popup(XDetails, {
 					reaction: this.reaction,
 					users,
 					count: this.count,
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index d3e0e237ee..1f60a1bdb1 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -276,7 +276,7 @@ export default defineComponent({
 		},
 
 		async addAcount() {
-			this.$root.new(await import('./signin-dialog.vue')).$once('login', res => {
+			os.popup(await import('./signin-dialog.vue')).$once('login', res => {
 				this.$store.dispatch('addAcount', res);
 				os.dialog({
 					type: 'success',
@@ -286,7 +286,7 @@ export default defineComponent({
 		},
 
 		async createAccount() {
-			this.$root.new(await import('./signup-dialog.vue')).$once('signup', res => {
+			os.popup(await import('./signup-dialog.vue')).$once('signup', res => {
 				this.$store.dispatch('addAcount', res);
 				this.switchAccountWithToken(res.i);
 			});
diff --git a/src/client/deck.vue b/src/client/deck.vue
index d957e0d4a8..15883fb933 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -166,7 +166,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('@/components/toast.vue'), {
+				os.popup(await import('@/components/toast.vue'), {
 					notification
 				});
 			}
diff --git a/src/client/default.vue b/src/client/default.vue
index 0f095a25ae..96b2d484fd 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -335,7 +335,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('@/components/toast.vue'), {
+				os.popup(await import('@/components/toast.vue'), {
 					notification
 				});
 			}
diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts
index 09e638d165..4ff90fa7fd 100644
--- a/src/client/directives/index.ts
+++ b/src/client/directives/index.ts
@@ -11,6 +11,6 @@ export default function(app: App) {
 	app.directive('userPreview', userPreview);
 	app.directive('user-preview', userPreview);
 	app.directive('size', size);
-	//app.directive('particle', particle);
+	app.directive('particle', particle);
 	app.directive('tooltip', tooltip);
 }
diff --git a/src/client/directives/particle.ts b/src/client/directives/particle.ts
index 5a892bc6b2..cde6cedc58 100644
--- a/src/client/directives/particle.ts
+++ b/src/client/directives/particle.ts
@@ -1,24 +1,18 @@
 import Particle from '@/components/particle.vue';
+import { popup } from '@/os';
 
 export default {
-	bind(el, binding, vn) {
+	mounted(el, binding, vn) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
+
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();
 
 			const x = rect.left + (el.clientWidth / 2);
 			const y = rect.top + (el.clientHeight / 2);
 
-			const particle = new Particle({
-				parent: vn.context,
-				propsData: {
-					x,
-					y
-				}
-			}).$mount();
-
-			document.body.appendChild(particle.$el);
+			popup(Particle, { x, y });
 		});
 	}
 };
diff --git a/src/client/os.ts b/src/client/os.ts
index 87ba2c5c07..9fbae46fe8 100644
--- a/src/client/os.ts
+++ b/src/client/os.ts
@@ -1,4 +1,4 @@
-import { defineAsyncComponent } from 'vue';
+import { Component, defineAsyncComponent } from 'vue';
 import Stream from '@/scripts/stream';
 import { store } from '@/store';
 import { apiUrl } from '@/config';
@@ -8,8 +8,6 @@ export const isMobile = /mobile|iphone|ipad|android/.test(ua);
 
 export const stream = new Stream();
 
-export const dialogCallbacks = {};
-
 export function api(endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) {
 	store.commit('beginApiRequest');
 
@@ -46,17 +44,36 @@ export function api(endpoint: string, data: Record<string, any> = {}, token?: st
 	return promise;
 }
 
+export function popup(component: Component, props: Record<string, any>, eventHandler?: Function, closedCallback?: Function) {
+	const id = Math.random().toString(); // TODO: uuidとか使う
+	const destroy = () => {
+		store.commit('removePopup', id);
+		if (closedCallback) closedCallback();
+	};
+	const popup = {
+		component,
+		props: {
+			...props,
+			destroy,
+			emit: (...args) => {
+				if (eventHandler) eventHandler(...args);
+			}
+		},
+		id,
+	};
+	store.commit('addPopup', popup);
+	return destroy;
+}
+
 export function dialog(props: Record<string, any>) {
-	return store.dispatch('popup', {
-		component: defineAsyncComponent(() => import('@/components/dialog.vue')),
-		props
+	return new Promise((res, rej) => {
+		popup(defineAsyncComponent(() => import('@/components/dialog.vue')), props, res);
 	});
 }
 
 export function menu(props: Record<string, any>) {
-	return store.dispatch('popup', {
-		component: defineAsyncComponent(() => import('@/components/menu.vue')),
-		props
+	return new Promise((res, rej) => {
+		return popup(defineAsyncComponent(() => import('@/components/menu.vue')), props, res);
 	});
 }
 
diff --git a/src/client/pages/index.welcome.entrance.vue b/src/client/pages/index.welcome.entrance.vue
index cd12f1a22a..d1fab0b236 100644
--- a/src/client/pages/index.welcome.entrance.vue
+++ b/src/client/pages/index.welcome.entrance.vue
@@ -54,13 +54,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			this.$root.new(XSigninDialog, {
+			os.popup(XSigninDialog, {
 				autoSet: true
 			});
 		},
 
 		signup() {
-			this.$root.new(XSignupDialog, {
+			os.popup(XSignupDialog, {
 				autoSet: true
 			});
 		}
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 9340fc672d..81860eee12 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -125,7 +125,7 @@ export default defineComponent({
 		},
 
 		info(instance) {
-			this.$root.new(MkInstanceInfo, {
+			os.popup(MkInstanceInfo, {
 				instance: instance
 			});
 		}
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index c5e045e4f3..668a4a2e1f 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -550,7 +550,7 @@ export default defineComponent({
 					host: q
 				});
 			}
-			this.$root.new(MkInstanceInfo, {
+			os.popup(MkInstanceInfo, {
 				instance: instance
 			});
 		},
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index bbc6d34f93..88cbce5514 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -439,7 +439,7 @@ export default defineComponent({
 		},
 
 		showFollowing() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceFollowing'),
 				pagination: {
 					endpoint: 'federation/following',
@@ -453,7 +453,7 @@ export default defineComponent({
 		},
 
 		showFollowers() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceFollowers'),
 				pagination: {
 					endpoint: 'federation/followers',
@@ -467,7 +467,7 @@ export default defineComponent({
 		},
 
 		showUsers() {
-			this.$root.new(MkUsersDialog, {
+			os.popup(MkUsersDialog, {
 				title: this.$t('instanceUsers'),
 				pagination: {
 					endpoint: 'federation/users',
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 6377725fce..294ec4fb03 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -452,7 +452,7 @@ export default defineComponent({
 		},
 
 		addPinUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.pinnedUsers = this.pinnedUsers.trim();
 				this.pinnedUsers += '\n@' + getAcct(user);
 				this.pinnedUsers = this.pinnedUsers.trim();
@@ -460,7 +460,7 @@ export default defineComponent({
 		},
 
 		chooseProxyAccount() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.proxyAccount = user;
 				this.proxyAccountId = user.id;
 				this.save(true);
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 2b3ae27e30..56bfa353fe 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -180,7 +180,7 @@ export default defineComponent({
 		},
 
 		searchUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.show(user);
 			});
 		},
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index e739f5e942..f5ab27ce02 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -132,7 +132,7 @@ export default defineComponent({
 		},
 
 		async startUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.$router.push(`/my/messaging/${getAcct(user)}`);
 			});
 		},
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index ef72c2fffe..07d21bbf14 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('@/components/emoji-picker.vue'), {
+			const vm = os.popup(await import('@/components/emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index b885dbaceb..67f69a1250 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -177,7 +177,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				this.users = this.users.trim();
 				this.users += '\n@' + getAcct(user);
 				this.users = this.users.trim();
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index c34a4af934..580aa345cf 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 
 		invite() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/groups/invite', {
 					groupId: this.group.id,
 					userId: user.id
@@ -134,7 +134,7 @@ export default defineComponent({
 		},
 
 		transfer() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/groups/transfer', {
 					groupId: this.group.id,
 					userId: user.id
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 41e65af12c..961cf02404 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 		},
 
 		addUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+			os.popup(MkUserSelect, {}).$once('selected', user => {
 				os.api('users/lists/push', {
 					listId: this.list.id,
 					userId: user.id
diff --git a/src/client/pages/my-settings/api.vue b/src/client/pages/my-settings/api.vue
index 03f69144b0..a6a8fc5017 100644
--- a/src/client/pages/my-settings/api.vue
+++ b/src/client/pages/my-settings/api.vue
@@ -26,7 +26,7 @@ export default defineComponent({
 	},
 	methods: {
 		async generateToken() {
-			this.$root.new(await import('@/components/token-generate-window.vue'), {
+			os.popup(await import('@/components/token-generate-window.vue'), {
 			}).$on('ok', async ({ name, permissions }) => {
 				const { token } = await os.api('miauth/gen-token', {
 					session: null,
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 9cd04094e8..c20ccae65a 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -114,7 +114,7 @@ export default defineComponent({
 		},
 
 		async configure() {
-			this.$root.new(await import('@/components/notification-setting-window.vue'), {
+			os.popup(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.$store.state.i.includingNotificationTypes,
 				showGlobalToggle: false,
 			}).$on('ok', async ({ includingTypes: value }: any) => {
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index cc0c2aad14..586a9e330d 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 		},
 
 		preview(ev) {
-			const picker = this.$root.new(MkReactionPicker, {
+			const picker = os.popup(MkReactionPicker, {
 				source: ev.currentTarget || ev.target,
 				reactions: this.splited,
 				showFocus: false,
@@ -73,7 +73,7 @@ export default defineComponent({
 		},
 
 		async chooseEmoji(ev) {
-			const vm = this.$root.new(await import('@/components/emoji-picker.vue'), {
+			const vm = os.popup(await import('@/components/emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				this.reactions += emoji;
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index 995932e7bc..6f4df5aed3 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 			}
 
 			const token = permissions == null || permissions.length === 0 ? null : await new Promise(async (res, rej) => {
-				this.$root.new(await import('@/components/token-generate-window.vue'), {
+				os.popup(await import('@/components/token-generate-window.vue'), {
 					title: this.$t('tokenRequested'),
 					information: this.$t('pluginTokenRequestedDescription'),
 					initialName: name,
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index 6dd452404e..809a07876c 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 			if (this.title) text += `【${this.title}】\n`;
 			if (this.text) text += `${this.text}\n`;
 			if (this.url) text += `${this.url}`;
-			this.$root.new(PostFormDialog, {
+			os.popup(PostFormDialog, {
 				instant: true,
 				initialText: text.trim()
 			}).$once('posted', () => {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 00fce1c892..7a2ca72564 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -189,7 +189,7 @@ export default defineComponent({
 		},
 
 		menu() {
-			this.$root.new(XUserMenu, {
+			os.popup(XUserMenu, {
 				source: this.$refs.menu,
 				user: this.user
 			});
diff --git a/src/client/scripts/please-login.ts b/src/client/scripts/please-login.ts
index 6ca78d3cc9..f4b9384931 100644
--- a/src/client/scripts/please-login.ts
+++ b/src/client/scripts/please-login.ts
@@ -1,10 +1,14 @@
-export default ($root: any) => {
-	if ($root.$store.getters.isSignedIn) return;
+import { locale } from '@/i18n';
+import { dialog } from '@/os';
+import { store } from '@/store';
 
-	os.dialog({
-		title: $root.$t('signinRequired'),
+export function pleaseLogin() {
+	if (store.getters.isSignedIn) return;
+
+	dialog({
+		title: locale['signinRequired'],
 		text: null
 	});
 
 	throw new Error('signin required');
-};
+}
diff --git a/src/client/store.ts b/src/client/store.ts
index f9ce4eed9e..c2a2b98068 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -5,7 +5,7 @@ import { faSatelliteDish, faTerminal, faHashtag, faBroadcastTower, faFireAlt, fa
 import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
 import { AiScript, utils, values } from '@syuilo/aiscript';
 import { deckmode } from '@/config';
-import { api, dialogCallbacks } from '@/os';
+import { api } from '@/os';
 import { erase } from '../prelude/array';
 
 export const defaultSettings = {
@@ -371,25 +371,6 @@ export const store = createStore({
 				ctx.commit('settings/init', me.clientData);
 			}
 		},
-
-		popup(ctx, { component, props }) {
-			return new Promise((res, rej) => {
-				const id = Math.random().toString(); // TODO: uuidとか使う
-				const popup = {
-					component,
-					props: {
-						...props,
-						id
-					},
-					id,
-				};
-				dialogCallbacks[id] = result => {
-					delete dialogCallbacks[id];
-					res(result);
-				};
-				ctx.commit('addPopup', popup);
-			});
-		},
 	},
 
 	modules: {
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 7e2b6f3e8c..71b56b3808 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -51,7 +51,7 @@ export default defineComponent({
 
 	methods: {
 		async configure() {
-			this.$root.new(await import('@/components/notification-setting-window.vue'), {
+			os.popup(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.props.includingTypes,
 			}).$on('ok', async ({ includingTypes }) => {
 				this.props.includingTypes = includingTypes;
diff --git a/src/client/widgets/welcome.vue b/src/client/widgets/welcome.vue
index 62f7aab88c..b8ca7664f1 100644
--- a/src/client/widgets/welcome.vue
+++ b/src/client/widgets/welcome.vue
@@ -52,13 +52,13 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			this.$root.new(XSigninDialog, {
+			os.popup(XSigninDialog, {
 				autoSet: true
 			});
 		},
 
 		signup() {
-			this.$root.new(XSignupDialog, {
+			os.popup(XSignupDialog, {
 				autoSet: true
 			});
 		}