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

3 files changed, 65 insertions, 0 deletions

diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
index a5619eab86..f1a450e18e 100644
--- a/packages/frontend/src/pages/settings/index.vue
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -135,6 +135,11 @@ const menuDef = computed(() => [{
 		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,
 		to: '/settings/instance-mute',
diff --git a/packages/frontend/src/pages/settings/roles.vue b/packages/frontend/src/pages/settings/roles.vue
new file mode 100644
index 0000000000..ba510dced3
--- /dev/null
+++ b/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>
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 70576688b1..c51c92bf06 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -50,6 +50,10 @@ export const routes = [{
 		name: 'profile',
 		component: page(() => import('./pages/settings/profile.vue')),
 	}, {
+		path: '/roles',
+		name: 'roles',
+		component: page(() => import('./pages/settings/roles.vue')),
+	}, {
 		path: '/privacy',
 		name: 'privacy',
 		component: page(() => import('./pages/settings/privacy.vue')),