real-time updates on note detail view

`useNoteCapture` already subscribes to all updates for a note, so
we can tell it when a note gets replied to, too

Since I'm not actually adding any extra subscription in the client,
just an extra callback, there should be no overhead when replies are
not coming in.

Also, all the timelines already call `useNoteCapture` for each note
displayed, so we know the whole `GlobalEventService` thing works fine.

Many thanks to VueJS for taking care of all the DOM complications

4 files changed, 24 insertions, 4 deletions

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index f29b9db6ae..ae9d8a0d6b 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -372,11 +372,16 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
+async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+		replies.value.unshift(replyNote);
+}
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
 	pureNote: note,
 	isDeletedRef: isDeleted,
+	onReplyCallback: addReplyTo,
 });
 
 useTooltip(renoteButton, async (showing) => {
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 8d394c0c15..3c840cf598 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -132,6 +132,7 @@ const likeButton = shallowRef<HTMLElement>();
 
 let appearNote = computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
 const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
+const replies = ref<Misskey.entities.Note[]>([]);
 
 const isRenote = (
 	props.note.renote != null &&
@@ -140,10 +141,16 @@ const isRenote = (
 	props.note.poll == null
 );
 
+async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+		replies.value.unshift(replyNote);
+}
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
 	isDeletedRef: isDeleted,
+	// only update replies if we are, in fact, showing replies
+	onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
 });
 
 if ($i) {
@@ -250,8 +257,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
 });
 
-let replies = ref<Misskey.entities.Note[]>([]);
-
 function boostVisibility() {
 	os.popupMenu([
 		{
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 8bf9e244e0..ff2058d79f 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -380,11 +380,16 @@ const reactionsPagination = computed(() => ({
 	},
 }));
 
+async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+		replies.value.unshift(replyNote);
+}
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
 	pureNote: note,
 	isDeletedRef: isDeleted,
+	onReplyCallback: addReplyTo,
 });
 
 useTooltip(renoteButton, async (showing) => {
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index fc30dc87aa..f4279fe8a1 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -141,6 +141,7 @@ const likeButton = shallowRef<HTMLElement>();
 
 let appearNote = computed(() => isRenote ? props.note.renote as Misskey.entities.Note : props.note);
 const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
+const replies = ref<Misskey.entities.Note[]>([]);
 
 const isRenote = (
 	props.note.renote != null &&
@@ -149,10 +150,16 @@ const isRenote = (
 	props.note.poll == null
 );
 
+async function addReplyTo(note, replyNote: Misskey.entities.Note) {
+		replies.value.unshift(replyNote);
+}
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
 	isDeletedRef: isDeleted,
+	// only update replies if we are, in fact, showing replies
+	onReplyCallback: props.detail && props.depth < numberOfReplies.value ? addReplyTo : undefined,
 });
 
 if ($i) {
@@ -259,8 +266,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
 });
 
-let replies = ref<Misskey.entities.Note[]>([]);
-
 function boostVisibility() {
 	os.popupMenu([
 		{