fix: tweak settings

locales/ja-JP.yml

@@ -3248,6 +3248,7 @@ _gridComponent:
     notUnique: "この値は一意である必要があります"
 
 _roleDisplay:
+  title: "ロールの表示/非表示"
   description: "自分に割り当てられているロールを確認したり、プロフィールやノート上で表示・公開するロールを選択したりできます。"
   roleExplorableAlert: "このロールは、管理者により、{link}への表示とロールタイムラインの有効化が設定されています。プロフィール上で非表示にすることはできますが、あなたにこのロールが付与されていることが知られる可能性があります。"
   displayToggle: "ロール/ロールバッジを表示する"

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

@@ -93,11 +93,6 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		text: i18n.ts.privacy,
 		to: '/settings/privacy',
 		active: currentPage.value?.route.name === 'privacy',
-	}, {
-		icon: 'ti ti-badges',
-		text: i18n.ts.roles,
-		to: '/settings/roles',
-		active: currentPage.value?.route.name === 'roles',
 	}, {
 		icon: 'ti ti-bell',
 		text: i18n.ts.notifications,

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

@@ -151,6 +151,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<hr>
 
+		<FormLink to="/settings/roles">
+			<template #icon><i class="ti ti-badges"></i></template>
+			<SearchLabel>{{ i18n.ts._roleDisplay.title }}</SearchLabel>
+		</FormLink>
+
 		<SearchMarker :keywords="['qrcode']">
 			<FormLink to="/qr">
 				<template #icon><i class="ti ti-qrcode"></i></template>

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

@@ -9,29 +9,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkFeatureBanner icon="/fluent-emoji/1f3f7.png" color="#ffbf00">
 			<SearchText>{{ i18n.ts._roleDisplay.description }}</SearchText>
 		</MkFeatureBanner>
-		<SearchMarker :keywords="['roles']">
-			<div class="_gaps_s">
-				<MkResult v-if="roleDisplayRoles.length === 0" type="empty"/>
-				<div v-for="role in roleDisplayRoles" :key="role.id" class="_panel _gaps" :class="$style.roleItem">
-					<MkRolePreview :role="role" :forModeration="false"/>
-					<MkSwitch
-						:modelValue="isRoleDisplayShown(role)"
-						:disabled="role.isPublicDisplayRequired"
-						@update:modelValue="value => updateRoleDisplay(role, value)"
-					>
-						<template #label>{{ i18n.ts._roleDisplay.displayToggle }}</template>
-						<template v-if="role.isPublicDisplayRequired" #caption>{{ i18n.ts._roleDisplay.alwaysShownByAdmin }}</template>
-						<template v-else-if="role.isExplorable" #caption>
-							<i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> <I18n :src="i18n.ts._roleDisplay.roleExplorableAlert">
-								<template #link>
-									<MkA class="_link" :to="`/roles/${role.id}`">{{ i18n.ts.explore }}</MkA>
-								</template>
-							</I18n>
-						</template>
-					</MkSwitch>
-				</div>
+		<div class="_gaps_s">
+			<MkResult v-if="roleDisplayRoles.length === 0" type="empty"/>
+			<div v-for="role in roleDisplayRoles" :key="role.id" class="_panel _gaps" :class="$style.roleItem">
+				<MkRolePreview :role="role" :forModeration="false"/>
+				<MkSwitch
+					:modelValue="isRoleDisplayShown(role)"
+					:disabled="role.isPublicDisplayRequired"
+					@update:modelValue="value => updateRoleDisplay(role, value)"
+				>
+					<template #label>{{ i18n.ts._roleDisplay.displayToggle }}</template>
+					<template v-if="role.isPublicDisplayRequired" #caption>{{ i18n.ts._roleDisplay.alwaysShownByAdmin }}</template>
+					<template v-else-if="role.isExplorable" #caption>
+						<i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> <I18n :src="i18n.ts._roleDisplay.roleExplorableAlert">
+							<template #link>
+								<MkA class="_link" :to="`/roles/${role.id}`">{{ i18n.ts.explore }}</MkA>
+							</template>
+						</I18n>
+					</template>
+				</MkSwitch>
 			</div>
-		</SearchMarker>
+		</div>
 	</div>
 </SearchMarker>
 </template>

packages/i18n/src/autogen/locale.ts

@@ -12188,6 +12188,10 @@ export interface Locale extends ILocale {
         };
     };
     "_roleDisplay": {
+        /**
+         * ロールの表示/非表示
+         */
+        "title": string;
         /**
          * 自分に割り当てられているロールを確認したり、プロフィールやノート上で表示・公開するロールを選択したりできます。
          */