From a5fd5628e24569ed4552ce34623667dad9f26dc8 Mon Sep 17 00:00:00 2001
From: limepotato <limepotato@noreply.iceshrimp.dev>
Date: Thu, 18 Jul 2024 01:44:19 +0200
Subject: [PATCH] revert 7993396dbc19ccac8e2502b7c27114b481e26dfa

revert Remove messaging!
---
 packages/client/src/pages/messaging/index.vue | 312 ++++++++++++
 .../pages/messaging/messaging-room.form.vue   | 415 ++++++++++++++++
 .../messaging/messaging-room.message.vue      | 377 ++++++++++++++
 .../src/pages/messaging/messaging-room.vue    | 464 ++++++++++++++++++
 packages/client/src/ui/universal.vue          |  21 +
 5 files changed, 1589 insertions(+)
 create mode 100644 packages/client/src/pages/messaging/index.vue
 create mode 100644 packages/client/src/pages/messaging/messaging-room.form.vue
 create mode 100644 packages/client/src/pages/messaging/messaging-room.message.vue
 create mode 100644 packages/client/src/pages/messaging/messaging-room.vue

diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
new file mode 100644
index 000000000..17bdd3786
--- /dev/null
+++ b/packages/client/src/pages/messaging/index.vue
@@ -0,0 +1,312 @@
+<template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<div>
+			<MkSpacer :content-max="800">
+				<swiper
+					:round-lengths="true"
+					:touch-angle="25"
+					:threshold="10"
+					:centeredSlides="true"
+					:modules="[Virtual]"
+					:space-between="20"
+					:virtual="true"
+					:allow-touch-move="
+						defaultStore.state.swipeOnMobile &&
+						(deviceKind !== 'desktop' ||
+							defaultStore.state.swipeOnDesktop)
+					"
+					@swiper="setSwiperRef"
+					@slide-change="onSlideChange"
+				>
+					<swiper-slide>
+						<div class="_content yweeujhr dms">
+							<MkButton
+								primary
+								class="start"
+								v-if="!isMobile"
+								@click="startUser"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts.startMessaging }}</MkButton
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="dmsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
+						</div>
+					</swiper-slide>
+					<swiper-slide>
+						<div class="_content yweeujhr groups">
+							<div v-if="!isMobile" class="groupsbuttons">
+								<MkButton
+									primary
+									class="start"
+									:link="true"
+									to="/my/groups"
+									><i
+										class="ph-user-circle-gear ph-bold ph-lg"
+									></i>
+									{{ i18n.ts.manageGroups }}</MkButton
+								>
+								<MkButton
+									primary
+									class="start"
+									@click="startGroup"
+									><i class="ph-plus ph-bold ph-lg"></i>
+									{{ i18n.ts.startMessaging }}</MkButton
+								>
+							</div>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="groupsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
+						</div>
+					</swiper-slide>
+				</swiper>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
+import * as Acct from "iceshrimp-js/built/acct";
+import { Virtual } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkButton from "@/components/MkButton.vue";
+import MkChatPreview from "@/components/MkChatPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
+
+const router = useRouter();
+
+let messages = $ref([]);
+let connection = $ref(null);
+
+const tabs = ["dms", "groups"];
+let tab = $ref(tabs[0]);
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+
+const MOBILE_THRESHOLD = 500;
+const isMobile = ref(
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD,
+);
+window.addEventListener("resize", () => {
+	isMobile.value =
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
+async function readAllMessagingMessages() {
+	await os.apiWithDialog("i/read-all-messaging-messages");
+}
+
+const headerActions = $computed(() => [
+	{
+		icon: "ph-checks ph-bold ph-lg",
+		text: i18n.ts.markAllAsRead,
+		handler: readAllMessagingMessages,
+	},
+]);
+
+const headerTabs = $computed(() => [
+	{
+		key: "dms",
+		title: i18n.ts._messaging.dms,
+		icon: "ph-user ph-bold ph-lg",
+	},
+	{
+		key: "groups",
+		title: i18n.ts._messaging.groups,
+		icon: "ph-users-three ph-bold ph-lg",
+	},
+]);
+
+definePageMetadata({
+	title: i18n.ts.messaging,
+	icon: "ph-chats-teardrop ph-bold ph-lg",
+});
+
+const dmsPagination = {
+	endpoint: "messaging/history" as const,
+	limit: 15,
+	params: {
+		group: false,
+	},
+};
+const groupsPagination = {
+	endpoint: "messaging/history" as const,
+	limit: 5,
+	params: {
+		group: true,
+	},
+};
+
+function onMessage(message): void {
+	if (message.recipientId) {
+		messages = messages.filter(
+			(m) =>
+				!(
+					(m.recipientId === message.recipientId &&
+						m.userId === message.userId) ||
+					(m.recipientId === message.userId &&
+						m.userId === message.recipientId)
+				),
+		);
+
+		messages.unshift(message);
+	} else if (message.groupId) {
+		messages = messages.filter((m) => m.groupId !== message.groupId);
+		messages.unshift(message);
+	}
+}
+
+function onRead(ids): void {
+	for (const id of ids) {
+		const found = messages.find((m) => m.id === id);
+		if (found) {
+			if (found.recipientId) {
+				found.isRead = true;
+			} else if (found.groupId) {
+				found.reads.push($i.id);
+			}
+		}
+	}
+}
+
+function startMenu(ev) {
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.messagingWithUser,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					startUser();
+				},
+			},
+			{
+				text: i18n.ts.messagingWithGroup,
+				icon: "ph-users-three ph-bold ph-lg",
+				action: () => {
+					startGroup();
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target,
+	);
+}
+
+async function startUser(): void {
+	os.selectUser().then((user) => {
+		router.push(`/my/messaging/${Acct.toString(user)}`);
+	});
+}
+
+async function startGroup(): void {
+	const groups1 = await os.api("users/groups/owned");
+	const groups2 = await os.api("users/groups/joined");
+	if (groups1.length === 0 && groups2.length === 0) {
+		os.alert({
+			type: "warning",
+			title: i18n.ts.youHaveNoGroups,
+			text: i18n.ts.joinOrCreateGroup,
+		});
+		return;
+	}
+	const { canceled, result: group } = await os.select({
+		title: i18n.ts.group,
+		items: groups1.concat(groups2).map((group) => ({
+			value: group,
+			text: group.name,
+		})),
+	});
+	if (canceled) return;
+	router.push(`/my/messaging/group/${group.id}`);
+}
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+
+	connection = markRaw(stream.useChannel("messagingIndex"));
+
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
+
+	os.api("messaging/history", { group: false, limit: 5 }).then(
+		(userMessages) => {
+			os.api("messaging/history", { group: true, limit: 5 }).then(
+				(groupMessages) => {
+					const _messages = userMessages.concat(groupMessages);
+					_messages.sort(
+						(a, b) =>
+							new Date(b.createdAt).getTime() -
+							new Date(a.createdAt).getTime(),
+					);
+					messages = _messages;
+				},
+			);
+		},
+	);
+});
+
+onUnmounted(() => {
+	if (connection) connection.dispose();
+});
+</script>
+
+<style lang="scss" scoped>
+.yweeujhr {
+	> .start {
+		margin: 0 auto var(--margin) auto;
+	}
+
+	> .groupsbuttons {
+		max-width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1rem;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
new file mode 100644
index 000000000..1ea9bb869
--- /dev/null
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -0,0 +1,415 @@
+<template>
+	<div
+		class="pemppnzi _block"
+		@dragover.stop="onDragover"
+		@drop.stop="onDrop"
+	>
+		<textarea
+			ref="textEl"
+			v-model="text"
+			:placeholder="i18n.ts.inputMessageHere"
+			@keydown="onKeydown"
+			@compositionupdate="onCompositionUpdate"
+			@paste="onPaste"
+		></textarea>
+		<footer>
+			<div v-if="file" class="file" @click="file = null">
+				{{ file.name }}
+			</div>
+			<div class="buttons">
+				<button
+					class="_button"
+					@click="chooseFile"
+					:aria-label="i18n.t('attachFile')"
+				>
+					<i class="ph-upload ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="_button"
+					@click="insertEmoji"
+					:aria-label="i18n.t('chooseEmoji')"
+				>
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="send _button"
+					:disabled="!canSend || sending"
+					:title="i18n.ts.send"
+					:aria-label="i18n.ts.send"
+					@click="send"
+				>
+					<template v-if="!sending"
+						><i
+							class="ph-paper-plane-tilt ph-bold ph-lg"
+						></i></template
+					><template v-if="sending"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i
+					></template>
+				</button>
+			</div>
+		</footer>
+		<input ref="fileEl" type="file" @change="onChangeFile" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from "vue";
+import * as Misskey from "iceshrimp-js";
+import autosize from "autosize";
+//import insertTextAtCursor from 'insert-text-at-cursor';
+import { throttle } from "throttle-debounce";
+import { Autocomplete } from "@/scripts/autocomplete";
+import { formatTimeString } from "@/scripts/format-time-string";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile } from "@/scripts/upload";
+
+const props = defineProps<{
+	user?: Misskey.entities.UserDetailed | null;
+	group?: Misskey.entities.UserGroup | null;
+}>();
+
+let textEl = $ref<HTMLTextAreaElement>();
+let fileEl = $ref<HTMLInputElement>();
+
+let text = $ref<string>("");
+let file = $ref<Misskey.entities.DriveFile | null>(null);
+let sending = $ref(false);
+const typing = throttle(3000, () => {
+	stream.send(
+		"typingOnMessaging",
+		props.user ? { partner: props.user.id } : { group: props.group?.id },
+	);
+});
+
+let draftKey = $computed(() =>
+	props.user ? "user:" + props.user.id : "group:" + props.group?.id,
+);
+let canSend = $computed(
+	() => (text != null && text.trim() !== "") || file != null,
+);
+
+watch([$$(text), $$(file)], saveDraft);
+
+async function onPaste(ev: ClipboardEvent) {
+	if (!ev.clipboardData) return;
+
+	const clipboardData = ev.clipboardData;
+	const items = clipboardData.items;
+
+	if (items.length === 1) {
+		if (items[0].kind === "file") {
+			const pastedFile = items[0].getAsFile();
+			if (!pastedFile) return;
+			const lio = pastedFile.name.lastIndexOf(".");
+			const ext = lio >= 0 ? pastedFile.name.slice(lio) : "";
+			const formatted =
+				formatTimeString(
+					new Date(pastedFile.lastModified),
+					defaultStore.state.pastedFileName,
+				).replace(/{{number}}/g, "1") + ext;
+			if (formatted) upload(pastedFile, formatted);
+		}
+	} else {
+		if (items[0].kind === "file") {
+			os.alert({
+				type: "error",
+				text: i18n.ts.onlyOneFileCanBeAttached,
+			});
+		}
+	}
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	const isFile = ev.dataTransfer.items[0].kind === "file";
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	if (isFile || isDriveFile) {
+		ev.preventDefault();
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
+	}
+}
+
+function onDrop(ev: DragEvent): void {
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length === 1) {
+		ev.preventDefault();
+		upload(ev.dataTransfer.files[0]);
+		return;
+	} else if (ev.dataTransfer.files.length > 1) {
+		ev.preventDefault();
+		os.alert({
+			type: "error",
+			text: i18n.ts.onlyOneFileCanBeAttached,
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== "") {
+		file = JSON.parse(driveFile);
+		ev.preventDefault();
+	}
+	//#endregion
+}
+
+function onKeydown(ev: KeyboardEvent) {
+	typing();
+	let sendOnEnter =
+		localStorage.getItem("enterSendsMessage") === "true" ||
+		defaultStore.state.enterSendsMessage;
+	if (sendOnEnter) {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey)) {
+			textEl.value += "\n";
+		} else if (
+			ev.key === "Enter" &&
+			!ev.shiftKey &&
+			!("ontouchstart" in document.documentElement) &&
+			canSend
+		) {
+			ev.preventDefault();
+			send();
+		}
+	} else {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey) && canSend) {
+			ev.preventDefault();
+			send();
+		}
+	}
+}
+
+function onCompositionUpdate() {
+	typing();
+}
+
+function chooseFile(ev: MouseEvent) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(
+		(selectedFile) => {
+			file = selectedFile;
+		},
+	);
+}
+
+function onChangeFile() {
+	if (fileEl.files![0]) upload(fileEl.files[0]);
+}
+
+function upload(fileToUpload: File, name?: string) {
+	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(
+		(res) => {
+			file = res;
+		},
+	);
+}
+
+function send() {
+	sending = true;
+	os.api("messaging/messages/create", {
+		userId: props.user ? props.user.id : undefined,
+		groupId: props.group ? props.group.id : undefined,
+		text: text ? text : undefined,
+		fileId: file ? file.id : undefined,
+	})
+		.then((message) => {
+			clear();
+		})
+		.catch((err) => {
+			console.error(err);
+		})
+		.then(() => {
+			sending = false;
+		});
+}
+
+function clear() {
+	text = "";
+	file = null;
+	deleteDraft();
+}
+
+function saveDraft() {
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
+
+	drafts[draftKey] = {
+		updatedAt: new Date(),
+		data: {
+			text: text,
+			file: file,
+		},
+	};
+
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
+}
+
+function deleteDraft() {
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
+
+	delete drafts[draftKey];
+
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
+}
+
+async function insertEmoji(ev: MouseEvent) {
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textEl);
+}
+
+onMounted(() => {
+	autosize(textEl);
+
+	// TODO: detach when unmount
+	new Autocomplete(textEl, $$(text));
+
+	// 書きかけの投稿を復元
+	const draft = JSON.parse(localStorage.getItem("message_drafts") || "{}")[
+		draftKey
+	];
+	if (draft) {
+		text = draft.data.text;
+		file = draft.data.file;
+	}
+});
+
+defineExpose({
+	file,
+	upload,
+});
+</script>
+
+<style lang="scss" scoped>
+.pemppnzi {
+	position: relative;
+	margin-top: 1rem;
+
+	> textarea {
+		cursor: auto;
+		display: block;
+		width: 100%;
+		min-width: 100%;
+		max-width: 100%;
+		min-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);
+	}
+
+	footer {
+		position: sticky;
+		bottom: 0;
+		background: var(--panel);
+
+		> .file {
+			padding: 8px;
+			color: var(--fg);
+			background: transparent;
+			cursor: pointer;
+		}
+	}
+
+	.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;
+			}
+		}
+	}
+
+	.buttons {
+		display: flex;
+
+		._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;
+			}
+		}
+
+		> .send {
+			margin-left: auto;
+			color: var(--accent);
+
+			&:hover {
+				color: var(--accentLighten);
+			}
+
+			&:active {
+				color: var(--accentDarken);
+				transition: color 0s ease;
+			}
+		}
+	}
+
+	input[type="file"] {
+		display: none;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
new file mode 100644
index 000000000..f3fb921e3
--- /dev/null
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -0,0 +1,377 @@
+<template>
+	<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
+		<MkAvatar
+			v-if="!isMe"
+			class="avatar"
+			:user="message.user"
+			:show-indicator="true"
+		/>
+		<div class="content">
+			<div class="balloon" :class="{ noText: message.text == null }">
+				<button
+					v-if="isMe"
+					class="delete-button"
+					:title="i18n.ts.delete"
+					@click="del"
+				>
+					<i
+						style="color: var(--accentLighten)"
+						class="ph-x-circle ph-fill ph-lg"
+					></i>
+				</button>
+				<div v-if="!message.isDeleted" class="content">
+					<Mfm
+						v-if="message.text"
+						ref="text"
+						class="text"
+						:text="message.text"
+						:i="$i"
+					/>
+				</div>
+				<div v-else class="content">
+					<p class="is-deleted">{{ i18n.ts.deleted }}</p>
+				</div>
+			</div>
+			<div v-if="message.file" class="file" width="400px">
+				<XMediaList
+					v-if="
+						message.file.type.split('/')[0] == 'image' ||
+						message.file.type.split('/')[0] == 'video'
+					"
+					:in-dm="true"
+					width="400px"
+					:media-list="[message.file]"
+					style="border-radius: 5px"
+				/>
+				<a
+					v-else
+					:href="message.file.url"
+					rel="noopener"
+					target="_blank"
+					:title="message.file.name"
+				>
+					<p>{{ message.file.name }}</p>
+				</a>
+			</div>
+			<div></div>
+			<MkUrlPreview
+				v-for="url in urls"
+				:key="url"
+				:url="url"
+				style="margin: 8px 0"
+			/>
+			<footer>
+				<template v-if="isGroup">
+					<span v-if="message.reads.length > 0" class="read"
+						>{{ i18n.ts.messageRead }}
+						{{ message.reads.length }}</span
+					>
+				</template>
+				<template v-else>
+					<span v-if="isMe && message.isRead" class="read">{{
+						i18n.ts.messageRead
+					}}</span>
+				</template>
+				<MkTime :time="message.createdAt" />
+				<template v-if="message.is_edited"
+					><i class="ph-pencil ph-bold ph-lg"></i
+				></template>
+			</footer>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {} from "vue";
+import * as mfm from "mfm-js";
+import type * as Misskey from "iceshrimp-js";
+import XMediaList from "@/components/MkMediaList.vue";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+
+const props = defineProps<{
+	message: Misskey.entities.MessagingMessage;
+	isGroup?: boolean;
+}>();
+
+const isMe = $computed(() => props.message.userId === $i?.id);
+const urls = $computed(() =>
+	props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : [],
+);
+
+function del(): void {
+	os.api("messaging/messages/delete", {
+		messageId: props.message.id,
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.thvuemwp {
+	$me-balloon-color: var(--accent);
+	--plyr-color-main: var(--accent);
+
+	position: relative;
+	background-color: transparent;
+	display: flex;
+
+	> .avatar {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 20px);
+		display: block;
+		width: 45px;
+		height: 45px;
+		transition: all 0.1s ease;
+	}
+
+	> .content {
+		min-width: 0;
+
+		> .balloon {
+			position: relative;
+			display: inline-flex;
+			align-items: center;
+			padding: 0;
+			min-height: 38px;
+			border-radius: 16px;
+			max-width: 100%;
+
+			& + * {
+				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);
+
+					& + .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;
+							box-sizing: border-box;
+						}
+
+						> p {
+							padding: 30px;
+							text-align: center;
+							color: #6e6a86;
+							background: #ddd;
+						}
+					}
+				}
+			}
+		}
+
+		> footer {
+			display: block;
+			margin: 2px 0 0 0;
+			font-size: 0.65em;
+
+			> .read {
+				margin: 0 8px;
+			}
+
+			> i {
+				margin-left: 4px;
+			}
+		}
+	}
+
+	&:not(.isMe) {
+		padding-left: var(--margin);
+
+		> .content {
+			padding-left: 16px;
+			padding-right: 32px;
+
+			> .balloon {
+				$color: var(--messagingIsNotMe);
+				background: $color;
+
+				&.noText {
+					background: transparent;
+				}
+
+				&:not(.noText):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;
+			}
+		}
+	}
+
+	&.isMe {
+		flex-direction: row-reverse;
+		padding-right: var(--margin);
+		right: var(--margin); // 削除時にposition: absoluteになったときに使う
+
+		> .content {
+			padding-right: 16px;
+			padding-left: 32px;
+			text-align: right;
+
+			> .balloon {
+				background: $me-balloon-color;
+				text-align: left;
+
+				::selection {
+					color: var(--accent);
+					background-color: #fff;
+				}
+
+				&.noText {
+					background: transparent;
+				}
+
+				&:not(.noText):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: var(--fgOnAccent) !important;
+						}
+					}
+				}
+			}
+
+			> footer {
+				text-align: right;
+
+				> .read {
+					user-select: none;
+				}
+			}
+		}
+	}
+
+	&.max-width_400px {
+		> .avatar {
+			width: 48px;
+			height: 48px;
+		}
+
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_500px {
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						padding: 8px 16px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
new file mode 100644
index 000000000..a360863f2
--- /dev/null
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -0,0 +1,464 @@
+<template>
+	<div
+		ref="rootEl"
+		class="_section"
+		@dragover.prevent.stop="onDragover"
+		@drop.prevent.stop="onDrop"
+	>
+		<div class="_content mk-messaging-room">
+			<MkSpacer :content-max="800">
+				<div class="body">
+					<MkPagination
+						v-if="pagination"
+						ref="pagingComponent"
+						:key="userAcct || groupId"
+						:pagination="pagination"
+					>
+						<template #empty>
+							<div class="_fullinfo">
+								<img
+									:src="instance.images.info"
+									class="_ghost"
+									alt="Info"
+								/>
+								<div>{{ i18n.ts.noMessagesYet }}</div>
+							</div>
+						</template>
+						<template
+							#default="{ items: messages, fetching: pFetching }"
+						>
+							<XList
+								aria-live="polite"
+								v-if="messages.length > 0"
+								v-slot="{ item: message }"
+								:class="{
+									messages: true,
+									'deny-move-transition': pFetching,
+								}"
+								:items="messages"
+								direction="up"
+								reversed
+							>
+								<XMessage
+									:key="message.id"
+									:message="message"
+									:is-group="group != null"
+								/>
+							</XList>
+						</template>
+					</MkPagination>
+				</div>
+				<footer>
+					<div
+						v-if="typers.length > 0"
+						class="typers"
+						aria-live="polite"
+					>
+						<I18n
+							:src="i18n.ts.typingUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #users>
+								<b
+									v-for="typer in typers"
+									:key="typer.id"
+									class="user"
+									>{{ typer.username }}</b
+								>
+							</template>
+						</I18n>
+						<MkEllipsis />
+					</div>
+					<transition :name="animation ? 'fade' : ''">
+						<div v-show="showIndicator" class="new-message">
+							<button
+								class="_buttonPrimary"
+								@click="onIndicatorClick"
+							>
+								<i
+									class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"
+								></i
+								>{{ i18n.ts.newMessageExists }}
+							</button>
+						</div>
+					</transition>
+					<XForm
+						v-if="!fetching"
+						ref="formEl"
+						:user="user"
+						:group="group"
+						class="form"
+					/>
+				</footer>
+			</MkSpacer>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
+import * as Misskey from "iceshrimp-js";
+import * as Acct from "iceshrimp-js/built/acct";
+import XMessage from "./messaging-room.message.vue";
+import XForm from "./messaging-room.form.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import {
+	isBottomVisible,
+	onScrollBottom,
+	scrollToBottom,
+} from "@/scripts/scroll";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import * as sound from "@/scripts/sound";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import {instance} from "@/instance";
+
+const props = defineProps<{
+	userAcct?: string;
+	groupId?: string;
+}>();
+
+let rootEl = $ref<HTMLDivElement>();
+let formEl = $ref<InstanceType<typeof XForm>>();
+let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+let fetching = $ref(true);
+let user: Misskey.entities.UserDetailed | null = $ref(null);
+let group: Misskey.entities.UserGroup | null = $ref(null);
+let typers: Misskey.entities.User[] = $ref([]);
+let connection: Misskey.ChannelConnection<
+	Misskey.Channels["messaging"]
+> | null = $ref(null);
+let showIndicator = $ref(false);
+const { animation } = defaultStore.reactiveState;
+
+let pagination: Paging | null = $ref(null);
+
+watch([() => props.userAcct, () => props.groupId], () => {
+	if (connection) connection.dispose();
+	fetch();
+});
+
+async function fetch() {
+	fetching = true;
+
+	if (props.userAcct) {
+		const acct = Acct.parse(props.userAcct);
+		user = await os.api("users/show", {
+			username: acct.username,
+			host: acct.host || undefined,
+		});
+		group = null;
+
+		pagination = {
+			endpoint: "messaging/messages",
+			limit: 20,
+			params: {
+				userId: user.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl).value,
+		};
+		connection = stream.useChannel("messaging", {
+			otherparty: user.id,
+		});
+	} else {
+		user = null;
+		group = await os.api("users/groups/show", { groupId: props.groupId });
+
+		pagination = {
+			endpoint: "messaging/messages",
+			limit: 20,
+			params: {
+				groupId: group?.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl).value,
+		};
+		connection = stream.useChannel("messaging", {
+			group: group?.id,
+		});
+	}
+
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
+	connection.on("deleted", onDeleted);
+	connection.on("typers", (_typers) => {
+		typers = _typers.filter((u) => u.id !== $i?.id);
+	});
+
+	document.addEventListener("visibilitychange", onVisibilitychange);
+
+	nextTick(() => {
+		// thisScrollToBottom();
+		window.setTimeout(() => {
+			fetching = false;
+		}, 300);
+	});
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	const isFile = ev.dataTransfer.items[0].kind === "file";
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+
+	if (isFile || isDriveFile) {
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
+	} else {
+		ev.dataTransfer.dropEffect = "none";
+	}
+}
+
+function onDrop(ev: DragEvent): void {
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length === 1) {
+		formEl.upload(ev.dataTransfer.files[0]);
+		return;
+	} else if (ev.dataTransfer.files.length > 1) {
+		os.alert({
+			type: "error",
+			text: i18n.ts.onlyOneFileCanBeAttached,
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== "") {
+		const file = JSON.parse(driveFile);
+		formEl.file = file;
+	}
+	//#endregion
+}
+
+function onMessage(message) {
+	sound.play("chat");
+
+	const _isBottom = isBottomVisible(rootEl, 64);
+
+	pagingComponent.prepend(message);
+	if (message.userId !== $i?.id && !document.hidden) {
+		connection?.send("read", {
+			id: message.id,
+		});
+	}
+
+	if (_isBottom) {
+		// Scroll to bottom
+		nextTick(() => {
+			thisScrollToBottom();
+		});
+	} else if (message.userId !== $i?.id) {
+		// Notify
+		notifyNewMessage();
+	}
+}
+
+function onRead(x) {
+	if (user) {
+		if (!Array.isArray(x)) x = [x];
+		for (const id of x) {
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					isRead: true,
+				};
+			}
+		}
+	} else if (group) {
+		for (const id of x.ids) {
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					reads: [...pagingComponent.items[exist].reads, x.userId],
+				};
+			}
+		}
+	}
+}
+
+function onDeleted(id) {
+	const msg = pagingComponent.items.find((m) => m.id === id);
+	if (msg) {
+		pagingComponent.items = pagingComponent.items.filter(
+			(m) => m.id !== msg.id,
+		);
+	}
+}
+
+function thisScrollToBottom() {
+	if (window.location.href.includes("my/messaging/")) {
+		scrollToBottom($$(rootEl).value, { behavior: "smooth" });
+	}
+}
+
+function onIndicatorClick() {
+	showIndicator = false;
+	thisScrollToBottom();
+}
+
+let scrollRemove: (() => void) | null = $ref(null);
+
+function notifyNewMessage() {
+	showIndicator = true;
+
+	scrollRemove = onScrollBottom(rootEl, () => {
+		showIndicator = false;
+		scrollRemove = null;
+	});
+}
+
+function onVisibilitychange() {
+	if (document.hidden) return;
+	for (const message of pagingComponent.items) {
+		if (message.userId !== $i?.id && !message.isRead) {
+			connection?.send("read", {
+				id: message.id,
+			});
+		}
+	}
+}
+
+onMounted(() => {
+	fetch();
+	definePageMetadata(
+		computed(() => ({
+			title: group != null ? group.name : user?.name ?? 'Chat',
+			icon: "ph-chats-teardrop-bold ph-lg",
+		})),
+	);
+});
+
+onBeforeUnmount(() => {
+	connection?.dispose();
+	document.removeEventListener("visibilitychange", onVisibilitychange);
+	if (scrollRemove) scrollRemove();
+});
+</script>
+
+<style lang="scss" scoped>
+XMessage:last-of-type {
+	margin-bottom: 4rem;
+}
+
+.mk-messaging-room {
+	position: relative;
+	overflow: auto;
+
+	> .body {
+		.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;
+			}
+
+			> i {
+				margin-right: 4px;
+			}
+		}
+
+		.messages {
+			padding: 8px 0;
+
+			> ::v-deep(*) {
+				margin-bottom: 16px;
+			}
+		}
+	}
+
+	> footer {
+		width: 100%;
+		position: sticky;
+		z-index: 2;
+		bottom: 0;
+		padding-top: 8px;
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+
+		> .new-message {
+			width: 100%;
+			padding-bottom: 8px;
+			text-align: center;
+
+			> button {
+				display: inline-block;
+				margin: 0;
+				padding: 0 12px;
+				line-height: 32px;
+				font-size: 12px;
+				border-radius: 16px;
+
+				> i {
+					display: inline-block;
+					margin-right: 8px;
+				}
+			}
+		}
+
+		> .typers {
+			position: absolute;
+			bottom: 100%;
+			padding: 0 8px 0 8px;
+			font-size: 0.9em;
+			color: var(--fgTransparentWeak);
+
+			> .users {
+				> .user + .user:before {
+					content: ", ";
+					font-weight: normal;
+				}
+
+				> .user:last-of-type:after {
+					content: " ";
+				}
+			}
+		}
+
+		> .form {
+			max-height: 12em;
+			overflow-y: scroll;
+			border-top: solid 0.5px var(--divider);
+		}
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+</style>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 42dbca51e..8e975dc0b 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -82,6 +82,27 @@
 					></span>
 				</div>
 			</button>
+			<button
+				:aria-label="i18n.t('messaging')"
+				class="button messaging _button"
+				@click="
+					mainRouter.push('/my/messaging');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 2 ? 'on' : ''"
+				>
+					<i class="ph-chats-teardrop ph-bold ph-lg"></i
+					><span
+						v-if="$i?.hasUnreadMessagingMessage"
+						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
 			<button
 				:aria-label="i18n.t('_deck._columns.widgets')"
 				class="button widget _button"