From 3370419b0ad36d13bdd2de0df244ee8f2a85387e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 12 May 2023 08:20:36 +0900
Subject: [PATCH] :art:

---
 locales/ja-JP.yml                             |  2 +
 .../components/MkUserSetupDialog.Privacy.vue  | 38 ++++++++++++-------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index adff5c556..0b7108fe6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -832,6 +832,8 @@ breakFollow: "フォロワーを解除"
 breakFollowConfirm: "フォロワー解除しますか？"
 itsOn: "オンになっています"
 itsOff: "オフになっています"
+on: "オン"
+off: "オフ"
 emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする"
 unread: "未読"
 filter: "フィルタ"
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
index 5fc6fd4d2..e9f4f68df 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Privacy.vue
@@ -2,22 +2,33 @@
 <div class="_gaps">
 	<MkInfo>{{ i18n.ts._initialAccountSetting.theseSettingsCanEditLater }}</MkInfo>
 
-	<MkSwitch v-model="isLocked">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
+	<MkFolder>
+		<template #label>{{ i18n.ts.makeFollowManuallyApprove }}</template>
+		<template #suffix>{{ isLocked ? i18n.ts.on : i18n.ts.off }}</template>
 
-	<MkSwitch v-model="hideOnlineStatus" @update:model-value="save()">
-		{{ i18n.ts.hideOnlineStatus }}
-		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
-	</MkSwitch>
+		<MkSwitch v-model="isLocked">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></MkSwitch>
+	</MkFolder>
 
-	<MkSwitch v-model="noCrawle" @update:model-value="save()">
-		{{ i18n.ts.noCrawle }}
-		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
-	</MkSwitch>
+	<MkFolder>
+		<template #label>{{ i18n.ts.hideOnlineStatus }}</template>
+		<template #suffix>{{ hideOnlineStatus ? i18n.ts.on : i18n.ts.off }}</template>
 
-	<MkSwitch v-model="preventAiLearning" @update:model-value="save()">
-		{{ i18n.ts.preventAiLearning }}<span class="_beta">{{ i18n.ts.beta }}</span>
-		<template #caption>{{ i18n.ts.preventAiLearningDescription }}</template>
-	</MkSwitch>
+		<MkSwitch v-model="hideOnlineStatus">{{ i18n.ts.hideOnlineStatus }}<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template></MkSwitch>
+	</MkFolder>
+
+	<MkFolder>
+		<template #label>{{ i18n.ts.noCrawle }}</template>
+		<template #suffix>{{ noCrawle ? i18n.ts.on : i18n.ts.off }}</template>
+
+		<MkSwitch v-model="noCrawle">{{ i18n.ts.noCrawle }}<template #caption>{{ i18n.ts.noCrawleDescription }}</template></MkSwitch>
+	</MkFolder>
+
+	<MkFolder>
+		<template #label>{{ i18n.ts.preventAiLearning }}</template>
+		<template #suffix>{{ preventAiLearning ? i18n.ts.on : i18n.ts.off }}</template>
+
+		<MkSwitch v-model="preventAiLearning">{{ i18n.ts.preventAiLearning }}<template #caption>{{ i18n.ts.preventAiLearningDescription }}</template></MkSwitch>
+	</MkFolder>
 
 	<MkInfo>{{ i18n.ts._initialAccountSetting.youCanEditMoreSettingsInSettingsPageLater }}</MkInfo>
 </div>
@@ -29,6 +40,7 @@ import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkInfo from '@/components/MkInfo.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os';
 import { $i } from '@/account';