diff --git a/packages/backend/src/core/entities/RoleEntityService.ts b/packages/backend/src/core/entities/RoleEntityService.ts index 27e34a649a..7db7ed6695 100644 --- a/packages/backend/src/core/entities/RoleEntityService.ts +++ b/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), } : {}), diff --git a/packages/frontend/src/components/MkRolePreview.vue b/packages/frontend/src/components/MkRolePreview.vue index ddd7dbb250..da3963025b 100644 --- a/packages/frontend/src/components/MkRolePreview.vue +++ b/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; }