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

src/client/pages/messaging/messaging-room.vue

@@ -1,57 +1,85 @@
 <template>
-<div class="mk-messaging-room"
+<div class="_section"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
-	<template v-if="!fetching && user">
-		<portal to="title"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
-		<portal to="avatar"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
-	</template>
-	<template v-if="!fetching && group">
-		<portal to="icon"><fa :icon="faUsers"/></portal>
-		<portal to="title">{{ group.name }}</portal>
-	</template>
-
-	<div class="body">
-		<mk-loading v-if="fetching"/>
-		<p class="empty" v-if="!fetching && messages.length == 0"><fa :icon="faInfoCircle"/>{{ $t('noMessagesYet') }}</p>
-		<p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><fa :icon="faFlag"/>{{ $t('noMoreHistory') }}</p>
-		<button class="more _button" ref="loadMore" :class="{ fetching: fetchingMoreMessages }" v-show="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
-			<template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('loading') : $t('loadMore') }}
-		</button>
-		<x-list class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
-			<x-message :message="message" :is-group="group != null" :key="message.id"/>
-		</x-list>
+	<div class="_content mk-messaging-room">
+		<div class="body">
+			<MkLoading v-if="fetching"/>
+			<p class="empty" v-if="!fetching && messages.length == 0"><Fa :icon="faInfoCircle"/>{{ $t('noMessagesYet') }}</p>
+			<p class="no-history" v-if="!fetching && messages.length > 0 && !existMoreMessages"><Fa :icon="faFlag"/>{{ $t('noMoreHistory') }}</p>
+			<button class="more _button" ref="loadMore" :class="{ fetching: fetchingMoreMessages }" v-show="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
+				<template v-if="fetchingMoreMessages"><Fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('loading') : $t('loadMore') }}
+			</button>
+			<XList class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
+				<XMessage :message="message" :is-group="group != null" :key="message.id"/>
+			</XList>
+		</div>
+		<footer>
+			<transition name="fade">
+				<div class="new-message" v-show="showIndicator">
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i><Fa :icon="faArrowCircleDown"/></i>{{ $t('newMessageExists') }}</button>
+				</div>
+			</transition>
+			<XForm v-if="!fetching" :user="user" :group="group" ref="form"/>
+		</footer>
 	</div>
-	<footer>
-		<transition name="fade">
-			<div class="new-message" v-show="showIndicator">
-				<button class="_buttonPrimary" @click="onIndicatorClick"><i><fa :icon="faArrowCircleDown"/></i>{{ $t('newMessageExists') }}</button>
-			</div>
-		</transition>
-		<x-form v-if="!fetching" :user="user" :group="group" ref="form"/>
-	</footer>
 </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import XList from '../../components/date-separated-list.vue';
+import { computed, defineComponent } from 'vue';
+import { faArrowCircleDown, faFlag, faUsers, faInfoCircle, faEllipsisH, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import { faWindowMaximize } from '@fortawesome/free-regular-svg-icons';
+import XList from '@/components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import parseAcct from '../../../misc/acct/parse';
-import { isBottom, onScrollBottom } from '../../scripts/scroll';
+import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
+import * as os from '@/os';
+import { popout } from '@/scripts/popout';
 
-export default Vue.extend({
+const Component = defineComponent({
 	components: {
 		XMessage,
 		XForm,
 		XList,
 	},
 
+	inject: ['inWindow'],
+
+	props: {
+		userAcct: {
+			type: String,
+			required: false,
+		},
+		groupId: {
+			type: String,
+			required: false,
+		},
+	},
+
 	data() {
 		return {
+			INFO: computed(() => !this.fetching ? this.user ? {
+				header: [{
+					userName: this.user,
+					avatar: this.user,
+				}],
+				action: {
+					icon: faEllipsisH,
+					handler: this.menu,
+				},
+			} : {
+				header: [{
+					title: this.group.name,
+					icon: faUsers
+				}],
+				action: {
+					icon: faEllipsisH,
+					handler: this.menu,
+				},
+			} : null),
 			fetching: true,
 			user: null,
 			group: null,
@@ -68,7 +96,7 @@ export default Vue.extend({
 					&& this.existMoreMessages
 					&& this.fetchMoreMessages()
 			),
-			faArrowCircleDown, faFlag, faUsers, faInfoCircle
+			faArrowCircleDown, faFlag, faInfoCircle
 		};
 	},
 
@@ -79,7 +107,8 @@ export default Vue.extend({
 	},
 
 	watch: {
-		$route: 'fetch'
+		userAcct: 'fetch',
+		groupId: 'fetch',
 	},
 
 	mounted() {
@@ -89,7 +118,7 @@ export default Vue.extend({
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
@@ -100,15 +129,15 @@ export default Vue.extend({
 	methods: {
 		async fetch() {
 			this.fetching = true;
-			if (this.$route.params.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.$route.params.user));
+			if (this.userAcct) {
+				const user = await os.api('users/show', parseAcct(this.userAcct));
 				this.user = user;
 			} else {
-				const group = await this.$root.api('users/groups/show', { groupId: this.$route.params.group });
+				const group = await os.api('users/groups/show', { groupId: this.groupId });
 				this.group = group;
 			}
 
-			this.connection = this.$root.stream.connectToChannel('messaging', {
+			this.connection = os.stream.connectToChannel('messaging', {
 				otherparty: this.user ? this.user.id : undefined,
 				group: this.group ? this.group.id : undefined,
 			});
@@ -131,7 +160,7 @@ export default Vue.extend({
 
 		onDragover(e) {
 			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.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -146,7 +175,7 @@ export default Vue.extend({
 				this.form.upload(e.dataTransfer.files[0]);
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
-				this.$root.dialog({
+				os.dialog({
 					type: 'error',
 					text: this.$t('onlyOneFileCanBeAttached')
 				});
@@ -154,7 +183,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.form.file = file;
@@ -166,7 +195,7 @@ export default Vue.extend({
 			return new Promise((resolve, reject) => {
 				const max = this.existMoreMessages ? 20 : 10;
 
-				this.$root.api('messaging/messages', {
+				os.api('messaging/messages', {
 					userId: this.user ? this.user.id : undefined,
 					groupId: this.group ? this.group.id : undefined,
 					limit: max + 1,
@@ -193,7 +222,7 @@ export default Vue.extend({
 		},
 
 		onMessage(message) {
-			this.$root.sound('chat');
+			os.sound('chat');
 
 			const _isBottom = isBottom(this.$el, 64);
 
@@ -248,7 +277,7 @@ export default Vue.extend({
 		},
 
 		scrollToBottom() {
-			window.scroll(0, document.body.offsetHeight);
+			scroll(this.$el, this.$el.offsetHeight);
 		},
 
 		onIndicatorClick() {
@@ -279,17 +308,36 @@ export default Vue.extend({
 					});
 				}
 			}
+		},
+
+		menu(ev) {
+			const url = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
+
+			os.modalMenu([this.inWindow ? undefined : {
+				text: this.$t('openInWindow'),
+				icon: faWindowMaximize,
+				action: () => {
+					os.pageWindow(url, Component, this.$props);
+					this.$router.back();
+				},
+			}, this.inWindow ? undefined : {
+				text: this.$t('popout'),
+				icon: faExternalLinkAlt,
+				action: () => {
+					popout(url);
+					this.$router.back();
+				},
+			}], ev.currentTarget || ev.target);
 		}
 	}
 });
+
+export default Component;
 </script>
 
 <style lang="scss" scoped>
 .mk-messaging-room {
-
 	> .body {
-		width: 100%;
-
 		> .empty {
 			width: 100%;
 			margin: 0;
@@ -344,7 +392,7 @@ export default Vue.extend({
 		}
 
 		> .messages {
-			> ::v-deep * {
+			> ::v-deep(*) {
 				margin-bottom: 16px;
 			}
 		}
@@ -384,7 +432,7 @@ export default Vue.extend({
 	transition: opacity 0.1s;
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter-from, .fade-leave-to {
 	transition: opacity 0.5s;
 	opacity: 0;
 }