enhance: ロールの並び順を設定可能に

packages/frontend/src/pages/admin/roles.edit.vue

@@ -55,6 +55,7 @@ if (props.id) {
 		isPublic: false,
 		asBadge: false,
 		canEditMembersByModerator: false,
+		displayOrder: 0,
 		policies: {},
 	};
 }

packages/frontend/src/pages/admin/roles.editor.vue

@@ -17,6 +17,11 @@
 		<template #label>{{ i18n.ts._role.iconUrl }}</template>
 	</MkInput>
 
+	<MkInput v-model="role.displayOrder" type="number">
+		<template #label>{{ i18n.ts._role.displayOrder }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfDisplayOrder }}</template>
+	</MkInput>
+
 	<MkSelect v-model="rolePermission" :readonly="readonly">
 		<template #label><i class="ti ti-shield-lock"></i> {{ i18n.ts._role.permission }}</template>
 		<template #caption><div v-html="i18n.ts._role.descriptionOfPermission.replaceAll('\n', '<br>')"></div></template>
@@ -444,6 +449,7 @@ const save = throttle(100, () => {
 		description: role.description,
 		color: role.color === '' ? null : role.color,
 		iconUrl: role.iconUrl === '' ? null : role.iconUrl,
+		displayOrder: role.displayOrder,
 		target: role.target,
 		condFormula: role.condFormula,
 		isAdministrator: role.isAdministrator,

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

@@ -1,5 +1,5 @@
 <template>
-<MkSpacer :content-max="1200">
+<MkSpacer :content-max="700">
 	<div class="_gaps_s">
 		<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :for-moderation="false"/>
 	</div>
@@ -13,10 +13,8 @@ import * as os from '@/os';
 
 let roles = $ref();
 
-os.api('roles/list', {
-	limit: 30,
-}).then(res => {
-	roles = res.filter(x => x.target === 'manual');
+os.api('roles/list').then(res => {
+	roles = res.filter(x => x.target === 'manual').sort((a, b) => b.displayOrder - a.displayOrder);
 });
 </script>