enhance(frontend): モデレーターがセンシティブ設定を変更する際に確認ダイアログを出すように (#15462)

* enhance(frontend): モデレーターがセンシティブ設定を変更する際に確認ダイアログを出すように

* use MkSwitch

* Update Changelog

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fix: システムアカウントが削除できる問題を修正
 
 ### Client
+- Enhance: モデレーターがセンシティブ設定を変更する際に確認ダイアログを出すように
 - Fix: 削除して編集の削除タイミングを投稿後になるように `#14498`
 
 ### Server

locales/index.d.ts

@@ -5262,6 +5262,14 @@ export interface Locale extends ILocale {
      * " {emoji} " をリアクションしますか？
      */
     "reactAreYouSure": ParameterizedString<"emoji">;
+    /**
+     * このメディアをセンシティブとして設定しますか？
+     */
+    "markAsSensitiveConfirm": string;
+    /**
+     * このメディアのセンシティブ指定を解除しますか？
+     */
+    "unmarkAsSensitiveConfirm": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする

locales/ja-JP.yml

@@ -1311,6 +1311,8 @@ federationSpecified: "このサーバーはホワイトリスト連合で運用
 federationDisabled: "このサーバーは連合が無効化されています。他のサーバーのユーザーとやり取りすることはできません。"
 confirmOnReact: "リアクションする際に確認する"
 reactAreYouSure: "\" {emoji} \" をリアクションしますか？"
+markAsSensitiveConfirm: "このメディアをセンシティブとして設定しますか？"
+unmarkAsSensitiveConfirm: "このメディアのセンシティブ指定を解除しますか？"
 
 _accountSettings:
   requireSigninToViewContents: "コンテンツの表示にログインを必須にする"

packages/frontend/src/components/MkMediaAudio.vue

@@ -259,7 +259,14 @@ function showMenu(ev: MouseEvent) {
 	});
 }
 
-function toggleSensitive(file: Misskey.entities.DriveFile) {
+async function toggleSensitive(file: Misskey.entities.DriveFile) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
+	});
+
+	if (canceled) return;
+
 	os.apiWithDialog('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,

packages/frontend/src/components/MkMediaImage.vue

@@ -124,11 +124,21 @@ function showMenu(ev: MouseEvent) {
 
 	if (iAmModerator) {
 		menuItems.push({
-			text: i18n.ts.markAsSensitive,
+			text: props.image.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
 			icon: 'ti ti-eye-exclamation',
 			danger: true,
-			action: () => {
+			action: async () => {
-				os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
+				const { canceled } = await os.confirm({
+					type: 'warning',
+					text: props.image.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
+				});
+
+				if (canceled) return;
+
+				os.apiWithDialog('drive/files/update', {
+					fileId: props.image.id,
+					isSensitive: !props.image.isSensitive,
+				});
 			},
 		});
 	}

packages/frontend/src/components/MkMediaVideo.vue

@@ -284,7 +284,14 @@ function showMenu(ev: MouseEvent) {
 	});
 }
 
-function toggleSensitive(file: Misskey.entities.DriveFile) {
+async function toggleSensitive(file: Misskey.entities.DriveFile) {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
+	});
+
+	if (canceled) return;
+
 	os.apiWithDialog('drive/files/update', {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,

packages/frontend/src/pages/admin-file.vue

@@ -36,8 +36,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-if="file.user" class="user" :to="`/admin/user/${file.user.id}`">
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
+
 			<div>
-				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">{{ i18n.ts.sensitive }}</MkSwitch>
+				<MkSwitch :modelValue="isSensitive" @update:modelValue="toggleSensitive">{{ i18n.ts.sensitive }}</MkSwitch>
 			</div>
 
 			<div>
@@ -117,9 +118,21 @@ async function del() {
 	});
 }
 
-async function toggleIsSensitive(v) {
+async function toggleSensitive() {
-	await misskeyApi('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	if (!file.value) return;
-	isSensitive.value = v;
+
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: isSensitive.value ? i18n.ts.unmarkAsSensitiveConfirm : i18n.ts.markAsSensitiveConfirm,
+	});
+
+	if (canceled) return;
+	isSensitive.value = !isSensitive.value;
+
+	os.apiWithDialog('drive/files/update', {
+		fileId: file.value.id,
+		isSensitive: !file.value.isSensitive,
+	});
 }
 
 const headerActions = computed(() => [{