enhance(client): 設定から自分のロールを確認できるように

CHANGELOG.md

@@ -16,6 +16,7 @@ You should also include the user name that made the change.
 - ユーザーごとにRenoteをミュートできるように
 - ノートごとに絵文字リアクションを受け取るか設定できるように
 - ロールの並び順を設定可能に
+- enhance(client): 設定から自分のロールを確認できるように
 - enhance(client): DM作成時にメンションも含むように
 - enhance(client): フォロー申請のボタンのデザインを改善
 - enhance(backend): OpenAPIエンドポイントを復旧

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

@@ -134,6 +134,11 @@ const menuDef = computed(() => [{
 		text: i18n.ts.importAndExport,
 		to: '/settings/import-export',
 		active: currentPage?.route.name === 'import-export',
+	}, {
+		icon: 'ti ti-badges',
+		text: i18n.ts.roles,
+		to: '/settings/roles',
+		active: currentPage?.route.name === 'roles',
 	}, {
 		icon: 'ti ti-planet-off',
 		text: i18n.ts.instanceMute,

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

@@ -0,0 +1,56 @@
+<template>
+<div class="_gaps_m">
+	<FormSection first>
+		<template #label>{{ i18n.ts.rolesAssignedToMe }}</template>
+		<div class="_gaps_s">
+			<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :for-moderation="false"/>
+		</div>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._role.policies }}</template>
+		<div class="_gaps_s">
+			<div v-for="policy in Object.keys($i.policies)" :key="policy">
+				{{ policy }} ... {{ $i.policies[policy] }}
+			</div>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import FormSplit from '@/components/form/split.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import FormSlot from '@/components/form/slot.vue';
+import FormSection from '@/components/form/section.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { defaultStore } from '@/store';
+import MkRolePreview from '@/components/MkRolePreview.vue';
+
+function save() {
+	os.apiWithDialog('i/update', {
+		
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.roles,
+	icon: 'ti ti-badges',
+});
+</script>
+
+<style lang="scss" module>
+
+</style>

packages/frontend/src/router.ts

@@ -49,6 +49,10 @@ export const routes = [{
 		path: '/profile',
 		name: 'profile',
 		component: page(() => import('./pages/settings/profile.vue')),
+	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('./pages/settings/roles.vue')),
 	}, {
 		path: '/privacy',
 		name: 'privacy',