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

locales/ja-JP.yml

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

packages/frontend-shared/js/collapsed.ts

@@ -6,30 +6,17 @@
 import * as Misskey from 'misskey-js';
 
 export function shouldCollapsed(note: Misskey.entities.Note, urls: string[]): boolean {
-	if (note.cw != null) {
+	const collapsed = note.cw == null && (
-		return false;
+		(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)
+	);
 
-	if (note.text != null) {
+	return collapsed;
-		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 {
+	} catch (e) {
 		return '';
 	}
 }

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

@@ -387,6 +387,12 @@ 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 { noteEvents, useNoteCapture } from '@/use/use-note-capture.js';
+import { 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,11 +382,6 @@ 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,
-		});
 	});
 });
 
@@ -485,11 +480,6 @@ 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) {
@@ -523,10 +513,7 @@ function react(): void {
 				noteId: appearNote.value.id,
 				reaction: reaction,
 			}).then(() => {
-				noteEvents.emit(`reacted:${appearNote.value.id}`, {
+				// 別にthenを待たなくても良いかも(楽観的更新)
-					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 { noteEvents, useNoteCapture } from '@/use/use-note-capture.js';
+import { 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,11 +343,6 @@ 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,
-		});
 	});
 });
 
@@ -450,11 +445,6 @@ 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) {
@@ -482,11 +472,6 @@ 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,47 +5,39 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkPullToRefresh :refresher="() => reload()">
-	<MkLoading v-if="paginator.fetching.value"/>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
-
+		<template #empty>
-	<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>
-		</slot>
+		</template>
-	</div>
 
-	<div v-else ref="rootEl">
+		<template #default="{ items: notifications }">
-		<component
+			<component
-			:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
+				:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
-			:enterActiveClass="$style.transition_x_enterActive"
+				:enterActiveClass="$style.transition_x_enterActive"
-			:leaveActiveClass="$style.transition_x_leaveActive"
+				:leaveActiveClass="$style.transition_x_leaveActive"
-			:enterFromClass="$style.transition_x_enterFrom"
+				:enterFromClass="$style.transition_x_enterFrom"
-			:leaveToClass="$style.transition_x_leaveTo"
+				:leaveToClass="$style.transition_x_leaveTo"
-			:moveClass=" $style.transition_x_move"
+				:moveClass=" $style.transition_x_move"
-			tag="div"
+				tag="div"
-		>
+			>
-			<template v-for="(notification, i) in Array.from(paginator.items.value.values())" :key="notification.id">
+				<template v-for="(notification, i) in notifications" :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"/>
+					<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"/>
+					<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
-			</template>
+				</template>
-		</component>
+			</component>
-		<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">
+		</template>
-			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
+	</MkPagination>
-			<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';
@@ -54,43 +46,27 @@ 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 rootEl = useTemplateRef('rootEl');
+const pagingComponent = useTemplateRef('pagingComponent');
 
-const paginator = usePagination({
+const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
-	ctx: prefer.s.useGroupedNotifications ? {
+	endpoint: 'i/notifications-grouped' as const,
-		endpoint: 'i/notifications-grouped' as const,
+	limit: 20,
-		limit: 20,
+	params: computed(() => ({
-		params: computed(() => ({
+		excludeTypes: props.excludeTypes ?? undefined,
-			excludeTypes: props.excludeTypes ?? undefined,
+	})),
-		})),
+} : {
-	} : {
+	endpoint: 'i/notifications' as const,
-		endpoint: 'i/notifications' as const,
+	limit: 20,
-		limit: 20,
+	params: computed(() => ({
-		params: computed(() => ({
+		excludeTypes: props.excludeTypes ?? undefined,
-			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') {
@@ -100,12 +76,16 @@ function onNotification(notification) {
 	}
 
 	if (!isMuted) {
-		paginator.prepend(notification);
+		pagingComponent.value?.prepend(notification);
 	}
 }
 
 function reload() {
-	return paginator.reload();
+	return new Promise<void>((res) => {
+		pagingComponent.value?.reload().then(() => {
+			res();
+		});
+	});
 }
 
 let connection: Misskey.ChannelConnection<Misskey.Channels['main']> | null = null;
@@ -147,16 +127,7 @@ defineExpose({
 	background: var(--MI_THEME-panel);
 }
 
-.item:not(:last-child) {
+.item {
 	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,7 +9,6 @@ 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"/>
@@ -27,14 +26,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.fetchNewer">
+			<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">
 				{{ 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.fetchOlder">
+			<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">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else/>
@@ -65,13 +64,17 @@ const paginator = usePagination({
 });
 
 function appearFetchMoreAhead() {
-	paginator.fetchNewer();
+	paginator.fetchMoreAhead();
 }
 
 function appearFetchMore() {
-	paginator.fetchOlder();
+	paginator.fetchMore();
 }
 
+onMounted(() => {
+	paginator.init();
+});
+
 defineExpose({
 	paginator: paginator,
 });

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

@@ -36,7 +36,6 @@ 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;
@@ -84,21 +83,10 @@ 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,
-					});
 				});
 			}
 		});
@@ -122,12 +110,6 @@ 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="paginator.queue.value.length > 0" :class="$style.new" @click="releaseQueue()"><button class="_button" :class="$style.newButton">{{ i18n.ts.newNoteRecived }}</button></div>
+		<div v-if="notesQueue.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.notes, { [$style.noGap]: noGap, '_gaps': !noGap }]"
+			:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
 			:enterActiveClass="$style.transition_x_enterActive"
 			:leaveActiveClass="$style.transition_x_leaveActive"
 			:enterFromClass="$style.transition_x_enterFrom"
@@ -40,10 +40,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
 			</template>
 		</component>
-		<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-show="paginator.canFetchMore.value" key="_more_">
-			<div v-if="!paginator.moreFetching.value">{{ i18n.ts.loadMore }}</div>
+			<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>
 			<MkLoading v-else/>
-		</button>
+		</div>
 	</div>
 </MkPullToRefresh>
 </template>
@@ -67,6 +69,7 @@ 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';
@@ -112,18 +115,31 @@ const POLLING_INTERVAL = 1000 * 15;
 
 if (!store.s.realtimeMode) {
 	useInterval(async () => {
-		const isTop = rootEl.value == null ? false : isHeadVisible(rootEl.value, 16);
+		const notes = await misskeyApi(paginationQuery.endpoint, {
-		paginator.fetchNewer({
+			...paginationQuery.params,
-			toQueue: !isTop,
+			limit: 10,
+			sinceId: Array.from(paginator.items.value.keys()).at(0),
 		});
+		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.releaseQueue();
+	paginator.unshiftItems(notesQueue.value);
+	notesQueue.value = [];
+
 	scrollToTop(rootEl.value);
 }
 
@@ -138,7 +154,7 @@ function prepend(note: Misskey.entities.Note) {
 	if (isTop) {
 		paginator.prepend(note);
 	} else {
-		paginator.enqueue(note);
+		notesQueue.value.unshift(note);
 	}
 
 	if (props.sound) {
@@ -313,6 +329,10 @@ const paginator = usePagination({
 	ctx: paginationQuery,
 });
 
+onMounted(() => {
+	paginator.init();
+});
+
 onUnmounted(() => {
 	disconnectChannel();
 });
@@ -347,13 +367,18 @@ defineExpose({
 	position: absolute;
 }
 
-.notes {
+.reverse {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+.root {
 	container-type: inline-size;
 
 	&.noGap {
 		background: var(--MI_THEME-panel);
 
-		.note:not(:last-child) {
+		.note {
 			border-bottom: solid 0.5px var(--MI_THEME-divider);
 		}
 
@@ -402,11 +427,6 @@ defineExpose({
 }
 
 .more {
-	display: block;
+	margin: 16px auto;
-	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: true,
+		default: false,
 	},
 	recentlyUsedEmojis: {
 		where: 'device',

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

@@ -150,11 +150,12 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 
 if ($i) {
 	if (store.s.realtimeMode) {
-		const connection = useStream().useChannel('main');
+		const connection = useStream().useChannel('main', null, 'UI');
 		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,18 +150,8 @@ function toggleIconOnly() {
 	}
 }
 
-function toggleRealtimeMode(ev: MouseEvent) {
+function toggleRealtimeMode() {
-	os.popupMenu([{
+	store.set('realtimeMode', !store.s.realtimeMode);
-		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';
 
-export const noteEvents = new EventEmitter<{
+const noteEvents = new EventEmitter<{
-	[`reacted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }) => void;
+	reacted: Misskey.entities.Note;
-	[`unreacted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; reaction: string; emoji?: { name: string; url: string; }; }) => void;
+	unreacted: Misskey.entities.Note;
-	[`pollVoted:${string}`]: (ctx: { userId: Misskey.entities.User['id']; choice: string; }) => void;
+	pollVoted: Misskey.entities.Note;
-	[`deleted:${string}`]: () => void;
+	deleted: Misskey.entities.Note;
 }>();
 
 const fetchEvent = new EventEmitter<{
@@ -55,6 +55,10 @@ 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);
@@ -96,33 +100,58 @@ function realtimeNoteCapture(props: {
 
 		switch (type) {
 			case 'reacted': {
-				noteEvents.emit(`reacted:${id}`, {
+				const reaction = body.reaction;
-					userId: body.userId,
+
-					reaction: body.reaction,
+				if (body.emoji && !(body.emoji.name in note.value.reactionEmojis)) {
-					emoji: body.emoji,
+					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;
+				}
 				break;
 			}
 
 			case 'unreacted': {
-				noteEvents.emit(`unreacted:${id}`, {
+				const reaction = body.reaction;
-					userId: body.userId,
+
-					reaction: body.reaction,
+				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
-					emoji: body.emoji,
+				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;
+				}
 				break;
 			}
 
 			case 'pollVoted': {
-				noteEvents.emit(`pollVoted:${id}`, {
+				const choice = body.choice;
-					userId: body.userId,
+
-					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;
 				break;
 			}
 
 			case 'deleted': {
-				noteEvents.emit(`deleted:${id}`);
+				props.isDeletedRef.value = true;
 				break;
 			}
 		}
@@ -166,80 +195,6 @@ 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, onMounted, ref, watch } from 'vue';
+import { computed, isRef, 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,20 +38,24 @@ 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]);
 }
 
-export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['endpoint']]['res']>(props: {
+function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): MisskeyEntityMap {
-	ctx: Ctx;
+	return new Map([...map, ...arrayToEntries(entities)]);
+}
+
+export function usePagination<T>(props: {
+	ctx: PagingCtx;
 }) {
 	/**
 	 * 表示するアイテムのソース
 	 * 最新が0番目
 	 */
-	const items = ref<Map<string, T>>(new Map());
+	const items = ref<MisskeyEntityMap>(new Map());
-
-	const queue = ref<T[]>([]);
 
 	/**
 	 * 初期化中かどうか（trueならMkLoadingで全て隠す）
@@ -96,11 +100,11 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
 		});
 	}
 
-	function reload(): Promise<void> {
+	const reload = (): Promise<void> => {
 		return init();
-	}
+	};
 
-	async function fetchOlder(): Promise<void> {
+	const fetchMore = async (): 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 : {};
@@ -119,21 +123,22 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
 			}
 
 			if (res.length === 0) {
+				items.value = concatMapWithArray(items.value, res);
 				canFetchMore.value = false;
 				moreFetching.value = false;
 			} else {
-				items.value = new Map([...items.value, ...arrayToEntries(res)]);
+				items.value = concatMapWithArray(items.value, res);
 				canFetchMore.value = true;
 				moreFetching.value = false;
 			}
 		}, err => {
 			moreFetching.value = false;
 		});
-	}
+	};
 
-	async function fetchNewer(options: {
+	const fetchMoreAhead = async (): Promise<void> => {
-		toQueue?: boolean;
+		if (!canFetchMore.value || fetching.value || moreFetching.value || items.value.size === 0) return;
-	} = {}): Promise<void> {
+		moreFetching.value = true;
 		const params = props.ctx.params ? isRef(props.ctx.params) ? props.ctx.params.value : props.ctx.params : {};
 		await misskeyApi<MisskeyEntity[]>(props.ctx.endpoint, {
 			...params,
@@ -141,62 +146,64 @@ export function usePagination<Ctx extends PagingCtx, T = Misskey.Endpoints[Ctx['
 			...(props.ctx.offsetMode ? {
 				offset: items.value.size,
 			} : {
-				sinceId: Array.from(items.value.keys()).at(0),
+				sinceId: Array.from(items.value.keys()).at(-1),
 			}),
 		}).then(res => {
-			if (options.toQueue) {
+			if (res.length === 0) {
-				queue.value.unshift(...res.toReversed());
+				items.value = concatMapWithArray(items.value, res);
+				canFetchMore.value = false;
 			} else {
-				items.value = new Map([...arrayToEntries(res.toReversed()), ...items.value]);
+				items.value = concatMapWithArray(items.value, res);
+				canFetchMore.value = true;
 			}
+			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: T[]) {
+	function unshiftItems(newItems: MisskeyEntity[]) {
 		items.value = new Map([...arrayToEntries(newItems), ...items.value]);
 	}
 
-	function concatItems(oldItems: T[]) {
+	function concatItems(oldItems: MisskeyEntity[]) {
 		items.value = new Map([...items.value, ...arrayToEntries(oldItems)]);
 	}
 
-	function prepend(item: T) {
+	function prepend(item: MisskeyEntity) {
 		unshiftItems([item]);
 	}
 
-	function enqueue(item: T) {
+	const appendItem = (item: MisskeyEntity): void => {
-		queue.value.unshift(item);
+		items.value.set(item.id, item);
-	}
+	};
 
-	function releaseQueue() {
+	const removeItem = (id: string) => {
-		unshiftItems(queue.value);
+		items.value.delete(id);
-		queue.value = [];
+	};
-	}
 
-	onMounted(() => {
+	const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
-		init();
+		const item = items.value.get(id);
-	});
+		if (item) items.value.set(id, replacer(item));
+	};
 
 	return {
 		items,
-		queue,
 		fetching,
 		moreFetching,
 		canFetchMore,
 		init,
 		reload,
-		fetchOlder,
+		fetchMore,
-		fetchNewer,
+		fetchMoreAhead,
 		unshiftItems,
 		prepend,
 		trim,
-		enqueue,
-		releaseQueue,
 		error,
 	};
 }