extract common translation UI into SkNoteTranslation.vue

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">
+						<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-							<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>
 						<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;
 }

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">
+				<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-					<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>
 				<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%;
 }

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">
+		<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-			<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>
 		<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;

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">
+						<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-							<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>
 						<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;
 }

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">
+				<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-					<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>
 				<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%;
 }

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>

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">
+					<SkNoteTranslation :note="note" :translation="translation" :translating="translating"></SkNoteTranslation>
-						<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>
 					<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%;
 }