fix(frontend): 削除されたノートのリノートが正しく表示されない問題を修正 (#16970)

* fix(frontend): 削除されたノートのリノートが正しく表示されない問題を修正

* Update Changelog

* 🎨

* fix

CHANGELOG.md

@@ -6,6 +6,7 @@
 ### Client
 - Fix: 特定の条件下でMisskeyが起動せず空白のページが表示されることがある問題を軽減
 - Fix: 初回読み込み時などに、言語設定で不整合が発生することがある問題を修正
+- Fix: 削除されたノートのリノートが正しく動作されない問題を修正
 
 ### Server
 - Fix: ジョブキューでSentryが有効にならない問題を修正

packages/frontend/src/components/MkNote.vue

@@ -38,7 +38,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 		</div>
 	</div>
-	<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
+	<div v-if="isRenote && note.renote == null" :class="$style.deleted">
+		{{ i18n.ts.deletedNote }}
+	</div>
+	<div v-else-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
 		<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
 		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
 	</div>
@@ -1144,4 +1147,14 @@ function emitUpdReaction(emoji: string, delta: number) {
 	opacity: .8;
 	font-size: 95%;
 }
+
+.deleted {
+	text-align: center;
+	padding: 32px;
+	margin: 6px 32px 28px;
+	--color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
+	border-radius: 8px;
+}
 </style>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -43,7 +43,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
 		</div>
 	</div>
-	<article :class="$style.note" @contextmenu.stop="onContextmenu">
+	<div v-if="isRenote && note.renote == null" :class="$style.deleted">
+		{{ i18n.ts.deletedNote }}
+	</div>
+	<article v-else :class="$style.note" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
 			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
 			<div :class="$style.noteHeaderBody">
@@ -944,4 +947,14 @@ function loadConversation() {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.deleted {
+	text-align: center;
+	padding: 32px;
+	margin: 6px 32px 32px;
+	--color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
+	border-radius: 8px;
+}
 </style>