extract common translation UI into SkNoteTranslation.vue

1 files changed, 9 insertions, 17 deletions

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;