From 1711ae7156ed2aa36c5f5e43facc66bfba41fe89 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 4 Mar 2023 17:36:11 +0900
Subject: [PATCH] :art:

---
 packages/frontend/src/pages/admin/roles.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index d89f0d2a7d..25d8f3ad6e 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -4,7 +4,6 @@
 		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 		<MkSpacer :content-max="700">
 			<div class="_gaps">
-				<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
 				<MkFolder>
 					<template #label>{{ i18n.ts._role.baseRole }}</template>
 					<div class="_gaps_s">
@@ -132,8 +131,20 @@
 						<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
 					</div>
 				</MkFolder>
+				<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
 				<div class="_gaps_s">
-					<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :for-moderation="true"/>
+					<MkFoldableSection>
+						<template #header>Manual roles</template>
+						<div class="_gaps_s">
+							<MkRolePreview v-for="role in roles.filter(x => x.target === 'manual')" :key="role.id" :role="role" :for-moderation="true"/>
+						</div>
+					</MkFoldableSection>
+					<MkFoldableSection>
+						<template #header>Conditional roles</template>
+						<div class="_gaps_s">
+							<MkRolePreview v-for="role in roles.filter(x => x.target === 'conditional')" :key="role.id" :role="role" :for-moderation="true"/>
+						</div>
+					</MkFoldableSection>
 				</div>
 			</div>
 		</MkSpacer>
@@ -155,6 +166,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { instance } from '@/instance';
 import { useRouter } from '@/router';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
 
 const ROLE_POLICIES = [
 	'gtlAvailable',