From a1f346a54973dff2e464e24295e19d66bb439edd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 27 Jan 2022 18:15:49 +0900
Subject: [PATCH 01/30] pages/messaging/messaging-room.vue

---
 packages/client/src/components/ui/window.vue  |   4 -
 .../src/pages/messaging/messaging-room.vue    | 492 ++++++++----------
 2 files changed, 220 insertions(+), 276 deletions(-)

diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index fa32ecfde..3c6d44f44 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -62,10 +62,6 @@ function dragClear(fn) {
 }
 
 export default defineComponent({
-	provide: {
-		inWindow: true
-	},
-
 	props: {
 		padding: {
 			type: Boolean,
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index a715dad6d..fa6722b68 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -2,6 +2,7 @@
 <div class="_section"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
+	ref="rootEl"
 >
 	<div class="_content mk-messaging-room">
 		<div class="body">
@@ -35,9 +36,10 @@
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, markRaw } from 'vue';
-import XList from '@/components/date-separated-list.vue';
+<script lang="ts" setup>
+import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkPagination from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import * as Acct from 'misskey-js/built/acct';
@@ -47,300 +49,246 @@ import { stream } from '@/stream';
 import { popout } from '@/scripts/popout';
 import * as sound from '@/scripts/sound';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+import { $i } from '@/account';
+import { router } from '@/router';
 
-const Component = defineComponent({
-	components: {
-		XMessage,
-		XForm,
-		XList,
-	},
+const props = defineProps<{
+	userAcct?: string;
+	groupId?: string;
+}>();
 
-	inject: ['inWindow'],
+let fetching = $ref(true);
+let user: Misskey.entities.UserDetailed | null = $ref(null);
+let group: Misskey.entities.UserGroup | null = $ref(null);
+let fetchingMoreMessages = $ref(false);
+let messages = $ref<Misskey.entities.MessagingMessage[]>([]);
+let existMoreMessages = $ref(false);
+let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
+let showIndicator = $ref(false);
+let timer: number | null = $ref(null);
+const ilObserver = new IntersectionObserver(
+	(entries) => entries.some((entry) => entry.isIntersecting)
+		&& !fetching
+		&& !fetchingMoreMessages
+		&& existMoreMessages
+		&& fetchMoreMessages()
+);
 
-	props: {
-		userAcct: {
-			type: String,
-			required: false,
-		},
-		groupId: {
-			type: String,
-			required: false,
-		},
-	},
+let rootEl = $ref<Element>();
+let form = $ref<InstanceType<typeof XForm>>();
+let loadMore = $ref<HTMLDivElement>();
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: computed(() => !this.fetching ? this.user ? {
-				userName: this.user,
-				avatar: this.user,
-				action: {
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu,
-				},
-			} : {
-				title: this.group.name,
-				icon: 'fas fa-users',
-				action: {
-					icon: 'fas fa-ellipsis-h',
-					handler: this.menu,
-				},
-			} : null),
-			fetching: true,
-			user: null,
-			group: null,
-			fetchingMoreMessages: false,
-			messages: [],
-			existMoreMessages: false,
-			connection: null,
-			showIndicator: false,
-			timer: null,
-			typers: [],
-			ilObserver: new IntersectionObserver(
-				(entries) => entries.some((entry) => entry.isIntersecting)
-					&& !this.fetching
-					&& !this.fetchingMoreMessages
-					&& this.existMoreMessages
-					&& this.fetchMoreMessages()
-			),
-		};
-	},
+watch([() => props.userAcct, () => props.groupId], () => {
+	if (connection) connection.dispose();
+	fetch();
+});
 
-	computed: {
-		form(): any {
-			return this.$refs.form;
-		}
-	},
+async function fetch() {
+	fetching = true;
 
-	watch: {
-		userAcct: 'fetch',
-		groupId: 'fetch',
-	},
+	connection = stream.useChannel('messaging', {
+		otherparty: user ? user.id : undefined,
+		group: group ? group.id : undefined,
+	});
 
-	mounted() {
-		this.fetch();
-		if (this.$store.state.enableInfiniteScroll) {
-			this.$nextTick(() => this.ilObserver.observe(this.$refs.loadMore as Element));
-		}
-	},
+	connection?.on('message', onMessage);
+	connection?.on('read', onRead);
+	connection?.on('deleted', onDeleted);
+	connection?.on('typers', typers => {
+		typers = typers.filter(u => u.id !== $i.id);
+	});
 
-	beforeUnmount() {
-		this.connection.dispose();
+	document.addEventListener('visibilitychange', onVisibilitychange);
 
-		document.removeEventListener('visibilitychange', this.onVisibilitychange);
+	fetchMessages().then(() => {
+		scrollToBottom();
 
-		this.ilObserver.disconnect();
-	},
+		// もっと見るの交差検知を発火させないためにfetchは
+		// スクロールが終わるまでfalseにしておく
+		// scrollendのようなイベントはないのでsetTimeoutで
+		window.setTimeout(() => fetching = false, 300);
+	});
+}
 
-	methods: {
-		async fetch() {
-			this.fetching = true;
-			if (this.userAcct) {
-				const user = await os.api('users/show', Acct.parse(this.userAcct));
-				this.user = user;
+function onDragover(e: DragEvent) {
+	if (!e.dataTransfer) return;
+
+	const isFile = e.dataTransfer.items[0].kind == 'file';
+	const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+
+	if (isFile || isDriveFile) {
+		e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+	} else {
+		e.dataTransfer.dropEffect = 'none';
+	}
+}
+
+function onDrop(e: DragEvent): void {
+	if (!e.dataTransfer) return;
+
+	// ファイルだったら
+	if (e.dataTransfer.files.length == 1) {
+		form.upload(e.dataTransfer.files[0]);
+		return;
+	} else if (e.dataTransfer.files.length > 1) {
+		os.alert({
+			type: 'error',
+			text: i18n.locale.onlyOneFileCanBeAttached
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile != '') {
+		const file = JSON.parse(driveFile);
+		form.file = file;
+	}
+	//#endregion
+}
+
+function fetchMessages() {
+	return new Promise<void>((resolve, reject) => {
+		const max = existMoreMessages ? 20 : 10;
+
+		os.api('messaging/messages', {
+			userId: user ? user.id : undefined,
+			groupId: group ? group.id : undefined,
+			limit: max + 1,
+			untilId: existMoreMessages ? messages[0].id : undefined
+		}).then(messages => {
+			if (messages.length == max + 1) {
+				existMoreMessages = true;
+				messages.pop();
 			} else {
-				const group = await os.api('users/groups/show', { groupId: this.groupId });
-				this.group = group;
+				existMoreMessages = false;
 			}
 
-			this.connection = markRaw(stream.useChannel('messaging', {
-				otherparty: this.user ? this.user.id : undefined,
-				group: this.group ? this.group.id : undefined,
-			}));
+			messages.unshift.apply(messages, messages.reverse());
+			resolve();
+		});
+	});
+}
 
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-			this.connection.on('deleted', this.onDeleted);
-			this.connection.on('typers', typers => {
-				this.typers = typers.filter(u => u.id !== this.$i.id);
-			});
+function fetchMoreMessages() {
+	fetchingMoreMessages = true;
+	fetchMessages().then(() => {
+		fetchingMoreMessages = false;
+	});
+}
 
-			document.addEventListener('visibilitychange', this.onVisibilitychange);
+function onMessage(message) {
+	sound.play('chat');
 
-			this.fetchMessages().then(() => {
-				this.scrollToBottom();
+	const _isBottom = isBottom(rootEl, 64);
 
-				// もっと見るの交差検知を発火させないためにfetchは
-				// スクロールが終わるまでfalseにしておく
-				// scrollendのようなイベントはないのでsetTimeoutで
-				window.setTimeout(() => this.fetching = false, 300);
-			});
-		},
+	messages.push(message);
+	if (message.userId != $i.id && !document.hidden) {
+		connection?.send('read', {
+			id: message.id
+		});
+	}
 
-		onDragover(e) {
-			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+	if (_isBottom) {
+		// Scroll to bottom
+		nextTick(() => {
+			scrollToBottom();
+		});
+	} else if (message.userId != $i.id) {
+		// Notify
+		notifyNewMessage();
+	}
+}
 
-			if (isFile || isDriveFile) {
-				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
-			} else {
-				e.dataTransfer.dropEffect = 'none';
+function onRead(x) {
+	if (user) {
+		if (!Array.isArray(x)) x = [x];
+		for (const id of x) {
+			if (messages.some(x => x.id == id)) {
+				const exist = messages.map(x => x.id).indexOf(id);
+				messages[exist] = {
+					...messages[exist],
+					isRead: true,
+				};
 			}
-		},
-
-		onDrop(e): void {
-			// ファイルだったら
-			if (e.dataTransfer.files.length == 1) {
-				this.form.upload(e.dataTransfer.files[0]);
-				return;
-			} else if (e.dataTransfer.files.length > 1) {
-				os.alert({
-					type: 'error',
-					text: this.$ts.onlyOneFileCanBeAttached
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_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;
-
-				os.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) {
-			sound.play('chat');
-
-			const _isBottom = isBottom(this.$el, 64);
-
-			this.messages.push(message);
-			if (message.userId != this.$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.$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] = {
-							...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] = {
-							...this.messages[exist],
-							reads: [...this.messages[exist].reads, 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);
-			}
-		},
-
-		scrollToBottom() {
-			scroll(this.$el, { top: this.$el.offsetHeight });
-		},
-
-		onIndicatorClick() {
-			this.showIndicator = false;
-			this.scrollToBottom();
-		},
-
-		notifyNewMessage() {
-			this.showIndicator = true;
-
-			onScrollBottom(this.$el, () => {
-				this.showIndicator = false;
-			});
-
-			if (this.timer) window.clearTimeout(this.timer);
-
-			this.timer = window.setTimeout(() => {
-				this.showIndicator = false;
-			}, 4000);
-		},
-
-		onVisibilitychange() {
-			if (document.hidden) return;
-			for (const message of this.messages) {
-				if (message.userId !== this.$i.id && !message.isRead) {
-					this.connection.send('read', {
-						id: message.id
-					});
-				}
-			}
-		},
-
-		menu(ev) {
-			const path = this.groupId ? `/my/messaging/group/${this.groupId}` : `/my/messaging/${this.userAcct}`;
-
-			os.popupMenu([this.inWindow ? undefined : {
-				text: this.$ts.openInWindow,
-				icon: 'fas fa-window-maximize',
-				action: () => {
-					os.pageWindow(path);
-					this.$router.back();
-				},
-			}, this.inWindow ? undefined : {
-				text: this.$ts.popout,
-				icon: 'fas fa-external-link-alt',
-				action: () => {
-					popout(path);
-					this.$router.back();
-				},
-			}], ev.currentTarget || ev.target);
 		}
+	} else if (group) {
+		for (const id of x.ids) {
+			if (messages.some(x => x.id == id)) {
+				const exist = messages.map(x => x.id).indexOf(id);
+				messages[exist] = {
+					...messages[exist],
+					reads: [...messages[exist].reads, x.userId]
+				};
+			}
+		}
+	}
+}
+
+function onDeleted(id) {
+	const msg = messages.find(m => m.id === id);
+	if (msg) {
+		messages = messages.filter(m => m.id !== msg.id);
+	}
+}
+
+function scrollToBottom() {
+	scroll(rootEl, { top: rootEl.offsetHeight });
+}
+
+function onIndicatorClick() {
+	showIndicator = false;
+	scrollToBottom();
+}
+
+function notifyNewMessage() {
+	showIndicator = true;
+
+	onScrollBottom(rootEl, () => {
+		showIndicator = false;
+	});
+
+	if (timer) window.clearTimeout(timer);
+	timer = window.setTimeout(() => {
+		showIndicator = false;
+	}, 4000);
+}
+
+function onVisibilitychange() {
+	if (document.hidden) return;
+	for (const message of messages) {
+		if (message.userId !== $i.id && !message.isRead) {
+			connection?.send('read', {
+				id: message.id
+			});
+		}
+	}
+}
+
+onMounted(() => {
+	fetch();
+	if (defaultStore.state.enableInfiniteScroll) {
+		nextTick(() => ilObserver.observe(loadMore));
 	}
 });
 
-export default Component;
+onBeforeUnmount(() => {
+	connection?.dispose();
+	document.removeEventListener('visibilitychange', onVisibilitychange);
+	ilObserver.disconnect();
+});
+
+defineExpose({
+	[symbols.PAGE_INFO]: computed(() => !fetching ? user ? {
+			userName: user,
+			avatar: user,
+		} : {
+			title: group?.name,
+			icon: 'fas fa-users',
+		} : null),
+});
 </script>
 
 <style lang="scss" scoped>

From 8a7264835e15021a60a926b66ef99035c401fad5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 27 Jan 2022 18:58:41 +0900
Subject: [PATCH 02/30] wip

---
 .../client/src/components/ui/pagination.vue   |   1 +
 .../messaging/messaging-room.message.vue      |  60 ++++-----
 .../src/pages/messaging/messaging-room.vue    | 125 +++++++-----------
 3 files changed, 73 insertions(+), 113 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 13f321567..03c68f57c 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -271,6 +271,7 @@ onDeactivated(() => {
 defineExpose({
 	items,
 	backed,
+	more,
 	reload,
 	fetchMoreAhead,
 	prepend,
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 4315bbecd..6f6fc5c80 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -35,45 +35,39 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import * as mfm from 'mfm-js';
+import * as Misskey from 'misskey-js';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/url-preview.vue';
 import * as os from '@/os';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		MkUrlPreview
-	},
-	props: {
-		message: {
-			required: true
-		},
-		isGroup: {
-			required: false
+const props = defineProps<{
+	message: Misskey.entities.MessagingMessage;
+	isGroup?: boolean;
+	connection?: Misskey.ChannelConnection<Misskey.Channels['messaging']>;
+}>();
+
+const isMe = $computed(() => props.message.userId === $i?.id);
+const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
+
+if (props.connection) {
+	props.connection?.on('read', (x) => {
+		if (!props.isGroup) {
+			props.message.isRead = true;
+		} else {
+			props.message.reads = [...props.message.reads, x.userId];
 		}
-	},
-	computed: {
-		isMe(): boolean {
-			return this.message.userId === this.$i.id;
-		},
-		urls(): string[] {
-			if (this.message.text) {
-				return extractUrlFromMfm(mfm.parse(this.message.text));
-			} else {
-				return [];
-			}
-		}
-	},
-	methods: {
-		del() {
-			os.api('messaging/messages/delete', {
-				messageId: this.message.id
-			});
-		}
-	}
-});
+	});
+}
+
+function del() {
+	os.api('messaging/messages/delete', {
+		messageId: props.message.id
+	});
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index fa6722b68..0b63bd22d 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -6,15 +6,18 @@
 >
 	<div class="_content mk-messaging-room">
 		<div class="body">
+			<MkPagination v-if="pagination" ref="pagingComponent" :pagination="pagination">
+				<template #empty>
+					<i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
+				</template>
+
+				<template #defalut="{ items: messages }">
+					<XList v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
+						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
+					</XList>
+				</template>
+			</MkPagination>
 			<MkLoading v-if="fetching"/>
-			<p v-if="!fetching && messages.length == 0" class="empty"><i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
-			<p v-if="!fetching && messages.length > 0 && !existMoreMessages" class="no-history"><i class="fas fa-flag"></i>{{ $ts.noMoreHistory }}</p>
-			<button v-show="existMoreMessages" ref="loadMore" class="more _button" :class="{ fetching: fetchingMoreMessages }" :disabled="fetchingMoreMessages" @click="fetchMoreMessages">
-				<template v-if="fetchingMoreMessages"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ fetchingMoreMessages ? $ts.loading : $ts.loadMore }}
-			</button>
-			<XList v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
-				<XMessage :key="message.id" :message="message" :is-group="group != null"/>
-			</XList>
 		</div>
 		<footer>
 			<div v-if="typers.length > 0" class="typers">
@@ -39,7 +42,9 @@
 <script lang="ts" setup>
 import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import * as Misskey from 'misskey-js';
+import XList from '@/components/date-separated-list.vue';
 import MkPagination from '@/components/ui/pagination.vue';
+import { Paging } from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import * as Acct from 'misskey-js/built/acct';
@@ -52,33 +57,42 @@ import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { $i } from '@/account';
-import { router } from '@/router';
 
 const props = defineProps<{
 	userAcct?: string;
 	groupId?: string;
 }>();
 
-let fetching = $ref(true);
-let user: Misskey.entities.UserDetailed | null = $ref(null);
-let group: Misskey.entities.UserGroup | null = $ref(null);
-let fetchingMoreMessages = $ref(false);
-let messages = $ref<Misskey.entities.MessagingMessage[]>([]);
-let existMoreMessages = $ref(false);
-let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
-let showIndicator = $ref(false);
-let timer: number | null = $ref(null);
-const ilObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting)
-		&& !fetching
-		&& !fetchingMoreMessages
-		&& existMoreMessages
-		&& fetchMoreMessages()
-);
-
 let rootEl = $ref<Element>();
 let form = $ref<InstanceType<typeof XForm>>();
 let loadMore = $ref<HTMLDivElement>();
+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 connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
+let showIndicator = $ref(false);
+let timer: number | null = $ref(null);
+
+let pagination: Paging = $computed(() => {
+	return {
+		endpoint: 'messaging/messages',
+		limit: pagingComponent?.more ? 20 : 10,
+		params: {
+			userId: user ? user.id : undefined,
+			groupId: group ? group.id : undefined,
+		},
+		reversed: true,
+	};
+});
+
+const ilObserver = new IntersectionObserver(
+	(entries) => entries.some((entry) => entry.isIntersecting)
+		&& !fetching
+		&& pagingComponent?.more
+		&& fetchMoreMessages()
+);
 
 watch([() => props.userAcct, () => props.groupId], () => {
 	if (connection) connection.dispose();
@@ -94,7 +108,6 @@ async function fetch() {
 	});
 
 	connection?.on('message', onMessage);
-	connection?.on('read', onRead);
 	connection?.on('deleted', onDeleted);
 	connection?.on('typers', typers => {
 		typers = typers.filter(u => u.id !== $i.id);
@@ -102,7 +115,7 @@ async function fetch() {
 
 	document.addEventListener('visibilitychange', onVisibilitychange);
 
-	fetchMessages().then(() => {
+	pagingComponent.fetchMoreAhead().then(() => {
 		scrollToBottom();
 
 		// もっと見るの交差検知を発火させないためにfetchは
@@ -149,33 +162,10 @@ function onDrop(e: DragEvent): void {
 	//#endregion
 }
 
-function fetchMessages() {
-	return new Promise<void>((resolve, reject) => {
-		const max = existMoreMessages ? 20 : 10;
-
-		os.api('messaging/messages', {
-			userId: user ? user.id : undefined,
-			groupId: group ? group.id : undefined,
-			limit: max + 1,
-			untilId: existMoreMessages ? messages[0].id : undefined
-		}).then(messages => {
-			if (messages.length == max + 1) {
-				existMoreMessages = true;
-				messages.pop();
-			} else {
-				existMoreMessages = false;
-			}
-
-			messages.unshift.apply(messages, messages.reverse());
-			resolve();
-		});
-	});
-}
-
 function fetchMoreMessages() {
-	fetchingMoreMessages = true;
-	fetchMessages().then(() => {
-		fetchingMoreMessages = false;
+	fetching = true;
+	pagingComponent.fetchMoreAhead().then(() => {
+		fetching = false;
 	});
 }
 
@@ -184,7 +174,7 @@ function onMessage(message) {
 
 	const _isBottom = isBottom(rootEl, 64);
 
-	messages.push(message);
+	pagingComponent.append(message);
 	if (message.userId != $i.id && !document.hidden) {
 		connection?.send('read', {
 			id: message.id
@@ -202,31 +192,6 @@ function onMessage(message) {
 	}
 }
 
-function onRead(x) {
-	if (user) {
-		if (!Array.isArray(x)) x = [x];
-		for (const id of x) {
-			if (messages.some(x => x.id == id)) {
-				const exist = messages.map(x => x.id).indexOf(id);
-				messages[exist] = {
-					...messages[exist],
-					isRead: true,
-				};
-			}
-		}
-	} else if (group) {
-		for (const id of x.ids) {
-			if (messages.some(x => x.id == id)) {
-				const exist = messages.map(x => x.id).indexOf(id);
-				messages[exist] = {
-					...messages[exist],
-					reads: [...messages[exist].reads, x.userId]
-				};
-			}
-		}
-	}
-}
-
 function onDeleted(id) {
 	const msg = messages.find(m => m.id === id);
 	if (msg) {

From c61d6bd89adb0bde83ba0df530ccc8b5db37a09a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 27 Jan 2022 19:07:14 +0900
Subject: [PATCH 03/30] wip

---
 .../messaging/messaging-room.message.vue      | 10 ------
 .../src/pages/messaging/messaging-room.vue    | 34 ++++++++++++++++---
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 6f6fc5c80..43ed233c5 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -47,21 +47,11 @@ import { $i } from '@/account';
 const props = defineProps<{
 	message: Misskey.entities.MessagingMessage;
 	isGroup?: boolean;
-	connection?: Misskey.ChannelConnection<Misskey.Channels['messaging']>;
 }>();
 
 const isMe = $computed(() => props.message.userId === $i?.id);
 const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
 
-if (props.connection) {
-	props.connection?.on('read', (x) => {
-		if (!props.isGroup) {
-			props.message.isRead = true;
-		} else {
-			props.message.reads = [...props.message.reads, x.userId];
-		}
-	});
-}
 
 function del() {
 	os.api('messaging/messages/delete', {
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 0b63bd22d..3574bec45 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -47,7 +47,6 @@ import MkPagination from '@/components/ui/pagination.vue';
 import { Paging } from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import * as Acct from 'misskey-js/built/acct';
 import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { stream } from '@/stream';
@@ -108,6 +107,7 @@ async function fetch() {
 	});
 
 	connection?.on('message', onMessage);
+	connection?.on('read', onRead);
 	connection?.on('deleted', onDeleted);
 	connection?.on('typers', typers => {
 		typers = typers.filter(u => u.id !== $i.id);
@@ -192,10 +192,35 @@ function onMessage(message) {
 	}
 }
 
+function onRead(x) {
+	if (user) {
+		if (!Array.isArray(x)) x = [x];
+		for (const id of x) {
+			if (pagingComponent.items.some(x => x.id == id)) {
+				const exist = pagingComponent.items.map(x => x.id).indexOf(id);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					isRead: true,
+				};
+			}
+		}
+	} else if (group) {
+		for (const id of x.ids) {
+			if (pagingComponent.items.some(x => x.id == id)) {
+				const exist = pagingComponent.items.map(x => x.id).indexOf(id);
+				pagingComponent.items[exist] = {
+					...pagingComponent.items[exist],
+					reads: [...pagingComponent.items[exist].reads, x.userId]
+				};
+			}
+		}
+	}
+}
+
 function onDeleted(id) {
-	const msg = messages.find(m => m.id === id);
+	const msg = pagingComponent.items.find(m => m.id === id);
 	if (msg) {
-		messages = messages.filter(m => m.id !== msg.id);
+		pagingComponent.prepend(msg);
 	}
 }
 
@@ -204,7 +229,6 @@ function scrollToBottom() {
 }
 
 function onIndicatorClick() {
-	showIndicator = false;
 	scrollToBottom();
 }
 
@@ -223,7 +247,7 @@ function notifyNewMessage() {
 
 function onVisibilitychange() {
 	if (document.hidden) return;
-	for (const message of messages) {
+	for (const message of pagingComponent.items) {
 		if (message.userId !== $i.id && !message.isRead) {
 			connection?.send('read', {
 				id: message.id

From 364ac37c0ab49c8d89a8890db1f07f4bd65e51f2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 00:38:33 +0900
Subject: [PATCH 04/30] wip???

---
 .../src/components/date-separated-list.vue    |  10 ++
 .../client/src/components/ui/pagination.vue   | 166 ++++++++++--------
 .../messaging/messaging-room.message.vue      |   1 -
 .../src/pages/messaging/messaging-room.vue    | 148 +++++++---------
 packages/client/src/pizzax.ts                 |   2 +-
 packages/client/src/scripts/scroll.ts         |  52 +++---
 6 files changed, 197 insertions(+), 182 deletions(-)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index c85a0a6ff..2b263c2cb 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -108,6 +108,8 @@ export default defineComponent({
 
 <style lang="scss">
 .sqadhkmv {
+	display: flex;
+
 	> *:empty {
 		display: none;
 	}
@@ -138,6 +140,14 @@ export default defineComponent({
 		}
 	}
 
+	&[data-reversed="true"] {
+		flex-direction: column-reverse;
+	}
+
+	&[data-reversed="false"] {
+		flex-direction: column;
+	}
+
 	> .separator {
 		text-align: center;
 
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 03c68f57c..c9ab052bb 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -14,9 +14,15 @@
 	</div>
 
 	<div v-else ref="rootEl">
+		<div v-if="pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
+			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+				{{ $ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
+		</div>
 		<slot :items="items"></slot>
-		<div v-show="more" key="_more_" class="cxiknjgy _gap">
-			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+		<div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
+			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ $ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
@@ -26,10 +32,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, markRaw, nextTick, onActivated, onDeactivated, onMounted, Ref, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 
 const SECOND_FETCH_LIMIT = 30;
@@ -51,6 +57,8 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints>
 	reversed?: boolean;
 
 	offsetMode?: boolean;
+
+	pageEl?: Element;
 };
 
 const props = withDefaults(defineProps<{
@@ -67,7 +75,7 @@ const emit = defineEmits<{
 
 type Item = { id: string; [another: string]: unknown; };
 
-const rootEl = ref<HTMLElement>();
+const rootEl = $ref<HTMLElement>();
 const items = ref<Item[]>([]);
 const queue = ref<Item[]>([]);
 const offset = ref(0);
@@ -79,6 +87,8 @@ const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
 
+const contentEl = $computed(() => props.pagination.pageEl || rootEl);
+
 const init = async (): Promise<void> => {
 	queue.value = [];
 	fetching.value = true;
@@ -89,18 +99,19 @@ const init = async (): Promise<void> => {
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			if (props.pagination.reversed) {
+			/*if (props.pagination.reversed) {
 				if (i === res.length - 2) item._shouldInsertAd_ = true;
-			} else {
+			} else {*/
 				if (i === 3) item._shouldInsertAd_ = true;
-			}
+			/*}*/
 		}
 		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			if (props.pagination.reversed) moreFetching.value = true;
+			items.value = /*props.pagination.reversed ? [...res].reverse() : */res;
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			items.value = /*props.pagination.reversed ? [...res].reverse() : */res;
 			more.value = false;
 		}
 		offset.value = res.length;
@@ -112,9 +123,9 @@ const init = async (): Promise<void> => {
 	});
 };
 
-const reload = (): void => {
+const reload = (): Promise<void> => {
 	items.value = [];
-	init();
+	return init();
 };
 
 const fetchMore = async (): Promise<void> => {
@@ -128,23 +139,24 @@ const fetchMore = async (): Promise<void> => {
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
-			untilId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
+			untilId: /*props.pagination.reversed ? items.value[0].id : */items.value[items.value.length - 1].id,
 		}),
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			if (props.pagination.reversed) {
+			/*if (props.pagination.reversed) {
 				if (i === res.length - 9) item._shouldInsertAd_ = true;
-			} else {
+			} else {*/
 				if (i === 10) item._shouldInsertAd_ = true;
-			}
+			//}
 		}
+		const 
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = items.value.concat(res);
 			more.value = false;
 		}
 		offset.value += res.length;
@@ -164,15 +176,15 @@ const fetchMoreAhead = async (): Promise<void> => {
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
-			sinceId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
+			sinceId: /*props.pagination.reversed ? items.value[0].id : */items.value[items.value.length - 1].id,
 		}),
 	}).then(res => {
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = /*props.pagination.reversed ? [...res].reverse().concat(items.value) : */items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = /*props.pagination.reversed ? [...res].reverse().concat(items.value) : */items.value.concat(res) ;
 			more.value = false;
 		}
 		offset.value += res.length;
@@ -182,61 +194,39 @@ const fetchMoreAhead = async (): Promise<void> => {
 	});
 };
 
-const prepend = (item: Item): void => {
-	if (props.pagination.reversed) {
-		if (rootEl.value) {
-			const container = getScrollContainer(rootEl.value);
-			if (container == null) return; // TODO?
+const prepend = (item: Item, force = false): void => {
+	console.log('prepend', item)
+	// 初回表示時はunshiftだけでOK
+	if (!rootEl) {
+		items.value.unshift(item);
+		return;
+	}
 
-			const pos = getScrollPosition(rootEl.value);
-			const viewHeight = container.clientHeight;
-			const height = container.scrollHeight;
-			const isBottom = (pos + viewHeight > height - 32);
-			if (isBottom) {
-				// オーバーフローしたら古いアイテムは捨てる
-				if (items.value.length >= props.displayLimit) {
-					// このやり方だとVue 3.2以降アニメーションが動かなくなる
-					//items.value = items.value.slice(-props.displayLimit);
-					while (items.value.length >= props.displayLimit) {
-						items.value.shift();
-					}
-					more.value = true;
-				}
+	const el = props.pagination.pageEl || rootEl;
+	const isTop = isBackTop.value || (props.pagination.reversed ? isBottom : isTopVisible)(el);
+	console.log(isTop || force)
+
+	if (isTop || force) {
+		// Prepend the item
+		items.value.unshift(item);
+
+		// オーバーフローしたら古いアイテムは捨てる
+		if (items.value.length >= props.displayLimit) {
+			// このやり方だとVue 3.2以降アニメーションが動かなくなる
+			//this.items = items.value.slice(0, props.displayLimit);
+			while (items.value.length >= props.displayLimit) {
+				items.value.pop();
 			}
+			more.value = true;
 		}
-		items.value.push(item);
-		// TODO
 	} else {
-		// 初回表示時はunshiftだけでOK
-		if (!rootEl.value) {
-			items.value.unshift(item);
-			return;
-		}
-
-		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
-
-		if (isTop) {
-			// Prepend the item
-			items.value.unshift(item);
-
-			// オーバーフローしたら古いアイテムは捨てる
-			if (items.value.length >= props.displayLimit) {
-				// このやり方だとVue 3.2以降アニメーションが動かなくなる
-				//this.items = items.value.slice(0, props.displayLimit);
-				while (items.value.length >= props.displayLimit) {
-					items.value.pop();
-				}
-				more.value = true;
+		queue.value.push(item);
+		(props.pagination.reversed ? onScrollBottom : onScrollTop)(el, () => {
+			for (const item of queue.value) {
+				prepend(item, true);
 			}
-		} else {
-			queue.value.push(item);
-			onScrollTop(rootEl.value, () => {
-				for (const item of queue.value) {
-					prepend(item);
-				}
-				queue.value = [];
-			});
-		}
+			queue.value = [];
+		});
 	}
 };
 
@@ -258,20 +248,50 @@ watch(queue, (a, b) => {
 	emit('queue', queue.value.length);
 }, { deep: true });
 
-init();
+const inited = init();
 
 onActivated(() => {
 	isBackTop.value = false;
 });
 
 onDeactivated(() => {
-	isBackTop.value = window.scrollY === 0;
+	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl?.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
 });
 
+function getScrollableElement() {
+	if (el) {
+		const container = getScrollContainer(contentEl);
+		return container || el;
+	}
+	return null;
+}
+
+function toBottom() {
+	const scrollableElement = getScrollableElement();
+	if (scrollableElement) scrollToBottom(scrollableElement);
+}
+
+onMounted(() => {
+	inited.then(() => {
+		if (props.pagination.reversed) {
+			nextTick(() => {
+				setTimeout(toBottom, 800);
+
+				// scrollToBottomでmoreFetchingボタンが画面外まで出るまで
+				// more = trueを遅らせる
+				setTimeout(() => {
+					moreFetching.value = false;
+				}, 3000);
+			});
+		}
+	});
+})
+
 defineExpose({
 	items,
 	backed,
 	more,
+	inited,
 	reload,
 	fetchMoreAhead,
 	prepend,
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 43ed233c5..0267c8443 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -52,7 +52,6 @@ const props = defineProps<{
 const isMe = $computed(() => props.message.userId === $i?.id);
 const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
 
-
 function del() {
 	os.api('messaging/messages/delete', {
 		messageId: props.message.id
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 521300fef..ac2aa052b 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -6,12 +6,15 @@
 >
 	<div class="_content mk-messaging-room">
 		<div class="body">
-			<MkPagination v-if="pagination" ref="pagingComponent" :pagination="pagination">
+			<MkPagination ref="pagingComponent" :key="userAcct || groupId" v-if="pagination" :pagination="pagination">
 				<template #empty>
-					<i class="fas fa-info-circle"></i>{{ $ts.noMessagesYet }}</p>
+					<div class="_fullinfo">
+						<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+						<div>{{ i18n.locale.noMessagesYet }}</div>
+					</div>
 				</template>
 
-				<template #defalut="{ items: messages }">
+				<template #default="{ items: messages }">
 					<XList v-if="messages.length > 0" v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
 						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
 					</XList>
@@ -20,7 +23,7 @@
 		</div>
 		<footer>
 			<div v-if="typers.length > 0" class="typers">
-				<I18n :src="$ts.typingUsers" text-tag="span" class="users">
+				<I18n :src="i18n.locale.typingUsers" text-tag="span" class="users">
 					<template #users>
 						<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
 					</template>
@@ -29,7 +32,7 @@
 			</div>
 			<transition :name="$store.state.animation ? 'fade' : ''">
 				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
 				</div>
 			</transition>
 			<XForm v-if="!fetching" ref="form" :user="user" :group="group" class="form"/>
@@ -41,6 +44,7 @@
 <script lang="ts" setup>
 import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import * as Misskey from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
 import XList from '@/components/date-separated-list.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import { Paging } from '@/components/ui/pagination.vue';
@@ -49,11 +53,9 @@ import XForm from './messaging-room.form.vue';
 import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import { popout } from '@/scripts/popout';
 import * as sound from '@/scripts/sound';
 import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
 import { $i } from '@/account';
 
 const props = defineProps<{
@@ -63,34 +65,17 @@ const props = defineProps<{
 
 let rootEl = $ref<Element>();
 let form = $ref<InstanceType<typeof XForm>>();
-let loadMore = $ref<HTMLDivElement>();
 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);
 let timer: number | null = $ref(null);
 
-let pagination: Paging = $computed(() => {
-	return {
-		endpoint: 'messaging/messages',
-		limit: pagingComponent?.more ? 20 : 10,
-		params: {
-			userId: user ? user.id : undefined,
-			groupId: group ? group.id : undefined,
-		},
-		reversed: true,
-	};
-});
-
-const ilObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting)
-		&& !fetching
-		&& pagingComponent?.more
-		&& fetchMoreMessages()
-);
+let pagination: Paging | null = $ref(null);
 
 watch([() => props.userAcct, () => props.groupId], () => {
 	if (connection) connection.dispose();
@@ -100,27 +85,55 @@ watch([() => props.userAcct, () => props.groupId], () => {
 async function fetch() {
 	fetching = true;
 
-	connection = stream.useChannel('messaging', {
-		otherparty: user ? user.id : undefined,
-		group: group ? group.id : undefined,
-	});
+	if (props.userAcct) {
+		user = await os.api('users/show', Acct.parse(props.userAcct));
+		group = null;
+		
+		pagination = {
+			endpoint: 'messaging/messages',
+			params: {
+				userId: user.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl),
+		};
+		connection = stream.useChannel('messaging', {
+			otherparty: user.id,
+		});
+	} else {
+		user = null;
+		group = await os.api('users/groups/show', { groupId: props.groupId });
 
-	connection?.on('message', onMessage);
-	connection?.on('read', onRead);
-	connection?.on('deleted', onDeleted);
-	connection?.on('typers', typers => {
+		pagination = {
+			endpoint: 'messaging/messages',
+			params: {
+				groupId: group.id,
+			},
+			reversed: true,
+			pageEl: $$(rootEl),
+		};
+		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);
 
-	pagingComponent.fetchMoreAhead().then(() => {
-		scrollToBottom();
-
-		// もっと見るの交差検知を発火させないためにfetchは
-		// スクロールが終わるまでfalseにしておく
-		// scrollendのようなイベントはないのでsetTimeoutで
-		window.setTimeout(() => fetching = false, 300);
+	nextTick(() => {
+		pagingComponent.inited.then(() => {
+			scrollToBottom();
+		});
+		window.setTimeout(() => {
+			fetching = false
+		}, 300);
 	});
 }
 
@@ -161,19 +174,12 @@ function onDrop(e: DragEvent): void {
 	//#endregion
 }
 
-function fetchMoreMessages() {
-	fetching = true;
-	pagingComponent.fetchMoreAhead().then(() => {
-		fetching = false;
-	});
-}
-
 function onMessage(message) {
 	sound.play('chat');
 
 	const _isBottom = isBottom(rootEl, 64);
 
-	pagingComponent.append(message);
+	pagingComponent.prepend(message);
 	if (message.userId != $i.id && !document.hidden) {
 		connection?.send('read', {
 			id: message.id
@@ -219,12 +225,12 @@ function onRead(x) {
 function onDeleted(id) {
 	const msg = pagingComponent.items.find(m => m.id === id);
 	if (msg) {
-		pagingComponent.prepend(msg);
+		pagingComponent.items = pagingComponent.items.filter(m => m.id !== msg.id);
 	}
 }
 
 function scrollToBottom() {
-	scroll(rootEl, { top: rootEl.offsetHeight });
+	scroll(rootEl, { top: rootEl.scrollHeight || 999999, behavior: "smooth" });
 }
 
 function onIndicatorClick() {
@@ -257,15 +263,11 @@ function onVisibilitychange() {
 
 onMounted(() => {
 	fetch();
-	if (defaultStore.state.enableInfiniteScroll) {
-		nextTick(() => ilObserver.observe(loadMore));
-	}
 });
 
 onBeforeUnmount(() => {
 	connection?.dispose();
 	document.removeEventListener('visibilitychange', onVisibilitychange);
-	ilObserver.disconnect();
 });
 
 defineExpose({
@@ -281,35 +283,10 @@ defineExpose({
 
 <style lang="scss" scoped>
 .mk-messaging-room {
+	position: relative;
+
 	> .body {
-		> .empty {
-			width: 100%;
-			margin: 0;
-			padding: 16px 8px 8px 8px;
-			text-align: center;
-			font-size: 0.8em;
-			opacity: 0.5;
-
-			i {
-				margin-right: 4px;
-			}
-		}
-
-		> .no-history {
-			display: block;
-			margin: 0;
-			padding: 16px;
-			text-align: center;
-			font-size: 0.8em;
-			color: var(--messagingRoomInfo);
-			opacity: 0.5;
-
-			i {
-				margin-right: 4px;
-			}
-		}
-
-		> .more {
+		.more {
 			display: block;
 			margin: 16px auto;
 			padding: 0 12px;
@@ -335,7 +312,9 @@ defineExpose({
 			}
 		}
 
-		> .messages {
+		.messages {
+			padding-top: 8px;
+
 			> ::v-deep(*) {
 				margin-bottom: 16px;
 			}
@@ -344,7 +323,6 @@ defineExpose({
 
 	> footer {
 		width: 100%;
-		position: relative;
 
 		> .new-message {
 			position: absolute;
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index fa35df551..1f1a3cf45 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -71,7 +71,7 @@ export class Storage<T extends StateDef> {
 					}
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
-			}, 1);
+			}, 10);
 			// streamingのuser storage updateイベントを監視して更新
 			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
 				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 621fe8810..064733d86 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -1,28 +1,27 @@
 type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
-export function getScrollContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
-	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
-	if (overflow.endsWith('auto')) { // xとyを個別に指定している場合、hidden auto みたいな値になる
+export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
+	if (el == null) return null;
+	if (el.scrollHeight > el.clientHeight) {
 		return el;
 	} else {
 		return getScrollContainer(el.parentElement);
 	}
 }
 
-export function getScrollPosition(el: Element | null): number {
+export function getScrollPosition(el: HTMLElement | null): number {
 	const container = getScrollContainer(el);
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function isTopVisible(el: Element | null): boolean {
+export function isTopVisible(el: HTMLElement | null): boolean {
 	const scrollTop = getScrollPosition(el);
 	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
 
 	return scrollTop <= topPosition;
 }
 
-export function onScrollTop(el: Element, cb) {
+export function onScrollTop(el: HTMLElement, cb) {
 	const container = getScrollContainer(el) || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
@@ -34,12 +33,11 @@ export function onScrollTop(el: Element, cb) {
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
 
-export function onScrollBottom(el: Element, cb) {
+export function onScrollBottom(el: HTMLElement, cb) {
 	const container = getScrollContainer(el) || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		const pos = getScrollPosition(el);
-		if (pos + el.clientHeight > el.scrollHeight - 1) {
+		if (isBottom(el)) {
 			cb();
 			container.removeEventListener('scroll', onScroll);
 		}
@@ -47,7 +45,7 @@ export function onScrollBottom(el: Element, cb) {
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
 
-export function scroll(el: Element, options: {
+export function scroll(el: HTMLElement, options: {
 	top?: number;
 	left?: number;
 	behavior?: ScrollBehavior;
@@ -60,21 +58,31 @@ export function scroll(el: Element, options: {
 	}
 }
 
-export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
+/**
+ * Scroll to Top
+ * @param el Scroll container element
+ * @param options Scroll options
+ */
+export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavior; } = {}) {
 	scroll(el, { top: 0, ...options });
 }
 
-export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
+/**
+ * Scroll to Bottom
+ * @param el Scroll container element
+ * @param options Scroll options
+ */
+export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
 }
 
-export function isBottom(el: Element, asobi = 0) {
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+export function isBottom(el: HTMLElement, asobi = 1) {
 	const container = getScrollContainer(el);
-	const current = container
-		? el.scrollTop + el.offsetHeight
-		: window.scrollY + window.innerHeight;
-	const max = container
-		? el.scrollHeight
-		: document.body.offsetHeight;
-	return current >= (max - asobi);
+	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight - asobi;
+	return Math.max(
+		document.body.scrollHeight, document.documentElement.scrollHeight,
+		document.body.offsetHeight, document.documentElement.offsetHeight,
+		document.body.clientHeight, document.documentElement.clientHeight
+	) - window.scrollY <= window.innerHeight - asobi;
 }

From a8af328e5b295f5c151eb45ebc4edd23c934dae7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 02:56:01 +0900
Subject: [PATCH 05/30] wip?

---
 .../src/components/date-separated-list.vue    |  24 +++-
 .../client/src/components/ui/pagination.vue   | 106 +++++++++++-------
 .../pages/messaging/messaging-room.form.vue   |   4 +-
 .../src/pages/messaging/messaging-room.vue    |  50 ++++-----
 packages/client/src/pizzax.ts                 |   2 +-
 packages/client/src/scripts/scroll.ts         |  22 +++-
 6 files changed, 128 insertions(+), 80 deletions(-)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index 2b263c2cb..5e591aba2 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -93,13 +93,19 @@ export default defineComponent({
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
 			defaultStore.state.animation ? {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+					class: {
+						'sqadhkmv': true,
+						'noGap': props.noGap
+					},
 					name: 'list',
 					tag: 'div',
 					'data-direction': props.direction,
 					'data-reversed': props.reversed ? 'true' : 'false',
 				} : {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+					class: {
+						'sqadhkmv': true,
+						'noGap': props.noGap
+					},
 				},
 			{ default: renderChildren });
 	}
@@ -117,24 +123,30 @@ export default defineComponent({
 	> *:not(:last-child) {
 		margin-bottom: var(--margin);
 	}
-
-	> .list-move {
+	
+	&:not(.deny-move-transition) > * {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
+	> .list-leave-active,
 	> .list-enter-active {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
+	> .list-leave-active {
+		position: absolute;
+	}
 
 	&[data-direction="up"] {
-		> .list-enter-from {
+		> .list-enter-from,
+		> .list-leave-to {
 			opacity: 0;
 			transform: translateY(64px);
 		}
 	}
 
 	&[data-direction="down"] {
-		> .list-enter-from {
+		> .list-enter-from,
+		> .list-leave-to {
 			opacity: 0;
 			transform: translateY(-64px);
 		}
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index c9ab052bb..1e26252c3 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -15,14 +15,14 @@
 
 	<div v-else ref="rootEl">
 		<div v-if="pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
-			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ $ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
-		<slot :items="items"></slot>
+		<slot :items="items" :fetching="fetching || moreFetching"></slot>
 		<div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
-			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ $ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
@@ -31,12 +31,13 @@
 </transition>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
 import { computed, ComputedRef, isRef, markRaw, nextTick, onActivated, onDeactivated, onMounted, Ref, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
+import { defaultStore } from '@/store';
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -58,9 +59,10 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints>
 
 	offsetMode?: boolean;
 
-	pageEl?: Element;
+	pageEl?: HTMLElement;
 };
-
+</script>
+<script lang="ts" setup>
 const props = withDefaults(defineProps<{
 	pagination: Paging;
 	disableAutoLoad?: boolean;
@@ -86,8 +88,19 @@ const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
+const {
+	enableInfiniteScroll
+} = defaultStore.reactiveState;
 
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
+const scrollableElement = $computed(() => {
+	if (contentEl) {
+		const container = getScrollContainer(contentEl);
+		return container || contentEl;
+	}
+	return null;
+});
+
 
 const init = async (): Promise<void> => {
 	queue.value = [];
@@ -99,19 +112,15 @@ const init = async (): Promise<void> => {
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			/*if (props.pagination.reversed) {
-				if (i === res.length - 2) item._shouldInsertAd_ = true;
-			} else {*/
-				if (i === 3) item._shouldInsertAd_ = true;
-			/*}*/
+			if (i === 3) item._shouldInsertAd_ = true;
 		}
 		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
 			res.pop();
 			if (props.pagination.reversed) moreFetching.value = true;
-			items.value = /*props.pagination.reversed ? [...res].reverse() : */res;
+			items.value = res;
 			more.value = true;
 		} else {
-			items.value = /*props.pagination.reversed ? [...res].reverse() : */res;
+			items.value = res;
 			more.value = false;
 		}
 		offset.value = res.length;
@@ -139,28 +148,57 @@ const fetchMore = async (): Promise<void> => {
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
-			untilId: /*props.pagination.reversed ? items.value[0].id : */items.value[items.value.length - 1].id,
+			untilId: items.value[items.value.length - 1].id,
 		}),
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			/*if (props.pagination.reversed) {
-				if (i === res.length - 9) item._shouldInsertAd_ = true;
-			} else {*/
-				if (i === 10) item._shouldInsertAd_ = true;
-			//}
+			if (i === 10) item._shouldInsertAd_ = true;
 		}
-		const 
+
+		const reverseConcat = _res => {
+			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
+
+			items.value = items.value.concat(_res);
+
+			return nextTick(() => {
+				if (scrollableElement) {
+					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
+				} else {
+					window.scrollY = oldScroll + (getBodyScrollHeight() - oldHeight);
+				}
+
+				return nextTick();
+			});
+		};
+
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = items.value.concat(res);
-			more.value = true;
+
+			if (props.pagination.reversed) {
+				reverseConcat(res).then(() => {
+					more.value = true;
+					moreFetching.value = false;
+				});
+			} else {
+				items.value = items.value.concat(res);
+				more.value = true;
+				moreFetching.value = false;
+			}
 		} else {
-			items.value = items.value.concat(res);
-			more.value = false;
+			if (props.pagination.reversed) {
+				reverseConcat(res).then(() => {
+					more.value = false;
+					moreFetching.value = false;
+				});
+			} else {
+				items.value = items.value.concat(res);
+				more.value = false;
+				moreFetching.value = false;
+			}
 		}
 		offset.value += res.length;
-		moreFetching.value = false;
 	}, e => {
 		moreFetching.value = false;
 	});
@@ -195,16 +233,13 @@ const fetchMoreAhead = async (): Promise<void> => {
 };
 
 const prepend = (item: Item, force = false): void => {
-	console.log('prepend', item)
 	// 初回表示時はunshiftだけでOK
 	if (!rootEl) {
 		items.value.unshift(item);
 		return;
 	}
 
-	const el = props.pagination.pageEl || rootEl;
-	const isTop = isBackTop.value || (props.pagination.reversed ? isBottom : isTopVisible)(el);
-	console.log(isTop || force)
+	const isTop = isBackTop.value || (props.pagination.reversed ? isBottom : isTopVisible)(contentEl);
 
 	if (isTop || force) {
 		// Prepend the item
@@ -221,7 +256,7 @@ const prepend = (item: Item, force = false): void => {
 		}
 	} else {
 		queue.value.push(item);
-		(props.pagination.reversed ? onScrollBottom : onScrollTop)(el, () => {
+		(props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
 			for (const item of queue.value) {
 				prepend(item, true);
 			}
@@ -258,16 +293,7 @@ onDeactivated(() => {
 	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl?.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
 });
 
-function getScrollableElement() {
-	if (el) {
-		const container = getScrollContainer(contentEl);
-		return container || el;
-	}
-	return null;
-}
-
 function toBottom() {
-	const scrollableElement = getScrollableElement();
 	if (scrollableElement) scrollToBottom(scrollableElement);
 }
 
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 1b9421ca9..598769c8e 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -247,8 +247,8 @@ export default defineComponent({
 
 	> .file {
 		padding: 8px;
-		color: #444;
-		background: #eee;
+		color: var(--fg);
+		background: transparent;
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index ac2aa052b..1f4c81cf6 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -14,8 +14,8 @@
 					</div>
 				</template>
 
-				<template #default="{ items: messages }">
-					<XList v-if="messages.length > 0" v-slot="{ item: message }" class="messages" :items="messages" direction="up" reversed>
+				<template #default="{ items: messages, fetching }">
+					<XList v-if="messages.length > 0" v-slot="{ item: message }" :class="{ messages: true, 'deny-move-transition': fetching }" :items="messages" direction="up" reversed>
 						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
 					</XList>
 				</template>
@@ -30,12 +30,12 @@
 				</I18n>
 				<MkEllipsis/>
 			</div>
-			<transition :name="$store.state.animation ? 'fade' : ''">
-				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
+			<transition :name="animation ? 'fade' : ''">
+				<div class="new-message" v-if="showIndicator">
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
 				</div>
 			</transition>
-			<XForm v-if="!fetching" ref="form" :user="user" :group="group" class="form"/>
+			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
 		</footer>
 	</div>
 </div>
@@ -46,8 +46,7 @@ import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import XList from '@/components/date-separated-list.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import { Paging } from '@/components/ui/pagination.vue';
+import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
@@ -57,6 +56,7 @@ import * as sound from '@/scripts/sound';
 import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	userAcct?: string;
@@ -64,7 +64,7 @@ const props = defineProps<{
 }>();
 
 let rootEl = $ref<Element>();
-let form = $ref<InstanceType<typeof XForm>>();
+let formEl = $ref<InstanceType<typeof XForm>>();
 let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 let fetching = $ref(true);
@@ -73,7 +73,9 @@ 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);
-let timer: number | null = $ref(null);
+const {
+	animation
+} = defaultStore.reactiveState;
 
 let pagination: Paging | null = $ref(null);
 
@@ -155,7 +157,7 @@ function onDrop(e: DragEvent): void {
 
 	// ファイルだったら
 	if (e.dataTransfer.files.length == 1) {
-		form.upload(e.dataTransfer.files[0]);
+		formEl.upload(e.dataTransfer.files[0]);
 		return;
 	} else if (e.dataTransfer.files.length > 1) {
 		os.alert({
@@ -169,7 +171,7 @@ function onDrop(e: DragEvent): void {
 	const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile != '') {
 		const file = JSON.parse(driveFile);
-		form.file = file;
+		formEl.file = file;
 	}
 	//#endregion
 }
@@ -234,6 +236,7 @@ function scrollToBottom() {
 }
 
 function onIndicatorClick() {
+	showIndicator = false;
 	scrollToBottom();
 }
 
@@ -243,11 +246,6 @@ function notifyNewMessage() {
 	onScrollBottom(rootEl, () => {
 		showIndicator = false;
 	});
-
-	if (timer) window.clearTimeout(timer);
-	timer = window.setTimeout(() => {
-		showIndicator = false;
-	}, 4000);
 }
 
 function onVisibilitychange() {
@@ -323,10 +321,15 @@ defineExpose({
 
 	> footer {
 		width: 100%;
+		position: sticky;
+		z-index: 2;
+		bottom: 8px;
+
+		@media (max-width: 500px) {
+			bottom: 100px;
+		}
 
 		> .new-message {
-			position: absolute;
-			top: -48px;
 			width: 100%;
 			padding: 8px 0;
 			text-align: center;
@@ -334,17 +337,14 @@ defineExpose({
 			> button {
 				display: inline-block;
 				margin: 0;
-				padding: 0 12px 0 30px;
+				padding: 0 12px;
 				line-height: 32px;
 				font-size: 12px;
 				border-radius: 16px;
 
 				> i {
-					position: absolute;
-					top: 0;
-					left: 10px;
-					line-height: 32px;
-					font-size: 16px;
+					display: inline-block;
+					margin-right: 8px;
 				}
 			}
 		}
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 1f1a3cf45..fa35df551 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -71,7 +71,7 @@ export class Storage<T extends StateDef> {
 					}
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
-			}, 10);
+			}, 1);
 			// streamingのuser storage updateイベントを監視して更新
 			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
 				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 064733d86..146f6ff0b 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -34,15 +34,16 @@ export function onScrollTop(el: HTMLElement, cb) {
 }
 
 export function onScrollBottom(el: HTMLElement, cb) {
-	const container = getScrollContainer(el) || window;
+	const container = getScrollContainer(el);
+	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		if (isBottom(el)) {
+		if (isScrollBottom(container)) {
 			cb();
-			container.removeEventListener('scroll', onScroll);
+			containerOrWindow.removeEventListener('scroll', onScroll);
 		}
 	};
-	container.addEventListener('scroll', onScroll, { passive: true });
+	containerOrWindow.addEventListener('scroll', onScroll, { passive: true });
 }
 
 export function scroll(el: HTMLElement, options: {
@@ -79,10 +80,19 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
 export function isBottom(el: HTMLElement, asobi = 1) {
 	const container = getScrollContainer(el);
-	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight - asobi;
+	return isScrollBottom(container, asobi);
+}
+
+// https://ja.javascript.info/size-and-scroll-window#ref-932
+export function getBodyScrollHeight() {
 	return Math.max(
 		document.body.scrollHeight, document.documentElement.scrollHeight,
 		document.body.offsetHeight, document.documentElement.offsetHeight,
 		document.body.clientHeight, document.documentElement.clientHeight
-	) - window.scrollY <= window.innerHeight - asobi;
+	);
+}
+
+export function isScrollBottom(container?: HTMLElement | null, asobi = 1) {
+	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight + asobi;
+	return getBodyScrollHeight() - window.scrollY <= window.innerHeight + asobi;
 }

From 9923cfaf506fa26c911edbaad03a990110586333 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 05:05:34 +0900
Subject: [PATCH 06/30] :v:

---
 .../src/components/date-separated-list.vue    | 23 ++++++++++++++++---
 .../messaging/messaging-room.message.vue      |  2 ++
 .../src/pages/messaging/messaging-room.vue    |  7 +++---
 packages/client/src/scripts/scroll.ts         |  4 ++--
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index 5e591aba2..bb4d11cbe 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -90,6 +90,13 @@ export default defineComponent({
 			}
 		});
 
+		function onBeforeLeave(el: HTMLElement) {
+			el.style.top = `${el.offsetTop}px`;
+		}
+		function onLeaveCanceled(el: HTMLElement) {
+			el.style.top = '';
+		}
+
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
 			defaultStore.state.animation ? {
@@ -101,6 +108,8 @@ export default defineComponent({
 					tag: 'div',
 					'data-direction': props.direction,
 					'data-reversed': props.reversed ? 'true' : 'false',
+					onBeforeLeave,
+					onLeaveCanceled,
 				} : {
 					class: {
 						'sqadhkmv': true,
@@ -123,17 +132,25 @@ export default defineComponent({
 	> *:not(:last-child) {
 		margin-bottom: var(--margin);
 	}
-	
-	&:not(.deny-move-transition) > * {
+
+	> .list-move {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
+	&.deny-move-transition > .list-move {
+		transition: none !important;
+	}
+
 	> .list-leave-active,
 	> .list-enter-active {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
+
+	> .list-leave-from,
+	> .list-leave-to,
 	> .list-leave-active {
-		position: absolute;
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		position: absolute !important;
 	}
 
 	&[data-direction="up"] {
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 0267c8443..cb2ce49e4 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -66,6 +66,7 @@ function del() {
 	position: relative;
 	background-color: transparent;
 	display: flex;
+	width: 100%;
 
 	> .avatar {
 		position: sticky;
@@ -249,6 +250,7 @@ function del() {
 	&.isMe {
 		flex-direction: row-reverse;
 		padding-right: var(--margin);
+		right: var(--margin); // 削除時にposition: absoluteになったときに使う
 
 		> .content {
 			padding-right: 16px;
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 1f4c81cf6..9d8f7c094 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -31,7 +31,7 @@
 				<MkEllipsis/>
 			</div>
 			<transition :name="animation ? 'fade' : ''">
-				<div class="new-message" v-if="showIndicator">
+				<div class="new-message" v-show="showIndicator">
 					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
 				</div>
 			</transition>
@@ -324,14 +324,15 @@ defineExpose({
 		position: sticky;
 		z-index: 2;
 		bottom: 8px;
+		padding-top: 8px;
 
 		@media (max-width: 500px) {
-			bottom: 100px;
+			bottom: 92px;
 		}
 
 		> .new-message {
 			width: 100%;
-			padding: 8px 0;
+			padding-bottom: 8px;
 			text-align: center;
 
 			> button {
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 146f6ff0b..88580b13a 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -1,7 +1,7 @@
 type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
 export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
-	if (el == null) return null;
+	if (el == null || el.tagName === 'HTML') return null;
 	if (el.scrollHeight > el.clientHeight) {
 		return el;
 	} else {
@@ -77,7 +77,6 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
 	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
 }
 
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
 export function isBottom(el: HTMLElement, asobi = 1) {
 	const container = getScrollContainer(el);
 	return isScrollBottom(container, asobi);
@@ -92,6 +91,7 @@ export function getBodyScrollHeight() {
 	);
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
 export function isScrollBottom(container?: HTMLElement | null, asobi = 1) {
 	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight + asobi;
 	return getBodyScrollHeight() - window.scrollY <= window.innerHeight + asobi;

From 19af8e845f2f1457414a0fc86ea8ab15af011cb4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 05:43:57 +0900
Subject: [PATCH 07/30] messaaging-room.form.vue rewrite to compositon api

---
 .../src/components/emoji-picker-window.vue    |   2 +-
 packages/client/src/os.ts                     |   2 +-
 .../pages/messaging/messaging-room.form.vue   | 371 +++++++++---------
 .../src/pages/messaging/messaging-room.vue    |  23 +-
 4 files changed, 197 insertions(+), 201 deletions(-)

diff --git a/packages/client/src/components/emoji-picker-window.vue b/packages/client/src/components/emoji-picker-window.vue
index 4d27fb48b..ad1ceed73 100644
--- a/packages/client/src/components/emoji-picker-window.vue
+++ b/packages/client/src/components/emoji-picker-window.vue
@@ -17,7 +17,7 @@ import MkWindow from '@/components/ui/window.vue';
 import MkEmojiPicker from '@/components/emoji-picker.vue';
 
 withDefaults(defineProps<{
-	src?: HTMLElement;
+	src?: HTMLElement | EventTarget;
 	showPinned?: boolean;
 	asReactionPicker?: boolean;
 }>(), {
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index c16ea717a..bbe27b97d 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -422,7 +422,7 @@ type AwaitType<T> =
 	T;
 let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
 let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
-export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: typeof activeTextarea) {
+export async function openEmojiPicker(src?: HTMLElement | EventTarget | null, opts, initialTextarea: typeof activeTextarea) {
 	if (openingEmojiPicker) return;
 
 	activeTextarea = initialTextarea;
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 598769c8e..7a810594e 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -4,219 +4,212 @@
 	@drop.stop="onDrop"
 >
 	<textarea
-		ref="text"
+		ref="textEl"
 		v-model="text"
-		:placeholder="$ts.inputMessageHere"
+		:placeholder="i18n.locale.inputMessageHere"
 		@keydown="onKeydown"
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 	></textarea>
 	<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-	<button class="send _button" :disabled="!canSend || sending" :title="$ts.send" @click="send">
+	<button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send">
 		<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 	</button>
 	<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
 	<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
-	<input ref="file" type="file" @change="onChangeFile"/>
+	<input ref="fileEl" type="file" @change="onChangeFile"/>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import insertTextAtCursor from 'insert-text-at-cursor';
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import * as Misskey from 'misskey-js';
 import autosize from 'autosize';
+import insertTextAtCursor from 'insert-text-at-cursor';
 import { formatTimeString } from '@/scripts/format-time-string';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import { Autocomplete } from '@/scripts/autocomplete';
 import { throttle } from 'throttle-debounce';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { Autocomplete } from '@/scripts/autocomplete';
 
-export default defineComponent({
-	props: {
-		user: {
-			type: Object,
-			requird: false,
-		},
-		group: {
-			type: Object,
-			requird: false,
-		},
-	},
-	data() {
-		return {
-			text: null,
-			file: null,
-			sending: false,
-			typing: throttle(3000, () => {
-				stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
-			}),
-		};
-	},
-	computed: {
-		draftKey(): 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;
+const props = defineProps<{
+	user?: Misskey.entities.UserDetailed | null;
+	group?: Misskey.entities.UserGroup | null;
+}>();
+
+let textEl = $ref<HTMLTextAreaElement>();
+let fileEl = $ref<HTMLInputElement>();
+
+let text: string = $ref('');
+let file: Misskey.entities.DriveFile | null = $ref(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 != '') || file != null);
+
+watch([$$(text), $$(file)], saveDraft);
+
+onMounted(() => {
+	autosize(textEl);
+
+	// TODO: detach when unmount
+	// TODO
+	//new Autocomplete(textEl, this, { model: 'text' });
+
+	// 書きかけの投稿を復元
+	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
+	if (draft) {
+		text = draft.data.text;
+		file = draft.data.file;
+	}
+});
+
+async function onPaste(e: ClipboardEvent) {
+	if (!e.clipboardData) return;
+
+	const data = e.clipboardData;
+	const items = data.items;
+
+	if (items.length == 1) {
+		if (items[0].kind == 'file') {
+			const file = items[0].getAsFile();
+			if (!file) return;
+			const lio = file.name.lastIndexOf('.');
+			const ext = lio >= 0 ? file.name.slice(lio) : '';
+			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
+			if (formatted) upload(file, formatted);
 		}
-	},
-	watch: {
-		text() {
-			this.saveDraft();
-		},
-		file() {
-			this.saveDraft();
-		}
-	},
-	mounted() {
-		autosize(this.$refs.text);
-
-		// TODO: detach when unmount
-		// TODO
-		//new Autocomplete(this.$refs.text, this, { model: 'text' });
-
-		// 書きかけの投稿を復元
-		const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[this.draftKey];
-		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.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
-					if (formatted) this.upload(file, formatted);
-				}
-			} else {
-				if (items[0].kind == 'file') {
-					os.alert({
-						type: 'error',
-						text: this.$ts.onlyOneFileCanBeAttached
-					});
-				}
-			}
-		},
-
-		onDragover(e) {
-			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_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();
-				os.alert({
-					type: 'error',
-					text: this.$ts.onlyOneFileCanBeAttached
-				});
-				return;
-			}
-
-			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-			if (driveFile != null && driveFile != '') {
-				this.file = JSON.parse(driveFile);
-				e.preventDefault();
-			}
-			//#endregion
-		},
-
-		onKeydown(e) {
-			this.typing();
-			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canSend) {
-				this.send();
-			}
-		},
-
-		onCompositionUpdate() {
-			this.typing();
-		},
-
-		chooseFile(e) {
-			selectFile(e.currentTarget || e.target, this.$ts.selectFile).then(file => {
-				this.file = file;
+	} else {
+		if (items[0].kind == 'file') {
+			os.alert({
+				type: 'error',
+				text: i18n.locale.onlyOneFileCanBeAttached
 			});
-		},
-
-		onChangeFile() {
-			this.upload((this.$refs.file as any).files[0]);
-		},
-
-		upload(file: File, name?: string) {
-			os.upload(file, this.$store.state.uploadFolder, name).then(res => {
-				this.file = res;
-			});
-		},
-
-		send() {
-			this.sending = true;
-			os.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.draftKey] = {
-				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.draftKey];
-
-			localStorage.setItem('message_drafts', JSON.stringify(data));
-		},
-
-		async insertEmoji(ev) {
-			os.openEmojiPicker(ev.currentTarget || ev.target, {}, this.$refs.text);
 		}
 	}
+}
+
+function onDragover(e: DragEvent) {
+	if (!e.dataTransfer) return;
+
+	const isFile = e.dataTransfer.items[0].kind == 'file';
+	const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+	if (isFile || isDriveFile) {
+		e.preventDefault();
+		e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
+	}
+}
+
+function onDrop(e: DragEvent): void {
+	if (!e.dataTransfer) return;
+
+	// ファイルだったら
+	if (e.dataTransfer.files.length == 1) {
+		e.preventDefault();
+		upload(e.dataTransfer.files[0]);
+		return;
+	} else if (e.dataTransfer.files.length > 1) {
+		e.preventDefault();
+		os.alert({
+			type: 'error',
+			text: i18n.locale.onlyOneFileCanBeAttached
+		});
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile != '') {
+		file = JSON.parse(driveFile);
+		e.preventDefault();
+	}
+	//#endregion
+}
+
+function onKeydown(e: KeyboardEvent) {
+	typing();
+	if ((e.key === 'Enter') && (e.ctrlKey || e.metaKey) && canSend) {
+		send();
+	}
+}
+
+function onCompositionUpdate() {
+	typing();
+}
+
+function chooseFile(e: MouseEvent) {
+	selectFile(e.currentTarget || e.target, i18n.locale.selectFile).then(file => {
+		file = file;
+	});
+}
+
+function onChangeFile() {
+	if (fileEl?.files![0]) upload(fileEl.files[0]);
+}
+
+function upload(fileToUpload: File, name?: string) {
+	os.upload(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 data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+	data[draftKey] = {
+		updatedAt: new Date(),
+		data: {
+			text: text,
+			file: file
+		}
+	}
+
+	localStorage.setItem('message_drafts', JSON.stringify(data));
+}
+
+function deleteDraft() {
+	const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+
+	delete data[draftKey];
+
+	localStorage.setItem('message_drafts', JSON.stringify(data));
+}
+
+async function insertEmoji(ev: MouseEvent) {
+	os.openEmojiPicker(ev.currentTarget || ev.target, {}, textEl);
+}
+
+defineExpose({
+	file,
+	upload,
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 9d8f7c094..12f37a5e4 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -63,7 +63,7 @@ const props = defineProps<{
 	groupId?: string;
 }>();
 
-let rootEl = $ref<Element>();
+let rootEl = $ref<HTMLDivElement>();
 let formEl = $ref<InstanceType<typeof XForm>>();
 let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
@@ -88,16 +88,18 @@ async function fetch() {
 	fetching = true;
 
 	if (props.userAcct) {
-		user = await os.api('users/show', Acct.parse(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),
+			pageEl: $$(rootEl).value,
 		};
 		connection = stream.useChannel('messaging', {
 			otherparty: user.id,
@@ -108,14 +110,15 @@ async function fetch() {
 
 		pagination = {
 			endpoint: 'messaging/messages',
+			limit: 20,
 			params: {
-				groupId: group.id,
+				groupId: group?.id,
 			},
 			reversed: true,
-			pageEl: $$(rootEl),
+			pageEl: $$(rootEl).value,
 		};
 		connection = stream.useChannel('messaging', {
-			group: group.id,
+			group: group?.id,
 		});
 	}
 
@@ -124,7 +127,7 @@ async function fetch() {
 	connection.on('read', onRead);
 	connection.on('deleted', onDeleted);
 	connection.on('typers', typers => {
-		typers = typers.filter(u => u.id !== $i.id);
+		typers = typers.filter(u => u.id !== $i?.id);
 	});
 
 	document.addEventListener('visibilitychange', onVisibilitychange);
@@ -182,7 +185,7 @@ function onMessage(message) {
 	const _isBottom = isBottom(rootEl, 64);
 
 	pagingComponent.prepend(message);
-	if (message.userId != $i.id && !document.hidden) {
+	if (message.userId != $i?.id && !document.hidden) {
 		connection?.send('read', {
 			id: message.id
 		});
@@ -193,7 +196,7 @@ function onMessage(message) {
 		nextTick(() => {
 			scrollToBottom();
 		});
-	} else if (message.userId != $i.id) {
+	} else if (message.userId != $i?.id) {
 		// Notify
 		notifyNewMessage();
 	}
@@ -251,7 +254,7 @@ function notifyNewMessage() {
 function onVisibilitychange() {
 	if (document.hidden) return;
 	for (const message of pagingComponent.items) {
-		if (message.userId !== $i.id && !message.isRead) {
+		if (message.userId !== $i?.id && !message.isRead) {
 			connection?.send('read', {
 				id: message.id
 			});

From 4a7f968741ec017651330c2a5b4c94a7ee2e3e32 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 05:50:15 +0900
Subject: [PATCH 08/30] refactor

---
 packages/client/src/components/ripple.vue                 | 2 +-
 packages/client/src/components/ui/pagination.vue          | 8 ++++----
 .../client/src/pages/messaging/messaging-room.form.vue    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/ripple.vue b/packages/client/src/components/ripple.vue
index 401e78e30..e248bee00 100644
--- a/packages/client/src/components/ripple.vue
+++ b/packages/client/src/components/ripple.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
 			<animate attributeName="r"
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 1e26252c3..b4cb97416 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -214,15 +214,15 @@ const fetchMoreAhead = async (): Promise<void> => {
 		...(props.pagination.offsetMode ? {
 			offset: offset.value,
 		} : {
-			sinceId: /*props.pagination.reversed ? items.value[0].id : */items.value[items.value.length - 1].id,
+			sinceId: items.value[items.value.length - 1].id,
 		}),
 	}).then(res => {
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = /*props.pagination.reversed ? [...res].reverse().concat(items.value) : */items.value.concat(res);
+			items.value = items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = /*props.pagination.reversed ? [...res].reverse().concat(items.value) : */items.value.concat(res) ;
+			items.value = items.value.concat(res) ;
 			more.value = false;
 		}
 		offset.value += res.length;
@@ -307,7 +307,7 @@ onMounted(() => {
 				// more = trueを遅らせる
 				setTimeout(() => {
 					moreFetching.value = false;
-				}, 3000);
+				}, 2000);
 			});
 		}
 	});
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 7a810594e..6ce259e79 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -144,8 +144,8 @@ function onCompositionUpdate() {
 }
 
 function chooseFile(e: MouseEvent) {
-	selectFile(e.currentTarget || e.target, i18n.locale.selectFile).then(file => {
-		file = file;
+	selectFile(e.currentTarget || e.target, i18n.locale.selectFile).then(selectedFile => {
+		file = selectedFile;
 	});
 }
 

From 410939a52483dd872dfae58cfc50a7f8fe755063 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 05:56:24 +0900
Subject: [PATCH 09/30] =?UTF-8?q?=E9=96=A2=E5=BF=83=E4=BA=8B=E3=81=A7?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=E3=81=AE=E3=81=A7=E3=81=A8=E3=82=8A=E3=81=82?=
 =?UTF-8?q?=E3=81=88=E3=81=9A=E7=BD=AE=E3=81=84=E3=81=A6=E3=81=8A=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/components/emoji-picker-window.vue | 2 +-
 packages/client/src/components/ripple.vue              | 2 +-
 packages/client/src/os.ts                              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/emoji-picker-window.vue b/packages/client/src/components/emoji-picker-window.vue
index ad1ceed73..4d27fb48b 100644
--- a/packages/client/src/components/emoji-picker-window.vue
+++ b/packages/client/src/components/emoji-picker-window.vue
@@ -17,7 +17,7 @@ import MkWindow from '@/components/ui/window.vue';
 import MkEmojiPicker from '@/components/emoji-picker.vue';
 
 withDefaults(defineProps<{
-	src?: HTMLElement | EventTarget;
+	src?: HTMLElement;
 	showPinned?: boolean;
 	asReactionPicker?: boolean;
 }>(), {
diff --git a/packages/client/src/components/ripple.vue b/packages/client/src/components/ripple.vue
index e248bee00..401e78e30 100644
--- a/packages/client/src/components/ripple.vue
+++ b/packages/client/src/components/ripple.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
 			<animate attributeName="r"
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index bbe27b97d..c16ea717a 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -422,7 +422,7 @@ type AwaitType<T> =
 	T;
 let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
 let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
-export async function openEmojiPicker(src?: HTMLElement | EventTarget | null, opts, initialTextarea: typeof activeTextarea) {
+export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: typeof activeTextarea) {
 	if (openingEmojiPicker) return;
 
 	activeTextarea = initialTextarea;

From f660782a4479558a13662ac96661decff0d83842 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 06:21:37 +0900
Subject: [PATCH 10/30] :art:

---
 packages/client/src/components/date-separated-list.vue         | 1 +
 packages/client/src/pages/messaging/messaging-room.message.vue | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index bb4d11cbe..089c9ab70 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -92,6 +92,7 @@ export default defineComponent({
 
 		function onBeforeLeave(el: HTMLElement) {
 			el.style.top = `${el.offsetTop}px`;
+			el.style.left = `${el.offsetLeft}px`;
 		}
 		function onLeaveCanceled(el: HTMLElement) {
 			el.style.top = '';
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index cb2ce49e4..b344c0980 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -66,7 +66,6 @@ function del() {
 	position: relative;
 	background-color: transparent;
 	display: flex;
-	width: 100%;
 
 	> .avatar {
 		position: sticky;

From 60ad28cbc7ad2720d8675e5712cd16b352d5967e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 07:07:22 +0900
Subject: [PATCH 11/30] :art:

---
 .../pages/messaging/messaging-room.form.vue   | 116 ++++++++++--------
 .../src/pages/messaging/messaging-room.vue    |   4 +-
 2 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 6ce259e79..fd449066e 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -11,12 +11,16 @@
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
 	></textarea>
-	<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-	<button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send">
-		<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
-	</button>
-	<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
-	<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
+	<footer>
+		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
+		<div class="buttons">
+			<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
+			<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
+			<button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send">
+				<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
+			</button>
+		</div>
+	</footer>
 	<input ref="fileEl" type="file" @change="onChangeFile"/>
 </div>
 </template>
@@ -55,21 +59,6 @@ let canSend = $computed(() => (text != null && text != '') || file != null);
 
 watch([$$(text), $$(file)], saveDraft);
 
-onMounted(() => {
-	autosize(textEl);
-
-	// TODO: detach when unmount
-	// TODO
-	//new Autocomplete(textEl, this, { model: 'text' });
-
-	// 書きかけの投稿を復元
-	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
-	if (draft) {
-		text = draft.data.text;
-		file = draft.data.file;
-	}
-});
-
 async function onPaste(e: ClipboardEvent) {
 	if (!e.clipboardData) return;
 
@@ -207,6 +196,21 @@ async function insertEmoji(ev: MouseEvent) {
 	os.openEmojiPicker(ev.currentTarget || ev.target, {}, textEl);
 }
 
+onMounted(() => {
+	autosize(textEl);
+
+	// TODO: detach when unmount
+	// TODO
+	//new Autocomplete(textEl, this, { model: 'text' });
+
+	// 書きかけの投稿を復元
+	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
+	if (draft) {
+		text = draft.data.text;
+		file = draft.data.file;
+	}
+});
+
 defineExpose({
 	file,
 	upload,
@@ -223,7 +227,7 @@ defineExpose({
 		width: 100%;
 		min-width: 100%;
 		max-width: 100%;
-		height: 80px;
+		min-height: 80px;
 		margin: 0;
 		padding: 16px 16px 0 16px;
 		resize: none;
@@ -238,26 +242,16 @@ defineExpose({
 		color: var(--fg);
 	}
 
-	> .file {
-		padding: 8px;
-		color: var(--fg);
-		background: transparent;
-		cursor: pointer;
-	}
-
-	> .send {
-		position: absolute;
+	footer {
+		position: sticky;
 		bottom: 0;
-		right: 0;
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		transition: color 0.1s ease;
-		color: var(--accent);
+		background: var(--panel);
 
-		&:active {
-			color: var(--accentDarken);
-			transition: color 0s ease;
+		> .file {
+			padding: 8px;
+			color: var(--fg);
+			background: transparent;
+			cursor: pointer;
 		}
 	}
 
@@ -309,21 +303,39 @@ defineExpose({
 		}
 	}
 
-	._button {
-		margin: 0;
-		padding: 16px;
-		font-size: 1em;
-		font-weight: normal;
-		text-decoration: none;
-		transition: color 0.1s ease;
+	.buttons {
+		display: flex;
 
-		&:hover {
-			color: var(--accent);
+		._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;
+			}
 		}
 
-		&: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;
+			}
 		}
 	}
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 12f37a5e4..18c188bc5 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -326,7 +326,7 @@ defineExpose({
 		width: 100%;
 		position: sticky;
 		z-index: 2;
-		bottom: 8px;
+		bottom: 0;
 		padding-top: 8px;
 
 		@media (max-width: 500px) {
@@ -373,6 +373,8 @@ defineExpose({
 		}
 
 		> .form {
+			max-height: 12em;
+			overflow-y: scroll;
 			border-top: solid 0.5px var(--divider);
 		}
 	}

From f0bb08de1595649d8e074d183da7a3d83ee37712 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 28 Jan 2022 15:44:02 +0900
Subject: [PATCH 12/30] i18n.ts

---
 .../client/src/pages/messaging/messaging-room.form.vue | 10 +++++-----
 packages/client/src/pages/messaging/messaging-room.vue |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index e8e572d99..3dad8478c 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -6,7 +6,7 @@
 	<textarea
 		ref="textEl"
 		v-model="text"
-		:placeholder="i18n.locale.inputMessageHere"
+		:placeholder="i18n.ts.inputMessageHere"
 		@keydown="onKeydown"
 		@compositionupdate="onCompositionUpdate"
 		@paste="onPaste"
@@ -16,7 +16,7 @@
 		<div class="buttons">
 			<button class="_button" @click="chooseFile"><i class="fas fa-photo-video"></i></button>
 			<button class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
-			<button class="send _button" :disabled="!canSend || sending" :title="i18n.locale.send" @click="send">
+			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
 				<template v-if="!sending"><i class="fas fa-paper-plane"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 			</button>
 		</div>
@@ -78,7 +78,7 @@ async function onPaste(e: ClipboardEvent) {
 		if (items[0].kind == 'file') {
 			os.alert({
 				type: 'error',
-				text: i18n.locale.onlyOneFileCanBeAttached
+				text: i18n.ts.onlyOneFileCanBeAttached
 			});
 		}
 	}
@@ -107,7 +107,7 @@ function onDrop(e: DragEvent): void {
 		e.preventDefault();
 		os.alert({
 			type: 'error',
-			text: i18n.locale.onlyOneFileCanBeAttached
+			text: i18n.ts.onlyOneFileCanBeAttached
 		});
 		return;
 	}
@@ -133,7 +133,7 @@ function onCompositionUpdate() {
 }
 
 function chooseFile(e: MouseEvent) {
-	selectFile(e.currentTarget ?? e.target, i18n.locale.selectFile).then(selectedFile => {
+	selectFile(e.currentTarget ?? e.target, i18n.ts.selectFile).then(selectedFile => {
 		file = selectedFile;
 	});
 }
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 18c188bc5..ee8c67cc0 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -10,7 +10,7 @@
 				<template #empty>
 					<div class="_fullinfo">
 						<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-						<div>{{ i18n.locale.noMessagesYet }}</div>
+						<div>{{ i18n.ts.noMessagesYet }}</div>
 					</div>
 				</template>
 
@@ -23,7 +23,7 @@
 		</div>
 		<footer>
 			<div v-if="typers.length > 0" class="typers">
-				<I18n :src="i18n.locale.typingUsers" text-tag="span" class="users">
+				<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
 					<template #users>
 						<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
 					</template>
@@ -32,7 +32,7 @@
 			</div>
 			<transition :name="animation ? 'fade' : ''">
 				<div class="new-message" v-show="showIndicator">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.locale.newMessageExists }}</button>
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
 				</div>
 			</transition>
 			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
@@ -165,7 +165,7 @@ function onDrop(e: DragEvent): void {
 	} else if (e.dataTransfer.files.length > 1) {
 		os.alert({
 			type: 'error',
-			text: i18n.locale.onlyOneFileCanBeAttached
+			text: i18n.ts.onlyOneFileCanBeAttached
 		});
 		return;
 	}

From 1f4d211ff75f28027a866cb7a08dab1ee4b8a171 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 00:05:38 +0900
Subject: [PATCH 13/30] fix scroll container find function

---
 packages/client/src/components/ui/pagination.vue | 9 +--------
 packages/client/src/scripts/scroll.ts            | 8 +++++++-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index b4cb97416..b3b1f6f13 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -93,14 +93,7 @@ const {
 } = defaultStore.reactiveState;
 
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
-const scrollableElement = $computed(() => {
-	if (contentEl) {
-		const container = getScrollContainer(contentEl);
-		return container || contentEl;
-	}
-	return null;
-});
-
+const scrollableElement = $computed(() => getScrollContainer(contentEl));
 
 const init = async (): Promise<void> => {
 	queue.value = [];
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 88580b13a..16922533d 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -2,7 +2,13 @@ type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
 export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
 	if (el == null || el.tagName === 'HTML') return null;
-	if (el.scrollHeight > el.clientHeight) {
+	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
+	if (
+		// xとyを個別に指定している場合、`hidden scroll`みたいな値になる
+		overflow.endsWith('scroll') ||
+		overflow.endsWith('auto') ||
+		el.scrollHeight > el.clientHeight
+	) {
 		return el;
 	} else {
 		return getScrollContainer(el.parentElement);

From 9825d7ce8751b398f774c2f17ef5768753b6a55e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 00:07:27 +0900
Subject: [PATCH 14/30] fix

---
 packages/client/src/components/date-separated-list.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index 089c9ab70..a46920888 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -96,6 +96,7 @@ export default defineComponent({
 		}
 		function onLeaveCanceled(el: HTMLElement) {
 			el.style.top = '';
+			el.style.left = '';
 		}
 
 		return () => h(

From eaaccb52da99e47f951be012c53801e2d61f78de Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 29 Jan 2022 15:10:06 +0000
Subject: [PATCH 15/30] FIX

---
 .../src/components/date-separated-list.vue    | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index a46920888..4e9c49f57 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -101,23 +101,20 @@ export default defineComponent({
 
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
+			{
 					class: {
 						'sqadhkmv': true,
 						'noGap': props.noGap
 					},
-					name: 'list',
-					tag: 'div',
 					'data-direction': props.direction,
 					'data-reversed': props.reversed ? 'true' : 'false',
-					onBeforeLeave,
-					onLeaveCanceled,
-				} : {
-					class: {
-						'sqadhkmv': true,
-						'noGap': props.noGap
-					},
-				},
+					...(defaultStore.state.animation ? {
+						name: 'list',
+						tag: 'div',
+						onBeforeLeave,
+						onLeaveCanceled,
+					} : {}),
+			},
 			{ default: renderChildren });
 	}
 });

From 8eaf1423c12d47c96f0632bd24120232419288ee Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 2 Feb 2022 00:47:57 +0900
Subject: [PATCH 16/30] :v:

---
 packages/client/src/scripts/scroll.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 16922533d..6d49b1376 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -6,8 +6,7 @@ export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
 	if (
 		// xとyを個別に指定している場合、`hidden scroll`みたいな値になる
 		overflow.endsWith('scroll') ||
-		overflow.endsWith('auto') ||
-		el.scrollHeight > el.clientHeight
+		overflow.endsWith('auto')
 	) {
 		return el;
 	} else {

From b88fc1fb4eee446296c290b9ebea8f0f09f7a0ef Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 2 Feb 2022 14:54:02 +0900
Subject: [PATCH 17/30] Fix scroll bottom detect

---
 .../client/src/components/ui/pagination.vue   | 10 ++++----
 packages/client/src/scripts/scroll.ts         | 23 ++++---------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index b3b1f6f13..bb7c8899f 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, markRaw, nextTick, onActivated, onDeactivated, onMounted, Ref, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
 
@@ -150,16 +150,16 @@ const fetchMore = async (): Promise<void> => {
 		}
 
 		const reverseConcat = _res => {
-			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+			const oldHeight = contentEl.scrollHeight;
 			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
 
 			items.value = items.value.concat(_res);
 
 			return nextTick(() => {
 				if (scrollableElement) {
-					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
+					scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' });
 				} else {
-					window.scrollY = oldScroll + (getBodyScrollHeight() - oldHeight);
+					window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight);
 				}
 
 				return nextTick();
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 6d49b1376..2176b862d 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -43,7 +43,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
 	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		if (isScrollBottom(container)) {
+		if (isBottom(el, 1, container)) {
 			cb();
 			containerOrWindow.removeEventListener('scroll', onScroll);
 		}
@@ -82,22 +82,7 @@ export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBeha
 	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
 }
 
-export function isBottom(el: HTMLElement, asobi = 1) {
-	const container = getScrollContainer(el);
-	return isScrollBottom(container, asobi);
-}
-
-// https://ja.javascript.info/size-and-scroll-window#ref-932
-export function getBodyScrollHeight() {
-	return Math.max(
-		document.body.scrollHeight, document.documentElement.scrollHeight,
-		document.body.offsetHeight, document.documentElement.offsetHeight,
-		document.body.clientHeight, document.documentElement.clientHeight
-	);
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
-export function isScrollBottom(container?: HTMLElement | null, asobi = 1) {
-	if (container) return container.scrollHeight - Math.abs(container.scrollTop) <= container.clientHeight + asobi;
-	return getBodyScrollHeight() - window.scrollY <= window.innerHeight + asobi;
+export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
+	if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
+	return el.scrollHeight <= window.innerHeight + window.scrollY + asobi;
 }

From 99d8172ae52d13a80a86dc8426710dd9a0bbc868 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 2 Feb 2022 21:13:19 +0900
Subject: [PATCH 18/30] wip

---
 .../client/src/components/ui/pagination.vue   |  2 +-
 .../src/pages/messaging/messaging-room.vue    | 12 ++++----
 packages/client/src/scripts/scroll.ts         | 29 ++++++++++---------
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index bb7c8899f..cf18021b5 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -287,7 +287,7 @@ onDeactivated(() => {
 });
 
 function toBottom() {
-	if (scrollableElement) scrollToBottom(scrollableElement);
+	scrollToBottom(contentEl);
 }
 
 onMounted(() => {
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index ee8c67cc0..2329fc48a 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -49,7 +49,7 @@ import XList from '@/components/date-separated-list.vue';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import { isBottom, onScrollBottom, scroll } from '@/scripts/scroll';
+import { isBottom, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
@@ -134,7 +134,7 @@ async function fetch() {
 
 	nextTick(() => {
 		pagingComponent.inited.then(() => {
-			scrollToBottom();
+			thisScrollToBottom();
 		});
 		window.setTimeout(() => {
 			fetching = false
@@ -194,7 +194,7 @@ function onMessage(message) {
 	if (_isBottom) {
 		// Scroll to bottom
 		nextTick(() => {
-			scrollToBottom();
+			thisScrollToBottom();
 		});
 	} else if (message.userId != $i?.id) {
 		// Notify
@@ -234,13 +234,13 @@ function onDeleted(id) {
 	}
 }
 
-function scrollToBottom() {
-	scroll(rootEl, { top: rootEl.scrollHeight || 999999, behavior: "smooth" });
+function thisScrollToBottom() {
+	scrollToBottom($$(rootEl).value, { behavior: "smooth" });
 }
 
 function onIndicatorClick() {
 	showIndicator = false;
-	scrollToBottom();
+	thisScrollToBottom();
 }
 
 function notifyNewMessage() {
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 2176b862d..d6ecb90b9 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -1,5 +1,3 @@
-type ScrollBehavior = 'auto' | 'smooth' | 'instant';
-
 export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
 	if (el == null || el.tagName === 'HTML') return null;
 	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
@@ -19,7 +17,7 @@ export function getScrollPosition(el: HTMLElement | null): number {
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function isTopVisible(el: HTMLElement | null): boolean {
+export function isTopVisible(el: HTMLElement): boolean {
 	const scrollTop = getScrollPosition(el);
 	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
 
@@ -32,10 +30,12 @@ export function onScrollTop(el: HTMLElement, cb) {
 		if (!document.body.contains(el)) return;
 		if (isTopVisible(el)) {
 			cb();
-			container.removeEventListener('scroll', onScroll);
+			removeListener();
 		}
 	};
+	function removeListener() { container.removeEventListener('scroll', onScroll) }
 	container.addEventListener('scroll', onScroll, { passive: true });
+	return removeListener;
 }
 
 export function onScrollBottom(el: HTMLElement, cb) {
@@ -45,17 +45,15 @@ export function onScrollBottom(el: HTMLElement, cb) {
 		if (!document.body.contains(el)) return;
 		if (isBottom(el, 1, container)) {
 			cb();
-			containerOrWindow.removeEventListener('scroll', onScroll);
+			removeListener();
 		}
 	};
+	function removeListener() { containerOrWindow.removeEventListener('scroll', onScroll) }
 	containerOrWindow.addEventListener('scroll', onScroll, { passive: true });
+	return removeListener;
 }
 
-export function scroll(el: HTMLElement, options: {
-	top?: number;
-	left?: number;
-	behavior?: ScrollBehavior;
-}) {
+export function scroll(el: HTMLElement, options: ScrollToOptions | undefined) {
 	const container = getScrollContainer(el);
 	if (container == null) {
 		window.scroll(options);
@@ -75,11 +73,16 @@ export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavio
 
 /**
  * Scroll to Bottom
- * @param el Scroll container element
+ * @param el Content element
  * @param options Scroll options
+ * @param container Scroll container element
  */
-export function scrollToBottom(el: HTMLElement, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, { top: el.scrollHeight, ...options }); // TODO: ちゃんと計算する
+export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el)) {
+	if (container) {
+		container.scroll({ top: el.scrollHeight - container.clientHeight || 0, ...options });
+	} else {
+		window.scroll({ top: el.scrollHeight - window.innerHeight || 0, ...options });
+	}
 }
 
 export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {

From 90c6f15a72cf626305e42c8e4730559d0695f045 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 03:37:05 +0900
Subject: [PATCH 19/30] aaaaaaaaaaa

---
 .../src/components/date-separated-list.vue    |  18 ++-
 .../components/global/sticky-container.vue    |  92 ++++++-------
 packages/client/src/components/notes.vue      |  14 +-
 .../client/src/components/notifications.vue   |   6 +-
 .../client/src/components/ui/pagination.vue   | 126 +++++++++++++-----
 packages/client/src/components/user-list.vue  |   4 +-
 .../client/src/directives/sticky-container.ts |   2 +
 packages/client/src/pages/admin/emojis.vue    |   8 +-
 packages/client/src/pages/favorites.vue       |   4 +-
 packages/client/src/pages/federation.vue      |   4 +-
 packages/client/src/pages/follow-requests.vue |   4 +-
 packages/client/src/pages/gallery/index.vue   |  16 +--
 packages/client/src/pages/gallery/post.vue    |   4 +-
 .../src/pages/messaging/messaging-room.vue    |  12 +-
 .../client/src/pages/settings/security.vue    |   4 +-
 .../client/src/pages/user/follow-list.vue     |   4 +-
 packages/client/src/pages/user/gallery.vue    |   4 +-
 packages/client/src/scripts/scroll.ts         |  55 ++++++--
 .../client/src/types/date-separated-list.ts   |   7 +
 packages/client/src/ui/visitor/a.vue          |   2 -
 20 files changed, 257 insertions(+), 133 deletions(-)
 create mode 100644 packages/client/src/types/date-separated-list.ts

diff --git a/packages/client/src/components/date-separated-list.vue b/packages/client/src/components/date-separated-list.vue
index 4e9c49f57..3333236e7 100644
--- a/packages/client/src/components/date-separated-list.vue
+++ b/packages/client/src/components/date-separated-list.vue
@@ -1,13 +1,14 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
+import { defineComponent, getCurrentInstance, h, markRaw, onMounted, PropType, TransitionGroup } from 'vue';
 import MkAd from '@/components/global/ad.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<MisskeyEntity[]>,
 			required: true,
 		},
 		direction: {
@@ -30,9 +31,15 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		itemsContainer: {
+			type: Object as PropType<HTMLElement | null>,
+			required: false,
+			nullable: true,
+			default: null,
+		},
 	},
 
-	setup(props, { slots, expose }) {
+	setup(props, { slots, expose, emit }) {
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
@@ -90,6 +97,11 @@ export default defineComponent({
 			}
 		});
 
+		onMounted(() => {
+			const el = getCurrentInstance()?.vnode.el;
+			emit('update:itemsContainer', el ? markRaw(el) : null);
+		});
+
 		function onBeforeLeave(el: HTMLElement) {
 			el.style.top = `${el.offsetTop}px`;
 			el.style.left = `${el.offsetLeft}px`;
diff --git a/packages/client/src/components/global/sticky-container.vue b/packages/client/src/components/global/sticky-container.vue
index 89d397f08..ef4712356 100644
--- a/packages/client/src/components/global/sticky-container.vue
+++ b/packages/client/src/components/global/sticky-container.vue
@@ -1,71 +1,63 @@
 <template>
 <div ref="rootEl">
 	<slot name="header"></slot>
-	<div ref="bodyEl">
+	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
 		<slot></slot>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
 
-export default defineComponent({
-	props: {
-		autoSticky: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
+const props = withDefaults(defineProps<{
+	autoSticky?: boolean;
+}>(), {
+	autoSticky: false,
+})
 
-	setup(props, context) {
-		const rootEl = ref<HTMLElement>(null);
-		const bodyEl = ref<HTMLElement>(null);
+const rootEl = $ref<HTMLElement>();
+const bodyEl = $ref<HTMLElement>();
 
-		const calc = () => {
-			const currentStickyTop = getComputedStyle(rootEl.value).getPropertyValue('--stickyTop') || '0px';
+let headerHeight: string | undefined = $ref();
 
-			const header = rootEl.value.children[0];
-			if (header === bodyEl.value) {
-				bodyEl.value.style.setProperty('--stickyTop', currentStickyTop);
-			} else {
-				bodyEl.value.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+const calc = () => {
+	const currentStickyTop = getComputedStyle(rootEl).getPropertyValue('--stickyTop') || '0px';
 
-				if (props.autoSticky) {
-					header.style.setProperty('--stickyTop', currentStickyTop);
-					header.style.position = 'sticky';
-					header.style.top = 'var(--stickyTop)';
-					header.style.zIndex = '1';
-				}
-			}
-		};
+	const header = rootEl.children[0] as HTMLElement;
+	if (header === bodyEl) {
+		bodyEl.style.setProperty('--stickyTop', currentStickyTop);
+	} else {
+		bodyEl.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		headerHeight = header.offsetHeight.toString();
 
-		onMounted(() => {
-			calc();
+		if (props.autoSticky) {
+			header.style.setProperty('--stickyTop', currentStickyTop);
+			header.style.position = 'sticky';
+			header.style.top = 'var(--stickyTop)';
+			header.style.zIndex = '1';
+		}
+	}
+};
 
-			const observer = new MutationObserver(() => {
-				window.setTimeout(() => {
-					calc();
-				}, 100);
-			});
+const observer = new MutationObserver(() => {
+	window.setTimeout(() => {
+		calc();
+	}, 100);
+});
 
-			observer.observe(rootEl.value, {
-				attributes: false,
-				childList: true,
-				subtree: false,
-			});
+onMounted(() => {
+	calc();
 
-			onUnmounted(() => {
-				observer.disconnect();
-			});
-		});
+	observer.observe(rootEl, {
+		attributes: false,
+		childList: true,
+		subtree: false,
+	});
+});
 
-		return {
-			rootEl,
-			bodyEl,
-		};
-	},
+onUnmounted(() => {
+	observer.disconnect();
 });
 </script>
 
diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/notes.vue
index 41bec5a57..c11b1b059 100644
--- a/packages/client/src/components/notes.vue
+++ b/packages/client/src/components/notes.vue
@@ -7,9 +7,19 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notes }">
+	<template #default="{ items: notes, itemsContainerWrapped }">
 		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
+			<XList
+				ref="notes"
+				v-slot="{ item: note }"
+				:items="notes"
+				:direction="pagination.reversed ? 'up' : 'down'"
+				:reversed="pagination.reversed"
+				:no-gap="noGap"
+				:ad="true"
+				v-model:itemsContainer="itemsContainerWrapped.v.value"
+				class="notes"
+			>
 				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
 			</XList>
 		</div>
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index 5a77b5487..10ca6dae3 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -7,8 +7,8 @@
 		</div>
 	</template>
 
-	<template #default="{ items: notifications }">
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
+	<template #default="{ items: notifications, itemsContainerWrapped }">
+		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true" v-model:itemsContainer="itemsContainerWrapped.v.value">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
@@ -29,7 +29,7 @@ import { stream } from '@/stream';
 import { $i } from '@/account';
 
 const props = defineProps<{
-	includeTypes?: PropType<typeof notificationTypes[number][]>;
+	includeTypes?: typeof notificationTypes[number][];
 	unreadOnly?: boolean;
 }>();
 
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index cf18021b5..489ffad10 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -20,7 +20,7 @@
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
-		<slot :items="items" :fetching="fetching || moreFetching"></slot>
+		<slot :items="items" :fetching="fetching || moreFetching" :itemsContainer="itemsContainer" :itemsContainerWrapped="itemsContainerWrapped"></slot>
 		<div v-if="!pagination.reversed" v-show="more" key="_more_" class="cxiknjgy _gap">
 			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ $ts.loadMore }}
@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onDeactivated, onMounted, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -75,16 +76,40 @@ const emit = defineEmits<{
 	(e: 'queue', count: number): void;
 }>();
 
-type Item = { id: string; [another: string]: unknown; };
+let rootEl = $ref<HTMLElement>();
 
-const rootEl = $ref<HTMLElement>();
-const items = ref<Item[]>([]);
-const queue = ref<Item[]>([]);
+/*
+ * itemsContainer: itemsの実体DOMsの親コンテナ(=v-forの直上)のHTMLElement
+ *
+ * IntersectionObserverを使用してスクロールのパフォーマンスを向上させるため必要
+ * この中の最初の要素を評価するので、順番を反転したり変えたりしてはいけない
+ * 
+ * これがundefinedのままの場合はrootElにフォールバックする
+ * つまりrootElがitemsの実体DOMsの親であるとする
+ * 
+ * 自動ロードやストリーミングでの追加がなければあまり関係ない
+ */
+let itemsContainer = $ref<HTMLElement | null>();
+/*
+ * date-separated-listとやり取りするために入れ子にしたオブジェクトを用意する
+ * slotの中身から変数を直接書き込むことができないため
+ */
+const itemsContainerWrapped = { v: $$(itemsContainer) };
+
+/*
+ * 遡り中かどうか
+ * ＝ (itemsContainer || rootEl).children.item(0) が画面内に入ったかどうか
+ */
+let backed = $ref(false);
+
+let scrollRemove: (() => void) | null = $ref(null);
+
+const items = ref<MisskeyEntity[]>([]);
+const queue = ref<MisskeyEntity[]>([]);
 const offset = ref(0);
 const fetching = ref(true);
 const moreFetching = ref(false);
 const more = ref(false);
-const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
@@ -92,10 +117,57 @@ const {
 	enableInfiniteScroll
 } = defaultStore.reactiveState;
 
+let mounted = $ref(false);
+
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
 const scrollableElement = $computed(() => getScrollContainer(contentEl));
 
-const init = async (): Promise<void> => {
+const observer = new IntersectionObserver(entries => {
+	if (entries.some(entry => entry.isIntersecting)) {
+		backed = false;
+	} else {
+		backed = true;
+	}
+});
+
+watch([items, $$(itemsContainer)], observeLatestElement);
+
+function observeLatestElement() {
+	observer.disconnect();
+	nextTick(() => {
+		if (!mounted) return;
+		const latestEl = (itemsContainer || rootEl)?.children.item(0);
+		if (latestEl) observer.observe(latestEl);
+	});
+}
+
+watch($$(backed), () => {
+	if (!backed) {
+		if (!contentEl) return;
+
+		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
+			if (queue.value.length === 0) return;
+			for (const item of queue.value) {
+				prepend(item, true);
+			}
+			queue.value = [];
+		});
+	} else {
+		if (scrollRemove) scrollRemove();
+		scrollRemove = null;
+	}
+});
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	emit('queue', queue.value.length);
+}, { deep: true });
+
+async function init(): Promise<void> {
 	queue.value = [];
 	fetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@@ -133,7 +205,6 @@ const reload = (): Promise<void> => {
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
-	backed.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
@@ -150,16 +221,16 @@ const fetchMore = async (): Promise<void> => {
 		}
 
 		const reverseConcat = _res => {
-			const oldHeight = contentEl.scrollHeight;
+			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
 			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
 
 			items.value = items.value.concat(_res);
 
 			return nextTick(() => {
 				if (scrollableElement) {
-					scroll(scrollableElement, { top: oldScroll + (contentEl.scrollHeight - oldHeight), behavior: 'instant' });
+					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
 				} else {
-					window.scrollY = oldScroll + (contentEl.scrollHeight - oldHeight);
+					window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' });
 				}
 
 				return nextTick();
@@ -225,7 +296,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 	});
 };
 
-const prepend = (item: Item, force = false): void => {
+const prepend = (item: MisskeyEntity, force = false): void => {
 	// 初回表示時はunshiftだけでOK
 	if (!rootEl) {
 		items.value.unshift(item);
@@ -249,33 +320,18 @@ const prepend = (item: Item, force = false): void => {
 		}
 	} else {
 		queue.value.push(item);
-		(props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
-			for (const item of queue.value) {
-				prepend(item, true);
-			}
-			queue.value = [];
-		});
 	}
 };
 
-const append = (item: Item): void => {
+const append = (item: MisskeyEntity): void => {
 	items.value.push(item);
 };
 
-const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
+const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
 	const i = items.value.findIndex(item => item.id === id);
 	items.value[i] = replacer(items.value[i]);
 };
 
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
-}
-
-watch(queue, (a, b) => {
-	if (a.length === 0 && b.length === 0) return;
-	emit('queue', queue.value.length);
-}, { deep: true });
-
 const inited = init();
 
 onActivated(() => {
@@ -291,6 +347,8 @@ function toBottom() {
 }
 
 onMounted(() => {
+	mounted = true;
+
 	inited.then(() => {
 		if (props.pagination.reversed) {
 			nextTick(() => {
@@ -304,7 +362,11 @@ onMounted(() => {
 			});
 		}
 	});
-})
+});
+
+onBeforeUnmount(() => {
+	observer.disconnect();
+});
 
 defineExpose({
 	items,
diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/user-list.vue
index 3e273721c..a9100c324 100644
--- a/packages/client/src/components/user-list.vue
+++ b/packages/client/src/components/user-list.vue
@@ -7,8 +7,8 @@
 		</div>
 	</template>
 
-	<template #default="{ items: users }">
-		<div class="efvhhmdq">
+	<template #default="{ items: users, itemsContainer }">
+		<div class="efvhhmdq" ref="itemsContainer">
 			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
 		</div>
 	</template>
diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts
index 9610eba4d..3cf813054 100644
--- a/packages/client/src/directives/sticky-container.ts
+++ b/packages/client/src/directives/sticky-container.ts
@@ -5,8 +5,10 @@ export default {
 		//const query = binding.value;
 
 		const header = src.children[0];
+		const body = src.children[1];
 		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
 		src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
+		if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
 		header.style.setProperty('--stickyTop', currentStickyTop);
 		header.style.position = 'sticky';
 		header.style.top = 'var(--stickyTop)';
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index a080ee9c2..1c7104663 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -19,8 +19,8 @@
 			</div>
 			<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{items}">
-					<div class="ldhfsamy">
+				<template v-slot="{items, itemsContainer}">
+					<div class="ldhfsamy" ref="itemsContainer">
 						<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
 							<img :src="emoji.url" class="img" :alt="emoji.name"/>
 							<div class="body">
@@ -45,8 +45,8 @@
 			</FormSplit>
 			<MkPagination :pagination="remotePagination">
 				<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
-				<template v-slot="{items}">
-					<div class="ldhfsamy">
+				<template v-slot="{items, itemsContainer}">
+					<div class="ldhfsamy" ref="itemsContainer">
 						<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
 							<img :src="emoji.url" class="img" :alt="emoji.name"/>
 							<div class="body">
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index b4f6ff35b..23196fd8b 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -8,8 +8,8 @@
 			</div>
 		</template>
 
-		<template #default="{ items }">
-			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false">
+		<template #default="{ items, itemsContainerWrapped }">
+			<XList v-slot="{ item }" :items="items" :direction="'down'" :no-gap="false" :ad="false" v-model:itemsContainer="itemsContainerWrapped.v.value">
 				<XNote :key="item.id" :note="item.note" :class="$style.note"/>
 			</XList>
 		</template>
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 3c5050cdb..5d2c94852 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -41,8 +41,8 @@
 			</FormSplit>
 		</div>
 
-		<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-			<div class="dqokceoi">
+		<MkPagination v-slot="{items, itemsContainer}" ref="instances" :key="host + state" :pagination="pagination">
+			<div class="dqokceoi" ref="itemsContainer">
 				<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
 					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
 					<div class="table">
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 6adc1a404..39fe1b374 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -7,8 +7,8 @@
 				<div>{{ $ts.noFollowRequests }}</div>
 			</div>
 		</template>
-		<template v-slot="{items}">
-			<div class="mk-follow-requests">
+		<template v-slot="{items, itemsContainer}">
+			<div class="mk-follow-requests" ref="itemsContainer">
 				<div v-for="req in items" :key="req.id" class="user _panel">
 					<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 					<div class="body">
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index a19d69d5c..9be5e4480 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -9,32 +9,32 @@
 	<div v-if="tab === 'explore'">
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-clock"></i>{{ $ts.recentPosts }}</template>
-			<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
-				<div class="vfpdbgtk">
+			<MkPagination v-slot="{items, itemsContainer}" :pagination="recentPostsPagination" :disable-auto-load="true">
+				<div class="vfpdbgtk" ref="itemsContainer">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
 			</MkPagination>
 		</MkFolder>
 		<MkFolder class="_gap">
 			<template #header><i class="fas fa-fire-alt"></i>{{ $ts.popularPosts }}</template>
-			<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
-				<div class="vfpdbgtk">
+			<MkPagination v-slot="{items, itemsContainer}" :pagination="popularPostsPagination" :disable-auto-load="true">
+				<div class="vfpdbgtk" ref="itemsContainer">
 					<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 				</div>
 			</MkPagination>
 		</MkFolder>
 	</div>
 	<div v-else-if="tab === 'liked'">
-		<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
-			<div class="vfpdbgtk">
+		<MkPagination v-slot="{items, itemsContainer}" :pagination="likedPostsPagination">
+			<div class="vfpdbgtk" ref="itemsContainer">
 				<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 			</div>
 		</MkPagination>
 	</div>
 	<div v-else-if="tab === 'my'">
 		<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ $ts.postToGallery }}</MkA>
-		<MkPagination v-slot="{items}" :pagination="myPostsPagination">
-			<div class="vfpdbgtk">
+		<MkPagination v-slot="{items, itemsContainer}" :pagination="myPostsPagination">
+			<div class="vfpdbgtk" ref="itemsContainer">
 				<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 			</div>
 		</MkPagination>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 1755c2328..bb92c9fd5 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -36,8 +36,8 @@
 			<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 			<MkContainer :max-height="300" :foldable="true" class="other">
 				<template #header><i class="fas fa-clock"></i> {{ $ts.recentPosts }}</template>
-				<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-					<div class="sdrarzaf">
+				<MkPagination v-slot="{items, itemsContainer}" :pagination="otherPostsPagination">
+					<div class="sdrarzaf" ref="itemsContainer">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 					</div>
 				</MkPagination>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 2329fc48a..88ea4d475 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -14,8 +14,16 @@
 					</div>
 				</template>
 
-				<template #default="{ items: messages, fetching }">
-					<XList v-if="messages.length > 0" v-slot="{ item: message }" :class="{ messages: true, 'deny-move-transition': fetching }" :items="messages" direction="up" reversed>
+				<template #default="{ items: messages, fetching, itemsContainerWrapped }">
+					<XList
+						v-if="messages.length > 0"
+						v-slot="{ item: message }"
+						:class="{ messages: true, 'deny-move-transition': fetching }"
+						:items="messages"
+						v-model:itemsContainer="itemsContainerWrapped.v.value"
+						direction="up"
+						reversed
+					>
 						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
 					</XList>
 				</template>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 6fb3f1c41..0a043f886 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -13,8 +13,8 @@
 	<FormSection>
 		<template #label>{{ $ts.signinHistory }}</template>
 		<MkPagination :pagination="pagination">
-			<template v-slot="{items}">
-				<div>
+			<template v-slot="{items, itemsContainer}">
+				<div ref="itemsContainer">
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
 							<i v-if="item.success" class="fas fa-check icon succ"></i>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index 98a1fc0f8..b3cc76b55 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
-		<div class="users _isolated">
+	<MkPagination v-slot="{items, itemsContainer}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
+		<div class="users _isolated" ref="itemsContainer">
 			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
 		</div>
 	</MkPagination>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 07dda4a29..286afe44d 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
+	<MkPagination v-slot="{items, itemsContainer}" :pagination="pagination">
+		<div class="jrnovfpt" ref="itemsContainer">
 			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 		</div>
 	</MkPagination>
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index d6ecb90b9..51c2973ba 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -12,20 +12,28 @@ export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
 	}
 }
 
+export function getStickyTop(el: HTMLElement, container: HTMLElement | null = null, top: number = 0) {
+	if (!el.parentElement) return top;
+	const data = el.dataset.stickyContainerHeaderHeight;
+	const newTop = data ? Number(data) + top : top;
+	if (el === container) return newTop;
+	return getStickyTop(el.parentElement, container, newTop);
+}
+
 export function getScrollPosition(el: HTMLElement | null): number {
 	const container = getScrollContainer(el);
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function isTopVisible(el: HTMLElement): boolean {
-	const scrollTop = getScrollPosition(el);
-	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
+export function onScrollTop(el: HTMLElement, cb: Function) {
+	// とりあえず評価してみる
+	if (isTopVisible(el)) {
+		cb();
+		return null;
+	}
 
-	return scrollTop <= topPosition;
-}
-
-export function onScrollTop(el: HTMLElement, cb) {
 	const container = getScrollContainer(el) || window;
+
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
 		if (isTopVisible(el)) {
@@ -33,13 +41,21 @@ export function onScrollTop(el: HTMLElement, cb) {
 			removeListener();
 		}
 	};
+
 	function removeListener() { container.removeEventListener('scroll', onScroll) }
 	container.addEventListener('scroll', onScroll, { passive: true });
 	return removeListener;
 }
 
-export function onScrollBottom(el: HTMLElement, cb) {
+export function onScrollBottom(el: HTMLElement, cb: Function) {
 	const container = getScrollContainer(el);
+
+	// とりあえず評価してみる
+	if (isBottom(el, 1, container)) {
+		cb();
+		return null;
+	}
+
 	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
@@ -48,6 +64,7 @@ export function onScrollBottom(el: HTMLElement, cb) {
 			removeListener();
 		}
 	};
+
 	function removeListener() { containerOrWindow.removeEventListener('scroll', onScroll) }
 	containerOrWindow.addEventListener('scroll', onScroll, { passive: true });
 	return removeListener;
@@ -76,16 +93,32 @@ export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavio
  * @param el Content element
  * @param options Scroll options
  * @param container Scroll container element
+ * @param addSticky To add sticky-top or not
  */
-export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el)) {
+export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el), addSticky: boolean = true) {
+	const addStickyTop = addSticky ? getStickyTop(el, container) : 0;
 	if (container) {
-		container.scroll({ top: el.scrollHeight - container.clientHeight || 0, ...options });
+		container.scroll({ top: el.scrollHeight - container.clientHeight + addStickyTop || 0, ...options });
 	} else {
-		window.scroll({ top: el.scrollHeight - window.innerHeight || 0, ...options });
+		window.scroll({ top: el.scrollHeight - window.innerHeight + addStickyTop || 0, ...options });
 	}
 }
 
+export function isTopVisible(el: HTMLElement, asobi: number = 1): boolean {
+	const scrollTop = getScrollPosition(el);
+	return scrollTop <= asobi;
+}
+
 export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
 	if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
 	return el.scrollHeight <= window.innerHeight + window.scrollY + asobi;
 }
+
+// https://ja.javascript.info/size-and-scroll-window#ref-932
+export function getBodyScrollHeight() {
+	return Math.max(
+		document.body.scrollHeight, document.documentElement.scrollHeight,
+		document.body.offsetHeight, document.documentElement.offsetHeight,
+		document.body.clientHeight, document.documentElement.clientHeight
+	);
+}
diff --git a/packages/client/src/types/date-separated-list.ts b/packages/client/src/types/date-separated-list.ts
new file mode 100644
index 000000000..a69bc39d5
--- /dev/null
+++ b/packages/client/src/types/date-separated-list.ts
@@ -0,0 +1,7 @@
+export type MisskeyEntity = {
+	id: string;
+	createdAt: string;
+	_shouldInsertAd_?:
+	boolean;
+	[x: string]: any;
+};
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index af77f9e97..f73caf7b0 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -44,7 +44,6 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import { host, instanceName } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import MkPagination from '@/components/ui/pagination.vue';
 import MkButton from '@/components/ui/button.vue';
 import XHeader from './header.vue';
 import { ColdDeviceStorage } from '@/store';
@@ -55,7 +54,6 @@ const DESKTOP_THRESHOLD = 1100;
 export default defineComponent({
 	components: {
 		XHeader,
-		MkPagination,
 		MkButton,
 	},
 

From ba21a298ff457a242d5f4db8b8710b418c3fb549 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 03:40:12 +0900
Subject: [PATCH 20/30] rename

---
 packages/client/src/scripts/scroll.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 51c2973ba..3ddcdf64a 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -51,7 +51,7 @@ export function onScrollBottom(el: HTMLElement, cb: Function) {
 	const container = getScrollContainer(el);
 
 	// とりあえず評価してみる
-	if (isBottom(el, 1, container)) {
+	if (isBottomVisible(el, 1, container)) {
 		cb();
 		return null;
 	}
@@ -59,7 +59,7 @@ export function onScrollBottom(el: HTMLElement, cb: Function) {
 	const containerOrWindow = container || window;
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		if (isBottom(el, 1, container)) {
+		if (isBottomVisible(el, 1, container)) {
 			cb();
 			removeListener();
 		}
@@ -109,7 +109,7 @@ export function isTopVisible(el: HTMLElement, asobi: number = 1): boolean {
 	return scrollTop <= asobi;
 }
 
-export function isBottom(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
+export function isBottomVisible(el: HTMLElement, asobi = 1, container = getScrollContainer(el)) {
 	if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + asobi;
 	return el.scrollHeight <= window.innerHeight + window.scrollY + asobi;
 }

From 08ae09a871936976918e270edfb3ee4e44350baf Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 03:58:31 +0900
Subject: [PATCH 21/30] fix

---
 packages/client/src/components/ui/pagination.vue       | 4 ++--
 packages/client/src/pages/messaging/messaging-room.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 489ffad10..6b945c78e 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -35,7 +35,7 @@
 import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottom } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
 import { MisskeyEntity } from '@/types/date-separated-list';
@@ -303,7 +303,7 @@ const prepend = (item: MisskeyEntity, force = false): void => {
 		return;
 	}
 
-	const isTop = isBackTop.value || (props.pagination.reversed ? isBottom : isTopVisible)(contentEl);
+	const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl);
 
 	if (isTop || force) {
 		// Prepend the item
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 88ea4d475..78f6daaa5 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -57,7 +57,7 @@ import XList from '@/components/date-separated-list.vue';
 import MkPagination, { Paging } from '@/components/ui/pagination.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import { isBottom, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
+import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
@@ -190,7 +190,7 @@ function onDrop(e: DragEvent): void {
 function onMessage(message) {
 	sound.play('chat');
 
-	const _isBottom = isBottom(rootEl, 64);
+	const _isBottom = isBottomVisible(rootEl, 64);
 
 	pagingComponent.prepend(message);
 	if (message.userId != $i?.id && !document.hidden) {

From de90b2556196e7b9c8f351ef0f6662680ebd3592 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 04:05:21 +0900
Subject: [PATCH 22/30] fix?

---
 packages/client/src/components/ui/pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 6b945c78e..cd5b55b1c 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -130,7 +130,7 @@ const observer = new IntersectionObserver(entries => {
 	}
 });
 
-watch([items, $$(itemsContainer)], observeLatestElement);
+watch([items, $$(itemsContainer), $$(rootEl)], observeLatestElement);
 
 function observeLatestElement() {
 	observer.disconnect();

From a2f16c1364ad9531a68fef0a4efa42d4d48b1930 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 04:28:04 +0900
Subject: [PATCH 23/30] :v:

---
 packages/client/src/components/ui/pagination.vue | 9 +++++----
 packages/client/src/scripts/scroll.ts            | 8 ++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index cd5b55b1c..fc4affd61 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch, watchEffect } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
@@ -130,7 +130,8 @@ const observer = new IntersectionObserver(entries => {
 	}
 });
 
-watch([items, $$(itemsContainer), $$(rootEl)], observeLatestElement);
+watch([$$(itemsContainer), $$(rootEl)], observeLatestElement);
+watch(items, observeLatestElement, { deep: true });
 
 function observeLatestElement() {
 	observer.disconnect();
@@ -141,7 +142,7 @@ function observeLatestElement() {
 	});
 }
 
-watch($$(backed), () => {
+watch([$$(backed), $$(contentEl)], () => {
 	if (!backed) {
 		if (!contentEl) return;
 
@@ -151,7 +152,7 @@ watch($$(backed), () => {
 				prepend(item, true);
 			}
 			queue.value = [];
-		});
+		}, 16);
 	} else {
 		if (scrollRemove) scrollRemove();
 		scrollRemove = null;
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 3ddcdf64a..6460a4689 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -25,7 +25,7 @@ export function getScrollPosition(el: HTMLElement | null): number {
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function onScrollTop(el: HTMLElement, cb: Function) {
+export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1) {
 	// とりあえず評価してみる
 	if (isTopVisible(el)) {
 		cb();
@@ -36,7 +36,7 @@ export function onScrollTop(el: HTMLElement, cb: Function) {
 
 	const onScroll = ev => {
 		if (!document.body.contains(el)) return;
-		if (isTopVisible(el)) {
+		if (isTopVisible(el, asobi)) {
 			cb();
 			removeListener();
 		}
@@ -47,11 +47,11 @@ export function onScrollTop(el: HTMLElement, cb: Function) {
 	return removeListener;
 }
 
-export function onScrollBottom(el: HTMLElement, cb: Function) {
+export function onScrollBottom(el: HTMLElement, cb: Function, asobi: number = 1) {
 	const container = getScrollContainer(el);
 
 	// とりあえず評価してみる
-	if (isBottomVisible(el, 1, container)) {
+	if (isBottomVisible(el, asobi, container)) {
 		cb();
 		return null;
 	}

From a7dd3e9324e1c55f9949d477945d7ba8dc4fd1e9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 04:55:15 +0900
Subject: [PATCH 24/30] :v:

---
 packages/client/src/scripts/scroll.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 6460a4689..11a3fa440 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -90,17 +90,26 @@ export function scrollToTop(el: HTMLElement, options: { behavior?: ScrollBehavio
 
 /**
  * Scroll to Bottom
+ * 通常のページで ウィジェット高さ > コンテンツ高さ の場合にうまく動くように
+ * 若干処理が複雑になっている
  * @param el Content element
  * @param options Scroll options
  * @param container Scroll container element
- * @param addSticky To add sticky-top or not
+ * @param sticky To add sticky-top
+ * @param mobileButtons To add mobile buttons
  */
-export function scrollToBottom(el: HTMLElement, options: ScrollToOptions = {}, container = getScrollContainer(el), addSticky: boolean = true) {
-	const addStickyTop = addSticky ? getStickyTop(el, container) : 0;
+export function scrollToBottom(
+	el: HTMLElement,
+	options: ScrollToOptions = {},
+	container = getScrollContainer(el),
+) {
 	if (container) {
-		container.scroll({ top: el.scrollHeight - container.clientHeight + addStickyTop || 0, ...options });
+		container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options });
 	} else {
-		window.scroll({ top: el.scrollHeight - window.innerHeight + addStickyTop || 0, ...options });
+		window.scroll({
+			top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= 500 ? 96 : 0)) || 0,
+			...options
+		});
 	}
 }
 

From 37f78378d571ae9252412e46104dffccacb24181 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 04:57:13 +0900
Subject: [PATCH 25/30] clean up

---
 packages/client/src/components/ui/pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index fc4affd61..e98fc9c3c 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch, watchEffect } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';

From 1056380733b55a5123442c07a6f983a93f37d0cd Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 05:17:06 +0900
Subject: [PATCH 26/30] clena up

---
 packages/client/src/components/ui/pagination.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index e98fc9c3c..469228e91 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -117,8 +117,6 @@ const {
 	enableInfiniteScroll
 } = defaultStore.reactiveState;
 
-let mounted = $ref(false);
-
 const contentEl = $computed(() => props.pagination.pageEl || rootEl);
 const scrollableElement = $computed(() => getScrollContainer(contentEl));
 
@@ -136,7 +134,6 @@ watch(items, observeLatestElement, { deep: true });
 function observeLatestElement() {
 	observer.disconnect();
 	nextTick(() => {
-		if (!mounted) return;
 		const latestEl = (itemsContainer || rootEl)?.children.item(0);
 		if (latestEl) observer.observe(latestEl);
 	});
@@ -348,8 +345,6 @@ function toBottom() {
 }
 
 onMounted(() => {
-	mounted = true;
-
 	inited.then(() => {
 		if (props.pagination.reversed) {
 			nextTick(() => {

From ddbf8c78734ac18c23341246bba2910780a8cf32 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 3 Feb 2022 22:34:58 +0900
Subject: [PATCH 27/30] refactor

---
 .../client/src/components/ui/pagination.vue   | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 469228e91..2abcd05b9 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -143,13 +143,7 @@ watch([$$(backed), $$(contentEl)], () => {
 	if (!backed) {
 		if (!contentEl) return;
 
-		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, () => {
-			if (queue.value.length === 0) return;
-			for (const item of queue.value) {
-				prepend(item, true);
-			}
-			queue.value = [];
-		}, 16);
+		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, 16);
 	} else {
 		if (scrollRemove) scrollRemove();
 		scrollRemove = null;
@@ -294,7 +288,7 @@ const fetchMoreAhead = async (): Promise<void> => {
 	});
 };
 
-const prepend = (item: MisskeyEntity, force = false): void => {
+const prepend = (item: MisskeyEntity): void => {
 	// 初回表示時はunshiftだけでOK
 	if (!rootEl) {
 		items.value.unshift(item);
@@ -303,25 +297,31 @@ const prepend = (item: MisskeyEntity, force = false): void => {
 
 	const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl);
 
-	if (isTop || force) {
-		// Prepend the item
-		items.value.unshift(item);
-
-		// オーバーフローしたら古いアイテムは捨てる
-		if (items.value.length >= props.displayLimit) {
-			// このやり方だとVue 3.2以降アニメーションが動かなくなる
-			//this.items = items.value.slice(0, props.displayLimit);
-			while (items.value.length >= props.displayLimit) {
-				items.value.pop();
-			}
-			more.value = true;
-		}
-	} else {
-		queue.value.push(item);
-	}
+	if (isTop) unshiftItems([item]);
+	else prependQueue(item);
 };
 
-const append = (item: MisskeyEntity): void => {
+function unshiftItems(newItems: MisskeyEntity[]) {
+	const length = newItems.length + items.value.length;
+	items.value = [ ...newItems, ...items.value ].slice(0, props.displayLimit);
+
+	if (length >= props.displayLimit) more.value = true;
+}
+
+function executeQueue() {
+	if (queue.value.length === 0) return;
+	unshiftItems(queue.value);
+	queue.value = [];
+}
+
+function prependQueue(newItem: MisskeyEntity) {
+	queue.value.unshift(newItem);
+	if (queue.value.length >= props.displayLimit) {
+		queue.value.pop();
+	}
+}
+
+const appendItem = (item: MisskeyEntity): void => {
 	items.value.push(item);
 };
 
@@ -372,7 +372,7 @@ defineExpose({
 	reload,
 	fetchMoreAhead,
 	prepend,
-	append,
+	append: appendItem,
 	updateItem,
 });
 </script>

From 7a4d61769946578bb2381e4f3876296a9ddd7974 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 4 Feb 2022 01:42:05 +0900
Subject: [PATCH 28/30] scroll event once or not

---
 packages/client/src/pages/messaging/messaging-room.vue | 6 +++++-
 packages/client/src/scripts/scroll.ts                  | 8 ++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 78f6daaa5..48401db79 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -251,11 +251,14 @@ function onIndicatorClick() {
 	thisScrollToBottom();
 }
 
+let scrollRemove: (() => void) | null = $ref(null);
+
 function notifyNewMessage() {
 	showIndicator = true;
 
-	onScrollBottom(rootEl, () => {
+	scrollRemove = onScrollBottom(rootEl, () => {
 		showIndicator = false;
+		scrollRemove = null;
 	});
 }
 
@@ -277,6 +280,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	connection?.dispose();
 	document.removeEventListener('visibilitychange', onVisibilitychange);
+	if (scrollRemove) scrollRemove();
 });
 
 defineExpose({
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index 11a3fa440..b8dadc35a 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -25,7 +25,7 @@ export function getScrollPosition(el: HTMLElement | null): number {
 	return container == null ? window.scrollY : container.scrollTop;
 }
 
-export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1) {
+export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1, once: boolean = false) {
 	// とりあえず評価してみる
 	if (isTopVisible(el)) {
 		cb();
@@ -38,7 +38,7 @@ export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1) {
 		if (!document.body.contains(el)) return;
 		if (isTopVisible(el, asobi)) {
 			cb();
-			removeListener();
+			if (once) removeListener();
 		}
 	};
 
@@ -47,7 +47,7 @@ export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1) {
 	return removeListener;
 }
 
-export function onScrollBottom(el: HTMLElement, cb: Function, asobi: number = 1) {
+export function onScrollBottom(el: HTMLElement, cb: Function, asobi: number = 1, once: boolean = false) {
 	const container = getScrollContainer(el);
 
 	// とりあえず評価してみる
@@ -61,7 +61,7 @@ export function onScrollBottom(el: HTMLElement, cb: Function, asobi: number = 1)
 		if (!document.body.contains(el)) return;
 		if (isBottomVisible(el, 1, container)) {
 			cb();
-			removeListener();
+			if (once) removeListener();
 		}
 	};
 

From 8913c751f002d176e66e3ae362c4e6c45f02b3ab Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 5 Feb 2022 01:37:09 +0900
Subject: [PATCH 29/30] fix

---
 packages/client/src/components/ui/pagination.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 2abcd05b9..a04960093 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -41,6 +41,7 @@ import { defaultStore } from '@/store';
 import { MisskeyEntity } from '@/types/date-separated-list';
 
 const SECOND_FETCH_LIMIT = 30;
+const ASOBI = 16;
 
 export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
 	endpoint: E;
@@ -143,7 +144,7 @@ watch([$$(backed), $$(contentEl)], () => {
 	if (!backed) {
 		if (!contentEl) return;
 
-		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, 16);
+		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, ASOBI);
 	} else {
 		if (scrollRemove) scrollRemove();
 		scrollRemove = null;
@@ -295,7 +296,7 @@ const prepend = (item: MisskeyEntity): void => {
 		return;
 	}
 
-	const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl);
+	const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl, ASOBI);
 
 	if (isTop) unshiftItems([item]);
 	else prependQueue(item);

From af2603ef8a5b962ebe266943a1bcc725effda4ff Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 5 Feb 2022 02:50:53 +0900
Subject: [PATCH 30/30] fix once

---
 packages/client/src/scripts/scroll.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
index b8dadc35a..d65a830d7 100644
--- a/packages/client/src/scripts/scroll.ts
+++ b/packages/client/src/scripts/scroll.ts
@@ -29,7 +29,7 @@ export function onScrollTop(el: HTMLElement, cb: Function, asobi: number = 1, on
 	// とりあえず評価してみる
 	if (isTopVisible(el)) {
 		cb();
-		return null;
+		if (once) return null;
 	}
 
 	const container = getScrollContainer(el) || window;
@@ -53,7 +53,7 @@ export function onScrollBottom(el: HTMLElement, cb: Function, asobi: number = 1,
 	// とりあえず評価してみる
 	if (isBottomVisible(el, asobi, container)) {
 		cb();
-		return null;
+		if (once) return null;
 	}
 
 	const containerOrWindow = container || window;