tweak MkRolePreview

packages/backend/src/core/entities/RoleEntityService.ts

@@ -62,6 +62,7 @@ export class RoleEntityService {
 			isModerator: role.isModerator,
 			canEditMembersByModerator: role.canEditMembersByModerator,
 			options: roleOptions,
+			usersCount: assigns.length,
 			...(opts.detail ? {
 				users: this.userEntityService.packMany(assigns.map(x => x.userId), me),
 			} : {}),

packages/frontend/src/components/MkRolePreview.vue

@@ -1,6 +1,10 @@
 <template>
 <MkA v-adaptive-bg :to="`/admin/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
-	<div :class="$style.title">{{ role.name }}</div>
+	<div :class="$style.title">
+		<span :class="$style.name">{{ role.name }}</span>
+		<span v-if="role.target === 'manual'" :class="$style.users">{{ role.usersCount }} users</span>
+		<span v-else-if="role.target === 'conditional'" :class="$style.users">({{ i18n.ts._role.conditional }})</span>
+	</div>
 	<div :class="$style.description">{{ role.description }}</div>
 </MkA>
 </template>
@@ -9,6 +13,7 @@
 import { } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	role: any;
@@ -23,9 +28,18 @@ const props = defineProps<{
 }
 
 .title {
+	display: flex;
+}
+
+.name {
 	font-weight: bold;
 }
 
+.users {
+	margin-left: auto;
+	opacity: 0.7;
+}
+
 .description {
 	opacity: 0.7;
 }