packages/frontend/src/components/MkNote.vue

@@ -193,7 +193,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, useTemplateRef, provide } from 'vue';
+import { computed, inject, onMounted, ref, useTemplateRef, watch, provide, shallowRef, reactive } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@@ -228,6 +228,7 @@ 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 '@/composables/use-note-capture.js';
+import type { ReactiveNoteData } from '@/composables/use-note-capture.js';
 import { deepClone } from '@/utility/clone.js';
 import { useTooltip } from '@/composables/use-tooltip.js';
 import { claimAchievement } from '@/utility/achievements.js';
@@ -283,10 +284,12 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note);
 const appearNote = getAppearNote(note);
-const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
-	note: appearNote,
-	parentNote: note,
-	mock: props.mock,
+const $appearNote = reactive<ReactiveNoteData>({
+	reactions: appearNote.reactions,
+	reactionCount: appearNote.reactionCount,
+	reactionEmojis: appearNote.reactionEmojis,
+	myReaction: appearNote.myReaction,
+	pollChoices: appearNote.poll?.choices ?? [],
 });
 
 const rootEl = useTemplateRef('rootEl');
@@ -408,6 +411,17 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 	});
 });
 
+let subscribeManuallyToNoteCapture: () => void = () => { };
+
+if (!props.mock) {
+	const { subscribe } = useNoteCapture({
+		note: appearNote,
+		parentNote: note,
+		$note: $appearNote,
+	});
+	subscribeManuallyToNoteCapture = subscribe;
+}
+
 if (!props.mock) {
 	useTooltip(renoteButton, async (showing) => {
 		const renotes = await misskeyApi('notes/renotes', {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -228,7 +228,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, provide, ref, useTemplateRef } from 'vue';
+import { computed, inject, onMounted, provide, reactive, ref, useTemplateRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@@ -259,6 +259,7 @@ import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { getNoteClipMenu, getNoteMenu, getRenoteMenu } from '@/utility/get-note-menu.js';
 import { noteEvents, useNoteCapture } from '@/composables/use-note-capture.js';
+import type { ReactiveNoteData } from '@/composables/use-note-capture.js';
 import { deepClone } from '@/utility/clone.js';
 import { useTooltip } from '@/composables/use-tooltip.js';
 import { claimAchievement } from '@/utility/achievements.js';
@@ -304,9 +305,12 @@ if (noteViewInterruptors.length > 0) {
 
 const isRenote = Misskey.note.isPureRenote(note);
 const appearNote = getAppearNote(note);
-const { $note: $appearNote, subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
-	note: appearNote,
-	parentNote: note,
+const $appearNote = reactive<ReactiveNoteData>({
+	reactions: appearNote.reactions,
+	reactionCount: appearNote.reactionCount,
+	reactionEmojis: appearNote.reactionEmojis,
+	myReaction: appearNote.myReaction,
+	pollChoices: appearNote.poll?.choices ?? [],
 });
 
 const rootEl = useTemplateRef('rootEl');
@@ -394,6 +398,12 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
+const { subscribe: subscribeManuallyToNoteCapture } = useNoteCapture({
+	note: appearNote,
+	parentNote: note,
+	$note: $appearNote,
+});
+
 useTooltip(renoteButton, async (showing) => {
 	const renotes = await misskeyApi('notes/renotes', {
 		noteId: appearNote.id,

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { onUnmounted, reactive } from 'vue';
+import { onUnmounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import { EventEmitter } from 'eventemitter3';
 import type { Reactive } from 'vue';
@@ -188,18 +188,17 @@ export type ReactiveNoteData = {
 };
 
 export function useNoteCapture(props: {
-	note: Misskey.entities.Note;
+	note: Pick<Misskey.entities.Note, 'id' | 'createdAt'>;
 	parentNote: Misskey.entities.Note | null;
-	mock?: boolean;
-}): {
 	$note: Reactive<ReactiveNoteData>;
+}): {
 	subscribe: () => void;
 } {
-	const { note, parentNote, mock } = props;
+	const { note, parentNote, $note } = props;
 
-	const $note = reactive<ReactiveNoteData>({
-		reactions: Object.entries(note.reactions).reduce((acc, [name, count]) => {
-			// Normalize reactions
+	// Normalize reactions
+	if (Object.keys($note.reactions).length > 0) {
+		$note.reactions = Object.entries($note.reactions).reduce((acc, [name, count]) => {
 			const normalizedName = name.replace(/^:(\w+):$/, ':$1@.:');
 			if (acc[normalizedName] == null) {
 				acc[normalizedName] = count;
@@ -207,12 +206,8 @@ export function useNoteCapture(props: {
 				acc[normalizedName] += count;
 			}
 			return acc;
-		}, {} as Misskey.entities.Note['reactions']),
-		reactionCount: note.reactionCount,
-		reactionEmojis: note.reactionEmojis,
-		myReaction: note.myReaction,
-		pollChoices: note.poll?.choices ?? [],
-	});
+		}, {} as Misskey.entities.Note['reactions']);
+	}
 
 	noteEvents.on(`reacted:${note.id}`, onReacted);
 	noteEvents.on(`unreacted:${note.id}`, onUnreacted);
@@ -277,20 +272,10 @@ export function useNoteCapture(props: {
 	}
 
 	function subscribe() {
-		if (mock) {
-			// モックモードでは購読しない
-			return;
-		}
-
 		if ($i && store.s.realtimeMode) {
-			realtimeSubscribe({
-				note,
-			});
+			realtimeSubscribe(props);
 		} else {
-			pollingSubscribe({
-				note,
-				$note,
-			});
+			pollingSubscribe(props);
 		}
 	}
 
@@ -307,7 +292,6 @@ export function useNoteCapture(props: {
 		if ((Date.now() - new Date(note.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
 			// リノートで表示されているノートでもないし、投稿からある程度経過しているので自動で購読しない
 			return {
-				$note,
 				subscribe: () => {
 					subscribe();
 				},
@@ -317,7 +301,6 @@ export function useNoteCapture(props: {
 		if ((Date.now() - new Date(parentNote.createdAt).getTime()) > 1000 * 60 * 5) { // 5min
 			// リノートで表示されているノートだが、リノートされてからある程度経過しているので自動で購読しない
 			return {
-				$note,
 				subscribe: () => {
 					subscribe();
 				},
@@ -328,7 +311,6 @@ export function useNoteCapture(props: {
 	subscribe();
 
 	return {
-		$note,
 		subscribe: () => {
 			// すでに購読しているので何もしない
 		},