diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index 3196f50a03..67536f4f23 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 	methods: {
 		async setAntenna() {
 			const antennas = await this.$root.api('antennas/list');
-			const { canceled, result: antenna } = await this.$root.showDialog({
+			const { canceled, result: antenna } = await this.$store.dispatch('showDialog', {
 				title: this.$t('selectAntenna'),
 				type: null,
 				select: {
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index e91b4d1169..9a744e2d6b 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -137,7 +137,7 @@ export default defineComponent({
 				icon: faPencilAlt,
 				text: this.$t('rename'),
 				action: () => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						title: this.$t('rename'),
 						input: {
 							default: this.column.name,
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index 9353f5b1b1..fdd6ce3449 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 	methods: {
 		async setList() {
 			const lists = await this.$root.api('users/lists/list');
-			const { canceled, result: list } = await this.$root.showDialog({
+			const { canceled, result: list } = await this.$store.dispatch('showDialog', {
 				title: this.$t('selectList'),
 				type: null,
 				select: {
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
index 9500b7d5b6..6be7061857 100644
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 
 	methods: {
 		async setType() {
-			const { canceled, result: src } = await this.$root.showDialog({
+			const { canceled, result: src } = await this.$store.dispatch('showDialog', {
 				title: this.$t('timeline'),
 				type: null,
 				select: {
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index 91fb7b81e0..bbe7310064 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -128,7 +128,7 @@ export default defineComponent({
 		},
 
 		rename() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('renameFile'),
 				input: {
 					placeholder: this.$t('inputNewFileName'),
@@ -153,7 +153,7 @@ export default defineComponent({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -172,7 +172,7 @@ export default defineComponent({
 		},
 
 		async deleteFile() {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
 				showCancelButton: true
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 93fff52278..155c567018 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -149,13 +149,13 @@ export default defineComponent({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.showDialog({
+							this.$store.dispatch('showDialog', {
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.showDialog({
+							this.$store.dispatch('showDialog', {
 								type: 'error',
 								text: this.$t('error')
 							});
@@ -189,7 +189,7 @@ export default defineComponent({
 		},
 
 		rename() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -217,14 +217,14 @@ export default defineComponent({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index a5d81620c2..5fe5ebd21d 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -282,13 +282,13 @@ export default defineComponent({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.showDialog({
+							this.$store.dispatch('showDialog', {
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.showDialog({
+							this.$store.dispatch('showDialog', {
 								type: 'error',
 								text: this.$t('error')
 							});
@@ -303,7 +303,7 @@ export default defineComponent({
 		},
 
 		urlUpload() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('uploadFromUrl'),
 				input: {
 					placeholder: this.$t('uploadFromUrlDescription')
@@ -315,7 +315,7 @@ export default defineComponent({
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					title: this.$t('uploadFromUrlRequested'),
 					text: this.$t('uploadFromUrlMayTakeTime')
 				});
@@ -323,7 +323,7 @@ export default defineComponent({
 		},
 
 		createFolder() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('createFolder'),
 				input: {
 					placeholder: this.$t('folderName')
@@ -340,7 +340,7 @@ export default defineComponent({
 		},
 
 		renameFolder(folder) {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -367,14 +367,14 @@ export default defineComponent({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index f09e9780f8..e5732e8e34 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -91,7 +91,7 @@ export default defineComponent({
 
 			try {
 				if (this.isFollowing) {
-					const { canceled } = await this.$root.showDialog({
+					const { canceled } = await this.$store.dispatch('showDialog', {
 						type: 'warning',
 						text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
 						showCancelButton: true
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 2fb5e58a86..05ef5d6f9b 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -519,7 +519,7 @@ export default defineComponent({
 			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -527,7 +527,7 @@ export default defineComponent({
 		},
 
 		del() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('noteDeleteConfirm'),
 				showCancelButton: true
@@ -541,7 +541,7 @@ export default defineComponent({
 		},
 
 		delEdit() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('deleteAndEditConfirm'),
 				showCancelButton: true
@@ -560,7 +560,7 @@ export default defineComponent({
 			this.$root.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -571,7 +571,7 @@ export default defineComponent({
 			this.$root.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -716,7 +716,7 @@ export default defineComponent({
 
 		copyContent() {
 			copyToClipboard(this.appearNote.text);
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -724,7 +724,7 @@ export default defineComponent({
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.appearNote.id}`);
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -734,13 +734,13 @@ export default defineComponent({
 			this.$root.api(pin ? 'i/pin' : 'i/unpin', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
 				if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: this.$t('pinLimitExceeded')
 					});
@@ -749,7 +749,7 @@ export default defineComponent({
 		},
 
 		async promote() {
-			const { canceled, result: days } = await this.$root.showDialog({
+			const { canceled, result: days } = await this.$store.dispatch('showDialog', {
 				title: this.$t('numberOfDays'),
 				input: { type: 'number' }
 			});
@@ -760,12 +760,12 @@ export default defineComponent({
 				noteId: this.appearNote.id,
 				expiresAt: Date.now() + (86400000 * days)
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index d2e5e22a0e..e2ca5f2dc7 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 		acceptGroupInvitation() {
 			this.groupInviteDone = true;
 			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
index e2e6523428..c14073b751 100644
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -24,7 +24,7 @@ export default defineComponent({
 		click() {
 			if (this.value.action === 'dialog') {
 				this.hpml.eval();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					text: this.hpml.interpolate(this.value.content)
 				});
 			} else if (this.value.action === 'resetRandom') {
@@ -39,7 +39,7 @@ export default defineComponent({
 					} : {})
 				});
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					text: this.hpml.interpolate(this.value.message)
 				});
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index a2cdade8df..db453e8ef8 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -44,7 +44,7 @@ export default defineComponent({
 	methods: {
 		upload() {
 			return new Promise((ok) => {
-				const dialog = this.$root.showDialog({
+				const dialog = this.$store.dispatch('showDialog', {
 					type: 'waiting',
 					text: this.$t('uploading') + '...',
 					showOkButton: false,
@@ -80,7 +80,7 @@ export default defineComponent({
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index 11c0a6cfe9..12e60859ad 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -49,7 +49,7 @@ export default defineComponent({
 					ast = parse(this.page.script);
 				} catch (e) {
 					console.error(e);
-					/*this.$root.showDialog({
+					/*this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: 'Syntax error :('
 					});*/
@@ -59,7 +59,7 @@ export default defineComponent({
 					this.hpml.eval();
 				}).catch(e => {
 					console.error(e);
-					/*this.$root.showDialog({
+					/*this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});*/
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 078b7037d7..dd37ca2097 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -62,7 +62,7 @@ export default defineComponent({
 			});
 		},
 		async rename(file) {
-			const { canceled, result } = await this.$root.showDialog({
+			const { canceled, result } = await this.$store.dispatch('showDialog', {
 				title: this.$t('enterFileName'),
 				input: {
 					default: file.name
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 0e446e465f..88738ae41a 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -469,7 +469,7 @@ export default defineComponent({
 			if (!this.renote && !this.quoteId && paste.startsWith(url + '/notes/')) {
 				e.preventDefault();
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'info',
 					text: this.$t('quoteQuestion'),
 					showCancelButton: true
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index 98fb038a61..513312bc13 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -127,7 +127,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -277,7 +277,7 @@ export default defineComponent({
 		async addAcount() {
 			this.$root.new(await import('./signin-dialog.vue')).$once('login', res => {
 				this.$store.dispatch('addAcount', res);
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -297,7 +297,7 @@ export default defineComponent({
 		},
 
 		switchAccountWithToken(token: string) {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				iconOnly: true
 			});
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index 2fa79103e2..3ad21200a4 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -145,7 +145,7 @@ export default defineComponent({
 				this.$emit('login', res);
 			}).catch(err => {
 				if (err === null) return;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('signinFailed')
 				});
@@ -166,7 +166,7 @@ export default defineComponent({
 						this.challengeData = res;
 						return this.queryKey();
 					}).catch(() => {
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							text: this.$t('signinFailed')
 						});
@@ -186,7 +186,7 @@ export default defineComponent({
 				}).then(res => {
 					this.$emit('login', res);
 				}).catch(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: this.$t('loginFailed')
 					});
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 6f99037443..7d3f8b34f8 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -193,7 +193,7 @@ export default defineComponent({
 				this.$refs.hcaptcha?.reset?.();
 				this.$refs.recaptcha?.reset?.();
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('error')
 				});
diff --git a/src/client/components/user-menu.vue b/src/client/components/user-menu.vue
index 65719431e9..7547905cd6 100644
--- a/src/client/components/user-menu.vue
+++ b/src/client/components/user-menu.vue
@@ -100,13 +100,13 @@ export default defineComponent({
 			const t = this.$t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
 			const lists = await this.$root.api('users/lists/list');
 			if (lists.length === 0) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('youHaveNoLists')
 				});
 				return;
 			}
-			const { canceled, result: listId } = await this.$root.showDialog({
+			const { canceled, result: listId } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: t,
 				select: {
@@ -121,12 +121,12 @@ export default defineComponent({
 				listId: listId,
 				userId: this.user.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -136,13 +136,13 @@ export default defineComponent({
 		async inviteGroup() {
 			const groups = await this.$root.api('users/groups/owned');
 			if (groups.length === 0) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('youHaveNoGroups')
 				});
 				return;
 			}
-			const { canceled, result: groupId } = await this.$root.showDialog({
+			const { canceled, result: groupId } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('group'),
 				select: {
@@ -157,12 +157,12 @@ export default defineComponent({
 				groupId: groupId,
 				userId: this.user.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -174,12 +174,12 @@ export default defineComponent({
 				userId: this.user.id
 			}).then(() => {
 				this.user.isMuted = !this.user.isMuted;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -193,12 +193,12 @@ export default defineComponent({
 				userId: this.user.id
 			}).then(() => {
 				this.user.isBlocking = !this.user.isBlocking;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -212,12 +212,12 @@ export default defineComponent({
 				userId: this.user.id
 			}).then(() => {
 				this.user.isSilenced = !this.user.isSilenced;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -231,12 +231,12 @@ export default defineComponent({
 				userId: this.user.id
 			}).then(() => {
 				this.user.isSuspended = !this.user.isSuspended;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -244,7 +244,7 @@ export default defineComponent({
 		},
 
 		async getConfirmed(text: string): Promise<Boolean> {
-			const confirm = await this.$root.showDialog({
+			const confirm = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				showCancelButton: true,
 				title: 'confirm',
diff --git a/src/client/deck.vue b/src/client/deck.vue
index 3585cd7264..613d462dda 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -141,7 +141,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -183,7 +183,7 @@ export default defineComponent({
 				'direct',
 			];
 
-			const { canceled, result: column } = await this.$root.showDialog({
+			const { canceled, result: column } = await this.$store.dispatch('showDialog', {
 				title: this.$t('_deck.addColumn'),
 				type: null,
 				select: {
diff --git a/src/client/default.vue b/src/client/default.vue
index d1f990d02f..552082a899 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -301,7 +301,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -351,7 +351,7 @@ export default defineComponent({
 		},
 
 		async addWidget(place) {
-			const { canceled, result: widget } = await this.$root.showDialog({
+			const { canceled, result: widget } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('chooseWidget'),
 				select: {
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index 608bfbae01..cdc7dc97c7 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -92,7 +92,7 @@ export default defineComponent({
 				params.channelId = this.channelId;
 				this.$root.api('channels/update', params)
 				.then(channel => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
@@ -100,7 +100,7 @@ export default defineComponent({
 			} else {
 				this.$root.api('channels/create', params)
 				.then(channel => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/follow.vue b/src/client/pages/follow.vue
index 641f8758b9..bb75b71613 100644
--- a/src/client/pages/follow.vue
+++ b/src/client/pages/follow.vue
@@ -11,7 +11,7 @@ export default defineComponent({
 		const acct = new URL(location.href).searchParams.get('acct');
 		if (acct == null) return;
 
-		const dialog = this.$root.showDialog({
+		const dialog = this.$store.dispatch('showDialog', {
 			type: 'waiting',
 			text: this.$t('fetchingAsApObject') + '...',
 			showOkButton: false,
@@ -26,7 +26,7 @@ export default defineComponent({
 				if (res.type == 'User') {
 					this.follow(res.object);
 				} else {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: 'Not a user'
 					}).then(() => {
@@ -34,7 +34,7 @@ export default defineComponent({
 					});
 				}
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				}).then(() => {
@@ -47,7 +47,7 @@ export default defineComponent({
 			this.$root.api('users/show', parseAcct(acct)).then(user => {
 				this.follow(user);
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				}).then(() => {
@@ -61,7 +61,7 @@ export default defineComponent({
 
 	methods: {
 		async follow(user) {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'question',
 				text: this.$t('followConfirm', { name: user.name || user.username }),
 				showCancelButton: true
@@ -75,14 +75,14 @@ export default defineComponent({
 			this.$root.api('following/create', {
 				userId: user.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				}).then(() => {
 					window.close();
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				}).then(() => {
diff --git a/src/client/pages/index.welcome.setup.vue b/src/client/pages/index.welcome.setup.vue
index a9d5ef6925..e26bf8394d 100644
--- a/src/client/pages/index.welcome.setup.vue
+++ b/src/client/pages/index.welcome.setup.vue
@@ -57,7 +57,7 @@ export default defineComponent({
 			}).catch(() => {
 				this.submitting = false;
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('error')
 				});
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 2b5dbf9df6..0cc15b10b3 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 		},
 
 		remove(announcement) {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: announcement.title }),
 				showCancelButton: true
@@ -82,24 +82,24 @@ export default defineComponent({
 		save(announcement) {
 			if (announcement.id == null) {
 				this.$root.api('admin/announcements/create', announcement).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						text: this.$t('saved')
 					});
 				}).catch(e => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});
 				});
 			} else {
 				this.$root.api('admin/announcements/update', announcement).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						text: this.$t('saved')
 					});
 				}).catch(e => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index ea3273448e..9fa7ecd696 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -128,7 +128,7 @@ export default defineComponent({
 		async add(e) {
 			const files = await selectFile(this, e.currentTarget || e.target, null, true);
 
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				text: this.$t('doing') + '...',
 				showOkButton: false,
@@ -141,7 +141,7 @@ export default defineComponent({
 			})))
 			.then(() => {
 				this.$refs.emojis.reload();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -159,7 +159,7 @@ export default defineComponent({
 				aliases: this.aliases.split(' '),
 			});
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -168,7 +168,7 @@ export default defineComponent({
 		},
 
 		async del() {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.selected.name }),
 				showCancelButton: true
@@ -187,12 +187,12 @@ export default defineComponent({
 				emojiId: this.selectedRemote.id,
 			}).then(() => {
 				this.$refs.emojis.reload();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index bddc6ee04f..657ea1f743 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -34,7 +34,7 @@ export default defineComponent({
 
 	methods: {
 		clear() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('clearCachedFilesConfirm'),
 				showCancelButton: true
@@ -42,7 +42,7 @@ export default defineComponent({
 				if (canceled) return;
 
 				this.$root.api('admin/drive/clean-remote-files', {}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index e678115651..0dde781acc 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -578,7 +578,7 @@ export default defineComponent({
 
 		deleteAllLogs() {
 			this.$root.api('admin/delete-logs').then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 76476728ab..bfbf9f9afc 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -255,7 +255,7 @@ export default defineComponent({
 			this.$root.api('admin/federation/remove-all-following', {
 				host: this.instance.host
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -266,7 +266,7 @@ export default defineComponent({
 			this.$root.api('admin/federation/delete-all-files', {
 				host: this.instance.host
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 49cb960820..e14149e942 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -57,7 +57,7 @@ export default defineComponent({
 
 	methods: {
 		clear() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				title: this.$t('clearQueueConfirmTitle'),
 				text: this.$t('clearQueueConfirmText'),
@@ -66,7 +66,7 @@ export default defineComponent({
 				if (canceled) return;
 
 				this.$root.api('admin/queue/clear', {}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index 157b28a552..7ffa07d553 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 			}).then((relay: any) => {
 				this.refresh();
 			}).catch((e: any) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message || e
 				});
@@ -74,7 +74,7 @@ export default defineComponent({
 			}).then(() => {
 				this.refresh();
 			}).catch((e: any) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message || e
 				});
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 3231a49538..49ae165b13 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -402,7 +402,7 @@ export default defineComponent({
 	mounted() {
 		this.$refs.enableHcaptcha.$on('change', () => {
 			if (this.enableHcaptcha && this.enableRecaptcha) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'question', // warning だと間違って cancel するかもしれない
 					showCancelButton: true,
 					title: this.$t('settingGuide'),
@@ -419,7 +419,7 @@ export default defineComponent({
 
 		this.$refs.enableRecaptcha.$on('change', () => {
 			if (this.enableRecaptcha && this.enableHcaptcha) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'question', // warning だと間違って cancel するかもしれない
 					showCancelButton: true,
 					title: this.$t('settingGuide'),
@@ -438,12 +438,12 @@ export default defineComponent({
 	methods: {
 		invite() {
 			this.$root.api('admin/invite').then(x => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'info',
 					text: x.code
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -472,12 +472,12 @@ export default defineComponent({
 				subject: 'Test email',
 				text: 'Yo'
 			}).then(x => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					splash: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -546,13 +546,13 @@ export default defineComponent({
 			}).then(() => {
 				this.$store.dispatch('instance/fetch');
 				if (withDialog) {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 0f0eae107e..580b8f3553 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 
 		async updateRemoteUser() {
 			await this.$root.api('admin/update-remote-user', { userId: this.user.id }).then(res => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -98,7 +98,7 @@ export default defineComponent({
 		},
 
 		async resetPassword() {
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				iconOnly: true
 			});
@@ -106,12 +106,12 @@ export default defineComponent({
 			this.$root.api('admin/reset-password', {
 				userId: this.user.id,
 			}).then(({ password }) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					text: this.$t('newPasswordIs', { password })
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -121,7 +121,7 @@ export default defineComponent({
 		},
 
 		async toggleSilence() {
-			const confirm = await this.$root.showDialog({
+			const confirm = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				showCancelButton: true,
 				text: this.silenced ? this.$t('silenceConfirm') : this.$t('unsilenceConfirm'),
@@ -135,7 +135,7 @@ export default defineComponent({
 		},
 
 		async toggleSuspend() {
-			const confirm = await this.$root.showDialog({
+			const confirm = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				showCancelButton: true,
 				text: this.suspended ? this.$t('suspendConfirm') : this.$t('unsuspendConfirm'),
@@ -154,7 +154,7 @@ export default defineComponent({
 		},
 
 		async deleteAllFiles() {
-			const confirm = await this.$root.showDialog({
+			const confirm = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				showCancelButton: true,
 				text: this.$t('deleteAllFilesConfirm'),
@@ -162,13 +162,13 @@ export default defineComponent({
 			if (confirm.canceled) return;
 			const process = async () => {
 				await this.$root.api('admin/delete-all-files-of-a-user', { userId: this.user.id });
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			};
 			await process().catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.toString()
 				});
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index e064e3a8f6..fb4468022c 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -152,7 +152,7 @@ export default defineComponent({
 				let _notFound = false;
 				const notFound = () => {
 					if (_notFound) {
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							text: this.$t('noSuchUser')
 						});
@@ -185,19 +185,19 @@ export default defineComponent({
 		},
 
 		async addUser() {
-			const { canceled: canceled1, result: username } = await this.$root.showDialog({
+			const { canceled: canceled1, result: username } = await this.$store.dispatch('showDialog', {
 				title: this.$t('username'),
 				input: true
 			});
 			if (canceled1) return;
 
-			const { canceled: canceled2, result: password } = await this.$root.showDialog({
+			const { canceled: canceled2, result: password } = await this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: { type: 'password' }
 			});
 			if (canceled2) return;
 
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				iconOnly: true
 			});
@@ -207,12 +207,12 @@ export default defineComponent({
 				password: password,
 			}).then(res => {
 				this.$refs.users.reload();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.id
 				});
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index e5a4bdf18e..d9bd60d5a9 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -140,14 +140,14 @@ export default defineComponent({
 			const groups1 = await this.$root.api('users/groups/owned');
 			const groups2 = await this.$root.api('users/groups/joined');
 			if (groups1.length === 0 && groups2.length === 0) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'warning',
 					title: this.$t('youHaveNoGroups'),
 					text: this.$t('joinOrCreateGroup'),
 				});
 				return;
 			}
-			const { canceled, result: group } = await this.$root.showDialog({
+			const { canceled, result: group } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('group'),
 				select: {
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index d8dbe5f64a..252ac214dd 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 					const ext = lio >= 0 ? file.name.slice(lio) : '';
 					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
 					const name = this.$store.state.settings.pasteDialog
-						? await this.$root.showDialog({
+						? await this.$store.dispatch('showDialog', {
 							title: this.$t('enterFileName'),
 							input: {
 								default: formatted
@@ -109,7 +109,7 @@ export default defineComponent({
 				}
 			} else {
 				if (items[0].kind == 'file') {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: this.$t('onlyOneFileCanBeAttached')
 					});
@@ -134,7 +134,7 @@ export default defineComponent({
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
 				e.preventDefault();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('onlyOneFileCanBeAttached')
 				});
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 4f11bfcd30..78078d02c0 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -144,7 +144,7 @@ export default defineComponent({
 				this.form.upload(e.dataTransfer.files[0]);
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('onlyOneFileCanBeAttached')
 				});
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index 1be459139c..fce863190b 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -150,14 +150,14 @@ export default defineComponent({
 				});
 			}
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},
 
 		async deleteAntenna() {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
 				showCancelButton: true
@@ -168,7 +168,7 @@ export default defineComponent({
 				antennaId: this.antenna.id,
 			});
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index c47aaa4621..cf86d703c2 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -93,12 +93,12 @@ export default defineComponent({
 					groupId: this.group.id,
 					userId: user.id
 				}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});
@@ -116,7 +116,7 @@ export default defineComponent({
 		},
 
 		async renameGroup() {
-			const { canceled, result: name } = await this.$root.showDialog({
+			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
 				title: this.$t('groupName'),
 				input: {
 					default: this.group.name
@@ -138,12 +138,12 @@ export default defineComponent({
 					groupId: this.group.id,
 					userId: user.id
 				}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});
@@ -152,7 +152,7 @@ export default defineComponent({
 		},
 
 		async deleteGroup() {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.group.name }),
 				showCancelButton: true
@@ -162,7 +162,7 @@ export default defineComponent({
 			await this.$root.api('users/groups/delete', {
 				groupId: this.group.id
 			});
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/my-groups/index.vue b/src/client/pages/my-groups/index.vue
index 055586f160..88410b78ef 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -82,14 +82,14 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const { canceled, result: name } = await this.$root.showDialog({
+			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
 				title: this.$t('groupName'),
 				input: true
 			});
 			if (canceled) return;
 			await this.$root.api('users/groups/create', { name: name });
 			this.$refs.owned.reload();
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -98,7 +98,7 @@ export default defineComponent({
 			this.$root.api('users/groups/invitations/accept', {
 				invitationId: invitation.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 1ec6e0fb61..9cdbb2cb48 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -42,14 +42,14 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const { canceled, result: name } = await this.$root.showDialog({
+			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
 				title: this.$t('enterListName'),
 				input: true
 			});
 			if (canceled) return;
 			await this.$root.api('users/lists/create', { name: name });
 			this.$refs.list.reload();
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 06424115f4..b4c6af956f 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -93,12 +93,12 @@ export default defineComponent({
 					userId: user.id
 				}).then(() => {
 					this.users.push(user);
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});
@@ -116,7 +116,7 @@ export default defineComponent({
 		},
 
 		async renameList() {
-			const { canceled, result: name } = await this.$root.showDialog({
+			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
 				title: this.$t('enterListName'),
 				input: {
 					default: this.list.name
@@ -133,7 +133,7 @@ export default defineComponent({
 		},
 
 		async deleteList() {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.list.name }),
 				showCancelButton: true
@@ -143,7 +143,7 @@ export default defineComponent({
 			await this.$root.api('users/lists/delete', {
 				listId: this.list.id
 			});
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/my-settings/2fa.vue b/src/client/pages/my-settings/2fa.vue
index e7483c12a1..6d29c9b56e 100644
--- a/src/client/pages/my-settings/2fa.vue
+++ b/src/client/pages/my-settings/2fa.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 	},
 	methods: {
 		register() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: {
 					type: 'password'
@@ -105,7 +105,7 @@ export default defineComponent({
 		},
 
 		unregister() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: {
 					type: 'password'
@@ -118,7 +118,7 @@ export default defineComponent({
 					this.usePasswordLessLogin = false;
 					this.updatePasswordLessLogin();
 				}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
@@ -131,13 +131,13 @@ export default defineComponent({
 			this.$root.api('i/2fa/done', {
 				token: this.token
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 				this.$store.state.i.twoFactorEnabled = true;
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					iconOnly: true, autoClose: true
 				});
@@ -156,7 +156,7 @@ export default defineComponent({
 			}).then(key => {
 				this.registration = null;
 				key.lastUsed = new Date();
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -164,7 +164,7 @@ export default defineComponent({
 		},
 
 		unregisterKey(key) {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: {
 					type: 'password'
@@ -178,7 +178,7 @@ export default defineComponent({
 					this.usePasswordLessLogin = false;
 					this.updatePasswordLessLogin();
 				}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
@@ -187,7 +187,7 @@ export default defineComponent({
 		},
 
 		addSecurityKey() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: {
 					type: 'password'
diff --git a/src/client/pages/my-settings/api.vue b/src/client/pages/my-settings/api.vue
index d0fa8fab53..b96d5a7c3a 100644
--- a/src/client/pages/my-settings/api.vue
+++ b/src/client/pages/my-settings/api.vue
@@ -33,7 +33,7 @@ export default defineComponent({
 					permission: permissions,
 				});
 
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					title: this.$t('token'),
 					text: token
@@ -41,7 +41,7 @@ export default defineComponent({
 			});
 		},
 		regenerateToken() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				title: this.$t('password'),
 				input: {
 					type: 'password'
diff --git a/src/client/pages/my-settings/drive.vue b/src/client/pages/my-settings/drive.vue
index 4785d67a26..9612d6e42f 100644
--- a/src/client/pages/my-settings/drive.vue
+++ b/src/client/pages/my-settings/drive.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 		chooseUploadFolder() {
 			selectDriveFolder(this.$root, false).then(async folder => {
 				await this.$store.dispatch('settings/set', { key: 'uploadFolder', value: folder ? folder.id : null });
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/my-settings/import-export.vue b/src/client/pages/my-settings/import-export.vue
index 060d033c30..2a53c31638 100644
--- a/src/client/pages/my-settings/import-export.vue
+++ b/src/client/pages/my-settings/import-export.vue
@@ -45,12 +45,12 @@ export default defineComponent({
 				this.exportTarget == 'user-lists' ? 'i/export-user-lists' :
 				null, {})
 			.then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'info',
 					text: this.$t('exportRequested')
 				});
 			}).catch((e: any) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message
 				});
@@ -68,7 +68,7 @@ export default defineComponent({
 			data.append('file', file);
 			data.append('i', this.$store.state.i.token);
 
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				text: this.$t('uploading') + '...',
 				showOkButton: false,
@@ -85,7 +85,7 @@ export default defineComponent({
 				this.reqImport(f);
 			})
 			.catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
@@ -102,12 +102,12 @@ export default defineComponent({
 				null, {
 					fileId: file.id
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'info',
 					text: this.$t('importRequested')
 				});
 			}).catch((e: any) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message
 				});
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index bfbe19da7e..71ac2ea49d 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -122,7 +122,7 @@ export default defineComponent({
 				}).then(i => {
 					this.$store.state.i.includingNotificationTypes = i.includingNotificationTypes;
 				}).catch(err => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: err.message
 					});
diff --git a/src/client/pages/my-settings/profile.vue b/src/client/pages/my-settings/profile.vue
index 037fe39663..eba05167db 100644
--- a/src/client/pages/my-settings/profile.vue
+++ b/src/client/pages/my-settings/profile.vue
@@ -160,14 +160,14 @@ export default defineComponent({
 				this.$store.state.i.bannerUrl = i.bannerUrl;
 
 				if (notify) {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}
 			}).catch(err => {
 				this.saving = false;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: err.id
 				});
diff --git a/src/client/pages/my-settings/security.vue b/src/client/pages/my-settings/security.vue
index 6c52f114ae..c69864b2b7 100644
--- a/src/client/pages/my-settings/security.vue
+++ b/src/client/pages/my-settings/security.vue
@@ -25,7 +25,7 @@ export default defineComponent({
 
 	methods: {
 		async change() {
-			const { canceled: canceled1, result: currentPassword } = await this.$root.showDialog({
+			const { canceled: canceled1, result: currentPassword } = await this.$store.dispatch('showDialog', {
 				title: this.$t('currentPassword'),
 				input: {
 					type: 'password'
@@ -33,7 +33,7 @@ export default defineComponent({
 			});
 			if (canceled1) return;
 
-			const { canceled: canceled2, result: newPassword } = await this.$root.showDialog({
+			const { canceled: canceled2, result: newPassword } = await this.$store.dispatch('showDialog', {
 				title: this.$t('newPassword'),
 				input: {
 					type: 'password'
@@ -41,7 +41,7 @@ export default defineComponent({
 			});
 			if (canceled2) return;
 
-			const { canceled: canceled3, result: newPassword2 } = await this.$root.showDialog({
+			const { canceled: canceled3, result: newPassword2 } = await this.$store.dispatch('showDialog', {
 				title: this.$t('newPasswordRetype'),
 				input: {
 					type: 'password'
@@ -50,14 +50,14 @@ export default defineComponent({
 			if (canceled3) return;
 
 			if (newPassword !== newPassword2) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('retypedNotMatch')
 				});
 				return;
 			}
 
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				iconOnly: true
 			});
@@ -66,12 +66,12 @@ export default defineComponent({
 				currentPassword,
 				newPassword
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue
index 84bd485cab..0af28db400 100644
--- a/src/client/pages/page-editor/els/page-editor.el.if.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.if.vue
@@ -64,7 +64,7 @@ export default defineComponent({
 
 	methods: {
 		async add() {
-			const { canceled, result: type } = await this.$root.showDialog({
+			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.section.vue b/src/client/pages/page-editor/els/page-editor.el.section.vue
index ad4f08c9fd..097400d963 100644
--- a/src/client/pages/page-editor/els/page-editor.el.section.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.section.vue
@@ -62,7 +62,7 @@ export default defineComponent({
 
 	methods: {
 		async rename() {
-			const { canceled, result: title } = await this.$root.showDialog({
+			const { canceled, result: title } = await this.$store.dispatch('showDialog', {
 				title: 'Enter title',
 				input: {
 					type: 'text',
@@ -75,7 +75,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: type } = await this.$root.showDialog({
+			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue
index 9dd84e4193..b401f40c03 100644
--- a/src/client/pages/page-editor/page-editor.script-block.vue
+++ b/src/client/pages/page-editor/page-editor.script-block.vue
@@ -210,7 +210,7 @@ export default defineComponent({
 
 	methods: {
 		async changeType() {
-			const { canceled, result: type } = await this.$root.showDialog({
+			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('_pages.selectType'),
 				select: {
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index 45054ed53e..30fd14265b 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -239,14 +239,14 @@ export default defineComponent({
 			const onError = err => {
 				if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
 					if (err.info.param == 'name') {
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							type: 'error',
 							title: this.$t('_pages.invalidNameTitle'),
 							text: this.$t('_pages.invalidNameText')
 						});
 					}
 				} else if (err.code == 'NAME_ALREADY_EXISTS') {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						text: this.$t('_pages.nameAlreadyExists')
 					});
@@ -258,7 +258,7 @@ export default defineComponent({
 				this.$root.api('pages/update', options)
 				.then(page => {
 					this.currentName = this.name.trim();
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						text: this.$t('_pages.updated')
 					});
@@ -268,7 +268,7 @@ export default defineComponent({
 				.then(page => {
 					this.pageId = page.id;
 					this.currentName = this.name.trim();
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						text: this.$t('_pages.created')
 					});
@@ -278,7 +278,7 @@ export default defineComponent({
 		},
 
 		del() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.title.trim() }),
 				showCancelButton: true
@@ -287,7 +287,7 @@ export default defineComponent({
 				this.$root.api('pages/delete', {
 					pageId: this.pageId,
 				}).then(() => {
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'success',
 						text: this.$t('_pages.deleted')
 					});
@@ -297,7 +297,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: type } = await this.$root.showDialog({
+			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
@@ -312,7 +312,7 @@ export default defineComponent({
 		},
 
 		async addVariable() {
-			let { canceled, result: name } = await this.$root.showDialog({
+			let { canceled, result: name } = await this.$store.dispatch('showDialog', {
 				title: this.$t('_pages.enterVariableName'),
 				input: {
 					type: 'text',
@@ -324,7 +324,7 @@ export default defineComponent({
 			name = name.trim();
 
 			if (this.hpml.isUsedName(name)) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('_pages.variableNameIsAlreadyUsed')
 				});
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index f1152ff475..7f51cea859 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -105,7 +105,7 @@ export default defineComponent({
 			this.$root.api('i/update', {
 				pinnedPageId: pin ? this.page.id : null,
 			}).then(() => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 66ba80cc68..a38395f29b 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -295,7 +295,7 @@ export default defineComponent({
 
 	watch: {
 		lang() {
-			const dialog = this.$root.showDialog({
+			const dialog = this.$store.dispatch('showDialog', {
 				type: 'waiting',
 				iconOnly: true
 			});
@@ -306,7 +306,7 @@ export default defineComponent({
 				.then(() => location.reload())
 				.catch(() => {
 					dialog.close();
-					this.$root.showDialog({
+					this.$store.dispatch('showDialog', {
 						type: 'error',
 						iconOnly: true,
 						autoClose: true
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index dc87f29514..9873a18382 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -85,7 +85,7 @@ export default defineComponent({
 			try {
 				ast = parse(this.script);
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: 'Syntax error :('
 				});
@@ -93,7 +93,7 @@ export default defineComponent({
 			}
 			const meta = AiScript.collectMetadata(ast);
 			if (meta == null) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: 'No metadata found :('
 				});
@@ -101,7 +101,7 @@ export default defineComponent({
 			}
 			const data = meta.get(null);
 			if (data == null) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: 'No metadata found :('
 				});
@@ -109,7 +109,7 @@ export default defineComponent({
 			}
 			const { name, version, author, description, permissions, config } = data;
 			if (name == null || version == null || author == null) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: 'Required property not found :('
 				});
@@ -142,7 +142,7 @@ export default defineComponent({
 				ast: serialize(ast)
 			});
 
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -154,7 +154,7 @@ export default defineComponent({
 
 		uninstall() {
 			this.$store.commit('deviceUser/uninstallPlugin', this.selectedPluginId);
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/preferences/sidebar.vue b/src/client/pages/preferences/sidebar.vue
index 02d4129626..66c28c62df 100644
--- a/src/client/pages/preferences/sidebar.vue
+++ b/src/client/pages/preferences/sidebar.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 	methods: {
 		async addItem() {
 			const menu = Object.keys(this.menuDef).filter(k => !this.$store.state.deviceUser.menu.includes(k));
-			const { canceled, result: item } = await this.$root.showDialog({
+			const { canceled, result: item } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('addItem'),
 				select: {
diff --git a/src/client/pages/preferences/theme.vue b/src/client/pages/preferences/theme.vue
index 12f3273097..0cc958f03c 100644
--- a/src/client/pages/preferences/theme.vue
+++ b/src/client/pages/preferences/theme.vue
@@ -194,7 +194,7 @@ export default defineComponent({
 
 		copyThemeCode() {
 			copyToClipboard(this.selectedThemeCode);
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -206,21 +206,21 @@ export default defineComponent({
 			try {
 				theme = JSON5.parse(code);
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('_theme.invalid')
 				});
 				return false;
 			}
 			if (!validateTheme(theme)) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: this.$t('_theme.invalid')
 				});
 				return false;
 			}
 			if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'info',
 					text: this.$t('_theme.alreadyInstalled')
 				});
@@ -242,7 +242,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })
 			});
@@ -254,7 +254,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index f4c9e92c3c..663e10dc62 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -141,7 +141,7 @@ export default defineComponent({
 
 	beforeRouteLeave(to, from, next) {
 		if (this.changed) {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('leaveConfirm'),
 				showCancelButton: true
@@ -171,7 +171,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: id } = await this.$root.showDialog({
+			const { canceled, result: id } = await this.$store.dispatch('showDialog', {
 				type: null,
 				title: this.$t('_rooms.addFurniture'),
 				select: {
@@ -198,12 +198,12 @@ export default defineComponent({
 				room: room.getRoomInfo()
 			}).then(() => {
 				this.changed = false;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch((e: any) => {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message
 				});
@@ -211,7 +211,7 @@ export default defineComponent({
 		},
 
 		clear() {
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('_rooms.clearConfirm'),
 				showCancelButton: true
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 34a9d04d88..79891a994f 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -77,7 +77,7 @@ export default defineComponent({
 			}), {
 				in: (q) => {
 					return new Promise(ok => {
-						this.$root.showDialog({
+						this.$store.dispatch('showDialog', {
 							title: q,
 							input: {}
 						}).then(({ canceled, result: a }) => {
@@ -108,7 +108,7 @@ export default defineComponent({
 			try {
 				ast = parse(this.code);
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: 'Syntax error :('
 				});
@@ -117,7 +117,7 @@ export default defineComponent({
 			try {
 				await aiscript.exec(ast);
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index aeb1646e71..2de2a16838 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -64,7 +64,7 @@ export default defineComponent({
 				initialText: text.trim()
 			}).$once('posted', () => {
 				this.posted = true;
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index ddffc28196..42977e6690 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -155,7 +155,7 @@ export default defineComponent({
 		},
 
 		async confirm(): Promise<boolean> {
-			const { canceled } = await this.$root.showDialog({
+			const { canceled } = await this.$store.dispatch('showDialog', {
 				type: 'warning',
 				text: this.$t('leaveConfirm'),
 				showCancelButton: true
@@ -172,7 +172,7 @@ export default defineComponent({
 		},
 	
 		async del(i: number) {
-			const { canceled } = await this.$root.showDialog({ 
+			const { canceled } = await this.$store.dispatch('showDialog', { 
 				type: 'warning',
 				showCancelButton: true,
 				text: this.$t('_theme.deleteConstantConfirm', { const: this.theme[i][0] }),
@@ -182,7 +182,7 @@ export default defineComponent({
 		},
 	
 		async addConst() {
-			const { canceled, result } = await this.$root.showDialog({
+			const { canceled, result } = await this.$store.dispatch('showDialog', {
 				title: this.$t('_theme.inputConstantName'),
 				input: true
 			});
@@ -196,7 +196,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$root.showDialog({
+			this.$store.dispatch('showDialog', {
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })
 			});
@@ -208,7 +208,7 @@ export default defineComponent({
 			try {
 				applyTheme(theme, false);
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message
 				});
@@ -229,7 +229,7 @@ export default defineComponent({
 				this.theme = convertToViewModel(theme);
 				this.themeToImport = '';
 			} catch (e) {
-				this.$root.showDialog({
+				this.$store.dispatch('showDialog', {
 					type: 'error',
 					text: e.message
 				});
diff --git a/src/client/scripts/aiscript/api.ts b/src/client/scripts/aiscript/api.ts
index dad28ec38e..babf83bc03 100644
--- a/src/client/scripts/aiscript/api.ts
+++ b/src/client/scripts/aiscript/api.ts
@@ -9,14 +9,14 @@ export function createAiScriptEnv(vm, opts) {
 		USER_NAME: vm.$store.getters.isSignedIn ? values.STR(vm.$store.state.i.name) : values.NULL,
 		USER_USERNAME: vm.$store.getters.isSignedIn ? values.STR(vm.$store.state.i.username) : values.NULL,
 		'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
-			await vm.$root.showDialog({
+			await vm.$store.dispatch('showDialog', {
 				type: type ? type.value : 'info',
 				title: title.value,
 				text: text.value,
 			});
 		}),
 		'Mk:confirm': values.FN_NATIVE(async ([title, text, type]) => {
-			const confirm = await vm.$root.showDialog({
+			const confirm = await vm.$store.dispatch('showDialog', {
 				type: type ? type.value : 'question',
 				showCancelButton: true,
 				title: title.value,
diff --git a/src/client/scripts/hpml/evaluator.ts b/src/client/scripts/hpml/evaluator.ts
index a914b15ef3..8c8dcc82c0 100644
--- a/src/client/scripts/hpml/evaluator.ts
+++ b/src/client/scripts/hpml/evaluator.ts
@@ -42,7 +42,7 @@ export class Hpml {
 			}), ...initLib(this)}, {
 				in: (q) => {
 					return new Promise(ok => {
-						vm.$root.showDialog({
+						vm.$store.dispatch('showDialog', {
 							title: q,
 							input: {}
 						}).then(({ canceled, result: a }) => {
diff --git a/src/client/scripts/please-login.ts b/src/client/scripts/please-login.ts
index e4a9f40be7..78e9d99e60 100644
--- a/src/client/scripts/please-login.ts
+++ b/src/client/scripts/please-login.ts
@@ -1,7 +1,7 @@
 export default ($root: any) => {
 	if ($root.$store.getters.isSignedIn) return;
 
-	$root.showDialog({
+	$store.dispatch('showDialog', {
 		title: $root.$t('signinRequired'),
 		text: null
 	});
diff --git a/src/client/scripts/search.ts b/src/client/scripts/search.ts
index f96702b5b0..a9ab19d7c8 100644
--- a/src/client/scripts/search.ts
+++ b/src/client/scripts/search.ts
@@ -26,7 +26,7 @@ export async function search(v: any, q: string) {
 		}
 
 		v.$root.$emit('warp', date);
-		v.$root.showDialog({
+		v.$store.dispatch('showDialog', {
 			icon: faHistory,
 			iconOnly: true, autoClose: true
 		});
@@ -34,7 +34,7 @@ export async function search(v: any, q: string) {
 	}
 
 	if (q.startsWith('https://')) {
-		const dialog = v.$root.showDialog({
+		const dialog = v.$store.dispatch('showDialog', {
 			type: 'waiting',
 			text: v.$t('fetchingAsApObject') + '...',
 			showOkButton: false,
diff --git a/src/client/scripts/select-file.ts b/src/client/scripts/select-file.ts
index efff59d0ed..9e6f3e3fc1 100644
--- a/src/client/scripts/select-file.ts
+++ b/src/client/scripts/select-file.ts
@@ -10,7 +10,7 @@ export function selectFile(component: any, src: any, label: string | null, multi
 			input.type = 'file';
 			input.multiple = multiple;
 			input.onchange = () => {
-				const dialog = component.$root.showDialog({
+				const dialog = component.$store.dispatch('showDialog', {
 					type: 'waiting',
 					text: component.$t('uploading') + '...',
 					showOkButton: false,
@@ -35,7 +35,7 @@ export function selectFile(component: any, src: any, label: string | null, multi
 				Promise.all(promises).then(driveFiles => {
 					res(multiple ? driveFiles : driveFiles[0]);
 				}).catch(e => {
-					component.$root.showDialog({
+					component.$store.dispatch('showDialog', {
 						type: 'error',
 						text: e
 					});