noteCapture update counts

packages/frontend/src/components/MkNote.vue

@@ -417,6 +417,9 @@ if (props.mock) {
 		note: appearNote,
 		pureNote: note,
 		isDeletedRef: isDeleted,
+		onReplyCallback: () => {
+			appearNote.value.repliesCount += 1;
+		},
 	});
 }
 

packages/frontend/src/components/MkNoteDetailed.vue

@@ -193,7 +193,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<!-- <div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div> -->
-			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true"/>
+			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :onDeleteCallback="removeReply" :isReply="true"/>
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -400,11 +400,25 @@ const reactionsPagination = computed<Paging>(() => ({
 	},
 }));
 
+async function addReplyTo(replyNote: Misskey.entities.Note) {
+	replies.value.unshift(replyNote);
+	appearNote.value.repliesCount += 1;
+}
+
+async function removeReply(id: Misskey.entities.Note['id']) {
+	const replyIdx = replies.value.findIndex(note => note.id === id);
+	if (replyIdx >= 0) {
+		replies.value.splice(replyIdx, 1);
+		appearNote.value.repliesCount -= 1;
+	}
+}
+
 useNoteCapture({
 	rootEl: rootEl,
 	note: appearNote,
 	pureNote: note,
 	isDeletedRef: isDeleted,
+	onReplyCallback: addReplyTo,
 });
 
 useTooltip(renoteButton, async (showing) => {

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

@@ -5,25 +5,44 @@
 
 import { onUnmounted, Ref, ShallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
+import { misskeyApi } from './misskey-api.js';
 import { useStream } from '@/stream.js';
 import { $i } from '@/account.js';
+import * as os from '@/os.js';
 
 export function useNoteCapture(props: {
 	rootEl: ShallowRef<HTMLElement | undefined>;
 	note: Ref<Misskey.entities.Note>;
-	pureNote: Ref<Misskey.entities.Note>;
+	pureNote?: Ref<Misskey.entities.Note>;
 	isDeletedRef: Ref<boolean>;
+	onReplyCallback?: (replyNote: Misskey.entities.Note) => void | Promise<void>;
+	onDeleteCallback?: (id: Misskey.entities.Note['id']) => void | Promise<void>;
 }) {
 	const note = props.note;
 	const pureNote = props.pureNote;
 	const connection = $i ? useStream() : null;
 
-	function onStreamNoteUpdated(noteData): void {
+	async function onStreamNoteUpdated(noteData): Promise<void> {
 		const { type, id, body } = noteData;
 
 		if ((id !== note.value.id) && (id !== pureNote.value.id)) return;
 
 		switch (type) {
+			case 'replied': {
+				if (!props.onReplyCallback) break;
+
+				// notes/show may throw if the current user can't see the note
+				try {
+					const replyNote = await misskeyApi('notes/show', {
+						noteId: body.id,
+					});
+
+					await props.onReplyCallback(replyNote);
+				} catch { /* empty */ }
+
+				break;
+			}
+
 			case 'reacted': {
 				const reaction = body.reaction;
 
@@ -96,6 +115,8 @@ export function useNoteCapture(props: {
 
 			case 'deleted': {
 				props.isDeletedRef.value = true;
+
+				if (props.onDeleteCallback) await props.onDeleteCallback(id);
 				break;
 			}
 		}