wip

* fix(frontend): attempt to fix lint

* fix lint

CHANGELOG.md

@@ -33,7 +33,7 @@
 	(Cherry-picked from https://github.com/yojo-art/cherrypick/pull/568 and https://github.com/team-shahu/misskey/pull/38)
 - Enhance: ユーザーごとにノートの表示が高速化するように
 - Fix: システムアカウントの名前がサーバー名と同期されない問題を修正
-- Fix: 大文字を含むユーザの URL で紹介された場合に 404 エラーを返す問題 #15813
+- Fix: 大文字を含むユーザの URL で照会された場合に 404 エラーを返す問題 #15813
 - Fix: リードレプリカ設定時にレコードの追加・更新・削除を伴うクエリを発行した際はmasterノードで実行されるように調整( #10897 )
 - Fix: ファイルアップロード時の挙動を一部調整(#15895)
 

locales/index.d.ts

@@ -5409,6 +5409,14 @@ export interface Locale extends ILocale {
      * リアルタイムモード
      */
     "realtimeMode": string;
+    /**
+     * オンにする
+     */
+    "turnItOn": string;
+    /**
+     * オフにする
+     */
+    "turnItOff": string;
     "_chat": {
         /**
          * まだメッセージはありません

locales/ja-JP.yml

@@ -1347,6 +1347,8 @@ goToDeck: "デッキへ戻る"
 federationJobs: "連合ジョブ"
 driveAboutTip: "ドライブでは、過去にアップロードしたファイルの一覧が表示されます。<br>\nノートに添付する際に再利用したり、あとで投稿するファイルを予めアップロードしておくこともできます。<br>\n<b>ファイルを削除すると、今までそのファイルを使用した全ての場所(ノート、ページ、アバター、バナー等)からも見えなくなるので注意してください。</b><br>\nフォルダを作って整理することもできます。"
 realtimeMode: "リアルタイムモード"
+turnItOn: "オンにする"
+turnItOff: "オフにする"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"

packages/frontend-shared/js/collapsed.ts

@@ -6,17 +6,30 @@
 import * as Misskey from 'misskey-js';
 
 export function shouldCollapsed(note: Misskey.entities.Note, urls: string[]): boolean {
-	const collapsed = note.cw == null && (
-		(note.text != null && (
-			(note.text.includes('$[x2')) ||
-			(note.text.includes('$[x3')) ||
-			(note.text.includes('$[x4')) ||
-			(note.text.includes('$[scale')) ||
-			(note.text.split('\n').length > 9) ||
-			(note.text.length > 500) ||
-			(urls.length >= 4)
-		)) || (note.files != null && note.files.length >= 5)
-	);
-
-	return collapsed;
+	if (note.cw != null) {
+		return false;
+	}
+
+	if (note.text != null) {
+		if (
+			note.text.includes('$[x2') ||
+			note.text.includes('$[x3') ||
+			note.text.includes('$[x4') ||
+			note.text.includes('$[scale') ||
+			note.text.split('\n').length > 9 ||
+			note.text.length > 500
+		) {
+			return true;
+		}
+	}
+
+	if (urls.length >= 4) {
+		return true;
+	}
+
+	if (note.files != null && note.files.length >= 5) {
+		return true;
+	}
+
+	return false;
 }

packages/frontend-shared/js/url.ts

@@ -39,7 +39,7 @@ export function maybeMakeRelative(urlStr: string, baseStr: string): string {
 			return urlObj.pathname + urlObj.search + urlObj.hash;
 		}
 		return urlStr;
-	} catch (e) {
+	} catch {
 		return '';
 	}
 }

packages/frontend/src/boot/main-boot.ts

@@ -387,12 +387,6 @@ export async function mainBoot() {
 
 			// 個人宛てお知らせが発行されたとき
 			main.on('announcementCreated', onAnnouncementCreated);
-
-			// トークンが再生成されたとき
-			// このままではMisskeyが利用できないので強制的にサインアウトさせる
-			main.on('myTokenRegenerated', () => {
-				signout();
-			});
 		}
 	}
 

packages/frontend/src/components/MkNote.vue

@@ -210,7 +210,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
-import { useNoteCapture } from '@/use/use-note-capture.js';
+import { noteEvents, useNoteCapture } from '@/use/use-note-capture.js';
 import { deepClone } from '@/utility/clone.js';
 import { useTooltip } from '@/use/use-tooltip.js';
 import { claimAchievement } from '@/utility/achievements.js';
@@ -382,6 +382,11 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.value.id,
 		reaction: reaction,
+	}).then(() => {
+		noteEvents.emit(`reacted:${appearNote.value.id}`, {
+			userId: $i!.id,
+			reaction: reaction,
+		});
 	});
 });
 
@@ -480,6 +485,11 @@ function react(): void {
 		misskeyApi('notes/reactions/create', {
 			noteId: appearNote.value.id,
 			reaction: '❤️',
+		}).then(() => {
+			noteEvents.emit(`reacted:${appearNote.value.id}`, {
+				userId: $i!.id,
+				reaction: '❤️',
+			});
 		});
 		const el = reactButton.value;
 		if (el && prefer.s.animation) {
@@ -513,7 +523,10 @@ function react(): void {
 				noteId: appearNote.value.id,
 				reaction: reaction,
 			}).then(() => {
-				// 別にthenを待たなくても良いかも(楽観的更新)
+				noteEvents.emit(`reacted:${appearNote.value.id}`, {
+					userId: $i!.id,
+					reaction: reaction,
+				});
 			});
 
 			if (appearNote.value.text && appearNote.value.text.length > 100 && (Date.now() - new Date(appearNote.value.createdAt).getTime() < 1000 * 3)) {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -242,7 +242,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
-import { useNoteCapture } from '@/use/use-note-capture.js';
+import { noteEvents, useNoteCapture } from '@/use/use-note-capture.js';
 import { deepClone } from '@/utility/clone.js';
 import { useTooltip } from '@/use/use-tooltip.js';
 import { claimAchievement } from '@/utility/achievements.js';
@@ -343,6 +343,11 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	misskeyApi('notes/reactions/create', {
 		noteId: appearNote.value.id,
 		reaction: reaction,
+	}).then(() => {
+		noteEvents.emit(`reacted:${appearNote.value.id}`, {
+			userId: $i!.id,
+			reaction: reaction,
+		});
 	});
 });
 
@@ -445,6 +450,11 @@ function react(): void {
 		misskeyApi('notes/reactions/create', {
 			noteId: appearNote.value.id,
 			reaction: '❤️',
+		}).then(() => {
+			noteEvents.emit(`reacted:${appearNote.value.id}`, {
+				userId: $i!.id,
+				reaction: '❤️',
+			});
 		});
 		const el = reactButton.value;
 		if (el && prefer.s.animation) {
@@ -472,6 +482,11 @@ function react(): void {
 			misskeyApi('notes/reactions/create', {
 				noteId: appearNote.value.id,
 				reaction: reaction,
+			}).then(() => {
+				noteEvents.emit(`reacted:${appearNote.value.id}`, {
+					userId: $i!.id,
+					reaction: reaction,
+				});
 			});
 			if (appearNote.value.text && appearNote.value.text.length > 100 && (Date.now() - new Date(appearNote.value.createdAt).getTime() < 1000 * 3)) {
 				claimAchievement('reactWithoutRead');

packages/frontend/src/components/MkNotifications.vue

@@ -5,15 +5,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkPullToRefresh :refresher="() => reload()">
-	<MkPagination ref="pagingComponent" :pagination="pagination">
-		<template #empty>
+	<MkLoading v-if="paginator.fetching.value"/>
+
+	<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
+
+	<div v-else-if="paginator.items.value.size === 0" key="_empty_">
+		<slot name="empty">
 			<div class="_fullinfo">
 				<img :src="infoImageUrl" draggable="false"/>
 				<div>{{ i18n.ts.noNotifications }}</div>
 			</div>
-		</template>
+		</slot>
+	</div>
 
-		<template #default="{ items: notifications }">
+	<div v-else ref="rootEl">
 		<component
 			:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
 			:enterActiveClass="$style.transition_x_enterActive"
@@ -23,21 +28,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:moveClass=" $style.transition_x_move"
 			tag="div"
 		>
-				<template v-for="(notification, i) in notifications" :key="notification.id">
+			<template v-for="(notification, i) in Array.from(paginator.items.value.values())" :key="notification.id">
 				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
 				<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
 			</template>
 		</component>
-		</template>
-	</MkPagination>
+		<button v-show="paginator.canFetchMore.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.moreFetching.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
+			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
+			<MkLoading v-else/>
+		</button>
+	</div>
 </MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
 import { onUnmounted, onMounted, computed, useTemplateRef, TransitionGroup } from 'vue';
 import * as Misskey from 'misskey-js';
+import { useInterval } from '@@/js/use-interval.js';
 import type { notificationTypes } from '@@/js/const.js';
-import MkPagination from '@/components/MkPagination.vue';
 import XNotification from '@/components/MkNotification.vue';
 import MkNote from '@/components/MkNote.vue';
 import { useStream } from '@/stream.js';
@@ -46,14 +54,16 @@ import { infoImageUrl } from '@/instance.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { prefer } from '@/preferences.js';
 import { store } from '@/store.js';
+import { usePagination } from '@/use/use-pagination.js';
 
 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
 }>();
 
-const pagingComponent = useTemplateRef('pagingComponent');
+const rootEl = useTemplateRef('rootEl');
 
-const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
+const paginator = usePagination({
+	ctx: prefer.s.useGroupedNotifications ? {
 		endpoint: 'i/notifications-grouped' as const,
 		limit: 20,
 		params: computed(() => ({
@@ -65,8 +75,22 @@ const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
 		params: computed(() => ({
 			excludeTypes: props.excludeTypes ?? undefined,
 		})),
+	},
 });
 
+const POLLING_INTERVAL = 1000 * 15;
+
+if (!store.s.realtimeMode) {
+	useInterval(async () => {
+		paginator.fetchNewer({
+			toQueue: false,
+		});
+	}, POLLING_INTERVAL, {
+		immediate: false,
+		afterMounted: true,
+	});
+}
+
 function onNotification(notification) {
 	const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
 	if (isMuted || window.document.visibilityState === 'visible') {
@@ -76,16 +100,12 @@ function onNotification(notification) {
 	}
 
 	if (!isMuted) {
-		pagingComponent.value?.prepend(notification);
+		paginator.prepend(notification);
 	}
 }
 
 function reload() {
-	return new Promise<void>((res) => {
-		pagingComponent.value?.reload().then(() => {
-			res();
-		});
-	});
+	return paginator.reload();
 }
 
 let connection: Misskey.ChannelConnection<Misskey.Channels['main']> | null = null;
@@ -127,7 +147,16 @@ defineExpose({
 	background: var(--MI_THEME-panel);
 }
 
-.item {
+.item:not(:last-child) {
 	border-bottom: solid 0.5px var(--MI_THEME-divider);
 }
+
+.more {
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 16px;
+	background: var(--MI_THEME-panel);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
 </style>

packages/frontend/src/components/MkPagination.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
 	:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
 	:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
+	:css="prefer.s.animation"
 	mode="out-in"
 >
 	<MkLoading v-if="paginator.fetching.value"/>
@@ -26,14 +27,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div v-else ref="rootEl" class="_gaps">
 		<div v-show="pagination.reversed && paginator.canFetchMore.value" key="_more_">
-			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchMoreAhead">
+			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchNewer">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else/>
 		</div>
 		<slot :items="Array.from(paginator.items.value.values())" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot>
 		<div v-show="!pagination.reversed && paginator.canFetchMore.value" key="_more_">
-			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchMore">
+			<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchOlder">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else/>
@@ -64,17 +65,13 @@ const paginator = usePagination({
 });
 
 function appearFetchMoreAhead() {
-	paginator.fetchMoreAhead();
+	paginator.fetchNewer();
 }
 
 function appearFetchMore() {
-	paginator.fetchMore();
+	paginator.fetchOlder();
 }
 
-onMounted(() => {
-	paginator.init();
-});
-
 defineExpose({
 	paginator: paginator,
 });

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -36,6 +36,7 @@ import { checkReactionPermissions } from '@/utility/check-reaction-permissions.j
 import { customEmojisMap } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
+import { noteEvents } from '@/use/use-note-capture.js';
 
 const props = defineProps<{
 	reaction: string;
@@ -83,10 +84,21 @@ async function toggleReaction() {
 		misskeyApi('notes/reactions/delete', {
 			noteId: props.note.id,
 		}).then(() => {
+			noteEvents.emit(`unreacted:${props.note.id}`, {
+				userId: $i!.id,
+				reaction: props.reaction,
+				emoji: emoji.value,
+			});
 			if (oldReaction !== props.reaction) {
 				misskeyApi('notes/reactions/create', {
 					noteId: props.note.id,
 					reaction: props.reaction,
+				}).then(() => {
+					noteEvents.emit(`reacted:${props.note.id}`, {
+						userId: $i!.id,
+						reaction: props.reaction,
+						emoji: emoji.value,
+					});
 				});
 			}
 		});
@@ -110,6 +122,12 @@ async function toggleReaction() {
 		misskeyApi('notes/reactions/create', {
 			noteId: props.note.id,
 			reaction: props.reaction,
+		}).then(() => {
+			noteEvents.emit(`reacted:${props.note.id}`, {
+				userId: $i!.id,
+				reaction: props.reaction,
+				emoji: emoji.value,
+			});
 		});
 		if (props.note.text && props.note.text.length > 100 && (Date.now() - new Date(props.note.createdAt).getTime() < 1000 * 3)) {
 			claimAchievement('reactWithoutRead');

packages/frontend/src/components/MkTimeline.vue

@@ -19,10 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 
 	<div v-else ref="rootEl">
-		<div v-if="notesQueue.length > 0" :class="$style.new" @click="releaseQueue()"><button class="_button" :class="$style.newButton">{{ i18n.ts.newNoteRecived }}</button></div>
+		<div v-if="paginator.queue.value.length > 0" :class="$style.new" @click="releaseQueue()"><button class="_button" :class="$style.newButton">{{ i18n.ts.newNoteRecived }}</button></div>
 		<component
 			:is="prefer.s.animation ? TransitionGroup : 'div'"
-			:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
+			:class="[$style.notes, { [$style.noGap]: noGap, '_gaps': !noGap }]"
 			:enterActiveClass="$style.transition_x_enterActive"
 			:leaveActiveClass="$style.transition_x_leaveActive"
 			:enterFromClass="$style.transition_x_enterFrom"
@@ -40,12 +40,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
 			</template>
 		</component>
-		<div v-show="paginator.canFetchMore.value" key="_more_">
-			<MkButton v-if="!paginator.moreFetching.value" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchMore">
-				{{ i18n.ts.loadMore }}
-			</MkButton>
+		<button v-show="paginator.canFetchMore.value" key="_more_" v-appear="prefer.s.enableInfiniteScroll ? paginator.fetchOlder : null" :disabled="paginator.moreFetching.value" class="_button" :class="$style.more" @click="paginator.fetchOlder">
+			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
 			<MkLoading v-else/>
-		</div>
+		</button>
 	</div>
 </MkPullToRefresh>
 </template>
@@ -69,7 +67,6 @@ import MkNote from '@/components/MkNote.vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
 
 const props = withDefaults(defineProps<{
 	src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
@@ -115,31 +112,18 @@ const POLLING_INTERVAL = 1000 * 15;
 
 if (!store.s.realtimeMode) {
 	useInterval(async () => {
-		const notes = await misskeyApi(paginationQuery.endpoint, {
-			...paginationQuery.params,
-			limit: 10,
-			sinceId: Array.from(paginator.items.value.keys()).at(0),
+		const isTop = rootEl.value == null ? false : isHeadVisible(rootEl.value, 16);
+		paginator.fetchNewer({
+			toQueue: !isTop,
 		});
-		console.log(notes);
-
-		const isTop = isHeadVisible(rootEl.value, 16);
-		if (isTop) {
-			paginator.unshiftItems(notes.toReversed());
-		} else {
-			notesQueue.value.unshift(...notes.toReversed());
-		}
 	}, POLLING_INTERVAL, {
 		immediate: false,
 		afterMounted: true,
 	});
 }
 
-const notesQueue = ref<Misskey.entities.Note[]>([]);
-
 function releaseQueue() {
-	paginator.unshiftItems(notesQueue.value);
-	notesQueue.value = [];
-
+	paginator.releaseQueue();
 	scrollToTop(rootEl.value);
 }
 
@@ -154,7 +138,7 @@ function prepend(note: Misskey.entities.Note) {
 	if (isTop) {
 		paginator.prepend(note);
 	} else {
-		notesQueue.value.unshift(note);
+		paginator.enqueue(note);
 	}
 
 	if (props.sound) {
@@ -329,10 +313,6 @@ const paginator = usePagination({
 	ctx: paginationQuery,
 });
 
-onMounted(() => {
-	paginator.init();
-});
-
 onUnmounted(() => {
 	disconnectChannel();
 });
@@ -367,18 +347,13 @@ defineExpose({
 	position: absolute;
 }
 
-.reverse {
-	display: flex;
-	flex-direction: column-reverse;
-}
-
-.root {
+.notes {
 	container-type: inline-size;
 
 	&.noGap {
 		background: var(--MI_THEME-panel);
 
-		.note {
+		.note:not(:last-child) {
 			border-bottom: solid 0.5px var(--MI_THEME-divider);
 		}
 
@@ -427,6 +402,11 @@ defineExpose({
 }
 
 .more {
-	margin: 16px auto;
+	display: block;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 16px;
+	background: var(--MI_THEME-panel);
+	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 </style>

packages/frontend/src/store.ts

@@ -82,7 +82,7 @@ export const store = markRaw(new Pizzax('base', {
 	},
 	realtimeMode: {
 		where: 'device',
-		default: false,
+		default: true,
 	},
 	recentlyUsedEmojis: {
 		where: 'device',

packages/frontend/src/ui/_common_/common.vue

@@ -150,12 +150,11 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 
 if ($i) {
 	if (store.s.realtimeMode) {
-		const connection = useStream().useChannel('main', null, 'UI');
+		const connection = useStream().useChannel('main');
 		connection.on('notification', onNotification);
 	}
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 
-	//#region Listen message from SW
 	if ('serviceWorker' in navigator) {
 		swInject();
 	}

packages/frontend/src/ui/_common_/navbar.vue

@@ -150,8 +150,18 @@ function toggleIconOnly() {
 	}
 }
 
-function toggleRealtimeMode() {
+function toggleRealtimeMode(ev: MouseEvent) {
+	os.popupMenu([{
+		type: 'label',
+		text: i18n.ts.realtimeMode,
+	}, {
+		text: store.s.realtimeMode ? i18n.ts.turnItOff : i18n.ts.turnItOn,
+		icon: store.s.realtimeMode ? 'ti ti-bolt-off' : 'ti ti-bolt',
+		action: () => {
 			store.set('realtimeMode', !store.s.realtimeMode);
+			window.location.reload();
+		},
+	}], ev.currentTarget ?? ev.target);
 }
 
 function openAccountMenu(ev: MouseEvent) {

packages/frontend/src/use/use-note-capture.ts

@@ -12,11 +12,11 @@ import { $i } from '@/i.js';
 import { store } from '@/store.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 
-const noteEvents = new EventEmitter<{
-	reacted: Misskey.entities.Note;
-	unreacted: Misskey.entities.Note;
-	pollVoted: Misskey.entities.Note;
-	deleted: Misskey.entities.Note;
+export const noteEvents = new EventEmitter<{
+	[`reacted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }) => void;
+	[`unreacted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }) => void;
+	[`pollVoted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; choice: string; }) => void;
+	[`deleted:${string}`]: () => void;
 }>();
 
 const fetchEvent = new EventEmitter<{
@@ -55,10 +55,6 @@ function pseudoNoteCapture(props: {
 	const note = props.note;
 	const pureNote = props.pureNote;
 
-	function onReacted(): void {
-
-	}
-
 	function onFetched(data: Pick<Misskey.entities.Note, 'reactions' | 'reactionEmojis'>): void {
 		note.value.reactions = data.reactions;
 		note.value.reactionCount = Object.values(data.reactions).reduce((a, b) => a + b, 0);
@@ -100,58 +96,33 @@ function realtimeNoteCapture(props: {
 
 		switch (type) {
 			case 'reacted': {
-				const reaction = body.reaction;
-
-				if (body.emoji && !(body.emoji.name in note.value.reactionEmojis)) {
-					note.value.reactionEmojis[body.emoji.name] = body.emoji.url;
-				}
-
-				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
-				const currentCount = (note.value.reactions || {})[reaction] || 0;
-
-				note.value.reactions[reaction] = currentCount + 1;
-				note.value.reactionCount += 1;
-
-				if ($i && (body.userId === $i.id)) {
-					note.value.myReaction = reaction;
-				}
+				noteEvents.emit(`reacted:${id}`, {
+					userId: body.userId,
+					reaction: body.reaction,
+					emoji: body.emoji,
+				});
 				break;
 			}
 
 			case 'unreacted': {
-				const reaction = body.reaction;
-
-				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
-				const currentCount = (note.value.reactions || {})[reaction] || 0;
-
-				note.value.reactions[reaction] = Math.max(0, currentCount - 1);
-				note.value.reactionCount = Math.max(0, note.value.reactionCount - 1);
-				if (note.value.reactions[reaction] === 0) delete note.value.reactions[reaction];
-
-				if ($i && (body.userId === $i.id)) {
-					note.value.myReaction = null;
-				}
+				noteEvents.emit(`unreacted:${id}`, {
+					userId: body.userId,
+					reaction: body.reaction,
+					emoji: body.emoji,
+				});
 				break;
 			}
 
 			case 'pollVoted': {
-				const choice = body.choice;
-
-				const choices = [...note.value.poll.choices];
-				choices[choice] = {
-					...choices[choice],
-					votes: choices[choice].votes + 1,
-					...($i && (body.userId === $i.id) ? {
-						isVoted: true,
-					} : {}),
-				};
-
-				note.value.poll.choices = choices;
+				noteEvents.emit(`pollVoted:${id}`, {
+					userId: body.userId,
+					choice: body.choice,
+				});
 				break;
 			}
 
 			case 'deleted': {
-				props.isDeletedRef.value = true;
+				noteEvents.emit(`deleted:${id}`);
 				break;
 			}
 		}
@@ -195,6 +166,80 @@ export function useNoteCapture(props: {
 	pureNote: Ref<Misskey.entities.Note>;
 	isDeletedRef: Ref<boolean>;
 }) {
+	const note = props.note;
+	noteEvents.on(`reacted:${note.value.id}`, onReacted);
+	noteEvents.on(`unreacted:${note.value.id}`, onUnreacted);
+	noteEvents.on(`pollVoted:${note.value.id}`, onPollVoted);
+	noteEvents.on(`deleted:${note.value.id}`, onDeleted);
+
+	let latestReactedKey: string | null = null;
+	let latestUnreactedKey: string | null = null;
+	let latestPollVotedKey: string | null = null;
+
+	function onReacted(ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }): void {
+		console.log('reacted', ctx);
+		const newReactedKey = `${ctx.userId}:${ctx.reaction}`;
+		if (newReactedKey === latestReactedKey) return;
+		latestReactedKey = newReactedKey;
+
+		if (ctx.emoji && !(ctx.emoji.name in note.value.reactionEmojis)) {
+			note.value.reactionEmojis[ctx.emoji.name] = ctx.emoji.url;
+		}
+
+		const currentCount = note.value.reactions[ctx.reaction] || 0;
+
+		note.value.reactions[ctx.reaction] = currentCount + 1;
+		note.value.reactionCount += 1;
+
+		if ($i && (ctx.userId === $i.id)) {
+			note.value.myReaction = ctx.reaction;
+		}
+	}
+
+	function onUnreacted(ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }): void {
+		const newUnreactedKey = `${ctx.userId}:${ctx.reaction}`;
+		if (newUnreactedKey === latestUnreactedKey) return;
+		latestUnreactedKey = newUnreactedKey;
+
+		const currentCount = note.value.reactions[ctx.reaction] || 0;
+
+		note.value.reactions[ctx.reaction] = Math.max(0, currentCount - 1);
+		note.value.reactionCount = Math.max(0, note.value.reactionCount - 1);
+		if (note.value.reactions[ctx.reaction] === 0) delete note.value.reactions[ctx.reaction];
+
+		if ($i && (ctx.userId === $i.id)) {
+			note.value.myReaction = null;
+		}
+	}
+
+	function onPollVoted(ctx: { userId: Misskey.entities.User['id']; choice: string; }): void {
+		const newPollVotedKey = `${ctx.userId}:${ctx.choice}`;
+		if (newPollVotedKey === latestPollVotedKey) return;
+		latestPollVotedKey = newPollVotedKey;
+
+		const choices = [...note.value.poll.choices];
+		choices[ctx.choice] = {
+			...choices[ctx.choice],
+			votes: choices[ctx.choice].votes + 1,
+			...($i && (ctx.userId === $i.id) ? {
+				isVoted: true,
+			} : {}),
+		};
+
+		note.value.poll.choices = choices;
+	}
+
+	function onDeleted(): void {
+		props.isDeletedRef.value = true;
+	}
+
+	onUnmounted(() => {
+		noteEvents.off(`reacted:${note.value.id}`, onReacted);
+		noteEvents.off(`unreacted:${note.value.id}`, onUnreacted);
+		noteEvents.off(`pollVoted:${note.value.id}`, onPollVoted);
+		noteEvents.off(`deleted:${note.value.id}`, onDeleted);
+	});
+
 	if ($i && store.s.realtimeMode) {
 		realtimeNoteCapture(props);
 	} else {

packages/frontend/src/use/use-pagination.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { computed, isRef, ref, watch } from 'vue';
+import { computed, isRef, onMounted, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { ComputedRef, Ref, ShallowRef } from 'vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -38,24 +38,20 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 	offsetMode?: boolean;
 };
 
-type MisskeyEntityMap = Map<string, MisskeyEntity>;
-
 function arrayToEntries(entities: MisskeyEntity[]): [string, MisskeyEntity][] {
 	return entities.map(en => [en.id, en]);
 }
 
-function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): MisskeyEntityMap {
-	return new Map([...map, ...arrayToEntries(entities)]);
-}
-
-export function usePagination<T>(props: {
-	ctx: PagingCtx;
+export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['endpoint']]['res']>(props: {
+	ctx: Ctx;
 }) {
 	/**
 	 * 表示するアイテムのソース
 	 * 最新が0番目
 	 */
-	const items = ref<MisskeyEntityMap>(new Map());
+	const items = ref<Map<string, T>>(new Map());
+
+	const queue = ref<T[]>([]);
 
 	/**
 	 * 初期化中かどうか（trueならMkLoadingで全て隠す）
@@ -100,11 +96,11 @@ export function usePagination<T>(props: {
 		});
 	}
 
-	const reload = (): Promise<void> => {
+	function reload(): Promise<void> {
 		return init();
-	};
+	}
 
-	const fetchMore = async (): Promise<void> => {
+	async function fetchOlder(): Promise<void> {
 		if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
 		moreFetching.value = true;
 		const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
@@ -123,22 +119,21 @@ export function usePagination<T>(props: {
 			}
 
 			if (res.length === 0) {
-				items.value = concatMapWithArray(items.value, res);
 				canFetchMore.value = false;
 				moreFetching.value = false;
 			} else {
-				items.value = concatMapWithArray(items.value, res);
+				items.value = new Map([...items.value, ...arrayToEntries(res)]);
 				canFetchMore.value = true;
 				moreFetching.value = false;
 			}
 		}, err => {
 			moreFetching.value = false;
 		});
-	};
+	}
 
-	const fetchMoreAhead = async (): Promise<void> => {
-		if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
-		moreFetching.value = true;
+	async function fetchNewer(options: {
+		toQueue?: boolean;
+	} = {}): Promise<void> {
 		const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
 		await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
 			...params,
@@ -146,64 +141,62 @@ export function usePagination<T>(props: {
 			...(props.ctx.offsetMode ? {
 				offset: items.value.size,
 			} : {
-				sinceId: Array.from(items.value.keys()).at(-1),
+				sinceId: Array.from(items.value.keys()).at(0),
 			}),
 		}).then(res => {
-			if (res.length === 0) {
-				items.value = concatMapWithArray(items.value, res);
-				canFetchMore.value = false;
+			if (options.toQueue) {
+				queue.value.unshift(...res.toReversed());
 			} else {
-				items.value = concatMapWithArray(items.value, res);
-				canFetchMore.value = true;
+				items.value = new Map([...arrayToEntries(res.toReversed()), ...items.value]);
 			}
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
 		});
-	};
+	}
 
 	function trim() {
 		if (items.value.size >= MAX_ITEMS) canFetchMore.value = true;
 		items.value = new Map([...items.value].slice(0, MAX_ITEMS));
 	}
 
-	function unshiftItems(newItems: MisskeyEntity[]) {
+	function unshiftItems(newItems: T[]) {
 		items.value = new Map([...arrayToEntries(newItems), ...items.value]);
 	}
 
-	function concatItems(oldItems: MisskeyEntity[]) {
+	function concatItems(oldItems: T[]) {
 		items.value = new Map([...items.value, ...arrayToEntries(oldItems)]);
 	}
 
-	function prepend(item: MisskeyEntity) {
+	function prepend(item: T) {
 		unshiftItems([item]);
 	}
 
-	const appendItem = (item: MisskeyEntity): void => {
-		items.value.set(item.id, item);
-	};
+	function enqueue(item: T) {
+		queue.value.unshift(item);
+	}
 
-	const removeItem = (id: string) => {
-		items.value.delete(id);
-	};
+	function releaseQueue() {
+		unshiftItems(queue.value);
+		queue.value = [];
+	}
 
-	const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
-		const item = items.value.get(id);
-		if (item) items.value.set(id, replacer(item));
-	};
+	onMounted(() => {
+		init();
+	});
 
 	return {
 		items,
+		queue,
 		fetching,
 		moreFetching,
 		canFetchMore,
 		init,
 		reload,
-		fetchMore,
-		fetchMoreAhead,
+		fetchOlder,
+		fetchNewer,
 		unshiftItems,
 		prepend,
 		trim,
+		enqueue,
+		releaseQueue,
 		error,
 	};
 }