From 71d6394bc8ba86fc72b71242590c03482613f335 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Mar 2020 14:38:33 +0900
Subject: Refactoring

---
 src/client/pages/messaging-room.form.vue           | 353 -------------------
 src/client/pages/messaging-room.message.vue        | 337 ------------------
 src/client/pages/messaging-room.vue                | 391 ---------------------
 src/client/pages/messaging.vue                     | 324 -----------------
 src/client/pages/messaging/index.vue               | 324 +++++++++++++++++
 src/client/pages/messaging/messaging-room.form.vue | 353 +++++++++++++++++++
 .../pages/messaging/messaging-room.message.vue     | 337 ++++++++++++++++++
 src/client/pages/messaging/messaging-room.vue      | 391 +++++++++++++++++++++
 8 files changed, 1405 insertions(+), 1405 deletions(-)
 delete mode 100644 src/client/pages/messaging-room.form.vue
 delete mode 100644 src/client/pages/messaging-room.message.vue
 delete mode 100644 src/client/pages/messaging-room.vue
 delete mode 100644 src/client/pages/messaging.vue
 create mode 100644 src/client/pages/messaging/index.vue
 create mode 100644 src/client/pages/messaging/messaging-room.form.vue
 create mode 100644 src/client/pages/messaging/messaging-room.message.vue
 create mode 100644 src/client/pages/messaging/messaging-room.vue

(limited to 'src/client/pages')

diff --git a/src/client/pages/messaging-room.form.vue b/src/client/pages/messaging-room.form.vue
deleted file mode 100644
index 72e2632772..0000000000
--- a/src/client/pages/messaging-room.form.vue
+++ /dev/null
@@ -1,353 +0,0 @@
-<template>
-<div class="mk-messaging-form _panel"
-	@dragover.stop="onDragover"
-	@drop.stop="onDrop"
->
-	<textarea
-		v-model="text"
-		ref="text"
-		@keypress="onKeypress"
-		@paste="onPaste"
-		:placeholder="$t('inputMessageHere')"
-		v-autocomplete="{ model: 'text' }"
-	></textarea>
-	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
-	<x-uploader ref="uploader" @uploaded="onUploaded"/>
-	<button class="send _button" @click="send" :disabled="!canSend || sending" :title="$t('send')">
-		<template v-if="!sending"><fa :icon="faPaperPlane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
-	</button>
-	<button class="_button" @click="chooseFile"><fa :icon="faPhotoVideo"/></button>
-	<button class="_button" @click="insertEmoji"><fa :icon="faLaughSquint"/></button>
-	<input ref="file" type="file" @change="onChangeFile"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import * as autosize from 'autosize';
-import i18n from '../i18n';
-import { formatTimeString } from '../../misc/format-time-string';
-import { selectFile } from '../scripts/select-file';
-
-export default Vue.extend({
-	i18n,
-	components: {
-		XUploader: () => import('../components/uploader.vue').then(m => m.default),
-	},
-	props: {
-		user: {
-			type: Object,
-			requird: false,
-		},
-		group: {
-			type: Object,
-			requird: false,
-		},
-	},
-	data() {
-		return {
-			text: null,
-			file: null,
-			sending: false,
-			faPaperPlane, faPhotoVideo, faLaughSquint
-		};
-	},
-	computed: {
-		draftId(): string {
-			return this.user ? 'user:' + this.user.id : 'group:' + this.group.id;
-		},
-		canSend(): boolean {
-			return (this.text != null && this.text != '') || this.file != null;
-		},
-		room(): any {
-			return this.$parent;
-		}
-	},
-	watch: {
-		text() {
-			this.saveDraft();
-		},
-		file() {
-			this.saveDraft();
-
-			if (this.room.isBottom()) {
-				this.room.scrollToBottom();
-			}
-		}
-	},
-	mounted() {
-		autosize(this.$refs.text);
-
-		// 書きかけの投稿を復元
-		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId];
-		if (draft) {
-			this.text = draft.data.text;
-			this.file = draft.data.file;
-		}
-	},
-	methods: {
-		async onPaste(e: ClipboardEvent) {
-			const data = e.clipboardData;
-			const items = data.items;
-
-			if (items.length == 1) {
-				if (items[0].kind == 'file') {
-					const file = items[0].getAsFile();
-					const lio = file.name.lastIndexOf('.');
-					const ext = lio >= 0 ? file.name.slice(lio) : '';
-					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
-					const name = this.$store.state.settings.pasteDialog
-						? await this.$root.dialog({
-							title: this.$t('enterFileName'),
-							input: {
-								default: formatted
-							},
-							allowEmpty: false
-						}).then(({ canceled, result }) => canceled ? false : result)
-						: formatted;
-					if (name) this.upload(file, name);
-				}
-			} else {
-				if (items[0].kind == 'file') {
-					this.$root.dialog({
-						type: 'error',
-						text: this.$t('onlyOneFileCanBeAttached')
-					});
-				}
-			}
-		},
-
-		onDragover(e) {
-			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			if (isFile || isDriveFile) {
-				e.preventDefault();
-				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-			}
-		},
-
-		onDrop(e): void {
-			// ファイルだったら
-			if (e.dataTransfer.files.length == 1) {
-				e.preventDefault();
-				this.upload(e.dataTransfer.files[0]);
-				return;
-			} else if (e.dataTransfer.files.length > 1) {
-				e.preventDefault();
-				this.$root.dialog({
-					type: 'error',
-					text: this.$t('onlyOneFileCanBeAttached')
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
-			if (driveFile != null && driveFile != '') {
-				this.file = JSON.parse(driveFile);
-				e.preventDefault();
-			}
-			//#endregion
-		},
-
-		onKeypress(e) {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey && this.canSend) {
-				this.send();
-			}
-		},
-
-		chooseFile(e) {
-			selectFile(this, e.currentTarget || e.target, this.$t('selectFile'), false).then(file => {
-				this.file = file;
-			});
-		},
-
-		onChangeFile() {
-			this.upload((this.$refs.file as any).files[0]);
-		},
-
-		upload(file: File, name?: string) {
-			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
-		},
-
-		onUploaded(file) {
-			this.file = file;
-		},
-
-		send() {
-			this.sending = true;
-			this.$root.api('messaging/messages/create', {
-				userId: this.user ? this.user.id : undefined,
-				groupId: this.group ? this.group.id : undefined,
-				text: this.text ? this.text : undefined,
-				fileId: this.file ? this.file.id : undefined
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-			});
-		},
-
-		clear() {
-			this.text = '';
-			this.file = null;
-			this.deleteDraft();
-		},
-
-		saveDraft() {
-			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
-
-			data[this.draftId] = {
-				updatedAt: new Date(),
-				data: {
-					text: this.text,
-					file: this.file
-				}
-			}
-
-			localStorage.setItem('message_drafts', JSON.stringify(data));
-		},
-
-		deleteDraft() {
-			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
-
-			delete data[this.draftId];
-
-			localStorage.setItem('message_drafts', JSON.stringify(data));
-		},
-
-		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('../components/emoji-picker.vue').then(m => m.default), {
-				source: ev.currentTarget || ev.target
-			}).$once('chosen', emoji => {
-				insertTextAtCursor(this.$refs.text, emoji);
-				vm.close();
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-messaging-form {
-	position: relative;
-
-	> textarea {
-		cursor: auto;
-		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		height: 80px;
-		margin: 0;
-		padding: 16px 16px 0 16px;
-		resize: none;
-		font-size: 1em;
-		font-family: inherit;
-		outline: none;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
-		background: transparent;
-		box-sizing: border-box;
-		color: var(--fg);
-	}
-
-	> .file {
-		padding: 8px;
-		color: #444;
-		background: #eee;
-		cursor: pointer;
-	}
-
-	> .send {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		transition: color 0.1s ease;
-		color: var(--accent);
-
-		&:active {
-			color: var(--accentDarken);
-			transition: color 0s ease;
-		}
-	}
-
-	.files {
-		display: block;
-		margin: 0;
-		padding: 0 8px;
-		list-style: none;
-
-		&:after {
-			content: '';
-			display: block;
-			clear: both;
-		}
-
-		> li {
-			display: block;
-			float: left;
-			margin: 4px;
-			padding: 0;
-			width: 64px;
-			height: 64px;
-			background-color: #eee;
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-size: cover;
-			cursor: move;
-
-			&:hover {
-				> .remove {
-					display: block;
-				}
-			}
-
-			> .remove {
-				display: none;
-				position: absolute;
-				right: -6px;
-				top: -6px;
-				margin: 0;
-				padding: 0;
-				background: transparent;
-				outline: none;
-				border: none;
-				border-radius: 0;
-				box-shadow: none;
-				cursor: pointer;
-			}
-		}
-	}
-
-	._button {
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		font-weight: normal;
-		text-decoration: none;
-		transition: color 0.1s ease;
-
-		&:hover {
-			color: var(--accent);
-		}
-
-		&:active {
-			color: var(--accentDarken);
-			transition: color 0s ease;
-		}
-	}
-
-	input[type=file] {
-		display: none;
-	}
-}
-</style>
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging-room.message.vue
deleted file mode 100644
index f26ef449b2..0000000000
--- a/src/client/pages/messaging-room.message.vue
+++ /dev/null
@@ -1,337 +0,0 @@
-<template>
-<div class="thvuemwp" :data-is-me="isMe">
-	<mk-avatar class="avatar" :user="message.user"/>
-	<div class="content">
-		<div class="balloon" :data-no-text="message.text == null">
-			<button class="delete-button" v-if="isMe" :title="$t('delete')" @click="del">
-				<img src="/assets/remove.png" alt="Delete"/>
-			</button>
-			<div class="content" v-if="!message.isDeleted">
-				<mfm class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
-				<div class="file" v-if="message.file">
-					<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
-							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
-						<p v-else>{{ message.file.name }}</p>
-					</a>
-				</div>
-			</div>
-			<div class="content" v-else>
-				<p class="is-deleted">{{ $t('deleted') }}</p>
-			</div>
-		</div>
-		<div></div>
-		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
-		<footer>
-			<template v-if="isGroup">
-				<span class="read" v-if="message.reads.length > 0">{{ $t('messageRead') }} {{ message.reads.length }}</span>
-			</template>
-			<template v-else>
-				<span class="read" v-if="isMe && message.isRead">{{ $t('messageRead') }}</span>
-			</template>
-			<mk-time :time="message.createdAt"/>
-			<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
-		</footer>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../i18n';
-import { parse } from '../../mfm/parse';
-import { unique } from '../../prelude/array';
-
-export default Vue.extend({
-	i18n,
-	props: {
-		message: {
-			required: true
-		},
-		isGroup: {
-			required: false
-		}
-	},
-	computed: {
-		isMe(): boolean {
-			return this.message.userId == this.$store.state.i.id;
-		},
-		urls(): string[] {
-			if (this.message.text) {
-				const ast = parse(this.message.text);
-				return unique(ast
-					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
-					.map(t => t.node.props.url));
-			} else {
-				return null;
-			}
-		}
-	},
-	methods: {
-		del() {
-			this.$root.api('messaging/messages/delete', {
-				messageId: this.message.id
-			});
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.thvuemwp {
-	$me-balloon-color: var(--accent);
-
-	position: relative;
-	background-color: transparent;
-	display: flex;
-
-	> .avatar {
-		display: block;
-		width: 54px;
-		height: 54px;
-		transition: all 0.1s ease;
-
-		@media (max-width: 400px) {
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	> .content {
-		min-width: 0;
-
-		> .balloon {
-			position: relative;
-			display: inline-flex;
-			align-items: center;
-			padding: 0;
-			min-height: 38px;
-			border-radius: 16px;
-			max-width: 100%;
-
-			&:before {
-				content: "";
-				pointer-events: none;
-				display: block;
-				position: absolute;
-				top: 12px;
-			}
-
-			& + * {
-				clear: both;
-			}
-
-			&:hover {
-				> .delete-button {
-					display: block;
-				}
-			}
-
-			> .delete-button {
-				display: none;
-				position: absolute;
-				z-index: 1;
-				top: -4px;
-				right: -4px;
-				margin: 0;
-				padding: 0;
-				cursor: pointer;
-				outline: none;
-				border: none;
-				border-radius: 0;
-				box-shadow: none;
-				background: transparent;
-
-				> img {
-					vertical-align: bottom;
-					width: 16px;
-					height: 16px;
-					cursor: pointer;
-				}
-			}
-
-			> .content {
-				max-width: 100%;
-
-				> .is-deleted {
-					display: block;
-					margin: 0;
-					padding: 0;
-					overflow: hidden;
-					overflow-wrap: break-word;
-					font-size: 1em;
-					color: rgba(#000, 0.5);
-				}
-
-				> .text {
-					display: block;
-					margin: 0;
-					padding: 12px 18px;
-					overflow: hidden;
-					overflow-wrap: break-word;
-					word-break: break-word;
-					font-size: 1em;
-					color: rgba(#000, 0.8);
-
-					@media (max-width: 500px) {
-						padding: 8px 16px;
-					}
-
-					@media (max-width: 400px) {
-						font-size: 0.9em;
-					}
-
-					& + .file {
-						> a {
-							border-radius: 0 0 16px 16px;
-						}
-					}
-				}
-
-				> .file {
-					> a {
-						display: block;
-						max-width: 100%;
-						border-radius: 16px;
-						overflow: hidden;
-						text-decoration: none;
-
-						&:hover {
-							text-decoration: none;
-
-							> p {
-								background: #ccc;
-							}
-						}
-
-						> * {
-							display: block;
-							margin: 0;
-							width: 100%;
-							max-height: 512px;
-							object-fit: contain;
-						}
-
-						> p {
-							padding: 30px;
-							text-align: center;
-							color: #555;
-							background: #ddd;
-						}
-					}
-				}
-			}
-		}
-
-		> .mk-url-preview {
-			margin: 8px 0;
-		}
-
-		> footer {
-			display: block;
-			margin: 2px 0 0 0;
-			font-size: 0.65em;
-
-			> .read {
-				margin: 0 8px;
-			}
-
-			> [data-icon] {
-				margin-left: 4px;
-			}
-		}
-	}
-
-	&:not([data-is-me]) {
-		padding-left: var(--margin);
-
-		> .content {
-			padding-left: 16px;
-			padding-right: 32px;
-
-			> .balloon {
-				$color: var(--messageBg);
-				background: $color;
-
-				&[data-no-text] {
-					background: transparent;
-				}
-
-				&:not([data-no-text]):before {
-					left: -14px;
-					border-top: solid 8px transparent;
-					border-right: solid 8px $color;
-					border-bottom: solid 8px transparent;
-					border-left: solid 8px transparent;
-				}
-
-				> .content {
-					> .text {
-						color: var(--fg);
-					}
-				}
-			}
-
-			> footer {
-				text-align: left;
-			}
-		}
-	}
-
-	&[data-is-me] {
-		flex-direction: row-reverse;
-		padding-right: var(--margin);
-
-		> .content {
-			padding-right: 16px;
-			padding-left: 32px;
-			text-align: right;
-
-			> .balloon {
-				background: $me-balloon-color;
-				text-align: left;
-
-				&[data-no-text] {
-					background: transparent;
-				}
-
-				&:not([data-no-text]):before {
-					right: -14px;
-					left: auto;
-					border-top: solid 8px transparent;
-					border-right: solid 8px transparent;
-					border-bottom: solid 8px transparent;
-					border-left: solid 8px $me-balloon-color;
-				}
-
-				> .content {
-
-					> p.is-deleted {
-						color: rgba(#fff, 0.5);
-					}
-
-					> .text {
-						&, ::v-deep * {
-							color: #fff !important;
-						}
-					}
-				}
-			}
-
-			> footer {
-				text-align: right;
-
-				> .read {
-					user-select: none;
-				}
-			}
-		}
-	}
-
-	&[data-is-deleted] {
-		> .balloon {
-			opacity: 0.5;
-		}
-	}
-}
-</style>
diff --git a/src/client/pages/messaging-room.vue b/src/client/pages/messaging-room.vue
deleted file mode 100644
index 5fca8c0ff3..0000000000
--- a/src/client/pages/messaging-room.vue
+++ /dev/null
@@ -1,391 +0,0 @@
-<template>
-<div class="mk-messaging-room naked"
-	@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" :class="{ fetching: fetchingMoreMessages }" v-if="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, i }" direction="up" reversed>
-			<x-message :message="message" :is-group="group != null" :key="message.id"/>
-		</x-list>
-	</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 i18n from '../i18n';
-import XList from '../components/date-separated-list.vue';
-import XMessage from './messaging-room.message.vue';
-import XForm from './messaging-room.form.vue';
-import { url } from '../config';
-import parseAcct from '../../misc/acct/parse';
-
-export default Vue.extend({
-	i18n,
-
-	components: {
-		XMessage,
-		XForm,
-		XList,
-	},
-
-	data() {
-		return {
-			fetching: true,
-			user: null,
-			group: null,
-			fetchingMoreMessages: false,
-			messages: [],
-			existMoreMessages: false,
-			connection: null,
-			showIndicator: false,
-			timer: null,
-			faArrowCircleDown, faFlag, faUsers, faInfoCircle
-		};
-	},
-
-	computed: {
-		form(): any {
-			return this.$refs.form;
-		}
-	},
-
-	watch: {
-		$route: 'fetch'
-	},
-
-	mounted() {
-		this.fetch();
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-
-		window.removeEventListener('scroll', this.onScroll);
-
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
-	},
-
-	methods: {
-		async fetch() {
-			this.fetching = true;
-			if (this.$route.params.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.$route.params.user));
-				this.user = user;
-			} else {
-				const group = await this.$root.api('users/groups/show', { groupId: this.$route.params.group });
-				this.group = group;
-			}
-
-			this.connection = this.$root.stream.connectToChannel('messaging', {
-				otherparty: this.user ? this.user.id : undefined,
-				group: this.group ? this.group.id : undefined,
-			});
-
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-			this.connection.on('deleted', this.onDeleted);
-
-			window.addEventListener('scroll', this.onScroll, { passive: true });
-
-			document.addEventListener('visibilitychange', this.onVisibilitychange);
-
-			this.fetchMessages().then(() => {
-				this.fetching = false;
-				this.scrollToBottom();
-			});
-		},
-
-		onDragover(e) {
-			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-
-			if (isFile || isDriveFile) {
-				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-			} else {
-				e.dataTransfer.dropEffect = 'none';
-			}
-		},
-
-		onDrop(e): void {
-			// ファイルだったら
-			if (e.dataTransfer.files.length == 1) {
-				this.form.upload(e.dataTransfer.files[0]);
-				return;
-			} else if (e.dataTransfer.files.length > 1) {
-				this.$root.dialog({
-					type: 'error',
-					text: this.$t('onlyOneFileCanBeAttached')
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
-			if (driveFile != null && driveFile != '') {
-				const file = JSON.parse(driveFile);
-				this.form.file = file;
-			}
-			//#endregion
-		},
-
-		fetchMessages() {
-			return new Promise((resolve, reject) => {
-				const max = this.existMoreMessages ? 20 : 10;
-
-				this.$root.api('messaging/messages', {
-					userId: this.user ? this.user.id : undefined,
-					groupId: this.group ? this.group.id : undefined,
-					limit: max + 1,
-					untilId: this.existMoreMessages ? this.messages[0].id : undefined
-				}).then(messages => {
-					if (messages.length == max + 1) {
-						this.existMoreMessages = true;
-						messages.pop();
-					} else {
-						this.existMoreMessages = false;
-					}
-
-					this.messages.unshift.apply(this.messages, messages.reverse());
-					resolve();
-				});
-			});
-		},
-
-		fetchMoreMessages() {
-			this.fetchingMoreMessages = true;
-			this.fetchMessages().then(() => {
-				this.fetchingMoreMessages = false;
-			});
-		},
-
-		onMessage(message) {
-			this.$root.sound('chat');
-
-			const isBottom = this.isBottom();
-
-			this.messages.push(message);
-			if (message.userId != this.$store.state.i.id && !document.hidden) {
-				this.connection.send('read', {
-					id: message.id
-				});
-			}
-
-			if (isBottom) {
-				// Scroll to bottom
-				this.$nextTick(() => {
-					this.scrollToBottom();
-				});
-			} else if (message.userId != this.$store.state.i.id) {
-				// Notify
-				this.notifyNewMessage();
-			}
-		},
-
-		onRead(x) {
-			if (this.user) {
-				if (!Array.isArray(x)) x = [x];
-				for (const id of x) {
-					if (this.messages.some(x => x.id == id)) {
-						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist].isRead = true;
-					}
-				}
-			} else if (this.group) {
-				for (const id of x.ids) {
-					if (this.messages.some(x => x.id == id)) {
-						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist].reads.push(x.userId);
-					}
-				}
-			}
-		},
-
-		onDeleted(id) {
-			const msg = this.messages.find(m => m.id === id);
-			if (msg) {
-				this.messages = this.messages.filter(m => m.id !== msg.id);
-			}
-		},
-
-		isBottom() {
-			const asobi = 64;
-			const current = this.isNaked
-				? window.scrollY + window.innerHeight
-				: this.$el.scrollTop + this.$el.offsetHeight;
-			const max = this.isNaked
-				? document.body.offsetHeight
-				: this.$el.scrollHeight;
-			return current > (max - asobi);
-		},
-
-		scrollToBottom() {
-			window.scroll(0, document.body.offsetHeight);
-		},
-
-		onIndicatorClick() {
-			this.showIndicator = false;
-			this.scrollToBottom();
-		},
-
-		notifyNewMessage() {
-			this.showIndicator = true;
-
-			if (this.timer) clearTimeout(this.timer);
-
-			this.timer = setTimeout(() => {
-				this.showIndicator = false;
-			}, 4000);
-		},
-
-		onScroll() {
-			const el = this.isNaked ? window.document.documentElement : this.$el;
-			const current = el.scrollTop + el.clientHeight;
-			if (current > el.scrollHeight - 1) {
-				this.showIndicator = false;
-			}
-		},
-
-		onVisibilitychange() {
-			if (document.hidden) return;
-			for (const message of this.messages) {
-				if (message.userId !== this.$store.state.i.id && !message.isRead) {
-					this.connection.send('read', {
-						id: message.id
-					});
-				}
-			}
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-messaging-room {
-
-	> .body {
-		width: 100%;
-
-		> .empty {
-			width: 100%;
-			margin: 0;
-			padding: 16px 8px 8px 8px;
-			text-align: center;
-			font-size: 0.8em;
-			opacity: 0.5;
-
-			[data-icon] {
-				margin-right: 4px;
-			}
-		}
-
-		> .no-history {
-			display: block;
-			margin: 0;
-			padding: 16px;
-			text-align: center;
-			font-size: 0.8em;
-			color: var(--messagingRoomInfo);
-			opacity: 0.5;
-
-			[data-icon] {
-				margin-right: 4px;
-			}
-		}
-
-		> .more {
-			display: block;
-			margin: 16px auto;
-			padding: 0 12px;
-			line-height: 24px;
-			color: #fff;
-			background: rgba(#000, 0.3);
-			border-radius: 12px;
-
-			&:hover {
-				background: rgba(#000, 0.4);
-			}
-
-			&:active {
-				background: rgba(#000, 0.5);
-			}
-
-			&.fetching {
-				cursor: wait;
-			}
-
-			> [data-icon] {
-				margin-right: 4px;
-			}
-		}
-
-		> .messages {
-			> ::v-deep * {
-				margin-bottom: 16px;
-			}
-		}
-	}
-
-	> footer {
-		width: 100%;
-
-		> .new-message {
-			position: absolute;
-			top: -48px;
-			width: 100%;
-			padding: 8px 0;
-			text-align: center;
-
-			> button {
-				display: inline-block;
-				margin: 0;
-				padding: 0 12px 0 30px;
-				line-height: 32px;
-				font-size: 12px;
-				border-radius: 16px;
-
-				> i {
-					position: absolute;
-					top: 0;
-					left: 10px;
-					line-height: 32px;
-					font-size: 16px;
-				}
-			}
-		}
-	}
-}
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s;
-}
-
-.fade-enter, .fade-leave-to {
-	transition: opacity 0.5s;
-	opacity: 0;
-}
-</style>
diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging.vue
deleted file mode 100644
index 47d761d895..0000000000
--- a/src/client/pages/messaging.vue
+++ /dev/null
@@ -1,324 +0,0 @@
-<template>
-<div class="mk-messaging">
-	<portal to="icon"><fa :icon="faComments"/></portal>
-	<portal to="title">{{ $t('messaging') }}</portal>
-
-	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
-
-	<div class="history" v-if="messages.length > 0">
-		<router-link v-for="(message, i) in messages"
-			class="message _panel"
-			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-			:data-is-me="isMe(message)"
-			:data-is-read="message.groupId ? message.reads.includes($store.state.i.id) : message.isRead"
-			:data-index="i"
-			:key="message.id"
-		>
-			<div>
-				<mk-avatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
-				<header v-if="message.groupId">
-					<span class="name">{{ message.group.name }}</span>
-					<mk-time :time="message.createdAt"/>
-				</header>
-				<header v-else>
-					<span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
-					<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
-					<mk-time :time="message.createdAt"/>
-				</header>
-				<div class="body">
-					<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
-				</div>
-			</div>
-		</router-link>
-	</div>
-	<div class="no-history" v-if="!fetching && messages.length == 0">
-		<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
-		<div>{{ $t('noHistory') }}</div>
-	</div>
-	<mk-loading v-if="fetching"/>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../i18n';
-import getAcct from '../../misc/acct/render';
-import MkButton from '../components/ui/button.vue';
-import MkUserSelect from '../components/user-select.vue';
-
-export default Vue.extend({
-	i18n,
-
-	components: {
-		MkButton
-	},
-
-	data() {
-		return {
-			fetching: true,
-			moreFetching: false,
-			messages: [],
-			connection: null,
-			faUser, faUsers, faComments, faPlus
-		};
-	},
-
-	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('messagingIndex');
-
-		this.connection.on('message', this.onMessage);
-		this.connection.on('read', this.onRead);
-
-		this.$root.api('messaging/history', { group: false }).then(userMessages => {
-			this.$root.api('messaging/history', { group: true }).then(groupMessages => {
-				const messages = userMessages.concat(groupMessages);
-				messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-				this.messages = messages;
-				this.fetching = false;
-			});
-		});
-	},
-
-	beforeDestroy() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		getAcct,
-
-		isMe(message) {
-			return message.userId == this.$store.state.i.id;
-		},
-
-		onMessage(message) {
-			if (message.recipientId) {
-				this.messages = this.messages.filter(m => !(
-					(m.recipientId == message.recipientId && m.userId == message.userId) ||
-					(m.recipientId == message.userId && m.userId == message.recipientId)));
-
-				this.messages.unshift(message);
-			} else if (message.groupId) {
-				this.messages = this.messages.filter(m => m.groupId !== message.groupId);
-				this.messages.unshift(message);
-			}
-		},
-
-		onRead(ids) {
-			for (const id of ids) {
-				const found = this.messages.find(m => m.id == id);
-				if (found) {
-					if (found.recipientId) {
-						found.isRead = true;
-					} else if (found.groupId) {
-						found.reads.push(this.$store.state.i.id);
-					}
-				}
-			}
-		},
-
-		start(ev) {
-			this.$root.menu({
-				items: [{
-					text: this.$t('messagingWithUser'),
-					icon: faUser,
-					action: () => { this.startUser() }
-				}, {
-					text: this.$t('messagingWithGroup'),
-					icon: faUsers,
-					action: () => { this.startGroup() }
-				}],
-				noCenter: true,
-				source: ev.currentTarget || ev.target,
-			});
-		},
-
-		async startUser() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
-				this.$router.push(`/my/messaging/${getAcct(user)}`);
-			});
-		},
-
-		async startGroup() {
-			const groups1 = await this.$root.api('users/groups/owned');
-			const groups2 = await this.$root.api('users/groups/joined');
-			if (groups1.length === 0 && groups2.length === 0) {
-				this.$root.dialog({
-					type: 'warning',
-					title: this.$t('youHaveNoGroups'),
-					text: this.$t('joinOrCreateGroup'),
-				});
-				return;
-			}
-			const { canceled, result: group } = await this.$root.dialog({
-				type: null,
-				title: this.$t('group'),
-				select: {
-					items: groups1.concat(groups2).map(group => ({
-						value: group, text: group.name
-					}))
-				},
-				showCancelButton: true
-			});
-			if (canceled) return;
-			this.$router.push(`/my/messaging/group/${group.id}`);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-messaging {
-
-	> .start {
-		margin: 0 auto 16px auto;
-	}
-
-	> .history {
-		> .message {
-			display: block;
-			text-decoration: none;
-			margin-bottom: 16px;
-
-			@media (max-width: 500px) {
-				margin-bottom: 8px;
-			}
-
-			* {
-				pointer-events: none;
-				user-select: none;
-			}
-
-			&:hover {
-				.avatar {
-					filter: saturate(200%);
-				}
-			}
-
-			&:active {
-			}
-
-			&[data-is-read],
-			&[data-is-me] {
-				opacity: 0.8;
-			}
-
-			&:not([data-is-me]):not([data-is-read]) {
-				> div {
-					background-image: url("/assets/unread.svg");
-					background-repeat: no-repeat;
-					background-position: 0 center;
-				}
-			}
-
-			&:after {
-				content: "";
-				display: block;
-				clear: both;
-			}
-
-			> div {
-				padding: 20px 30px;
-
-				&:after {
-					content: "";
-					display: block;
-					clear: both;
-				}
-
-				> header {
-					display: flex;
-					align-items: center;
-					margin-bottom: 2px;
-					white-space: nowrap;
-					overflow: hidden;
-
-					> .name {
-						margin: 0;
-						padding: 0;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						font-size: 1em;
-						font-weight: bold;
-						transition: all 0.1s ease;
-					}
-
-					> .username {
-						margin: 0 8px;
-					}
-
-					> .mk-time {
-						margin: 0 0 0 auto;
-					}
-				}
-
-				> .avatar {
-					float: left;
-					width: 54px;
-					height: 54px;
-					margin: 0 16px 0 0;
-					border-radius: 8px;
-					transition: all 0.1s ease;
-				}
-
-				> .body {
-
-					> .text {
-						display: block;
-						margin: 0 0 0 0;
-						padding: 0;
-						overflow: hidden;
-						overflow-wrap: break-word;
-						font-size: 1.1em;
-						color: var(--faceText);
-
-						.me {
-							opacity: 0.7;
-						}
-					}
-
-					> .image {
-						display: block;
-						max-width: 100%;
-						max-height: 512px;
-					}
-				}
-			}
-		}
-	}
-
-	> .no-history {
-		padding: 32px;
-		text-align: center;
-
-		> img {
-			vertical-align: bottom;
-			height: 128px;
-			margin-bottom: 16px;
-			border-radius: 16px;
-		}
-	}
-
-	@media (max-width: 400px) {
-		> .history {
-			> .message {
-				&:not([data-is-me]):not([data-is-read]) {
-					> div {
-						background-image: none;
-						border-left: solid 4px #3aa2dc;
-					}
-				}
-
-				> div {
-					padding: 16px;
-					font-size: 0.9em;
-
-					> .avatar {
-						margin: 0 12px 0 0;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
new file mode 100644
index 0000000000..702979a098
--- /dev/null
+++ b/src/client/pages/messaging/index.vue
@@ -0,0 +1,324 @@
+<template>
+<div class="mk-messaging">
+	<portal to="icon"><fa :icon="faComments"/></portal>
+	<portal to="title">{{ $t('messaging') }}</portal>
+
+	<mk-button @click="start" primary class="start"><fa :icon="faPlus"/> {{ $t('startMessaging') }}</mk-button>
+
+	<div class="history" v-if="messages.length > 0">
+		<router-link v-for="(message, i) in messages"
+			class="message _panel"
+			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+			:data-is-me="isMe(message)"
+			:data-is-read="message.groupId ? message.reads.includes($store.state.i.id) : message.isRead"
+			:data-index="i"
+			:key="message.id"
+		>
+			<div>
+				<mk-avatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+				<header v-if="message.groupId">
+					<span class="name">{{ message.group.name }}</span>
+					<mk-time :time="message.createdAt"/>
+				</header>
+				<header v-else>
+					<span class="name"><mk-user-name :user="isMe(message) ? message.recipient : message.user"/></span>
+					<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
+					<mk-time :time="message.createdAt"/>
+				</header>
+				<div class="body">
+					<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
+				</div>
+			</div>
+		</router-link>
+	</div>
+	<div class="no-history" v-if="!fetching && messages.length == 0">
+		<img src="https://xn--931a.moe/assets/info.png" class="_ghost"/>
+		<div>{{ $t('noHistory') }}</div>
+	</div>
+	<mk-loading v-if="fetching"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
+import i18n from '../../i18n';
+import getAcct from '../../../misc/acct/render';
+import MkButton from '../../components/ui/button.vue';
+import MkUserSelect from '../../components/user-select.vue';
+
+export default Vue.extend({
+	i18n,
+
+	components: {
+		MkButton
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			messages: [],
+			connection: null,
+			faUser, faUsers, faComments, faPlus
+		};
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('messagingIndex');
+
+		this.connection.on('message', this.onMessage);
+		this.connection.on('read', this.onRead);
+
+		this.$root.api('messaging/history', { group: false }).then(userMessages => {
+			this.$root.api('messaging/history', { group: true }).then(groupMessages => {
+				const messages = userMessages.concat(groupMessages);
+				messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+				this.messages = messages;
+				this.fetching = false;
+			});
+		});
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		getAcct,
+
+		isMe(message) {
+			return message.userId == this.$store.state.i.id;
+		},
+
+		onMessage(message) {
+			if (message.recipientId) {
+				this.messages = this.messages.filter(m => !(
+					(m.recipientId == message.recipientId && m.userId == message.userId) ||
+					(m.recipientId == message.userId && m.userId == message.recipientId)));
+
+				this.messages.unshift(message);
+			} else if (message.groupId) {
+				this.messages = this.messages.filter(m => m.groupId !== message.groupId);
+				this.messages.unshift(message);
+			}
+		},
+
+		onRead(ids) {
+			for (const id of ids) {
+				const found = this.messages.find(m => m.id == id);
+				if (found) {
+					if (found.recipientId) {
+						found.isRead = true;
+					} else if (found.groupId) {
+						found.reads.push(this.$store.state.i.id);
+					}
+				}
+			}
+		},
+
+		start(ev) {
+			this.$root.menu({
+				items: [{
+					text: this.$t('messagingWithUser'),
+					icon: faUser,
+					action: () => { this.startUser() }
+				}, {
+					text: this.$t('messagingWithGroup'),
+					icon: faUsers,
+					action: () => { this.startGroup() }
+				}],
+				noCenter: true,
+				source: ev.currentTarget || ev.target,
+			});
+		},
+
+		async startUser() {
+			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+				this.$router.push(`/my/messaging/${getAcct(user)}`);
+			});
+		},
+
+		async startGroup() {
+			const groups1 = await this.$root.api('users/groups/owned');
+			const groups2 = await this.$root.api('users/groups/joined');
+			if (groups1.length === 0 && groups2.length === 0) {
+				this.$root.dialog({
+					type: 'warning',
+					title: this.$t('youHaveNoGroups'),
+					text: this.$t('joinOrCreateGroup'),
+				});
+				return;
+			}
+			const { canceled, result: group } = await this.$root.dialog({
+				type: null,
+				title: this.$t('group'),
+				select: {
+					items: groups1.concat(groups2).map(group => ({
+						value: group, text: group.name
+					}))
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			this.$router.push(`/my/messaging/group/${group.id}`);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-messaging {
+
+	> .start {
+		margin: 0 auto 16px auto;
+	}
+
+	> .history {
+		> .message {
+			display: block;
+			text-decoration: none;
+			margin-bottom: 16px;
+
+			@media (max-width: 500px) {
+				margin-bottom: 8px;
+			}
+
+			* {
+				pointer-events: none;
+				user-select: none;
+			}
+
+			&:hover {
+				.avatar {
+					filter: saturate(200%);
+				}
+			}
+
+			&:active {
+			}
+
+			&[data-is-read],
+			&[data-is-me] {
+				opacity: 0.8;
+			}
+
+			&:not([data-is-me]):not([data-is-read]) {
+				> div {
+					background-image: url("/assets/unread.svg");
+					background-repeat: no-repeat;
+					background-position: 0 center;
+				}
+			}
+
+			&:after {
+				content: "";
+				display: block;
+				clear: both;
+			}
+
+			> div {
+				padding: 20px 30px;
+
+				&:after {
+					content: "";
+					display: block;
+					clear: both;
+				}
+
+				> header {
+					display: flex;
+					align-items: center;
+					margin-bottom: 2px;
+					white-space: nowrap;
+					overflow: hidden;
+
+					> .name {
+						margin: 0;
+						padding: 0;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 1em;
+						font-weight: bold;
+						transition: all 0.1s ease;
+					}
+
+					> .username {
+						margin: 0 8px;
+					}
+
+					> .mk-time {
+						margin: 0 0 0 auto;
+					}
+				}
+
+				> .avatar {
+					float: left;
+					width: 54px;
+					height: 54px;
+					margin: 0 16px 0 0;
+					border-radius: 8px;
+					transition: all 0.1s ease;
+				}
+
+				> .body {
+
+					> .text {
+						display: block;
+						margin: 0 0 0 0;
+						padding: 0;
+						overflow: hidden;
+						overflow-wrap: break-word;
+						font-size: 1.1em;
+						color: var(--faceText);
+
+						.me {
+							opacity: 0.7;
+						}
+					}
+
+					> .image {
+						display: block;
+						max-width: 100%;
+						max-height: 512px;
+					}
+				}
+			}
+		}
+	}
+
+	> .no-history {
+		padding: 32px;
+		text-align: center;
+
+		> img {
+			vertical-align: bottom;
+			height: 128px;
+			margin-bottom: 16px;
+			border-radius: 16px;
+		}
+	}
+
+	@media (max-width: 400px) {
+		> .history {
+			> .message {
+				&:not([data-is-me]):not([data-is-read]) {
+					> div {
+						background-image: none;
+						border-left: solid 4px #3aa2dc;
+					}
+				}
+
+				> div {
+					padding: 16px;
+					font-size: 0.9em;
+
+					> .avatar {
+						margin: 0 12px 0 0;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
new file mode 100644
index 0000000000..0cd3dfcc85
--- /dev/null
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -0,0 +1,353 @@
+<template>
+<div class="mk-messaging-form _panel"
+	@dragover.stop="onDragover"
+	@drop.stop="onDrop"
+>
+	<textarea
+		v-model="text"
+		ref="text"
+		@keypress="onKeypress"
+		@paste="onPaste"
+		:placeholder="$t('inputMessageHere')"
+		v-autocomplete="{ model: 'text' }"
+	></textarea>
+	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
+	<x-uploader ref="uploader" @uploaded="onUploaded"/>
+	<button class="send _button" @click="send" :disabled="!canSend || sending" :title="$t('send')">
+		<template v-if="!sending"><fa :icon="faPaperPlane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
+	</button>
+	<button class="_button" @click="chooseFile"><fa :icon="faPhotoVideo"/></button>
+	<button class="_button" @click="insertEmoji"><fa :icon="faLaughSquint"/></button>
+	<input ref="file" type="file" @change="onChangeFile"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import * as autosize from 'autosize';
+import i18n from '../../i18n';
+import { formatTimeString } from '../../../misc/format-time-string';
+import { selectFile } from '../../scripts/select-file';
+
+export default Vue.extend({
+	i18n,
+	components: {
+		XUploader: () => import('../../components/uploader.vue').then(m => m.default),
+	},
+	props: {
+		user: {
+			type: Object,
+			requird: false,
+		},
+		group: {
+			type: Object,
+			requird: false,
+		},
+	},
+	data() {
+		return {
+			text: null,
+			file: null,
+			sending: false,
+			faPaperPlane, faPhotoVideo, faLaughSquint
+		};
+	},
+	computed: {
+		draftId(): string {
+			return this.user ? 'user:' + this.user.id : 'group:' + this.group.id;
+		},
+		canSend(): boolean {
+			return (this.text != null && this.text != '') || this.file != null;
+		},
+		room(): any {
+			return this.$parent;
+		}
+	},
+	watch: {
+		text() {
+			this.saveDraft();
+		},
+		file() {
+			this.saveDraft();
+
+			if (this.room.isBottom()) {
+				this.room.scrollToBottom();
+			}
+		}
+	},
+	mounted() {
+		autosize(this.$refs.text);
+
+		// 書きかけの投稿を復元
+		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftId];
+		if (draft) {
+			this.text = draft.data.text;
+			this.file = draft.data.file;
+		}
+	},
+	methods: {
+		async onPaste(e: ClipboardEvent) {
+			const data = e.clipboardData;
+			const items = data.items;
+
+			if (items.length == 1) {
+				if (items[0].kind == 'file') {
+					const file = items[0].getAsFile();
+					const lio = file.name.lastIndexOf('.');
+					const ext = lio >= 0 ? file.name.slice(lio) : '';
+					const formatted = `${formatTimeString(new Date(file.lastModified), this.$store.state.settings.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
+					const name = this.$store.state.settings.pasteDialog
+						? await this.$root.dialog({
+							title: this.$t('enterFileName'),
+							input: {
+								default: formatted
+							},
+							allowEmpty: false
+						}).then(({ canceled, result }) => canceled ? false : result)
+						: formatted;
+					if (name) this.upload(file, name);
+				}
+			} else {
+				if (items[0].kind == 'file') {
+					this.$root.dialog({
+						type: 'error',
+						text: this.$t('onlyOneFileCanBeAttached')
+					});
+				}
+			}
+		},
+
+		onDragover(e) {
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+			if (isFile || isDriveFile) {
+				e.preventDefault();
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			}
+		},
+
+		onDrop(e): void {
+			// ファイルだったら
+			if (e.dataTransfer.files.length == 1) {
+				e.preventDefault();
+				this.upload(e.dataTransfer.files[0]);
+				return;
+			} else if (e.dataTransfer.files.length > 1) {
+				e.preventDefault();
+				this.$root.dialog({
+					type: 'error',
+					text: this.$t('onlyOneFileCanBeAttached')
+				});
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				this.file = JSON.parse(driveFile);
+				e.preventDefault();
+			}
+			//#endregion
+		},
+
+		onKeypress(e) {
+			if ((e.which == 10 || e.which == 13) && e.ctrlKey && this.canSend) {
+				this.send();
+			}
+		},
+
+		chooseFile(e) {
+			selectFile(this, e.currentTarget || e.target, this.$t('selectFile'), false).then(file => {
+				this.file = file;
+			});
+		},
+
+		onChangeFile() {
+			this.upload((this.$refs.file as any).files[0]);
+		},
+
+		upload(file: File, name?: string) {
+			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder, name);
+		},
+
+		onUploaded(file) {
+			this.file = file;
+		},
+
+		send() {
+			this.sending = true;
+			this.$root.api('messaging/messages/create', {
+				userId: this.user ? this.user.id : undefined,
+				groupId: this.group ? this.group.id : undefined,
+				text: this.text ? this.text : undefined,
+				fileId: this.file ? this.file.id : undefined
+			}).then(message => {
+				this.clear();
+			}).catch(err => {
+				console.error(err);
+			}).then(() => {
+				this.sending = false;
+			});
+		},
+
+		clear() {
+			this.text = '';
+			this.file = null;
+			this.deleteDraft();
+		},
+
+		saveDraft() {
+			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+			data[this.draftId] = {
+				updatedAt: new Date(),
+				data: {
+					text: this.text,
+					file: this.file
+				}
+			}
+
+			localStorage.setItem('message_drafts', JSON.stringify(data));
+		},
+
+		deleteDraft() {
+			const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+			delete data[this.draftId];
+
+			localStorage.setItem('message_drafts', JSON.stringify(data));
+		},
+
+		async insertEmoji(ev) {
+			const vm = this.$root.new(await import('../../components/emoji-picker.vue').then(m => m.default), {
+				source: ev.currentTarget || ev.target
+			}).$once('chosen', emoji => {
+				insertTextAtCursor(this.$refs.text, emoji);
+				vm.close();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-messaging-form {
+	position: relative;
+
+	> textarea {
+		cursor: auto;
+		display: block;
+		width: 100%;
+		min-width: 100%;
+		max-width: 100%;
+		height: 80px;
+		margin: 0;
+		padding: 16px 16px 0 16px;
+		resize: none;
+		font-size: 1em;
+		font-family: inherit;
+		outline: none;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+		background: transparent;
+		box-sizing: border-box;
+		color: var(--fg);
+	}
+
+	> .file {
+		padding: 8px;
+		color: #444;
+		background: #eee;
+		cursor: pointer;
+	}
+
+	> .send {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		margin: 0;
+		padding: 16px;
+		font-size: 1em;
+		transition: color 0.1s ease;
+		color: var(--accent);
+
+		&:active {
+			color: var(--accentDarken);
+			transition: color 0s ease;
+		}
+	}
+
+	.files {
+		display: block;
+		margin: 0;
+		padding: 0 8px;
+		list-style: none;
+
+		&:after {
+			content: '';
+			display: block;
+			clear: both;
+		}
+
+		> li {
+			display: block;
+			float: left;
+			margin: 4px;
+			padding: 0;
+			width: 64px;
+			height: 64px;
+			background-color: #eee;
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: cover;
+			cursor: move;
+
+			&:hover {
+				> .remove {
+					display: block;
+				}
+			}
+
+			> .remove {
+				display: none;
+				position: absolute;
+				right: -6px;
+				top: -6px;
+				margin: 0;
+				padding: 0;
+				background: transparent;
+				outline: none;
+				border: none;
+				border-radius: 0;
+				box-shadow: none;
+				cursor: pointer;
+			}
+		}
+	}
+
+	._button {
+		margin: 0;
+		padding: 16px;
+		font-size: 1em;
+		font-weight: normal;
+		text-decoration: none;
+		transition: color 0.1s ease;
+
+		&:hover {
+			color: var(--accent);
+		}
+
+		&:active {
+			color: var(--accentDarken);
+			transition: color 0s ease;
+		}
+	}
+
+	input[type=file] {
+		display: none;
+	}
+}
+</style>
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
new file mode 100644
index 0000000000..4988b70a22
--- /dev/null
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -0,0 +1,337 @@
+<template>
+<div class="thvuemwp" :data-is-me="isMe">
+	<mk-avatar class="avatar" :user="message.user"/>
+	<div class="content">
+		<div class="balloon" :data-no-text="message.text == null">
+			<button class="delete-button" v-if="isMe" :title="$t('delete')" @click="del">
+				<img src="/assets/remove.png" alt="Delete"/>
+			</button>
+			<div class="content" v-if="!message.isDeleted">
+				<mfm class="text" v-if="message.text" ref="text" :text="message.text" :i="$store.state.i"/>
+				<div class="file" v-if="message.file">
+					<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
+						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"
+							:style="{ backgroundColor: message.file.properties.avgColor || 'transparent' }"/>
+						<p v-else>{{ message.file.name }}</p>
+					</a>
+				</div>
+			</div>
+			<div class="content" v-else>
+				<p class="is-deleted">{{ $t('deleted') }}</p>
+			</div>
+		</div>
+		<div></div>
+		<mk-url-preview v-for="url in urls" :url="url" :key="url" style="margin: 8px 0;"/>
+		<footer>
+			<template v-if="isGroup">
+				<span class="read" v-if="message.reads.length > 0">{{ $t('messageRead') }} {{ message.reads.length }}</span>
+			</template>
+			<template v-else>
+				<span class="read" v-if="isMe && message.isRead">{{ $t('messageRead') }}</span>
+			</template>
+			<mk-time :time="message.createdAt"/>
+			<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
+		</footer>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import { parse } from '../../../mfm/parse';
+import { unique } from '../../../prelude/array';
+import MkUrlPreview from '../../components/url-preview.vue';
+
+export default Vue.extend({
+	i18n,
+	components: {
+		MkUrlPreview
+	},
+	props: {
+		message: {
+			required: true
+		},
+		isGroup: {
+			required: false
+		}
+	},
+	computed: {
+		isMe(): boolean {
+			return this.message.userId == this.$store.state.i.id;
+		},
+		urls(): string[] {
+			if (this.message.text) {
+				const ast = parse(this.message.text);
+				return unique(ast
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
+			} else {
+				return null;
+			}
+		}
+	},
+	methods: {
+		del() {
+			this.$root.api('messaging/messages/delete', {
+				messageId: this.message.id
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.thvuemwp {
+	$me-balloon-color: var(--accent);
+
+	position: relative;
+	background-color: transparent;
+	display: flex;
+
+	> .avatar {
+		display: block;
+		width: 54px;
+		height: 54px;
+		transition: all 0.1s ease;
+
+		@media (max-width: 400px) {
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .content {
+		min-width: 0;
+
+		> .balloon {
+			position: relative;
+			display: inline-flex;
+			align-items: center;
+			padding: 0;
+			min-height: 38px;
+			border-radius: 16px;
+			max-width: 100%;
+
+			&:before {
+				content: "";
+				pointer-events: none;
+				display: block;
+				position: absolute;
+				top: 12px;
+			}
+
+			& + * {
+				clear: both;
+			}
+
+			&:hover {
+				> .delete-button {
+					display: block;
+				}
+			}
+
+			> .delete-button {
+				display: none;
+				position: absolute;
+				z-index: 1;
+				top: -4px;
+				right: -4px;
+				margin: 0;
+				padding: 0;
+				cursor: pointer;
+				outline: none;
+				border: none;
+				border-radius: 0;
+				box-shadow: none;
+				background: transparent;
+
+				> img {
+					vertical-align: bottom;
+					width: 16px;
+					height: 16px;
+					cursor: pointer;
+				}
+			}
+
+			> .content {
+				max-width: 100%;
+
+				> .is-deleted {
+					display: block;
+					margin: 0;
+					padding: 0;
+					overflow: hidden;
+					overflow-wrap: break-word;
+					font-size: 1em;
+					color: rgba(#000, 0.5);
+				}
+
+				> .text {
+					display: block;
+					margin: 0;
+					padding: 12px 18px;
+					overflow: hidden;
+					overflow-wrap: break-word;
+					word-break: break-word;
+					font-size: 1em;
+					color: rgba(#000, 0.8);
+
+					@media (max-width: 500px) {
+						padding: 8px 16px;
+					}
+
+					@media (max-width: 400px) {
+						font-size: 0.9em;
+					}
+
+					& + .file {
+						> a {
+							border-radius: 0 0 16px 16px;
+						}
+					}
+				}
+
+				> .file {
+					> a {
+						display: block;
+						max-width: 100%;
+						border-radius: 16px;
+						overflow: hidden;
+						text-decoration: none;
+
+						&:hover {
+							text-decoration: none;
+
+							> p {
+								background: #ccc;
+							}
+						}
+
+						> * {
+							display: block;
+							margin: 0;
+							width: 100%;
+							max-height: 512px;
+							object-fit: contain;
+						}
+
+						> p {
+							padding: 30px;
+							text-align: center;
+							color: #555;
+							background: #ddd;
+						}
+					}
+				}
+			}
+		}
+
+		> footer {
+			display: block;
+			margin: 2px 0 0 0;
+			font-size: 0.65em;
+
+			> .read {
+				margin: 0 8px;
+			}
+
+			> [data-icon] {
+				margin-left: 4px;
+			}
+		}
+	}
+
+	&:not([data-is-me]) {
+		padding-left: var(--margin);
+
+		> .content {
+			padding-left: 16px;
+			padding-right: 32px;
+
+			> .balloon {
+				$color: var(--messageBg);
+				background: $color;
+
+				&[data-no-text] {
+					background: transparent;
+				}
+
+				&:not([data-no-text]):before {
+					left: -14px;
+					border-top: solid 8px transparent;
+					border-right: solid 8px $color;
+					border-bottom: solid 8px transparent;
+					border-left: solid 8px transparent;
+				}
+
+				> .content {
+					> .text {
+						color: var(--fg);
+					}
+				}
+			}
+
+			> footer {
+				text-align: left;
+			}
+		}
+	}
+
+	&[data-is-me] {
+		flex-direction: row-reverse;
+		padding-right: var(--margin);
+
+		> .content {
+			padding-right: 16px;
+			padding-left: 32px;
+			text-align: right;
+
+			> .balloon {
+				background: $me-balloon-color;
+				text-align: left;
+
+				&[data-no-text] {
+					background: transparent;
+				}
+
+				&:not([data-no-text]):before {
+					right: -14px;
+					left: auto;
+					border-top: solid 8px transparent;
+					border-right: solid 8px transparent;
+					border-bottom: solid 8px transparent;
+					border-left: solid 8px $me-balloon-color;
+				}
+
+				> .content {
+
+					> p.is-deleted {
+						color: rgba(#fff, 0.5);
+					}
+
+					> .text {
+						&, ::v-deep * {
+							color: #fff !important;
+						}
+					}
+				}
+			}
+
+			> footer {
+				text-align: right;
+
+				> .read {
+					user-select: none;
+				}
+			}
+		}
+	}
+
+	&[data-is-deleted] {
+		> .balloon {
+			opacity: 0.5;
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
new file mode 100644
index 0000000000..0a20c56c29
--- /dev/null
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -0,0 +1,391 @@
+<template>
+<div class="mk-messaging-room naked"
+	@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" :class="{ fetching: fetchingMoreMessages }" v-if="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, i }" direction="up" reversed>
+			<x-message :message="message" :is-group="group != null" :key="message.id"/>
+		</x-list>
+	</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 i18n from '../../i18n';
+import XList from '../../components/date-separated-list.vue';
+import XMessage from './messaging-room.message.vue';
+import XForm from './messaging-room.form.vue';
+import { url } from '../../config';
+import parseAcct from '../../../misc/acct/parse';
+
+export default Vue.extend({
+	i18n,
+
+	components: {
+		XMessage,
+		XForm,
+		XList,
+	},
+
+	data() {
+		return {
+			fetching: true,
+			user: null,
+			group: null,
+			fetchingMoreMessages: false,
+			messages: [],
+			existMoreMessages: false,
+			connection: null,
+			showIndicator: false,
+			timer: null,
+			faArrowCircleDown, faFlag, faUsers, faInfoCircle
+		};
+	},
+
+	computed: {
+		form(): any {
+			return this.$refs.form;
+		}
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	mounted() {
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+
+		window.removeEventListener('scroll', this.onScroll);
+
+		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+	},
+
+	methods: {
+		async fetch() {
+			this.fetching = true;
+			if (this.$route.params.user) {
+				const user = await this.$root.api('users/show', parseAcct(this.$route.params.user));
+				this.user = user;
+			} else {
+				const group = await this.$root.api('users/groups/show', { groupId: this.$route.params.group });
+				this.group = group;
+			}
+
+			this.connection = this.$root.stream.connectToChannel('messaging', {
+				otherparty: this.user ? this.user.id : undefined,
+				group: this.group ? this.group.id : undefined,
+			});
+
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+			this.connection.on('deleted', this.onDeleted);
+
+			window.addEventListener('scroll', this.onScroll, { passive: true });
+
+			document.addEventListener('visibilitychange', this.onVisibilitychange);
+
+			this.fetchMessages().then(() => {
+				this.fetching = false;
+				this.scrollToBottom();
+			});
+		},
+
+		onDragover(e) {
+			const isFile = e.dataTransfer.items[0].kind == 'file';
+			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
+
+			if (isFile || isDriveFile) {
+				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+			} else {
+				e.dataTransfer.dropEffect = 'none';
+			}
+		},
+
+		onDrop(e): void {
+			// ファイルだったら
+			if (e.dataTransfer.files.length == 1) {
+				this.form.upload(e.dataTransfer.files[0]);
+				return;
+			} else if (e.dataTransfer.files.length > 1) {
+				this.$root.dialog({
+					type: 'error',
+					text: this.$t('onlyOneFileCanBeAttached')
+				});
+				return;
+			}
+
+			//#region ドライブのファイル
+			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			if (driveFile != null && driveFile != '') {
+				const file = JSON.parse(driveFile);
+				this.form.file = file;
+			}
+			//#endregion
+		},
+
+		fetchMessages() {
+			return new Promise((resolve, reject) => {
+				const max = this.existMoreMessages ? 20 : 10;
+
+				this.$root.api('messaging/messages', {
+					userId: this.user ? this.user.id : undefined,
+					groupId: this.group ? this.group.id : undefined,
+					limit: max + 1,
+					untilId: this.existMoreMessages ? this.messages[0].id : undefined
+				}).then(messages => {
+					if (messages.length == max + 1) {
+						this.existMoreMessages = true;
+						messages.pop();
+					} else {
+						this.existMoreMessages = false;
+					}
+
+					this.messages.unshift.apply(this.messages, messages.reverse());
+					resolve();
+				});
+			});
+		},
+
+		fetchMoreMessages() {
+			this.fetchingMoreMessages = true;
+			this.fetchMessages().then(() => {
+				this.fetchingMoreMessages = false;
+			});
+		},
+
+		onMessage(message) {
+			this.$root.sound('chat');
+
+			const isBottom = this.isBottom();
+
+			this.messages.push(message);
+			if (message.userId != this.$store.state.i.id && !document.hidden) {
+				this.connection.send('read', {
+					id: message.id
+				});
+			}
+
+			if (isBottom) {
+				// Scroll to bottom
+				this.$nextTick(() => {
+					this.scrollToBottom();
+				});
+			} else if (message.userId != this.$store.state.i.id) {
+				// Notify
+				this.notifyNewMessage();
+			}
+		},
+
+		onRead(x) {
+			if (this.user) {
+				if (!Array.isArray(x)) x = [x];
+				for (const id of x) {
+					if (this.messages.some(x => x.id == id)) {
+						const exist = this.messages.map(x => x.id).indexOf(id);
+						this.messages[exist].isRead = true;
+					}
+				}
+			} else if (this.group) {
+				for (const id of x.ids) {
+					if (this.messages.some(x => x.id == id)) {
+						const exist = this.messages.map(x => x.id).indexOf(id);
+						this.messages[exist].reads.push(x.userId);
+					}
+				}
+			}
+		},
+
+		onDeleted(id) {
+			const msg = this.messages.find(m => m.id === id);
+			if (msg) {
+				this.messages = this.messages.filter(m => m.id !== msg.id);
+			}
+		},
+
+		isBottom() {
+			const asobi = 64;
+			const current = this.isNaked
+				? window.scrollY + window.innerHeight
+				: this.$el.scrollTop + this.$el.offsetHeight;
+			const max = this.isNaked
+				? document.body.offsetHeight
+				: this.$el.scrollHeight;
+			return current > (max - asobi);
+		},
+
+		scrollToBottom() {
+			window.scroll(0, document.body.offsetHeight);
+		},
+
+		onIndicatorClick() {
+			this.showIndicator = false;
+			this.scrollToBottom();
+		},
+
+		notifyNewMessage() {
+			this.showIndicator = true;
+
+			if (this.timer) clearTimeout(this.timer);
+
+			this.timer = setTimeout(() => {
+				this.showIndicator = false;
+			}, 4000);
+		},
+
+		onScroll() {
+			const el = this.isNaked ? window.document.documentElement : this.$el;
+			const current = el.scrollTop + el.clientHeight;
+			if (current > el.scrollHeight - 1) {
+				this.showIndicator = false;
+			}
+		},
+
+		onVisibilitychange() {
+			if (document.hidden) return;
+			for (const message of this.messages) {
+				if (message.userId !== this.$store.state.i.id && !message.isRead) {
+					this.connection.send('read', {
+						id: message.id
+					});
+				}
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-messaging-room {
+
+	> .body {
+		width: 100%;
+
+		> .empty {
+			width: 100%;
+			margin: 0;
+			padding: 16px 8px 8px 8px;
+			text-align: center;
+			font-size: 0.8em;
+			opacity: 0.5;
+
+			[data-icon] {
+				margin-right: 4px;
+			}
+		}
+
+		> .no-history {
+			display: block;
+			margin: 0;
+			padding: 16px;
+			text-align: center;
+			font-size: 0.8em;
+			color: var(--messagingRoomInfo);
+			opacity: 0.5;
+
+			[data-icon] {
+				margin-right: 4px;
+			}
+		}
+
+		> .more {
+			display: block;
+			margin: 16px auto;
+			padding: 0 12px;
+			line-height: 24px;
+			color: #fff;
+			background: rgba(#000, 0.3);
+			border-radius: 12px;
+
+			&:hover {
+				background: rgba(#000, 0.4);
+			}
+
+			&:active {
+				background: rgba(#000, 0.5);
+			}
+
+			&.fetching {
+				cursor: wait;
+			}
+
+			> [data-icon] {
+				margin-right: 4px;
+			}
+		}
+
+		> .messages {
+			> ::v-deep * {
+				margin-bottom: 16px;
+			}
+		}
+	}
+
+	> footer {
+		width: 100%;
+
+		> .new-message {
+			position: absolute;
+			top: -48px;
+			width: 100%;
+			padding: 8px 0;
+			text-align: center;
+
+			> button {
+				display: inline-block;
+				margin: 0;
+				padding: 0 12px 0 30px;
+				line-height: 32px;
+				font-size: 12px;
+				border-radius: 16px;
+
+				> i {
+					position: absolute;
+					top: 0;
+					left: 10px;
+					line-height: 32px;
+					font-size: 16px;
+				}
+			}
+		}
+	}
+}
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter, .fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+</style>
-- 
cgit v1.2.3-freya


From 76f992906d237f276252060ba94d3e8d57e9ec6b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 22 Mar 2020 15:11:16 +0900
Subject: Add account setting link

---
 src/client/pages/preferences/index.vue |  2 ++
 src/client/style.scss                  | 20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

(limited to 'src/client/pages')

diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 7cf6f4b4b2..2b1b3083a4 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -3,6 +3,8 @@
 	<portal to="icon"><fa :icon="faCog"/></portal>
 	<portal to="title">{{ $t('clinetSettings') }}</portal>
 
+	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
+
 	<x-theme/>
 
 	<section class="_card">
diff --git a/src/client/style.scss b/src/client/style.scss
index fee64c7ca8..7b509e5b51 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -292,7 +292,7 @@ main ._panel {
 	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
-._panel._button {
+.__panelButton {
 	display: flex;
 	width: 100%;
 	min-height: 48px;
@@ -300,6 +300,24 @@ main ._panel {
 	justify-content: center;
 }
 
+._panel._button {
+	@extend .__panelButton;
+}
+
+._panel._buttonPrimary {
+	@extend .__panelButton;
+	color: var(--accent);
+	background: var(--panel);
+
+	&:not(:disabled):hover {
+		background: var(--panel);
+	}
+
+	&:not(:disabled):active {
+		background: var(--panel);
+	}
+}
+
 ._card {
 	@extend ._panel;
 
-- 
cgit v1.2.3-freya