feat: ロールにアイコンを設定してユーザー名の横に表示できるように

Resolve #9761

3 files changed, 45 insertions, 11 deletions

diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 8771168a42..6b43f14665 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -5,6 +5,9 @@
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+	<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
+		<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
+	</div>
 	<div :class="$style.info">
 		<MkA :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
@@ -77,4 +80,17 @@ defineProps<{
 	margin-left: auto;
 	font-size: 0.9em;
 }
+
+.badgeRoles {
+	margin: 0 .5em 0 0;
+}
+
+.badgeRole {
+	height: 1.3em;
+	vertical-align: -20%;
+
+	& + .badgeRole {
+		margin-left: .125em;
+	}
+}
 </style>
diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index ae5ef39bae..086537a94a 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -13,6 +13,10 @@
 		<template #caption>#RRGGBB</template>
 	</MkInput>
 
+	<MkInput v-model="iconUrl">
+		<template #label>{{ i18n.ts._role.iconUrl }}</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>
@@ -35,6 +39,21 @@
 		</div>
 	</MkFolder>
 
+	<MkSwitch v-model="canEditMembersByModerator" :readonly="readonly">
+		<template #label>{{ i18n.ts._role.canEditMembersByModerator }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfCanEditMembersByModerator }}</template>
+	</MkSwitch>
+
+	<MkSwitch v-model="isPublic" :readonly="readonly">
+		<template #label>{{ i18n.ts._role.isPublic }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfIsPublic }}</template>
+	</MkSwitch>
+
+	<MkSwitch v-model="asBadge" :readonly="readonly">
+		<template #label>{{ i18n.ts._role.asBadge }}</template>
+		<template #caption>{{ i18n.ts._role.descriptionOfAsBadge }}</template>
+	</MkSwitch>
+
 	<FormSlot>
 		<template #label><i class="ti ti-license"></i> {{ i18n.ts._role.policies }}</template>
 		<div class="_gaps_s">
@@ -358,16 +377,6 @@
 		</div>
 	</FormSlot>
 
-	<MkSwitch v-model="canEditMembersByModerator" :readonly="readonly">
-		<template #label>{{ i18n.ts._role.canEditMembersByModerator }}</template>
-		<template #caption>{{ i18n.ts._role.descriptionOfCanEditMembersByModerator }}</template>
-	</MkSwitch>
-
-	<MkSwitch v-model="isPublic" :readonly="readonly">
-		<template #label>{{ i18n.ts._role.isPublic }}</template>
-		<template #caption>{{ i18n.ts._role.descriptionOfIsPublic }}</template>
-	</MkSwitch>
-
 	<div v-if="!readonly" class="_buttons">
 		<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ role ? i18n.ts.save : i18n.ts.create }}</MkButton>
 	</div>
@@ -426,9 +435,11 @@ let name = $ref(role?.name ?? 'New Role');
 let description = $ref(role?.description ?? '');
 let rolePermission = $ref(role?.isAdministrator ? 'administrator' : role?.isModerator ? 'moderator' : 'normal');
 let color = $ref(role?.color ?? null);
+let iconUrl = $ref(role?.iconUrl ?? null);
 let target = $ref(role?.target ?? 'manual');
 let condFormula = $ref(role?.condFormula ?? { id: uuid(), type: 'isRemote' });
 let isPublic = $ref(role?.isPublic ?? false);
+let asBadge = $ref(role?.asBadge ?? false);
 let canEditMembersByModerator = $ref(role?.canEditMembersByModerator ?? false);
 
 const policies = reactive<Record<typeof ROLE_POLICIES[number], { useDefault: boolean; priority: number; value: any; }>>({});
@@ -466,11 +477,13 @@ async function save() {
 			name,
 			description,
 			color: color === '' ? null : color,
+			iconUrl: iconUrl === '' ? null : iconUrl,
 			target,
 			condFormula,
 			isAdministrator: rolePermission === 'administrator',
 			isModerator: rolePermission === 'moderator',
 			isPublic,
+			asBadge,
 			canEditMembersByModerator,
 			policies,
 		});
@@ -480,11 +493,13 @@ async function save() {
 			name,
 			description,
 			color: color === '' ? null : color,
+			iconUrl: iconUrl === '' ? null : iconUrl,
 			target,
 			condFormula,
 			isAdministrator: rolePermission === 'administrator',
 			isModerator: rolePermission === 'moderator',
 			isPublic,
+			asBadge,
 			canEditMembersByModerator,
 			policies,
 		});
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index c960b31274..56858a9377 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -39,7 +39,10 @@
 						</div>
 					</div>
 					<div v-if="user.roles.length > 0" class="roles">
-						<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">{{ role.name }}</span>
+						<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">
+							<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
+							{{ role.name }}
+						</span>
 					</div>
 					<div class="description">
 						<MkOmit>