From 8ac5c35f09fe9575a47ba5cc8cbe53b28558ac6d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 12 Mar 2023 16:39:16 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E8=A8=AD=E5=AE=9A=E3=81=8B?=
 =?UTF-8?q?=E3=82=89=E8=87=AA=E5=88=86=E3=81=AE=E3=83=AD=E3=83=BC=E3=83=AB?=
 =?UTF-8?q?=E3=82=92=E7=A2=BA=E8=AA=8D=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 .../frontend/src/pages/settings/index.vue     |  5 ++
 .../frontend/src/pages/settings/roles.vue     | 56 +++++++++++++++++++
 packages/frontend/src/router.ts               |  4 ++
 4 files changed, 66 insertions(+)
 create mode 100644 packages/frontend/src/pages/settings/roles.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 48e8c975cc..3aaa4524da 100644
--- a/CHANGELOG.md
+++ b/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エンドポイントを復旧
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
@@ -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,
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
@@ -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',