From e33f2398f542a0f08c327de2fe6b88f01f6abeea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 6 Sep 2020 12:30:27 +0900
Subject: [PATCH] wip

---
 src/client/components/acct.vue                |  3 +-
 src/client/components/analog-clock.vue        |  1 +
 src/client/components/autocomplete.vue        |  9 ++-
 src/client/components/avatar.vue              |  3 +-
 src/client/components/avatars.vue             |  3 +-
 src/client/components/captcha.vue             |  1 +
 .../components/channel-follow-button.vue      |  5 +-
 src/client/components/channel-preview.vue     |  1 +
 src/client/components/code-core.vue           |  3 +-
 src/client/components/code.vue                |  1 +
 src/client/components/cw-button.vue           |  1 +
 src/client/components/date-separated-list.vue |  1 +
 src/client/components/deck/antenna-column.vue |  5 +-
 src/client/components/deck/column-core.vue    |  1 +
 src/client/components/deck/column.vue         |  5 +-
 src/client/components/deck/direct-column.vue  |  3 +-
 src/client/components/deck/list-column.vue    |  5 +-
 .../components/deck/mentions-column.vue       |  3 +-
 .../components/deck/notifications-column.vue  |  1 +
 src/client/components/deck/tl-column.vue      |  3 +-
 src/client/components/deck/widgets-column.vue |  5 +-
 src/client/components/dialog.vue              |  5 +-
 .../components/drive-file-thumbnail.vue       |  1 +
 src/client/components/drive-window.vue        |  1 +
 src/client/components/drive.file.vue          | 17 +++--
 src/client/components/drive.folder.vue        | 19 ++---
 src/client/components/drive.nav-folder.vue    |  5 +-
 src/client/components/drive.vue               | 37 ++++-----
 src/client/components/emoji-picker.vue        |  3 +-
 src/client/components/emoji.vue               |  3 +-
 src/client/components/error.vue               |  1 +
 src/client/components/file-type-icon.vue      |  1 +
 src/client/components/follow-button.vue       | 13 ++--
 src/client/components/form-window.vue         |  1 +
 src/client/components/formula-core.vue        |  3 +-
 src/client/components/formula.vue             |  3 +-
 src/client/components/google.vue              |  1 +
 src/client/components/header-clock.vue        |  1 +
 src/client/components/image-viewer.vue        |  1 +
 src/client/components/img-with-blurhash.vue   |  1 +
 src/client/components/instance-stats.vue      | 23 +++---
 src/client/components/link.vue                |  5 +-
 src/client/components/loading.vue             |  1 +
 src/client/components/media-banner.vue        |  1 +
 src/client/components/media-image.vue         |  3 +-
 src/client/components/media-list.vue          |  1 +
 src/client/components/media-video.vue         |  1 +
 src/client/components/mention.vue             |  3 +-
 src/client/components/menu.vue                |  7 +-
 src/client/components/mfm.ts                  |  3 +-
 src/client/components/mini-chart.vue          |  1 +
 .../components/misskey-flavored-markdown.vue  |  1 +
 src/client/components/modal.vue               |  3 +
 src/client/components/note-header.vue         |  1 +
 src/client/components/note-preview.vue        |  1 +
 src/client/components/note.sub.vue            |  3 +-
 src/client/components/note.vue                | 75 ++++++++++---------
 src/client/components/notes.vue               |  3 +-
 .../notification-setting-window.vue           |  1 +
 src/client/components/notification.vue        | 11 +--
 src/client/components/notifications.vue       |  3 +-
 src/client/components/page-preview.vue        |  1 +
 src/client/components/page/page.block.vue     |  1 +
 src/client/components/page/page.button.vue    |  7 +-
 src/client/components/page/page.canvas.vue    |  1 +
 src/client/components/page/page.counter.vue   |  1 +
 src/client/components/page/page.if.vue        |  1 +
 src/client/components/page/page.image.vue     |  1 +
 .../components/page/page.number-input.vue     |  1 +
 src/client/components/page/page.post.vue      |  9 ++-
 .../components/page/page.radio-button.vue     |  1 +
 src/client/components/page/page.section.vue   |  1 +
 src/client/components/page/page.switch.vue    |  1 +
 .../components/page/page.text-input.vue       |  1 +
 src/client/components/page/page.text.vue      |  1 +
 .../components/page/page.textarea-input.vue   |  1 +
 src/client/components/page/page.textarea.vue  |  1 +
 src/client/components/page/page.vue           |  9 ++-
 src/client/components/particle.vue            |  1 +
 src/client/components/poll-editor.vue         |  1 +
 src/client/components/poll.vue                |  3 +-
 src/client/components/post-form-attaches.vue  |  9 ++-
 src/client/components/post-form-dialog.vue    |  1 +
 src/client/components/post-form.vue           | 17 +++--
 src/client/components/reaction-icon.vue       |  3 +-
 src/client/components/reaction-picker.vue     |  1 +
 .../components/reactions-viewer.details.vue   |  1 +
 .../components/reactions-viewer.reaction.vue  |  9 ++-
 src/client/components/reactions-viewer.vue    |  1 +
 src/client/components/remote-caution.vue      |  1 +
 src/client/components/sidebar.vue             | 23 +++---
 src/client/components/signin-dialog.vue       |  1 +
 src/client/components/signin.vue              | 19 ++---
 src/client/components/signup-dialog.vue       |  1 +
 src/client/components/signup.vue              | 11 +--
 src/client/components/stream-indicator.vue    |  1 +
 src/client/components/sub-note-content.vue    |  1 +
 src/client/components/tab.vue                 |  1 +
 src/client/components/time.vue                |  1 +
 src/client/components/timeline.vue            |  1 +
 src/client/components/toast.vue               |  1 +
 .../components/token-generate-window.vue      |  1 +
 src/client/components/ui/button.vue           |  1 +
 src/client/components/ui/container.vue        |  1 +
 src/client/components/ui/folder.vue           |  1 +
 src/client/components/ui/hr.vue               |  3 +-
 src/client/components/ui/info.vue             |  1 +
 src/client/components/ui/input.vue            |  1 +
 src/client/components/ui/pagination.vue       |  3 +-
 src/client/components/ui/radio.vue            |  3 +-
 src/client/components/ui/range.vue            |  3 +-
 src/client/components/ui/select.vue           |  1 +
 src/client/components/ui/switch.vue           |  3 +-
 src/client/components/ui/textarea.vue         |  1 +
 src/client/components/ui/tooltip.vue          |  1 +
 src/client/components/uploader.vue            |  7 +-
 src/client/components/url-preview-popup.vue   |  1 +
 src/client/components/url-preview.vue         |  3 +-
 src/client/components/url.vue                 |  5 +-
 src/client/components/user-list.vue           |  3 +-
 src/client/components/user-menu.vue           | 55 +++++++-------
 src/client/components/user-name.vue           |  1 +
 src/client/components/user-preview.vue        |  3 +-
 src/client/components/user-select.vue         |  3 +-
 src/client/components/users-dialog.vue        |  3 +-
 src/client/components/visibility-chooser.vue  |  1 +
 src/client/components/window.vue              |  1 +
 src/client/config.ts                          |  1 +
 src/client/deck.vue                           | 19 ++---
 src/client/default.vue                        | 19 ++---
 src/client/directives/autocomplete.ts         |  2 +-
 src/client/directives/particle.ts             |  2 +-
 src/client/directives/tooltip.ts              |  4 +-
 src/client/directives/user-preview.ts         |  2 +-
 src/client/filters/user.ts                    |  4 +-
 src/client/i18n.ts                            |  4 +-
 src/client/init.ts                            | 16 ++--
 src/client/os.ts                              | 20 +++++
 src/client/pages/about-misskey.vue            |  5 +-
 src/client/pages/about.vue                    |  5 +-
 src/client/pages/announcements.vue            |  7 +-
 src/client/pages/apps.vue                     |  5 +-
 src/client/pages/auth.form.vue                |  7 +-
 src/client/pages/auth.vue                     |  7 +-
 src/client/pages/channel-editor.vue           | 21 +++---
 src/client/pages/channel.vue                  | 11 +--
 src/client/pages/channels.vue                 |  9 ++-
 src/client/pages/doc.vue                      |  5 +-
 src/client/pages/docs.vue                     |  3 +-
 src/client/pages/drive.vue                    |  5 +-
 src/client/pages/explore.vue                  | 11 +--
 src/client/pages/favorites.vue                |  5 +-
 src/client/pages/featured.vue                 |  5 +-
 src/client/pages/follow-requests.vue          |  7 +-
 src/client/pages/follow.vue                   | 21 +++---
 src/client/pages/index.home.tutorial.vue      |  3 +-
 src/client/pages/index.home.vue               | 17 +++--
 src/client/pages/index.vue                    |  1 +
 src/client/pages/index.welcome.entrance.vue   | 13 ++--
 src/client/pages/index.welcome.setup.vue      | 11 +--
 src/client/pages/index.welcome.vue            |  3 +-
 src/client/pages/instance/announcements.vue   | 25 ++++---
 src/client/pages/instance/emojis.vue          | 29 +++----
 src/client/pages/instance/federation.vue      |  9 ++-
 src/client/pages/instance/files.vue           | 11 +--
 .../pages/instance/index.queue-chart.vue      |  3 +-
 src/client/pages/instance/index.vue           | 31 ++++----
 src/client/pages/instance/instance.vue        | 29 +++----
 src/client/pages/instance/queue.chart.vue     |  3 +-
 src/client/pages/instance/queue.vue           |  9 ++-
 src/client/pages/instance/relays.vue          | 15 ++--
 src/client/pages/instance/settings.vue        | 41 +++++-----
 src/client/pages/instance/users.user.vue      | 45 +++++------
 src/client/pages/instance/users.vue           | 29 +++----
 src/client/pages/mentions.vue                 |  5 +-
 src/client/pages/messages.vue                 |  5 +-
 src/client/pages/messaging/index.vue          | 19 ++---
 .../pages/messaging/messaging-room.form.vue   | 15 ++--
 .../messaging/messaging-room.message.vue      |  5 +-
 src/client/pages/messaging/messaging-room.vue | 13 ++--
 src/client/pages/miauth.vue                   |  7 +-
 .../pages/my-antennas/index.antenna.vue       | 31 ++++----
 src/client/pages/my-antennas/index.vue        |  5 +-
 src/client/pages/my-groups/group.vue          | 35 ++++-----
 src/client/pages/my-groups/index.vue          | 21 +++---
 src/client/pages/my-lists/index.vue           | 11 +--
 src/client/pages/my-lists/list.vue            | 29 +++----
 src/client/pages/my-settings/2fa.vue          | 45 +++++------
 src/client/pages/my-settings/api.vue          | 15 ++--
 src/client/pages/my-settings/drive.vue        | 11 +--
 .../pages/my-settings/import-export.vue       | 23 +++---
 src/client/pages/my-settings/index.vue        | 21 +++---
 src/client/pages/my-settings/integration.vue  |  5 +-
 src/client/pages/my-settings/mute-block.vue   |  3 +-
 src/client/pages/my-settings/privacy.vue      |  7 +-
 src/client/pages/my-settings/profile.vue      | 23 +++---
 src/client/pages/my-settings/reaction.vue     |  9 ++-
 src/client/pages/my-settings/security.vue     | 19 ++---
 src/client/pages/my-settings/word-mute.vue    | 13 ++--
 src/client/pages/not-found.vue                |  1 +
 src/client/pages/note.vue                     | 15 ++--
 src/client/pages/notifications.vue            |  5 +-
 .../page-editor/els/page-editor.el.button.vue |  7 +-
 .../page-editor/els/page-editor.el.canvas.vue |  3 +-
 .../els/page-editor.el.counter.vue            |  3 +-
 .../page-editor/els/page-editor.el.if.vue     |  5 +-
 .../page-editor/els/page-editor.el.image.vue  |  7 +-
 .../els/page-editor.el.number-input.vue       |  3 +-
 .../page-editor/els/page-editor.el.post.vue   |  7 +-
 .../els/page-editor.el.radio-button.vue       |  5 +-
 .../els/page-editor.el.section.vue            |  5 +-
 .../page-editor/els/page-editor.el.switch.vue |  5 +-
 .../els/page-editor.el.text-input.vue         |  3 +-
 .../page-editor/els/page-editor.el.text.vue   |  1 +
 .../els/page-editor.el.textarea-input.vue     |  5 +-
 .../els/page-editor.el.textarea.vue           |  1 +
 .../pages/page-editor/page-editor.blocks.vue  |  1 +
 .../page-editor/page-editor.container.vue     |  1 +
 .../page-editor/page-editor.script-block.vue  |  7 +-
 src/client/pages/page-editor/page-editor.vue  | 53 ++++++-------
 src/client/pages/page.vue                     | 13 ++--
 src/client/pages/pages.vue                    |  9 ++-
 src/client/pages/preferences/index.vue        | 17 +++--
 src/client/pages/preferences/plugins.vue      | 27 +++----
 src/client/pages/preferences/sidebar.vue      |  9 ++-
 src/client/pages/preferences/theme.vue        | 29 +++----
 src/client/pages/room/preview.vue             |  1 +
 src/client/pages/room/room.vue                | 27 +++----
 src/client/pages/scratchpad.vue               | 13 ++--
 src/client/pages/search.vue                   |  5 +-
 src/client/pages/share.vue                    |  7 +-
 src/client/pages/tag.vue                      |  5 +-
 src/client/pages/test.vue                     |  9 ++-
 src/client/pages/theme-editor.vue             | 31 ++++----
 src/client/pages/user/follow-list.vue         |  5 +-
 src/client/pages/user/index.activity.vue      |  3 +-
 src/client/pages/user/index.photos.vue        |  5 +-
 src/client/pages/user/index.timeline.vue      |  3 +-
 src/client/pages/user/index.vue               | 17 +++--
 src/client/root.vue                           | 35 +--------
 src/client/scripts/aiscript/api.ts            |  6 +-
 src/client/scripts/gen-search-query.ts        |  4 +-
 src/client/scripts/get-static-image-url.ts    |  2 +-
 src/client/scripts/hpml/evaluator.ts          |  4 +-
 src/client/scripts/paging.ts                  |  5 +-
 src/client/scripts/please-login.ts            |  2 +-
 src/client/scripts/search.ts                  |  6 +-
 src/client/scripts/select-drive-file.ts       |  2 +-
 src/client/scripts/select-drive-folder.ts     |  2 +-
 src/client/scripts/select-file.ts             |  8 +-
 src/client/scripts/stream.ts                  |  2 +-
 src/client/store.ts                           | 53 +++----------
 src/client/sw.ts                              |  2 +-
 src/client/tsconfig.json                      |  5 +-
 src/client/widgets/activity.calendar.vue      |  1 +
 src/client/widgets/activity.chart.vue         |  1 +
 src/client/widgets/activity.vue               |  5 +-
 src/client/widgets/calendar.vue               |  1 +
 src/client/widgets/clock.vue                  |  5 +-
 src/client/widgets/define.ts                  |  2 +-
 src/client/widgets/digital-clock.vue          |  1 +
 src/client/widgets/federation.vue             |  9 ++-
 src/client/widgets/memo.vue                   |  3 +-
 src/client/widgets/notifications.vue          |  7 +-
 src/client/widgets/photos.vue                 |  7 +-
 src/client/widgets/rss.vue                    |  3 +-
 src/client/widgets/timeline.vue               | 11 +--
 src/client/widgets/trends.vue                 |  7 +-
 src/client/widgets/welcome.vue                | 11 +--
 webpack.config.ts                             |  1 +
 270 files changed, 1173 insertions(+), 961 deletions(-)
 create mode 100644 src/client/os.ts

diff --git a/src/client/components/acct.vue b/src/client/components/acct.vue
index ce39678f5c..c2640291aa 100644
--- a/src/client/components/acct.vue
+++ b/src/client/components/acct.vue
@@ -8,7 +8,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host } from '../config';
+import { host } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: ['user', 'detail'],
diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue
index 5477a65c49..0336323c90 100644
--- a/src/client/components/analog-clock.vue
+++ b/src/client/components/analog-clock.vue
@@ -36,6 +36,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
+import * as os from '@/os';
 
 export default defineComponent({
 	data() {
diff --git a/src/client/components/autocomplete.vue b/src/client/components/autocomplete.vue
index f4f3909795..27a8fcdcb4 100644
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -30,9 +30,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import contains from '../scripts/contains';
+import contains from '@/scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import MkUserSelect from './user-select.vue';
 import { acct } from '../filters/user';
 
@@ -74,6 +74,7 @@ for (const x of lib) {
 }
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -237,7 +238,7 @@ export default defineComponent({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					this.$root.api('users/search', {
+					os.api('users/search', {
 						query: this.q,
 						limit: 10,
 						detail: false
@@ -261,7 +262,7 @@ export default defineComponent({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						this.$root.api('hashtags/search', {
+						os.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {
diff --git a/src/client/components/avatar.vue b/src/client/components/avatar.vue
index 79590e39f3..3a1b892440 100644
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -9,8 +9,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { acct, userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	emits: ['click'],
diff --git a/src/client/components/avatars.vue b/src/client/components/avatars.vue
index 43fb4ceb68..ae8859b732 100644
--- a/src/client/components/avatars.vue
+++ b/src/client/components/avatars.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -21,7 +22,7 @@ export default defineComponent({
 		};
 	},
 	async created() {
-		this.us = await this.$root.api('users/show', {
+		this.us = await os.api('users/show', {
 			userIds: this.userIds
 		});
 	}
diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
index 80d1ed22c4..7d172607fa 100644
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -28,6 +28,7 @@ declare global {
 	interface Window extends CaptchaContainer {
 	}
 }
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/channel-follow-button.vue b/src/client/components/channel-follow-button.vue
index cf1d296037..f2af58f6db 100644
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -21,6 +21,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -49,12 +50,12 @@ export default defineComponent({
 
 			try {
 				if (this.isFollowing) {
-					await this.$root.api('channels/unfollow', {
+					await os.api('channels/unfollow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = false;
 				} else {
-					await this.$root.api('channels/follow', {
+					await os.api('channels/follow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = true;
diff --git a/src/client/components/channel-preview.vue b/src/client/components/channel-preview.vue
index 10435ff665..94c324a012 100644
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -22,6 +22,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/code-core.vue b/src/client/components/code-core.vue
index 6ea814f461..946521d4ba 100644
--- a/src/client/components/code-core.vue
+++ b/src/client/components/code-core.vue
@@ -6,7 +6,8 @@
 import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
-import XPrism from 'vue-prism-component';
+import XPrism from 'vue-prism-component';import * as os from '@/os';
+
 export default defineComponent({
 	components: {
 		XPrism
diff --git a/src/client/components/code.vue b/src/client/components/code.vue
index 95a616539c..bf1a38c85b 100644
--- a/src/client/components/code.vue
+++ b/src/client/components/code.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/cw-button.vue b/src/client/components/cw-button.vue
index f1ec842db7..c5e6b5ee16 100644
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -9,6 +9,7 @@
 import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index ecd429fb41..662681bc6a 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/deck/antenna-column.vue b/src/client/components/deck/antenna-column.vue
index 67536f4f23..611a0ccdbd 100644
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -13,6 +13,7 @@ import { defineComponent } from 'vue';
 import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -59,8 +60,8 @@ export default defineComponent({
 
 	methods: {
 		async setAntenna() {
-			const antennas = await this.$root.api('antennas/list');
-			const { canceled, result: antenna } = await this.$store.dispatch('showDialog', {
+			const antennas = await os.api('antennas/list');
+			const { canceled, result: antenna } = await os.dialog({
 				title: this.$t('selectAntenna'),
 				type: null,
 				select: {
diff --git a/src/client/components/deck/column-core.vue b/src/client/components/deck/column-core.vue
index 270f50ad5e..150aef40ac 100644
--- a/src/client/components/deck/column-core.vue
+++ b/src/client/components/deck/column-core.vue
@@ -19,6 +19,7 @@ import XNotificationsColumn from './notifications-column.vue';
 import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/deck/column.vue b/src/client/components/deck/column.vue
index 5c131e49ec..d19dc7eec3 100644
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -35,6 +35,7 @@
 import { defineComponent } from 'vue';
 import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -137,7 +138,7 @@ export default defineComponent({
 				icon: faPencilAlt,
 				text: this.$t('rename'),
 				action: () => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						title: this.$t('rename'),
 						input: {
 							default: this.column.name,
@@ -207,7 +208,7 @@ export default defineComponent({
 		},
 
 		showMenu() {
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: this.getMenu(),
 				source: this.$refs.menu,
 			});
diff --git a/src/client/components/deck/direct-column.vue b/src/client/components/deck/direct-column.vue
index 41471e0c5e..7f497790be 100644
--- a/src/client/components/deck/direct-column.vue
+++ b/src/client/components/deck/direct-column.vue
@@ -9,9 +9,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/deck/list-column.vue b/src/client/components/deck/list-column.vue
index fdd6ce3449..bc613041a4 100644
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -13,6 +13,7 @@ import { defineComponent } from 'vue';
 import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -59,8 +60,8 @@ export default defineComponent({
 
 	methods: {
 		async setList() {
-			const lists = await this.$root.api('users/lists/list');
-			const { canceled, result: list } = await this.$store.dispatch('showDialog', {
+			const lists = await os.api('users/lists/list');
+			const { canceled, result: list } = await os.dialog({
 				title: this.$t('selectList'),
 				type: null,
 				select: {
diff --git a/src/client/components/deck/mentions-column.vue b/src/client/components/deck/mentions-column.vue
index c3961396ec..a7687c2234 100644
--- a/src/client/components/deck/mentions-column.vue
+++ b/src/client/components/deck/mentions-column.vue
@@ -9,9 +9,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/deck/notifications-column.vue b/src/client/components/deck/notifications-column.vue
index fb6fd2fdc0..c6f6b2bbdb 100644
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -12,6 +12,7 @@ import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '../notifications.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/deck/tl-column.vue b/src/client/components/deck/tl-column.vue
index 6be7061857..016f909d7b 100644
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -24,6 +24,7 @@ import { defineComponent } from 'vue';
 import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -78,7 +79,7 @@ export default defineComponent({
 
 	methods: {
 		async setType() {
-			const { canceled, result: src } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: src } = await os.dialog({
 				title: this.$t('timeline'),
 				type: null,
 				select: {
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index a3a3ac3048..2d47edc916 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -33,10 +33,11 @@ import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '../../components/ui/select.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkButton from '@/components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 83a5b388bc..6d4b5b115a 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -53,6 +53,7 @@ import MkSelect from './ui/select.vue';
 import MkSignin from './signin.vue';
 import parseAcct from '../../misc/acct/parse';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -131,7 +132,7 @@ export default defineComponent({
 	watch: {
 		userInputValue() {
 			if (this.user) {
-				this.$root.api('users/show', parseAcct(this.userInputValue)).then(u => {
+				os.api('users/show', parseAcct(this.userInputValue)).then(u => {
 					this.canOk = u != null;
 				}).catch(() => {
 					this.canOk = false;
@@ -167,7 +168,7 @@ export default defineComponent({
 			if (!this.showOkButton) return;
 
 			if (this.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
+				const user = await os.api('users/show', parseAcct(this.userInputValue));
 				if (user) {
 					this.done(false, user);
 				}
diff --git a/src/client/components/drive-file-thumbnail.vue b/src/client/components/drive-file-thumbnail.vue
index d3f18ed05a..a25deb201a 100644
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -27,6 +27,7 @@ import {
 	faFilm
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/drive-window.vue b/src/client/components/drive-window.vue
index 7f976c22d5..4bff52836d 100644
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -15,6 +15,7 @@ import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
 import XWindow from './window.vue';
 import number from '../filters/number';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/drive.file.vue b/src/client/components/drive.file.vue
index 86e0035b27..6d1250d282 100644
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -32,12 +32,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import copyToClipboard from '../scripts/copy-to-clipboard';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
 //import updateAvatar from '../api/update-avatar';
 //import updateBanner from '../api/update-banner';
 import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import bytes from '../filters/bytes';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -82,7 +83,7 @@ export default defineComponent({
 			if (this.selectMode) {
 				this.$emit('chosen', this.file);
 			} else {
-				this.$store.dispatch('showMenu', {
+				os.menu({
 					items: [{
 						text: this.$t('rename'),
 						icon: faICursor,
@@ -128,7 +129,7 @@ export default defineComponent({
 		},
 
 		rename() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('renameFile'),
 				input: {
 					placeholder: this.$t('inputNewFileName'),
@@ -137,7 +138,7 @@ export default defineComponent({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: this.file.id,
 					name: name
 				});
@@ -145,7 +146,7 @@ export default defineComponent({
 		},
 
 		toggleSensitive() {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: this.file.id,
 				isSensitive: !this.file.isSensitive
 			});
@@ -153,7 +154,7 @@ export default defineComponent({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -172,14 +173,14 @@ export default defineComponent({
 		},
 
 		async deleteFile() {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			this.$root.api('drive/files/delete', {
+			os.api('drive/files/delete', {
 				fileId: this.file.id
 			});
 		},
diff --git a/src/client/components/drive.folder.vue b/src/client/components/drive.folder.vue
index 155c567018..9339f3ad75 100644
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -125,7 +126,7 @@ export default defineComponent({
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder.id
 				});
@@ -141,7 +142,7 @@ export default defineComponent({
 				if (folder.id == this.folder.id) return;
 
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder.id
 				}).then(() => {
@@ -149,13 +150,13 @@ export default defineComponent({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$store.dispatch('showDialog', {
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$store.dispatch('showDialog', {
+							os.dialog({
 								type: 'error',
 								text: this.$t('error')
 							});
@@ -189,7 +190,7 @@ export default defineComponent({
 		},
 
 		rename() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -197,7 +198,7 @@ export default defineComponent({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: this.folder.id,
 					name: name
 				});
@@ -205,7 +206,7 @@ export default defineComponent({
 		},
 
 		deleteFolder() {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: this.folder.id
 			}).then(() => {
 				if (this.$store.state.settings.uploadFolder === this.folder.id) {
@@ -217,14 +218,14 @@ export default defineComponent({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
diff --git a/src/client/components/drive.nav-folder.vue b/src/client/components/drive.nav-folder.vue
index 205094fd0a..f44f6becf7 100644
--- a/src/client/components/drive.nav-folder.vue
+++ b/src/client/components/drive.nav-folder.vue
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -94,7 +95,7 @@ export default defineComponent({
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -108,7 +109,7 @@ export default defineComponent({
 				// 移動先が自分自身ならreject
 				if (this.folder && folder.id == this.folder.id) return;
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				});
diff --git a/src/client/components/drive.vue b/src/client/components/drive.vue
index 5fe5ebd21d..2061359eef 100644
--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -53,6 +53,7 @@ import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
 import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -258,7 +259,7 @@ export default defineComponent({
 				const file = JSON.parse(driveFile);
 				if (this.files.some(f => f.id == file.id)) return;
 				this.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -274,7 +275,7 @@ export default defineComponent({
 				if (this.folder && folder.id == this.folder.id) return false;
 				if (this.folders.some(f => f.id == folder.id)) return false;
 				this.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				}).then(() => {
@@ -282,13 +283,13 @@ export default defineComponent({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$store.dispatch('showDialog', {
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$store.dispatch('showDialog', {
+							os.dialog({
 								type: 'error',
 								text: this.$t('error')
 							});
@@ -303,19 +304,19 @@ export default defineComponent({
 		},
 
 		urlUpload() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('uploadFromUrl'),
 				input: {
 					placeholder: this.$t('uploadFromUrlDescription')
 				}
 			}).then(({ canceled, result: url }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/upload_from_url', {
+				os.api('drive/files/upload_from_url', {
 					url: url,
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					title: this.$t('uploadFromUrlRequested'),
 					text: this.$t('uploadFromUrlMayTakeTime')
 				});
@@ -323,14 +324,14 @@ export default defineComponent({
 		},
 
 		createFolder() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('createFolder'),
 				input: {
 					placeholder: this.$t('folderName')
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/create', {
+				os.api('drive/folders/create', {
 					name: name,
 					parentId: this.folder ? this.folder.id : undefined
 				}).then(folder => {
@@ -340,7 +341,7 @@ export default defineComponent({
 		},
 
 		renameFolder(folder) {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -348,7 +349,7 @@ export default defineComponent({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					name: name
 				}).then(folder => {
@@ -359,7 +360,7 @@ export default defineComponent({
 		},
 
 		deleteFolder(folder) {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: folder.id
 			}).then(() => {
 				// 削除時に親フォルダに移動
@@ -367,14 +368,14 @@ export default defineComponent({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -441,7 +442,7 @@ export default defineComponent({
 
 			this.fetching = true;
 
-			this.$root.api('drive/folders/show', {
+			os.api('drive/folders/show', {
 				folderId: target
 			}).then(folder => {
 				this.folder = folder;
@@ -543,7 +544,7 @@ export default defineComponent({
 			const filesMax = 30;
 
 			// フォルダ一覧取得
-			this.$root.api('drive/folders', {
+			os.api('drive/folders', {
 				folderId: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -556,7 +557,7 @@ export default defineComponent({
 			});
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				limit: filesMax + 1
@@ -587,7 +588,7 @@ export default defineComponent({
 			const max = 30;
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				untilId: this.files[this.files.length - 1].id,
diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 51011d7c74..ad5beab762 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -65,11 +65,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/emoji.vue b/src/client/components/emoji.vue
index 05ecff4edc..ba65ada8ac 100644
--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -7,8 +7,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/error.vue b/src/client/components/error.vue
index 84f7bb5bc9..b89ea7082c 100644
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -12,6 +12,7 @@
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/file-type-icon.vue b/src/client/components/file-type-icon.vue
index cdfbee6669..48a498ccbe 100644
--- a/src/client/components/file-type-icon.vue
+++ b/src/client/components/file-type-icon.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index e5732e8e34..8832d07b9c 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -31,6 +31,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -58,7 +59,7 @@ export default defineComponent({
 	created() {
 		// 渡されたユーザー情報が不完全な場合
 		if (this.user.isFollowing == null) {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				userId: this.user.id
 			}).then(u => {
 				this.isFollowing = u.isFollowing;
@@ -91,7 +92,7 @@ export default defineComponent({
 
 			try {
 				if (this.isFollowing) {
-					const { canceled } = await this.$store.dispatch('showDialog', {
+					const { canceled } = await os.dialog({
 						type: 'warning',
 						text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
 						showCancelButton: true
@@ -99,21 +100,21 @@ export default defineComponent({
 
 					if (canceled) return;
 
-					await this.$root.api('following/delete', {
+					await os.api('following/delete', {
 						userId: this.user.id
 					});
 				} else {
 					if (this.hasPendingFollowRequestFromYou) {
-						await this.$root.api('following/requests/cancel', {
+						await os.api('following/requests/cancel', {
 							userId: this.user.id
 						});
 					} else if (this.user.isLocked) {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
 					} else {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
diff --git a/src/client/components/form-window.vue b/src/client/components/form-window.vue
index 921ac68ad0..0770e6ad9a 100644
--- a/src/client/components/form-window.vue
+++ b/src/client/components/form-window.vue
@@ -32,6 +32,7 @@ import XWindow from './window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/formula-core.vue b/src/client/components/formula-core.vue
index f8accdd0a1..29c049297e 100644
--- a/src/client/components/formula-core.vue
+++ b/src/client/components/formula-core.vue
@@ -6,7 +6,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as katex from 'katex';
+import * as katex from 'katex';import * as os from '@/os';
+
 export default defineComponent({
 	props: {
 		formula: {
diff --git a/src/client/components/formula.vue b/src/client/components/formula.vue
index 9ea44b2988..3c09001957 100644
--- a/src/client/components/formula.vue
+++ b/src/client/components/formula.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({
 	components: {
 		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
diff --git a/src/client/components/google.vue b/src/client/components/google.vue
index 301c9e0b75..7559fa7e11 100644
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: ['q'],
diff --git a/src/client/components/header-clock.vue b/src/client/components/header-clock.vue
index b4083cc825..bd7c2727f9 100644
--- a/src/client/components/header-clock.vue
+++ b/src/client/components/header-clock.vue
@@ -16,6 +16,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkClock from './analog-clock.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/image-viewer.vue b/src/client/components/image-viewer.vue
index 081308da44..5ab8fa0a83 100644
--- a/src/client/components/image-viewer.vue
+++ b/src/client/components/image-viewer.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/img-with-blurhash.vue b/src/client/components/img-with-blurhash.vue
index 7858931e45..683d1e0856 100644
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { decode } from 'blurhash';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 5030ab2753..c3b912d187 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -137,6 +137,7 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -217,7 +218,7 @@ export default defineComponent({
 	},
 
 	async created() {
-		this.info = await this.$root.api('stats');
+		this.info = await os.api('stats');
 
 		this.now = new Date();
 
@@ -227,17 +228,17 @@ export default defineComponent({
 	methods: {
 		async fetchChart() {
 			const [perHour, perDay] = await Promise.all([Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
 			]), Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
 			])]);
 
 			const chart = {
diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index bf964d23b9..0ab8c67acf 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -12,9 +12,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { url as local } from '../config';
+import { url as local } from '@/config';
 import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/loading.vue b/src/client/components/loading.vue
index cc2f2e0e1a..b4693258b9 100644
--- a/src/client/components/loading.vue
+++ b/src/client/components/loading.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/media-banner.vue b/src/client/components/media-banner.vue
index fac17ee789..b16e723bb9 100644
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 4f46a32789..dc5e0a73bb 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -24,9 +24,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue
index e5880de811..cbf02edee1 100644
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -19,6 +19,7 @@ import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index 291224f8f6..e0cd20d64a 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -23,6 +23,7 @@
 import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index 2d07337e3d..50b43df07b 100644
--- a/src/client/components/mention.vue
+++ b/src/client/components/mention.vue
@@ -17,8 +17,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host as localHost } from '../config';
+import { host as localHost } from '@/config';
 import { wellKnownServices } from '../../well-known-services';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/menu.vue b/src/client/components/menu.vue
index c23ed75fa9..425c28e295 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('removeMenu', id)" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$store.commit('removeDialog', id)" :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>
@@ -36,7 +36,8 @@
 import { defineComponent } from 'vue';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import XModal from './modal.vue';
-import { focusPrev, focusNext } from '../scripts/focus';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -102,7 +103,7 @@ export default defineComponent({
 		},
 		close() {
 			this.showing = false;
-			this.$store.commit('menuDone', { id: this.id });
+			this.$store.commit('dialogDone', { id: this.id });
 		},
 		focusUp() {
 			focusPrev(document.activeElement);
diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts
index e604915974..8d922c8c3b 100644
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -8,8 +8,9 @@ import { concat } from '../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../config';
+import { host } from '@/config';
 import { RouterLink } from 'vue-router';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/mini-chart.vue b/src/client/components/mini-chart.vue
index c554cd436b..9de65cda36 100644
--- a/src/client/components/mini-chart.vue
+++ b/src/client/components/mini-chart.vue
@@ -32,6 +32,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/misskey-flavored-markdown.vue b/src/client/components/misskey-flavored-markdown.vue
index 0097ac3aa1..6cd2fef09d 100644
--- a/src/client/components/misskey-flavored-markdown.vue
+++ b/src/client/components/misskey-flavored-markdown.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MfmCore from './mfm';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
index 0ab90cee66..1118cd295c 100644
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 // memo: popup.vueのfixedプロパティに相当するものはsource要素の祖先を辿るなどして自動で判定できるのでは
 
@@ -54,6 +55,8 @@ export default defineComponent({
 	},
 	mounted() {
 		this.$nextTick(() => {
+			if (!this.popup) return;
+
 			const popover = this.$refs.content as any;
 
 			const rect = this.source.getBoundingClientRect();
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 6e7a24b91f..8b59fb9d3b 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -28,6 +28,7 @@ import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } fr
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import notePage from '../filters/note';
 import { userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
index d038c6a3cc..64dc6d0b47 100644
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -21,6 +21,7 @@ import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index aa2c78e6da..9fbf6ef082 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -24,6 +24,7 @@ import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	name: 'x-sub',
@@ -65,7 +66,7 @@ export default defineComponent({
 
 	created() {
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.note.id,
 				limit: 5
 			}).then(replies => {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index e2a2dc2eb1..b502cbdf05 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -110,13 +110,14 @@ import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
 import MkUrlPreview from './url-preview.vue';
 import MkReactionPicker from './reaction-picker.vue';
-import pleaseLogin from '../scripts/please-login';
-import { focusPrev, focusNext } from '../scripts/focus';
-import { url } from '../config';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { checkWordMute } from '../scripts/check-word-mute';
+import pleaseLogin from '@/scripts/please-login';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import { url } from '@/config';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { checkWordMute } from '@/scripts/check-word-mute';
 import { utils } from '@syuilo/aiscript';
 import { userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	model: {
@@ -267,7 +268,7 @@ export default defineComponent({
 		this.muted = await checkWordMute(this.appearNote, this.$store.state.i, this.$store.state.settings.mutedWords);
 
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.appearNote.id,
 				limit: 30
 			}).then(replies => {
@@ -275,7 +276,7 @@ export default defineComponent({
 			});
 
 			if (this.appearNote.replyId) {
-				this.$root.api('notes/conversation', {
+				os.api('notes/conversation', {
 					noteId: this.appearNote.replyId
 				}).then(conversation => {
 					this.conversation = conversation.reverse();
@@ -317,7 +318,7 @@ export default defineComponent({
 		},
 
 		readPromo() {
-			(this as any).$root.api('promo/read', {
+			(this as any).os.api('promo/read', {
 				noteId: this.appearNote.id
 			});
 			this.isDeleted = true;
@@ -452,12 +453,12 @@ export default defineComponent({
 		renote(viaKeyboard = false) {
 			pleaseLogin(this.$root);
 			this.blur();
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('renote'),
 					icon: faRetweet,
 					action: () => {
-						(this as any).$root.api('notes/create', {
+						(this as any).os.api('notes/create', {
 							renoteId: this.appearNote.id
 						});
 					}
@@ -476,7 +477,7 @@ export default defineComponent({
 		},
 
 		renoteDirectly() {
-			(this as any).$root.api('notes/create', {
+			(this as any).os.api('notes/create', {
 				renoteId: this.appearNote.id
 			});
 		},
@@ -489,7 +490,7 @@ export default defineComponent({
 				showFocus: viaKeyboard,
 			});
 			picker.$once('chosen', reaction => {
-				this.$root.api('notes/reactions/create', {
+				os.api('notes/reactions/create', {
 					noteId: this.appearNote.id,
 					reaction: reaction
 				}).then(() => {
@@ -500,7 +501,7 @@ export default defineComponent({
 		},
 
 		reactDirectly(reaction) {
-			this.$root.api('notes/reactions/create', {
+			os.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
@@ -509,17 +510,17 @@ export default defineComponent({
 		undoReact(note) {
 			const oldReaction = note.myReaction;
 			if (!oldReaction) return;
-			this.$root.api('notes/reactions/delete', {
+			os.api('notes/reactions/delete', {
 				noteId: note.id
 			});
 		},
 
 		favorite() {
 			pleaseLogin(this.$root);
-			this.$root.api('notes/favorites/create', {
+			os.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -527,28 +528,28 @@ export default defineComponent({
 		},
 
 		del() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('noteDeleteConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 			});
 		},
 
 		delEdit() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('deleteAndEditConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 
@@ -557,10 +558,10 @@ export default defineComponent({
 		},
 
 		toggleFavorite(favorite: boolean) {
-			this.$root.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			os.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -568,10 +569,10 @@ export default defineComponent({
 		},
 
 		toggleWatch(watch: boolean) {
-			this.$root.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
+			os.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -581,7 +582,7 @@ export default defineComponent({
 		async menu(viaKeyboard = false) {
 			let menu;
 			if (this.$store.getters.isSignedIn) {
-				const state = await this.$root.api('notes/state', {
+				const state = await os.api('notes/state', {
 					noteId: this.appearNote.id
 				});
 				menu = [{
@@ -685,7 +686,7 @@ export default defineComponent({
 				}))]);
 			}
 
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: menu,
 				source: this.$refs.menuButton,
 				viaKeyboard
@@ -694,12 +695,12 @@ export default defineComponent({
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('unrenote'),
 					icon: faTrashAlt,
 					action: () => {
-						this.$root.api('notes/delete', {
+						os.api('notes/delete', {
 							noteId: this.note.id
 						});
 						this.isDeleted = true;
@@ -716,7 +717,7 @@ export default defineComponent({
 
 		copyContent() {
 			copyToClipboard(this.appearNote.text);
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -724,23 +725,23 @@ export default defineComponent({
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.appearNote.id}`);
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},
 
 		togglePin(pin: boolean) {
-			this.$root.api(pin ? 'i/pin' : 'i/unpin', {
+			os.api(pin ? 'i/pin' : 'i/unpin', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
 				if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: this.$t('pinLimitExceeded')
 					});
@@ -749,23 +750,23 @@ export default defineComponent({
 		},
 
 		async promote() {
-			const { canceled, result: days } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: days } = await os.dialog({
 				title: this.$t('numberOfDays'),
 				input: { type: 'number' }
 			});
 
 			if (canceled) return;
 
-			this.$root.api('admin/promo/create', {
+			os.api('admin/promo/create', {
 				noteId: this.appearNote.id,
 				expiresAt: Date.now() + (86400000 * days)
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 3f07fb50d5..22fc9e64f9 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -29,10 +29,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import paging from '../scripts/paging';
+import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue
index 8bcc1cc271..cc00cf3bd5 100644
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -25,6 +25,7 @@ import MkSwitch from './ui/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import { notificationTypes } from '../../types';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 41544fdf8e..091898616e 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -67,6 +67,7 @@ import MkFollowButton from './follow-button.vue';
 import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import { locale } from '../i18n';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -126,23 +127,23 @@ export default defineComponent({
 	methods: {
 		acceptFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/accept', { userId: this.notification.user.id });
+			os.api('following/requests/accept', { userId: this.notification.user.id });
 		},
 		rejectFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/reject', { userId: this.notification.user.id });
+			os.api('following/requests/reject', { userId: this.notification.user.id });
 		},
 		acceptGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
-			this.$store.dispatch('showDialog', {
+			os.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},
 		rejectGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
+			os.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
 		},
 		notePage,
 		userPage
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index ad976dff51..6fbec56493 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -18,11 +18,12 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import paging from '../scripts/paging';
+import paging from '@/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 import { notificationTypes } from '../../types';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page-preview.vue b/src/client/components/page-preview.vue
index d7daaeae96..ad1069f53f 100644
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -17,6 +17,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { userName } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.block.vue b/src/client/components/page/page.block.vue
index 412c91ee0d..d1de5094d5 100644
--- a/src/client/components/page/page.block.vue
+++ b/src/client/components/page/page.block.vue
@@ -18,6 +18,7 @@ import XPost from './page.post.vue';
 import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.button.vue b/src/client/components/page/page.button.vue
index c14073b751..eb58b1d8d3 100644
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -24,14 +25,14 @@ export default defineComponent({
 		click() {
 			if (this.value.action === 'dialog') {
 				this.hpml.eval();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					text: this.hpml.interpolate(this.value.content)
 				});
 			} else if (this.value.action === 'resetRandom') {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
 			} else if (this.value.action === 'pushEvent') {
-				this.$root.api('page-push', {
+				os.api('page-push', {
 					pageId: this.hpml.page.id,
 					event: this.value.event,
 					...(this.value.var ? {
@@ -39,7 +40,7 @@ export default defineComponent({
 					} : {})
 				});
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					text: this.hpml.interpolate(this.value.message)
 				});
diff --git a/src/client/components/page/page.canvas.vue b/src/client/components/page/page.canvas.vue
index 1080c93856..d3bf5c1de6 100644
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.counter.vue b/src/client/components/page/page.counter.vue
index 5d2df0b67f..fef8e526b5 100644
--- a/src/client/components/page/page.counter.vue
+++ b/src/client/components/page/page.counter.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index cf07930c51..3f71ecd207 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.image.vue b/src/client/components/page/page.image.vue
index f8551bc820..ddcce5c37b 100644
--- a/src/client/components/page/page.image.vue
+++ b/src/client/components/page/page.image.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index 6437a3145e..4b308b40ce 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index db453e8ef8..b08ff00c17 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -10,7 +10,8 @@ import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
-import { apiUrl } from '../../config';
+import { apiUrl } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -44,7 +45,7 @@ export default defineComponent({
 	methods: {
 		upload() {
 			return new Promise((ok) => {
-				const dialog = this.$store.dispatch('showDialog', {
+				const dialog = os.dialog({
 					type: 'waiting',
 					text: this.$t('uploading') + '...',
 					showOkButton: false,
@@ -75,12 +76,12 @@ export default defineComponent({
 		async post() {
 			this.posting = true;
 			const file = this.value.attachCanvasImage ? await this.upload() : null;
-			this.$root.api('notes/create', {
+			os.api('notes/create', {
 				text: this.text === '' ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
index 959de24cb6..f1f3ce04e4 100644
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.section.vue b/src/client/components/page/page.section.vue
index 989c1b379a..6eb3c4830b 100644
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
index c4f3fb5d82..3f08a11673 100644
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkSwitch from '../ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index c9c450a711..ddec194b29 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.text.vue b/src/client/components/page/page.text.vue
index b565cdd3fb..92705a46c6 100644
--- a/src/client/components/page/page.text.vue
+++ b/src/client/components/page/page.text.vue
@@ -9,6 +9,7 @@
 import { defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
index 5ead19196c..656c1d05fe 100644
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
index 1c6563ef3d..ba8da684e6 100644
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index 12e60859ad..c72a2b6a3c 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -10,8 +10,9 @@ import { parse } from '@syuilo/aiscript';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
-import { Hpml } from '../../scripts/hpml/evaluator';
-import { url } from '../../config';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { url } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -49,7 +50,7 @@ export default defineComponent({
 					ast = parse(this.page.script);
 				} catch (e) {
 					console.error(e);
-					/*this.$store.dispatch('showDialog', {
+					/*os.dialog({
 						type: 'error',
 						text: 'Syntax error :('
 					});*/
@@ -59,7 +60,7 @@ export default defineComponent({
 					this.hpml.eval();
 				}).catch(e => {
 					console.error(e);
-					/*this.$store.dispatch('showDialog', {
+					/*os.dialog({
 						type: 'error',
 						text: e
 					});*/
diff --git a/src/client/components/particle.vue b/src/client/components/particle.vue
index f55e1ed4b9..29da5201b8 100644
--- a/src/client/components/particle.vue
+++ b/src/client/components/particle.vue
@@ -48,6 +48,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index 41ba2c7efb..99449da0ac 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -58,6 +58,7 @@ import MkInput from './ui/input.vue';
 import MkSelect from './ui/select.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/poll.vue b/src/client/components/poll.vue
index 283e740ca1..dbaa59f7b9 100644
--- a/src/client/components/poll.vue
+++ b/src/client/components/poll.vue
@@ -25,6 +25,7 @@
 import { defineComponent } from 'vue';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -85,7 +86,7 @@ export default defineComponent({
 		},
 		vote(id) {
 			if (this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
-			this.$root.api('notes/polls/vote', {
+			os.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {
diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 2afe021ad8..16e29dfe9b 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -18,6 +18,7 @@ import * as XDraggable from 'vuedraggable';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import XFileThumbnail from './drive-file-thumbnail.vue'
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -53,7 +54,7 @@ export default defineComponent({
 			}
 		},
 		toggleSensitive(file) {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				isSensitive: !file.isSensitive
 			}).then(() => {
@@ -62,7 +63,7 @@ export default defineComponent({
 			});
 		},
 		async rename(file) {
-			const { canceled, result } = await this.$store.dispatch('showDialog', {
+			const { canceled, result } = await os.dialog({
 				title: this.$t('enterFileName'),
 				input: {
 					default: file.name
@@ -70,7 +71,7 @@ export default defineComponent({
 				allowEmpty: false
 			});
 			if (canceled) return;
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				name: result
 			}).then(() => {
@@ -80,7 +81,7 @@ export default defineComponent({
 		},
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = this.$store.dispatch('showMenu', {
+			this.menu = os.menu({
 				items: [{
 					text: this.$t('renameFile'),
 					icon: faICursor,
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index 1f77d7b03f..fbdf937556 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XPostForm from './post-form.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index d1fed69da7..a2abaa9a8a 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -62,14 +62,15 @@ import MkVisibilityChooser from './visibility-chooser.vue';
 import MkUserSelect from './user-select.vue';
 import XNotePreview from './note-preview.vue';
 import { parse } from '../../mfm/parse';
-import { host, url } from '../config';
+import { host, url } from '@/config';
 import { erase, unique } from '../../prelude/array';
 import extractMentions from '../../misc/extract-mentions';
 import getAcct from '../../misc/acct/render';
 import { formatTimeString } from '../../misc/format-time-string';
-import { selectDriveFile } from '../scripts/select-drive-file';
+import { selectDriveFile } from '@/scripts/select-drive-file';
 import { noteVisibilities } from '../../types';
 import { utils } from '@syuilo/aiscript';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -246,14 +247,14 @@ export default defineComponent({
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
 			this.visibility = this.reply.visibility;
 			if (this.reply.visibility === 'specified') {
-				this.$root.api('users/show', {
+				os.api('users/show', {
 					userIds: this.reply.visibleUserIds.filter(uid => uid !== this.$store.state.i.id && uid !== this.reply.userId)
 				}).then(users => {
 					this.visibleUsers.push(...users);
 				});
 
 				if (this.reply.userId !== this.$store.state.i.id) {
-					this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
+					os.api('users/show', { userId: this.reply.userId }).then(user => {
 						this.visibleUsers.push(user);
 					});
 				}
@@ -346,7 +347,7 @@ export default defineComponent({
 		},
 
 		chooseFileFrom(ev) {
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					type: 'label',
 					text: this.$t('attachFile'),
@@ -469,7 +470,7 @@ export default defineComponent({
 			if (!this.renote && !this.quoteId && paste.startsWith(url + '/notes/')) {
 				e.preventDefault();
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'info',
 					text: this.$t('quoteQuestion'),
 					showCancelButton: true
@@ -575,7 +576,7 @@ export default defineComponent({
 			}
 
 			this.posting = true;
-			this.$root.api('notes/create', data).then(() => {
+			os.api('notes/create', data).then(() => {
 				this.clear();
 				this.deleteDraft();
 				this.$emit('posted');
@@ -612,7 +613,7 @@ export default defineComponent({
 		},
 
 		showActions(ev) {
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: this.$store.state.postFormActions.map(action => ({
 					text: action.title,
 					action: () => {
diff --git a/src/client/components/reaction-icon.vue b/src/client/components/reaction-icon.vue
index 8995684e27..45ed31f3c2 100644
--- a/src/client/components/reaction-icon.vue
+++ b/src/client/components/reaction-icon.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({
 	props: {
 		reaction: {
diff --git a/src/client/components/reaction-picker.vue b/src/client/components/reaction-picker.vue
index 35011afc8a..0e01b6db28 100644
--- a/src/client/components/reaction-picker.vue
+++ b/src/client/components/reaction-picker.vue
@@ -14,6 +14,7 @@ import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
 import XReactionIcon from './reaction-icon.vue';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/reactions-viewer.details.vue b/src/client/components/reactions-viewer.details.vue
index 38734b6753..980f3a4aff 100644
--- a/src/client/components/reactions-viewer.details.vue
+++ b/src/client/components/reactions-viewer.details.vue
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue
index d0e58f2769..761d130496 100644
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -20,6 +20,7 @@
 import { defineComponent } from 'vue';
 import XDetails from './reactions-viewer.details.vue';
 import XReactionIcon from './reaction-icon.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -70,18 +71,18 @@ export default defineComponent({
 
 			const oldReaction = this.note.myReaction;
 			if (oldReaction) {
-				this.$root.api('notes/reactions/delete', {
+				os.api('notes/reactions/delete', {
 					noteId: this.note.id
 				}).then(() => {
 					if (oldReaction !== this.reaction) {
-						this.$root.api('notes/reactions/create', {
+						os.api('notes/reactions/create', {
 							noteId: this.note.id,
 							reaction: this.reaction
 						});
 					}
 				});
 			} else {
-				this.$root.api('notes/reactions/create', {
+				os.api('notes/reactions/create', {
 					noteId: this.note.id,
 					reaction: this.reaction
 				});
@@ -99,7 +100,7 @@ export default defineComponent({
 			this.closeDetails();
 		},
 		openDetails() {
-			this.$root.api('notes/reactions', {
+			os.api('notes/reactions', {
 				noteId: this.note.id,
 				type: this.reaction,
 				limit: 11
diff --git a/src/client/components/reactions-viewer.vue b/src/client/components/reactions-viewer.vue
index 0cb62a35c9..7e256d11a1 100644
--- a/src/client/components/reactions-viewer.vue
+++ b/src/client/components/reactions-viewer.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XReaction from './reactions-viewer.reaction.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/remote-caution.vue b/src/client/components/remote-caution.vue
index 02bd5e8f7f..222235ea1a 100644
--- a/src/client/components/remote-caution.vue
+++ b/src/client/components/remote-caution.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index bd7fcdad18..d3e0e237ee 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -48,8 +48,9 @@
 import { defineComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
-import { host, instanceName } from '../config';
-import { search } from '../scripts/search';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
 
 export default defineComponent({
 	data() {
@@ -127,7 +128,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -141,7 +142,7 @@ export default defineComponent({
 		},
 
 		async openAccountMenu(ev) {
-			const accounts = (await this.$root.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
+			const accounts = (await os.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
 
 			const accountItems = accounts.map(account => ({
 				type: 'user',
@@ -149,7 +150,7 @@ export default defineComponent({
 				action: () => { this.switchAccount(account); }
 			}));
 
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [...[{
 					type: 'link',
 					text: this.$t('profile'),
@@ -164,7 +165,7 @@ export default defineComponent({
 					icon: faPlus,
 					text: this.$t('addAcount'),
 					action: () => {
-						this.$store.dispatch('showMenu', {
+						os.menu({
 							items: [{
 								text: this.$t('existingAcount'),
 								action: () => { this.addAcount(); },
@@ -187,7 +188,7 @@ export default defineComponent({
 		},
 
 		oepnInstanceMenu(ev) {
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					type: 'link',
 					text: this.$t('dashboard'),
@@ -250,7 +251,7 @@ export default defineComponent({
 				action: def.action,
 				indicate: def.indicated,
 			}));
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [...items, null, {
 					type: 'link',
 					text: this.$t('help'),
@@ -277,7 +278,7 @@ export default defineComponent({
 		async addAcount() {
 			this.$root.new(await import('./signin-dialog.vue')).$once('login', res => {
 				this.$store.dispatch('addAcount', res);
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -297,12 +298,12 @@ export default defineComponent({
 		},
 
 		switchAccountWithToken(token: string) {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'waiting',
 				iconOnly: true
 			});
 
-			this.$root.api('i', {}, token).then((i: any) => {
+			os.api('i', {}, token).then((i: any) => {
 				this.$store.dispatch('switchAccount', {
 					...i,
 					token: token
diff --git a/src/client/components/signin-dialog.vue b/src/client/components/signin-dialog.vue
index 650997b430..4bf4c64778 100644
--- a/src/client/components/signin-dialog.vue
+++ b/src/client/components/signin-dialog.vue
@@ -9,6 +9,7 @@
 import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import MkSignin from './signin.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index 3ad21200a4..7c16d0bef4 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -49,8 +49,9 @@ import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
-import { apiUrl, host } from '../config';
-import { byteify, hexify } from '../scripts/2fa';
+import { apiUrl, host } from '@/config';
+import { byteify, hexify } from '@/scripts/2fa';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -105,7 +106,7 @@ export default defineComponent({
 
 	methods: {
 		onUsernameChange() {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				username: this.username
 			}).then(user => {
 				this.user = user;
@@ -132,7 +133,7 @@ export default defineComponent({
 			}).then(credential => {
 				this.queryingKey = false;
 				this.signing = true;
-				return this.$root.api('signin', {
+				return os.api('signin', {
 					username: this.username,
 					password: this.password,
 					signature: hexify(credential.response.signature),
@@ -145,7 +146,7 @@ export default defineComponent({
 				this.$emit('login', res);
 			}).catch(err => {
 				if (err === null) return;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('signinFailed')
 				});
@@ -157,7 +158,7 @@ export default defineComponent({
 			this.signing = true;
 			if (!this.totpLogin && this.user && this.user.twoFactorEnabled) {
 				if (window.PublicKeyCredential && this.user.securityKeys) {
-					this.$root.api('signin', {
+					os.api('signin', {
 						username: this.username,
 						password: this.password
 					}).then(res => {
@@ -166,7 +167,7 @@ export default defineComponent({
 						this.challengeData = res;
 						return this.queryKey();
 					}).catch(() => {
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							text: this.$t('signinFailed')
 						});
@@ -179,14 +180,14 @@ export default defineComponent({
 					this.signing = false;
 				}
 			} else {
-				this.$root.api('signin', {
+				os.api('signin', {
 					username: this.username,
 					password: this.password,
 					token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 				}).then(res => {
 					this.$emit('login', res);
 				}).catch(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: this.$t('loginFailed')
 					});
diff --git a/src/client/components/signup-dialog.vue b/src/client/components/signup-dialog.vue
index 31c06abee2..b549003893 100644
--- a/src/client/components/signup-dialog.vue
+++ b/src/client/components/signup-dialog.vue
@@ -9,6 +9,7 @@
 import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import XSignup from './signup.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 7d3f8b34f8..7649862843 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -53,10 +53,11 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode';
-import { host, url } from '../config';
+import { host, url } from '@/config';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import MkSwitch from './ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -143,7 +144,7 @@ export default defineComponent({
 
 			this.usernameState = 'wait';
 
-			this.$root.api('username/available', {
+			os.api('username/available', {
 				username: this.username
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
@@ -175,14 +176,14 @@ export default defineComponent({
 			if (this.submitting) return;
 			this.submitting = true;
 
-			this.$root.api('signup', {
+			os.api('signup', {
 				username: this.username,
 				password: this.password,
 				invitationCode: this.invitationCode,
 				'hcaptcha-response': this.hCaptchaResponse,
 				'g-recaptcha-response': this.reCaptchaResponse,
 			}).then(() => {
-				this.$root.api('signin', {
+				os.api('signin', {
 					username: this.username,
 					password: this.password
 				}).then(res => {
@@ -193,7 +194,7 @@ export default defineComponent({
 				this.$refs.hcaptcha?.reset?.();
 				this.$refs.recaptcha?.reset?.();
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('error')
 				});
diff --git a/src/client/components/stream-indicator.vue b/src/client/components/stream-indicator.vue
index 7c2d6bf8c6..ad64acfc73 100644
--- a/src/client/components/stream-indicator.vue
+++ b/src/client/components/stream-indicator.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	data() {
diff --git a/src/client/components/sub-note-content.vue b/src/client/components/sub-note-content.vue
index 2fe3565285..271d785ea7 100644
--- a/src/client/components/sub-note-content.vue
+++ b/src/client/components/sub-note-content.vue
@@ -23,6 +23,7 @@ import { defineComponent } from 'vue';
 import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index 42da4d16bf..90ea2c37a9 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -6,6 +6,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/time.vue b/src/client/components/time.vue
index f14613b4e5..3572885b37 100644
--- a/src/client/components/time.vue
+++ b/src/client/components/time.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/timeline.vue b/src/client/components/timeline.vue
index d6b88c602f..cebce71b1c 100644
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XNotes from './notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/toast.vue b/src/client/components/toast.vue
index 97998efd8a..7be9ad5679 100644
--- a/src/client/components/toast.vue
+++ b/src/client/components/toast.vue
@@ -9,6 +9,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XNotification from './notification.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue
index d4a8fbef41..75a0ed9c19 100644
--- a/src/client/components/token-generate-window.vue
+++ b/src/client/components/token-generate-window.vue
@@ -27,6 +27,7 @@ import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index bfc1f5716e..c2920aaebe 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	emits: ['click'],
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 58bf2f81aa..be3e04df15 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -26,6 +26,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index 83e8d4462d..702cbb98c3 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -24,6 +24,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/hr.vue b/src/client/components/ui/hr.vue
index 9941b50f82..6b075cb440 100644
--- a/src/client/components/ui/hr.vue
+++ b/src/client/components/ui/hr.vue
@@ -3,7 +3,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({});
 </script>
 
diff --git a/src/client/components/ui/info.vue b/src/client/components/ui/info.vue
index 1cacea4c54..62ab5c8116 100644
--- a/src/client/components/ui/info.vue
+++ b/src/client/components/ui/info.vue
@@ -9,6 +9,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index cf81cdf2b6..971b244a53 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -57,6 +57,7 @@
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
 import debounce from 'v-debounce';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	directives: {
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index e35f780d0d..c978fdc692 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -16,7 +16,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from './button.vue';
-import paging from '../../scripts/paging';
+import paging from '@/scripts/paging';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/ui/radio.vue b/src/client/components/ui/radio.vue
index 6ae3418f68..7ad6015692 100644
--- a/src/client/components/ui/radio.vue
+++ b/src/client/components/ui/radio.vue
@@ -17,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({
 	model: {
 		prop: 'model',
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index b51363c14f..c6e585cf50 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({
 	props: {
 		value: {
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index d48bbcb1ba..f5fe25ecfd 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -26,6 +26,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index 0064dc95ab..8af979f780 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -26,7 +26,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue';import * as os from '@/os';
+
 export default defineComponent({
 	props: {
 		value: {
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index d621289a2f..6820be8a7c 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -20,6 +20,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/ui/tooltip.vue b/src/client/components/ui/tooltip.vue
index 6de6f4dd6e..bd6f255805 100644
--- a/src/client/components/ui/tooltip.vue
+++ b/src/client/components/ui/tooltip.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/uploader.vue b/src/client/components/uploader.vue
index 283021af92..a368e842b0 100644
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -19,9 +19,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { apiUrl } from '../config';
-//import getMD5 from '../../scripts/get-md5';
+import { apiUrl } from '@/config';
+//import getMD5 from '@/scripts/get-md5';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	data() {
@@ -36,7 +37,7 @@ export default defineComponent({
 				const data = new FormData();
 				data.append('md5', getMD5(fileData));
 
-				this.$root.api('drive/files/find-by-hash', {
+				os.api('drive/files/find-by-hash', {
 					md5: getMD5(fileData)
 				}).then(resp => {
 					resolve(resp.length > 0 ? resp[0] : null);
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 7fcbb6e365..72817e6aa1 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkUrlPreview from './url-preview.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/url-preview.vue b/src/client/components/url-preview.vue
index b5cdd087f1..28ccd9d91b 100644
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -36,7 +36,8 @@
 import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
-import { url as local, lang } from '../config';
+import { url as local, lang } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index 7f59024b13..98583a3ff1 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -22,9 +22,10 @@
 import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
-import { url as local } from '../config';
+import { url as local } from '@/config';
 import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 04e35716f6..afa823a8aa 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -31,10 +31,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import paging from '../scripts/paging';
+import paging from '@/scripts/paging';
 import MkContainer from './ui/container.vue';
 import MkFollowButton from './follow-button.vue';
 import { userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/user-menu.vue b/src/client/components/user-menu.vue
index 7547905cd6..7a42340dfc 100644
--- a/src/client/components/user-menu.vue
+++ b/src/client/components/user-menu.vue
@@ -7,9 +7,10 @@ import { defineComponent } from 'vue';
 import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XMenu from './menu.vue';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { host } from '../config';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { host } from '@/config';
 import getAcct from '../../misc/acct/render';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -98,15 +99,15 @@ export default defineComponent({
 	methods: {
 		async pushList() {
 			const t = this.$t('selectList'); // なぜか後で参照すると null になるので最初にメモリに確保しておく
-			const lists = await this.$root.api('users/lists/list');
+			const lists = await os.api('users/lists/list');
 			if (lists.length === 0) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('youHaveNoLists')
 				});
 				return;
 			}
-			const { canceled, result: listId } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: listId } = await os.dialog({
 				type: null,
 				title: t,
 				select: {
@@ -117,16 +118,16 @@ export default defineComponent({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			this.$root.api('users/lists/push', {
+			os.api('users/lists/push', {
 				listId: listId,
 				userId: this.user.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -134,15 +135,15 @@ export default defineComponent({
 		},
 
 		async inviteGroup() {
-			const groups = await this.$root.api('users/groups/owned');
+			const groups = await os.api('users/groups/owned');
 			if (groups.length === 0) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('youHaveNoGroups')
 				});
 				return;
 			}
-			const { canceled, result: groupId } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: groupId } = await os.dialog({
 				type: null,
 				title: this.$t('group'),
 				select: {
@@ -153,16 +154,16 @@ export default defineComponent({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			this.$root.api('users/groups/invite', {
+			os.api('users/groups/invite', {
 				groupId: groupId,
 				userId: this.user.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -170,16 +171,16 @@ export default defineComponent({
 		},
 
 		async toggleMute() {
-			this.$root.api(this.user.isMuted ? 'mute/delete' : 'mute/create', {
+			os.api(this.user.isMuted ? 'mute/delete' : 'mute/create', {
 				userId: this.user.id
 			}).then(() => {
 				this.user.isMuted = !this.user.isMuted;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -189,16 +190,16 @@ export default defineComponent({
 		async toggleBlock() {
 			if (!await this.getConfirmed(this.user.isBlocking ? this.$t('unblockConfirm') : this.$t('blockConfirm'))) return;
 
-			this.$root.api(this.user.isBlocking ? 'blocking/delete' : 'blocking/create', {
+			os.api(this.user.isBlocking ? 'blocking/delete' : 'blocking/create', {
 				userId: this.user.id
 			}).then(() => {
 				this.user.isBlocking = !this.user.isBlocking;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -208,16 +209,16 @@ export default defineComponent({
 		async toggleSilence() {
 			if (!await this.getConfirmed(this.$t(this.user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
 
-			this.$root.api(this.user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
+			os.api(this.user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
 				userId: this.user.id
 			}).then(() => {
 				this.user.isSilenced = !this.user.isSilenced;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -227,16 +228,16 @@ export default defineComponent({
 		async toggleSuspend() {
 			if (!await this.getConfirmed(this.$t(this.user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
 
-			this.$root.api(this.user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
+			os.api(this.user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
 				userId: this.user.id
 			}).then(() => {
 				this.user.isSuspended = !this.user.isSuspended;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}, e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -244,7 +245,7 @@ export default defineComponent({
 		},
 
 		async getConfirmed(text: string): Promise<Boolean> {
-			const confirm = await this.$store.dispatch('showDialog', {
+			const confirm = await os.dialog({
 				type: 'warning',
 				showCancelButton: true,
 				title: 'confirm',
diff --git a/src/client/components/user-name.vue b/src/client/components/user-name.vue
index f4a2f7c667..3ca476ca7f 100644
--- a/src/client/components/user-name.vue
+++ b/src/client/components/user-name.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index 78b8ecd692..7b7622d86e 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -31,6 +31,7 @@ import { defineComponent } from 'vue';
 import parseAcct from '../../misc/acct/parse';
 import MkFollowButton from './follow-button.vue';
 import { userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -66,7 +67,7 @@ export default defineComponent({
 				parseAcct(this.user.substr(1)) :
 				{ userId: this.user };
 
-			this.$root.api('users/show', query).then(user => {
+			os.api('users/show', query).then(user => {
 				if (this.closed) return;
 				this.u = user;
 				this.show = true;
diff --git a/src/client/components/user-select.vue b/src/client/components/user-select.vue
index 0d9461d86f..f6efe82fa1 100644
--- a/src/client/components/user-select.vue
+++ b/src/client/components/user-select.vue
@@ -24,6 +24,7 @@ import { defineComponent } from 'vue';
 import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkInput from './ui/input.vue';
 import XWindow from './window.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -58,7 +59,7 @@ export default defineComponent({
 				this.users = [];
 				return;
 			}
-			this.$root.api('users/search-by-username-and-host', {
+			os.api('users/search-by-username-and-host', {
 				username: this.username,
 				host: this.host,
 				limit: 10,
diff --git a/src/client/components/users-dialog.vue b/src/client/components/users-dialog.vue
index 236953c0f6..8b88fe6b77 100644
--- a/src/client/components/users-dialog.vue
+++ b/src/client/components/users-dialog.vue
@@ -30,9 +30,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import paging from '../scripts/paging';
+import paging from '@/scripts/paging';
 import XModal from './modal.vue';
 import { userPage } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index fc5a115b86..03c9b844a1 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/src/client/components/visibility-chooser.vue
@@ -47,6 +47,7 @@ import { defineComponent } from 'vue';
 import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/window.vue b/src/client/components/window.vue
index 53b8b6f99a..7608a1ec17 100644
--- a/src/client/components/window.vue
+++ b/src/client/components/window.vue
@@ -21,6 +21,7 @@
 import { defineComponent } from 'vue';
 import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import XModal from './modal.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/config.ts b/src/client/config.ts
index badb695245..8b9091649d 100644
--- a/src/client/config.ts
+++ b/src/client/config.ts
@@ -19,3 +19,4 @@ export const version = _VERSION_;
 export const env = _ENV_;
 export const instanceName = siteName === 'Misskey' ? null : siteName;
 export const deckmode = localStorage.getItem('deckmode') === 'true';
+export const _DEV_ = env !== 'production';
diff --git a/src/client/deck.vue b/src/client/deck.vue
index 613d462dda..723ebc31f3 100644
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -38,12 +38,13 @@ import { defineComponent } from 'vue';
 import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
 import {  } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
-import { host } from './config';
-import { search } from './scripts/search';
-import DeckColumnCore from './components/deck/column-core.vue';
-import DeckColumn from './components/deck/column.vue';
-import XSidebar from './components/sidebar.vue';
-import { getScrollContainer } from './scripts/scroll';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import DeckColumnCore from '@/components/deck/column-core.vue';
+import DeckColumn from '@/components/deck/column.vue';
+import XSidebar from '@/components/sidebar.vue';
+import { getScrollContainer } from '@/scripts/scroll';
+import * as os from './os';
 
 export default defineComponent({
 	components: {
@@ -141,7 +142,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -165,7 +166,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('./components/toast.vue'), {
+				this.$root.new(await import('@/components/toast.vue'), {
 					notification
 				});
 			}
@@ -183,7 +184,7 @@ export default defineComponent({
 				'direct',
 			];
 
-			const { canceled, result: column } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: column } = await os.dialog({
 				title: this.$t('_deck.addColumn'),
 				type: null,
 				select: {
diff --git a/src/client/default.vue b/src/client/default.vue
index a1a3a312a7..544343bfc3 100644
--- a/src/client/default.vue
+++ b/src/client/default.vue
@@ -90,19 +90,20 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { v4 as uuid } from 'uuid';
-import { host } from './config';
-import { search } from './scripts/search';
-import { StickySidebar } from './scripts/sticky-sidebar';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import { StickySidebar } from '@/scripts/sticky-sidebar';
 import { widgets } from './widgets';
-import XSidebar from './components/sidebar.vue';
+import XSidebar from '@/components/sidebar.vue';
+import * as os from './os';
 
 const DESKTOP_THRESHOLD = 1100;
 
 export default defineComponent({
 	components: {
 		XSidebar,
-		XClock: defineAsyncComponent(() => import('./components/header-clock.vue')),
-		MkButton: defineAsyncComponent(() => import('./components/ui/button.vue')),
+		XClock: defineAsyncComponent(() => import('@/components/header-clock.vue')),
+		MkButton: defineAsyncComponent(() => import('@/components/ui/button.vue')),
 		XDraggable: defineAsyncComponent(() => import('vuedraggable')),
 	},
 
@@ -301,7 +302,7 @@ export default defineComponent({
 		search() {
 			if (this.searching) return;
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('search'),
 				input: true
 			}).then(async ({ canceled, result: query }) => {
@@ -334,7 +335,7 @@ export default defineComponent({
 					id: notification.id
 				});
 
-				this.$root.new(await import('./components/toast.vue'), {
+				this.$root.new(await import('@/components/toast.vue'), {
 					notification
 				});
 			}
@@ -351,7 +352,7 @@ export default defineComponent({
 		},
 
 		async addWidget(place) {
-			const { canceled, result: widget } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: widget } = await os.dialog({
 				type: null,
 				title: this.$t('chooseWidget'),
 				select: {
diff --git a/src/client/directives/autocomplete.ts b/src/client/directives/autocomplete.ts
index 9ba950b02f..efba808f37 100644
--- a/src/client/directives/autocomplete.ts
+++ b/src/client/directives/autocomplete.ts
@@ -155,7 +155,7 @@ class Autocomplete {
 
 			this.opening = false;
 		} else {
-			const MkAutocomplete = await import('../components/autocomplete.vue');
+			const MkAutocomplete = await import('@/components/autocomplete.vue');
 
 			// サジェスト要素作成
 			this.suggestion = new MkAutocomplete({
diff --git a/src/client/directives/particle.ts b/src/client/directives/particle.ts
index 4fb2a7948e..5a892bc6b2 100644
--- a/src/client/directives/particle.ts
+++ b/src/client/directives/particle.ts
@@ -1,4 +1,4 @@
-import Particle from '../components/particle.vue';
+import Particle from '@/components/particle.vue';
 
 export default {
 	bind(el, binding, vn) {
diff --git a/src/client/directives/tooltip.ts b/src/client/directives/tooltip.ts
index 73063eeb15..34314fd227 100644
--- a/src/client/directives/tooltip.ts
+++ b/src/client/directives/tooltip.ts
@@ -1,6 +1,6 @@
 import { Directive } from 'vue';
-import MkTooltip from '../components/ui/tooltip.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import MkTooltip from '@/components/ui/tooltip.vue';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
 
 const start = isDeviceTouch ? 'touchstart' : 'mouseover';
 const end = isDeviceTouch ? 'touchend' : 'mouseleave';
diff --git a/src/client/directives/user-preview.ts b/src/client/directives/user-preview.ts
index a22ccb8eed..8b098761c1 100644
--- a/src/client/directives/user-preview.ts
+++ b/src/client/directives/user-preview.ts
@@ -1,5 +1,5 @@
 import { Directive } from 'vue';
-import MkUserPreview from '../components/user-preview.vue';
+import MkUserPreview from '@/components/user-preview.vue';
 
 export default {
 	mounted(el: HTMLElement, binding, vn) {
diff --git a/src/client/filters/user.ts b/src/client/filters/user.ts
index c57402a963..87f37e2920 100644
--- a/src/client/filters/user.ts
+++ b/src/client/filters/user.ts
@@ -1,6 +1,6 @@
 import getAcct from '../../misc/acct/render';
 import getUserName from '../../misc/get-user-name';
-import { url } from '../config';
+import { url } from '@/config';
 
 export const acct = user => {
 	return getAcct(user);
@@ -12,4 +12,4 @@ export const userName = user => {
 
 export const userPage = (user, path?, absolute = false) => {
 	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
-}
\ No newline at end of file
+}
diff --git a/src/client/i18n.ts b/src/client/i18n.ts
index 1a1823f2b9..fc05b9d222 100644
--- a/src/client/i18n.ts
+++ b/src/client/i18n.ts
@@ -1,7 +1,7 @@
 import { createI18n } from 'vue-i18n';
 import { clientDb, get, count } from './db';
-import { setI18nContexts } from './scripts/set-i18n-contexts';
-import { version, langs, getLocale } from './config';
+import { setI18nContexts } from '@/scripts/set-i18n-contexts';
+import { version, langs, getLocale } from '@/config';
 
 let _lang = localStorage.getItem('lang');
 
diff --git a/src/client/init.ts b/src/client/init.ts
index fc6b82297f..2216528d48 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -9,18 +9,18 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { AiScript } from '@syuilo/aiscript';
 import { deserialize } from '@syuilo/aiscript/built/serializer';
 
-import VueHotkey from './scripts/hotkey';
+import VueHotkey from '@/scripts/hotkey';
 import Root from './root.vue';
-import Stream from './scripts/stream';
+import Stream from '@/scripts/stream';
 import widgets from './widgets';
 import directives from './directives';
-import components from './components';
-import { version, apiUrl } from './config';
+import components from '@/components';
+import { version, apiUrl } from '@/config';
 import { store } from './store';
 import { router } from './router';
-import { applyTheme, lightTheme } from './scripts/theme';
-import { isDeviceDarkmode } from './scripts/is-device-darkmode';
-import { createPluginEnv } from './scripts/aiscript/api';
+import { applyTheme, lightTheme } from '@/scripts/theme';
+import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
+import { createPluginEnv } from '@/scripts/aiscript/api';
 import { i18n, lang } from './i18n';
 
 console.info(`Misskey v${version}`);
@@ -156,7 +156,7 @@ window.addEventListener('storage', e => {
 }, false);
 
 store.watch(state => state.device.darkMode, darkMode => {
-	import('./scripts/theme').then(({ builtinThemes }) => {
+	import('@/scripts/theme').then(({ builtinThemes }) => {
 		const themes = builtinThemes.concat(store.state.device.themes);
 		applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
 	});
diff --git a/src/client/os.ts b/src/client/os.ts
new file mode 100644
index 0000000000..92ef544a40
--- /dev/null
+++ b/src/client/os.ts
@@ -0,0 +1,20 @@
+import { defineAsyncComponent } from 'vue';
+import { store } from './store';
+
+export function api(endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) {
+	return store.dispatch('api', { endpoint, data, token });
+}
+
+export function dialog(props: Record<string, any>) {
+	return store.dispatch('showDialog', {
+		component: defineAsyncComponent(() => import('@/components/dialog.vue')),
+		props
+	});
+}
+
+export function menu(props: Record<string, any>) {
+	return store.dispatch('showDialog', {
+		component: defineAsyncComponent(() => import('@/components/menu.vue')),
+		props
+	});
+}
diff --git a/src/client/pages/about-misskey.vue b/src/client/pages/about-misskey.vue
index b2260acd51..730dbf5059 100644
--- a/src/client/pages/about-misskey.vue
+++ b/src/client/pages/about-misskey.vue
@@ -62,8 +62,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { version } from '../config';
-import MkLink from '../components/link.vue';
+import { version } from '@/config';
+import MkLink from '@/components/link.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index 0a0f935ed7..158bf49958 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -23,8 +23,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { version } from '../config';
-import MkInstanceStats from '../components/instance-stats.vue';
+import { version } from '@/config';
+import MkInstanceStats from '@/components/instance-stats.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 9d15cd0785..69c6b4daba 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -20,8 +20,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCheck, faBroadcastTower } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../components/ui/pagination.vue';
-import MkButton from '../components/ui/button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -52,7 +53,7 @@ export default defineComponent({
 				...announcement,
 				isRead: true,
 			});
-			this.$root.api('i/read-announcement', { announcementId: announcement.id });
+			os.api('i/read-announcement', { announcementId: announcement.id });
 		},
 	}
 });
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index 1b04bf1b23..f781e05a6b 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -42,7 +42,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTrashAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../components/ui/pagination.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -70,7 +71,7 @@ export default defineComponent({
 
 	methods: {
 		revoke(token) {
-			this.$root.api('i/revoke-token', { tokenId: token.id }).then(() => {
+			os.api('i/revoke-token', { tokenId: token.id }).then(() => {
 				this.$refs.list.reload();
 			});
 		}
diff --git a/src/client/pages/auth.form.vue b/src/client/pages/auth.form.vue
index 368d465bf0..28ec95093e 100644
--- a/src/client/pages/auth.form.vue
+++ b/src/client/pages/auth.form.vue
@@ -23,7 +23,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkButton from '../components/ui/button.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -42,7 +43,7 @@ export default defineComponent({
 	},
 	methods: {
 		cancel() {
-			this.$root.api('auth/deny', {
+			os.api('auth/deny', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('denied');
@@ -50,7 +51,7 @@ export default defineComponent({
 		},
 
 		accept() {
-			this.$root.api('auth/accept', {
+			os.api('auth/accept', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('accepted');
diff --git a/src/client/pages/auth.vue b/src/client/pages/auth.vue
index 8cb011e594..1d8386d1e9 100755
--- a/src/client/pages/auth.vue
+++ b/src/client/pages/auth.vue
@@ -31,7 +31,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XForm from './auth.form.vue';
-import MkSignin from '../components/signin.vue';
+import MkSignin from '@/components/signin.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -54,7 +55,7 @@ export default defineComponent({
 		if (!this.$store.getters.isSignedIn) return;
 
 		// Fetch session
-		this.$root.api('auth/session/show', {
+		os.api('auth/session/show', {
 			token: this.token
 		}).then(session => {
 			this.session = session;
@@ -62,7 +63,7 @@ export default defineComponent({
 
 			// 既に連携していた場合
 			if (this.session.app.isAuthorized) {
-				this.$root.api('auth/accept', {
+				os.api('auth/accept', {
 					token: this.session.token
 				}).then(() => {
 					this.accepted();
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index cdc7dc97c7..21fa45f611 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -27,10 +27,11 @@
 import { defineComponent } from 'vue';
 import { faPlus, faSatelliteDish } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkTextarea from '../components/ui/textarea.vue';
-import MkButton from '../components/ui/button.vue';
-import MkInput from '../components/ui/input.vue';
-import { selectFile } from '../scripts/select-file';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -60,7 +61,7 @@ export default defineComponent({
 			if (this.bannerId == null) {
 				this.bannerUrl = null;
 			} else {
-				this.bannerUrl = (await this.$root.api('drive/files/show', {
+				this.bannerUrl = (await os.api('drive/files/show', {
 					fileId: this.bannerId,
 				})).url;
 			}
@@ -69,7 +70,7 @@ export default defineComponent({
 
 	async created() {
 		if (this.channelId) {
-			this.channel = await this.$root.api('channels/show', {
+			this.channel = await os.api('channels/show', {
 				channelId: this.channelId,
 			});
 
@@ -90,17 +91,17 @@ export default defineComponent({
 
 			if (this.channelId) {
 				params.channelId = this.channelId;
-				this.$root.api('channels/update', params)
+				os.api('channels/update', params)
 				.then(channel => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				});
 			} else {
-				this.$root.api('channels/create', params)
+				os.api('channels/create', params)
 				.then(channel => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/channel.vue b/src/client/pages/channel.vue
index a02a48005c..5f7ccace74 100644
--- a/src/client/pages/channel.vue
+++ b/src/client/pages/channel.vue
@@ -32,10 +32,11 @@
 import { defineComponent } from 'vue';
 import { faSatelliteDish, faUsers, faPencilAlt, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import {  } from '@fortawesome/free-regular-svg-icons';
-import MkContainer from '../components/ui/container.vue';
-import XPostForm from '../components/post-form.vue';
-import XTimeline from '../components/timeline.vue';
-import XChannelFollowButton from '../components/channel-follow-button.vue';
+import MkContainer from '@/components/ui/container.vue';
+import XPostForm from '@/components/post-form.vue';
+import XTimeline from '@/components/timeline.vue';
+import XChannelFollowButton from '@/components/channel-follow-button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -76,7 +77,7 @@ export default defineComponent({
 	watch: {
 		channelId: {
 			async handler() {
-				this.channel = await this.$root.api('channels/show', {
+				this.channel = await os.api('channels/show', {
 					channelId: this.channelId,
 				});
 			},
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index 4033615a44..a1839c7e12 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -29,10 +29,11 @@
 import { defineComponent } from 'vue';
 import { faSatelliteDish, faPlus, faEdit, faFireAlt } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
-import MkChannelPreview from '../components/channel-preview.vue';
-import MkPagination from '../components/ui/pagination.vue';
-import MkButton from '../components/ui/button.vue';
-import MkTab from '../components/tab.vue';
+import MkChannelPreview from '@/components/channel-preview.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkTab from '@/components/tab.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index c177e66210..e372107157 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -18,8 +18,9 @@ import { defineComponent } from 'vue';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
 import MarkdownIt from 'markdown-it';
 import MarkdownItAnchor from 'markdown-it-anchor';
-import { url, lang } from '../config';
-import MkLink from '../components/link.vue';
+import { url, lang } from '@/config';
+import MkLink from '@/components/link.vue';
+import * as os from '@/os';
 
 const markdown = MarkdownIt({
 	html: true
diff --git a/src/client/pages/docs.vue b/src/client/pages/docs.vue
index 3541b93381..577b5d116e 100644
--- a/src/client/pages/docs.vue
+++ b/src/client/pages/docs.vue
@@ -16,7 +16,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
-import { url, lang } from '../config';
+import { url, lang } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index d91273d865..55b5bd8431 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -15,7 +15,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCloud, faAngleDown, faAngleUp, faFolderPlus, faUpload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import XDrive from '../components/drive.vue';
+import XDrive from '@/components/drive.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -39,7 +40,7 @@ export default defineComponent({
 	methods: {
 		menu(ev) {
 			this.menuOpened = true;
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('addFile'),
 					type: 'label'
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index fb50fa1c77..84bb42b31f 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -56,9 +56,10 @@
 import { defineComponent } from 'vue';
 import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
-import XUserList from '../components/user-list.vue';
-import MkContainer from '../components/ui/container.vue';
+import XUserList from '@/components/user-list.vue';
+import MkContainer from '@/components/ui/container.vue';
 import number from '../filters/number';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -141,21 +142,21 @@ export default defineComponent({
 	},
 
 	created() {
-		this.$root.api('hashtags/list', {
+		os.api('hashtags/list', {
 			sort: '+attachedLocalUsers',
 			attachedToLocalUserOnly: true,
 			limit: 30
 		}).then(tags => {
 			this.tagsLocal = tags;
 		});
-		this.$root.api('hashtags/list', {
+		os.api('hashtags/list', {
 			sort: '+attachedRemoteUsers',
 			attachedToRemoteUserOnly: true,
 			limit: 30
 		}).then(tags => {
 			this.tagsRemote = tags;
 		});
-		this.$root.api('stats').then(stats => {
+		os.api('stats').then(stats => {
 			this.stats = stats;
 		});
 	},
diff --git a/src/client/pages/favorites.vue b/src/client/pages/favorites.vue
index 5f3749a803..843874ff0a 100644
--- a/src/client/pages/favorites.vue
+++ b/src/client/pages/favorites.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/featured.vue b/src/client/pages/featured.vue
index 82368f5eb0..cecbed621e 100644
--- a/src/client/pages/featured.vue
+++ b/src/client/pages/featured.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faFireAlt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/follow-requests.vue b/src/client/pages/follow-requests.vue
index 2642edcf58..14b2f92310 100644
--- a/src/client/pages/follow-requests.vue
+++ b/src/client/pages/follow-requests.vue
@@ -34,8 +34,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../components/ui/pagination.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import { userPage, acct } from '../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -60,12 +61,12 @@ export default defineComponent({
 
 	methods: {
 		accept(user) {
-			this.$root.api('following/requests/accept', { userId: user.id }).then(() => {
+			os.api('following/requests/accept', { userId: user.id }).then(() => {
 				this.$refs.list.reload();
 			});
 		},
 		reject(user) {
-			this.$root.api('following/requests/reject', { userId: user.id }).then(() => {
+			os.api('following/requests/reject', { userId: user.id }).then(() => {
 				this.$refs.list.reload();
 			});
 		},
diff --git a/src/client/pages/follow.vue b/src/client/pages/follow.vue
index bb75b71613..b3f314ee81 100644
--- a/src/client/pages/follow.vue
+++ b/src/client/pages/follow.vue
@@ -5,13 +5,14 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	created() {
 		const acct = new URL(location.href).searchParams.get('acct');
 		if (acct == null) return;
 
-		const dialog = this.$store.dispatch('showDialog', {
+		const dialog = os.dialog({
 			type: 'waiting',
 			text: this.$t('fetchingAsApObject') + '...',
 			showOkButton: false,
@@ -20,13 +21,13 @@ export default defineComponent({
 		});
 
 		if (acct.startsWith('https://')) {
-			this.$root.api('ap/show', {
+			os.api('ap/show', {
 				uri: acct
 			}).then(res => {
 				if (res.type == 'User') {
 					this.follow(res.object);
 				} else {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: 'Not a user'
 					}).then(() => {
@@ -34,7 +35,7 @@ export default defineComponent({
 					});
 				}
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				}).then(() => {
@@ -44,10 +45,10 @@ export default defineComponent({
 				dialog.close();
 			});
 		} else {
-			this.$root.api('users/show', parseAcct(acct)).then(user => {
+			os.api('users/show', parseAcct(acct)).then(user => {
 				this.follow(user);
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				}).then(() => {
@@ -61,7 +62,7 @@ export default defineComponent({
 
 	methods: {
 		async follow(user) {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'question',
 				text: this.$t('followConfirm', { name: user.name || user.username }),
 				showCancelButton: true
@@ -72,17 +73,17 @@ export default defineComponent({
 				return;
 			}
 			
-			this.$root.api('following/create', {
+			os.api('following/create', {
 				userId: user.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				}).then(() => {
 					window.close();
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				}).then(() => {
diff --git a/src/client/pages/index.home.tutorial.vue b/src/client/pages/index.home.tutorial.vue
index d404081cc9..37bd56f476 100644
--- a/src/client/pages/index.home.tutorial.vue
+++ b/src/client/pages/index.home.tutorial.vue
@@ -62,7 +62,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle, faChevronLeft, faChevronRight, faCheck } from '@fortawesome/free-solid-svg-icons'
-import MkButton from '../components/ui/button.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/index.home.vue b/src/client/pages/index.home.vue
index 35b3a3283b..24ddf0ac3e 100644
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -28,10 +28,11 @@
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
-import Progress from '../scripts/loading';
-import XTimeline from '../components/timeline.vue';
-import XPostForm from '../components/post-form.vue';
-import { scroll } from '../scripts/scroll';
+import Progress from '@/scripts/loading';
+import XTimeline from '@/components/timeline.vue';
+import XPostForm from '@/components/post-form.vue';
+import { scroll } from '@/scripts/scroll';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -136,9 +137,9 @@ export default defineComponent({
 			if (this.meta == null) return;
 			this.menuOpened = true;
 			const [antennas, lists, channels] = await Promise.all([
-				this.$root.api('antennas/list'),
-				this.$root.api('users/lists/list'),
-				this.$root.api('channels/followed'),
+				os.api('antennas/list'),
+				os.api('users/lists/list'),
+				os.api('channels/followed'),
 			]);
 			const antennaItems = antennas.map(antenna => ({
 				text: antenna.name,
@@ -171,7 +172,7 @@ export default defineComponent({
 					this.$router.push(`/channels/${channel.id}`);
 				}
 			}));
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('_timelines.home'),
 					icon: faHome,
diff --git a/src/client/pages/index.vue b/src/client/pages/index.vue
index 6000a5627d..a7dea2ad26 100644
--- a/src/client/pages/index.vue
+++ b/src/client/pages/index.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import Home from './index.home.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	name: 'index',
diff --git a/src/client/pages/index.welcome.entrance.vue b/src/client/pages/index.welcome.entrance.vue
index 830c2c2525..cd12f1a22a 100644
--- a/src/client/pages/index.welcome.entrance.vue
+++ b/src/client/pages/index.welcome.entrance.vue
@@ -16,11 +16,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import XSigninDialog from '../components/signin-dialog.vue';
-import XSignupDialog from '../components/signup-dialog.vue';
-import MkButton from '../components/ui/button.vue';
-import XNotes from '../components/notes.vue';
-import { host } from '../config';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XNotes from '@/components/notes.vue';
+import { host } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -46,7 +47,7 @@ export default defineComponent({
 	},
 
 	created() {
-		this.$root.api('stats').then(stats => {
+		os.api('stats').then(stats => {
 			this.stats = stats;
 		});
 	},
diff --git a/src/client/pages/index.welcome.setup.vue b/src/client/pages/index.welcome.setup.vue
index e26bf8394d..ff8203c999 100644
--- a/src/client/pages/index.welcome.setup.vue
+++ b/src/client/pages/index.welcome.setup.vue
@@ -22,9 +22,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../components/ui/button.vue';
-import MkInput from '../components/ui/input.vue';
-import { host } from '../config';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import { host } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	
@@ -48,7 +49,7 @@ export default defineComponent({
 			if (this.submitting) return;
 			this.submitting = true;
 
-			this.$root.api('admin/accounts/create', {
+			os.api('admin/accounts/create', {
 				username: this.username,
 				password: this.password,
 			}).then(res => {
@@ -57,7 +58,7 @@ export default defineComponent({
 			}).catch(() => {
 				this.submitting = false;
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('error')
 				});
diff --git a/src/client/pages/index.welcome.vue b/src/client/pages/index.welcome.vue
index a9089856d7..21b0f70d6e 100644
--- a/src/client/pages/index.welcome.vue
+++ b/src/client/pages/index.welcome.vue
@@ -10,7 +10,8 @@
 import { defineComponent } from 'vue';
 import XSetup from './index.welcome.setup.vue';
 import XEntrance from './index.welcome.entrance.vue';
-import { instanceName } from '../config';
+import { instanceName } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 0cc15b10b3..b5af0202bc 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -27,9 +27,10 @@
 import { defineComponent } from 'vue';
 import { faBroadcastTower, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -52,7 +53,7 @@ export default defineComponent({
 	},
 
 	created() {
-		this.$root.api('admin/announcements/list').then(announcements => {
+		os.api('admin/announcements/list').then(announcements => {
 			this.announcements = announcements;
 		});
 	},
@@ -68,38 +69,38 @@ export default defineComponent({
 		},
 
 		remove(announcement) {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: announcement.title }),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 				this.announcements = this.announcements.filter(x => x != announcement);
-				this.$root.api('admin/announcements/delete', announcement);
+				os.api('admin/announcements/delete', announcement);
 			});
 		},
 
 		save(announcement) {
 			if (announcement.id == null) {
-				this.$root.api('admin/announcements/create', announcement).then(() => {
-					this.$store.dispatch('showDialog', {
+				os.api('admin/announcements/create', announcement).then(() => {
+					os.dialog({
 						type: 'success',
 						text: this.$t('saved')
 					});
 				}).catch(e => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: e
 					});
 				});
 			} else {
-				this.$root.api('admin/announcements/update', announcement).then(() => {
-					this.$store.dispatch('showDialog', {
+				os.api('admin/announcements/update', announcement).then(() => {
+					os.dialog({
 						type: 'success',
 						text: this.$t('saved')
 					});
 				}).catch(e => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: e
 					});
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 9fa7ecd696..df76389e17 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -60,11 +60,12 @@
 import { defineComponent } from 'vue';
 import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faLaugh } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkPagination from '../../components/ui/pagination.vue';
-import { selectFile } from '../../scripts/select-file';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { selectFile } from '@/scripts/select-file';
 import { unique } from '../../../prelude/array';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -128,7 +129,7 @@ export default defineComponent({
 		async add(e) {
 			const files = await selectFile(this, e.currentTarget || e.target, null, true);
 
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				text: this.$t('doing') + '...',
 				showOkButton: false,
@@ -136,12 +137,12 @@ export default defineComponent({
 				cancelableByBgClick: false
 			});
 			
-			Promise.all(files.map(file => this.$root.api('admin/emoji/add', {
+			Promise.all(files.map(file => os.api('admin/emoji/add', {
 				fileId: file.id,
 			})))
 			.then(() => {
 				this.$refs.emojis.reload();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -152,14 +153,14 @@ export default defineComponent({
 		},
 
 		async update() {
-			await this.$root.api('admin/emoji/update', {
+			await os.api('admin/emoji/update', {
 				id: this.selected.id,
 				name: this.name,
 				category: this.category,
 				aliases: this.aliases.split(' '),
 			});
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -168,14 +169,14 @@ export default defineComponent({
 		},
 
 		async del() {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.selected.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			this.$root.api('admin/emoji/remove', {
+			os.api('admin/emoji/remove', {
 				id: this.selected.id
 			}).then(() => {
 				this.$refs.emojis.reload();
@@ -183,16 +184,16 @@ export default defineComponent({
 		},
 
 		im() {
-			this.$root.api('admin/emoji/copy', {
+			os.api('admin/emoji/copy', {
 				emojiId: this.selectedRemote.id,
 			}).then(() => {
 				this.$refs.emojis.reload();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 15095b56f8..9340fc672d 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -61,11 +61,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkPagination from '../../components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import MkInstanceInfo from './instance.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index 657ea1f743..c5b29d3442 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -11,8 +11,9 @@
 import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkPagination from '../../components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -34,15 +35,15 @@ export default defineComponent({
 
 	methods: {
 		clear() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('clearCachedFilesConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('admin/drive/clean-remote-files', {}).then(() => {
-					this.$store.dispatch('showDialog', {
+				os.api('admin/drive/clean-remote-files', {}).then(() => {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/instance/index.queue-chart.vue b/src/client/pages/instance/index.queue-chart.vue
index f6a5ead8da..86682df470 100644
--- a/src/client/pages/instance/index.queue-chart.vue
+++ b/src/client/pages/instance/index.queue-chart.vue
@@ -21,7 +21,7 @@
 import { defineComponent } from 'vue';
 import Chart from 'chart.js';
 import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
@@ -30,6 +30,7 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 0dde781acc..5502d6bb9c 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -187,14 +187,14 @@ import { defineComponent } from 'vue';
 import { faPlay, faPause, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import VueJsonPretty from 'vue-json-pretty';
-import MkInstanceStats from '../../components/instance-stats.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkContainer from '../../components/ui/container.vue';
-import MkFolder from '../../components/ui/folder.vue';
+import MkInstanceStats from '@/components/instance-stats.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkFolder from '@/components/ui/folder.vue';
 import MkwFederation from '../../widgets/federation.vue';
-import { version, url } from '../../config';
+import { version, url } from '@/config';
 import bytes from '../../filters/bytes';
 import XQueue from './index.queue-chart.vue';
 import MkInstanceInfo from './instance.vue';
@@ -206,6 +206,7 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -495,7 +496,7 @@ export default defineComponent({
 			}
 		});
 
-		this.$root.api('admin/server-info', {}).then(res => {
+		os.api('admin/server-info', {}).then(res => {
 			this.serverInfo = res;
 
 			this.connection = this.$root.stream.useSharedConnection('serverStats');
@@ -514,7 +515,7 @@ export default defineComponent({
 			});
 		});
 
-		this.$root.api('admin/get-table-stats', {}).then(res => {
+		os.api('admin/get-table-stats', {}).then(res => {
 			this.dbInfo = Object.entries(res).sort((a, b) => b[1].size - a[1].size);
 		});
 
@@ -545,7 +546,7 @@ export default defineComponent({
 		async showInstanceInfo(q) {
 			let instance = q;
 			if (typeof q === 'string') {
-				instance = await this.$root.api('federation/show-instance', {
+				instance = await os.api('federation/show-instance', {
 					host: q
 				});
 			}
@@ -555,7 +556,7 @@ export default defineComponent({
 		},
 
 		fetchLogs() {
-			this.$root.api('admin/logs', {
+			os.api('admin/logs', {
 				level: this.logLevel === 'all' ? null : this.logLevel,
 				domain: this.logDomain === '' ? null : this.logDomain,
 				limit: 30
@@ -565,20 +566,20 @@ export default defineComponent({
 		},
 
 		fetchJobs() {
-			this.$root.api('admin/queue/deliver-delayed', {}).then(jobs => {
+			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
 				this.jobs = jobs;
 			});
 		},
 
 		fetchModLogs() {
-			this.$root.api('admin/show-moderation-logs', {}).then(logs => {
+			os.api('admin/show-moderation-logs', {}).then(logs => {
 				this.modLogs = logs;
 			});
 		},
 
 		deleteAllLogs() {
-			this.$root.api('admin/delete-logs').then(() => {
-				this.$store.dispatch('showDialog', {
+			os.api('admin/delete-logs').then(() => {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index a8dd18b638..bbc6d34f93 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -121,12 +121,12 @@
 import { defineComponent } from 'vue';
 import Chart from 'chart.js';
 import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import XWindow from '../../components/window.vue';
-import MkUsersDialog from '../../components/users-dialog.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkInfo from '../../components/ui/info.vue';
+import XWindow from '@/components/window.vue';
+import MkUsersDialog from '@/components/users-dialog.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkInfo from '@/components/ui/info.vue';
 import bytes from '../../filters/bytes';
 import number from '../../filters/number';
 
@@ -140,6 +140,7 @@ const alpha = hex => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, 0.1)`;
 };
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -207,7 +208,7 @@ export default defineComponent({
 
 	watch: {
 		isSuspended() {
-			this.$root.api('admin/federation/update-instance', {
+			os.api('admin/federation/update-instance', {
 				host: this.instance.host,
 				isSuspended: this.isSuspended
 			});
@@ -226,8 +227,8 @@ export default defineComponent({
 		this.now = new Date();
 
 		const [perHour, perDay] = await Promise.all([
-			this.$root.api('charts/instance', { host: this.instance.host, limit: chartLimit, span: 'hour' }),
-			this.$root.api('charts/instance', { host: this.instance.host, limit: chartLimit, span: 'day' }),
+			os.api('charts/instance', { host: this.instance.host, limit: chartLimit, span: 'hour' }),
+			os.api('charts/instance', { host: this.instance.host, limit: chartLimit, span: 'day' }),
 		]);
 
 		const chart = {
@@ -242,7 +243,7 @@ export default defineComponent({
 
 	methods: {
 		changeBlock(e) {
-			this.$root.api('admin/update-meta', {
+			os.api('admin/update-meta', {
 				blockedHosts: this.isBlocked ? this.meta.blockedHosts.concat([this.instance.host]) : this.meta.blockedHosts.filter(x => x !== this.instance.host)
 			});
 		},
@@ -252,10 +253,10 @@ export default defineComponent({
 		},
 
 		removeAllFollowing() {
-			this.$root.api('admin/federation/remove-all-following', {
+			os.api('admin/federation/remove-all-following', {
 				host: this.instance.host
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -263,10 +264,10 @@ export default defineComponent({
 		},
 
 		deleteAllFiles() {
-			this.$root.api('admin/federation/delete-all-files', {
+			os.api('admin/federation/delete-all-files', {
 				host: this.instance.host
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 1e61478e6a..77703ab7ec 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -36,6 +36,7 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -188,7 +189,7 @@ export default defineComponent({
 		},
 
 		fetchJobs() {
-			this.$root.api(this.domain === 'inbox' ? 'admin/queue/inbox-delayed' : this.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(jobs => {
+			os.api(this.domain === 'inbox' ? 'admin/queue/inbox-delayed' : this.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(jobs => {
 				this.jobs = jobs;
 			});
 		},
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index e14149e942..84e077b741 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -20,8 +20,9 @@
 import { defineComponent } from 'vue';
 import { faExchangeAlt } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
+import MkButton from '@/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -57,7 +58,7 @@ export default defineComponent({
 
 	methods: {
 		clear() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				title: this.$t('clearQueueConfirmTitle'),
 				text: this.$t('clearQueueConfirmText'),
@@ -65,8 +66,8 @@ export default defineComponent({
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('admin/queue/clear', {}).then(() => {
-					this.$store.dispatch('showDialog', {
+				os.api('admin/queue/clear', {}).then(() => {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index 7ffa07d553..049fbdd9c5 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -27,8 +27,9 @@
 import { defineComponent } from 'vue';
 import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -56,12 +57,12 @@ export default defineComponent({
 
 	methods: {
 		add(inbox: string) {
-			this.$root.api('admin/relays/add', {
+			os.api('admin/relays/add', {
 				inbox
 			}).then((relay: any) => {
 				this.refresh();
 			}).catch((e: any) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message || e
 				});
@@ -69,12 +70,12 @@ export default defineComponent({
 		},
 
 		remove(inbox: string) {
-			this.$root.api('admin/relays/remove', {
+			os.api('admin/relays/remove', {
 				inbox
 			}).then(() => {
 				this.refresh();
 			}).catch((e: any) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message || e
 				});
@@ -82,7 +83,7 @@ export default defineComponent({
 		},
 
 		refresh() {
-			this.$root.api('admin/relays/list').then((relays: any) => {
+			os.api('admin/relays/list').then((relays: any) => {
 				this.relays = relays;
 			});
 		}
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 05b06df40a..6377725fce 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -237,14 +237,15 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { faPencilAlt, faShareAlt, faGhost, faCog, faPlus, faCloud, faInfoCircle, faBan, faSave, faServer, faLink, faThumbtack, faUser, faShieldAlt, faKey, faBolt, faArchway } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkInfo from '../../components/ui/info.vue';
-import MkUserSelect from '../../components/user-select.vue';
-import { url } from '../../config';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkInfo from '@/components/ui/info.vue';
+import MkUserSelect from '@/components/user-select.vue';
+import { url } from '@/config';
 import getAcct from '../../../misc/acct/render';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -259,7 +260,7 @@ export default defineComponent({
 		MkTextarea,
 		MkSwitch,
 		MkInfo,
-		Captcha: defineAsyncComponent(() => import('../../components/captcha.vue')),
+		Captcha: defineAsyncComponent(() => import('@/components/captcha.vue')),
 	},
 
 	data() {
@@ -393,7 +394,7 @@ export default defineComponent({
 		this.summalyProxy = this.meta.summalyProxy;
 
 		if (this.proxyAccountId) {
-			this.$root.api('users/show', { userId: this.proxyAccountId }).then(proxyAccount => {
+			os.api('users/show', { userId: this.proxyAccountId }).then(proxyAccount => {
 				this.proxyAccount = proxyAccount;
 			});
 		}
@@ -402,7 +403,7 @@ export default defineComponent({
 	mounted() {
 		this.$refs.enableHcaptcha.$on('change', () => {
 			if (this.enableHcaptcha && this.enableRecaptcha) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'question', // warning だと間違って cancel するかもしれない
 					showCancelButton: true,
 					title: this.$t('settingGuide'),
@@ -419,7 +420,7 @@ export default defineComponent({
 
 		this.$refs.enableRecaptcha.$on('change', () => {
 			if (this.enableRecaptcha && this.enableHcaptcha) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'question', // warning だと間違って cancel するかもしれない
 					showCancelButton: true,
 					title: this.$t('settingGuide'),
@@ -437,13 +438,13 @@ export default defineComponent({
 
 	methods: {
 		invite() {
-			this.$root.api('admin/invite').then(x => {
-				this.$store.dispatch('showDialog', {
+			os.api('admin/invite').then(x => {
+				os.dialog({
 					type: 'info',
 					text: x.code
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -467,17 +468,17 @@ export default defineComponent({
 		},
 
 		async testEmail() {
-			this.$root.api('admin/send-email', {
+			os.api('admin/send-email', {
 				to: this.maintainerEmail,
 				subject: 'Test email',
 				text: 'Yo'
 			}).then(x => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					splash: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -485,7 +486,7 @@ export default defineComponent({
 		},
 
 		save(withDialog = false) {
-			this.$root.api('admin/update-meta', {
+			os.api('admin/update-meta', {
 				name: this.name,
 				description: this.description,
 				tosUrl: this.tosUrl,
@@ -546,13 +547,13 @@ export default defineComponent({
 			}).then(() => {
 				this.$store.dispatch('instance/fetch');
 				if (withDialog) {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 259c8496b6..8bdb2f5d29 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -36,10 +36,11 @@
 import { defineComponent } from 'vue';
 import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import Progress from '../../scripts/loading';
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import Progress from '@/scripts/loading';
 import { acct, userPage } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -69,8 +70,8 @@ export default defineComponent({
 	methods: {
 		async fetch() {
 			Progress.start();
-			this.user = await this.$root.api('users/show', { userId: this.$route.params.user });
-			this.info = await this.$root.api('admin/show-user', { userId: this.$route.params.user });
+			this.user = await os.api('users/show', { userId: this.$route.params.user });
+			this.info = await os.api('admin/show-user', { userId: this.$route.params.user });
 			this.moderator = this.info.isModerator;
 			this.silenced = this.info.isSilenced;
 			this.suspended = this.info.isSuspended;
@@ -79,8 +80,8 @@ export default defineComponent({
 
 		/** 処理対象ユーザーの情報を更新する */
 		async refreshUser() {
-			this.user = await this.$root.api('users/show', { userId: this.user.id });
-			this.info = await this.$root.api('admin/show-user', { userId: this.user.id });
+			this.user = await os.api('users/show', { userId: this.user.id });
+			this.info = await os.api('admin/show-user', { userId: this.user.id });
 		},
 
 		openProfile() {
@@ -88,8 +89,8 @@ export default defineComponent({
 		},
 
 		async updateRemoteUser() {
-			await this.$root.api('admin/update-remote-user', { userId: this.user.id }).then(res => {
-				this.$store.dispatch('showDialog', {
+			await os.api('admin/update-remote-user', { userId: this.user.id }).then(res => {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -98,20 +99,20 @@ export default defineComponent({
 		},
 
 		async resetPassword() {
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				iconOnly: true
 			});
 
-			this.$root.api('admin/reset-password', {
+			os.api('admin/reset-password', {
 				userId: this.user.id,
 			}).then(({ password }) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					text: this.$t('newPasswordIs', { password })
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -121,7 +122,7 @@ export default defineComponent({
 		},
 
 		async toggleSilence() {
-			const confirm = await this.$store.dispatch('showDialog', {
+			const confirm = await os.dialog({
 				type: 'warning',
 				showCancelButton: true,
 				text: this.silenced ? this.$t('silenceConfirm') : this.$t('unsilenceConfirm'),
@@ -129,13 +130,13 @@ export default defineComponent({
 			if (confirm.canceled) {
 				this.silenced = !this.silenced;
 			} else {
-				await this.$root.api(this.silenced ? 'admin/silence-user' : 'admin/unsilence-user', { userId: this.user.id });
+				await os.api(this.silenced ? 'admin/silence-user' : 'admin/unsilence-user', { userId: this.user.id });
 				await this.refreshUser();
 			}
 		},
 
 		async toggleSuspend() {
-			const confirm = await this.$store.dispatch('showDialog', {
+			const confirm = await os.dialog({
 				type: 'warning',
 				showCancelButton: true,
 				text: this.suspended ? this.$t('suspendConfirm') : this.$t('unsuspendConfirm'),
@@ -143,32 +144,32 @@ export default defineComponent({
 			if (confirm.canceled) {
 				this.suspended = !this.suspended;
 			} else {
-				await this.$root.api(this.suspended ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: this.user.id });
+				await os.api(this.suspended ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: this.user.id });
 				await this.refreshUser();
 			}
 		},
 
 		async toggleModerator() {
-			await this.$root.api(this.moderator ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: this.user.id });
+			await os.api(this.moderator ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: this.user.id });
 			await this.refreshUser();
 		},
 
 		async deleteAllFiles() {
-			const confirm = await this.$store.dispatch('showDialog', {
+			const confirm = await os.dialog({
 				type: 'warning',
 				showCancelButton: true,
 				text: this.$t('deleteAllFilesConfirm'),
 			});
 			if (confirm.canceled) return;
 			const process = async () => {
-				await this.$root.api('admin/delete-all-files-of-a-user', { userId: this.user.id });
-				this.$store.dispatch('showDialog', {
+				await os.api('admin/delete-all-files-of-a-user', { userId: this.user.id });
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			};
 			await process().catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.toString()
 				});
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index fb4468022c..2b3ae27e30 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -86,12 +86,13 @@ import { defineComponent } from 'vue';
 import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '../../../misc/acct/parse';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkPagination from '../../components/ui/pagination.vue';
-import MkUserSelect from '../../components/user-select.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkUserSelect from '@/components/user-select.vue';
 import { acct } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -147,12 +148,12 @@ export default defineComponent({
 		/** テキストエリアのユーザーを解決する */
 		fetchUser() {
 			return new Promise((res) => {
-				const usernamePromise = this.$root.api('users/show', parseAcct(this.target));
-				const idPromise = this.$root.api('users/show', { userId: this.target });
+				const usernamePromise = os.api('users/show', parseAcct(this.target));
+				const idPromise = os.api('users/show', { userId: this.target });
 				let _notFound = false;
 				const notFound = () => {
 					if (_notFound) {
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							text: this.$t('noSuchUser')
 						});
@@ -185,34 +186,34 @@ export default defineComponent({
 		},
 
 		async addUser() {
-			const { canceled: canceled1, result: username } = await this.$store.dispatch('showDialog', {
+			const { canceled: canceled1, result: username } = await os.dialog({
 				title: this.$t('username'),
 				input: true
 			});
 			if (canceled1) return;
 
-			const { canceled: canceled2, result: password } = await this.$store.dispatch('showDialog', {
+			const { canceled: canceled2, result: password } = await os.dialog({
 				title: this.$t('password'),
 				input: { type: 'password' }
 			});
 			if (canceled2) return;
 
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				iconOnly: true
 			});
 
-			this.$root.api('admin/accounts/create', {
+			os.api('admin/accounts/create', {
 				username: username,
 				password: password,
 			}).then(res => {
 				this.$refs.users.reload();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.id
 				});
diff --git a/src/client/pages/mentions.vue b/src/client/pages/mentions.vue
index cb0209b3a0..71ccd9cfc7 100644
--- a/src/client/pages/mentions.vue
+++ b/src/client/pages/mentions.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/messages.vue b/src/client/pages/messages.vue
index b99e7eb85a..10bb7e6681 100644
--- a/src/client/pages/messages.vue
+++ b/src/client/pages/messages.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 958c45c455..52122e4b58 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -42,9 +42,10 @@
 import { defineComponent } from 'vue';
 import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
 import getAcct from '../../../misc/acct/render';
-import MkButton from '../../components/ui/button.vue';
-import MkUserSelect from '../../components/user-select.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkUserSelect from '@/components/user-select.vue';
 import { acct } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -67,8 +68,8 @@ export default defineComponent({
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
 
-		this.$root.api('messaging/history', { group: false }).then(userMessages => {
-			this.$root.api('messaging/history', { group: true }).then(groupMessages => {
+		os.api('messaging/history', { group: false }).then(userMessages => {
+			os.api('messaging/history', { group: true }).then(groupMessages => {
 				const messages = userMessages.concat(groupMessages);
 				messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 				this.messages = messages;
@@ -115,7 +116,7 @@ export default defineComponent({
 		},
 
 		start(ev) {
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('messagingWithUser'),
 					icon: faUser,
@@ -137,17 +138,17 @@ export default defineComponent({
 		},
 
 		async startGroup() {
-			const groups1 = await this.$root.api('users/groups/owned');
-			const groups2 = await this.$root.api('users/groups/joined');
+			const groups1 = await os.api('users/groups/owned');
+			const groups2 = await os.api('users/groups/joined');
 			if (groups1.length === 0 && groups2.length === 0) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'warning',
 					title: this.$t('youHaveNoGroups'),
 					text: this.$t('joinOrCreateGroup'),
 				});
 				return;
 			}
-			const { canceled, result: group } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: group } = await os.dialog({
 				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 252ac214dd..ef72c2fffe 100644
--- a/src/client/pages/messaging/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -28,11 +28,12 @@ import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-sol
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
 import { formatTimeString } from '../../../misc/format-time-string';
-import { selectFile } from '../../scripts/select-file';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XUploader: defineAsyncComponent(() => import('../../components/uploader.vue')),
+		XUploader: defineAsyncComponent(() => import('@/components/uploader.vue')),
 	},
 	props: {
 		user: {
@@ -97,7 +98,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.$store.dispatch('showDialog', {
+						? await os.dialog({
 							title: this.$t('enterFileName'),
 							input: {
 								default: formatted
@@ -109,7 +110,7 @@ export default defineComponent({
 				}
 			} else {
 				if (items[0].kind == 'file') {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: this.$t('onlyOneFileCanBeAttached')
 					});
@@ -134,7 +135,7 @@ export default defineComponent({
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
 				e.preventDefault();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('onlyOneFileCanBeAttached')
 				});
@@ -176,7 +177,7 @@ export default defineComponent({
 
 		send() {
 			this.sending = true;
-			this.$root.api('messaging/messages/create', {
+			os.api('messaging/messages/create', {
 				userId: this.user ? this.user.id : undefined,
 				groupId: this.group ? this.group.id : undefined,
 				text: this.text ? this.text : undefined,
@@ -219,7 +220,7 @@ export default defineComponent({
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('../../components/emoji-picker.vue'), {
+			const vm = this.$root.new(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/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 4086d2eab2..a04836269a 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -39,7 +39,8 @@
 import { defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
-import MkUrlPreview from '../../components/url-preview.vue';
+import MkUrlPreview from '@/components/url-preview.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -70,7 +71,7 @@ export default defineComponent({
 	},
 	methods: {
 		del() {
-			this.$root.api('messaging/messages/delete', {
+			os.api('messaging/messages/delete', {
 				messageId: this.message.id
 			});
 		}
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 78078d02c0..128d26d1ce 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -35,11 +35,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import XList from '../../components/date-separated-list.vue';
+import XList from '@/components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import parseAcct from '../../../misc/acct/parse';
-import { isBottom, onScrollBottom } from '../../scripts/scroll';
+import { isBottom, onScrollBottom } from '@/scripts/scroll';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -99,10 +100,10 @@ export default defineComponent({
 		async fetch() {
 			this.fetching = true;
 			if (this.$route.params.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.$route.params.user));
+				const user = await os.api('users/show', parseAcct(this.$route.params.user));
 				this.user = user;
 			} else {
-				const group = await this.$root.api('users/groups/show', { groupId: this.$route.params.group });
+				const group = await os.api('users/groups/show', { groupId: this.$route.params.group });
 				this.group = group;
 			}
 
@@ -144,7 +145,7 @@ export default defineComponent({
 				this.form.upload(e.dataTransfer.files[0]);
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('onlyOneFileCanBeAttached')
 				});
@@ -164,7 +165,7 @@ export default defineComponent({
 			return new Promise((resolve, reject) => {
 				const max = this.existMoreMessages ? 20 : 10;
 
-				this.$root.api('messaging/messages', {
+				os.api('messaging/messages', {
 					userId: this.user ? this.user.id : undefined,
 					groupId: this.group ? this.group.id : undefined,
 					limit: max + 1,
diff --git a/src/client/pages/miauth.vue b/src/client/pages/miauth.vue
index b94be88299..34c9a0f326 100644
--- a/src/client/pages/miauth.vue
+++ b/src/client/pages/miauth.vue
@@ -40,8 +40,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkSignin from '../components/signin.vue';
-import MkButton from '../components/ui/button.vue';
+import MkSignin from '@/components/signin.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -73,7 +74,7 @@ export default defineComponent({
 	methods: {
 		async accept() {
 			this.state = 'waiting';
-			await this.$root.api('miauth/gen-token', {
+			await os.api('miauth/gen-token', {
 				session: this.session,
 				name: this.name,
 				iconUrl: this.icon,
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index fce863190b..b885dbaceb 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -48,13 +48,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkUserSelect from '../../components/user-select.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkUserSelect from '@/components/user-select.vue';
 import getAcct from '../../../misc/acct/render';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -90,12 +91,12 @@ export default defineComponent({
 	watch: {
 		async src() {
 			if (this.src === 'list' && this.userLists === null) {
-				this.userLists = await this.$root.api('users/lists/list');
+				this.userLists = await os.api('users/lists/list');
 			}
 
 			if (this.src === 'group' && this.userGroups === null) {
-				const groups1 = await this.$root.api('users/groups/owned');
-				const groups2 = await this.$root.api('users/groups/joined');
+				const groups1 = await os.api('users/groups/owned');
+				const groups2 = await os.api('users/groups/joined');
 
 				this.userGroups = [...groups1, ...groups2];
 			}
@@ -119,7 +120,7 @@ export default defineComponent({
 	methods: {
 		async saveAntenna() {
 			if (this.antenna.id == null) {
-				await this.$root.api('antennas/create', {
+				await os.api('antennas/create', {
 					name: this.name,
 					src: this.src,
 					userListId: this.userListId,
@@ -134,7 +135,7 @@ export default defineComponent({
 				});
 				this.$emit('created');
 			} else {
-				await this.$root.api('antennas/update', {
+				await os.api('antennas/update', {
 					antennaId: this.antenna.id,
 					name: this.name,
 					src: this.src,
@@ -150,25 +151,25 @@ export default defineComponent({
 				});
 			}
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},
 
 		async deleteAntenna() {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.antenna.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			await this.$root.api('antennas/delete', {
+			await os.api('antennas/delete', {
 				antennaId: this.antenna.id,
 			});
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index ab10d8f461..098422f04f 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -15,9 +15,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSatellite, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../../components/ui/pagination.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
 import XAntenna from './index.antenna.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/my-groups/group.vue b/src/client/pages/my-groups/group.vue
index cf86d703c2..c34a4af934 100644
--- a/src/client/pages/my-groups/group.vue
+++ b/src/client/pages/my-groups/group.vue
@@ -40,9 +40,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
-import MkButton from '../../components/ui/button.vue';
-import MkUserSelect from '../../components/user-select.vue';
+import Progress from '@/scripts/loading';
+import MkButton from '@/components/ui/button.vue';
+import MkUserSelect from '@/components/user-select.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -74,11 +75,11 @@ export default defineComponent({
 	methods: {
 		fetch() {
 			Progress.start();
-			this.$root.api('users/groups/show', {
+			os.api('users/groups/show', {
 				groupId: this.$route.params.group
 			}).then(group => {
 				this.group = group;
-				this.$root.api('users/show', {
+				os.api('users/show', {
 					userIds: this.group.userIds
 				}).then(users => {
 					this.users = users;
@@ -89,16 +90,16 @@ export default defineComponent({
 
 		invite() {
 			this.$root.new(MkUserSelect, {}).$once('selected', user => {
-				this.$root.api('users/groups/invite', {
+				os.api('users/groups/invite', {
 					groupId: this.group.id,
 					userId: user.id
 				}).then(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: e
 					});
@@ -107,7 +108,7 @@ export default defineComponent({
 		},
 
 		removeUser(user) {
-			this.$root.api('users/groups/pull', {
+			os.api('users/groups/pull', {
 				groupId: this.group.id,
 				userId: user.id
 			}).then(() => {
@@ -116,7 +117,7 @@ export default defineComponent({
 		},
 
 		async renameGroup() {
-			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: name } = await os.dialog({
 				title: this.$t('groupName'),
 				input: {
 					default: this.group.name
@@ -124,7 +125,7 @@ export default defineComponent({
 			});
 			if (canceled) return;
 
-			await this.$root.api('users/groups/update', {
+			await os.api('users/groups/update', {
 				groupId: this.group.id,
 				name: name
 			});
@@ -134,16 +135,16 @@ export default defineComponent({
 
 		transfer() {
 			this.$root.new(MkUserSelect, {}).$once('selected', user => {
-				this.$root.api('users/groups/transfer', {
+				os.api('users/groups/transfer', {
 					groupId: this.group.id,
 					userId: user.id
 				}).then(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: e
 					});
@@ -152,17 +153,17 @@ export default defineComponent({
 		},
 
 		async deleteGroup() {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.group.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			await this.$root.api('users/groups/delete', {
+			await os.api('users/groups/delete', {
 				groupId: this.group.id
 			});
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				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 88410b78ef..f2a59f20f0 100644
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -43,10 +43,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faUsers, faPlus, faEnvelopeOpenText } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../../components/ui/pagination.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkContainer from '../../components/ui/container.vue';
-import MkAvatars from '../../components/avatars.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkAvatars from '@/components/avatars.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -82,23 +83,23 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: name } = await os.dialog({
 				title: this.$t('groupName'),
 				input: true
 			});
 			if (canceled) return;
-			await this.$root.api('users/groups/create', { name: name });
+			await os.api('users/groups/create', { name: name });
 			this.$refs.owned.reload();
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},
 		acceptInvite(invitation) {
-			this.$root.api('users/groups/invitations/accept', {
+			os.api('users/groups/invitations/accept', {
 				invitationId: invitation.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -107,7 +108,7 @@ export default defineComponent({
 			});
 		},
 		rejectInvite(invitation) {
-			this.$root.api('users/groups/invitations/reject', {
+			os.api('users/groups/invitations/reject', {
 				invitationId: invitation.id
 			}).then(() => {
 				this.$refs.invitations.reload();
diff --git a/src/client/pages/my-lists/index.vue b/src/client/pages/my-lists/index.vue
index 9cdbb2cb48..953f6a62c6 100644
--- a/src/client/pages/my-lists/index.vue
+++ b/src/client/pages/my-lists/index.vue
@@ -15,8 +15,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../../components/ui/pagination.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -42,14 +43,14 @@ export default defineComponent({
 
 	methods: {
 		async create() {
-			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: name } = await os.dialog({
 				title: this.$t('enterListName'),
 				input: true
 			});
 			if (canceled) return;
-			await this.$root.api('users/lists/create', { name: name });
+			await os.api('users/lists/create', { name: name });
 			this.$refs.list.reload();
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				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 b4c6af956f..41e65af12c 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -39,9 +39,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
-import MkButton from '../../components/ui/button.vue';
-import MkUserSelect from '../../components/user-select.vue';
+import Progress from '@/scripts/loading';
+import MkButton from '@/components/ui/button.vue';
+import MkUserSelect from '@/components/user-select.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -73,11 +74,11 @@ export default defineComponent({
 	methods: {
 		fetch() {
 			Progress.start();
-			this.$root.api('users/lists/show', {
+			os.api('users/lists/show', {
 				listId: this.$route.params.list
 			}).then(list => {
 				this.list = list;
-				this.$root.api('users/show', {
+				os.api('users/show', {
 					userIds: this.list.userIds
 				}).then(users => {
 					this.users = users;
@@ -88,17 +89,17 @@ export default defineComponent({
 
 		addUser() {
 			this.$root.new(MkUserSelect, {}).$once('selected', user => {
-				this.$root.api('users/lists/push', {
+				os.api('users/lists/push', {
 					listId: this.list.id,
 					userId: user.id
 				}).then(() => {
 					this.users.push(user);
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}).catch(e => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: e
 					});
@@ -107,7 +108,7 @@ export default defineComponent({
 		},
 
 		removeUser(user) {
-			this.$root.api('users/lists/pull', {
+			os.api('users/lists/pull', {
 				listId: this.list.id,
 				userId: user.id
 			}).then(() => {
@@ -116,7 +117,7 @@ export default defineComponent({
 		},
 
 		async renameList() {
-			const { canceled, result: name } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: name } = await os.dialog({
 				title: this.$t('enterListName'),
 				input: {
 					default: this.list.name
@@ -124,7 +125,7 @@ export default defineComponent({
 			});
 			if (canceled) return;
 
-			await this.$root.api('users/lists/update', {
+			await os.api('users/lists/update', {
 				listId: this.list.id,
 				name: name
 			});
@@ -133,17 +134,17 @@ export default defineComponent({
 		},
 
 		async deleteList() {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.list.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			await this.$root.api('users/lists/delete', {
+			await os.api('users/lists/delete', {
 				listId: this.list.id
 			});
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				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 94320b5b8b..56891eccca 100644
--- a/src/client/pages/my-settings/2fa.vue
+++ b/src/client/pages/my-settings/2fa.vue
@@ -65,12 +65,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
-import { hostname } from '../../config';
-import { byteify, hexify, stringify } from '../../scripts/2fa';
-import MkButton from '../../components/ui/button.vue';
-import MkInfo from '../../components/ui/info.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkSwitch from '../../components/ui/switch.vue';
+import { hostname } from '@/config';
+import { byteify, hexify, stringify } from '@/scripts/2fa';
+import MkButton from '@/components/ui/button.vue';
+import MkInfo from '@/components/ui/info.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -89,14 +90,14 @@ export default defineComponent({
 	},
 	methods: {
 		register() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('password'),
 				input: {
 					type: 'password'
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				this.$root.api('i/2fa/register', {
+				os.api('i/2fa/register', {
 					password: password
 				}).then(data => {
 					this.data = data;
@@ -105,20 +106,20 @@ export default defineComponent({
 		},
 
 		unregister() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('password'),
 				input: {
 					type: 'password'
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				this.$root.api('i/2fa/unregister', {
+				os.api('i/2fa/unregister', {
 					password: password
 				}).then(() => {
 					this.usePasswordLessLogin = false;
 					this.updatePasswordLessLogin();
 				}).then(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
@@ -128,16 +129,16 @@ export default defineComponent({
 		},
 
 		submit() {
-			this.$root.api('i/2fa/done', {
+			os.api('i/2fa/done', {
 				token: this.token
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 				this.$store.state.i.twoFactorEnabled = true;
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					iconOnly: true, autoClose: true
 				});
@@ -146,7 +147,7 @@ export default defineComponent({
 
 		registerKey() {
 			this.registration.saving = true;
-			this.$root.api('i/2fa/key-done', {
+			os.api('i/2fa/key-done', {
 				password: this.registration.password,
 				name: this.keyName,
 				challengeId: this.registration.challengeId,
@@ -156,7 +157,7 @@ export default defineComponent({
 			}).then(key => {
 				this.registration = null;
 				key.lastUsed = new Date();
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
@@ -164,21 +165,21 @@ export default defineComponent({
 		},
 
 		unregisterKey(key) {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('password'),
 				input: {
 					type: 'password'
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				return this.$root.api('i/2fa/remove-key', {
+				return os.api('i/2fa/remove-key', {
 					password,
 					credentialId: key.id
 				}).then(() => {
 					this.usePasswordLessLogin = false;
 					this.updatePasswordLessLogin();
 				}).then(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
@@ -187,14 +188,14 @@ export default defineComponent({
 		},
 
 		addSecurityKey() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('password'),
 				input: {
 					type: 'password'
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				this.$root.api('i/2fa/register-key', {
+				os.api('i/2fa/register-key', {
 					password
 				}).then(registration => {
 					this.registration = {
@@ -233,7 +234,7 @@ export default defineComponent({
 			});
 		},
 		updatePasswordLessLogin() {
-			this.$root.api('i/2fa/password-less', {
+			os.api('i/2fa/password-less', {
 				value: !!this.usePasswordLessLogin
 			});
 		}
diff --git a/src/client/pages/my-settings/api.vue b/src/client/pages/my-settings/api.vue
index b96d5a7c3a..03f69144b0 100644
--- a/src/client/pages/my-settings/api.vue
+++ b/src/client/pages/my-settings/api.vue
@@ -11,8 +11,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faKey, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -25,15 +26,15 @@ export default defineComponent({
 	},
 	methods: {
 		async generateToken() {
-			this.$root.new(await import('../../components/token-generate-window.vue'), {
+			this.$root.new(await import('@/components/token-generate-window.vue'), {
 			}).$on('ok', async ({ name, permissions }) => {
-				const { token } = await this.$root.api('miauth/gen-token', {
+				const { token } = await os.api('miauth/gen-token', {
 					session: null,
 					name: name,
 					permission: permissions,
 				});
 
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					title: this.$t('token'),
 					text: token
@@ -41,14 +42,14 @@ export default defineComponent({
 			});
 		},
 		regenerateToken() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				title: this.$t('password'),
 				input: {
 					type: 'password'
 				}
 			}).then(({ canceled, result: password }) => {
 				if (canceled) return;
-				this.$root.api('i/regenerate_token', {
+				os.api('i/regenerate_token', {
 					password: password
 				});
 			});
diff --git a/src/client/pages/my-settings/drive.vue b/src/client/pages/my-settings/drive.vue
index 9612d6e42f..fa59c17e0f 100644
--- a/src/client/pages/my-settings/drive.vue
+++ b/src/client/pages/my-settings/drive.vue
@@ -12,8 +12,9 @@
 import { defineComponent } from 'vue';
 import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import { selectDriveFolder } from '../../scripts/select-drive-folder';
+import MkButton from '@/components/ui/button.vue';
+import { selectDriveFolder } from '@/scripts/select-drive-folder';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -29,7 +30,7 @@ export default defineComponent({
 
 	async created() {
 		if (this.$store.state.settings.uploadFolder) {
-			this.uploadFolder = await this.$root.api('drive/folders/show', {
+			this.uploadFolder = await os.api('drive/folders/show', {
 				folderId: this.$store.state.settings.uploadFolder
 			});
 		}
@@ -39,12 +40,12 @@ 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.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 				if (this.$store.state.settings.uploadFolder) {
-					this.uploadFolder = await this.$root.api('drive/folders/show', {
+					this.uploadFolder = await os.api('drive/folders/show', {
 						folderId: this.$store.state.settings.uploadFolder
 					});
 				} else {
diff --git a/src/client/pages/my-settings/import-export.vue b/src/client/pages/my-settings/import-export.vue
index 2a53c31638..532fcbfe9b 100644
--- a/src/client/pages/my-settings/import-export.vue
+++ b/src/client/pages/my-settings/import-export.vue
@@ -19,9 +19,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkSelect from '../../components/ui/select.vue';
-import { apiUrl } from '../../config';
+import MkButton from '@/components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import { apiUrl } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -38,19 +39,19 @@ export default defineComponent({
 
 	methods: {
 		doExport() {
-			this.$root.api(
+			os.api(
 				this.exportTarget == 'notes' ? 'i/export-notes' :
 				this.exportTarget == 'following' ? 'i/export-following' :
 				this.exportTarget == 'blocking' ? 'i/export-blocking' :
 				this.exportTarget == 'user-lists' ? 'i/export-user-lists' :
 				null, {})
 			.then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'info',
 					text: this.$t('exportRequested')
 				});
 			}).catch((e: any) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message
 				});
@@ -68,7 +69,7 @@ export default defineComponent({
 			data.append('file', file);
 			data.append('i', this.$store.state.i.token);
 
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				text: this.$t('uploading') + '...',
 				showOkButton: false,
@@ -85,7 +86,7 @@ export default defineComponent({
 				this.reqImport(f);
 			})
 			.catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
@@ -96,18 +97,18 @@ export default defineComponent({
 		},
 
 		reqImport(file) {
-			this.$root.api(
+			os.api(
 				this.exportTarget == 'following' ? 'i/import-following' :
 				this.exportTarget == 'user-lists' ? 'i/import-user-lists' :
 				null, {
 					fileId: file.id
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'info',
 					text: this.$t('importRequested')
 				});
 			}).catch((e: any) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message
 				});
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 06dff11ef8..9cd04094e8 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -55,8 +55,9 @@ import XSecurity from './security.vue';
 import X2fa from './2fa.vue';
 import XIntegration from './integration.vue';
 import XApi from './api.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkSwitch from '../../components/ui/switch.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -89,40 +90,40 @@ export default defineComponent({
 
 	methods: {
 		onChangeAutoWatch(v) {
-			this.$root.api('i/update', {
+			os.api('i/update', {
 				autoWatch: v
 			});
 		},
 
 		onChangeInjectFeaturedNote(v) {
-			this.$root.api('i/update', {
+			os.api('i/update', {
 				injectFeaturedNote: v
 			});
 		},
 
 		readAllUnreadNotes() {
-			this.$root.api('i/read-all-unread-notes');
+			os.api('i/read-all-unread-notes');
 		},
 
 		readAllMessagingMessages() {
-			this.$root.api('i/read-all-messaging-messages');
+			os.api('i/read-all-messaging-messages');
 		},
 
 		readAllNotifications() {
-			this.$root.api('notifications/mark-all-as-read');
+			os.api('notifications/mark-all-as-read');
 		},
 
 		async configure() {
-			this.$root.new(await import('../../components/notification-setting-window.vue'), {
+			this.$root.new(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.$store.state.i.includingNotificationTypes,
 				showGlobalToggle: false,
 			}).$on('ok', async ({ includingTypes: value }: any) => {
-				await this.$root.api('i/update', {
+				await os.api('i/update', {
 					includingNotificationTypes: value,
 				}).then(i => {
 					this.$store.state.i.includingNotificationTypes = i.includingNotificationTypes;
 				}).catch(err => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: err.message
 					});
diff --git a/src/client/pages/my-settings/integration.vue b/src/client/pages/my-settings/integration.vue
index e044adcf51..998c0bab91 100644
--- a/src/client/pages/my-settings/integration.vue
+++ b/src/client/pages/my-settings/integration.vue
@@ -29,8 +29,9 @@
 import { defineComponent } from 'vue';
 import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { apiUrl } from '../../config';
-import MkButton from '../../components/ui/button.vue';
+import { apiUrl } from '@/config';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/my-settings/mute-block.vue b/src/client/pages/my-settings/mute-block.vue
index 4d73dcf93e..71d1d893ef 100644
--- a/src/client/pages/my-settings/mute-block.vue
+++ b/src/client/pages/my-settings/mute-block.vue
@@ -33,8 +33,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
-import MkPagination from '../../components/ui/pagination.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import { userPage } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/my-settings/privacy.vue b/src/client/pages/my-settings/privacy.vue
index 48ebb432cd..35191ce459 100644
--- a/src/client/pages/my-settings/privacy.vue
+++ b/src/client/pages/my-settings/privacy.vue
@@ -22,8 +22,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '../../components/ui/select.vue';
-import MkSwitch from '../../components/ui/switch.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -63,7 +64,7 @@ export default defineComponent({
 
 	methods: {
 		save() {
-			this.$root.api('i/update', {
+			os.api('i/update', {
 				isLocked: !!this.isLocked,
 				autoAcceptFollowed: !!this.autoAcceptFollowed,
 			});
diff --git a/src/client/pages/my-settings/profile.vue b/src/client/pages/my-settings/profile.vue
index eba05167db..7a401af105 100644
--- a/src/client/pages/my-settings/profile.vue
+++ b/src/client/pages/my-settings/profile.vue
@@ -58,12 +58,13 @@
 import { defineComponent } from 'vue';
 import { faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons';
 import { faSave } from '@fortawesome/free-regular-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkInput from '../../components/ui/input.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import { host } from '../../config';
-import { selectFile } from '../../scripts/select-file';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import { host } from '@/config';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -120,7 +121,7 @@ export default defineComponent({
 	methods: {
 		changeAvatar(e) {
 			selectFile(this, e.currentTarget || e.target, this.$t('avatar')).then(file => {
-				this.$root.api('i/update', {
+				os.api('i/update', {
 					avatarId: file.id,
 				});
 			});
@@ -128,7 +129,7 @@ export default defineComponent({
 
 		changeBanner(e) {
 			selectFile(this, e.currentTarget || e.target, this.$t('banner')).then(file => {
-				this.$root.api('i/update', {
+				os.api('i/update', {
 					bannerId: file.id,
 				});
 			});
@@ -144,7 +145,7 @@ export default defineComponent({
 
 			this.saving = true;
 
-			this.$root.api('i/update', {
+			os.api('i/update', {
 				name: this.name || null,
 				description: this.description || null,
 				location: this.location || null,
@@ -160,14 +161,14 @@ export default defineComponent({
 				this.$store.state.i.bannerUrl = i.bannerUrl;
 
 				if (notify) {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						iconOnly: true, autoClose: true
 					});
 				}
 			}).catch(err => {
 				this.saving = false;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: err.id
 				});
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index a2ca4f0b1d..cc0c2aad14 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -18,11 +18,12 @@
 import { defineComponent } from 'vue';
 import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
-import MkInput from '../../components/ui/input.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkReactionPicker from '../../components/reaction-picker.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkReactionPicker from '@/components/reaction-picker.vue';
 import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 import { defaultSettings } from '../../store';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -72,7 +73,7 @@ export default defineComponent({
 		},
 
 		async chooseEmoji(ev) {
-			const vm = this.$root.new(await import('../../components/emoji-picker.vue'), {
+			const vm = this.$root.new(await import('@/components/emoji-picker.vue'), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				this.reactions += emoji;
diff --git a/src/client/pages/my-settings/security.vue b/src/client/pages/my-settings/security.vue
index c69864b2b7..6535d89f78 100644
--- a/src/client/pages/my-settings/security.vue
+++ b/src/client/pages/my-settings/security.vue
@@ -10,7 +10,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faLock } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -25,7 +26,7 @@ export default defineComponent({
 
 	methods: {
 		async change() {
-			const { canceled: canceled1, result: currentPassword } = await this.$store.dispatch('showDialog', {
+			const { canceled: canceled1, result: currentPassword } = await os.dialog({
 				title: this.$t('currentPassword'),
 				input: {
 					type: 'password'
@@ -33,7 +34,7 @@ export default defineComponent({
 			});
 			if (canceled1) return;
 
-			const { canceled: canceled2, result: newPassword } = await this.$store.dispatch('showDialog', {
+			const { canceled: canceled2, result: newPassword } = await os.dialog({
 				title: this.$t('newPassword'),
 				input: {
 					type: 'password'
@@ -41,7 +42,7 @@ export default defineComponent({
 			});
 			if (canceled2) return;
 
-			const { canceled: canceled3, result: newPassword2 } = await this.$store.dispatch('showDialog', {
+			const { canceled: canceled3, result: newPassword2 } = await os.dialog({
 				title: this.$t('newPasswordRetype'),
 				input: {
 					type: 'password'
@@ -50,28 +51,28 @@ export default defineComponent({
 			if (canceled3) return;
 
 			if (newPassword !== newPassword2) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('retypedNotMatch')
 				});
 				return;
 			}
 
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				iconOnly: true
 			});
 			
-			this.$root.api('i/change-password', {
+			os.api('i/change-password', {
 				currentPassword,
 				newPassword
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch(e => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/my-settings/word-mute.vue b/src/client/pages/my-settings/word-mute.vue
index 4dd7d5c801..532c397c82 100644
--- a/src/client/pages/my-settings/word-mute.vue
+++ b/src/client/pages/my-settings/word-mute.vue
@@ -28,10 +28,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCommentSlash, faSave } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkTab from '../../components/tab.vue';
-import MkInfo from '../../components/ui/info.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkTab from '@/components/tab.vue';
+import MkInfo from '@/components/ui/info.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -65,13 +66,13 @@ export default defineComponent({
 		this.softMutedWords = this.$store.state.settings.mutedWords.map(x => x.join(' ')).join('\n');
 		this.hardMutedWords = this.$store.state.i.mutedWords.map(x => x.join(' ')).join('\n');
 
-		this.hardWordMutedNotesCount = (await this.$root.api('i/get-word-muted-notes-count', {})).count;
+		this.hardWordMutedNotesCount = (await os.api('i/get-word-muted-notes-count', {})).count;
 	},
 
 	methods: {
 		async save() {
 			this.$store.dispatch('settings/set', { key: 'mutedWords', value: this.softMutedWords.trim().split('\n').map(x => x.trim().split(' ')) });
-			await this.$root.api('i/update', {
+			await os.api('i/update', {
 				mutedWords: this.hardMutedWords.trim().split('\n').map(x => x.trim().split(' ')),
 			});
 			this.changed = false;
diff --git a/src/client/pages/not-found.vue b/src/client/pages/not-found.vue
index df32369adf..da1e3e91c4 100644
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -12,6 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index ee499f30cd..b4d3e82413 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -30,10 +30,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNote from '../components/note.vue';
-import XNotes from '../components/notes.vue';
-import MkRemoteCaution from '../components/remote-caution.vue';
+import Progress from '@/scripts/loading';
+import XNote from '@/components/note.vue';
+import XNotes from '@/components/notes.vue';
+import MkRemoteCaution from '@/components/remote-caution.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -83,16 +84,16 @@ export default defineComponent({
 	methods: {
 		fetch() {
 			Progress.start();
-			this.$root.api('notes/show', {
+			os.api('notes/show', {
 				noteId: this.$route.params.note
 			}).then(note => {
 				Promise.all([
-					this.$root.api('users/notes', {
+					os.api('users/notes', {
 						userId: note.userId,
 						untilId: note.id,
 						limit: 1,
 					}),
-					this.$root.api('users/notes', {
+					os.api('users/notes', {
 						userId: note.userId,
 						sinceId: note.id,
 						limit: 1,
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index d7b650b1a5..21dbe61e75 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faBell } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotifications from '../components/notifications.vue';
+import Progress from '@/scripts/loading';
+import XNotifications from '@/components/notifications.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue
index bc5ffc4b47..cdc7b0eb37 100644
--- a/src/client/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.button.vue
@@ -41,9 +41,10 @@
 import { defineComponent } from 'vue';
 import { faBolt } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSelect from '../../../components/ui/select.vue';
-import MkInput from '../../../components/ui/input.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
index 385ab444de..fc873fd7f2 100644
--- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
@@ -14,7 +14,8 @@
 import { defineComponent } from 'vue';
 import { faPaintBrush, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue
index 3c74a60594..d208ecd23c 100644
--- a/src/client/pages/page-editor/els/page-editor.el.counter.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue
@@ -14,7 +14,8 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
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 0af28db400..486a3bf75d 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
@@ -29,7 +29,8 @@ import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSelect from '../../../components/ui/select.vue';
+import MkSelect from '@/components/ui/select.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -64,7 +65,7 @@ export default defineComponent({
 
 	methods: {
 		async add() {
-			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: type } = await os.dialog({
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.image.vue b/src/client/pages/page-editor/els/page-editor.el.image.vue
index 04fe89d5f4..e328989278 100644
--- a/src/client/pages/page-editor/els/page-editor.el.image.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.image.vue
@@ -18,8 +18,9 @@ import { defineComponent } from 'vue';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkFileThumbnail from '../../../components/drive-file-thumbnail.vue';
-import { selectDriveFile } from '../../../scripts/select-drive-file';
+import MkFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import { selectDriveFile } from '@/scripts/select-drive-file';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -47,7 +48,7 @@ export default defineComponent({
 		if (this.value.fileId == null) {
 			this.choose();
 		} else {
-			this.$root.api('drive/files/show', {
+			os.api('drive/files/show', {
 				fileId: this.value.fileId
 			}).then(file => {
 				this.file = file;
diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
index 82c71c71af..db9626791a 100644
--- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
@@ -14,7 +14,8 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue
index 43427dd17c..ad56c89e72 100644
--- a/src/client/pages/page-editor/els/page-editor.el.post.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.post.vue
@@ -14,9 +14,10 @@
 import { defineComponent } from 'vue';
 import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
index 9a77d45049..be40d9a8a7 100644
--- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -15,8 +15,9 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
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 097400d963..4446e32b2e 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
@@ -22,6 +22,7 @@ import { v4 as uuid } from 'uuid';
 import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -62,7 +63,7 @@ export default defineComponent({
 
 	methods: {
 		async rename() {
-			const { canceled, result: title } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: title } = await os.dialog({
 				title: 'Enter title',
 				input: {
 					type: 'text',
@@ -75,7 +76,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: type } = await os.dialog({
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue
index eff7360778..bbdcd73f88 100644
--- a/src/client/pages/page-editor/els/page-editor.el.switch.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue
@@ -14,8 +14,9 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkSwitch from '../../../components/ui/switch.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
index 56e81fb657..92ba5d560a 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
@@ -14,7 +14,8 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.text.vue b/src/client/pages/page-editor/els/page-editor.el.text.vue
index f222e23178..a137bca6d1 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text.vue
@@ -12,6 +12,7 @@
 import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
index 0e5377e6b5..1bcc9aabb9 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -14,8 +14,9 @@
 import { defineComponent } from 'vue';
 import { faBolt, faMagic } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
-import MkTextarea from '../../../components/ui/textarea.vue';
-import MkInput from '../../../components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkInput from '@/components/ui/input.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea.vue b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
index 524252502f..426bea983f 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea.vue
@@ -12,6 +12,7 @@
 import { defineComponent } from 'vue';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
 import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/page-editor.blocks.vue b/src/client/pages/page-editor/page-editor.blocks.vue
index 55e7bb7cad..bf281bf4b2 100644
--- a/src/client/pages/page-editor/page-editor.blocks.vue
+++ b/src/client/pages/page-editor/page-editor.blocks.vue
@@ -21,6 +21,7 @@ import XPost from './els/page-editor.el.post.vue';
 import XCounter from './els/page-editor.el.counter.vue';
 import XRadioButton from './els/page-editor.el.radio-button.vue';
 import XCanvas from './els/page-editor.el.canvas.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/page-editor/page-editor.container.vue b/src/client/pages/page-editor/page-editor.container.vue
index ce96da1bca..873307ae71 100644
--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -28,6 +28,7 @@
 import { defineComponent } from 'vue';
 import { faBars, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
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 b401f40c03..d2b4b3d913 100644
--- a/src/client/pages/page-editor/page-editor.script-block.vue
+++ b/src/client/pages/page-editor/page-editor.script-block.vue
@@ -60,8 +60,9 @@ import { defineComponent } from 'vue';
 import { faPencilAlt, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { v4 as uuid } from 'uuid';
 import XContainer from './page-editor.container.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import { isLiteralBlock, funcDefs, blockDefs } from '../../scripts/hpml/index';
+import MkTextarea from '@/components/ui/textarea.vue';
+import { isLiteralBlock, funcDefs, blockDefs } from '@/scripts/hpml/index';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -210,7 +211,7 @@ export default defineComponent({
 
 	methods: {
 		async changeType() {
-			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: type } = await os.dialog({
 				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 30fd14265b..258d9b447f 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -97,17 +97,18 @@ import { faSave, faStickyNote, faTrashAlt } from '@fortawesome/free-regular-svg-
 import { v4 as uuid } from 'uuid';
 import XVariable from './page-editor.script-block.vue';
 import XBlocks from './page-editor.blocks.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkContainer from '../../components/ui/container.vue';
-import MkButton from '../../components/ui/button.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkInput from '../../components/ui/input.vue';
-import { blockDefs } from '../../scripts/hpml/index';
-import { HpmlTypeChecker } from '../../scripts/hpml/type-checker';
-import { url } from '../../config';
-import { collectPageVars } from '../../scripts/collect-page-vars';
-import { selectDriveFile } from '../../scripts/select-drive-file';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkInput from '@/components/ui/input.vue';
+import { blockDefs } from '@/scripts/hpml/index';
+import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
+import { url } from '@/config';
+import { collectPageVars } from '@/scripts/collect-page-vars';
+import { selectDriveFile } from '@/scripts/select-drive-file';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -159,7 +160,7 @@ export default defineComponent({
 			if (this.eyeCatchingImageId == null) {
 				this.eyeCatchingImage = null;
 			} else {
-				this.eyeCatchingImage = await this.$root.api('drive/files/show', {
+				this.eyeCatchingImage = await os.api('drive/files/show', {
 					fileId: this.eyeCatchingImageId,
 				});
 			}
@@ -178,11 +179,11 @@ export default defineComponent({
 		}, { deep: true });
 
 		if (this.initPageId) {
-			this.page = await this.$root.api('pages/show', {
+			this.page = await os.api('pages/show', {
 				pageId: this.initPageId,
 			});
 		} else if (this.initPageName && this.initUser) {
-			this.page = await this.$root.api('pages/show', {
+			this.page = await os.api('pages/show', {
 				name: this.initPageName,
 				username: this.initUser,
 			});
@@ -239,14 +240,14 @@ export default defineComponent({
 			const onError = err => {
 				if (err.id == '3d81ceae-475f-4600-b2a8-2bc116157532') {
 					if (err.info.param == 'name') {
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							type: 'error',
 							title: this.$t('_pages.invalidNameTitle'),
 							text: this.$t('_pages.invalidNameText')
 						});
 					}
 				} else if (err.code == 'NAME_ALREADY_EXISTS') {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						text: this.$t('_pages.nameAlreadyExists')
 					});
@@ -255,20 +256,20 @@ export default defineComponent({
 
 			if (this.pageId) {
 				options.pageId = this.pageId;
-				this.$root.api('pages/update', options)
+				os.api('pages/update', options)
 				.then(page => {
 					this.currentName = this.name.trim();
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						text: this.$t('_pages.updated')
 					});
 				}).catch(onError);
 			} else {
-				this.$root.api('pages/create', options)
+				os.api('pages/create', options)
 				.then(page => {
 					this.pageId = page.id;
 					this.currentName = this.name.trim();
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						text: this.$t('_pages.created')
 					});
@@ -278,16 +279,16 @@ export default defineComponent({
 		},
 
 		del() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('removeAreYouSure', { x: this.title.trim() }),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
-				this.$root.api('pages/delete', {
+				os.api('pages/delete', {
 					pageId: this.pageId,
 				}).then(() => {
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'success',
 						text: this.$t('_pages.deleted')
 					});
@@ -297,7 +298,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: type } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: type } = await os.dialog({
 				type: null,
 				title: this.$t('_pages.chooseBlock'),
 				select: {
@@ -312,7 +313,7 @@ export default defineComponent({
 		},
 
 		async addVariable() {
-			let { canceled, result: name } = await this.$store.dispatch('showDialog', {
+			let { canceled, result: name } = await os.dialog({
 				title: this.$t('_pages.enterVariableName'),
 				input: {
 					type: 'text',
@@ -324,7 +325,7 @@ export default defineComponent({
 			name = name.trim();
 
 			if (this.hpml.isUsedName(name)) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('_pages.variableNameIsAlreadyUsed')
 				});
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index 7f51cea859..18aaa04e72 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -32,7 +32,8 @@
 import { defineComponent } from 'vue';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart as faHeartR } from '@fortawesome/free-regular-svg-icons';
-import XPage from '../components/page/page.vue';
+import XPage from '@/components/page/page.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -75,7 +76,7 @@ export default defineComponent({
 
 	methods: {
 		fetch() {
-			this.$root.api('pages/show', {
+			os.api('pages/show', {
 				name: this.pageName,
 				username: this.username,
 			}).then(page => {
@@ -84,7 +85,7 @@ export default defineComponent({
 		},
 
 		like() {
-			this.$root.api('pages/like', {
+			os.api('pages/like', {
 				pageId: this.page.id,
 			}).then(() => {
 				this.page.isLiked = true;
@@ -93,7 +94,7 @@ export default defineComponent({
 		},
 
 		unlike() {
-			this.$root.api('pages/unlike', {
+			os.api('pages/unlike', {
 				pageId: this.page.id,
 			}).then(() => {
 				this.page.isLiked = false;
@@ -102,10 +103,10 @@ export default defineComponent({
 		},
 
 		pin(pin) {
-			this.$root.api('i/update', {
+			os.api('i/update', {
 				pinnedPageId: pin ? this.page.id : null,
 			}).then(() => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index b4ac3548ab..38810aa7f0 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -23,10 +23,11 @@
 import { defineComponent } from 'vue';
 import { faPlus, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
-import MkPagePreview from '../components/page-preview.vue';
-import MkPagination from '../components/ui/pagination.vue';
-import MkButton from '../components/ui/button.vue';
-import MkTab from '../components/tab.vue';
+import MkPagePreview from '@/components/page-preview.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkTab from '@/components/tab.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index a38395f29b..339ea950e4 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -122,16 +122,17 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkRadio from '../../components/ui/radio.vue';
-import MkRange from '../../components/ui/range.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkRadio from '@/components/ui/radio.vue';
+import MkRange from '@/components/ui/range.vue';
 import XTheme from './theme.vue';
 import XSidebar from './sidebar.vue';
 import XPlugins from './plugins.vue';
-import { langs } from '../../config';
+import { langs } from '@/config';
 import { clientDb, set } from '../../db';
+import * as os from '@/os';
 
 const sounds = [
 	null,
@@ -295,7 +296,7 @@ export default defineComponent({
 
 	watch: {
 		lang() {
-			const dialog = this.$store.dispatch('showDialog', {
+			const dialog = os.dialog({
 				type: 'waiting',
 				iconOnly: true
 			});
@@ -306,7 +307,7 @@ export default defineComponent({
 				.then(() => location.reload())
 				.catch(() => {
 					dialog.close();
-					this.$store.dispatch('showDialog', {
+					os.dialog({
 						type: 'error',
 						iconOnly: true,
 						autoClose: true
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index fde4b22152..995932e7bc 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -49,11 +49,12 @@ import { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { v4 as uuid } from 'uuid';
 import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkInfo from '../../components/ui/info.vue';
-import MkSwitch from '../../components/ui/switch.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkInfo from '@/components/ui/info.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -85,7 +86,7 @@ export default defineComponent({
 			try {
 				ast = parse(this.script);
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: 'Syntax error :('
 				});
@@ -93,7 +94,7 @@ export default defineComponent({
 			}
 			const meta = AiScript.collectMetadata(ast);
 			if (meta == null) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: 'No metadata found :('
 				});
@@ -101,7 +102,7 @@ export default defineComponent({
 			}
 			const data = meta.get(null);
 			if (data == null) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: 'No metadata found :('
 				});
@@ -109,7 +110,7 @@ export default defineComponent({
 			}
 			const { name, version, author, description, permissions, config } = data;
 			if (name == null || version == null || author == null) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: 'Required property not found :('
 				});
@@ -117,13 +118,13 @@ 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'), {
+				this.$root.new(await import('@/components/token-generate-window.vue'), {
 					title: this.$t('tokenRequested'),
 					information: this.$t('pluginTokenRequestedDescription'),
 					initialName: name,
 					initialPermissions: permissions
 				}).$on('ok', async ({ name, permissions }) => {
-					const { token } = await this.$root.api('miauth/gen-token', {
+					const { token } = await os.api('miauth/gen-token', {
 						session: null,
 						name: name,
 						permission: permissions,
@@ -142,7 +143,7 @@ export default defineComponent({
 				ast: serialize(ast)
 			});
 
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -154,7 +155,7 @@ export default defineComponent({
 
 		uninstall() {
 			this.$store.commit('deviceUser/uninstallPlugin', this.selectedPluginId);
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/preferences/sidebar.vue b/src/client/pages/preferences/sidebar.vue
index 66c28c62df..24e7300022 100644
--- a/src/client/pages/preferences/sidebar.vue
+++ b/src/client/pages/preferences/sidebar.vue
@@ -23,10 +23,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../../components/ui/button.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import MkRadio from '../../components/ui/radio.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkRadio from '@/components/ui/radio.vue';
 import { defaultDeviceUserSettings } from '../../store';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -61,7 +62,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.$store.dispatch('showDialog', {
+			const { canceled, result: item } = await os.dialog({
 				type: null,
 				title: this.$t('addItem'),
 				select: {
diff --git a/src/client/pages/preferences/theme.vue b/src/client/pages/preferences/theme.vue
index 0cc958f03c..64f411bdf1 100644
--- a/src/client/pages/preferences/theme.vue
+++ b/src/client/pages/preferences/theme.vue
@@ -81,14 +81,15 @@
 import { defineComponent } from 'vue';
 import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkButton from '../../components/ui/button.vue';
-import MkSelect from '../../components/ui/select.vue';
-import MkSwitch from '../../components/ui/switch.vue';
-import MkTextarea from '../../components/ui/textarea.vue';
-import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/theme';
-import { selectFile } from '../../scripts/select-file';
-import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';
-import copyToClipboard from '../../scripts/copy-to-clipboard';
+import MkButton from '@/components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import { Theme, builtinThemes, applyTheme, validateTheme } from '@/scripts/theme';
+import { selectFile } from '@/scripts/select-file';
+import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -194,7 +195,7 @@ export default defineComponent({
 
 		copyThemeCode() {
 			copyToClipboard(this.selectedThemeCode);
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
@@ -206,21 +207,21 @@ export default defineComponent({
 			try {
 				theme = JSON5.parse(code);
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('_theme.invalid')
 				});
 				return false;
 			}
 			if (!validateTheme(theme)) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: this.$t('_theme.invalid')
 				});
 				return false;
 			}
 			if (this.$store.state.device.themes.some(t => t.id === theme.id)) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'info',
 					text: this.$t('_theme.alreadyInstalled')
 				});
@@ -242,7 +243,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })
 			});
@@ -254,7 +255,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				iconOnly: true, autoClose: true
 			});
diff --git a/src/client/pages/room/preview.vue b/src/client/pages/room/preview.vue
index a110e0ef0a..b0e600d4fb 100644
--- a/src/client/pages/room/preview.vue
+++ b/src/client/pages/room/preview.vue
@@ -5,6 +5,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as THREE from 'three';
+import * as os from '@/os';
 
 export default defineComponent({
 	data() {
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index 663e10dc62..cd699c14a6 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -59,16 +59,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Room } from '../../scripts/room/room';
+import { Room } from '@/scripts/room/room';
 import parseAcct from '../../../misc/acct/parse';
 import XPreview from './preview.vue';
-const storeItems = require('../../scripts/room/furnitures.json5');
+const storeItems = require('@/scripts/room/furnitures.json5');
 import { faBoxOpen, faUndo, faArrowsAlt, faBan, faBroom } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { query as urlQuery } from '../../../prelude/url';
-import MkButton from '../../components/ui/button.vue';
-import MkSelect from '../../components/ui/select.vue';
-import { selectFile } from '../../scripts/select-file';
+import MkButton from '@/components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
 
 let room: Room;
 
@@ -106,13 +107,13 @@ export default defineComponent({
 	async mounted() {
 		window.addEventListener('beforeunload', this.beforeunload);
 
-		this.user = await this.$root.api('users/show', {
+		this.user = await os.api('users/show', {
 			...parseAcct(this.acct)
 		});
 
 		this.isMyRoom = this.$store.getters.isSignedIn && (this.$store.state.i.id === this.user.id);
 
-		const roomInfo = await this.$root.api('room/show', {
+		const roomInfo = await os.api('room/show', {
 			userId: this.user.id
 		});
 
@@ -141,7 +142,7 @@ export default defineComponent({
 
 	beforeRouteLeave(to, from, next) {
 		if (this.changed) {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('leaveConfirm'),
 				showCancelButton: true
@@ -171,7 +172,7 @@ export default defineComponent({
 		},
 
 		async add() {
-			const { canceled, result: id } = await this.$store.dispatch('showDialog', {
+			const { canceled, result: id } = await os.dialog({
 				type: null,
 				title: this.$t('_rooms.addFurniture'),
 				select: {
@@ -194,16 +195,16 @@ export default defineComponent({
 		},
 
 		save() {
-			this.$root.api('room/update', {
+			os.api('room/update', {
 				room: room.getRoomInfo()
 			}).then(() => {
 				this.changed = false;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
 			}).catch((e: any) => {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message
 				});
@@ -211,7 +212,7 @@ export default defineComponent({
 		},
 
 		clear() {
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'warning',
 				text: this.$t('_rooms.clearConfirm'),
 				showCancelButton: true
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 79891a994f..4eedba63a8 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -31,9 +31,10 @@ import 'prismjs/themes/prism-okaidia.css';
 import { PrismEditor } from 'vue-prism-editor';
 import 'vue-prism-editor/dist/prismeditor.min.css';
 import { AiScript, parse, utils, values } from '@syuilo/aiscript';
-import MkContainer from '../components/ui/container.vue';
-import MkButton from '../components/ui/button.vue';
-import { createAiScriptEnv } from '../scripts/aiscript/api';
+import MkContainer from '@/components/ui/container.vue';
+import MkButton from '@/components/ui/button.vue';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -77,7 +78,7 @@ export default defineComponent({
 			}), {
 				in: (q) => {
 					return new Promise(ok => {
-						this.$store.dispatch('showDialog', {
+						os.dialog({
 							title: q,
 							input: {}
 						}).then(({ canceled, result: a }) => {
@@ -108,7 +109,7 @@ export default defineComponent({
 			try {
 				ast = parse(this.code);
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: 'Syntax error :('
 				});
@@ -117,7 +118,7 @@ export default defineComponent({
 			try {
 				await aiscript.exec(ast);
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e
 				});
diff --git a/src/client/pages/search.vue b/src/client/pages/search.vue
index 76a55e2448..28f66efdbe 100644
--- a/src/client/pages/search.vue
+++ b/src/client/pages/search.vue
@@ -8,8 +8,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/share.vue b/src/client/pages/share.vue
index 2de2a16838..6dd452404e 100644
--- a/src/client/pages/share.vue
+++ b/src/client/pages/share.vue
@@ -17,8 +17,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import PostFormDialog from '../components/post-form-dialog.vue';
-import MkButton from '../components/ui/button.vue';
+import PostFormDialog from '@/components/post-form-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
@@ -64,7 +65,7 @@ export default defineComponent({
 				initialText: text.trim()
 			}).$once('posted', () => {
 				this.posted = true;
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'success',
 					iconOnly: true, autoClose: true
 				});
diff --git a/src/client/pages/tag.vue b/src/client/pages/tag.vue
index 7f1b9f922b..0dc1c5a9ea 100644
--- a/src/client/pages/tag.vue
+++ b/src/client/pages/tag.vue
@@ -9,8 +9,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../scripts/loading';
-import XNotes from '../components/notes.vue';
+import Progress from '@/scripts/loading';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	metaInfo() {
diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue
index eb514cece3..f6ca8d69ba 100644
--- a/src/client/pages/test.vue
+++ b/src/client/pages/test.vue
@@ -32,9 +32,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '../components/ui/button.vue';
-import MkInput from '../components/ui/input.vue';
-import MkSwitch from '../components/ui/switch.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSwitch from '@/components/ui/switch.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -64,7 +65,7 @@ export default defineComponent({
 	methods: {
 		async showDialog() {
 			this.dialogResult = null;
-			this.dialogResult = await this.$store.dispatch('showDialog', {
+			this.dialogResult = await os.dialog({
 				title: this.dialogTitle,
 				text: this.dialogBody,
 				showCancelButton: this.dialogCancel,
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index 6f6af15e1b..f8e3f8ad15 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -78,16 +78,17 @@ import { defineComponent } from 'vue';
 import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
 
-import MkRadio from '../components/ui/radio.vue';
-import MkButton from '../components/ui/button.vue';
-import MkInput from '../components/ui/input.vue';
-import MkTextarea from '../components/ui/textarea.vue';
-import MkSelect from '../components/ui/select.vue';
+import MkRadio from '@/components/ui/radio.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSelect from '@/components/ui/select.vue';
 
-import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '../scripts/theme-editor';
-import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '../scripts/theme';
+import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '@/scripts/theme-editor';
+import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '@/scripts/theme';
 import { toUnicode } from 'punycode';
-import { host } from '../config';
+import { host } from '@/config';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -155,7 +156,7 @@ export default defineComponent({
 		},
 
 		async confirm(): Promise<boolean> {
-			const { canceled } = await this.$store.dispatch('showDialog', {
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('leaveConfirm'),
 				showCancelButton: true
@@ -172,7 +173,7 @@ export default defineComponent({
 		},
 	
 		async del(i: number) {
-			const { canceled } = await this.$store.dispatch('showDialog', { 
+			const { canceled } = await os.dialog({ 
 				type: 'warning',
 				showCancelButton: true,
 				text: this.$t('_theme.deleteConstantConfirm', { const: this.theme[i][0] }),
@@ -182,7 +183,7 @@ export default defineComponent({
 		},
 	
 		async addConst() {
-			const { canceled, result } = await this.$store.dispatch('showDialog', {
+			const { canceled, result } = await os.dialog({
 				title: this.$t('_theme.inputConstantName'),
 				input: true
 			});
@@ -196,7 +197,7 @@ export default defineComponent({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			this.$store.dispatch('showDialog', {
+			os.dialog({
 				type: 'success',
 				text: this.$t('_theme.installed', { name: theme.name })
 			});
@@ -208,7 +209,7 @@ export default defineComponent({
 			try {
 				applyTheme(theme, false);
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message
 				});
@@ -229,7 +230,7 @@ export default defineComponent({
 				this.theme = convertToViewModel(theme);
 				this.themeToImport = '';
 			} catch (e) {
-				this.$store.dispatch('showDialog', {
+				os.dialog({
 					type: 'error',
 					text: e.message
 				});
@@ -255,7 +256,7 @@ export default defineComponent({
 	
 		showTypeMenu(e: MouseEvent) {
 			return new Promise<ThemeValue>((resolve) => {
-				this.$store.dispatch('showMenu', {
+				os.menu({
 					items: [{
 						text: this.$t('_theme.defaultValue'),
 						action: () => resolve(null),
diff --git a/src/client/pages/user/follow-list.vue b/src/client/pages/user/follow-list.vue
index 4c816bf6a4..5ada92aa45 100644
--- a/src/client/pages/user/follow-list.vue
+++ b/src/client/pages/user/follow-list.vue
@@ -19,9 +19,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import parseAcct from '../../../misc/acct/parse';
-import MkFollowButton from '../../components/follow-button.vue';
-import MkPagination from '../../components/ui/pagination.vue';
+import MkFollowButton from '@/components/follow-button.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import { userPage, acct } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/user/index.activity.vue b/src/client/pages/user/index.activity.vue
index 2a0bf78375..30c02ec54a 100644
--- a/src/client/pages/user/index.activity.vue
+++ b/src/client/pages/user/index.activity.vue
@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ApexCharts from 'apexcharts';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -28,7 +29,7 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$root.api('charts/user/notes', {
+		os.api('charts/user/notes', {
 			userId: this.user.id,
 			span: 'day',
 			limit: this.limit
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index 179bd49f0d..1964cc9947 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -14,8 +14,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { getStaticImageUrl } from '../../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import notePage from '../../filters/note';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: ['user'],
@@ -33,7 +34,7 @@ export default defineComponent({
 			'image/apng',
 			'image/vnd.mozilla.apng',
 		];
-		this.$root.api('users/notes', {
+		os.api('users/notes', {
 			userId: this.user.id,
 			fileType: image,
 			excludeNsfw: !this.$store.state.device.alwaysShowNsfw,
diff --git a/src/client/pages/user/index.timeline.vue b/src/client/pages/user/index.timeline.vue
index 0890a0251c..b93459a4cc 100644
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -11,7 +11,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XNotes from '../../components/notes.vue';
+import XNotes from '@/components/notes.vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index b620f3aa1f..00fce1c892 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -110,16 +110,17 @@ import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChar
 import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
-import XUserMenu from '../../components/user-menu.vue';
-import XNote from '../../components/note.vue';
-import MkFollowButton from '../../components/follow-button.vue';
-import MkContainer from '../../components/ui/container.vue';
-import MkRemoteCaution from '../../components/remote-caution.vue';
-import Progress from '../../scripts/loading';
+import XUserMenu from '@/components/user-menu.vue';
+import XNote from '@/components/note.vue';
+import MkFollowButton from '@/components/follow-button.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkRemoteCaution from '@/components/remote-caution.vue';
+import Progress from '@/scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
-import { getScrollPosition } from '../../scripts/scroll';
+import { getScrollPosition } from '@/scripts/scroll';
 import number from '../../filters/number';
 import { userPage, acct } from '../../filters/user';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -178,7 +179,7 @@ export default defineComponent({
 	methods: {
 		fetch() {
 			Progress.start();
-			this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => {
+			os.api('users/show', parseAcct(this.$route.params.user)).then(user => {
 				this.user = user;
 			}).catch(e => {
 				this.error = e;
diff --git a/src/client/root.vue b/src/client/root.vue
index 5a4f180abe..d119c10deb 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -2,26 +2,19 @@
 <DeckUI v-if="deckmode"/>
 <DefaultUI v-else/>
 
-<XPostFormDialog v-if="$store.state.postForm" v-bind="$store.state.postForm"/>
-
-<XMenu v-if="menu" v-bind="menu" :key="menu.id"/>
-
-<XDialog v-if="dialog" v-bind="dialog" :key="dialog.id"/>
+<component v-for="dialog in $store.state.dialogs" :is="dialog.component" v-bind="dialog.props" :key="dialog.id"/>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineComponent } from 'vue';
 import DefaultUI from './default.vue';
 import DeckUI from './deck.vue';
-import { instanceName, deckmode } from './config';
+import { instanceName, deckmode } from '@/config';
 
 export default defineComponent({
 	components: {
 		DefaultUI,
 		DeckUI,
-		XDialog: defineAsyncComponent(() => import('./components/dialog.vue')),
-		XMenu: defineAsyncComponent(() => import('./components/menu.vue')),
-		XPostFormDialog: defineAsyncComponent(() => import('./components/post-form-dialog.vue')),
 	},
 
 	metaInfo: {
@@ -46,27 +39,5 @@ export default defineComponent({
 			deckmode
 		};
 	},
-
-	computed: {
-		dialog() {
-			if (this.$store.state.dialogs.length === 0) return null;
-
-			// what: ダイアログが複数ある場合は、一番最後に追加されたダイアログを表示する
-			// why: ダイアログが一度に複数表示されるとユーザビリティが悪いため。
-			return this.$store.state.dialogs[this.$store.state.dialogs.length - 1];
-		},
-
-		menu() {
-			if (this.$store.state.menus.length === 0) return null;
-
-			return this.$store.state.menus[this.$store.state.menus.length - 1];
-		}
-	},
-
-	methods: {
-		api(endpoint: string, data: Record<string, any> = {}, token?) {
-			return this.$store.dispatch('api', { endpoint, data, token });
-		},
-	}
 });
 </script>
diff --git a/src/client/scripts/aiscript/api.ts b/src/client/scripts/aiscript/api.ts
index babf83bc03..181ab8e833 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.$store.dispatch('showDialog', {
+			await vm.os.dialog({
 				type: type ? type.value : 'info',
 				title: title.value,
 				text: text.value,
 			});
 		}),
 		'Mk:confirm': values.FN_NATIVE(async ([title, text, type]) => {
-			const confirm = await vm.$store.dispatch('showDialog', {
+			const confirm = await vm.os.dialog({
 				type: type ? type.value : 'question',
 				showCancelButton: true,
 				title: title.value,
@@ -28,7 +28,7 @@ export function createAiScriptEnv(vm, opts) {
 			if (token) utils.assertString(token);
 			apiRequests++;
 			if (apiRequests > 16) return values.NULL;
-			const res = await vm.$root.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token || null));
+			const res = await vm.os.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token || null));
 			return utils.jsToVal(res);
 		}),
 		'Mk:save': values.FN_NATIVE(([key, value]) => {
diff --git a/src/client/scripts/gen-search-query.ts b/src/client/scripts/gen-search-query.ts
index 2520da75df..670d915104 100644
--- a/src/client/scripts/gen-search-query.ts
+++ b/src/client/scripts/gen-search-query.ts
@@ -1,5 +1,5 @@
 import parseAcct from '../../misc/acct/parse';
-import { host as localHost } from '../config';
+import { host as localHost } from '@/config';
 
 export async function genSearchQuery(v: any, q: string) {
 	let host: string;
@@ -13,7 +13,7 @@ export async function genSearchQuery(v: any, q: string) {
 					host = at;
 				}
 			} else {
-				const user = await v.$root.api('users/show', parseAcct(at)).catch(x => null);
+				const user = await v.os.api('users/show', parseAcct(at)).catch(x => null);
 				if (user) {
 					userId = user.id;
 				} else {
diff --git a/src/client/scripts/get-static-image-url.ts b/src/client/scripts/get-static-image-url.ts
index eff76af256..e932eb6da5 100644
--- a/src/client/scripts/get-static-image-url.ts
+++ b/src/client/scripts/get-static-image-url.ts
@@ -1,4 +1,4 @@
-import { url as instanceUrl } from '../config';
+import { url as instanceUrl } from '@/config';
 import * as url from '../../prelude/url';
 
 export function getStaticImageUrl(baseUrl: string): string {
diff --git a/src/client/scripts/hpml/evaluator.ts b/src/client/scripts/hpml/evaluator.ts
index 8c8dcc82c0..6ca9eccc6f 100644
--- a/src/client/scripts/hpml/evaluator.ts
+++ b/src/client/scripts/hpml/evaluator.ts
@@ -1,7 +1,7 @@
 import autobind from 'autobind-decorator';
 import * as seedrandom from 'seedrandom';
 import { Variable, PageVar, envVarsDef, funcDefs, Block, isFnBlock } from '.';
-import { version } from '../../config';
+import { version } from '@/config';
 import { AiScript, utils, values } from '@syuilo/aiscript';
 import { createAiScriptEnv } from '../aiscript/api';
 import { collectPageVars } from '../collect-page-vars';
@@ -42,7 +42,7 @@ export class Hpml {
 			}), ...initLib(this)}, {
 				in: (q) => {
 					return new Promise(ok => {
-						vm.$store.dispatch('showDialog', {
+						vm.os.dialog({
 							title: q,
 							input: {}
 						}).then(({ canceled, result: a }) => {
diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts
index 129c96004f..debb81db44 100644
--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -1,3 +1,4 @@
+import * as os from '@/os';
 import { onScrollTop, isTopVisible } from './scroll';
 
 const SECOND_FETCH_LIMIT = 30;
@@ -85,7 +86,7 @@ export default (opts) => ({
 			let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
 			if (params && params.then) params = await params;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await this.$root.api(endpoint, {
+			await os.api(endpoint, {
 				...params,
 				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
 			}).then(items => {
@@ -117,7 +118,7 @@ export default (opts) => ({
 			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
 			if (params && params.then) params = await params;
 			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await this.$root.api(endpoint, {
+			await os.api(endpoint, {
 				...params,
 				limit: SECOND_FETCH_LIMIT + 1,
 				...(this.pagination.offsetMode ? {
diff --git a/src/client/scripts/please-login.ts b/src/client/scripts/please-login.ts
index 78e9d99e60..6ca78d3cc9 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;
 
-	$store.dispatch('showDialog', {
+	os.dialog({
 		title: $root.$t('signinRequired'),
 		text: null
 	});
diff --git a/src/client/scripts/search.ts b/src/client/scripts/search.ts
index a9ab19d7c8..1f6ec5fa1c 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.$store.dispatch('showDialog', {
+		v.os.dialog({
 			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.$store.dispatch('showDialog', {
+		const dialog = v.os.dialog({
 			type: 'waiting',
 			text: v.$t('fetchingAsApObject') + '...',
 			showOkButton: false,
@@ -43,7 +43,7 @@ export async function search(v: any, q: string) {
 		});
 
 		try {
-			const res = await v.$root.api('ap/show', {
+			const res = await v.os.api('ap/show', {
 				uri: q
 			});
 			dialog.close();
diff --git a/src/client/scripts/select-drive-file.ts b/src/client/scripts/select-drive-file.ts
index cd36ea55a5..9459bd604b 100644
--- a/src/client/scripts/select-drive-file.ts
+++ b/src/client/scripts/select-drive-file.ts
@@ -1,6 +1,6 @@
 export function selectDriveFile($root: any, multiple) {
 	return new Promise((res, rej) => {
-		import('../components/drive-window.vue').then(dialog => {
+		import('@/components/drive-window.vue').then(dialog => {
 			const w = $root.new(dialog, {
 				type: 'file',
 				multiple
diff --git a/src/client/scripts/select-drive-folder.ts b/src/client/scripts/select-drive-folder.ts
index 9814dac86c..ee6e5c1551 100644
--- a/src/client/scripts/select-drive-folder.ts
+++ b/src/client/scripts/select-drive-folder.ts
@@ -1,6 +1,6 @@
 export function selectDriveFolder($root: any, multiple) {
 	return new Promise((res, rej) => {
-		import('../components/drive-window.vue').then(dialog => {
+		import('@/components/drive-window.vue').then(dialog => {
 			const w = $root.new(dialog, {
 				type: 'folder',
 				multiple
diff --git a/src/client/scripts/select-file.ts b/src/client/scripts/select-file.ts
index a89aaddbf3..c56e39c313 100644
--- a/src/client/scripts/select-file.ts
+++ b/src/client/scripts/select-file.ts
@@ -1,6 +1,6 @@
 import { faUpload, faCloud } from '@fortawesome/free-solid-svg-icons';
 import { selectDriveFile } from './select-drive-file';
-import { apiUrl } from '../config';
+import { apiUrl } from '@/config';
 
 // TODO: component引数は消せる(各種操作がstoreに移動し、かつstoreが複数ファイルで共有されるようになったため)
 export function selectFile(component: any, src: any, label: string | null, multiple = false) {
@@ -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.$store.dispatch('showDialog', {
+				const dialog = component.os.dialog({
 					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.$store.dispatch('showDialog', {
+					component.os.dialog({
 						type: 'error',
 						text: e
 					});
@@ -65,7 +65,7 @@ export function selectFile(component: any, src: any, label: string | null, multi
 
 		};
 
-		component.$store.dispatch('showMenu', {
+		component.os.menu({
 			items: [label ? {
 				text: label,
 				type: 'label'
diff --git a/src/client/scripts/stream.ts b/src/client/scripts/stream.ts
index 86fa90e8fd..a7b37722e5 100644
--- a/src/client/scripts/stream.ts
+++ b/src/client/scripts/stream.ts
@@ -1,7 +1,7 @@
 import autobind from 'autobind-decorator';
 import { EventEmitter } from 'eventemitter3';
 import ReconnectingWebsocket from 'reconnecting-websocket';
-import { wsUrl } from '../config';
+import { wsUrl } from '@/config';
 
 /**
  * Misskey stream connection
diff --git a/src/client/store.ts b/src/client/store.ts
index dee551bf88..8dd682a8e9 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -5,7 +5,7 @@ import * as nestedProperty from 'nested-property';
 import { faSatelliteDish, faTerminal, faHashtag, faBroadcastTower, faFireAlt, faSearch, faStar, faAt, faListUl, faUserClock, faUsers, faCloud, faGamepad, faFileAlt, faSatellite, faDoorClosed, faColumns } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
 import { AiScript, utils, values } from '@syuilo/aiscript';
-import { apiUrl, deckmode } from './config';
+import { apiUrl, deckmode } from '@/config';
 import { erase } from '../prelude/array';
 
 export const defaultSettings = {
@@ -110,13 +110,10 @@ export const store = createStore({
 		spinner: null,
 		dialogs: [] as {
 			id: any;
-			type: 'info' | 'question' | 'warn' | 'success' | 'error';
-			title: string;
-			text: string;
+			component: any;
+			props: Record<string, any>;
 			result: any;
 		}[],
-		menus: [],
-		postForm: null,
 		fullView: false,
 
 		// Plugin
@@ -278,24 +275,6 @@ export const store = createStore({
 			state.dialogs = state.dialogs.filter(d => d.id !== dialogId);
 		},
 
-		addMenu(state, menu) {
-			state.menus.push(menu);
-		},
-
-		menuDone(state, { id: menuId }) {
-			const menu = state.menus.find(d => d.id === menuId);
-			menu.result = 'hoge';
-		},
-
-		removeMenu(state, menuId) {
-			state.menus = state.menus.filter(d => d.id !== menuId);
-		},
-
-		setPostForm(state, postForm) {
-			if (state.postForm != null && postForm != null) return;
-			state.postForm = postForm;
-		},
-
 		setFullView(state, v) {
 			state.fullView = v;
 		},
@@ -391,12 +370,17 @@ export const store = createStore({
 			}
 		},
 
-		showDialog(ctx, opts) {
+		showDialog(ctx, { component, props }) {
 			return new Promise((res, rej) => {
+				const id = Math.random().toString(); // TODO: uuidとか使う
 				const dialog = reactive({
-					...opts,
+					component,
+					props: {
+						...props,
+						id
+					},
 					result: null,
-					id: Math.random().toString() // TODO: uuidとか使う
+					id,
 				});
 				ctx.commit('addDialog', dialog);
 				const unwatch = watch(() => dialog.result, result => {
@@ -406,21 +390,6 @@ export const store = createStore({
 			});
 		},
 
-		showMenu(ctx, opts) {
-			return new Promise((res, rej) => {
-				const menu = reactive({
-					...opts,
-					result: null,
-					id: Math.random().toString() // TODO: uuidとか使う
-				});
-				ctx.commit('addMenu', menu);
-				const unwatch = watch(() => menu.result, result => {
-					unwatch();
-					res(result);
-				});
-			});
-		},
-
 		api(ctx, { endpoint, data, token }) {
 			if (++ctx.state.pendingApiRequestsCount === 1) {
 				// TODO: spinnerの表示はstoreでやらない
diff --git a/src/client/sw.ts b/src/client/sw.ts
index 341198852e..01ed216029 100644
--- a/src/client/sw.ts
+++ b/src/client/sw.ts
@@ -3,7 +3,7 @@
  */
 declare var self: ServiceWorkerGlobalScope;
 
-import composeNotification from './scripts/compose-notification';
+import composeNotification from '@/scripts/compose-notification';
 
 // eslint-disable-next-line no-undef
 const version = _VERSION_;
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
index aac0d1bfe7..6b6213ee26 100644
--- a/src/client/tsconfig.json
+++ b/src/client/tsconfig.json
@@ -17,7 +17,10 @@
     "strict": true,
     "strictNullChecks": false,
     "experimentalDecorators": true,
-    "resolveJsonModule": true,
+		"resolveJsonModule": true,
+		"paths": {
+			"@/*": ["./*"]
+		},
     "typeRoots": [
       "node_modules/@types",
       "src/@types"
diff --git a/src/client/widgets/activity.calendar.vue b/src/client/widgets/activity.calendar.vue
index 70d9dbfec0..b833bd65ca 100644
--- a/src/client/widgets/activity.calendar.vue
+++ b/src/client/widgets/activity.calendar.vue
@@ -25,6 +25,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: ['data'],
diff --git a/src/client/widgets/activity.chart.vue b/src/client/widgets/activity.chart.vue
index 3252df4d5b..9702d66663 100644
--- a/src/client/widgets/activity.chart.vue
+++ b/src/client/widgets/activity.chart.vue
@@ -26,6 +26,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 function dragListen(fn) {
 	window.addEventListener('mousemove',  fn);
diff --git a/src/client/widgets/activity.vue b/src/client/widgets/activity.vue
index 1c74e3e0fa..ffa8b3858f 100644
--- a/src/client/widgets/activity.vue
+++ b/src/client/widgets/activity.vue
@@ -16,10 +16,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
 import XCalendar from './activity.calendar.vue';
 import XChart from './activity.chart.vue';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'activity',
@@ -55,7 +56,7 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$root.api('charts/user/notes', {
+		os.api('charts/user/notes', {
 			userId: this.$store.state.i.id,
 			span: 'day',
 			limit: 7 * 21
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index 4079edaaf0..7c4a742d8d 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -34,6 +34,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'calendar',
diff --git a/src/client/widgets/clock.vue b/src/client/widgets/clock.vue
index cdc2817d06..e9f6f7e872 100644
--- a/src/client/widgets/clock.vue
+++ b/src/client/widgets/clock.vue
@@ -9,8 +9,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import define from './define';
-import MkContainer from '../components/ui/container.vue';
-import MkAnalogClock from '../components/analog-clock.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkAnalogClock from '@/components/analog-clock.vue';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'clock',
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index d2d97768cb..b2b63dd6b6 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { Form } from '../scripts/form';
+import { Form } from '@/scripts/form';
 
 export default function <T extends Form>(data: {
 	name: string;
diff --git a/src/client/widgets/digital-clock.vue b/src/client/widgets/digital-clock.vue
index 207d660725..84433c5f14 100644
--- a/src/client/widgets/digital-clock.vue
+++ b/src/client/widgets/digital-clock.vue
@@ -15,6 +15,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'digitalClock',
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index a1cf79efb6..84965db9b2 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -21,9 +21,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import MkMiniChart from '../components/mini-chart.vue';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'federation',
@@ -69,11 +70,11 @@ export default defineComponent({
 	},
 	methods: {
 		async fetch() {
-			const instances = await this.$root.api('federation/instances', {
+			const instances = await os.api('federation/instances', {
 				sort: '+lastCommunicatedAt',
 				limit: 5
 			});
-			const charts = await Promise.all(instances.map(i => this.$root.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+			const charts = await Promise.all(instances.map(i => os.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
 			this.instances = instances;
 			this.charts = charts;
 			this.fetching = false;
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index d6ab0638e2..b20a07b4a7 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -12,8 +12,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'memo',
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 9630d9d6fd..7e2b6f3e8c 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -12,9 +12,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
-import XNotifications from '../components/notifications.vue';
+import MkContainer from '@/components/ui/container.vue';
+import XNotifications from '@/components/notifications.vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'notifications',
@@ -50,7 +51,7 @@ export default defineComponent({
 
 	methods: {
 		async configure() {
-			this.$root.new(await import('../components/notification-setting-window.vue'), {
+			this.$root.new(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/photos.vue b/src/client/widgets/photos.vue
index 2717bc87de..81ead5e609 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -17,9 +17,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faCamera } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'photos',
@@ -53,7 +54,7 @@ export default defineComponent({
 
 		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
-		this.$root.api('drive/stream', {
+		os.api('drive/stream', {
 			type: 'image/*',
 			limit: 9
 		}).then(images => {
diff --git a/src/client/widgets/rss.vue b/src/client/widgets/rss.vue
index 3d4eb3b624..15b102ae7e 100644
--- a/src/client/widgets/rss.vue
+++ b/src/client/widgets/rss.vue
@@ -15,8 +15,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'rss',
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index b82c4fd849..2300b56e6d 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -23,9 +23,10 @@
 import { defineComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
-import MkContainer from '../components/ui/container.vue';
-import XTimeline from '../components/timeline.vue';
+import MkContainer from '@/components/ui/container.vue';
+import XTimeline from '@/components/timeline.vue';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'timeline',
@@ -69,8 +70,8 @@ export default defineComponent({
 		async choose(ev) {
 			this.menuOpened = true;
 			const [antennas, lists] = await Promise.all([
-				this.$root.api('antennas/list'),
-				this.$root.api('users/lists/list')
+				os.api('antennas/list'),
+				os.api('users/lists/list')
 			]);
 			const antennaItems = antennas.map(antenna => ({
 				text: antenna.name,
@@ -88,7 +89,7 @@ export default defineComponent({
 					this.setSrc('list');
 				}
 			}));
-			this.$store.dispatch('showMenu', {
+			os.menu({
 				items: [{
 					text: this.$t('_timelines.home'),
 					icon: faHome,
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index 22681fc73a..5518e2ed6b 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -20,9 +20,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import MkMiniChart from '../components/mini-chart.vue';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'hashtags',
@@ -55,7 +56,7 @@ export default defineComponent({
 	},
 	methods: {
 		fetch() {
-			this.$root.api('hashtags/trend').then(stats => {
+			os.api('hashtags/trend').then(stats => {
 				this.stats = stats;
 				this.fetching = false;
 			});
diff --git a/src/client/widgets/welcome.vue b/src/client/widgets/welcome.vue
index 71398f779a..62f7aab88c 100644
--- a/src/client/widgets/welcome.vue
+++ b/src/client/widgets/welcome.vue
@@ -13,11 +13,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import XSigninDialog from '../components/signin-dialog.vue';
-import XSignupDialog from '../components/signup-dialog.vue';
-import MkButton from '../components/ui/button.vue';
-import { host } from '../config';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import { host } from '@/config';
 import define from './define';
+import * as os from '@/os';
 
 const widget = define({
 	name: 'welcome',
@@ -44,7 +45,7 @@ export default defineComponent({
 	},
 
 	created() {
-		this.$root.api('stats').then(stats => {
+		os.api('stats').then(stats => {
 			this.stats = stats;
 		});
 	},
diff --git a/webpack.config.ts b/webpack.config.ts
index 350e54a5cb..813a82ae86 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -149,6 +149,7 @@ module.exports = {
 			'.js', '.ts', '.json'
 		],
 		alias: {
+			'@': __dirname + '/src/client',
 			'const.styl': __dirname + '/src/client/const.styl'
 		}
 	},