Migrate to Vue3 (#6587)

* Update reaction.vue

* fix  bug

* wip

* wip

* wjio

* wip

* Revert "wip"

This reverts commit e427f2160adf4e8a4147006e25a89854edab0033.

* 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

17 files changed, 251 insertions, 248 deletions

diff --git a/src/client/widgets/activity.calendar.vue b/src/client/widgets/activity.calendar.vue
index 334c2ea56e..b833bd65ca 100644
--- a/src/client/widgets/activity.calendar.vue
+++ b/src/client/widgets/activity.calendar.vue
@@ -24,9 +24,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: ['data'],
 	created() {
 		for (const d of this.data) {
diff --git a/src/client/widgets/activity.chart.vue b/src/client/widgets/activity.chart.vue
index 2b70493552..9702d66663 100644
--- a/src/client/widgets/activity.chart.vue
+++ b/src/client/widgets/activity.chart.vue
@@ -25,7 +25,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';
 
 function dragListen(fn) {
 	window.addEventListener('mousemove',  fn);
@@ -39,7 +40,7 @@ function dragClear(fn) {
 	window.removeEventListener('mouseup',    dragClear);
 }
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['data'],
 	data() {
 		return {
diff --git a/src/client/widgets/activity.vue b/src/client/widgets/activity.vue
index 58b1631367..8db13723ec 100644
--- a/src/client/widgets/activity.vue
+++ b/src/client/widgets/activity.vue
@@ -1,26 +1,28 @@
 <template>
-<mk-container :show-header="props.showHeader" :naked="props.transparent">
-	<template #header><fa :icon="faChartBar"/>{{ $t('_widgets.activity') }}</template>
-	<template #func><button @click="toggleView()" class="_button"><fa :icon="faSort"/></button></template>
+<MkContainer :show-header="props.showHeader" :naked="props.transparent">
+	<template #header><Fa :icon="faChartBar"/>{{ $t('_widgets.activity') }}</template>
+	<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
 
 	<div>
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 		<template v-else>
-			<x-calendar v-show="props.view === 0" :data="[].concat(activity)"/>
-			<x-chart v-show="props.view === 1" :data="[].concat(activity)"/>
+			<XCalendar v-show="props.view === 0" :data="[].concat(activity)"/>
+			<XChart v-show="props.view === 1" :data="[].concat(activity)"/>
 		</template>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
 import XCalendar from './activity.calendar.vue';
 import XChart from './activity.chart.vue';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'activity',
 	props: () => ({
 		showHeader: {
@@ -37,7 +39,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XCalendar,
@@ -51,7 +56,7 @@ export default define({
 		};
 	},
 	mounted() {
-		this.$root.api('charts/user/notes', {
+		os.api('charts/user/notes', {
 			userId: this.$store.state.i.id,
 			span: 'day',
 			limit: 7 * 21
diff --git a/src/client/widgets/calendar.vue b/src/client/widgets/calendar.vue
index 8ef74ff744..d464f27ec4 100644
--- a/src/client/widgets/calendar.vue
+++ b/src/client/widgets/calendar.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-calendar" :class="{ _panel: !props.transparent }">
-	<div class="calendar" :data-is-holiday="isHoliday">
+	<div class="calendar" :class="{ isHoliday }">
 		<p class="month-and-year">
 			<span class="year">{{ $t('yearX', { year }) }}</span>
 			<span class="month">{{ $t('monthX', { month }) }}</span>
@@ -32,9 +32,11 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'calendar',
 	props: () => ({
 		transparent: {
@@ -42,7 +44,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			now: new Date(),
@@ -61,7 +66,7 @@ export default define({
 		this.tick();
 		this.clock = setInterval(this.tick, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
@@ -116,7 +121,7 @@ export default define({
 		width: 60%;
 		text-align: center;
 
-		&[data-is-holiday] {
+		&.isHoliday {
 			> .day {
 				color: #ef95a0;
 			}
diff --git a/src/client/widgets/clock.vue b/src/client/widgets/clock.vue
index 6388324125..2aad24baec 100644
--- a/src/client/widgets/clock.vue
+++ b/src/client/widgets/clock.vue
@@ -1,17 +1,19 @@
 <template>
-<mk-container :naked="props.transparent" :show-header="false">
+<MkContainer :naked="props.transparent" :show-header="false">
 	<div class="vubelbmv">
-		<mk-analog-clock class="clock"/>
+		<MkAnalogClock class="clock"/>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
-import MkContainer from '../components/ui/container.vue';
-import MkAnalogClock from '../components/analog-clock.vue';
+import MkContainer from '@/components/ui/container.vue';
+import MkAnalogClock from '@/components/analog-clock.vue';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'clock',
 	props: () => ({
 		transparent: {
@@ -19,7 +21,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		MkAnalogClock
diff --git a/src/client/widgets/define.ts b/src/client/widgets/define.ts
index 50c9b10e81..c199d38e72 100644
--- a/src/client/widgets/define.ts
+++ b/src/client/widgets/define.ts
@@ -1,30 +1,32 @@
-import Vue from 'vue';
-import { Form } from '../scripts/form';
+import { defineComponent } from 'vue';
+import { Form } from '@/scripts/form';
+import * as os from '@/os';
 
 export default function <T extends Form>(data: {
 	name: string;
 	props?: () => T;
 }) {
-	return Vue.extend({
+	return defineComponent({
 		props: {
 			widget: {
 				type: Object,
 				required: false
 			},
-			isCustomizeMode: {
-				type: Boolean,
-				default: false
+			settingCallback: {
+				required: false
 			}
 		},
 
+		data() {
+			return {
+				props: this.widget ? JSON.parse(JSON.stringify(this.widget.data)) : {}
+			};
+		},
+
 		computed: {
 			id(): string {
 				return this.widget ? this.widget.id : null;
 			},
-
-			props(): Record<string, any> {
-				return this.widget ? this.widget.data : {};
-			}
 		},
 
 		created() {
@@ -32,7 +34,9 @@ export default function <T extends Form>(data: {
 
 			this.$watch('props', () => {
 				this.mergeProps();
-			});
+			}, { deep: true });
+
+			if (this.settingCallback) this.settingCallback(this.setting);
 		},
 
 		methods: {
@@ -41,7 +45,7 @@ export default function <T extends Form>(data: {
 					const defaultProps = data.props();
 					for (const prop of Object.keys(defaultProps)) {
 						if (this.props.hasOwnProperty(prop)) continue;
-						Vue.set(this.props, prop, defaultProps[prop].default);
+						this.props[prop] = defaultProps[prop].default;
 					}
 				}
 			},
@@ -51,11 +55,11 @@ export default function <T extends Form>(data: {
 				for (const item of Object.keys(form)) {
 					form[item].default = this.props[item];
 				}
-				const { canceled, result } = await this.$root.form(data.name, form);
+				const { canceled, result } = await os.form(data.name, form);
 				if (canceled) return;
 
 				for (const key of Object.keys(result)) {
-					Vue.set(this.props, key, result[key]);
+					this.props[key] = result[key];
 				}
 
 				this.save();
@@ -63,7 +67,10 @@ export default function <T extends Form>(data: {
 
 			save() {
 				if (this.widget) {
-					this.$store.commit('deviceUser/updateWidget', this.widget);
+					this.$store.commit('deviceUser/updateWidget', {
+						...this.widget,
+						data: this.props
+					});
 				}
 			}
 		}
diff --git a/src/client/widgets/digital-clock.vue b/src/client/widgets/digital-clock.vue
index 0e68fe0ff4..702f335c7f 100644
--- a/src/client/widgets/digital-clock.vue
+++ b/src/client/widgets/digital-clock.vue
@@ -13,9 +13,11 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'digitalClock',
 	props: () => ({
 		transparent: {
@@ -32,7 +34,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	data() {
 		return {
 			clock: null,
@@ -45,12 +50,12 @@ export default define({
 	},
 	created() {
 		this.tick();
-		this.$watch('props.showMs', () => {
+		this.$watch(() => this.props.showMs, () => {
 			if (this.clock) clearInterval(this.clock);
 			this.clock = setInterval(this.tick, this.props.showMs ? 10 : 1000);
 		}, { immediate: true });
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 7c3fc62381..5cfa87e58f 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -1,9 +1,9 @@
 <template>
-<mk-container :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
-	<template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
+<MkContainer :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
+	<template #header><Fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
 
 	<div class="wbrkwalb">
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 		<transition-group tag="div" name="chart" class="instances" v-else>
 			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
 				<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
@@ -11,20 +11,22 @@
 					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
 					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
 				</div>
-				<mk-mini-chart class="chart" :src="charts[i].requests.received"/>
+				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
 			</div>
 		</transition-group>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import MkMiniChart from '../components/mini-chart.vue';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'federation',
 	props: () => ({
 		showHeader: {
@@ -32,7 +34,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},
@@ -60,16 +65,16 @@ export default define({
 		this.fetch();
 		this.clock = setInterval(this.fetch, 1000 * 60);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
 		async fetch() {
-			const instances = await this.$root.api('federation/instances', {
+			const instances = await os.api('federation/instances', {
 				sort: '+lastCommunicatedAt',
 				limit: 5
 			});
-			const charts = await Promise.all(instances.map(i => this.$root.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+			const charts = await Promise.all(instances.map(i => os.api('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
 			this.instances = instances;
 			this.charts = charts;
 			this.fetching = false;
diff --git a/src/client/widgets/index.ts b/src/client/widgets/index.ts
index 743146193c..ee76bd97d2 100644
--- a/src/client/widgets/index.ts
+++ b/src/client/widgets/index.ts
@@ -1,17 +1,19 @@
-import Vue from 'vue';
+import { App, defineAsyncComponent } from 'vue';
 
-Vue.component('mkw-welcome', () => import('./welcome.vue').then(m => m.default));
-Vue.component('mkw-memo', () => import('./memo.vue').then(m => m.default));
-Vue.component('mkw-notifications', () => import('./notifications.vue').then(m => m.default));
-Vue.component('mkw-timeline', () => import('./timeline.vue').then(m => m.default));
-Vue.component('mkw-calendar', () => import('./calendar.vue').then(m => m.default));
-Vue.component('mkw-rss', () => import('./rss.vue').then(m => m.default));
-Vue.component('mkw-trends', () => import('./trends.vue').then(m => m.default));
-Vue.component('mkw-clock', () => import('./clock.vue').then(m => m.default));
-Vue.component('mkw-activity', () => import('./activity.vue').then(m => m.default));
-Vue.component('mkw-photos', () => import('./photos.vue').then(m => m.default));
-Vue.component('mkw-digitalClock', () => import('./digital-clock.vue').then(m => m.default));
-Vue.component('mkw-federation', () => import('./federation.vue').then(m => m.default));
+export default function(app: App) {
+	app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue')));
+	app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue')));
+	app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue')));
+	app.component('MkwCalendar', defineAsyncComponent(() => import('./calendar.vue')));
+	app.component('MkwRss', defineAsyncComponent(() => import('./rss.vue')));
+	app.component('MkwTrends', defineAsyncComponent(() => import('./trends.vue')));
+	app.component('MkwClock', defineAsyncComponent(() => import('./clock.vue')));
+	app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
+	app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
+	app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
+	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
+	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
+}
 
 export const widgets = [
 	'memo',
@@ -25,4 +27,5 @@ export const widgets = [
 	'photos',
 	'digitalClock',
 	'federation',
+	'postForm',
 ];
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 0d319b225e..8b14d61c73 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -1,20 +1,22 @@
 <template>
-<mk-container :show-header="props.showHeader">
-	<template #header><fa :icon="faStickyNote"/>{{ $t('_widgets.memo') }}</template>
+<MkContainer :show-header="props.showHeader">
+	<template #header><Fa :icon="faStickyNote"/>{{ $t('_widgets.memo') }}</template>
 
 	<div class="otgbylcu">
 		<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
 		<button @click="saveMemo" :disabled="!changed" class="_buttonPrimary">{{ $t('save') }}</button>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'memo',
 	props: () => ({
 		showHeader: {
@@ -22,7 +24,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},
@@ -39,7 +44,7 @@ export default define({
 	created() {
 		this.text = this.$store.state.settings.memo;
 
-		this.$watch('$store.state.settings.memo', text => {
+		this.$watch(() => this.$store.state.settings.memo, text => {
 			this.text = text;
 		});
 	},
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 9d6282735b..490c4d758f 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -1,21 +1,23 @@
 <template>
-<mk-container :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
-	<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
-	<template #func><button @click="configure()" class="_button"><fa :icon="faCog"/></button></template>
+<MkContainer :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
+	<template #header><Fa :icon="faBell"/>{{ $t('notifications') }}</template>
+	<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template>
 
 	<div>
-		<x-notifications :include-types="props.includingTypes"/>
+		<XNotifications :include-types="props.includingTypes"/>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
-import XNotifications from '../components/notifications.vue';
+import MkContainer from '@/components/ui/container.vue';
+import XNotifications from '@/components/notifications.vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'notifications',
 	props: () => ({
 		showHeader: {
@@ -32,7 +34,11 @@ export default define({
 			default: null,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
+
 	components: {
 		MkContainer,
 		XNotifications,
@@ -46,12 +52,15 @@ export default define({
 
 	methods: {
 		async configure() {
-			this.$root.new(await import('../components/notification-setting-window.vue').then(m => m.default), {
+			os.popup(await import('@/components/notification-setting-window.vue'), {
 				includingTypes: this.props.includingTypes,
-			}).$on('ok', async ({ includingTypes }) => {
-				this.props.includingTypes = includingTypes;
-				this.save();
-			});
+			}, {
+				done: async (res) => {
+					const { includingTypes } = res;
+					this.props.includingTypes = includingTypes;
+					this.save();
+				}
+			}, 'closed');
 		}
 	}
 });
diff --git a/src/client/widgets/photos.vue b/src/client/widgets/photos.vue
index 2b8399df9b..2fa0a48574 100644
--- a/src/client/widgets/photos.vue
+++ b/src/client/widgets/photos.vue
@@ -1,9 +1,9 @@
 <template>
-<mk-container :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent">
-	<template #header><fa :icon="faCamera"/>{{ $t('_widgets.photos') }}</template>
+<MkContainer :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent ? true : null">
+	<template #header><Fa :icon="faCamera"/>{{ $t('_widgets.photos') }}</template>
 
 	<div class="">
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 		<div v-else :class="$style.stream">
 			<div v-for="(image, i) in images" :key="i"
 				:class="$style.img"
@@ -11,16 +11,18 @@
 			></div>
 		</div>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faCamera } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'photos',
 	props: () => ({
 		showHeader: {
@@ -32,7 +34,10 @@ export default define({
 			default: false,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 	},
@@ -45,11 +50,11 @@ export default define({
 		};
 	},
 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 
 		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
-		this.$root.api('drive/stream', {
+		os.api('drive/stream', {
 			type: 'image/*',
 			limit: 9
 		}).then(images => {
@@ -57,7 +62,7 @@ export default define({
 			this.fetching = false;
 		});
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},
 	methods: {
diff --git a/src/client/widgets/post-form.vue b/src/client/widgets/post-form.vue
new file mode 100644
index 0000000000..5ecaa67b5a
--- /dev/null
+++ b/src/client/widgets/post-form.vue
@@ -0,0 +1,23 @@
+<template>
+<XPostForm class="_panel" :fixed="true" :autofocus="false"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XPostForm from '@/components/post-form.vue';
+import define from './define';
+
+const widget = define({
+	name: 'postForm',
+	props: () => ({
+	})
+});
+
+export default defineComponent({
+	extends: widget,
+
+	components: {
+		XPostForm,
+	},
+});
+</script>
diff --git a/src/client/widgets/rss.vue b/src/client/widgets/rss.vue
index 3a76c8fb4f..ba84ceefa3 100644
--- a/src/client/widgets/rss.vue
+++ b/src/client/widgets/rss.vue
@@ -1,23 +1,25 @@
 <template>
-<mk-container :show-header="props.showHeader">
-	<template #header><fa :icon="faRssSquare"/>RSS</template>
-	<template #func><button class="_button" @click="setting"><fa :icon="faCog"/></button></template>
+<MkContainer :show-header="props.showHeader">
+	<template #header><Fa :icon="faRssSquare"/>RSS</template>
+	<template #func><button class="_button" @click="setting"><Fa :icon="faCog"/></button></template>
 
 	<div class="ekmkgxbj">
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 		<div class="feed" v-else>
 			<a v-for="item in items" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
 		</div>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'rss',
 	props: () => ({
 		showHeader: {
@@ -29,7 +31,10 @@ export default define({
 			default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer
 	},
@@ -44,9 +49,9 @@ export default define({
 	mounted() {
 		this.fetch();
 		this.clock = setInterval(this.fetch, 60000);
-		this.$watch('props.url', this.fetch);
+		this.$watch(() => this.props.url, this.fetch);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index ca6af76126..2c98b013d3 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -1,32 +1,34 @@
 <template>
-<mk-container :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
+<MkContainer :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
 	<template #header>
 		<button @click="choose" class="_button">
-			<fa v-if="props.src === 'home'" :icon="faHome"/>
-			<fa v-if="props.src === 'local'" :icon="faComments"/>
-			<fa v-if="props.src === 'social'" :icon="faShareAlt"/>
-			<fa v-if="props.src === 'global'" :icon="faGlobe"/>
-			<fa v-if="props.src === 'list'" :icon="faListUl"/>
-			<fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
+			<Fa v-if="props.src === 'home'" :icon="faHome"/>
+			<Fa v-if="props.src === 'local'" :icon="faComments"/>
+			<Fa v-if="props.src === 'social'" :icon="faShareAlt"/>
+			<Fa v-if="props.src === 'global'" :icon="faGlobe"/>
+			<Fa v-if="props.src === 'list'" :icon="faListUl"/>
+			<Fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
 			<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
-			<fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
+			<Fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
 		</button>
 	</template>
 
 	<div>
-		<x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list ? props.list.id : null" :antenna="props.antenna ? props.antenna.id : null"/>
+		<XTimeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list ? props.list.id : null" :antenna="props.antenna ? props.antenna.id : null"/>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
 import { faComments } from '@fortawesome/free-regular-svg-icons';
-import MkContainer from '../components/ui/container.vue';
-import XTimeline from '../components/timeline.vue';
+import MkContainer from '@/components/ui/container.vue';
+import XTimeline from '@/components/timeline.vue';
 import define from './define';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'timeline',
 	props: () => ({
 		showHeader: {
@@ -48,7 +50,10 @@ export default define({
 			hidden: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer,
 		XTimeline,
@@ -65,8 +70,8 @@ export default define({
 		async choose(ev) {
 			this.menuOpened = true;
 			const [antennas, lists] = await Promise.all([
-				this.$root.api('antennas/list'),
-				this.$root.api('users/lists/list')
+				os.api('antennas/list'),
+				os.api('users/lists/list')
 			]);
 			const antennaItems = antennas.map(antenna => ({
 				text: antenna.name,
@@ -84,27 +89,23 @@ export default define({
 					this.setSrc('list');
 				}
 			}));
-			this.$root.menu({
-				items: [{
-					text: this.$t('_timelines.home'),
-					icon: faHome,
-					action: () => { this.setSrc('home') }
-				}, {
-					text: this.$t('_timelines.local'),
-					icon: faComments,
-					action: () => { this.setSrc('local') }
-				}, {
-					text: this.$t('_timelines.social'),
-					icon: faShareAlt,
-					action: () => { this.setSrc('social') }
-				}, {
-					text: this.$t('_timelines.global'),
-					icon: faGlobe,
-					action: () => { this.setSrc('global') }
-				}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems],
-				noCenter: true,
-				source: ev.currentTarget || ev.target
-			}).then(() => {
+			os.modalMenu([{
+				text: this.$t('_timelines.home'),
+				icon: faHome,
+				action: () => { this.setSrc('home') }
+			}, {
+				text: this.$t('_timelines.local'),
+				icon: faComments,
+				action: () => { this.setSrc('local') }
+			}, {
+				text: this.$t('_timelines.social'),
+				icon: faShareAlt,
+				action: () => { this.setSrc('social') }
+			}, {
+				text: this.$t('_timelines.global'),
+				icon: faGlobe,
+				action: () => { this.setSrc('global') }
+			}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget || ev.target).then(() => {
 				this.menuOpened = false;
 			});
 		},
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index b439f91d54..17262445ef 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -1,29 +1,31 @@
 <template>
-<mk-container :show-header="props.showHeader">
-	<template #header><fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
+<MkContainer :show-header="props.showHeader">
+	<template #header><Fa :icon="faHashtag"/>{{ $t('_widgets.trends') }}</template>
 
 	<div class="wbrkwala">
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 		<transition-group tag="div" name="chart" class="tags" v-else>
 			<div v-for="stat in stats" :key="stat.tag">
 				<div class="tag">
 					<router-link class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
 					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
 				</div>
-				<mk-mini-chart class="chart" :src="stat.chart"/>
+				<MkMiniChart class="chart" :src="stat.chart"/>
 			</div>
 		</transition-group>
 	</div>
-</mk-container>
+</MkContainer>
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
-import MkContainer from '../components/ui/container.vue';
+import MkContainer from '@/components/ui/container.vue';
 import define from './define';
-import MkMiniChart from '../components/mini-chart.vue';
+import MkMiniChart from '@/components/mini-chart.vue';
+import * as os from '@/os';
 
-export default define({
+const widget = define({
 	name: 'hashtags',
 	props: () => ({
 		showHeader: {
@@ -31,7 +33,10 @@ export default define({
 			default: true,
 		},
 	})
-}).extend({
+});
+
+export default defineComponent({
+	extends: widget,
 	components: {
 		MkContainer, MkMiniChart
 	},
@@ -46,12 +51,12 @@ export default define({
 		this.fetch();
 		this.clock = setInterval(this.fetch, 1000 * 60);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
 		fetch() {
-			this.$root.api('hashtags/trend').then(stats => {
+			os.api('hashtags/trend').then(stats => {
 				this.stats = stats;
 				this.fetching = false;
 			});
diff --git a/src/client/widgets/welcome.vue b/src/client/widgets/welcome.vue
deleted file mode 100644
index f6169935f0..0000000000
--- a/src/client/widgets/welcome.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<div class="mkw-welcome _panel" v-if="meta">
-	<div class="banner" :style="{ backgroundImage: `url(${ meta.bannerUrl })` }"></div>
-	<div class="body">
-		<h1 class="name" v-html="meta.name || host"></h1>
-		<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
-		<mk-button @click="signup()" style="display: inline-block; margin-right: 16px;" primary>{{ $t('signup') }}</mk-button>
-		<mk-button @click="signin()" style="display: inline-block;">{{ $t('login') }}</mk-button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { toUnicode } from 'punycode';
-import XSigninDialog from '../components/signin-dialog.vue';
-import XSignupDialog from '../components/signup-dialog.vue';
-import MkButton from '../components/ui/button.vue';
-import { host } from '../config';
-import define from './define';
-
-export default define({
-	name: 'welcome',
-	props: () => ({
-	})
-}).extend({
-	components: {
-		MkButton
-	},
-
-	data() {
-		return {
-			host: toUnicode(host),
-		};
-	},
-
-	computed: {
-		meta() {
-			return this.$store.state.instance.meta;
-		},
-	},
-
-	created() {
-		this.$root.api('stats').then(stats => {
-			this.stats = stats;
-		});
-	},
-
-	methods: {
-		signin() {
-			this.$root.new(XSigninDialog, {
-				autoSet: true
-			});
-		},
-
-		signup() {
-			this.$root.new(XSignupDialog, {
-				autoSet: true
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-welcome {
-	overflow: hidden;
-
-	> .banner {
-		height: 90px;
-		background-size: cover;
-		background-position: center center;
-	}
-
-	> .body {
-		padding: 16px;
-
-		> .name {
-			font-size: 1.2em;
-			margin: 0 0 0.5em 0;
-		}
-
-		> .desc {
-			font-size: 0.9em;
-		}
-	}
-}
-</style>