feat(client): 「ノート本文に翻訳ボタンを表示」をオプショナルに

CHANGELOG_CHERRYPICK.md

@@ -66,6 +66,7 @@
 - MkImgWithBlurhash에서 blurhash 그리기에 사용하는 canvas는 재사용하도록([misskey-dev#10966](https://github.com/misskey-dev/misskey/pull/10966))
 - CherryPick 고유 기능 및 개선된 기능은 [CherryPick] 배지 추가
 - 네비게이션 메뉴 편집 페이지 UI 개선 ([shrimpia bf8c84d](https://github.com/shrimpia/misskey/commit/bf8c84d299bd06cb21e18a9fe68ff9abc11fd4a0))
+- 「노트 본문에 번역 버튼 표시」를 선택 사항으로 설정
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

locales/en-US.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "English"
+translateNote: "Translate Note"
+showTranslateButtonInNote: "Display translate button in note body"
 editNickName: "닉네임 편집"
 hideAvatarsInNote: "Hide avatars in notes"
 displayBanner: "Display Banner Image"

locales/index.d.ts

@@ -3,6 +3,8 @@
 // Do not edit this file directly.
 export interface Locale {
     "_lang_": string;
+    "translateNote": string;
+    "showTranslateButtonInNote": string;
     "editNickName": string;
     "hideAvatarsInNote": string;
     "displayBanner": string;

locales/ja-JP.yml

@@ -1,5 +1,7 @@
 _lang_: "日本語"
 
+translateNote: "ノートを翻訳する"
+showTranslateButtonInNote: "ノート本文に翻訳ボタンを表示"
 editNickName: "ニックネームを編集"
 hideAvatarsInNote: "ノートでアイコンを隠す"
 displayBanner: "バナー画像の表示"

locales/ko-KR.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "한국어"
+translateNote: "노트 번역하기"
+showTranslateButtonInNote: "노트 본문에 번역 버튼 표시"
 editNickName: "닉네임 편집"
 hideAvatarsInNote: "노트에서 프로필 아이콘 숨김"
 displayBanner: "배너 이미지 표시"

packages/frontend/src/components/MkNote.vue

@@ -56,6 +56,7 @@
 							<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 							<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 							<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
+							<div style="padding-top: 5px; color: var(--accent);"><button v-if="defaultStore.state.showTranslateButtonInNote" ref="translateButton" class="_button" @mousedown="translate()">{{ i18n.ts.translateNote }}</button></div>
 							<div v-if="translating || translation" :class="$style.translation">
 								<MkLoading v-if="translating" mini/>
 								<div v-else>
@@ -178,6 +179,7 @@ import { showMovedDialog } from '@/scripts/show-moved-dialog';
 import { eventBus } from '@/scripts/cherrypick/eventBus';
 import { mainRouter } from '@/router';
 import { notePage } from '@/filters/note';
+import { miLocalStorage } from '@/local-storage';
 
 let showEl = $ref(false);
 
@@ -431,6 +433,17 @@ async function clip() {
 	os.popupMenu(await getNoteClipMenu({ note: note, isDeleted, currentClip: currentClip?.value }), clipButton.value).then(focus);
 }
 
+async function translate(): Promise<void> {
+	if (translation.value != null) return;
+	translating.value = true;
+	const res = await os.api('notes/translate', {
+		noteId: appearNote.id,
+		targetLang: miLocalStorage.getItem('lang') ?? navigator.language,
+	});
+	translating.value = false;
+	translation.value = res;
+}
+
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	pleaseLogin();

packages/frontend/src/pages/settings/general.vue

@@ -35,6 +35,7 @@
 			<div class="_gaps_s">
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
+				<MkSwitch v-model="showTranslateButtonInNote">{{ i18n.ts.showTranslateButtonInNote }} <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="largeNoteReactions">{{ i18n.ts.largeNoteReactions }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
 				<MkSwitch v-model="collapseDefault">{{ i18n.ts.collapseDefault }} <span class="_beta">CherryPick</span></MkSwitch>
@@ -319,7 +320,6 @@ const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'))
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
-const hideAvatarsInNote = computed(defaultStore.makeGetterSetter('hideAvatarsInNote'));
 const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance'));
 const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition'));
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
@@ -330,6 +330,8 @@ const newNoteReceivedNotificationBehavior = computed(defaultStore.makeGetterSett
 const fontSize = computed(defaultStore.makeGetterSetter('fontSize'));
 const collapseDefault = computed(defaultStore.makeGetterSetter('collapseDefault'));
 const requireRefreshBehavior = computed(defaultStore.makeGetterSetter('requireRefreshBehavior'));
+const hideAvatarsInNote = computed(defaultStore.makeGetterSetter('hideAvatarsInNote'));
+const showTranslateButtonInNote = computed(defaultStore.makeGetterSetter('showTranslateButtonInNote'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);

packages/frontend/src/store.ts

@@ -342,6 +342,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 
 	// #region CherryPick
+	// - Settings/General
 	useEnterToSend: {
 		where: 'device',
 		default: false,
@@ -378,6 +379,12 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	showTranslateButtonInNote: {
+		where: 'device',
+		default: true,
+	},
+
+	// - Settings/CherryPick
 	nicknameEnabled: {
 		where: 'account',
 		default: true,