fix: use note capture in MkNoteSimple

packages/client/src/components/MkNoteSimple.vue

@@ -1,5 +1,10 @@
 <template>
-	<div v-size="{ min: [350, 500] }" class="yohlumlk">
+	<div
+		v-show="!deleted"
+		v-size="{ min: [350, 500] }"
+		class="yohlumlk"
+		ref="el"
+	>
 		<MkAvatar class="avatar" :user="note.user" />
 		<div class="main">
 			<XNoteHeader class="header" :note="note" :mini="true" />
@@ -14,11 +19,40 @@
 import type { entities } from "firefish-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import { computed, ref, watch } from "vue";
+import { deepClone } from "@/scripts/clone";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { isDeleted } from "@/scripts/note";
 
-defineProps<{
+const props = defineProps<{
 	note: entities.Note;
 	pinned?: boolean;
 }>();
+
+const rootEl = ref<HTMLElement | null>(null);
+const note = ref(deepClone(props.note));
+const deleted = computed(() => isDeleted(note.value.id));
+let capture = useNoteCapture({
+	note,
+	rootEl,
+});
+
+function reload() {
+	note.value = deepClone(props.note);
+	capture.close();
+	capture = useNoteCapture({
+		note,
+		rootEl,
+	});
+}
+
+watch(
+	() => props.note.id,
+	(o, n) => {
+		if (o === n) return;
+		reload();
+	},
+);
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,5 @@
 import type { Ref } from "vue";
-import { onUnmounted } from "vue";
+import { onUnmounted, ref } from "vue";
 import { useStream } from "@/stream";
 import { isSignedIn, me } from "@/me";
 import * as os from "@/os";
@@ -33,7 +33,7 @@ function eachNote(id: NoteType["id"], cb: (note: Ref<NoteType>) => void) {
 export function useNoteCapture(props: {
 	rootEl: Ref<HTMLElement | null>;
 	note: Ref<NoteType>;
-	isDeletedRef: Ref<boolean>;
+	isDeletedRef?: Ref<boolean>;
 	onReplied?: (note: NoteType) => void;
 }) {
 	let closed = false;
@@ -42,7 +42,7 @@ export function useNoteCapture(props: {
 	addToNoteRefs(note);
 
 	function onDeleted() {
-		props.isDeletedRef.value = true;
+		if (props.isDeletedRef) props.isDeletedRef.value = true;
 		deletedNoteIds.set(note.value.id, true);
 
 		if (note.value.replyId) {