From 10a2f32947f1cae4e6bdf2e573f72c3f9c8d9c1f Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 18 May 2025 14:01:47 -0400
Subject: [PATCH 1/4] fix spurious "translation failed" errors in MkNoteSub

---
 packages/frontend/src/components/MkSubNoteContent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index e2a8ee4fe6..792ad560b9 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -12,11 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :isAnim="allowAnim" :emojiUrls="note.emojis"/>
 		<MkButton v-if="!allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 		<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
-		<div v-if="note.text && translating || note.text && translation != null" :class="$style.translation">
+		<div v-if="translating || translation != null" :class="$style.translation">
 			<MkLoading v-if="translating" mini/>
 			<div v-else-if="translation && translation.text != null">
 				<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-				<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+				<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" class="_selectable"/>
 			</div>
 			<div v-else>{{ i18n.ts.translationFailed }}</div>
 		</div>

From cbb0f5a9640c2eadfde009e0e514409e4954e9c7 Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 18 May 2025 14:03:40 -0400
Subject: [PATCH 2/4] fix type errors in note translation source

---
 packages/frontend/src/components/MkNote.vue           | 2 +-
 packages/frontend/src/components/MkNoteDetailed.vue   | 2 +-
 packages/frontend/src/components/MkSubNoteContent.vue | 2 +-
 packages/frontend/src/components/SkNote.vue           | 2 +-
 packages/frontend/src/components/SkNoteDetailed.vue   | 2 +-
 packages/frontend/src/components/SkOldNoteWindow.vue  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index f4c33f6ea8..43d64eabf5 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div v-if="translating || translation != null" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else-if="translation && translation.text != null">
-								<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+								<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
 							</div>
 							<div v-else>{{ i18n.ts.translationFailed }}</div>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index dcdbfaf53f..48c66d235f 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-if="translating || translation != null" :class="$style.translation">
 					<MkLoading v-if="translating" mini/>
 					<div v-else-if="translation && translation.text != null">
-						<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+						<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 						<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
 					</div>
 					<div v-else>{{ i18n.ts.translationFailed }}</div>
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 792ad560b9..9a59678a99 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="translating || translation != null" :class="$style.translation">
 			<MkLoading v-if="translating" mini/>
 			<div v-else-if="translation && translation.text != null">
-				<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+				<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 				<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" class="_selectable"/>
 			</div>
 			<div v-else>{{ i18n.ts.translationFailed }}</div>
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 4f8b3a0900..0ff3535f64 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -91,7 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div v-if="translating || translation != null" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else-if="translation && translation.text != null">
-								<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+								<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
 							</div>
 							<div v-else>{{ i18n.ts.translationFailed }}</div>
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index e2a9ba9a40..5b01d278ec 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -112,7 +112,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div v-if="translating || translation != null" :class="$style.translation">
 					<MkLoading v-if="translating" mini/>
 					<div v-else-if="translation && translation.text != null">
-						<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+						<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 						<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
 					</div>
 					<div v-else>{{ i18n.ts.translationFailed }}</div>
diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue
index 01339dbab8..47d813ea3f 100644
--- a/packages/frontend/src/components/SkOldNoteWindow.vue
+++ b/packages/frontend/src/components/SkOldNoteWindow.vue
@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="translating || translation != null" :class="$style.translation">
 						<MkLoading v-if="translating" mini/>
 						<div v-else-if="translation && translation.text != null">
-							<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+							<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
 							<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
 						</div>
 						<div v-else>{{ i18n.ts.translationFailed }}</div>

From c412f5d69af032b6cc6e985c9591c3a106de704b Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 18 May 2025 14:51:22 -0400
Subject: [PATCH 3/4] extract common translation UI into SkNoteTranslation.vue

---
 packages/frontend/src/components/MkNote.vue   | 17 +------
 .../src/components/MkNoteDetailed.vue         | 17 +------
 .../src/components/MkSubNoteContent.vue       | 26 ++++------
 packages/frontend/src/components/SkNote.vue   | 17 +------
 .../src/components/SkNoteDetailed.vue         | 17 +------
 .../src/components/SkNoteTranslation.vue      | 48 +++++++++++++++++++
 .../src/components/SkOldNoteWindow.vue        | 17 +------
 7 files changed, 67 insertions(+), 92 deletions(-)
 create mode 100644 packages/frontend/src/components/SkNoteTranslation.vue

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 43d64eabf5..3418676d58 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -86,14 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:isBlock="true"
 							class="_selectable"
 						/>
-						<div v-if="translating || translation != null" :class="$style.translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else-if="translation && translation.text != null">
-								<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
-							</div>
-							<div v-else>{{ i18n.ts.translationFailed }}</div>
-						</div>
+						<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 						<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 						<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
 					</div>
@@ -241,6 +234,7 @@ import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { useRouter } from '@/router.js';
 import SkMutedNote from '@/components/SkMutedNote.vue';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -1169,13 +1163,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 0.5em;
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .urlPreview {
 	margin-top: 8px;
 }
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 48c66d235f..bde2086508 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -104,14 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					class="_selectable"
 				/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
-				<div v-if="translating || translation != null" :class="$style.translation">
-					<MkLoading v-if="translating" mini/>
-					<div v-else-if="translation && translation.text != null">
-						<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
-					</div>
-					<div v-else>{{ i18n.ts.translationFailed }}</div>
-				</div>
+				<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 				<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 				<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
 				<div v-if="appearNote.files && appearNote.files.length > 0">
@@ -291,6 +284,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import SkMutedNote from '@/components/SkMutedNote.vue';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -1055,13 +1049,6 @@ function animatedMFM() {
 	color: var(--MI_THEME-renote);
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .poll {
 	font-size: 80%;
 }
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 9a59678a99..0780f6c910 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -12,14 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :isAnim="allowAnim" :emojiUrls="note.emojis"/>
 		<MkButton v-if="!allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 		<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated && !hideFiles" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
-		<div v-if="translating || translation != null" :class="$style.translation">
-			<MkLoading v-if="translating" mini/>
-			<div v-else-if="translation && translation.text != null">
-				<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-				<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" class="_selectable"/>
-			</div>
-			<div v-else>{{ i18n.ts.translationFailed }}</div>
-		</div>
+		<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`" @click.stop>RN: ...</MkA>
 	</div>
 	<details v-if="note.files && note.files.length > 0" :open="!prefer.s.collapseFiles && !hideFiles">
@@ -52,14 +45,20 @@ import * as os from '@/os.js';
 import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
 import { useRouter } from '@/router';
 import { prefer } from '@/preferences.js';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
 	translating?: boolean;
 	translation?: Misskey.entities.NotesTranslateResponse | false | null;
 	hideFiles?: boolean;
 	expandAllCws?: boolean;
-}>();
+}>(), {
+	translating: false,
+	translation: null,
+	hideFiles: false,
+	expandAllCws: false,
+});
 
 const router = useRouter();
 
@@ -141,13 +140,6 @@ watch(() => props.expandAllCws, (expandAllCws) => {
 	color: var(--MI_THEME-renote);
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .showLess {
 	width: 100%;
 	margin-top: 14px;
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 0ff3535f64..197d0ecc0d 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -88,14 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:isAnim="allowAnim"
 							:isBlock="true"
 						/>
-						<div v-if="translating || translation != null" :class="$style.translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else-if="translation && translation.text != null">
-								<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
-							</div>
-							<div v-else>{{ i18n.ts.translationFailed }}</div>
-						</div>
+						<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 						<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 						<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
 					</div>
@@ -241,6 +234,7 @@ import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { useRouter } from '@/router.js';
 import SkMutedNote from '@/components/SkMutedNote.vue';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -1203,13 +1197,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 0.5em;
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .urlPreview {
 	margin-top: 8px;
 }
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 5b01d278ec..02cc53fc24 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -109,14 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					class="_selectable"
 				/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
-				<div v-if="translating || translation != null" :class="$style.translation">
-					<MkLoading v-if="translating" mini/>
-					<div v-else-if="translation && translation.text != null">
-						<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
-					</div>
-					<div v-else>{{ i18n.ts.translationFailed }}</div>
-				</div>
+				<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 				<MkButton v-if="!allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-play ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.play }}</MkButton>
 				<MkButton v-else-if="!prefer.s.animatedMfm && allowAnim && animated" :class="$style.playMFMButton" :small="true" @click="animatedMFM()" @click.stop><i class="ph-stop ph-bold ph-lg "></i> {{ i18n.ts._animatedMFM.stop }}</MkButton>
 				<div v-if="appearNote.files && appearNote.files.length > 0">
@@ -296,6 +289,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import SkMutedNote from '@/components/SkMutedNote.vue';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -1113,13 +1107,6 @@ onUnmounted(() => {
 	color: var(--MI_THEME-renote);
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .poll {
 	font-size: 80%;
 }
diff --git a/packages/frontend/src/components/SkNoteTranslation.vue b/packages/frontend/src/components/SkNoteTranslation.vue
new file mode 100644
index 0000000000..75fe11988c
--- /dev/null
+++ b/packages/frontend/src/components/SkNoteTranslation.vue
@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="translating || translation != null" :class="$style.translation">
+	<MkLoading v-if="translating" mini/>
+	<div v-else-if="translation && translation.text != null">
+		<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
+		<Mfm :text="translation.text" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis" class="_selectable"/>
+	</div>
+	<div v-else>{{ i18n.ts.translationFailed }}</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { watch } from 'vue';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	note: Misskey.entities.Note;
+	translating?: boolean;
+	translation?: Misskey.entities.NotesTranslateResponse | false | null;
+}>(), {
+	translating: false,
+	translation: null,
+});
+
+if (_DEV_) {
+	// Prop watch syntax: https://stackoverflow.com/a/59127059
+	watch(
+		[() => props.translation, () => props.translating],
+		([translation, translating]) => console.debug('Translation status changed: ', { translation, translating }),
+		{ immediate: true },
+	);
+}
+</script>
+
+<style module lang="scss">
+.translation {
+	border: solid 0.5px var(--MI_THEME-divider);
+	border-radius: var(--MI-radius);
+	padding: 12px;
+	margin-top: 8px;
+}
+</style>
diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue
index 47d813ea3f..608722def0 100644
--- a/packages/frontend/src/components/SkOldNoteWindow.vue
+++ b/packages/frontend/src/components/SkOldNoteWindow.vue
@@ -42,14 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
 					<Mfm v-if="appearNote.text" :text="appearNote.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
 					<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
-					<div v-if="translating || translation != null" :class="$style.translation">
-						<MkLoading v-if="translating" mini/>
-						<div v-else-if="translation && translation.text != null">
-							<b v-if="translation.sourceLang">{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-							<Mfm :text="translation.text" :isBlock="true" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
-						</div>
-						<div v-else>{{ i18n.ts.translationFailed }}</div>
-					</div>
+					<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
 					<div v-if="appearNote.files && appearNote.files.length > 0">
 						<MkMediaList :mediaList="appearNote.files"/>
 					</div>
@@ -99,6 +92,7 @@ import { deepClone } from '@/utility/clone.js';
 import { dateTimeFormat } from '@/utility/intl-const.js';
 import { prefer } from '@/preferences';
 import { getPluginHandlers } from '@/plugin.js';
+import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -260,13 +254,6 @@ const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceT
 	color: var(--MI_THEME-renote);
 }
 
-.translation {
-	border: solid 0.5px var(--MI_THEME-divider);
-	border-radius: var(--MI-radius);
-	padding: 12px;
-	margin-top: 8px;
-}
-
 .poll {
 	font-size: 80%;
 }

From be1326372bcc39b84cf15ced505793e35ca0ba4a Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Mon, 19 May 2025 18:27:20 -0400
Subject: [PATCH 4/4] add missing import file extension

---
 packages/frontend/src/components/SkNoteTranslation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/SkNoteTranslation.vue b/packages/frontend/src/components/SkNoteTranslation.vue
index 75fe11988c..170eea80cf 100644
--- a/packages/frontend/src/components/SkNoteTranslation.vue
+++ b/packages/frontend/src/components/SkNoteTranslation.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
 import { watch } from 'vue';
-import { i18n } from '@/i18n';
+import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;