Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160a.

* wip

* wip

* wip

* Update init.ts

* Update drive-window.vue

* wip

* wip

* Use PascalCase for components

* Use PascalCase for components

* update dep

* wip

* wip

* wip

* Update init.ts

* wip

* Update paging.ts

* Update test.vue

* watch deep

* wip

* lint

* wip

* wip

* wip

* wip

* wiop

* wip

* Update webpack.config.ts

* alllow null poll

* wip

* wip

* wip

* wiop

* UI redesign & refactor (#6714)

* wip

* wip

* wip

* wip

* wip

* Update drive.vue

* Update word-mute.vue

* wip

* wip

* wip

* clean up

* wip

* Update default.vue

* wip

* Update notes.vue

* Update mfm.ts

* Update index.home.vue

* Update post-form.vue

* Update post-form-attaches.vue

* wip

* Update post-form.vue

* Update sidebar.vue

* wip

* wip

* Update index.vue

* wip

* Update default.vue

* Update index.vue

* Update index.vue

* wip

* Update post-form-attaches.vue

* Update note.vue

* wip

* clean up

* Update notes.vue

* wip

* wip

* Update ja-JP.yml

* wip

* wip

* Update index.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

* Update _dark.json5

* wip

* wip

* wip

* clean up

* wip

* wip

* Update index.vue

* Update test.vue

* wip

* wip

* fix

* wip

* wip

* wip

* wip

* clena yop

* wip

* wip

* Update store.ts

* Update messaging-room.vue

* Update default.widgets.vue

* fix

* wip

* wip

* Update modal.vue

* wip

* Update os.ts

* Update os.ts

* Update deck.vue

* Update init.ts

* wip

* Update ja-JP.yml

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

* Update modal.vue

* wip

* Update tooltip.ts

* wip

* wip

* wip

* wip

* wip

* Update image-viewer.vue

* wip

* wip

* Update style.scss

* Update style.scss

* Update visitor.vue

* wip

* Update init.ts

* Update init.ts

* wip

* wip

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* Update visitor.vue

* wip

* wip

* Update modal.vue

* Update header.vue

* Update menu.vue

* Update about.vue

* Update about-misskey.vue

* wip

* wip

* Update visitor.vue

* Update tooltip.ts

* wip

* Update drive.vue

* wip

* Update style.scss

* Update header.vue

* wip

* wip

* Update users.user.vue

* Update announcements.vue

* wip

* wip

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update style.scss

* Update users.vue

* wip

* Update style.scss

* wip

* Update welcome.entrance.vue

* Update radio.vue

* Update size.ts

* Update emoji-edit-dialog.vue

* wip

* Update emojis.vue

* wip

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* wip

* wip

* wip

* wip

* Update file-dialog.vue

* wip

* wip

* Update token-generate-window.vue

* Update notification-setting-window.vue

* wip

* wip

* Update _error_.vue

* Update ja-JP.yml

* wip

* wip

* Update store.ts

* Update emojis.vue

* Update emojis.vue

* Update emojis.vue

* Update announcements.vue

* Update store.ts

* wip

* Update page-editor.vue

* wip

* wip

* Update modal.vue

* wip

* Update select-file.ts

* Update timeline.vue

* Update emojis.vue

* Update os.ts

* wip

* Update user-select.vue

* Update mfm.ts

* Update get-file-info.ts

* Update drive.vue

* Update init.ts

* Update mfm.ts

* wip

* wip

* Update window.vue

* Update note.vue

* wip

* wip

* Update user-info.vue

* wip

* wip

* wip

* wip

* wip

* Update header.vue

* Update header.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update webpack.config.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update autocomplete.ts

* wip

* wip

* wip

* Update toast.vue

* wip

* Update post-form-dialog.vue

* wip

* wip

* wip

* wip

* wip

* Update users.vue

* wip

* Update explore.vue

* wip

* wip

* wip

* Update package.json

* wip

* Update icon-dialog.vue

* wip

* wip

* Update user-preview.ts

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* Update user-name.vue

* Update federation.vue

* Update instance.vue

* wip

* wip

* Update tag.vue

* wip

* wip

* wip

* wip

* wip

* Update instance.vue

* wip

* Update os.ts

* Update os.ts

* wip

* wip

* wip

* Update router.ts

* wip

* Update init.ts

* Update note.vue

* Update messages.vue

* wip

* wip

* wip

* wip

* wip

* google

* wip

* wip

* wip

* wip

* Update theme-editor.vue

* wip

* wip

* Update room.vue

* Update channel-editor.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update window.vue

* Update window.vue

* wip

* Update menu.vue

* wip

* wip

* wip

* wip

* Update messaging-room.vue

* wip

* Update post-form.vue

* Update default.widgets.vue

* Update window.vue

* wip

gulpfile.ts

@@ -7,9 +7,6 @@ import * as gulp from 'gulp';
 import * as ts from 'gulp-typescript';
 import * as rimraf from 'rimraf';
 import * as rename from 'gulp-rename';
-const cleanCSS = require('gulp-clean-css');
-const sass = require('gulp-dart-sass');
-const fiber = require('fibers');
 
 const locales: { [x: string]: any } = require('./locales');
 const meta = require('./package.json');
@@ -61,13 +58,6 @@ gulp.task('cleanall', gulp.parallel('clean', cb =>
 	rimraf('./node_modules', cb)
 ));
 
-gulp.task('build:client:styles', () =>
-	gulp.src('./src/client/style.scss')
-		.pipe(sass({ fiber }))
-		.pipe(cleanCSS())
-		.pipe(gulp.dest('./built/client/assets/'))
-);
-
 gulp.task('copy:client', () =>
 		gulp.src([
 			'./assets/**/*',
@@ -87,7 +77,6 @@ gulp.task('copy:docs', () =>
 );
 
 gulp.task('build:client', gulp.parallel(
-	'build:client:styles',
 	'copy:client',
 	'copy:docs'
 ));

locales/ja-JP.yml

@@ -16,6 +16,9 @@ noNotes: "ノートはありません"
 noNotifications: "通知はありません"
 instance: "インスタンス"
 settings: "設定"
+basicSettings: "基本設定"
+otherSettings: "その他の設定"
+openInWindow: "ウィンドウで開く"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はありません"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "このノートを削除してもう一度編集します
 addToList: "リストに追加"
 sendMessage: "メッセージを送信"
 copyUsername: "ユーザー名をコピー"
+searchUser: "ユーザーを検索"
 reply: "返信"
 loadMore: "もっと見る"
 youGotNewFollower: "フォローされました"
@@ -66,8 +70,11 @@ followers: "フォロワー"
 followsYou: "フォローされています"
 createList: "リスト作成"
 manageLists: "リストの管理"
-error: "問題が発生しました"
+error: "エラー"
+somethingHappened: "問題が発生しました"
 retry: "再試行"
+pageLoadError: "ページの読み込みに失敗しました。"
+pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
 enterListName: "リスト名を入力"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
@@ -106,6 +113,8 @@ unsuspendConfirm: "解凍しますか？"
 selectList: "リストを選択"
 selectAntenna: "アンテナを選択"
 selectWidget: "ウィジェットを選択"
+editWidgets: "ウィジェットを編集"
+editWidgetsExit: "編集を終了"
 customEmojis: "カスタム絵文字"
 emoji: "絵文字"
 emojiName: "絵文字名"
@@ -177,7 +186,6 @@ processing: "処理中"
 preview: "プレビュー"
 default: "デフォルト"
 noCustomEmojis: "絵文字はありません"
-customEmojisOfRemote: "リモートの絵文字"
 noJobs: "ジョブはありません"
 federating: "連合中"
 blocked: "ブロック中"
@@ -445,7 +453,7 @@ total: "合計"
 weekOverWeekChanges: "前週比"
 dayOverDayChanges: "前日比"
 appearance: "アピアランス"
-clinetSettings: "クライアント設定"
+clientSettings: "クライアント設定"
 accountSettings: "アカウント設定"
 promotion: "プロモーション"
 promote: "プロモート"
@@ -476,6 +484,8 @@ newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
 listen: "聴く"
 none: "なし"
+showInPage: "ページで表示"
+popout: "ポップアウト"
 volume: "音量"
 details: "詳細"
 chooseEmoji: "絵文字を選択"
@@ -518,7 +528,6 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
-fixedWidgetsPosition: "ウィジェットの位置を固定する"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
 expandTweet: "ツイートを展開する"
@@ -570,6 +579,12 @@ notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
+other: "その他"
+regenerateLoginToken: "ログイントークンを再生成"
+regenerateLoginTokenDescription: "ログインに使用される内部トークンを再生成します。通常この操作を行う必要はありません。再生成すると、全てのデバイスでログアウトされます。"
+setMultipleBySeparatingWithSpace: "スペースで区切って複数設定できます。"
+fileIdOrUrl: "ファイルIDまたはURL"
+chatOpenBehavior: "チャットを開くときの動作"
 
 _serverDisconnectedBehavior:
   reload: "自動でリロード"
@@ -802,6 +817,7 @@ _widgets:
   photos: "フォト"
   digitalClock: "デジタル時計"
   federation: "連合"
+  postForm: "投稿フォーム"
 
 _cw:
   hide: "隠す"

package.json

@@ -37,11 +37,11 @@
 	"dependencies": {
 		"@babel/plugin-transform-runtime": "7.11.0",
 		"@elastic/elasticsearch": "7.8.0",
-		"@fortawesome/fontawesome-svg-core": "1.2.30",
-		"@fortawesome/free-brands-svg-icons": "5.14.0",
-		"@fortawesome/free-regular-svg-icons": "5.14.0",
-		"@fortawesome/free-solid-svg-icons": "5.14.0",
-		"@fortawesome/vue-fontawesome": "0.1.10",
+		"@fortawesome/fontawesome-svg-core": "1.2.32",
+		"@fortawesome/free-brands-svg-icons": "5.15.1",
+		"@fortawesome/free-regular-svg-icons": "5.15.1",
+		"@fortawesome/free-solid-svg-icons": "5.15.1",
+		"@fortawesome/vue-fontawesome": "3.0.0-2",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
@@ -97,19 +97,20 @@
 		"@types/speakeasy": "2.0.5",
 		"@types/tinycolor2": "1.4.2",
 		"@types/tmp": "0.2.0",
-		"@types/uuid": "8.0.0",
+		"@types/uuid": "8.3.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.18",
+		"@types/webpack": "4.41.22",
 		"@types/webpack-stream": "3.2.11",
 		"@types/websocket": "1.0.1",
-		"@types/ws": "7.2.6",
-		"@typescript-eslint/parser": "3.6.0",
+		"@types/ws": "7.2.7",
+		"@typescript-eslint/parser": "4.4.0",
+		"@vue/compiler-sfc": "3.0.0",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.20.0",
+		"apexcharts": "3.22.0",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.724.0",
+		"aws-sdk": "2.770.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.3",
 		"bull": "3.18.0",
@@ -122,35 +123,33 @@
 		"content-disposition": "0.5.3",
 		"core-js": "3.6.5",
 		"crc-32": "1.2.0",
-		"css-loader": "4.2.1",
+		"css-loader": "4.3.0",
 		"cssnano": "4.1.10",
 		"dateformat": "3.0.3",
 		"deep-entries": "3.1.0",
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.4.0",
-		"eslint-plugin-vue": "6.2.2",
-		"eventemitter3": "4.0.4",
+		"eslint": "7.10.0",
+		"eslint-plugin-vue": "7.0.1",
+		"eventemitter3": "4.0.7",
 		"feed": "4.2.1",
 		"fibers": "5.0.0",
-		"file-type": "14.7.1",
+		"file-type": "15.0.1",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
 		"gulp": "4.0.2",
-		"gulp-clean-css": "4.3.0",
-		"gulp-dart-sass": "1.0.2",
 		"gulp-rename": "2.0.0",
 		"gulp-replace": "1.0.0",
 		"gulp-sourcemaps": "2.6.5",
-		"gulp-terser": "1.3.2",
+		"gulp-terser": "1.4.0",
 		"gulp-tslint": "8.1.4",
 		"gulp-typescript": "6.0.0-alpha.1",
 		"hard-source-webpack-plugin": "0.13.1",
 		"hcaptcha": "0.0.2",
 		"html-minifier": "4.0.0",
 		"http-proxy-agent": "4.0.1",
-		"http-signature": "1.3.4",
+		"http-signature": "1.3.5",
 		"https-proxy-agent": "5.0.0",
 		"idb-keyval": "3.2.0",
 		"insert-text-at-cursor": "0.3.0",
@@ -171,27 +170,27 @@
 		"koa-mount": "4.0.0",
 		"koa-send": "5.0.1",
 		"koa-slow": "2.1.0",
-		"koa-views": "6.3.0",
+		"koa-views": "6.3.1",
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
-		"markdown-it": "11.0.0",
-		"markdown-it-anchor": "5.3.0",
-		"mocha": "8.1.1",
+		"markdown-it": "11.0.1",
+		"markdown-it-anchor": "6.0.0",
+		"mocha": "8.1.3",
 		"moji": "0.5.1",
 		"ms": "2.1.2",
 		"multer": "1.4.2",
 		"nested-property": "4.0.0",
-		"node-fetch": "2.6.0",
-		"nodemailer": "6.4.11",
-		"nprogress": "0.2.0",
+		"node-fetch": "2.6.1",
+		"nodemailer": "6.4.13",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
+		"p-cancelable": "2.0.0",
 		"parse5": "6.0.1",
-		"parsimmon": "1.15.0",
-		"pg": "8.3.2",
-		"portal-vue": "2.1.7",
+		"parsimmon": "1.16.0",
+		"pg": "8.4.1",
 		"portscanner": "2.2.0",
-		"postcss-loader": "3.0.0",
+		"postcss": "8.1.1",
+		"postcss-loader": "4.0.3",
 		"prismjs": "1.21.0",
 		"probe-image-size": "5.0.0",
 		"promise-limit": "2.7.0",
@@ -202,7 +201,7 @@
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
-		"re2": "1.15.4",
+		"re2": "1.15.5",
 		"recaptcha-promise": "0.1.3",
 		"reconnecting-websocket": "4.4.0",
 		"redis": "3.0.2",
@@ -215,54 +214,49 @@
 		"rimraf": "3.0.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.26.10",
-		"sass-loader": "9.0.3",
+		"sass": "1.27.0",
+		"sass-loader": "10.0.2",
 		"seedrandom": "3.0.5",
-		"sharp": "0.25.4",
+		"sharp": "0.26.1",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
-		"style-loader": "1.2.1",
+		"style-loader": "1.3.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.26.12",
+		"systeminformation": "4.27.8",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
-		"tinycolor2": "1.4.1",
+		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "8.0.2",
+		"ts-loader": "8.0.4",
 		"ts-node": "9.0.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
-		"typeorm": "0.2.25",
-		"typescript": "4.0.2",
+		"typeorm": "0.2.28",
+		"typescript": "4.0.3",
 		"ulid": "2.3.0",
 		"url-loader": "4.1.0",
-		"uuid": "8.3.0",
-		"v-animate-css": "0.0.3",
+		"uuid": "8.3.1",
 		"v-debounce": "0.1.2",
-		"vue": "2.6.12",
+		"vue": "3.0.1",
 		"vue-color": "2.7.1",
-		"vue-content-loading": "1.6.0",
-		"vue-cropperjs": "4.1.0",
-		"vue-i18n": "8.21.0",
-		"vue-json-pretty": "1.6.7",
-		"vue-loader": "15.9.3",
-		"vue-marquee-text-component": "1.1.1",
-		"vue-meta": "2.4.0",
+		"vue-draggable-next": "1.0.8",
+		"vue-i18n": "9.0.0-beta.4",
+		"vue-json-pretty": "1.7.0",
+		"vue-loader": "16.0.0-beta.7",
 		"vue-prism-component": "1.2.0",
 		"vue-prism-editor": "1.2.2",
-		"vue-router": "3.4.3",
+		"vue-router": "4.0.0-beta.13",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader-corejs3": "1.5.0",
 		"vue-template-compiler": "2.6.12",
-		"vuedraggable": "2.24.1",
-		"vuex": "3.5.1",
+		"vuex": "4.0.0-beta.4",
 		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
-		"webpack": "5.0.0-beta.28",
+		"webpack": "5.1.3",
 		"webpack-cli": "3.3.12",
-		"websocket": "1.0.31",
+		"websocket": "1.0.32",
 		"ws": "7.3.1",
 		"xev": "2.0.1"
 	},

src/client/.eslintrc

@@ -0,0 +1,12 @@
+{
+	"globals": {
+		"_DEV_": false,
+		"_LANGS_": false,
+		"_VERSION_": false,
+		"_ENV_": false,
+		"_PERF_PREFIX_": false,
+		"_DATA_TRANSFER_DRIVE_FILE_": false,
+		"_DATA_TRANSFER_DRIVE_FOLDER_": false,
+		"_DATA_TRANSFER_DECK_COLUMN_": false
+	}
+}

src/client/@types/global.d.ts

@@ -0,0 +1,8 @@
+declare const _LANGS_: string[];
+declare const _VERSION_: string;
+declare const _ENV_: string;
+declare const _DEV_: boolean;
+declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;

src/client/@types/vuex-shim.d.ts

@@ -0,0 +1,11 @@
+import { ComponentCustomProperties } from 'vue';
+import { Store } from 'vuex';
+
+declare module '@vue/runtime-core' {
+	interface State {
+	}
+
+	interface ComponentCustomProperties {
+		$store: Store<State>
+	}
+}

src/client/app.vue

@@ -1,788 +0,0 @@
-<template>
-<div class="mk-app" v-hotkey.global="keymap">
-	<header class="header" ref="header">
-		<div class="title" ref="title">
-			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
-			</transition>
-			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<div class="body" :key="pageKey">
-					<div class="default">
-						<portal-target name="avatar" slim/>
-						<h1 class="title"><portal-target name="icon" slim/><portal-target name="title" slim/></h1>
-					</div>
-					<div class="custom">
-						<portal-target name="header" slim/>
-					</div>
-				</div>
-			</transition>
-		</div>
-		<div class="sub">
-			<template v-if="$store.getters.isSignedIn">
-				<button v-if="widgetsEditMode" class="_button edit active" @click="widgetsEditMode = false"><fa :icon="faGripVertical"/></button>
-				<button v-else class="_button edit" @click="widgetsEditMode = true"><fa :icon="faGripVertical"/></button>
-			</template>
-			<div class="search">
-				<fa :icon="faSearch"/>
-				<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
-			</div>
-			<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
-			<x-clock v-if="isDesktop" class="clock"/>
-		</div>
-	</header>
-
-	<x-sidebar ref="nav" @change-view-mode="calcHeaderWidth"/>
-
-	<div class="contents" ref="contents" :class="{ wallpaper, full: $store.state.fullView }">
-		<main ref="main">
-			<div class="content">
-				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-					<keep-alive :include="['index']">
-						<router-view></router-view>
-					</keep-alive>
-				</transition>
-			</div>
-			<div class="powerd-by" :class="{ visible: !$store.getters.isSignedIn }">
-				<b><router-link to="/">{{ host }}</router-link></b>
-				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
-			</div>
-		</main>
-
-		<template v-if="isDesktop">
-			<div v-for="place in ['left', 'right']" ref="widgets" class="widgets" :class="{ edit: widgetsEditMode, fixed: $store.state.device.fixedWidgetsPosition, empty: widgets[place].length === 0 && !widgetsEditMode }" :key="place">
-				<div class="spacer"></div>
-				<div class="container" v-if="widgetsEditMode">
-					<mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button>
-					<x-draggable
-						:list="widgets[place]"
-						handle=".handle"
-						animation="150"
-						class="sortable"
-						@sort="onWidgetSort"
-					>
-						<div v-for="widget in widgets[place]" class="customize-container _panel" :key="widget.id">
-							<header>
-								<span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
-							</header>
-							<div @click="widgetFunc(widget.id)">
-								<component class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
-							</div>
-						</div>
-					</x-draggable>
-				</div>
-				<div class="container" v-else>
-					<component v-for="widget in widgets[place]" class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
-				</div>
-			</div>
-		</template>
-	</div>
-
-	<div class="buttons" :class="{ navHidden }">
-		<button class="button nav _button" @click="showNav" ref="navButton"><fa :icon="faBars"/><i v-if="navIndicated"><fa :icon="faCircle"/></i></button>
-		<button v-if="$route.name === 'index'" class="button home _button" @click="top()"><fa :icon="faHome"/></button>
-		<button v-else class="button home _button" @click="$router.push('/')"><fa :icon="faHome"/></button>
-		<button v-if="$store.getters.isSignedIn" class="button notifications _button" @click="$router.push('/my/notifications')"><fa :icon="faBell"/><i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i></button>
-		<button v-if="$store.getters.isSignedIn" class="button post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
-	</div>
-
-	<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" :class="{ navHidden }" @click="post()"><fa :icon="faPencilAlt"/></button>
-
-	<stream-indicator v-if="$store.getters.isSignedIn"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
-import { 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 { widgets } from './widgets';
-import XSidebar from './components/sidebar.vue';
-
-const DESKTOP_THRESHOLD = 1100;
-
-export default Vue.extend({
-	components: {
-		XSidebar,
-		XClock: () => import('./components/header-clock.vue').then(m => m.default),
-		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
-		XDraggable: () => import('vuedraggable'),
-	},
-
-	data() {
-		return {
-			host: host,
-			pageKey: 0,
-			searching: false,
-			connection: null,
-			searchQuery: '',
-			searchWait: false,
-			widgetsEditMode: false,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			canBack: false,
-			menuDef: this.$store.getters.nav({}),
-			navHidden: false,
-			wallpaper: localStorage.getItem('wallpaper') != null,
-			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
-		};
-	},
-
-	computed: {
-		keymap(): any {
-			return {
-				'd': () => {
-					if (this.$store.state.device.syncDeviceDarkMode) return;
-					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
-				},
-				'p': this.post,
-				'n': this.post,
-				's': this.search,
-				'h|/': this.help
-			};
-		},
-
-		widgets(): any {
-			if (this.$store.getters.isSignedIn) {
-				const widgets = this.$store.state.deviceUser.widgets;
-				return {
-					left: widgets.filter(x => x.place === 'left'),
-					right: widgets.filter(x => x.place == null || x.place === 'right'),
-					mobile: widgets.filter(x => x.place === 'mobile'),
-				};
-			} else {
-				const right = [{
-					name: 'calendar',
-					id: 'b', place: 'right', data: {}
-				}, {
-					name: 'trends',
-					id: 'c', place: 'right', data: {}
-				}];
-
-				if (this.$route.name !== 'index') {
-					right.unshift({
-						name: 'welcome',
-						id: 'a', place: 'right', data: {}
-					});
-				}
-
-				return {
-					left: [],
-					right,
-					mobile: [],
-				};
-			}
-		},
-
-		menu(): string[] {
-			return this.$store.state.deviceUser.menu;
-		},
-
-		navIndicated(): boolean {
-			if (!this.$store.getters.isSignedIn) return false;
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		}
-	},
-
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
-		},
-
-		isDesktop() {
-			this.$nextTick(() => {
-				this.attachSticky();
-			});
-		}
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection = this.$root.stream.useSharedConnection('main');
-			this.connection.on('notification', this.onNotification);
-
-			if (this.$store.state.deviceUser.widgets.length === 0) {
-				this.$store.commit('deviceUser/setWidgets', [{
-					name: 'calendar',
-					id: 'a', place: 'right', data: {}
-				}, {
-					name: 'notifications',
-					id: 'b', place: 'right', data: {}
-				}, {
-					name: 'trends',
-					id: 'c', place: 'right', data: {}
-				}]);
-			}
-		}
-	},
-
-	mounted() {
-		this.adjustTitlePosition();
-
-		const ro = new ResizeObserver((entries, observer) => {
-			this.adjustTitlePosition();
-		});
-
-		ro.observe(this.$refs.contents);
-
-		window.addEventListener('resize', this.adjustTitlePosition, { passive: true });
-
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-
-		// widget follow
-		this.attachSticky();
-
-		this.$nextTick(() => {
-			this.calcHeaderWidth();
-		});
-	},
-
-	methods: {
-		adjustTitlePosition() {
-			const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.$el.offsetWidth;
-			if (left >= 0) {
-				this.$refs.title.style.left = left + 'px';
-			}
-		},
-
-		calcHeaderWidth() {
-			const navWidth = this.$refs.nav.$el.offsetWidth;
-			this.navHidden = navWidth === 0;
-			this.$refs.header.style.width = `calc(100% - ${navWidth}px)`;
-			this.adjustTitlePosition();
-		},
-
-		showNav() {
-			this.$refs.nav.show();
-		},
-
-		attachSticky() {
-			if (!this.isDesktop) return;
-			if (this.$store.state.device.fixedWidgetsPosition) return;
-
-			const stickyWidgetColumns = this.$refs.widgets.map(w => new StickySidebar(w.children[1], w.children[0], w.offsetTop));
-			window.addEventListener('scroll', () => {
-				for (const stickyWidgetColumn of stickyWidgetColumns) {
-					stickyWidgetColumn.calc(window.scrollY);
-				}
-			}, { passive: true });
-		},
-
-		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		help() {
-			this.$router.push('/docs/keyboard-shortcut');
-		},
-
-		back() {
-			if (this.canBack) window.history.back();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		post() {
-			this.$root.post();
-		},
-
-		search() {
-			if (this.searching) return;
-
-			this.$root.dialog({
-				title: this.$t('search'),
-				input: true
-			}).then(async ({ canceled, result: query }) => {
-				if (canceled || query == null || query === '') return;
-
-				this.searching = true;
-				search(this, query).finally(() => {
-					this.searching = false;
-				});
-			});
-		},
-
-		searchKeypress(e) {
-			if (e.keyCode === 13) {
-				this.searchWait = true;
-				search(this, this.searchQuery).finally(() => {
-					this.searchWait = false;
-					this.searchQuery = '';
-				});
-			}
-		},
-
-		async onNotification(notification) {
-			if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
-				return;
-			}
-			if (document.visibilityState === 'visible') {
-				this.$root.stream.send('readNotification', {
-					id: notification.id
-				});
-
-				this.$root.new(await import('./components/toast.vue').then(m => m.default), {
-					notification
-				});
-			}
-
-			this.$root.sound('notification');
-		},
-
-		widgetFunc(id) {
-			this.$refs[id][0].setting();
-		},
-
-		onWidgetSort() {
-			this.saveHome();
-		},
-
-		async addWidget(place) {
-			const { canceled, result: widget } = await this.$root.dialog({
-				type: null,
-				title: this.$t('chooseWidget'),
-				select: {
-					items: widgets.map(widget => ({
-						value: widget,
-						text: this.$t('_widgets.' + widget),
-					}))
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-
-			this.$store.commit('deviceUser/addWidget', {
-				name: widget,
-				id: uuid(),
-				place: place,
-				data: {}
-			});
-		},
-
-		removeWidget(widget) {
-			this.$store.commit('deviceUser/removeWidget', widget);
-		},
-
-		saveHome() {
-			this.$store.commit('deviceUser/setWidgets', [...this.widgets.left, ...this.widgets.right, ...this.widgets.mobile]);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	$header-height: 60px;
-	$main-width: 670px;
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$header-sub-hide-threshold: 1090px;
-	$left-widgets-hide-threshold: 1600px;
-	$right-widgets-hide-threshold: 1090px;
-
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
-	box-sizing: border-box;
-	padding-top: $header-height;
-
-	&, > .header > .body {
-		display: flex;
-		margin: 0 auto;
-	}
-
-	> .header {
-		position: fixed;
-		z-index: 1000;
-		top: 0;
-		right: 0;
-		height: $header-height;
-		width: 100%;
-		//background-color: var(--panel);
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
-		background-color: var(--header);
-		border-bottom: solid 1px var(--divider);
-
-		> .title {
-			position: relative;
-			line-height: $header-height;
-			height: $header-height;
-			max-width: $main-width;
-			text-align: center;
-
-			> .back {
-				position: absolute;
-				z-index: 1;
-				top: 0;
-				left: 0;
-				height: $header-height;
-				width: $header-height;
-			}
-
-			> .body {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				height: $header-height;
-
-				> .default {
-					padding: 0 $header-height;
-
-					> .avatar {
-						$size: 32px;
-						display: inline-block;
-						width: $size;
-						height: $size;
-						vertical-align: bottom;
-						margin: (($header-height - $size) / 2) 8px (($header-height - $size) / 2) 0;
-					}
-
-					> .title {
-						display: inline-block;
-						font-size: $ui-font-size;
-						margin: 0;
-						line-height: $header-height;
-
-						> [data-icon] {
-							margin-right: 8px;
-						}
-					}
-				}
-
-				> .custom {
-					position: absolute;
-					top: 0;
-					left: 0;
-					height: 100%;
-					width: 100%;
-				}
-			}
-		}
-
-		> .sub {
-			$post-button-size: 42px;
-			$post-button-margin: (($header-height - $post-button-size) / 2);
-			display: flex;
-			align-items: center;
-			position: absolute;
-			top: 0;
-			right: 16px;
-			height: $header-height;
-
-			@media (max-width: $header-sub-hide-threshold) {
-				display: none;
-			}
-
-			> .edit {
-				padding: 16px;
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-
-			> .search {
-				position: relative;
-
-				> input {
-					width: 220px;
-					box-sizing: border-box;
-					margin-right: 8px;
-					padding: 0 12px 0 42px;
-					font-size: 1rem;
-					line-height: 38px;
-					border: none;
-					border-radius: 38px;
-					color: var(--fg);
-					background: var(--bg);
-					-webkit-appearance: textfield;
-
-					&:focus {
-						outline: none;
-					}
-				}
-
-				> [data-icon] {
-					position: absolute;
-					top: 0;
-					left: 16px;
-					height: 100%;
-					pointer-events: none;
-					font-size: 16px;
-				}
-			}
-
-			> .post {
-				width: $post-button-size;
-				height: $post-button-size;
-				margin-left: $post-button-margin;
-				border-radius: 100%;
-				font-size: 16px;
-			}
-
-			> .clock {
-				margin-left: 8px;
-			}
-		}
-	}
-
-	> .contents {
-		display: flex;
-		margin: 0 auto;
-		min-width: 0;
-
-		&.wallpaper {
-			background: var(--wallpaperOverlay);
-			backdrop-filter: blur(4px);
-		}
-
-		&.full {
-			width: 100%;
-
-			> main {
-				width: 100%;
-			}
-
-			> .widgets {
-				display: none;
-			}
-		}
-
-		> main {
-			width: $main-width;
-			min-width: 0;
-
-			> .content {
-				> * {
-					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
-					box-sizing: border-box;
-					padding: var(--margin);
-
-					&.full {
-						padding: 0 var(--margin);
-					}
-				}
-			}
-
-			> .powerd-by {
-				font-size: 14px;
-				text-align: center;
-				margin: 32px 0;
-				visibility: hidden;
-
-				&.visible {
-					visibility: visible;
-				}
-
-				&:not(.visible) {
-					@media (min-width: 850px) {
-						display: none;
-					}
-				}
-
-				@media (max-width: 500px) {
-					margin-top: 16px;
-				}
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-
-					@media (max-width: 500px) {
-						margin-top: 4px;
-					}
-				}
-			}
-		}
-
-		> .widgets {
-			padding: 0 var(--margin);
-			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
-
-			&.fixed {
-				position: sticky;
-				overflow: auto;
-				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-				height: calc((var(--vh, 1vh) * 100) - #{$header-height});
-				top: $header-height;
-			}
-
-			&:first-of-type {
-				order: -1;
-
-				@media (max-width: $left-widgets-hide-threshold) {
-					display: none;
-				}
-			}
-
-			&.empty {
-				display: none;
-			}
-
-			@media (max-width: $right-widgets-hide-threshold) {
-				display: none;
-			}
-
-			> .container {
-				position: sticky;
-				height: min-content;
-				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-				min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
-				padding: var(--margin) 0;
-				box-sizing: border-box;
-
-				> * {
-					margin: var(--margin) 0;
-					width: 300px;
-
-					&:first-child {
-						margin-top: 0;
-					}
-
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-			}
-
-			> .add {
-				margin: 0 auto;
-			}
-
-			.customize-container {
-				margin: 8px 0;
-
-				> header {
-					position: relative;
-					line-height: 32px;
-
-					> .handle {
-						padding: 0 8px;
-						cursor: move;
-					}
-
-					> .remove {
-						position: absolute;
-						top: 0;
-						right: 0;
-						padding: 0 8px;
-						line-height: 32px;
-					}
-				}
-
-				> div {
-					padding: 8px;
-
-					> * {
-						pointer-events: none;
-					}
-				}
-			}
-		}
-	}
-
-	> .post {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		bottom: 32px;
-		right: 32px;
-		width: 64px;
-		height: 64px;
-		border-radius: 100%;
-		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-
-		&.navHidden {
-			display: none;
-		}
-
-		@media (min-width: ($header-sub-hide-threshold + 1px)) {
-			display: none;
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		padding: 0 32px 32px 32px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--X1));
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
-
-		&:not(.navHidden) {
-			display: none;
-		}
-
-		> .button {
-			position: relative;
-			padding: 0;
-			margin: auto;
-			width: 64px;
-			height: 64px;
-			border-radius: 100%;
-			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 22px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-
-			&:not(.post) {
-				background: var(--panel);
-				color: var(--fg);
-
-				&:hover {
-					background: var(--X2);
-				}
-
-				> i {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--indicator);
-					font-size: 16px;
-					animation: blink 1s infinite;
-				}
-			}
-		}
-	}
-}
-</style>

src/client/components/acct.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host } from '../config';
+import { host } from '@/config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['user', 'detail'],
 	data() {
 		return {

src/client/components/analog-clock.vue

@@ -34,10 +34,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			now: new Date(),
@@ -127,7 +128,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.enabled = false;
 	},
 

src/client/components/autocomplete.vue

@@ -1,12 +1,12 @@
 <template>
-<div class="swhvrteh" @contextmenu.prevent="() => {}">
+<div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
 	<ol class="users" ref="suggests" v-if="type === 'user'">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
 			<img class="avatar" :src="user.avatarUrl"/>
 			<span class="name">
-				<mk-user-name :user="user" :key="user.id"/>
+				<MkUserName :user="user" :key="user.id"/>
 			</span>
-			<span class="username">@{{ user | acct }}</span>
+			<span class="username">@{{ acct(user) }}</span>
 		</li>
 		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li>
 	</ol>
@@ -28,12 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import contains from '../scripts/contains';
+import contains from '@/scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
-import MkUserSelect from './user-select.vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { acct } from '@/filters/user';
+import * as os from '@/os';
 
 type EmojiDef = {
 	emoji: string;
@@ -74,7 +75,7 @@ for (const x of lib) {
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
@@ -91,11 +92,6 @@ export default Vue.extend({
 			required: true,
 		},
 
-		complete: {
-			type: Function,
-			required: true,
-		},
-
 		close: {
 			type: Function,
 			required: true,
@@ -110,8 +106,15 @@ export default Vue.extend({
 			type: Number,
 			required: true,
 		},
+
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			getStaticImageUrl,
@@ -135,6 +138,14 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		showing() {
+			if (!this.showing) {
+				this.$emit('closed');
+			}
+		}
+	},
+
 	updated() {
 		this.setPosition();
 	},
@@ -189,7 +200,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.textarea.removeEventListener('keydown', this.onKeydown);
 
 		for (const el of Array.from(document.querySelectorAll('body *'))) {
@@ -198,6 +209,11 @@ export default Vue.extend({
 	},
 
 	methods: {
+		complete(type, value) {
+			this.$emit('done', { type, value });
+			this.$emit('closed');
+		},
+
 		setPosition() {
 			if (this.x + this.$el.offsetWidth > window.innerWidth) {
 				this.$el.style.left = (window.innerWidth - this.$el.offsetWidth) + 'px';
@@ -236,8 +252,8 @@ export default Vue.extend({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					this.$root.api('users/search', {
-						query: this.q,
+					os.api('users/search-by-username-and-host', {
+						username: this.q,
 						limit: 10,
 						detail: false
 					}).then(users => {
@@ -260,7 +276,7 @@ export default Vue.extend({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						this.$root.api('hashtags/search', {
+						os.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {
@@ -374,14 +390,13 @@ export default Vue.extend({
 
 		chooseUser() {
 			this.close();
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
+			os.selectUser().then(user => {
 				this.complete('user', user);
-			});
-			vm.$once('closed', () => {
 				this.textarea.focus();
 			});
-		}
+		},
+
+		acct
 	}
 });
 </script>
@@ -393,9 +408,6 @@ export default Vue.extend({
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
 	overflow: hidden;
-	background: var(--panel);
-	border: solid 1px rgba(#000, 0.1);
-	border-radius: 4px;
 	transition: top 0.1s ease, left 0.1s ease;
 
 	> ol {

src/client/components/avatar.vue

@@ -1,17 +1,19 @@
 <template>
-<span class="eiwwqkts" :class="{ cat }" :title="user | acct" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url"/>
 </span>
-<router-link class="eiwwqkts" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url"/>
 </router-link>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '../filters/user';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +32,7 @@ export default Vue.extend({
 			default: false
 		}
 	},
+	emits: ['click'],
 	computed: {
 		cat(): boolean {
 			return this.user.isCat;
@@ -42,25 +45,19 @@ export default Vue.extend({
 	},
 	watch: {
 		'user.avatarBlurhash'() {
-			this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+			if (this.$el == null) return;
+			this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 		}
 	},
 	mounted() {
-		this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+		this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 	},
 	methods: {
-		getBlurhashAvgColor(s) {
-			return typeof s == 'string'
-				? '#' + [...s.slice(2, 6)]
-						.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
-						.reduce((a, c) => a * 83 + c, 0)
-						.toString(16)
-						.padStart(6, '0')
-				: undefined;
-		},
 		onClick(e) {
 			this.$emit('click', e);
-		}
+		},
+		acct,
+		userPage
 	}
 });
 </script>
@@ -95,7 +92,7 @@ export default Vue.extend({
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
 	}
-	
+
 	.inner {
 		position: absolute;
 		bottom: 0;

src/client/components/avatars.vue

@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<mk-avatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		userIds: {
 			required: true
@@ -21,7 +22,7 @@ export default Vue.extend({
 		};
 	},
 	async created() {
-		this.us = await this.$root.api('users/show', {
+		this.us = await os.api('users/show', {
 			userIds: this.userIds
 		});
 	}

src/client/components/captcha.vue

@@ -1,12 +1,12 @@
 <template>
 <div>
-	<span v-if="!available">{{ $t('waiting') }}<mk-ellipsis/></span>
+	<span v-if="!available">{{ $t('waiting') }}<MkEllipsis/></span>
 	<div ref="captcha"></div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 type Captcha = {
 	render(container: string | Node, options: {
@@ -28,8 +28,9 @@ declare global {
 	interface Window extends CaptchaContainer {
 	}
 }
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		provider: {
 			type: String,
@@ -88,7 +89,7 @@ export default Vue.extend({
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.reset();
 	},
 
@@ -110,7 +111,7 @@ export default Vue.extend({
 			}
 		},
 		callback(response?: string) {
-			this.$emit('input', typeof response == 'string' ? response : null);
+			this.$emit('update:value', typeof response == 'string' ? response : null);
 		},
 	},
 });

src/client/components/channel-follow-button.vue

@@ -6,23 +6,24 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -49,12 +50,12 @@ export default Vue.extend({
 
 			try {
 				if (this.isFollowing) {
-					await this.$root.api('channels/unfollow', {
+					await os.api('channels/unfollow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = false;
 				} else {
-					await this.$root.api('channels/follow', {
+					await os.api('channels/follow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = true;

src/client/components/channel-preview.vue

@@ -2,28 +2,42 @@
 <router-link :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
 		<div class="fade"></div>
-		<div class="name"><fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="name"><Fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
 		<div class="status">
-			<div><fa :icon="faUsers" fixed-width/><i18n path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
-			<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+			<div>
+				<Fa :icon="faUsers" fixed-width/>
+				<i18n-t keypath="_channel.usersCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.usersCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
+			<div>
+				<Fa :icon="faPencilAlt" fixed-width/>
+				<i18n-t keypath="_channel.notesCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.notesCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
 		</div>
 	</div>
 	<article v-if="channel.description">
 		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
 	</article>
 	<footer>
-		<span>
-			{{ $t('updatedAt') }}: <mk-time :time="channel.lastNotedAt"/>
+		<span v-if="channel.lastNotedAt">
+			{{ $t('updatedAt') }}: <MkTime :time="channel.lastNotedAt"/>
 		</span>
 	</footer>
 </router-link>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -44,7 +58,6 @@ export default Vue.extend({
 	display: block;
 	overflow: hidden;
 	width: 100%;
-	border: 1px solid var(--divider);
 
 	&:hover {
 		text-decoration: none;

src/client/components/code-core.vue

@@ -1,13 +1,14 @@
 <template>
-<x-prism :inline="inline" :language="prismLang">{{ code }}</x-prism>
+<XPrism :inline="inline" :language="prismLang">{{ code }}</XPrism>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
-import XPrism from 'vue-prism-component';
-export default Vue.extend({
+import XPrism from 'vue-prism-component';import * as os from '@/os';
+
+export default defineComponent({
 	components: {
 		XPrism
 	},

src/client/components/code.vue

@@ -1,12 +1,13 @@
 <template>
-<x-code :code="code" :lang="lang" :inline="inline"/>
+<XCode :code="code" :lang="lang" :inline="inline"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';
+
+export default defineComponent({
 	components: {
-		XCode: () => import('./code-core.vue').then(m => m.default)
+		XCode: defineAsyncComponent(() => import('./code-core.vue'))
 	},
 	props: {
 		code: {

src/client/components/cw-button.vue

@@ -1,16 +1,16 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh _button" @click="toggle">
-	<b>{{ value ? this.$t('_cw.hide') : this.$t('_cw.show') }}</b>
-	<span v-if="!value">{{ this.label }}</span>
+<button class="nrvgflfu _button" @click="toggle">
+	<b>{{ value ? $t('_cw.hide') : $t('_cw.show') }}</b>
+	<span v-if="!value">{{ label }}</span>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
@@ -36,14 +36,14 @@ export default Vue.extend({
 		length,
 
 		toggle() {
-			this.$emit('input', !this.value);
+			this.$emit('update:value', !this.value);
 		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.nrvgflfuaxwgkxoynpnumyookecqrrvh {
+.nrvgflfu {
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.7em;

src/client/components/date-separated-list.vue

@@ -1,22 +1,22 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<transition-group class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item"></slot>
 		<div class="separator" v-if="showDate(i, item)" :key="item.id + '_date'">
 			<p class="date">
-				<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
-				<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
+				<span><Fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
+				<span>{{ getDateText(items[i + 1].createdAt) }}<Fa class="icon" :icon="faAngleDown"/></span>
 			</p>
 		</div>
 	</template>
-</component>
+</transition-group>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,
@@ -82,14 +82,14 @@ export default Vue.extend({
 	}
 
 	&[data-direction="up"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(64px);
 		}
 	}
 
 	&[data-direction="down"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(-64px);
 		}

src/client/components/deck/antenna-column.vue

@@ -1,20 +1,21 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<Fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<x-timeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
-</x-column>
+	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
 
 	methods: {
 		async setAntenna() {
-			const antennas = await this.$root.api('antennas/list');
-			const { canceled, result: antenna } = await this.$root.dialog({
+			const antennas = await os.api('antennas/list');
+			const { canceled, result: antenna } = await os.dialog({
 				title: this.$t('selectAntenna'),
 				type: null,
 				select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			Vue.set(this.column, 'antennaId', antenna.id);
+			this.column.antennaId = antenna.id;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 

src/client/components/deck/column-core.vue

@@ -1,17 +1,17 @@
 <template>
 <!-- TODO: リファクタの余地がありそう -->
-<x-widgets-column v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-notifications-column v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-tl-column v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-list-column v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-antenna-column v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<!-- TODO: <x-tl-column v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
-<x-mentions-column v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
-<x-direct-column v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XWidgetsColumn v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<!-- TODO: <XTlColumn v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
 import XListColumn from './list-column.vue';
@@ -20,7 +20,7 @@ import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XTlColumn,
 		XAntennaColumn,

src/client/components/deck/column.vue

@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section class="dnpfarvg _panel _narrow_" :class="{ naked, paged: isMainColumn, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+<section class="dnpfarvg _panel _narrow_" :class="{ paged: isMainColumn, naked, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -15,15 +15,14 @@
 		@contextmenu.prevent.stop="onContextmenu"
 	>
 		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
-			<template v-if="active"><fa :icon="faAngleUp"/></template>
-			<template v-else><fa :icon="faAngleDown"/></template>
+			<template v-if="active"><Fa :icon="faAngleUp"/></template>
+			<template v-else><Fa :icon="faAngleDown"/></template>
 		</button>
 		<div class="action">
 			<slot name="action"></slot>
 		</div>
 		<span class="header"><slot name="header"></slot></span>
-		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><fa :icon="faCaretDown"/></button>
-		<button v-else-if="$route.name !== 'index'" class="close _button" @click.stop="close"><fa :icon="faTimes"/></button>
+		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><Fa :icon="faCaretDown"/></button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -32,11 +31,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		column: {
 			type: Object,
@@ -71,7 +71,7 @@ export default Vue.extend({
 			dragging: false,
 			draghover: false,
 			dropready: false,
-			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes,
+			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown,
 		};
 	},
 
@@ -86,10 +86,10 @@ export default Vue.extend({
 
 		keymap(): any {
 			return {
-				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
-				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
-				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
-				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+				'shift+up': () => this.$parent.$emit('parent-focus', 'up'),
+				'shift+down': () => this.$parent.$emit('parent-focus', 'down'),
+				'shift+left': () => this.$parent.$emit('parent-focus', 'left'),
+				'shift+right': () => this.$parent.$emit('parent-focus', 'right'),
 			};
 		}
 	},
@@ -100,21 +100,21 @@ export default Vue.extend({
 		},
 
 		dragging(v) {
-			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+			os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd');
 		}
 	},
 
 	mounted() {
 		if (!this.isMainColumn) {
-			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.on('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.on('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (!this.isMainColumn) {
-			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
-			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+			os.deckGlobalEvents.off('column.dragStart', this.onOtherDragStart);
+			os.deckGlobalEvents.off('column.dragEnd', this.onOtherDragEnd);
 		}
 	},
 
@@ -137,7 +137,7 @@ export default Vue.extend({
 				icon: faPencilAlt,
 				text: this.$t('rename'),
 				action: () => {
-					this.$root.dialog({
+					os.dialog({
 						title: this.$t('rename'),
 						input: {
 							default: this.column.name,
@@ -207,14 +207,7 @@ export default Vue.extend({
 		},
 
 		showMenu() {
-			this.$root.menu({
-				items: this.getMenu(),
-				source: this.$refs.menu,
-			});
-		},
-
-		close() {
-			this.$router.push('/');
+			os.modalMenu(this.getMenu(), this.$refs.menu);
 		},
 
 		goTop() {
@@ -232,7 +225,7 @@ export default Vue.extend({
 			}
 
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			e.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, this.column.id);
 			this.dragging = true;
 		},
 
@@ -254,7 +247,7 @@ export default Vue.extend({
 				return;
 			}
 
-			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+			const isDeckColumn = e.dataTransfer.types[0] == _DATA_TRANSFER_DECK_COLUMN_;
 
 			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
 
@@ -267,9 +260,9 @@ export default Vue.extend({
 
 		onDrop(e) {
 			this.draghover = false;
-			this.$root.$emit('deck.column.dragEnd');
+			os.deckGlobalEvents.emit('column.dragEnd');
 
-			const id = e.dataTransfer.getData('mk-deck-column');
+			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
 			if (id != null && id != '') {
 				this.$store.commit('deviceUser/swapDeckColumn', {
 					a: this.column.id,
@@ -285,9 +278,11 @@ export default Vue.extend({
 .dnpfarvg {
 	$header-height: 42px;
 
+	--section-padding: 10px;
+
 	height: 100%;
 	overflow: hidden;
-	box-shadow: 0 0 0 1px var(--deckColumnBorder);
+	contain: content;
 
 	&.draghover {
 		box-shadow: 0 0 0 2px var(--focus);
@@ -341,7 +336,6 @@ export default Vue.extend({
 	&.paged {
 		> div {
 			background: var(--bg);
-			padding: var(--margin);
 		}
 	}
 
@@ -379,8 +373,7 @@ export default Vue.extend({
 
 		> .toggleActive,
 		> .action > *,
-		> .menu,
-		> .close {
+		> .menu {
 			z-index: 1;
 			width: $header-height;
 			line-height: $header-height;
@@ -408,8 +401,7 @@ export default Vue.extend({
 			display: none;
 		}
 
-		> .menu,
-		> .close {
+		> .menu {
 			margin-left: auto;
 			margin-right: -16px;
 		}

src/client/components/deck/direct-column.vue

@@ -1,19 +1,20 @@
 <template>
-<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotes

src/client/components/deck/list-column.vue

@@ -1,20 +1,21 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked">
 	<template #header>
-		<fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+		<Fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<x-timeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
-</x-column>
+	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -59,8 +60,8 @@ export default Vue.extend({
 
 	methods: {
 		async setList() {
-			const lists = await this.$root.api('users/lists/list');
-			const { canceled, result: list } = await this.$root.dialog({
+			const lists = await os.api('users/lists/list');
+			const { canceled, result: list } = await os.dialog({
 				title: this.$t('selectList'),
 				type: null,
 				select: {
@@ -72,7 +73,7 @@ export default Vue.extend({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			Vue.set(this.column, 'listId', list.id);
+			this.column.listId = list.id;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 

src/client/components/deck/mentions-column.vue

@@ -1,19 +1,20 @@
 <template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notes :pagination="pagination" @before="before()" @after="after()"/>
-</x-column>
+	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
-import Progress from '../../scripts/loading';
+import Progress from '@/scripts/loading';
 import XColumn from './column.vue';
 import XNotes from '../notes.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotes

src/client/components/deck/notifications-column.vue

@@ -1,19 +1,20 @@
 <template>
-<x-column :column="column" :is-stacked="isStacked" :menu="menu">
-	<template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><Fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
 
-	<x-notifications :include-types="column.includingTypes"/>
-</x-column>
+	<XNotifications :include-types="column.includingTypes"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '../notifications.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotifications
@@ -42,12 +43,17 @@ export default Vue.extend({
 			icon: faCog,
 			text: this.$t('notificationSetting'),
 			action: async () => {
-				this.$root.new(await import('../notification-setting-window.vue').then(m => m.default), {
+				os.popup(await import('@/components/notification-setting-window.vue'), {
 					includingTypes: this.column.includingTypes,
-				}).$on('ok', async ({ includingTypes }) => {
-					this.$set(this.column, 'includingTypes', includingTypes);
-					this.$store.commit('deviceUser/updateDeckColumn', this.column);
-				});
+				}, {
+					done: async (res) => {
+						const { includingTypes } = res;
+						this.$store.commit('deviceUser/updateDeckColumn', {
+							...this.column,
+							includingTypes: includingTypes
+						});
+					},
+				}, 'closed');
 			}
 		}];
 	},

src/client/components/deck/tl-column.vue

@@ -1,31 +1,32 @@
 <template>
-<x-column :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
 	<template #header>
-		<fa v-if="column.tl === 'home'" :icon="faHome"/>
-		<fa v-else-if="column.tl === 'local'" :icon="faComments"/>
-		<fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
-		<fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+		<Fa v-if="column.tl === 'home'" :icon="faHome"/>
+		<Fa v-else-if="column.tl === 'local'" :icon="faComments"/>
+		<Fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
+		<Fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div class="iwaalbte" v-if="disabled">
 		<p>
-			<fa :icon="faMinusCircle"/>
+			<Fa :icon="faMinusCircle"/>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 	</div>
-	<x-timeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
-</x-column>
+	<XTimeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,
@@ -78,7 +79,7 @@ export default Vue.extend({
 
 	methods: {
 		async setType() {
-			const { canceled, result: src } = await this.$root.dialog({
+			const { canceled, result: src } = await os.dialog({
 				title: this.$t('timeline'),
 				type: null,
 				select: {
@@ -99,7 +100,7 @@ export default Vue.extend({
 				}
 				return;
 			}
-			Vue.set(this.column, 'tl', src);
+			this.column.tl = src;
 			this.$store.commit('deviceUser/updateDeckColumn', this.column);
 		},
 

src/client/components/deck/widgets-column.vue

@@ -1,47 +1,46 @@
 <template>
-<x-column :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
-	<template #header><fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
+<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
+	<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
 		<template v-if="edit">
 			<header>
-				<mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
+				<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
 					<template #label>{{ $t('selectWidget') }}</template>
 					<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
-				</mk-select>
-				<mk-button inline @click="addWidget" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
-				<mk-button inline @click="edit = false">{{ $t('close') }}</mk-button>
+				</MkSelect>
+				<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $t('add') }}</MkButton>
+				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
 			</header>
-			<x-draggable
+			<XDraggable
 				:list="column.widgets"
 				animation="150"
 				@sort="onWidgetSort"
 			>
 				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><fa :icon="faTimes"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :column="column"/>
+					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
 				</div>
-			</x-draggable>
+			</XDraggable>
 		</template>
-		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :column="column"/>
+		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
 	</div>
-</x-column>
+</XColumn>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
-import MkSelect from '../../components/ui/select.vue';
-import MkButton from '../../components/ui/button.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkButton from '@/components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable,
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
 		MkSelect,
 		MkButton,
 	},
@@ -63,6 +62,7 @@ export default Vue.extend({
 			menu: null,
 			widgetAdderSelected: null,
 			widgets,
+			settings: {},
 			faWindowMaximize, faTimes, faPlus
 		};
 	},
@@ -79,7 +79,7 @@ export default Vue.extend({
 
 	methods: {
 		widgetFunc(id) {
-			this.$refs[id][0].setting();
+			this.settings[id]();
 		},
 
 		onWidgetSort() {

src/client/components/dialog.vue

@@ -1,69 +1,60 @@
 <template>
-<div class="mk-dialog" :class="{ iconOnly }">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
-		<div class="main" ref="main" v-if="show">
-			<template v-if="type == 'signin'">
-				<mk-signin/>
+<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+	<div class="mk-dialog">
+		<div class="icon" v-if="icon">
+			<Fa :icon="icon"/>
+		</div>
+		<div class="icon" v-else-if="!input && !select && !user" :class="type">
+			<Fa :icon="faCheck" v-if="type === 'success'"/>
+			<Fa :icon="faTimesCircle" v-if="type === 'error'"/>
+			<Fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
+			<Fa :icon="faInfoCircle" v-if="type === 'info'"/>
+			<Fa :icon="faQuestionCircle" v-if="type === 'question'"/>
+			<Fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
+		</div>
+		<header v-if="title" v-html="title"></header>
+		<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
+		<div class="body" v-if="text" v-html="text"></div>
+		<MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
+		<MkInput v-if="user" v-model:value="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></MkInput>
+		<MkSelect v-if="select" v-model:value="selectedValue" autofocus>
+			<template v-if="select.items">
+				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>
 			<template v-else>
-				<div class="icon" v-if="icon">
-					<fa :icon="icon"/>
-				</div>
-				<div class="icon" v-else-if="!input && !select && !user" :class="type">
-					<fa :icon="faCheck" v-if="type === 'success'"/>
-					<fa :icon="faTimesCircle" v-if="type === 'error'"/>
-					<fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
-					<fa :icon="faInfoCircle" v-if="type === 'info'"/>
-					<fa :icon="faQuestionCircle" v-if="type === 'question'"/>
-					<fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
-				</div>
-				<header v-if="title" v-html="title"></header>
-				<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
-				<div class="body" v-if="text" v-html="text"></div>
-				<mk-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
-				<mk-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
-				<mk-select v-if="select" v-model="selectedValue" autofocus>
-					<template v-if="select.items">
-						<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
-					</template>
-					<template v-else>
-						<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-							<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
-						</optgroup>
-					</template>
-				</mk-select>
-				<div class="buttons" v-if="!iconOnly && (showOkButton || showCancelButton) && !actions">
-					<mk-button inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</mk-button>
-					<mk-button inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</mk-button>
-				</div>
-				<div class="buttons" v-if="actions">
-					<mk-button v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</mk-button>
-				</div>
+				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
+					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+				</optgroup>
 			</template>
+		</MkSelect>
+		<div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
+			<MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</MkButton>
+			<MkButton inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</MkButton>
 		</div>
-	</transition>
-</div>
+		<div class="buttons" v-if="actions">
+			<MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
+		</div>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import MkButton from './ui/button.vue';
-import MkInput from './ui/input.vue';
-import MkSelect from './ui/select.vue';
-import MkSignin from './signin.vue';
+import MkModal from '@/components/ui/modal.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSelect from '@/components/ui/select.vue';
 import parseAcct from '../../misc/acct/parse';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
+		MkModal,
 		MkButton,
 		MkInput,
 		MkSelect,
-		MkSignin,
 	},
 
 	props: {
@@ -107,19 +98,12 @@ export default Vue.extend({
 			type: Boolean,
 			default: true
 		},
-		iconOnly: {
-			type: Boolean,
-			default: false
-		},
-		autoClose: {
-			type: Boolean,
-			default: false
-		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
-			show: true,
 			inputValue: this.input && this.input.default ? this.input.default : null,
 			userInputValue: null,
 			selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
@@ -131,63 +115,51 @@ export default Vue.extend({
 	watch: {
 		userInputValue() {
 			if (this.user) {
-				this.$root.api('users/show', parseAcct(this.userInputValue)).then(u => {
+				os.api('users/show', parseAcct(this.userInputValue)).then(u => {
 					this.canOk = u != null;
 				}).catch(() => {
 					this.canOk = false;
 				});
 			}
-		}
+		},
 	},
 
 	mounted() {
 		if (this.user) this.canOk = false;
 
-		if (this.autoClose) {
-			setTimeout(() => {
-				this.close();
-			}, 1000);
-		}
-
 		document.addEventListener('keydown', this.onKeydown);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('keydown', this.onKeydown);
 	},
 
 	methods: {
+		done(canceled, result?) {
+			this.$emit('done', { canceled, result });
+			this.$refs.modal.close();
+		},
+
 		async ok() {
 			if (!this.canOk) return;
 			if (!this.showOkButton) return;
 
 			if (this.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
+				const user = await os.api('users/show', parseAcct(this.userInputValue));
 				if (user) {
-					this.$emit('ok', user);
-					this.close();
+					this.done(false, user);
 				}
 			} else {
 				const result =
 					this.input ? this.inputValue :
 					this.select ? this.selectedValue :
 					true;
-				this.$emit('ok', result);
-				this.close();
+				this.done(false, result);
 			}
 		},
 
 		cancel() {
-			this.$emit('cancel');
-			this.close();
-		},
-
-		close() {
-			if (!this.show) return;
-			this.show = false;
-			this.$el.style.pointerEvents = 'none';
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.main as any).style.pointerEvents = 'none';
+			this.done(true);
 		},
 
 		onBgClick() {
@@ -214,95 +186,60 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-.dialog-enter-active, .dialog-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.dialog-enter, .dialog-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
 .mk-dialog {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: fixed;
-	z-index: 30000;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
 
-	&.iconOnly > .main {
-		min-width: 0;
-		width: initial;
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--accent);
+		}
+
+		&.error {
+			color: #ec4137;
+		}
+
+		&.warning {
+			color: #ecb637;
+		}
+
+		> * {
+			display: block;
+			margin: 0 auto;
+		}
+
+		& + header {
+			margin-top: 16px;
+		}
 	}
 
-	> .main {
-		display: block;
-		position: fixed;
-		margin: auto;
-		padding: 32px;
-		min-width: 320px;
-		max-width: 480px;
-		box-sizing: border-box;
-		width: calc(100% - 32px);
-		text-align: center;
-		background: var(--panel);
-		border-radius: var(--radius);
+	> header {
+		margin: 0 0 8px 0;
+		font-weight: bold;
+		font-size: 20px;
 
-		> .icon {
-			font-size: 32px;
-
-			&.success {
-				color: var(--accent);
-			}
-
-			&.error {
-				color: #ec4137;
-			}
-
-			&.warning {
-				color: #ecb637;
-			}
-
-			> * {
-				display: block;
-				margin: 0 auto;
-			}
-
-			& + header {
-				margin-top: 16px;
-			}
+		& + .body {
+			margin-top: 8px;
 		}
+	}
 
-		> header {
-			margin: 0 0 8px 0;
-			font-weight: bold;
-			font-size: 20px;
+	> .body {
+		margin: 16px 0 0 0;
+	}
 
-			& + .body {
-				margin-top: 8px;
-			}
-		}
+	> .buttons {
+		margin-top: 16px;
 
-		> .body {
-			margin: 16px 0 0 0;
-		}
-
-		> .buttons {
-			margin-top: 16px;
-
-			> * {
-				margin: 0 8px;
-			}
+		> * {
+			margin: 0 8px;
 		}
 	}
 }

src/client/components/drive-file-thumbnail.vue

@@ -1,20 +1,20 @@
 <template>
 <div class="zdjebgpv" ref="thumbnail">
-	<img-with-blurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
-	<fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
-	<fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
-	<fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
-	<fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
-	<fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
-	<fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
-	<fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
-	<fa :icon="faFile" class="icon" v-else/>
-	<fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
+	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
+	<Fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
+	<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
+	<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
+	<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
+	<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
+	<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
+	<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
+	<Fa :icon="faFile" class="icon" v-else/>
+	<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	faFile,
 	faFileAlt,
@@ -28,7 +28,7 @@ import {
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},

src/client/components/drive-window.vue

@@ -1,31 +1,41 @@
 <template>
-<x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
+<XModalWindow ref="dialog"
+	:width="800"
+	:height="500"
+	:with-ok-button="true"
+	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
 	<template #header>
 		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span>
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
 	<div>
-		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
+		<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
 	</div>
-</x-window>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
-import XWindow from './window.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import number from '@/filters/number';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDrive,
-		XWindow,
+		XModalWindow,
 	},
 
 	props: {
 		type: {
 			type: String,
 			required: false,
-			default: 'file' 
+			default: 'file'
 		},
 		multiple: {
 			type: Boolean,
@@ -33,6 +43,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			selected: []
@@ -41,13 +53,20 @@ export default Vue.extend({
 
 	methods: {
 		ok() {
-			this.$emit('selected', this.selected);
-			this.$refs.window.close();
+			this.$emit('done', this.selected);
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('done');
+			this.$refs.dialog.close();
 		},
 
 		onChangeSelection(xs) {
 			this.selected = xs;
-		}
+		},
+
+		number
 	}
 });
 </script>

src/client/components/drive.file.vue

@@ -1,7 +1,8 @@
 <template>
 <div class="ncvczrfv"
-	:data-is-selected="isSelected"
+	:class="{ isSelected }"
 	@click="onClick"
+	@contextmenu.stop="onContextmenu"
 	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
@@ -20,7 +21,7 @@
 		<p>{{ $t('nsfw') }}</p>
 	</div>
 
-	<x-file-thumbnail class="thumbnail" :file="file" fit="contain"/>
+	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 
 	<p class="name">
 		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
@@ -30,17 +31,17 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-//import updateAvatar from '../api/update-avatar';
-//import updateBanner from '../api/update-banner';
-import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import bytes from '../filters/bytes';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XFileThumbnail
+		MkDriveFileThumbnail
 	},
 
 	props: {
@@ -60,6 +61,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['chosen'],
+
 	data() {
 		return {
 			isDragging: false
@@ -72,48 +75,54 @@ export default Vue.extend({
 			return this.$parent;
 		},
 		title(): string {
-			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.size)}`;
+			return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
 		}
 	},
 
 	methods: {
+		getMenu() {
+			return [{
+				text: this.$t('rename'),
+				icon: faICursor,
+				action: this.rename
+			}, {
+				text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
+				icon: this.file.isSensitive ? faEye : faEyeSlash,
+				action: this.toggleSensitive
+			}, null, {
+				text: this.$t('copyUrl'),
+				icon: faLink,
+				action: this.copyUrl
+			}, {
+				type: 'a',
+				href: this.file.url,
+				target: '_blank',
+				text: this.$t('download'),
+				icon: faDownload,
+				download: this.file.name
+			}, null, {
+				text: this.$t('delete'),
+				icon: faTrashAlt,
+				danger: true,
+				action: this.deleteFile
+			}];
+		},
+
 		onClick(ev) {
 			if (this.selectMode) {
 				this.$emit('chosen', this.file);
 			} else {
-				this.$root.menu({
-					items: [{
-						text: this.$t('rename'),
-						icon: faICursor,
-						action: this.rename
-					}, {
-						text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
-						icon: this.file.isSensitive ? faEye : faEyeSlash,
-						action: this.toggleSensitive
-					}, null, {
-						text: this.$t('copyUrl'),
-						icon: faLink,
-						action: this.copyUrl
-					}, {
-						type: 'a',
-						href: this.file.url,
-						target: '_blank',
-						text: this.$t('download'),
-						icon: faDownload,
-						download: this.file.name
-					}, null, {
-						text: this.$t('delete'),
-						icon: faTrashAlt,
-						action: this.deleteFile
-					}],
-					source: ev.currentTarget || ev.target,
-				});
+				os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
 			}
 		},
 
+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
+
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_file', JSON.stringify(this.file));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(this.file));
 			this.isDragging = true;
 
 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -127,7 +136,7 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFile'),
 				input: {
 					placeholder: this.$t('inputNewFileName'),
@@ -136,7 +145,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: this.file.id,
 					name: name
 				});
@@ -144,7 +153,7 @@ export default Vue.extend({
 		},
 
 		toggleSensitive() {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: this.file.id,
 				isSensitive: !this.file.isSensitive
 			});
@@ -152,18 +161,15 @@ export default Vue.extend({
 
 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		setAsAvatar() {
-			updateAvatar(this.$root)(this.file);
+			os.updateAvatar(this.file);
 		},
 
 		setAsBanner() {
-			updateBanner(this.$root)(this.file);
+			os.updateBanner(this.file);
 		},
 
 		addApp() {
@@ -171,17 +177,19 @@ export default Vue.extend({
 		},
 
 		async deleteFile() {
-			const { canceled } = await this.$root.dialog({
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;
 
-			this.$root.api('drive/files/delete', {
+			os.api('drive/files/delete', {
 				fileId: this.file.id
 			});
-		}
+		},
+
+		bytes
 	}
 });
 </script>
@@ -197,6 +205,10 @@ export default Vue.extend({
 		cursor: pointer;
 	}
 
+	> * {
+		pointer-events: none;
+	}
+
 	&:hover {
 		background: rgba(#000, 0.05);
 
@@ -233,7 +245,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-is-selected] {
+	&.isSelected {
 		background: var(--accent);
 
 		&:hover {

src/client/components/drive.folder.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="rghtznwe"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@mouseover="onMouseover"
 	@mouseout="onMouseout"
@@ -14,8 +14,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover"><fa :icon="faFolderOpen" fixed-width/></template>
-		<template v-if="!hover"><fa :icon="faFolder" fixed-width/></template>
+		<template v-if="hover"><Fa :icon="faFolderOpen" fixed-width/></template>
+		<template v-if="!hover"><Fa :icon="faFolder" fixed-width/></template>
 		{{ folder.name }}
 	</p>
 	<p class="upload" v-if="$store.state.settings.uploadFolder == folder.id">
@@ -26,10 +26,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -47,6 +48,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['chosen'],
+
 	data() {
 		return {
 			hover: false,
@@ -91,8 +94,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -121,11 +124,11 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder.id
 				});
@@ -133,7 +136,7 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 
@@ -141,7 +144,7 @@ export default Vue.extend({
 				if (folder.id == this.folder.id) return;
 
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder.id
 				}).then(() => {
@@ -149,15 +152,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -167,7 +170,7 @@ export default Vue.extend({
 
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_folder', JSON.stringify(this.folder));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(this.folder));
 			this.isDragging = true;
 
 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -189,7 +192,7 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -197,7 +200,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: this.folder.id,
 					name: name
 				});
@@ -205,7 +208,7 @@ export default Vue.extend({
 		},
 
 		deleteFolder() {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: this.folder.id
 			}).then(() => {
 				if (this.$store.state.settings.uploadFolder === this.folder.id) {
@@ -217,14 +220,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -272,7 +275,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-draghover] {
+	&.draghover {
 		&:after {
 			content: "";
 			pointer-events: none;

src/client/components/drive.nav-folder.vue

@@ -1,22 +1,23 @@
 <template>
 <div class="drylbebk"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null"><fa :icon="faCloud"/></i>
+	<i v-if="folder == null"><Fa :icon="faCloud"/></i>
 	<span>{{ folder == null ? $t('drive') : folder.name }}</span>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -58,8 +59,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -90,11 +91,11 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -102,13 +103,13 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 				// 移動先が自分自身ならreject
 				if (this.folder && folder.id == this.folder.id) return;
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				});
@@ -125,7 +126,7 @@ export default Vue.extend({
 		pointer-events: none;
 	}
 
-	&[data-draghover] {
+	&.draghover {
 		background: #eee;
 	}
 

src/client/components/drive.vue

@@ -2,34 +2,35 @@
 <div class="yfudmmck">
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<x-nav-folder :class="{ current: folder == null }"/>
+			<XNavFolder :class="{ current: folder == null }"/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
-				<x-nav-folder :folder="f" :key="f.id"/>
+				<span class="separator"><Fa :icon="faAngleRight"/></span>
+				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><fa :icon="faAngleRight"/></span>
+			<span class="separator" v-if="folder != null"><Fa :icon="faAngleRight"/></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
-	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
+	<div class="main _section" :class="{ uploading: uploadings.length > 0, fetching }"
 		ref="main"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
+		@contextmenu="onContextmenu"
 	>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
-				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
+				<XFolder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="files" ref="filesContainer" v-show="files.length > 0">
-				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
+				<XFile v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
@@ -37,29 +38,28 @@
 				<p v-if="!draghover && folder != null">{{ $t('emptyFolder') }}</p>
 			</div>
 		</div>
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 	</div>
 	<div class="dropzone" v-if="draghover"></div>
-	<x-uploader ref="uploader" @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/>
 	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faAngleRight, faFolderPlus, faICursor, faLink, faUpload } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
-import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNavFolder,
 		XFolder,
 		XFile,
-		XUploader,
 		MkButton,
 	},
 
@@ -85,6 +85,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['selected', 'change-selection', 'move-root', 'cd', 'open-folder'],
+
 	data() {
 		return {
 			/**
@@ -100,7 +102,7 @@ export default Vue.extend({
 			hierarchyFolders: [],
 			selectedFiles: [],
 			selectedFolders: [],
-			uploadings: [],
+			uploadings: os.uploads,
 			connection: null,
 
 			/**
@@ -140,7 +142,7 @@ export default Vue.extend({
 			});
 		}
 
-		this.connection = this.$root.stream.useSharedConnection('drive');
+		this.connection = os.stream.useSharedConnection('drive');
 
 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
 		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
@@ -164,7 +166,7 @@ export default Vue.extend({
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 		this.ilFilesObserver.disconnect();
 	},
@@ -204,14 +206,6 @@ export default Vue.extend({
 			this.removeFolder(folderId);
 		},
 
-		onChangeUploaderUploads(uploads) {
-			this.uploadings = uploads;
-		},
-
-		onUploaderUploaded(file) {
-			this.addFile(file, true);
-		},
-
 		onDragover(e): any {
 			// ドラッグ元が自分自身の所有するアイテムだったら
 			if (this.isDragSource) {
@@ -221,8 +215,8 @@ export default Vue.extend({
 			}
 
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
 
 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -253,12 +247,12 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				if (this.files.some(f => f.id == file.id)) return;
 				this.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -266,7 +260,7 @@ export default Vue.extend({
 			//#endregion
 
 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 
@@ -274,7 +268,7 @@ export default Vue.extend({
 				if (this.folder && folder.id == this.folder.id) return false;
 				if (this.folders.some(f => f.id == folder.id)) return false;
 				this.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				}).then(() => {
@@ -282,15 +276,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -303,19 +297,19 @@ export default Vue.extend({
 		},
 
 		urlUpload() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('uploadFromUrl'),
 				input: {
 					placeholder: this.$t('uploadFromUrlDescription')
 				}
 			}).then(({ canceled, result: url }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/upload_from_url', {
+				os.api('drive/files/upload_from_url', {
 					url: url,
 					folderId: this.folder ? this.folder.id : undefined
 				});
 
-				this.$root.dialog({
+				os.dialog({
 					title: this.$t('uploadFromUrlRequested'),
 					text: this.$t('uploadFromUrlMayTakeTime')
 				});
@@ -323,14 +317,14 @@ export default Vue.extend({
 		},
 
 		createFolder() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('createFolder'),
 				input: {
 					placeholder: this.$t('folderName')
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/create', {
+				os.api('drive/folders/create', {
 					name: name,
 					parentId: this.folder ? this.folder.id : undefined
 				}).then(folder => {
@@ -340,7 +334,7 @@ export default Vue.extend({
 		},
 
 		renameFolder(folder) {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -348,7 +342,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					name: name
 				}).then(folder => {
@@ -359,7 +353,7 @@ export default Vue.extend({
 		},
 
 		deleteFolder(folder) {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: folder.id
 			}).then(() => {
 				// 削除時に親フォルダに移動
@@ -367,14 +361,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -390,7 +384,9 @@ export default Vue.extend({
 
 		upload(file, folder) {
 			if (folder && typeof folder == 'object') folder = folder.id;
-			(this.$refs.uploader as any).upload(file, folder);
+			os.upload(file, folder).then(res => {
+				this.addFile(res, true);
+			});
 		},
 
 		chooseFile(file) {
@@ -441,7 +437,7 @@ export default Vue.extend({
 
 			this.fetching = true;
 
-			this.$root.api('drive/folders/show', {
+			os.api('drive/folders/show', {
 				folderId: target
 			}).then(folder => {
 				this.folder = folder;
@@ -465,7 +461,7 @@ export default Vue.extend({
 
 			if (this.folders.some(f => f.id == folder.id)) {
 				const exist = this.folders.map(f => f.id).indexOf(folder.id);
-				Vue.set(this.folders, exist, folder);
+				this.folders[exist] = folder;
 				return;
 			}
 
@@ -482,7 +478,7 @@ export default Vue.extend({
 
 			if (this.files.some(f => f.id == file.id)) {
 				const exist = this.files.map(f => f.id).indexOf(file.id);
-				Vue.set(this.files, exist, file);
+				this.files[exist] = file;
 				return;
 			}
 
@@ -543,7 +539,7 @@ export default Vue.extend({
 			const filesMax = 30;
 
 			// フォルダ一覧取得
-			this.$root.api('drive/folders', {
+			os.api('drive/folders', {
 				folderId: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -556,7 +552,7 @@ export default Vue.extend({
 			});
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				limit: filesMax + 1
@@ -587,7 +583,7 @@ export default Vue.extend({
 			const max = 30;
 
 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				untilId: this.files[this.files.length - 1].id,
@@ -602,7 +598,41 @@ export default Vue.extend({
 				for (const x of files) this.appendFile(x);
 				this.fetching = false;
 			});
-		}
+		},
+
+		getMenu() {
+			return [{
+				text: this.$t('addFile'),
+				type: 'label'
+			}, {
+				text: this.$t('upload'),
+				icon: faUpload,
+				action: () => { this.selectLocalFile(); }
+			}, {
+				text: this.$t('fromUrl'),
+				icon: faLink,
+				action: () => { this.urlUpload(); }
+			}, null, {
+				text: this.folder ? this.folder.name : this.$t('drive'),
+				type: 'label'
+			}, this.folder ? {
+				text: this.$t('renameFolder'),
+				icon: faICursor,
+				action: () => { this.renameFolder(this.folder); }
+			} : undefined, this.folder ? {
+				text: this.$t('deleteFolder'),
+				icon: faTrashAlt,
+				action: () => { this.deleteFolder(this.folder); }
+			} : undefined, {
+				text: this.$t('createFolder'),
+				icon: faFolderPlus,
+				action: () => { this.createFolder(); }
+			}];
+		},
+
+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
 	}
 });
 </script>
@@ -613,6 +643,8 @@ export default Vue.extend({
 		display: block;
 		z-index: 2;
 		width: 100%;
+		padding: 0 8px;
+		box-sizing: border-box;
 		overflow: auto;
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
@@ -666,7 +698,6 @@ export default Vue.extend({
 	}
 
 	> .main {
-		padding: 8px 0;
 		overflow: auto;
 
 		&, * {
@@ -734,11 +765,6 @@ export default Vue.extend({
 		pointer-events: none;
 	}
 
-	> .mk-uploader {
-		height: 100px;
-		padding: 16px;
-	}
-
 	> input {
 		display: none;
 	}

src/client/components/emoji-picker.vue

@@ -1,6 +1,6 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="omfetrab">
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="omfetrab _popup">
 		<header>
 			<button v-for="(category, i) in categories"
 				class="_button"
@@ -8,26 +8,26 @@
 				:class="{ active: category.isActive }"
 				:key="i"
 			>
-				<fa :icon="category.icon" fixed-width/>
+				<Fa :icon="category.icon" fixed-width/>
 			</button>
 		</header>
 
 		<div class="emojis">
 			<template v-if="categories[0].isActive">
-				<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+				<header class="category"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
 				<div class="list">
-					<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+					<button v-for="emoji in ($store.state.device.recentEmojis || [])"
 						class="_button"
 						:title="emoji.name"
 						@click="chosen(emoji)"
-						:key="i"
+						:key="emoji"
 					>
-						<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+						<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
 						<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 					</button>
 				</div>
 
-				<header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
+				<header class="category"><Fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
 			</template>
 
 			<template v-if="categories.find(x => x.isActive).name">
@@ -38,7 +38,7 @@
 						@click="chosen(emoji)"
 						:key="emoji.name"
 					>
-						<mk-emoji :emoji="emoji.char"/>
+						<MkEmoji :emoji="emoji.char"/>
 					</button>
 				</div>
 			</template>
@@ -59,29 +59,31 @@
 			</template>
 		</div>
 	</div>
-</x-popup>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
-import XPopup from './popup.vue';
+import MkModal from '@/components/ui/modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPopup,
+		MkModal,
 	},
 
 	props: {
-		source: {
-			required: true
+		src: {
+			required: false
 		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			emojilist,
@@ -162,12 +164,9 @@ export default Vue.extend({
 			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
 			recents.unshift(emoji)
 			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
-			this.$emit('chosen', getKey(emoji));
+			this.$emit('done', getKey(emoji));
+			this.$refs.modal.close();
 		},
-
-		close() {
-			this.$refs.popup.close();
-		}
 	}
 });
 </script>

src/client/components/emoji.vue

@@ -6,11 +6,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		name: {
 			type: String,

src/client/components/error.vue

@@ -1,19 +1,19 @@
 <template>
 <transition :name="$store.state.device.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg _panel">
+	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
-		<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
+		<p><Fa :icon="faExclamationTriangle"/> {{ $t('somethingHappened') }}</p>
+		<MkButton @click="() => $emit('retry')" class="button">{{ $t('retry') }}</MkButton>
 	</div>
 </transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},

src/client/components/file-type-icon.vue

@@ -1,14 +1,15 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><fa :icon="faFileImage"/></template>
+	<template v-if="kind == 'image'"><Fa :icon="faFileImage"/></template>
 </span>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

src/client/components/follow-button.vue

@@ -7,32 +7,33 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
+			<span v-if="full">{{ $t('followRequestPending') }}</span><Fa :icon="faHourglassHalf"/>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
+			<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse/>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('followRequest') }}</span><Fa :icon="faPlus"/>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -58,7 +59,7 @@ export default Vue.extend({
 	created() {
 		// 渡されたユーザー情報が不完全な場合
 		if (this.user.isFollowing == null) {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				userId: this.user.id
 			}).then(u => {
 				this.isFollowing = u.isFollowing;
@@ -68,13 +69,13 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 
 		this.connection.on('follow', this.onFollowChange);
 		this.connection.on('unfollow', this.onFollowChange);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},
 
@@ -91,7 +92,7 @@ export default Vue.extend({
 
 			try {
 				if (this.isFollowing) {
-					const { canceled } = await this.$root.dialog({
+					const { canceled } = await os.dialog({
 						type: 'warning',
 						text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
 						showCancelButton: true
@@ -99,21 +100,21 @@ export default Vue.extend({
 
 					if (canceled) return;
 
-					await this.$root.api('following/delete', {
+					await os.api('following/delete', {
 						userId: this.user.id
 					});
 				} else {
 					if (this.hasPendingFollowRequestFromYou) {
-						await this.$root.api('following/requests/cancel', {
+						await os.api('following/requests/cancel', {
 							userId: this.user.id
 						});
 					} else if (this.user.isLocked) {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
 					} else {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;

src/client/components/form-dialog.vue

@@ -1,41 +1,50 @@
 <template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
+<XModalWindow ref="dialog"
+	:width="400"
+	:can-close="false"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@click="cancel()"
+	@ok="ok()"
+	@close="cancel()"
+	@closed="$emit('closed')"
+>
 	<template #header>
 		{{ title }}
 	</template>
-	<div class="xkpnjxcv">
+	<div class="xkpnjxcv _section">
 		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
+			<MkInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text">
+			</MkInput>
+			<MkInput v-else-if="form[item].type === 'string' && !item.multiline" v-model:value="values[item]" type="text">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]">
+			</MkInput>
+			<MkTextarea v-else-if="form[item].type === 'string' && item.multiline" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-textarea>
-			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
+			</MkTextarea>
+			<MkSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-switch>
+			</MkSwitch>
 		</label>
 	</div>
-</x-window>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XWindow from './window.vue';
+import { defineComponent } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XWindow,
+		XModalWindow,
 		MkInput,
 		MkTextarea,
 		MkSwitch,
@@ -52,6 +61,8 @@ export default Vue.extend({
 		},
 	},
 
+	emits: ['done'],
+
 	data() {
 		return {
 			values: {}
@@ -60,15 +71,24 @@ export default Vue.extend({
 
 	created() {
 		for (const item in this.form) {
-			Vue.set(this.values, item, this.form[item].hasOwnProperty('default') ? this.form[item].default : null);
+			this.values[item] = this.form[item].hasOwnProperty('default') ? this.form[item].default : null;
 		}
 	},
 
 	methods: {
 		ok() {
-			this.$emit('ok', this.values);
-			this.$refs.window.close();
+			this.$emit('done', {
+				result: this.values
+			});
+			this.$refs.dialog.close();
 		},
+
+		cancel() {
+			this.$emit('done', {
+				canceled: true
+			});
+			this.$refs.dialog.close();
+		}
 	}
 });
 </script>
@@ -77,7 +97,10 @@ export default Vue.extend({
 .xkpnjxcv {
 	> label {
 		display: block;
-		padding: 16px 24px;
+
+		&:not(:last-child) {
+			margin-bottom: 32px;
+		}
 	}
 }
 </style>

src/client/components/formula-core.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as katex from 'katex';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+import * as katex from 'katex';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		formula: {
 			type: String,

src/client/components/formula.vue

@@ -1,12 +1,13 @@
 <template>
-<x-formula :formula="formula" :block="block" />
+<XFormula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	components: {
-		XFormula: () => import('./formula-core.vue').then(m => m.default)
+		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
 	},
 	props: {
 		formula: {

src/client/components/google.vue

@@ -1,15 +1,16 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
+	<button @click="search"><Fa :icon="faSearch"/> {{ $t('search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['q'],
 	data() {
 		return {
@@ -23,7 +24,7 @@ export default Vue.extend({
 	methods: {
 		search() {
 			const engine = this.$store.state.settings.webSearchEngine ||
-				'https://www.google.com/?#q={{query}}';
+				'https://www.google.com/search?q={{query}}';
 			const url = engine.replace('{{query}}', this.query)
 			window.open(url, '_blank');
 		}

src/client/components/header-clock.vue

@@ -8,16 +8,17 @@
 		</time>
 	</div>
 	<div class="content _panel _ghost">
-		<mk-clock/>
+		<MkClock/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkClock from './analog-clock.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkClock
 	},
@@ -48,7 +49,7 @@ export default Vue.extend({
 		this.tick();
 		this.clock = setInterval(this.tick, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {

src/client/components/icon-dialog.vue

@@ -0,0 +1,73 @@
+<template>
+<MkModal ref="modal" @click="type === 'success' ? done() : () => {}" @closed="$emit('closed')">
+	<div class="iuyakobc" :class="type">
+		<Fa class="icon" v-if="type === 'success'" :icon="faCheck"/>
+		<Fa class="icon" v-else-if="type === 'waiting'" :icon="faSpinner" pulse/>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import MkModal from '@/components/ui/modal.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+	},
+
+	props: {
+		type: {
+			required: true
+		},
+		showing: {
+			required: true
+		}
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			faCheck, faSpinner,
+		};
+	},
+
+	watch: {
+		showing() {
+			if (!this.showing) this.done();
+		}
+	},
+
+	methods: {
+		done() {
+			this.$emit('done');
+			this.$refs.modal.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.iuyakobc {
+	position: relative;
+	padding: 32px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	width: initial;
+	font-size: 32px;
+
+	&.success {
+		color: var(--accent);
+	}
+
+	&.waiting {
+		> .icon {
+			opacity: 0.7;
+		}
+	}
+}
+</style>

src/client/components/image-viewer.vue

@@ -1,16 +1,26 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
-</x-modal>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="xubzgfga">
+		<header>{{ image.name }}</header>
+		<img :src="image.url" :alt="image.name" :title="image.name" @click="$refs.modal.close()"/>
+		<footer>
+			<span>{{ image.type }}</span>
+			<span>{{ bytes(image.size) }}</span>
+			<span v-if="image.properties?.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+		</footer>
+	</div>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XModal from './modal.vue';
+import { defineComponent } from 'vue';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+import MkModal from '@/components/ui/modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XModal,
+		MkModal,
 	},
 
 	props: {
@@ -20,32 +30,50 @@ export default Vue.extend({
 		},
 	},
 
-	mounted() {
-		this.$nextTick(() => {
-			this.$refs.img.focus();
-		});
-	},
+	emits: ['closed'],
 
 	methods: {
-		close() {
-			this.$refs.modal.close();
-		},
+		bytes,
+		number,
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .xubzgfga {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	max-width: 100%;
-	max-height: 100%;
-	margin: auto;
-	cursor: zoom-out;
-	image-orientation: from-image;
+	max-width: 1024px;
+
+	> header,
+	> footer {
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		max-width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
 }
 </style>

src/client/components/img-with-blurhash.vue

@@ -1,15 +1,15 @@
 <template>
-<div class="xubzgfgb" :title="title">
+<div class="xubzgfgb" :class="{ cover }" :title="title">
 	<canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
 	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { decode } from 'blurhash';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: String,
@@ -35,6 +35,11 @@ export default Vue.extend({
 			required: false,
 			default: 64
 		},
+		cover: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
 	},
 
 	data() {
@@ -49,6 +54,7 @@ export default Vue.extend({
 
 	methods: {
 		draw() {
+			if (this.hash == null) return;
 			const pixels = decode(this.hash, this.size, this.size);
 			const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
 			const imageData = ctx!.createImageData(this.size, this.size);
@@ -70,9 +76,23 @@ export default Vue.extend({
 
 	> canvas,
 	> img {
+		display: block;
 		width: 100%;
 		height: 100%;
+	}
+
+	> canvas {
 		object-fit: cover;
 	}
+
+	> img {
+		object-fit: contain;
+	}
+
+	&.cover {
+		> img {
+			object-fit: cover;
+		}
+	}
 }
 </style>

src/client/components/index.ts

@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { App } from 'vue';
 
 import mfm from './misskey-flavored-markdown.vue';
 import acct from './acct.vue';
@@ -12,14 +12,16 @@ import loading from './loading.vue';
 import error from './error.vue';
 import streamIndicator from './stream-indicator.vue';
 
-Vue.component('mfm', mfm);
-Vue.component('mk-acct', acct);
-Vue.component('mk-avatar', avatar);
-Vue.component('mk-emoji', emoji);
-Vue.component('mk-user-name', userName);
-Vue.component('mk-ellipsis', ellipsis);
-Vue.component('mk-time', time);
-Vue.component('mk-url', url);
-Vue.component('mk-loading', loading);
-Vue.component('mk-error', error);
-Vue.component('stream-indicator', streamIndicator);
+export default function(app: App) {
+	app.component('Mfm', mfm);
+	app.component('MkAcct', acct);
+	app.component('MkAvatar', avatar);
+	app.component('MkEmoji', emoji);
+	app.component('MkUserName', userName);
+	app.component('MkEllipsis', ellipsis);
+	app.component('MkTime', time);
+	app.component('MkUrl', url);
+	app.component('MkLoading', loading);
+	app.component('MkError', error);
+	app.component('StreamIndicator', streamIndicator);
+}

src/client/components/instance-stats.vue

@@ -1,93 +1,93 @@
 <template>
-<div class="zbcjwnqg" v-size="{ max: [550, 1200] }">
+<div class="zbcjwnqg" v-size="{ max: [550, 1000] }">
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalUsersCount | number }}</dd>
+					<dd>{{ number(info.originalUsersCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersLocalDoD | number }}</dd>
+					<dd>{{ number(usersLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersLocalWoW | number }}</dd>
+					<dd>{{ number(usersLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.usersCount - info.originalUsersCount) | number }}</dd>
+					<dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersRemoteDoD | number }}</dd>
+					<dd>{{ number(usersRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersRemoteWoW | number }}</dd>
+					<dd>{{ number(usersRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalNotesCount | number }}</dd>
+					<dd>{{ number(info.originalNotesCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesLocalDoD | number }}</dd>
+					<dd>{{ number(notesLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesLocalWoW | number }}</dd>
+					<dd>{{ number(notesLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.notesCount - info.originalNotesCount) | number }}</dd>
+					<dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesRemoteDoD | number }}</dd>
+					<dd>{{ number(notesRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesRemoteWoW | number }}</dd>
+					<dd>{{ number(notesRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 	</div>
 
 	<section class="_card">
-		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
+		<div class="_title" style="position: relative;"><Fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><Fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
-				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
+				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="$t('federation')">
 						<option value="federation-instances">{{ $t('_charts.federationInstancesIncDec') }}</option>
 						<option value="federation-instances-total">{{ $t('_charts.federationInstancesTotal') }}</option>
@@ -109,11 +109,11 @@
 						<option value="drive">{{ $t('_charts.storageUsageIncDec') }}</option>
 						<option value="drive-total">{{ $t('_charts.storageUsageTotal') }}</option>
 					</optgroup>
-				</mk-select>
-				<mk-select v-model="chartSpan" style="margin: 0;">
+				</MkSelect>
+				<MkSelect v-model:value="chartSpan" style="margin: 0;">
 					<option value="hour">{{ $t('perHour') }}</option>
 					<option value="day">{{ $t('perDay') }}</option>
-				</mk-select>
+				</MkSelect>
 			</div>
 			<canvas ref="chart"></canvas>
 		</div>
@@ -122,10 +122,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
+import number from '@/filters/number';
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
@@ -136,8 +137,9 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect
 	},
@@ -216,7 +218,7 @@ export default Vue.extend({
 	},
 
 	async created() {
-		this.info = await this.$root.api('stats');
+		this.info = await os.api('stats');
 
 		this.now = new Date();
 
@@ -226,17 +228,17 @@ export default Vue.extend({
 	methods: {
 		async fetchChart() {
 			const [perHour, perDay] = await Promise.all([Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
 			]), Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
 			])]);
 
 			const chart = {
@@ -279,7 +281,7 @@ export default Vue.extend({
 			const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 
 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-			this.chartInstance = new Chart(this.$refs.chart, {
+			this.chartInstance = markRaw(new Chart(this.$refs.chart, {
 				type: 'line',
 				data: {
 					labels: new Array(this.chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -344,7 +346,7 @@ export default Vue.extend({
 						mode: 'index',
 					}
 				}
-			});
+			}));
 		},
 
 		getDate(ago: number) {
@@ -622,13 +624,15 @@ export default Vue.extend({
 				}]
 			};
 		},
+
+		number
 	}
 });
 </script>
 
 <style lang="scss" scoped>
 .zbcjwnqg {
-	&.max-width_1200px {
+	&.max-width_1000px {
 		> .stats {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr 1fr;

src/client/components/link.vue

@@ -5,18 +5,18 @@
 	:title="url"
 >
 	<slot></slot>
-	<fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
 </component>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { url as local } from '../config';
-import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { url as local } from '@/config';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
@@ -36,29 +36,34 @@ export default Vue.extend({
 			target: self ? null : '_blank',
 			showTimer: null,
 			hideTimer: null,
-			preview: null,
+			checkTimer: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;
 
-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const { dispose } = os.popup(await import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});
 
-			document.body.appendChild(this.preview.$el);
+			this.close = () => {
+				dispose();
+			};
+
+			this.checkTimer = setInterval(() => {
+				if (!document.body.contains(this.$el)) this.closePreview();
+			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
-				this.preview.destroyDom();
-				this.preview = null;
+			if (this.close) {
+				clearInterval(this.checkTimer);
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {

src/client/components/loading.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		inline: {
 			type: Boolean,

src/client/components/media-banner.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="icon"><fa :icon="faExclamationTriangle"/></span>
+		<span class="icon"><Fa :icon="faExclamationTriangle"/></span>
 		<b>{{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
@@ -19,17 +19,18 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><fa icon="download"/></span>
+		<span class="icon"><Fa icon="download"/></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		media: {
 			type: Object,

src/client/components/media-image.vue

@@ -1,34 +1,36 @@
 <template>
 <div class="qjewsnkg" v-if="hide" @click="hide = false">
-	<img-with-blurhash class="bg" :hash="image.blurhash" :title="image.name"/>
+	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.name"/>
 	<div class="text">
 		<div>
-			<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+			<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 			<span>{{ $t('clickToShow') }}</span>
 		</div>
 	</div>
 </div>
-<div class="gqnyydlz" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+<div class="gqnyydlz" :style="{ background: color }" v-else>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="image.url"
 		:title="image.name"
 		@click.prevent="onClick"
 	>
-		<img-with-blurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name"/>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name" :cover="false"/>
 		<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
@@ -44,8 +46,8 @@ export default Vue.extend({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle,
-			faEyeSlash
+			color: null,
+			faExclamationTriangle, faEyeSlash,
 		};
 	},
 	computed: {
@@ -67,6 +69,9 @@ export default Vue.extend({
 		// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 		this.$watch('image', () => {
 			this.hide = this.image.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+			if (this.image.blurhash) {
+				this.color = extractAvgColorFromBlurhash(this.image.blurhash);
+			}
 		}, {
 			deep: true,
 			immediate: true,
@@ -77,12 +82,9 @@ export default Vue.extend({
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = this.$root.new(ImageViewer, {
+				os.popup(ImageViewer, {
 					image: this.image
-				});
-				this.$once('hook:beforeDestroy', () => {
-					viewer.close();
-				});
+				}, {}, 'closed');
 			}
 		}
 	}
@@ -123,6 +125,7 @@ export default Vue.extend({
 
 .gqnyydlz {
 	position: relative;
+	border: solid 1px var(--divider);
 
 	> i {
 		display: block;

src/client/components/media-list.vue

@@ -1,13 +1,11 @@
 <template>
 <div class="mk-media-list">
-	<template v-for="media in mediaList.filter(media => !previewable(media))">
-		<x-banner :media="media" :key="media.id"/>
-	</template>
+	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
 		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle">
 			<template v-for="media in mediaList">
-				<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
-				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+				<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<XImage :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
 			</template>
 		</div>
 	</div>
@@ -15,12 +13,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBanner,
 		XImage,
@@ -46,7 +45,7 @@ export default Vue.extend({
 		this.size();
 		window.addEventListener('resize', this.size);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('resize', this.size);
 	},
 	activated() {

src/client/components/media-video.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
-		<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+		<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="video.url"
 		rel="nofollow noopener"
@@ -14,17 +14,18 @@
 		:style="imageStyle"
 		:title="video.name"
 	>
-		<fa :icon="faPlayCircle"/>
+		<Fa :icon="faPlayCircle"/>
 	</a>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		video: {
 			type: Object,

src/client/components/mention.vue

@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host as localHost } from '../config';
+import { host as localHost } from '@/config';
 import { wellKnownServices } from '../../well-known-services';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		username: {
 			type: String,

src/client/components/menu.vue

@@ -1,191 +0,0 @@
-<template>
-<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
-		<template v-for="(item, i) in items.filter(item => item !== undefined)">
-			<div v-if="item === null" class="divider" :key="i"></div>
-			<span v-else-if="item.type === 'label'" class="label item" :key="i">
-				<span>{{ item.text }}</span>
-			</span>
-			<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</router-link>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</a>
-			<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-			<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-		</template>
-	</div>
-</x-popup>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
-import XPopup from './popup.vue';
-import { focusPrev, focusNext } from '../scripts/focus';
-
-export default Vue.extend({
-	components: {
-		XPopup
-	},
-	props: {
-		source: {
-			required: true
-		},
-		items: {
-			type: Array,
-			required: true
-		},
-		align: {
-			type: String,
-			required: false
-		},
-		noCenter: {
-			type: Boolean,
-			required: false
-		},
-		fixed: {
-			type: Boolean,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		},
-		direction: {
-			type: String,
-			required: false
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-	},
-	data() {
-		return {
-			faCircle
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'up|k|shift+tab': this.focusUp,
-				'down|j|tab': this.focusDown,
-			};
-		},
-	},
-	mounted() {
-		if (this.viaKeyboard) {
-			this.$nextTick(() => {
-				focusNext(this.$refs.items.children[0], true);
-			});
-		}
-	},
-	methods: {
-		clicked(fn) {
-			fn();
-			this.close();
-		},
-		close() {
-			this.$refs.popup.close();
-		},
-		focusUp() {
-			focusPrev(document.activeElement);
-		},
-		focusDown() {
-			focusNext(document.activeElement);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rrevdjwt {
-	padding: 8px 0;
-
-	&.left {
-		> .item {
-			text-align: left;
-		}
-	}
-
-	> .item {
-		display: block;
-		position: relative;
-		padding: 8px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:hover {
-			color: #fff;
-			background: var(--accent);
-			text-decoration: none;
-		}
-
-		&:active {
-			color: #fff;
-			background: var(--accentDarken);
-		}
-
-		&:not(:active):focus {
-			box-shadow: 0 0 0 2px var(--focus) inset;
-		}
-
-		&.label {
-			pointer-events: none;
-			font-size: 0.7em;
-			padding-bottom: 4px;
-
-			> span {
-				opacity: 0.7;
-			}
-		}
-
-		> [data-icon] {
-			margin-right: 4px;
-			width: 20px;
-		}
-
-		> .avatar {
-			margin-right: 4px;
-			width: 20px;
-			height: 20px;
-		}
-
-		> i {
-			position: absolute;
-			top: 5px;
-			left: 13px;
-			color: var(--indicator);
-			font-size: 12px;
-			animation: blink 1s infinite;
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		height: 1px;
-		background: var(--divider);
-	}
-}
-</style>

src/client/components/mfm.ts

@@ -1,16 +1,18 @@
-import Vue, { VNode } from 'vue';
+import { VNode, defineComponent, h } from 'vue';
 import { MfmForest } from '../../mfm/prelude';
 import { parse, parsePlain } from '../../mfm/parse';
 import MkUrl from './url.vue';
 import MkLink from './link.vue';
 import MkMention from './mention.vue';
+import MkEmoji from './emoji.vue';
 import { concat } from '../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../config';
+import { host } from '@/config';
+import { RouterLink } from 'vue-router';
 
-export default Vue.component('misskey-flavored-markdown', {
+export default defineComponent({
 	props: {
 		text: {
 			type: String,
@@ -41,7 +43,7 @@ export default Vue.component('misskey-flavored-markdown', {
 		},
 	},
 
-	render(createElement) {
+	render() {
 		if (this.text == null || this.text == '') return;
 
 		const ast = (this.plain ? parsePlain : parse)(this.text);
@@ -53,67 +55,49 @@ export default Vue.component('misskey-flavored-markdown', {
 
 					if (!this.plain) {
 						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [this._v(t), createElement('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
+							.map(t => t == '' ? [h('br')] : [t, h('br')]);
 						x[x.length - 1].pop();
 						return x;
 					} else {
-						return [this._v(text.replace(/\n/g, ' '))];
+						return [text.replace(/\n/g, ' ')];
 					}
 				}
 
 				case 'bold': {
-					return [createElement('b', genEl(token.children))];
+					return [h('b', genEl(token.children))];
 				}
 
 				case 'strike': {
-					return [createElement('del', genEl(token.children))];
+					return [h('del', genEl(token.children))];
 				}
 
 				case 'italic': {
-					return (createElement as any)('i', {
-						attrs: {
-							style: 'font-style: oblique;'
-						},
+					return h('i', {
+						style: 'font-style: oblique;'
 					}, genEl(token.children));
 				}
 
 				case 'big': {
-					return (createElement as any)('strong', {
-						attrs: {
-							style: `display: inline-block; font-size: 150%;`
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'tada', iteration: 'infinite' }
-						}: {}]
+					return h('strong', {
+						style: `display: inline-block; font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: anime-tada 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}
 
 				case 'small': {
-					return [createElement('small', {
-						attrs: {
-							style: 'opacity: 0.7;'
-						},
+					return [h('small', {
+						style: 'opacity: 0.7;'
 					}, genEl(token.children))];
 				}
 
 				case 'center': {
-					return [createElement('div', {
-						attrs: {
-							style: 'text-align:center;'
-						}
+					return [h('div', {
+						style: 'text-align:center;'
 					}, genEl(token.children))];
 				}
 
 				case 'motion': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;'
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'rubberBand', iteration: 'infinite' }
-						} : {}]
+					return h('span', {
+						style: 'display: inline-block;' + (this.$store.state.device.animatedMfm ? 'animation: anime-rubberBand 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}
 
@@ -123,163 +107,126 @@ export default Vue.component('misskey-flavored-markdown', {
 						token.node.props.attr == 'alternate' ? 'alternate' :
 						'normal';
 					const style = this.$store.state.device.animatedMfm
-						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;' + style
-						},
+						? `animation: anime-spin 1.5s linear infinite; animation-direction: ${direction};` : '';
+					return h('span', {
+						style: 'display: inline-block;' + style
 					}, genEl(token.children));
 				}
 
 				case 'jump': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
-						},
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-jump 0.75s linear infinite;' : 'display: inline-block;'
 					}, genEl(token.children));
 				}
 
 				case 'flip': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block; transform: scaleX(-1);'
-						},
+					return h('span', {
+						style: 'display: inline-block; transform: scaleX(-1);'
 					}, genEl(token.children));
 				}
 
 				case 'url': {
-					return [createElement(MkUrl, {
+					return [h(MkUrl, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					})];
 				}
 
 				case 'link': {
-					return [createElement(MkLink, {
+					return [h(MkLink, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					}, genEl(token.children))];
 				}
 
 				case 'mention': {
-					return [createElement(MkMention, {
+					return [h(MkMention, {
 						key: Math.random(),
-						props: {
-							host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
-							username: token.node.props.username
-						}
+						host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
+						username: token.node.props.username
 					})];
 				}
 
 				case 'hashtag': {
-					return [createElement('router-link', {
+					return [h(RouterLink, {
 						key: Math.random(),
-						attrs: {
-							to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
-							style: 'color:var(--hashtag);'
-						}
+						to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
+						style: 'color:var(--hashtag);'
 					}, `#${token.node.props.hashtag}`)];
 				}
 
 				case 'blockCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
 					})];
 				}
 
 				case 'inlineCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-							inline: true
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
+						inline: true
 					})];
 				}
 
 				case 'quote': {
-					if (this.shouldBreak) {
-						return [createElement('div', {
-							attrs: {
-								class: 'quote'
-							}
+					if (!this.nowrap) {
+						return [h('div', {
+							class: 'quote'
 						}, genEl(token.children))];
 					} else {
-						return [createElement('span', {
-							attrs: {
-								class: 'quote'
-							}
+						return [h('span', {
+							class: 'quote'
 						}, genEl(token.children))];
 					}
 				}
 
 				case 'title': {
-					return [createElement('div', {
-						attrs: {
-							class: 'title'
-						}
+					return [h('div', {
+						class: 'title'
 					}, genEl(token.children))];
 				}
 
 				case 'emoji': {
-					return [createElement('mk-emoji', {
+					return [h(MkEmoji, {
 						key: Math.random(),
-						attrs: {
-							emoji: token.node.props.emoji,
-							name: token.node.props.name
-						},
-						props: {
-							customEmojis: this.customEmojis,
-							normal: this.plain
-						}
+						emoji: token.node.props.emoji,
+						name: token.node.props.name,
+						customEmojis: this.customEmojis,
+						normal: this.plain
 					})];
 				}
 
 				case 'mathInline': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: false
-						}
+						formula: token.node.props.formula,
+						block: false
 					})];
 				}
 
 				case 'mathBlock': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: true
-						}
+						formula: token.node.props.formula,
+						block: true
 					})];
 				}
 
 				case 'search': {
-					//const MkGoogle = () => import('./google.vue').then(m => m.default);
-					return [createElement(MkGoogle, {
+					return [h(MkGoogle, {
 						key: Math.random(),
-						props: {
-							q: token.node.props.query
-						}
+						q: token.node.props.query
 					})];
 				}
 
 				default: {
-					console.log('unrecognized ast type:', token.node.type);
+					console.error('unrecognized ast type:', token.node.type);
 
 					return [];
 				}
@@ -287,6 +234,6 @@ export default Vue.component('misskey-flavored-markdown', {
 		}));
 
 		// Parse ast to DOM
-		return createElement('span', genEl(ast));
+		return h('span', genEl(ast));
 	}
 });

src/client/components/mini-chart.vue

@@ -30,10 +30,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: Array,
@@ -64,7 +65,7 @@ export default Vue.extend({
 		// Vueが何故かWatchを発動させない場合があるので
 		this.clock = setInterval(this.draw, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {

src/client/components/misskey-flavored-markdown.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MfmCore from './mfm';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MfmCore
 	}
@@ -24,7 +24,7 @@ export default Vue.extend({
 		text-overflow: ellipsis;
 	}
 
-	::v-deep .quote {
+	::v-deep(.quote) {
 		display: block;
 		margin: 8px;
 		padding: 6px 0 6px 12px;
@@ -33,15 +33,15 @@ export default Vue.extend({
 		opacity: 0.7;
 	}
 
-	::v-deep pre {
+	::v-deep(pre) {
 		font-size: 0.8em;
 	}
 
-	::v-deep > code {
+	> ::v-deep(code) {
 		word-break: break-all;
 	}
 
-	::v-deep .title {
+	::v-deep(.title) {
 		text-align: center;
 		border-bottom: solid 1px var(--divider);
 	}

src/client/components/modal.vue

@@ -1,90 +0,0 @@
-<template>
-<div class="mk-modal" v-hotkey.global="keymap">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-		<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		canClose: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			show: true,
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': this.close,
-			};
-		},
-	},
-	methods: {
-		close() {
-			this.show = false;
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.content as any).style.pointerEvents = 'none';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-enter-active, .modal-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.modal-enter, .modal-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
-.mk-modal {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .content {
-		position: fixed;
-		z-index: 10000;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		max-width: calc(100% - 16px);
-		max-height: calc(100% - 16px);
-		overflow: auto;
-		margin: auto;
-
-		::v-deep > * {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			max-height: 100%;
-			max-width: 100%;
-		}
-	}
-}
-</style>

src/client/components/note-header.vue

@@ -1,33 +1,36 @@
 <template>
 <header class="kkwtjztg">
-	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
-		<mk-user-name :user="note.user"/>
+	<router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+		<MkUserName :user="note.user"/>
 	</router-link>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
-	<span class="username"><mk-acct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><fa :icon="faBookmark"/></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><fa :icon="farBookmark"/></span>
+	<span class="username"><MkAcct :user="note.user"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><fa :icon="faMobileAlt"/></span>
-		<router-link class="created-at" :to="note | notePage">
-			<mk-time :time="note.createdAt"/>
+		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<router-link class="created-at" :to="notePage(note)">
+			<MkTime :time="note.createdAt"/>
 		</router-link>
 		<span class="visibility" v-if="note.visibility !== 'public'">
-			<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-			<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-			<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
@@ -39,6 +42,11 @@ export default Vue.extend({
 		return {
 			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
+	},
+
+	methods: {
+		notePage,
+		userPage
 	}
 });
 </script>

src/client/components/note-preview.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="yohlumlk">
-	<mk-avatar class="avatar" :user="note.user"/>
+	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<x-note-header class="header" :note="note" :mini="true"/>
+		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<x-cw-button v-model="showContent" :note="note"/>
+				<XCwButton v-model:value="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
-				<x-sub-note-content class="text" :note="note"/>
+				<XSubNote-content class="text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -17,12 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNoteHeader,
 		XSubNoteContent,

src/client/components/note.sub.vue

@@ -1,32 +1,33 @@
 <template>
 <div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
 	<div class="main">
-		<mk-avatar class="avatar" :user="note.user"/>
+		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<x-note-header class="header" :note="note" :mini="true"/>
+			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-					<x-cw-button v-model="showContent" :note="note"/>
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
+					<XCwButton v-model:value="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">
-					<x-sub-note-content class="text" :note="note"/>
+					<XSubNote-content class="text" :note="note"/>
 				</div>
 			</div>
 		</div>
 	</div>
-	<x-sub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
+	<XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
-	name: 'x-sub',
+export default defineComponent({
+	name: 'XSub',
 
 	components: {
 		XNoteHeader,
@@ -65,7 +66,7 @@ export default Vue.extend({
 
 	created() {
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.note.id,
 				limit: 5
 			}).then(replies => {

src/client/components/note.vue

@@ -8,95 +8,99 @@
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
 >
-	<x-sub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
-	<x-sub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
-	<div class="info" v-if="appearNote._prId_"><fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <fa :icon="faTimes"/></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><fa :icon="faBolt"/> {{ $t('featured') }}</div>
+	<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
+	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
+	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
+	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <Fa :icon="faTimes"/></button></div>
+	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $t('featured') }}</div>
 	<div class="renote" v-if="isRenote">
-		<mk-avatar class="avatar" :user="note.user"/>
-		<fa :icon="faRetweet"/>
-		<i18n path="renotedBy" tag="span">
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">
-				<mk-user-name :user="note.user"/>
-			</router-link>
-		</i18n>
+		<MkAvatar class="avatar" :user="note.user"/>
+		<Fa :icon="faRetweet"/>
+		<i18n-t keypath="renotedBy" tag="span">
+			<template #user>
+				<router-link class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+					<MkUserName :user="note.user"/>
+				</router-link>
+			</template>
+		</i18n-t>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
-				<mk-time :time="note.createdAt"/>
+				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
-	<article class="article">
-		<mk-avatar class="avatar" :user="appearNote.user"/>
+	<article class="article" @contextmenu="onContextmenu">
+		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<x-note-header class="header" :note="appearNote" :mini="true"/>
+			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
-					<x-cw-button v-model="showContent" :note="appearNote"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+					<XCwButton v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
-						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><fa :icon="faReply"/></router-link>
-						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></router-link>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
-						<x-media-list :media-list="appearNote.files" :parent-element="noteBody"/>
+						<XMediaList :media-list="appearNote.files" :parent-element="noteBody"/>
 					</div>
-					<x-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
-					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
+					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
+					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
+					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 				</div>
-				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
+				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
 			</div>
 			<footer class="footer">
-				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
+				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><fa :icon="faReplyAll"/></template>
-					<template v-else><fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
+					<template v-else><Fa :icon="faReply"/></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
-					<fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<fa :icon="faBan"/>
+					<Fa :icon="faBan"/>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<fa :icon="faPlus"/>
+					<Fa :icon="faPlus"/>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<fa :icon="faMinus"/>
+					<Fa :icon="faMinus"/>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<fa :icon="faEllipsisH"/>
+					<Fa :icon="faEllipsisH"/>
 				</button>
 			</footer>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
+	<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 <div v-else class="_panel muted" @click="muted = false">
-	<i18n path="userSaysSomething" tag="small">
-		<router-link class="name" :to="appearNote.user | userPage" v-user-preview="appearNote.userId" place="name">
-			<mk-user-name :user="appearNote.user"/>
-		</router-link>
-	</i18n>
+	<i18n-t keypath="userSaysSomething" tag="small">
+		<template #name>
+			<router-link class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+				<MkUserName :user="appearNote.user"/>
+			</router-link>
+		</template>
+	</i18n-t>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { computed, defineAsyncComponent, defineComponent, markRaw, ref } from 'vue';
 import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
@@ -108,21 +112,24 @@ import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
-import MkUrlPreview from './url-preview.vue';
-import MkReactionPicker from './reaction-picker.vue';
-import pleaseLogin from '../scripts/please-login';
-import { focusPrev, focusNext } from '../scripts/focus';
-import { url } from '../config';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { checkWordMute } from '../scripts/check-word-mute';
-import { utils } from '@syuilo/aiscript';
+import { pleaseLogin } from '@/scripts/please-login';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import { url } from '@/config';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { checkWordMute } from '@/scripts/check-word-mute';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { noteActions, noteViewInterruptors } from '@/store';
 
-export default Vue.extend({
-	model: {
-		prop: 'note',
-		event: 'updated'
-	},
+function markRawAll(...xs) {
+	for (const x of xs) {
+		markRaw(x);
+	}
+}
 
+markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
+
+export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
@@ -131,7 +138,7 @@ export default Vue.extend({
 		XMediaList,
 		XCwButton,
 		XPoll,
-		MkUrlPreview,
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
 	},
 
 	inject: {
@@ -157,6 +164,8 @@ export default Vue.extend({
 		},
 	},
 
+	emits: ['update:note'],
+
 	data() {
 		return {
 			connection: null,
@@ -171,6 +180,9 @@ export default Vue.extend({
 	},
 
 	computed: {
+		rs() {
+			return this.$store.state.settings.reactions;
+		},
 		keymap(): any {
 			return {
 				'r': () => this.reply(true),
@@ -184,16 +196,16 @@ export default Vue.extend({
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
-				'1': () => this.reactDirectly(this.$store.state.settings.reactions[0]),
-				'2': () => this.reactDirectly(this.$store.state.settings.reactions[1]),
-				'3': () => this.reactDirectly(this.$store.state.settings.reactions[2]),
-				'4': () => this.reactDirectly(this.$store.state.settings.reactions[3]),
-				'5': () => this.reactDirectly(this.$store.state.settings.reactions[4]),
-				'6': () => this.reactDirectly(this.$store.state.settings.reactions[5]),
-				'7': () => this.reactDirectly(this.$store.state.settings.reactions[6]),
-				'8': () => this.reactDirectly(this.$store.state.settings.reactions[7]),
-				'9': () => this.reactDirectly(this.$store.state.settings.reactions[8]),
-				'0': () => this.reactDirectly(this.$store.state.settings.reactions[9]),
+				'1': () => this.reactDirectly(this.rs[0]),
+				'2': () => this.reactDirectly(this.rs[1]),
+				'3': () => this.reactDirectly(this.rs[2]),
+				'4': () => this.reactDirectly(this.rs[3]),
+				'5': () => this.reactDirectly(this.rs[4]),
+				'6': () => this.reactDirectly(this.rs[5]),
+				'7': () => this.reactDirectly(this.rs[6]),
+				'8': () => this.reactDirectly(this.rs[7]),
+				'9': () => this.reactDirectly(this.rs[8]),
+				'0': () => this.reactDirectly(this.rs[9]),
 			};
 		},
 
@@ -251,22 +263,22 @@ export default Vue.extend({
 
 	async created() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = this.$root.stream;
+			this.connection = os.stream;
 		}
 
 		// plugin
-		if (this.$store.state.noteViewInterruptors.length > 0) {
+		if (noteViewInterruptors.length > 0) {
 			let result = this.note;
-			for (const interruptor of this.$store.state.noteViewInterruptors) {
-				result = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(result))));
+			for (const interruptor of noteViewInterruptors) {
+				result = await interruptor.handler(JSON.parse(JSON.stringify(result)));
 			}
-			this.$emit('updated', Object.freeze(result));
+			this.$emit('update:note', Object.freeze(result));
 		}
 
 		this.muted = await checkWordMute(this.appearNote, this.$store.state.i, this.$store.state.settings.mutedWords);
 
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.appearNote.id,
 				limit: 30
 			}).then(replies => {
@@ -274,7 +286,7 @@ export default Vue.extend({
 			});
 
 			if (this.appearNote.replyId) {
-				this.$root.api('notes/conversation', {
+				os.api('notes/conversation', {
 					noteId: this.appearNote.replyId
 				}).then(conversation => {
 					this.conversation = conversation.reverse();
@@ -293,7 +305,7 @@ export default Vue.extend({
 		this.noteBody = this.$refs.noteBody;
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.decapture(true);
 
 		if (this.$store.getters.isSignedIn) {
@@ -303,7 +315,7 @@ export default Vue.extend({
 
 	methods: {
 		updateAppearNote(v) {
-			this.$emit('updated', Object.freeze(this.isRenote ? {
+			this.$emit('update:note', Object.freeze(this.isRenote ? {
 				...this.note,
 				renote: {
 					...this.note.renote,
@@ -316,7 +328,7 @@ export default Vue.extend({
 		},
 
 		readPromo() {
-			(this as any).$root.api('promo/read', {
+			os.api('promo/read', {
 				noteId: this.appearNote.id
 			});
 			this.isDeleted = true;
@@ -439,8 +451,8 @@ export default Vue.extend({
 		},
 
 		reply(viaKeyboard = false) {
-			pleaseLogin(this.$root);
-			this.$root.post({
+			pleaseLogin();
+			os.post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
 			}, () => {
@@ -449,57 +461,56 @@ export default Vue.extend({
 		},
 
 		renote(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			this.$root.menu({
-				items: [{
-					text: this.$t('renote'),
-					icon: faRetweet,
-					action: () => {
-						(this as any).$root.api('notes/create', {
-							renoteId: this.appearNote.id
-						});
-					}
-				}, {
-					text: this.$t('quote'),
-					icon: faQuoteRight,
-					action: () => {
-						this.$root.post({
-							renote: this.appearNote,
-						});
-					}
-				}]
-				source: this.$refs.renoteButton,
+			os.modalMenu([{
+				text: this.$t('renote'),
+				icon: faRetweet,
+				action: () => {
+					os.api('notes/create', {
+						renoteId: this.appearNote.id
+					});
+				}
+			}, {
+				text: this.$t('quote'),
+				icon: faQuoteRight,
+				action: () => {
+					os.post({
+						renote: this.appearNote,
+					});
+				}
+			}], this.$refs.renoteButton, {
 				viaKeyboard
 			});
 		},
 
 		renoteDirectly() {
-			(this as any).$root.api('notes/create', {
+			os.api('notes/create', {
 				renoteId: this.appearNote.id
 			});
 		},
 
 		react(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			const picker = this.$root.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
+			os.popup(defineAsyncComponent(() => import('@/components/reaction-picker.vue')), {
 				showFocus: viaKeyboard,
-			});
-			picker.$once('chosen', reaction => {
-				this.$root.api('notes/reactions/create', {
-					noteId: this.appearNote.id,
-					reaction: reaction
-				}).then(() => {
-					picker.close();
-				});
-			});
-			picker.$once('closed', this.focus);
+				src: this.$refs.reactButton,
+			}, {
+				done: reaction => {
+					if (reaction) {
+						os.api('notes/reactions/create', {
+							noteId: this.appearNote.id,
+							reaction: reaction
+						});
+					}
+					this.focus();
+				},
+			}, 'closed');
 		},
 
 		reactDirectly(reaction) {
-			this.$root.api('notes/reactions/create', {
+			os.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
@@ -508,81 +519,67 @@ export default Vue.extend({
 		undoReact(note) {
 			const oldReaction = note.myReaction;
 			if (!oldReaction) return;
-			this.$root.api('notes/reactions/delete', {
+			os.api('notes/reactions/delete', {
 				noteId: note.id
 			});
 		},
 
 		favorite() {
-			pleaseLogin(this.$root);
-			this.$root.api('notes/favorites/create', {
+			pleaseLogin();
+			os.apiWithDialog('notes/favorites/create', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
 		del() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('noteDeleteConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 			});
 		},
 
 		delEdit() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('deleteAndEditConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;
 
-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 
-				this.$root.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply, channel: this.appearNote.channel });
+				os.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply, channel: this.appearNote.channel });
 			});
 		},
 
 		toggleFavorite(favorite: boolean) {
-			this.$root.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
 		toggleWatch(watch: boolean) {
-			this.$root.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
+			os.apiWithDialog(watch ? 'notes/watching/create' : 'notes/watching/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},
 
-		async menu(viaKeyboard = false) {
+		getMenu() {
 			let menu;
 			if (this.$store.getters.isSignedIn) {
-				const state = await this.$root.api('notes/state', {
+				const statePromise = os.api('notes/state', {
 					noteId: this.appearNote.id
 				});
+
 				menu = [{
 					type: 'link',
 					icon: faInfoCircle,
@@ -604,7 +601,7 @@ export default Vue.extend({
 					}
 				} : undefined,
 				null,
-				state.isFavorited ? {
+				statePromise.then(state => state.isFavorited ? {
 					icon: faStar,
 					text: this.$t('unfavorite'),
 					action: () => this.toggleFavorite(false)
@@ -612,8 +609,8 @@ export default Vue.extend({
 					icon: faStar,
 					text: this.$t('favorite'),
 					action: () => this.toggleFavorite(true)
-				},
-				this.appearNote.userId != this.$store.state.i.id ? state.isWatching ? {
+				}),
+				(this.appearNote.userId != this.$store.state.i.id) ? statePromise.then(state => state.isWatching ? {
 					icon: faEyeSlash,
 					text: this.$t('unwatch'),
 					action: () => this.toggleWatch(false)
@@ -621,7 +618,7 @@ export default Vue.extend({
 					icon: faEye,
 					text: this.$t('watch'),
 					action: () => this.toggleWatch(true)
-				} : undefined,
+				}) : undefined,
 				this.appearNote.userId == this.$store.state.i.id ? (this.$store.state.i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
 					icon: faThumbtack,
 					text: this.$t('unpin'),
@@ -650,6 +647,7 @@ export default Vue.extend({
 					{
 						icon: faTrashAlt,
 						text: this.$t('delete'),
+						danger: true,
 						action: this.del
 					}]
 					: []
@@ -674,8 +672,8 @@ export default Vue.extend({
 				.filter(x => x !== undefined);
 			}
 
-			if (this.$store.state.noteActions.length > 0) {
-				menu = menu.concat([null, ...this.$store.state.noteActions.map(action => ({
+			if (noteActions.length > 0) {
+				menu = menu.concat([null, ...noteActions.map(action => ({
 					icon: faPlug,
 					text: action.title,
 					action: () => {
@@ -684,27 +682,39 @@ export default Vue.extend({
 				}))]);
 			}
 
-			this.$root.menu({
-				items: menu,
-				source: this.$refs.menuButton,
+			return menu;
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (window.getSelection().toString() !== '') return;
+			os.contextMenu(this.getMenu(), e).then(this.focus);
+		},
+
+		menu(viaKeyboard = false) {
+			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(this.focus);
 		},
 
 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			this.$root.menu({
-				items: [{
-					text: this.$t('unrenote'),
-					icon: faTrashAlt,
-					action: () => {
-						this.$root.api('notes/delete', {
-							noteId: this.note.id
-						});
-						this.isDeleted = true;
-					}
-				}],
-				source: this.$refs.renoteTime,
+			os.modalMenu([{
+				text: this.$t('unrenote'),
+				icon: faTrashAlt,
+				action: () => {
+					os.api('notes/delete', {
+						noteId: this.note.id
+					});
+					this.isDeleted = true;
+				}
+			}], this.$refs.renoteTime, {
 				viaKeyboard: viaKeyboard
 			});
 		},
@@ -715,31 +725,20 @@ export default Vue.extend({
 
 		copyContent() {
 			copyToClipboard(this.appearNote.text);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.appearNote.id}`);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},
 
 		togglePin(pin: boolean) {
-			this.$root.api(pin ? 'i/pin' : 'i/unpin', {
+			os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
+			}, undefined, null, e => {
 				if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-					this.$root.dialog({
+					os.dialog({
 						type: 'error',
 						text: this.$t('pinLimitExceeded')
 					});
@@ -748,26 +747,16 @@ export default Vue.extend({
 		},
 
 		async promote() {
-			const { canceled, result: days } = await this.$root.dialog({
+			const { canceled, result: days } = await os.dialog({
 				title: this.$t('numberOfDays'),
 				input: { type: 'number' }
 			});
 
 			if (canceled) return;
 
-			this.$root.api('admin/promo/create', {
+			os.apiWithDialog('admin/promo/create', {
 				noteId: this.appearNote.id,
 				expiresAt: Date.now() + (86400000 * days)
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
 			});
 		},
 
@@ -785,7 +774,9 @@ export default Vue.extend({
 
 		focusAfter() {
 			focusNext(this.$el);
-		}
+		},
+
+		userPage
 	}
 });
 </script>
@@ -795,10 +786,28 @@ export default Vue.extend({
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
+	contain: content;
 
 	&:focus {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--focus);
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
 	}
 
 	&:hover > .article > .main > .footer > .button {

src/client/components/notes.vue

@@ -1,42 +1,41 @@
 <template>
-<div class="mk-notes">
+<div class="_list_">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>
 
-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>
 
 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>
 
-	<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
-	</x-list>
+	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+		<XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
+	</XList>
 
 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent } from 'vue';
+import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
-import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XNote, XList, MkButton
+		XNote, XList,
 	},
 
 	mixins: [
@@ -68,6 +67,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['before', 'after'],
+
 	computed: {
 		notes(): any[] {
 			return this.prop ? this.items.map(item => item[this.prop]) : this.items;
@@ -82,9 +83,9 @@ export default Vue.extend({
 		updated(oldValue, newValue) {
 			const i = this.notes.findIndex(n => n === oldValue);
 			if (this.prop) {
-				Vue.set(this.items[i], this.prop, newValue);
+				this.items[i][this.prop] = newValue;
 			} else {
-				Vue.set(this.items, i, newValue);
+				this.items[i] = newValue;
 			}
 		},
 
@@ -94,4 +95,3 @@ export default Vue.extend({
 	}
 });
 </script>
-

src/client/components/notification-setting-window.vue

@@ -1,34 +1,40 @@
 <template>
-<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()">
+<XModalWindow ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
 	<template #header>{{ $t('notificationSetting') }}</template>
-	<div class="vv94n3oa">
-		<div v-if="showGlobalToggle">
-			<mk-switch v-model="useGlobalSetting">
-				{{ $t('useGlobalSetting') }}
-				<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
-			</mk-switch>
-		</div>
-		<div v-if="!useGlobalSetting">
-			<mk-info>{{ $t('notificationSettingDesc') }}</mk-info>
-			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
-			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
-			<mk-switch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch>
-		</div>
+	<div v-if="showGlobalToggle" class="_section">
+		<MkSwitch v-model:value="useGlobalSetting">
+			{{ $t('useGlobalSetting') }}
+			<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
+		</MkSwitch>
 	</div>
-</x-window>
+	<div v-if="!useGlobalSetting" class="_section">
+		<MkInfo>{{ $t('notificationSettingDesc') }}</MkInfo>
+		<MkButton inline @click="disableAll">{{ $t('disableAll') }}</MkButton>
+		<MkButton inline @click="enableAll">{{ $t('enableAll') }}</MkButton>
+		<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
+	</div>
+</XModalWindow>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import XWindow from './window.vue';
+import { defineComponent, PropType } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkSwitch from './ui/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
 import { notificationTypes } from '../../types';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XWindow,
+		XModalWindow,
 		MkSwitch,
 		MkInfo,
 		MkButton
@@ -48,6 +54,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			typesMap: {} as Record<typeof notificationTypes[number], boolean>,
@@ -60,7 +68,7 @@ export default Vue.extend({
 		this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle;
 
 		for (const type of this.notificationTypes) {
-			Vue.set(this.typesMap, type, this.includingTypes === null || this.includingTypes.includes(type));
+			this.typesMap[type] = this.includingTypes === null || this.includingTypes.includes(type);
 		}
 	},
 
@@ -69,8 +77,8 @@ export default Vue.extend({
 			const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][])
 				.filter(type => this.typesMap[type]);
 
-			this.$emit('ok', { includingTypes });
-			this.$refs.window.close();
+			this.$emit('done', { includingTypes });
+			this.$refs.dialog.close();
 		},
 
 		disableAll() {
@@ -87,12 +95,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-.vv94n3oa {
-	> div {
-		border-top: solid 1px var(--divider);
-		padding: 24px;
-	}
-}
-</style>

src/client/components/notification.vue

@@ -1,71 +1,75 @@
 <template>
 <div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }">
 	<div class="head">
-		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
-		<img v-else class="icon" :src="notification.icon" alt=""/>
+		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
+		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<fa :icon="faPlus" v-if="notification.type === 'follow'"/>
-			<fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
-			<fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
-			<fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
-			<fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
-			<fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
-			<fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
-			<fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
-			<fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
-			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
+			<Fa :icon="faPlus" v-if="notification.type === 'follow'"/>
+			<Fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
+			<Fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
+			<Fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
+			<Fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
+			<Fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
+			<Fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
+			<Fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
+			<Fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
+			<XReactionIcon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</div>
 	<div class="tail">
 		<header>
-			<router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
+			<router-link v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></router-link>
 			<span v-else>{{ notification.header }}</span>
-			<mk-time :time="notification.createdAt" v-if="withTime"/>
+			<MkTime :time="notification.createdAt" v-if="withTime"/>
 		</header>
-		<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<fa :icon="faQuoteRight"/>
+		<router-link v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Fa :icon="faQuoteRight"/>
 		</router-link>
-		<router-link v-if="notification.type === 'renote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<fa :icon="faQuoteRight"/>
+		<router-link v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
+			<Fa :icon="faQuoteRight"/>
 		</router-link>
-		<router-link v-if="notification.type === 'reply'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<router-link v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'mention'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<router-link v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		<router-link v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</router-link>
-		<router-link v-if="notification.type === 'pollVote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<fa :icon="faQuoteRight"/>
+		<router-link v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Fa :icon="faQuoteRight"/>
 		</router-link>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
+		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'app'" class="text">
-			<mfm :text="notification.body" :nowrap="!full"/>
+			<Mfm :text="notification.body" :nowrap="!full"/>
 		</span>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
 import noteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
+import { locale } from '../i18n';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon, MkFollowButton
 	},
@@ -87,7 +91,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			getNoteSummary: (text: string) => noteSummary(text, this.$root.i18n.messages[this.$root.i18n.locale]),
+			getNoteSummary: (text: string) => noteSummary(text, locale),
 			followRequestDone: false,
 			groupInviteDone: false,
 			connection: null,
@@ -100,7 +104,7 @@ export default Vue.extend({
 		if (!this.notification.isRead) {
 			this.readObserver = new IntersectionObserver((entries, observer) => {
 				if (!entries.some(entry => entry.isIntersecting)) return;
-				this.$root.stream.send('readNotification', {
+				os.stream.send('readNotification', {
 					id: this.notification.id
 				});
 				entries.map(({ target }) => observer.unobserve(target));
@@ -108,12 +112,12 @@ export default Vue.extend({
 
 			this.readObserver.observe(this.$el);
 
-			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection = os.stream.useSharedConnection('main');
 			this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (!this.notification.isRead) {
 			this.readObserver.unobserve(this.$el);
 			this.connection.dispose();
@@ -123,24 +127,22 @@ export default Vue.extend({
 	methods: {
 		acceptFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/accept', { userId: this.notification.user.id });
+			os.api('following/requests/accept', { userId: this.notification.user.id });
 		},
 		rejectFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/reject', { userId: this.notification.user.id });
+			os.api('following/requests/reject', { userId: this.notification.user.id });
 		},
 		acceptGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.apiWithDialog('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
 		},
 		rejectGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
+			os.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
 		},
+		notePage,
+		userPage
 	}
 });
 </script>
@@ -153,6 +155,7 @@ export default Vue.extend({
 	font-size: 0.9em;
 	overflow-wrap: break-word;
 	display: flex;
+	contain: content;
 
 	&.max-width_600px {
 		padding: 16px;

src/client/components/notifications.vue

@@ -1,30 +1,31 @@
 <template>
 <div class="mfcuwfyp">
-	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
-		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @updated="noteUpdated(notification.note, $event)" :key="notification.id"/>
-		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
-	</x-list>
+	<XList class="notifications" :items="items" v-slot="{ item: notification }">
+		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
+		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+	</XList>
 
-	<button class="_panel _button" ref="loadMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+	<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><mk-loading inline/></template>
+		<template v-if="moreFetching"><MkLoading inline/></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>
 
-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent, PropType } from 'vue';
+import paging from '@/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 import { notificationTypes } from '../../types';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification,
 		XList,
@@ -63,22 +64,30 @@ export default Vue.extend({
 	},
 
 	watch: {
-		includeTypes() {
-			this.reload();
-		},
-		'$store.state.i.mutingNotificationTypes'() {
-			if (this.includeTypes === null) {
+		includeTypes: {
+			handler() {
 				this.reload();
-			}
+			},
+			deep: true
+		},
+		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $store.state.i が更新されると、
+		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
+		'$store.state.i.mutingNotificationTypes': {
+			handler() {
+				if (this.includeTypes === null) {
+					this.reload();
+				}
+			},
+			deep: true
 		}
 	},
 
 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},
 
@@ -86,7 +95,7 @@ export default Vue.extend({
 		onNotification(notification) {
 			const isMuted = !this.allIncludeTypes.includes(notification.type);
 			if (isMuted || document.visibilityState === 'visible') {
-				this.$root.stream.send('readNotification', {
+				os.stream.send('readNotification', {
 					id: notification.id
 				});
 			}
@@ -101,10 +110,10 @@ export default Vue.extend({
 
 		noteUpdated(oldValue, newValue) {
 			const i = this.items.findIndex(n => n.note === oldValue);
-			Vue.set(this.items, i, {
+			this.items[i] = {
 				...this.items[i],
 				note: newValue
-			});
+			};
 		},
 	}
 });

src/client/components/page-preview.vue

@@ -8,22 +8,27 @@
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
 			<img class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ page.user | userName }}</p>
+			<p>{{ userName(page.user) }}</p>
 		</footer>
 	</article>
 </router-link>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { userName } from '../filters/user';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		page: {
 			type: Object,
 			required: true
 		},
 	},
+	methods: {
+		userName
+	}
 });
 </script>
 

src/client/components/page-window.vue

@@ -0,0 +1,86 @@
+<template>
+<XWindow ref="window" :initial-width="400" :initial-height="450" :can-resize="true" @closed="$emit('closed')">
+	<template #header>
+		<XHeader :info="pageInfo" :with-back="false"/>
+	</template>
+	<template #buttons>
+		<button class="_button" @click="expand" v-tooltip="$t('showInPage')"><Fa :icon="faExpandAlt"/></button>
+		<button class="_button" @click="popout" v-tooltip="$t('popout')"><Fa :icon="faExternalLinkAlt"/></button>
+	</template>
+	<div style="min-height: 100%; background: var(--bg);">
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue';
+import { faExternalLinkAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons';
+import XWindow from '@/components/ui/window.vue';
+import XHeader from '@/ui/_common_/header.vue';
+import { popout } from '@/scripts/popout';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		XHeader,
+	},
+
+	props: {
+		initialUrl: {
+			type: String,
+			required: true,
+		},
+		initialComponent: {
+			type: Object,
+			required: true,
+		},
+		initialProps: {
+			type: Object,
+			required: false,
+			default: {},
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			pageInfo: null,
+			url: this.initialUrl,
+			component: this.initialComponent,
+			props: this.initialProps,
+			faExternalLinkAlt, faExpandAlt,
+		};
+	},
+
+	provide() {
+		return {
+			navHook: (url, component, props) => {
+				this.url = url;
+				this.component = markRaw(component);
+				this.props = props;
+			}
+		};
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		expand() {
+			this.$router.push(this.url);
+			this.$refs.window.close();
+		},
+
+		popout() {
+			popout(this.url, this.$el);
+			this.$refs.window.close();
+		},
+	},
+});
+</script>

src/client/components/page/page.block.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
@@ -19,7 +19,7 @@ import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
 	},

src/client/components/page/page.button.vue

@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
@@ -24,14 +25,14 @@ export default Vue.extend({
 		click() {
 			if (this.value.action === 'dialog') {
 				this.hpml.eval();
-				this.$root.dialog({
+				os.dialog({
 					text: this.hpml.interpolate(this.value.content)
 				});
 			} else if (this.value.action === 'resetRandom') {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
 			} else if (this.value.action === 'pushEvent') {
-				this.$root.api('page-push', {
+				os.api('page-push', {
 					pageId: this.hpml.page.id,
 					event: this.value.event,
 					...(this.value.var ? {
@@ -39,7 +40,7 @@ export default Vue.extend({
 					} : {})
 				});
 
-				this.$root.dialog({
+				os.dialog({
 					type: 'success',
 					text: this.hpml.interpolate(this.value.message)
 				});

src/client/components/page/page.canvas.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.counter.vue

@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},

src/client/components/page/page.if.vue

@@ -1,13 +1,14 @@
 <template>
 <div v-show="hpml.vars[value.var]">
-	<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
+	<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.image.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.number-input.vue

@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
+	<MkInput class="kudkigyw" v-model:value="v" type="number">{{ hpml.interpolate(value.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},

src/client/components/page/page.post.vue

@@ -1,18 +1,19 @@
 <template>
 <div class="ngbfujlo">
-	<mk-textarea :value="text" readonly style="margin: 0;"></mk-textarea>
-	<mk-button class="button" primary @click="post()" :disabled="posting || posted"><fa v-if="posted" :icon="faCheck"/><fa v-else :icon="faPaperPlane"/></mk-button>
+	<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
+	<MkButton class="button" primary @click="post()" :disabled="posting || posted"><Fa v-if="posted" :icon="faCheck"/><Fa v-else :icon="faPaperPlane"/></MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
-import { apiUrl } from '../../config';
+import { apiUrl } from '@/config';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea,
 		MkButton,
@@ -44,7 +45,7 @@ export default Vue.extend({
 	methods: {
 		upload() {
 			return new Promise((ok) => {
-				const dialog = this.$root.dialog({
+				const dialog = os.dialog({
 					type: 'waiting',
 					text: this.$t('uploading') + '...',
 					showOkButton: false,
@@ -75,15 +76,11 @@ export default Vue.extend({
 		async post() {
 			this.posting = true;
 			const file = this.value.attachCanvasImage ? await this.upload() : null;
-			this.$root.api('notes/create', {
+			os.apiWithDialog('notes/create', {
 				text: this.text === '' ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		}
 	}

src/client/components/page/page.radio-button.vue

@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(value.title) }}</div>
-	<mk-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</mk-radio>
+	<MkRadio v-for="x in value.values" v-model:value="v" :value="x" :key="x">{{ x }}</MkRadio>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio
 	},

src/client/components/page/page.section.vue

@@ -3,15 +3,16 @@
 	<component :is="'h' + h">{{ value.title }}</component>
 
 	<div class="children">
-		<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
+		<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
 	</div>
 </section>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.switch.vue

@@ -1,14 +1,15 @@
 <template>
 <div class="hkcxmtwj">
-	<mk-switch v-model="v">{{ hpml.interpolate(value.text) }}</mk-switch>
+	<MkSwitch v-model:value="v">{{ hpml.interpolate(value.text) }}</MkSwitch>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkSwitch from '../ui/switch.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSwitch
 	},

src/client/components/page/page.text-input.vue

@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="text">{{ hpml.interpolate(value.text) }}</mk-input>
+	<MkInput class="kudkigyw" v-model:value="v" type="text">{{ hpml.interpolate(value.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},

src/client/components/page/page.text.vue

@@ -1,16 +1,19 @@
 <template>
 <div class="mrdgzndn">
-	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
-	<mk-url-preview v-for="url in urls" :url="url" :key="url" class="url"/>
+	<Mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
+	<MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
+	components: {
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
+	},
 	props: {
 		value: {
 			required: true

src/client/components/page/page.textarea-input.vue

@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-textarea v-model="v">{{ hpml.interpolate(value.text) }}</mk-textarea>
+	<MkTextarea v-model:value="v">{{ hpml.interpolate(value.text) }}</MkTextarea>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},

src/client/components/page/page.textarea.vue

@@ -1,12 +1,13 @@
 <template>
-<mk-textarea :value="text" readonly></mk-textarea>
+<MkTextarea :value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},

src/client/components/page/page.vue

@@ -1,19 +1,20 @@
 <template>
 <div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
-	<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
+	<XBlock v-for="child in page.content" :value="child" @update:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '@syuilo/aiscript';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
-import { Hpml } from '../../scripts/hpml/evaluator';
-import { url } from '../../config';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { url } from '@/config';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBlock
 	},
@@ -33,7 +34,7 @@ export default Vue.extend({
 	},
 
 	created() {
-		this.hpml = new Hpml(this, this.page, {
+		this.hpml = new Hpml(this.page, {
 			randomSeed: Math.random(),
 			visitor: this.$store.state.i,
 			url: url,
@@ -49,7 +50,7 @@ export default Vue.extend({
 					ast = parse(this.page.script);
 				} catch (e) {
 					console.error(e);
-					/*this.$root.dialog({
+					/*os.dialog({
 						type: 'error',
 						text: 'Syntax error :('
 					});*/
@@ -59,7 +60,7 @@ export default Vue.extend({
 					this.hpml.eval();
 				}).catch(e => {
 					console.error(e);
-					/*this.$root.dialog({
+					/*os.dialog({
 						type: 'error',
 						text: e
 					});*/
@@ -70,7 +71,7 @@ export default Vue.extend({
 		});
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		if (this.hpml.aiscript) this.hpml.aiscript.abort();
 	},
 });

src/client/components/particle.vue

@@ -3,43 +3,48 @@
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
 			<animate attributeName="r"
-					begin="0s" dur="0.5s"
-					values="4; 32"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.165, 0.84, 0.44, 1"
-					repeatCount="1" />
+				begin="0s" dur="0.5s"
+				values="4; 32"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.165, 0.84, 0.44, 1"
+				repeatCount="1"
+			/>
 			<animate attributeName="stroke-width"
-					begin="0s" dur="0.5s"
-					values="16; 0"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1" />
+				begin="0s" dur="0.5s"
+				values="16; 0"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.3, 0.61, 0.355, 1"
+				repeatCount="1"
+			/>
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
 				<animate attributeName="r"
-						begin="0s" dur="0.8s"
-						:values="`${particle.size}; 0`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.165, 0.84, 0.44, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.size}; 0`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.165, 0.84, 0.44, 1"
+					repeatCount="1"
+				/>
 				<animate attributeName="cx"
-						begin="0s" dur="0.8s"
-						:values="`${particle.xA}; ${particle.xB}`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.xA}; ${particle.xB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
 				<animate attributeName="cy"
-						begin="0s" dur="0.8s"
-						:values="`${particle.yA}; ${particle.yB}`"
-						calcMode="spline"
-						keyTimes="0; 1"
-						keySplines="0.3, 0.61, 0.355, 1"
-						repeatCount="1" />
+					begin="0s" dur="0.8s"
+					:values="`${particle.yA}; ${particle.yB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
 			</circle>
 		</g>
 	</svg>
@@ -47,9 +52,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		x: {
 			type: Number,
@@ -60,6 +65,7 @@ export default Vue.extend({
 			required: true
 		}
 	},
+	emits: ['end'],
 	data() {
 		const particles = [];
 		const origin = 64;
@@ -85,7 +91,7 @@ export default Vue.extend({
 	},
 	mounted() {
 		setTimeout(() => {
-			this.destroyDom();
+			this.$emit('end');
 		}, 1100);
 	}
 });

src/client/components/poll-editor.vue

@@ -1,47 +1,47 @@
 <template>
 <div class="zmdxowus">
 	<p class="caution" v-if="choices.length < 2">
-		<fa :icon="faExclamationTriangle"/>{{ $t('_poll.noOnlyOneChoice') }}
+		<Fa :icon="faExclamationTriangle"/>{{ $t('_poll.noOnlyOneChoice') }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<mk-input class="input" :value="choice" @input="onInput(i, $event)">
+			<MkInput class="input" :value="choice" @update:value="onInput(i, $event)">
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
-			</mk-input>
+			</MkInput>
 			<button @click="remove(i)" class="_button">
-				<fa :icon="faTimes"/>
+				<Fa :icon="faTimes"/>
 			</button>
 		</li>
 	</ul>
-	<mk-button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</mk-button>
-	<mk-button class="add" v-else disabled>{{ $t('_poll.noMore') }}</mk-button>
+	<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</MkButton>
+	<MkButton class="add" v-else disabled>{{ $t('_poll.noMore') }}</MkButton>
 	<section>
-		<mk-switch v-model="multiple">{{ $t('_poll.canMultipleVote') }}</mk-switch>
+		<MkSwitch v-model:value="multiple">{{ $t('_poll.canMultipleVote') }}</MkSwitch>
 		<div>
-			<mk-select v-model="expiration">
+			<MkSelect v-model:value="expiration">
 				<template #label>{{ $t('_poll.expiration') }}</template>
 				<option value="infinite">{{ $t('_poll.infinite') }}</option>
 				<option value="at">{{ $t('_poll.at') }}</option>
 				<option value="after">{{ $t('_poll.after') }}</option>
-			</mk-select>
+			</MkSelect>
 			<section v-if="expiration === 'at'">
-				<mk-input v-model="atDate" type="date" class="input">
+				<MkInput v-model:value="atDate" type="date" class="input">
 					<span>{{ $t('_poll.deadlineDate') }}</span>
-				</mk-input>
-				<mk-input v-model="atTime" type="time" class="input">
+				</MkInput>
+				<MkInput v-model:value="atTime" type="time" class="input">
 					<span>{{ $t('_poll.deadlineTime') }}</span>
-				</mk-input>
+				</MkInput>
 			</section>
 			<section v-if="expiration === 'after'">
-				<mk-input v-model="after" type="number" class="input">
+				<MkInput v-model:value="after" type="number" class="input">
 					<span>{{ $t('_poll.duration') }}</span>
-				</mk-input>
-				<mk-select v-model="unit">
+				</MkInput>
+				<MkSelect v-model:value="unit">
 					<option value="second">{{ $t('_time.second') }}</option>
 					<option value="minute">{{ $t('_time.minute') }}</option>
 					<option value="hour">{{ $t('_time.hour') }}</option>
 					<option value="day">{{ $t('_time.day') }}</option>
-				</mk-select>
+				</MkSelect>
 			</section>
 		</div>
 	</section>
@@ -49,23 +49,33 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { erase } from '../../prelude/array';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '../../misc/format-time-string';
 import MkInput from './ui/input.vue';
 import MkSelect from './ui/select.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkSelect,
 		MkSwitch,
 		MkButton,
 	},
+
+	props: {
+		poll: {
+			type: Object,
+			required: true
+		}
+	},
+
+	emits: ['updated'],
+
 	data() {
 		return {
 			choices: ['', ''],
@@ -78,20 +88,66 @@ export default Vue.extend({
 			faExclamationTriangle, faTimes
 		};
 	},
+
 	watch: {
-		choices() {
-			this.$emit('updated');
-		}
+		poll: {
+			handler(poll) {
+				if (poll == null) return;
+				if (poll.choices.length == 0) return;
+				this.choices = poll.choices;
+				if (poll.choices.length == 1) this.choices = this.choices.concat('');
+				this.multiple = poll.multiple;
+				if (poll.expiresAt) {
+					this.expiration = 'at';
+					this.atDate = this.atTime = poll.expiresAt;
+				} else if (typeof poll.expiredAfter === 'number') {
+					this.expiration = 'after';
+					this.after = poll.expiredAfter;
+				} else {
+					this.expiration = 'infinite';
+				}
+			},
+			deep: true,
+			immediate: true
+		},
+		choices: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+			deep: true
+		},
+		multiple: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		expiration: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		atDate: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
+		after: {
+			handler() {
+				this.$emit('updated', this.get());
+			},
+		},
 	},
+
 	methods: {
 		onInput(i, e) {
-			Vue.set(this.choices, i, e);
+			this.choices[i] = e;
 		},
 
 		add() {
 			this.choices.push('');
 			this.$nextTick(() => {
-				(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
+				// TODO
+				//(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
 			});
 		},
 
@@ -116,29 +172,14 @@ export default Vue.extend({
 			};
 
 			return {
-				choices: erase('', this.choices),
+				choices: this.choices,
 				multiple: this.multiple,
 				...(
 					this.expiration === 'at' ? { expiresAt: at() } :
-					this.expiration === 'after' ? { expiredAfter: after() } : {})
+					this.expiration === 'after' ? { expiredAfter: after() } : {}
+				)
 			};
 		},
-
-		set(data) {
-			if (data.choices.length == 0) return;
-			this.choices = data.choices;
-			if (data.choices.length == 1) this.choices = this.choices.concat('');
-			this.multiple = data.multiple;
-			if (data.expiresAt) {
-				this.expiration = 'at';
-				this.atDate = this.atTime = data.expiresAt;
-			} else if (typeof data.expiredAfter === 'number') {
-				this.expiration = 'after';
-				this.after = data.expiredAfter;
-			} else {
-				this.expiration = 'infinite';
-			}
-		}
 	}
 });
 </script>

src/client/components/poll.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="tivcixzd" :data-done="closed || isVoted">
+<div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
 		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><fa :icon="faCheck"/></template>
-				<mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
+				<template v-if="choice.isVoted"><Fa :icon="faCheck"/></template>
+				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
 		</li>
@@ -22,11 +22,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
@@ -85,7 +86,7 @@ export default Vue.extend({
 		},
 		vote(id) {
 			if (this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
-			this.$root.api('notes/polls/vote', {
+			os.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {
@@ -153,7 +154,7 @@ export default Vue.extend({
 		}
 	}
 
-	&[data-done] {
+	&.done {
 		> ul > li {
 			cursor: default;
 

src/client/components/popup.vue

@@ -1,148 +0,0 @@
-<template>
-<div class="mk-popup" v-hotkey.global="keymap">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
-	</transition>
-	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		source: {
-			required: true
-		},
-		noCenter: {
-			type: Boolean,
-			required: false
-		},
-		fixed: {
-			type: Boolean,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		}
-	},
-	data() {
-		return {
-			show: true,
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': this.close,
-			};
-		},
-	},
-	mounted() {
-		this.$nextTick(() => {
-			const popover = this.$refs.content as any;
-
-			const rect = this.source.getBoundingClientRect();
-			const width = popover.offsetWidth;
-			const height = popover.offsetHeight;
-
-			let left;
-			let top;
-
-			if (this.$root.isMobile && !this.noCenter) {
-				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.source.offsetWidth / 2);
-				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + (this.source.offsetHeight / 2);
-				left = (x - (width / 2));
-				top = (y - (height / 2));
-				popover.style.transformOrigin = 'center';
-			} else {
-				const x = rect.left + (this.fixed ? 0 : window.pageXOffset) + (this.source.offsetWidth / 2);
-				const y = rect.top + (this.fixed ? 0 : window.pageYOffset) + this.source.offsetHeight;
-				left = (x - (width / 2));
-				top = y;
-			}
-
-			if (this.fixed) {
-				if (left + width > window.innerWidth) {
-					left = window.innerWidth - width;
-					popover.style.transformOrigin = 'center';
-				}
-
-				if (top + height > window.innerHeight) {
-					top = window.innerHeight - height;
-					popover.style.transformOrigin = 'center';
-				}
-			} else {
-				if (left + width - window.pageXOffset > window.innerWidth) {
-					left = window.innerWidth - width + window.pageXOffset;
-					popover.style.transformOrigin = 'center';
-				}
-
-				if (top + height - window.pageYOffset > window.innerHeight) {
-					top = window.innerHeight - height + window.pageYOffset;
-					popover.style.transformOrigin = 'center';
-				}
-			}
-
-			if (top < 0) {
-				top = 0;
-			}
-
-			if (left < 0) {
-				left = 0;
-			}
-
-			popover.style.left = left + 'px';
-			popover.style.top = top + 'px';
-		});
-	},
-	methods: {
-		close() {
-			this.show = false;
-			if (this.$refs.bg) (this.$refs.bg as any).style.pointerEvents = 'none';
-			if (this.$refs.content) (this.$refs.content as any).style.pointerEvents = 'none';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.popup-enter-active, .popup-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.popup-enter, .popup-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
-.mk-popup {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .content {
-		position: absolute;
-		z-index: 10001;
-		background: var(--panel);
-		border-radius: 8px;
-		box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
-		overflow: hidden;
-		transform-origin: center top;
-
-		&.fixed {
-			position: fixed;
-		}
-	}
-}
-</style>

src/client/components/post-form-attaches.vue

@@ -1,28 +1,28 @@
 <template>
 <div class="skeikyzd" v-show="files.length != 0">
-	<x-draggable class="files" :list="files" animation="150" delay="100" delayOnTouchOnly="true">
+	<XDraggable class="files" :list="files" animation="150" delay="100" delay-on-touch-only="true">
 		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
-			<x-file-thumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
+			<MkDriveFileThumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
 			<div class="sensitive" v-if="file.isSensitive">
-				<fa class="icon" :icon="faExclamationTriangle"/>
+				<Fa class="icon" :icon="faExclamationTriangle"/>
 			</div>
 		</div>
-	</x-draggable>
+	</XDraggable>
 	<p class="remain">{{ 4 - files.length }}/4</p>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import * as XDraggable from 'vuedraggable';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
-import XFileThumbnail from './drive-file-thumbnail.vue'
+import MkDriveFileThumbnail from './drive-file-thumbnail.vue'
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XDraggable,
-		XFileThumbnail
+		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		MkDriveFileThumbnail
 	},
 
 	props: {
@@ -36,6 +36,8 @@ export default Vue.extend({
 		}
 	},
 
+	emits: ['updated', 'detach'],
+
 	data() {
 		return {
 			menu: null as Promise<null> | null,
@@ -48,21 +50,21 @@ export default Vue.extend({
 		detachMedia(id) {
 			if (this.detachMediaFn) {
 				this.detachMediaFn(id);
-			} else if (this.$parent.detachMedia) {
-				this.$parent.detachMedia(id);
+			} else {
+				this.$emit('detach', id);
 			}
 		},
 		toggleSensitive(file) {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				isSensitive: !file.isSensitive
 			}).then(() => {
 				file.isSensitive = !file.isSensitive;
-				this.$parent.updateMedia(file);
+				this.$emit('updated', file);
 			});
 		},
 		async rename(file) {
-			const { canceled, result } = await this.$root.dialog({
+			const { canceled, result } = await os.dialog({
 				title: this.$t('enterFileName'),
 				input: {
 					default: file.name
@@ -70,32 +72,29 @@ export default Vue.extend({
 				allowEmpty: false
 			});
 			if (canceled) return;
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: file.id,
 				name: result
 			}).then(() => {
 				file.name = result;
-				this.$parent.updateMedia(file);
+				this.$emit('updated', file);
 			});
 		},
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = this.$root.menu({
-				items: [{
-					text: this.$t('renameFile'),
-					icon: faICursor,
-					action: () => { this.rename(file) }
-				}, {
-					text: file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
-					icon: file.isSensitive ? faEyeSlash : faEye,
-					action: () => { this.toggleSensitive(file) }
-				}, {
-					text: this.$t('attachCancel'),
-					icon: faTimesCircle,
-					action: () => { this.detachMedia(file.id) }
-				}],
-				source: ev.currentTarget || ev.target
-			}).then(() => this.menu = null);
+			this.menu = os.modalMenu([{
+				text: this.$t('renameFile'),
+				icon: faICursor,
+				action: () => { this.rename(file) }
+			}, {
+				text: file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
+				icon: file.isSensitive ? faEyeSlash : faEye,
+				action: () => { this.toggleSensitive(file) }
+			}, {
+				text: this.$t('attachCancel'),
+				icon: faTimesCircle,
+				action: () => { this.detachMedia(file.id) }
+			}], ev.currentTarget || ev.target).then(() => this.menu = null);
 		}
 	}
 });
@@ -103,7 +102,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .skeikyzd {
-	padding: 4px;
+	padding: 8px 16px;
 	position: relative;
 
 	> .files {
@@ -114,7 +113,9 @@ export default Vue.extend({
 			position: relative;
 			width: 64px;
 			height: 64px;
-			margin: 4px;
+			margin-right: 4px;
+			border-radius: 4px;
+			overflow: hidden;
 			cursor: move;
 
 			&:hover > .remove {

src/client/components/post-form-dialog.vue

@@ -1,156 +1,19 @@
 <template>
-<div class="ulveipgl">
-	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
-		<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
-	</transition>
-	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
-		<transition :name="$store.state.device.animation ? 'form' : ''" appear
-			@after-leave="destroyDom"
-		>
-			<x-post-form ref="form"
-				v-if="show"
-				:reply="reply"
-				:renote="renote"
-				:mention="mention"
-				:specified="specified"
-				:initial-text="initialText"
-				:initial-note="initialNote"
-				:instant="instant"
-				:channel="channel"
-				@posted="onPosted"
-				@cancel="onCanceled"
-				style="border-radius: var(--radius);"/>
-		</transition>
-	</div>
-</div>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')" :position="'top'">
+	<MkPostForm @done="$refs.modal.close()" @esc="$refs.modal.close()" v-bind="$attrs"/>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XPostForm from './post-form.vue';
+import { defineComponent } from 'vue';
+import MkModal from '@/components/ui/modal.vue';
+import MkPostForm from '@/components/post-form.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPostForm
+		MkModal,
+		MkPostForm,
 	},
-
-	props: {
-		reply: {
-			type: Object,
-			required: false
-		},
-		renote: {
-			type: Object,
-			required: false
-		},
-		mention: {
-			type: Object,
-			required: false
-		},
-		specified: {
-			type: Object,
-			required: false
-		},
-		initialText: {
-			type: String,
-			required: false
-		},
-		initialNote: {
-			type: Object,
-			required: false
-		},
-		instant: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-		channel: {
-			type: Object,
-			required: false
-		},
-	},
-
-	data() {
-		return {
-			show: true
-		};
-	},
-
-	methods: {
-		focus() {
-			this.$refs.form.focus();
-		},
-
-		close() {
-			this.show = false;
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.main as any).style.pointerEvents = 'none';
-		},
-
-		onPosted() {
-			this.$emit('posted');
-			this.close();
-		},
-
-		onCanceled() {
-			this.$emit('cancel');
-			this.close();
-		},
-
-		onKeydown(e) {
-			if (e.which === 27) { // Esc
-				e.preventDefault();
-				e.stopPropagation();
-				this.close();
-			}
-		},
-	}
+	emits: ['closed'],
 });
 </script>
-
-<style lang="scss" scoped>
-.form-enter-active, .form-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.form-enter, .form-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.form-fade-enter-active, .form-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.form-fade-enter, .form-fade-leave-to {
-	opacity: 0;
-}
-
-.ulveipgl {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .main {
-		display: block;
-		position: fixed;
-		z-index: 10000;
-		top: 32px;
-		left: 0;
-		right: 0;
-		height: calc(100% - 64px);
-		width: 500px;
-		max-width: calc(100% - 16px);
-		overflow: auto;
-		margin: 0 auto 0 auto;
-
-		@media (max-width: 550px) {
-			top: 16px;
-			height: calc(100% - 32px);
-		}
-
-		@media (max-width: 520px) {
-			top: 8px;
-			height: calc(100% - 16px);
-		}
-	}
-}
-</style>

src/client/components/post-form.vue

@@ -1,84 +1,84 @@
 <template>
-<div class="gafaadew"
+<div class="gafaadew" :class="{ modal, _popup: modal }"
+	v-size="{ max: [500] }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
 	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><fa :icon="faTimes"/></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><Fa :icon="faTimes"/></button>
 		<div>
-			<span class="local-only" v-if="localOnly" v-text="$t('_visibility.localOnly')" />
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
+			<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')" :disabled="channel != null">
-				<span v-if="visibility === 'public'"><fa :icon="faGlobe"/></span>
-				<span v-if="visibility === 'home'"><fa :icon="faHome"/></span>
-				<span v-if="visibility === 'followers'"><fa :icon="faUnlock"/></span>
-				<span v-if="visibility === 'specified'"><fa :icon="faEnvelope"/></span>
+				<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
+				<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
+				<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
+				<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
-		<x-note-preview class="preview" v-if="reply" :note="reply"/>
-		<x-note-preview class="preview" v-if="renote" :note="renote"/>
-		<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
+		<XNotePreview class="preview" v-if="reply" :note="reply"/>
+		<XNotePreview class="preview" v-if="renote" :note="renote"/>
+		<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $t('quoteAttached') }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $t('recipient') }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
-					<mk-acct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><fa :icon="faTimes"/></button>
+					<MkAcct :user="u"/>
+					<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><fa :icon="faPlus" fixed-width/></button>
+				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
 			</div>
 		</div>
-		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" v-autocomplete="{ model: 'cw' }" @keydown="onKeydown">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @keydown="onKeydown" @paste="onPaste"></textarea>
-		<x-post-form-attaches class="attaches" :files="files"/>
-		<x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/>
-		<x-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
+		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" @keydown="onKeydown">
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
+		<XPostFormAttaches class="attaches" :files="files" @updated="updateMedia" @detach="detachMedia"/>
+		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
-			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><fa :icon="faPhotoVideo"/></button>
-			<button class="_button" @click="poll = !poll" :class="{ active: poll }" v-tooltip="$t('poll')"><fa :icon="faPollH"/></button>
-			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$t('useCw')"><fa :icon="faEyeSlash"/></button>
-			<button class="_button" @click="insertMention" v-tooltip="$t('mention')"><fa :icon="faAt"/></button>
-			<button class="_button" @click="insertEmoji" v-tooltip="$t('emoji')"><fa :icon="faLaughSquint"/></button>
-			<button class="_button" @click="showActions" v-tooltip="$t('plugin')" v-if="$store.state.postFormActions.length > 0"><fa :icon="faPlug"/></button>
+			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><Fa :icon="faPhotoVideo"/></button>
+			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$t('poll')"><Fa :icon="faPollH"/></button>
+			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$t('useCw')"><Fa :icon="faEyeSlash"/></button>
+			<button class="_button" @click="insertMention" v-tooltip="$t('mention')"><Fa :icon="faAt"/></button>
+			<button class="_button" @click="insertEmoji" v-tooltip="$t('emoji')"><Fa :icon="faLaughSquint"/></button>
+			<button class="_button" @click="showActions" v-tooltip="$t('plugin')" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
 		</footer>
-		<input ref="file" class="file _button" type="file" multiple="multiple" @change="onChangeFile"/>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode';
-import MkVisibilityChooser from './visibility-chooser.vue';
-import MkUserSelect from './user-select.vue';
 import XNotePreview from './note-preview.vue';
 import { parse } from '../../mfm/parse';
-import { host, url } from '../config';
+import { host, url } from '@/config';
 import { erase, unique } from '../../prelude/array';
 import extractMentions from '../../misc/extract-mentions';
 import getAcct from '../../misc/acct/render';
 import { formatTimeString } from '../../misc/format-time-string';
-import { selectDriveFile } from '../scripts/select-drive-file';
+import { Autocomplete } from '@/scripts/autocomplete';
 import { noteVisibilities } from '../../types';
-import { utils } from '@syuilo/aiscript';
+import * as os from '@/os';
+import { selectFile } from '@/scripts/select-file';
+import { notePostInterruptors, postFormActions } from '@/store';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotePreview,
-		XUploader: () => import('./uploader.vue').then(m => m.default),
-		XPostFormAttaches: () => import('./post-form-attaches.vue').then(m => m.default),
-		XPollEditor: () => import('./poll-editor.vue').then(m => m.default)
+		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue'))
 	},
 
+	inject: ['modal'],
+
 	props: {
 		reply: {
 			type: Object,
@@ -117,19 +117,22 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
 	},
 
+	emits: ['posted', 'done', 'esc'],
+
 	data() {
 		return {
 			posting: false,
 			text: '',
 			files: [],
-			uploadings: [],
-			poll: false,
-			pollChoices: [],
-			pollMultiple: false,
-			pollExpiration: [],
+			poll: null,
 			useCw: false,
 			cw: null,
 			localOnly: false,
@@ -139,7 +142,8 @@ export default Vue.extend({
 			draghover: false,
 			quoteId: null,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug
+			postFormActions,
+			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
 	},
 
@@ -190,7 +194,7 @@ export default Vue.extend({
 			return !this.posting &&
 				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
 				(length(this.text.trim()) <= this.max) &&
-				(!this.poll || this.pollChoices.length >= 2);
+				(!this.poll || this.poll.choices.length >= 2);
 		},
 
 		max(): number {
@@ -246,14 +250,14 @@ export default Vue.extend({
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
 			this.visibility = this.reply.visibility;
 			if (this.reply.visibility === 'specified') {
-				this.$root.api('users/show', {
+				os.api('users/show', {
 					userIds: this.reply.visibleUserIds.filter(uid => uid !== this.$store.state.i.id && uid !== this.reply.userId)
 				}).then(users => {
 					this.visibleUsers.push(...users);
 				});
 
 				if (this.reply.userId !== this.$store.state.i.id) {
-					this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
+					os.api('users/show', { userId: this.reply.userId }).then(user => {
 						this.visibleUsers.push(user);
 					});
 				}
@@ -271,15 +275,21 @@ export default Vue.extend({
 			this.cw = this.reply.cw;
 		}
 
-		this.focus();
-
-		this.$nextTick(() => {
+		if (this.autofocus) {
 			this.focus();
-		});
+
+			this.$nextTick(() => {
+				this.focus();
+			});
+		}
+
+		// TODO: detach when unmount
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
+		new Autocomplete(this.$refs.cw, this, { model: 'cw' });
 
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
-			if (!this.instant && !this.mention) {
+			if (!this.instant && !this.mention && !this.specified) {
 				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftKey];
 				if (draft) {
 					this.text = draft.data.text;
@@ -289,10 +299,7 @@ export default Vue.extend({
 					this.localOnly = draft.data.localOnly;
 					this.files = (draft.data.files || []).filter(e => e);
 					if (draft.data.poll) {
-						this.poll = true;
-						this.$nextTick(() => {
-							(this.$refs.poll as any).set(draft.data.poll);
-						});
+						this.poll = draft.data.poll;
 					}
 				}
 			}
@@ -305,13 +312,7 @@ export default Vue.extend({
 				this.cw = init.cw;
 				this.useCw = init.cw != null;
 				if (init.poll) {
-					this.poll = true;
-					this.$nextTick(() => {
-						(this.$refs.poll as any).set({
-							choices: init.poll.choices.map(c => c.text),
-							multiple: init.poll.multiple
-						});
-					});
+					this.poll = init.poll;
 				}
 				this.visibility = init.visibility;
 				this.localOnly = init.localOnly;
@@ -328,11 +329,24 @@ export default Vue.extend({
 			this.$watch('useCw', () => this.saveDraft());
 			this.$watch('cw', () => this.saveDraft());
 			this.$watch('poll', () => this.saveDraft());
-			this.$watch('files', () => this.saveDraft());
+			this.$watch('files', () => this.saveDraft(), { deep: true });
 			this.$watch('visibility', () => this.saveDraft());
 			this.$watch('localOnly', () => this.saveDraft());
 		},
 
+		togglePoll() {
+			if (this.poll) {
+				this.poll = null;
+			} else {
+				this.poll = {
+					choices: ['', ''],
+					multiple: false,
+					expiresAt: null,
+					expiredAfter: null,
+				};
+			}
+		},
+
 		trimmedLength(text: string) {
 			return length(text.trim());
 		},
@@ -346,85 +360,50 @@ export default Vue.extend({
 		},
 
 		chooseFileFrom(ev) {
-			this.$root.menu({
-				items: [{
-					type: 'label',
-					text: this.$t('attachFile'),
-				}, {
-					text: this.$t('upload'),
-					icon: faUpload,
-					action: () => { this.chooseFileFromPc() }
-				}, {
-					text: this.$t('fromDrive'),
-					icon: faCloud,
-					action: () => { this.chooseFileFromDrive() }
-				}, {
-					text: this.$t('fromUrl'),
-					icon: faLink,
-					action: () => { this.chooseFileFromUrl() }
-				}],
-				source: ev.currentTarget || ev.target
-			});
-		},
-
-		chooseFileFromPc() {
-			(this.$refs.file as any).click();
-		},
-
-		chooseFileFromDrive() {
-			selectDriveFile(this.$root, true).then(files => {
+			selectFile(ev.currentTarget || ev.target, this.$t('attachFile'), true).then(files => {
 				for (const file of files) {
-					this.attachMedia(file);
+					this.files.push(file);
 				}
 			});
 		},
 
-		attachMedia(driveFile) {
-			this.files.push(driveFile);
-		},
-
 		detachMedia(id) {
 			this.files = this.files.filter(x => x.id != id);
 		},
 
 		updateMedia(file) {
-			Vue.set(this.files, this.files.findIndex(x => x.id === file.id), file);
-		},
-
-		onChangeFile() {
-			for (const x of Array.from((this.$refs.file as any).files)) this.upload(x);
+			this.files[this.files.findIndex(x => x.id === file.id)] = file;
 		},
 
 		upload(file: File, name?: string) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
+			os.upload(file, this.$store.state.settings.uploadFolder, name).then(res => {
+				this.files.push(res);
+			});
 		},
 
-		onChangeUploadings(uploads) {
-			this.$emit('change-uploadings', uploads);
-		},
-
-		onPollUpdate() {
-			const got = this.$refs.poll.get();
-			this.pollChoices = got.choices;
-			this.pollMultiple = got.multiple;
-			this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter];
+		onPollUpdate(poll) {
+			this.poll = poll;
 			this.saveDraft();
 		},
 
-		setVisibility() {
+		async setVisibility() {
 			if (this.channel) {
 				// TODO: information dialog
 				return;
 			}
-			const w = this.$root.new(MkVisibilityChooser, {
-				source: this.$refs.visibilityButton,
+
+			os.popup(await import('./visibility-picker.vue'), {
 				currentVisibility: this.visibility,
-				currentLocalOnly: this.localOnly
-			});
-			w.$once('chosen', ({ visibility, localOnly }) => {
-				this.applyVisibility(visibility);
-				this.localOnly = localOnly;
-			});
+				currentLocalOnly: this.localOnly,
+				src: this.$refs.visibilityButton
+			}, {
+				changeVisibility: visibility => {
+					this.applyVisibility(visibility);
+				},
+				changeLocalOnly: localOnly => {
+					this.localOnly = localOnly;
+				}
+			}, 'closed');
 		},
 
 		applyVisibility(v: string) {
@@ -432,8 +411,7 @@ export default Vue.extend({
 		},
 
 		addVisibleUser() {
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
+			os.selectUser().then(user => {
 				this.visibleUsers.push(user);
 			});
 		},
@@ -445,12 +423,13 @@ export default Vue.extend({
 		clear() {
 			this.text = '';
 			this.files = [];
-			this.poll = false;
+			this.poll = null;
 			this.quoteId = null;
 		},
 
 		onKeydown(e) {
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
+			if ((e.which === 10 || e.which === 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post();
+			if (e.which === 27) this.$emit('esc');
 		},
 
 		async onPaste(e: ClipboardEvent) {
@@ -469,7 +448,7 @@ export default Vue.extend({
 			if (!this.renote && !this.quoteId && paste.startsWith(url + '/notes/')) {
 				e.preventDefault();
 
-				this.$root.dialog({
+				os.dialog({
 					type: 'info',
 					text: this.$t('quoteQuestion'),
 					showCancelButton: true
@@ -487,7 +466,7 @@ export default Vue.extend({
 		onDragover(e) {
 			if (!e.dataTransfer.items[0]) return;
 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
 			if (isFile || isDriveFile) {
 				e.preventDefault();
 				this.draghover = true;
@@ -514,7 +493,7 @@ export default Vue.extend({
 			}
 
 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.files.push(file);
@@ -537,7 +516,7 @@ export default Vue.extend({
 					visibility: this.visibility,
 					localOnly: this.localOnly,
 					files: this.files,
-					poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined
+					poll: this.poll
 				}
 			};
 
@@ -559,29 +538,30 @@ export default Vue.extend({
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined,
 				channelId: this.channel ? this.channel.id : undefined,
-				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
+				poll: this.poll,
 				cw: this.useCw ? this.cw || '' : undefined,
 				localOnly: this.localOnly,
 				visibility: this.visibility,
 				visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
-				viaMobile: this.$root.isMobile
+				viaMobile: os.isMobile
 			};
 
 			// plugin
-			if (this.$store.state.notePostInterruptors.length > 0) {
-				for (const interruptor of this.$store.state.notePostInterruptors) {
-					data = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(data))));
+			if (notePostInterruptors.length > 0) {
+				for (const interruptor of notePostInterruptors) {
+					data = await interruptor.handler(JSON.parse(JSON.stringify(data)));
 				}
 			}
 
 			this.posting = true;
-			this.$root.api('notes/create', data).then(() => {
+			os.api('notes/create', data).then(() => {
 				this.clear();
 				this.deleteDraft();
 				this.$emit('posted');
 			}).catch(err => {
 			}).then(() => {
 				this.posting = false;
+				this.$emit('done');
 			});
 
 			if (this.text && this.text != '') {
@@ -592,39 +572,32 @@ export default Vue.extend({
 		},
 
 		cancel() {
-			this.$emit('cancel');
+			this.$emit('done');
 		},
 
 		insertMention() {
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
-				insertTextAtCursor(this.$refs.text, getAcct(user) + ' ');
+			os.selectUser().then(user => {
+				insertTextAtCursor(this.$refs.text, '@' + getAcct(user) + ' ');
 			});
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('./emoji-picker.vue').then(m => m.default), {
-				source: ev.currentTarget || ev.target
-			}).$once('chosen', emoji => {
+			os.pickEmoji(ev.currentTarget || ev.target).then(emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
-				vm.close();
 			});
 		},
 
 		showActions(ev) {
-			this.$root.menu({
-				items: this.$store.state.postFormActions.map(action => ({
-					text: action.title,
-					action: () => {
-						action.handler({
-							text: this.text
-						}, (key, value) => {
-							if (key === 'text') { this.text = value; }
-						});
-					}
-				})),
-				source: ev.currentTarget || ev.target,
-			});
+			os.modalMenu(postFormActions.map(action => ({
+				text: action.title,
+				action: () => {
+					action.handler({
+						text: this.text
+					}, (key, value) => {
+						if (key === 'text') { this.text = value; }
+					});
+				}
+			})), ev.currentTarget || ev.target);
 		}
 	}
 });
@@ -632,26 +605,22 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .gafaadew {
-	background: var(--panel);
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
 
 	> header {
 		z-index: 1000;
 		height: 66px;
 
-		@media (max-width: 500px) {
-			height: 50px;
-		}
-
 		> .cancel {
 			padding: 0;
 			font-size: 20px;
 			width: 64px;
 			line-height: 66px;
-
-			@media (max-width: 500px) {
-				width: 50px;
-				line-height: 50px;
-			}
 		}
 
 		> div {
@@ -662,10 +631,6 @@ export default Vue.extend({
 			> .text-count {
 				opacity: 0.7;
 				line-height: 66px;
-
-				@media (max-width: 500px) {
-					line-height: 50px;
-				}
 			}
 
 			> .visibility {
@@ -678,8 +643,9 @@ export default Vue.extend({
 				}
 			}
 			
-			.local-only {
-				margin: 0 8px;
+			> .local-only {
+				margin: 0 0 0 12px;
+				opacity: 0.7;
 			}
 
 			> .submit {
@@ -690,10 +656,6 @@ export default Vue.extend({
 				vertical-align: bottom;
 				border-radius: 4px;
 
-				@media (max-width: 500px) {
-					margin: 8px;
-				}
-
 				&:disabled {
 					opacity: 0.7;
 				}
@@ -706,13 +668,6 @@ export default Vue.extend({
 	}
 
 	> .form {
-		max-width: 500px;
-		margin: 0 auto;
-
-		&.fixed {
-			max-width: unset;
-		}
-
 		> .preview {
 			padding: 16px;
 		}
@@ -741,10 +696,6 @@ export default Vue.extend({
 			overflow: auto;
 			white-space: nowrap;
 
-			@media (max-width: 500px) {
-				padding: 6px 16px;
-			}
-
 			> .visibleUsers {
 				display: inline;
 				top: -1px;
@@ -782,10 +733,6 @@ export default Vue.extend({
 			color: var(--fg);
 			font-family: inherit;
 
-			@media (max-width: 500px) {
-				padding: 0 16px;
-			}
-
 			&:focus {
 				outline: none;
 			}
@@ -806,31 +753,14 @@ export default Vue.extend({
 			min-width: 100%;
 			min-height: 90px;
 
-			@media (max-width: 500px) {
-				min-height: 80px;
-			}
-
 			&.withCw {
 				padding-top: 8px;
 			}
 		}
 
-		> .mk-uploader {
-			margin: 8px 0 0 0;
-			padding: 8px;
-		}
-
-		> .file {
-			display: none;
-		}
-
 		> footer {
 			padding: 0 16px 16px 16px;
 
-			@media (max-width: 500px) {
-				padding: 0 8px 8px 8px;
-			}
-
 			> button {
 				display: inline-block;
 				padding: 0;
@@ -850,5 +780,45 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	&.max-width_500px {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> div {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
 }
 </style>

src/client/components/reaction-icon.vue

@@ -1,10 +1,11 @@
 <template>
-<mk-emoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+<MkEmoji :emoji="reaction.startsWith(':') ? null : reaction" :name="reaction.startsWith(':') ? reaction.substr(1, reaction.length - 2) : null" :customEmojis="customEmojis" :is-reaction="true" :normal="true" :no-style="noStyle"/>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		reaction: {
 			type: String,

src/client/components/reaction-picker.vue

@@ -1,31 +1,28 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<div class="rdfaahpb">
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="rdfaahpb _popup" v-hotkey="keymap">
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
-			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
+			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><XReactionIcon :reaction="reaction"/></button>
 		</div>
-		<input class="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+		<input class="text" ref="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText">
 	</div>
-</x-popup>
+</MkModal>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
-import XReactionIcon from './reaction-icon.vue';
-import XPopup from './popup.vue';
+import XReactionIcon from '@/components/reaction-icon.vue';
+import MkModal from '@/components/ui/modal.vue';
+import { Autocomplete } from '@/scripts/autocomplete';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPopup,
 		XReactionIcon,
+		MkModal,
 	},
 
 	props: {
-		source: {
-			required: true
-		},
-
 		reactions: {
 			required: false
 		},
@@ -35,8 +32,14 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
+
+		src: {
+			required: false
+		},
 	},
 
+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			rs: this.reactions || this.$store.state.settings.reactions,
@@ -70,21 +73,30 @@ export default Vue.extend({
 
 	watch: {
 		focus(i) {
-			this.$refs.buttons.children[i].focus();
+			this.$refs.buttons.children[i].focus({
+				preventScroll: true
+			});
 		}
 	},
 
 	mounted() {
-		this.focus = 0;
+		this.$nextTick(() => {
+			this.focus = 0;
+		});
+
+		// TODO: detach when unmount
+		new Autocomplete(this.$refs.text, this, { model: 'text' });
 	},
 
 	methods: {
 		close() {
-			this.$refs.popup.close();
+			this.$emit('done');
+			this.$refs.modal.close();
 		},
 	
 		react(reaction) {
-			this.$emit('chosen', reaction);
+			this.$emit('done', reaction);
+			this.$refs.modal.close();
 		},
 
 		reactText() {
@@ -136,6 +148,7 @@ export default Vue.extend({
 
 		&.showFocus {
 			> button:focus {
+				position: relative;
 				z-index: 1;
 
 				&:after {

src/client/components/reactions-viewer.details.vue

@@ -1,28 +1,36 @@
 <template>
-<mk-tooltip :source="source" ref="tooltip">
-	<template v-if="users.length <= 10">
-		<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-			<mk-avatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-			<mk-user-name :user="u" :nowrap="false" style="line-height: 24px;"/>
-		</b>
-	</template>
-	<template v-if="10 < users.length">
-		<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
-			<mk-avatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
-			<mk-user-name :user="u" :nowrap="false" style="line-height: 24px;"/>
-		</b>
-		<span slot="omitted">+{{ count - 10 }}</span>
-	</template>
-</mk-tooltip>
+<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')">
+	<div class="bqxuuuey">
+		<div class="info">
+			<div>{{ reaction.replace('@.', '') }}</div>
+			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon"/>
+		</div>
+		<template v-if="users.length <= 10">
+			<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
+				<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
+				<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+			</b>
+		</template>
+		<template v-if="10 < users.length">
+			<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
+				<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
+				<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
+			</b>
+			<span slot="omitted">+{{ count - 10 }}</span>
+		</template>
+	</div>
+</MkTooltip>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
+import XReactionIcon from './reaction-icon.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
-		MkTooltip
+		MkTooltip,
+		XReactionIcon
 	},
 	props: {
 		reaction: {
@@ -37,15 +45,30 @@ export default Vue.extend({
 			type: Number,
 			required: true,
 		},
+		emojis: {
+			type: Array,
+			required: true,
+		},
 		source: {
 			required: true,
 		}
 	},
-
-	methods: {
-		close() {
-			this.$refs.tooltip.close();
-		}
-	}
+	emits: ['closed'],
 })
 </script>
+
+<style lang="scss" scoped>
+.bqxuuuey {
+	> .info {
+		padding: 0 0 8px 0;
+		text-align: center;
+
+		> .icon {
+			display: block;
+			width: 60px;
+			height: 60px;
+			margin: 0 auto;
+		}
+	}
+}
+</style>

src/client/components/reactions-viewer.reaction.vue

@@ -4,24 +4,25 @@
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction(reaction)"
 	v-if="count > 0"
-	@touchstart="onMouseover"
+	@touchstart.passive="onMouseover"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
 	@touchend="onMouseleave"
 	ref="reaction"
 	v-particle="canToggle"
 >
-	<x-reaction-icon :reaction="reaction" :custom-emojis="note.emojis" ref="icon"/>
+	<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
 	<span>{{ count }}</span>
 </button>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import XDetails from './reactions-viewer.details.vue';
-import XReactionIcon from './reaction-icon.vue';
+import { defineComponent, ref } from 'vue';
+import XDetails from '@/components/reactions-viewer.details.vue';
+import XReactionIcon from '@/components/reaction-icon.vue';
+import * as os from '@/os';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon
 	},
@@ -45,7 +46,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			details: null,
+			close: null,
 			detailsTimeoutId: null,
 			isHovering: false
 		};
@@ -58,7 +59,7 @@ export default Vue.extend({
 	watch: {
 		count(newCount, oldCount) {
 			if (oldCount < newCount) this.anime();
-			if (this.details != null) this.openDetails();
+			if (this.close != null) this.openDetails();
 		},
 	},
 	mounted() {
@@ -70,18 +71,18 @@ export default Vue.extend({
 
 			const oldReaction = this.note.myReaction;
 			if (oldReaction) {
-				this.$root.api('notes/reactions/delete', {
+				os.api('notes/reactions/delete', {
 					noteId: this.note.id
 				}).then(() => {
 					if (oldReaction !== this.reaction) {
-						this.$root.api('notes/reactions/create', {
+						os.api('notes/reactions/create', {
 							noteId: this.note.id,
 							reaction: this.reaction
 						});
 					}
 				});
 			} else {
-				this.$root.api('notes/reactions/create', {
+				os.api('notes/reactions/create', {
 					noteId: this.note.id,
 					reaction: this.reaction
 				});
@@ -99,7 +100,7 @@ export default Vue.extend({
 			this.closeDetails();
 		},
 		openDetails() {
-			this.$root.api('notes/reactions', {
+			os.api('notes/reactions', {
 				noteId: this.note.id,
 				type: this.reaction,
 				limit: 11
@@ -110,18 +111,26 @@ export default Vue.extend({
 
 				this.closeDetails();
 				if (!this.isHovering) return;
-				this.details = this.$root.new(XDetails, {
+
+				const showing = ref(true);
+				os.popup(XDetails, {
+					showing,
 					reaction: this.reaction,
+					emojis: this.note.emojis,
 					users,
 					count: this.count,
 					source: this.$refs.reaction
-				});
+				}, {}, 'closed');
+
+				this.close = () => {
+					showing.value = false;
+				};
 			});
 		},
 		closeDetails() {
-			if (this.details != null) {
-				this.details.close();
-				this.details = null;
+			if (this.close != null) {
+				this.close();
+				this.close = null;
 			}
 		},
 		anime() {