diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue index 83c91e34ed..7cf5d1abfe 100644 --- a/packages/frontend/src/components/MkNoteSub.vue +++ b/packages/frontend/src/components/MkNoteSub.vue @@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only <MkCwButton v-model="showContent" :note="note"/> </p> <div v-show="note.cw == null || showContent"> - <MkSubNoteContent :class="$style.text" :note="note"/> + <MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation"/> </div> </div> <footer :class="$style.footer"> @@ -121,7 +121,7 @@ const props = withDefaults(defineProps<{ const el = shallowRef<HTMLElement>(); const muted = ref($i ? checkWordMute(props.note, $i, $i.mutedWords) : false); -const translation = ref(null); +const translation = ref<any>(null); const translating = ref(false); const isDeleted = ref(false); const renoted = ref(false); diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 09a25e88ff..496ae3e457 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -10,6 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only <span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span> <MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`" v-on:click.stop><i class="ph-arrow-bend-left-up ph-bold pg-lg"></i></MkA> <Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :emojiUrls="note.emojis"/> + <div v-if="note.text && translating || note.text && translation" :class="$style.translation"> + <MkLoading v-if="translating" mini/> + <div v-else> + <b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> + <Mfm :text="translation.text" :author="note.user" :i="$i" :emojiUrls="note.emojis"/> + </div> + </div> <MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`" v-on:click.stop>RN: ...</MkA> </div> <details v-if="note.files.length > 0" :open="!defaultStore.state.collapseFiles"> @@ -42,6 +49,8 @@ import { useRouter } from '@/router.js'; const props = defineProps<{ note: Misskey.entities.Note; + translating?: boolean; + translation?: any; }>(); const router = useRouter(); @@ -102,6 +111,13 @@ const collapsed = $ref(isLong); color: var(--renote); } +.translation { + border: solid 0.5px var(--divider); + border-radius: var(--radius); + padding: 12px; + margin-top: 8px; +} + .showLess { width: 100%; margin-top: 14px;