feat: use UI language as second candidate of translation target

README.md

@@ -18,6 +18,7 @@
 		- 追加と変更: 「追加」に加え、既存のカスタム絵文字の名前・カテゴリ・タグ・ライセンスの編集を許可する
 		- 全て許可:「追加と変更」に加え、既存のカスタム絵文字の削除を許可する
 - UI 用の言語とは別に、投稿翻訳に使用する言語を設定可能に
+  - UI 用の言語は翻訳先の言語の第二候補として使われます（投稿の言語と投稿翻訳先に設定した言語が同じだった場合には UI 用の言語に翻訳されます）
 - 投稿言語を自動検出して外国語の投稿に翻訳ボタンを表示する設定を追加
 - モバイル表示の下部のウィジェットボタンを再読み込みボタンに変更可能に
   - スマートフォンでウィジェットは使わないけど再読み込みはたくさんする人はいそう

packages/client/src/components/MkNote.vue

@@ -365,28 +365,46 @@ const detectLanguage = (src: string): string => {
 	return detectLanguage_(purified);
 };
 
+const localTranslateLang = localStorage.getItem("translateLang");
+const localLang = localStorage.getItem("lang");
+
 const isForeignLanguage: boolean =
 	defaultStore.state.detectPostLanguage &&
 	(() => {
 		const targetLanguage = (
-			localStorage.getItem("translateLang") ||
+			localTranslateLang ||
-			localStorage.getItem("lang") ||
+			localLang ||
 			navigator.language
 		)?.slice(0, 2);
 		const postLanguage = detectLanguage(appearNote.value.text);
 		return postLanguage !== "" && postLanguage !== targetLanguage;
 	})();
 
+const translate_ = async (noteId: number, targetLang: string) => {
+	return await os.api("notes/translate", {
+		noteId: noteId,
+		targetLang: targetLang,
+	});
+};
+
 const translate = async () => {
 	if (translation.value != null) return;
 	translating.value = true;
-	translation.value = await os.api("notes/translate", {
+	translation.value = await translate_(
-		noteId: appearNote.value.id,
+		appearNote.value.id,
-		targetLang:
+		localTranslateLang || localLang || navigator.language,
-			localStorage.getItem("translateLang") ||
+	);
-			localStorage.getItem("lang") ||
+
-			navigator.language,
+	// use UI language as the second translation target
-	});
+	if (
+		localTranslateLang != null &&
+		localLang != null &&
+		localTranslateLang !== localLang &&
+		(!translation.value ||
+			translation.value.sourceLang.toLowerCase() ===
+				localTranslateLang.slice(0, 2))
+	)
+		translation.value = await translate_(appearNote.value.id, localLang);
 	translating.value = false;
 };
 

packages/client/src/components/MkNoteSub.vue

@@ -286,28 +286,46 @@ const detectLanguage = (src: string): string => {
 	return detectLanguage_(purified);
 };
 
+const localTranslateLang = localStorage.getItem("translateLang");
+const localLang = localStorage.getItem("lang");
+
 const isForeignLanguage: boolean =
 	defaultStore.state.detectPostLanguage &&
 	(() => {
 		const targetLanguage = (
-			localStorage.getItem("translateLang") ||
+			localTranslateLang ||
-			localStorage.getItem("lang") ||
+			localLang ||
 			navigator.language
 		)?.slice(0, 2);
 		const postLanguage = detectLanguage(appearNote.value.text);
 		return postLanguage !== "" && postLanguage !== targetLanguage;
 	})();
 
+const translate_ = async (noteId: number, targetLang: string) => {
+	return await os.api("notes/translate", {
+		noteId: noteId,
+		targetLang: targetLang,
+	});
+};
+
 const translate = async () => {
 	if (translation.value != null) return;
 	translating.value = true;
-	translation.value = await os.api("notes/translate", {
+	translation.value = await translate_(
-		noteId: appearNote.value.id,
+		appearNote.value.id,
-		targetLang:
+		localTranslateLang || localLang || navigator.language,
-			localStorage.getItem("translateLang") ||
+	);
-			localStorage.getItem("lang") ||
+
-			navigator.language,
+	// use UI language as the second translation target
-	});
+	if (
+		localTranslateLang != null &&
+		localLang != null &&
+		localTranslateLang !== localLang &&
+		(!translation.value ||
+			translation.value.sourceLang.toLowerCase() ===
+				localTranslateLang.slice(0, 2))
+	)
+		translation.value = await translate_(appearNote.value.id, localLang);
 	translating.value = false;
 };
 

packages/client/src/scripts/get-note-menu.ts

@@ -236,19 +236,36 @@ export function getNoteMenu(props: {
 		});
 	}
 
-	async function translate(): Promise<void> {
+	const localTranslateLang = localStorage.getItem("translateLang");
+	const localLang = localStorage.getItem("lang");
+
+	const translate_ = async (noteId: number, targetLang: string) => {
+		return await os.api("notes/translate", {
+			noteId: noteId,
+			targetLang: targetLang,
+		});
+	};
+
+	const translate = async () => {
 		if (props.translation.value != null) return;
 		props.translating.value = true;
-		const res = await os.api("notes/translate", {
+		props.translation.value = await translate_(
-			noteId: appearNote.id,
+			appearNote.id,
-			targetLang:
+			localTranslateLang || localLang || navigator.language,
-				localStorage.getItem("translateLang") ||
+		);
-				localStorage.getItem("lang") ||
+
-				navigator.language,
+		// use UI language as the second translation target
-		});
+		if (
+			localTranslateLang != null &&
+			localLang != null &&
+			localTranslateLang !== localLang &&
+			(!props.translation.value ||
+				props.translation.value.sourceLang.toLowerCase() ===
+					localTranslateLang.slice(0, 2))
+		)
+			props.translation.value = await translate_(appearNote.id, localLang);
 		props.translating.value = false;
-		props.translation.value = res;
+	};
-	}
 
 	let menu;
 	if ($i) {