wip

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'],

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() {

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 => {

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'],

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
 		});
 	}

src/client/components/captcha.vue

@@ -28,6 +28,7 @@ declare global {
 	interface Window extends CaptchaContainer {
 	}
 }
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {

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;

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: {

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

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: {

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: {

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: {

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: {

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: {

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,
 			});

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: {

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: {

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: {

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: {

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: {

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: {

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);
 				}

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: {

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: {

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
 			});
 		},

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')
 						});

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
 				});

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,

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: {

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: {

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: {

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: {

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;

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: {

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: {

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'))

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'],

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: {

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: {

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: {

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 = {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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);

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: {

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: {

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: {

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();

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: {

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: {

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 => {

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
 				});

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: {

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: {

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

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: {

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: {

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: {

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)
 				});

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: {

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: {

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: {

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: {

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: {

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
 				});

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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
 					});*/

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: {

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: {

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(() => {

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,

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: {

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: () => {

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: {

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: {

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: {

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

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: {

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: {

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

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: {

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')
 					});

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: {

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')
 				});

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() {

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: {

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: {

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: {

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: {