enhance(client): ノートを詳しく見るときにロールバッジを表示するように

CHANGELOG_CHERRYPICK.md

@@ -52,6 +52,7 @@
 - 신고의 초기 댓글에 사용자 ID 추가 ([misskey.design fded63c](https://github.com/kiyo4act/misskey.design/commit/fded63c7317721daeb8babcdf901dc00ab475231), [misskey.design 8b6e303](https://github.com/kiyo4act/misskey.design/commit/8b6e303f184888193f4ce1daaa1629fedb46c7a9))
 - OGP 미리보기 추가 ([misskey.design 4eb0a6d](https://github.com/kiyo4act/misskey.design/commit/4eb0a6d8467c0c601e6fe37b0170c6c36f4bc8f2))
 - 더 보기! 메뉴에 도움말 추가
+- 노트를 자세히 볼 때 역할 배지를 표시하도록
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/components/MkNoteDetailed.vue

@@ -41,6 +41,9 @@
 						<MkUserName :nowrap="false" :user="appearNote.user"/>
 					</MkA>
 					<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
+					<span v-if="appearNote.user.badgeRoles" :class="$style.badgeRoles">
+						<img v-for="role in appearNote.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
+					</span>
 					<div :class="$style.noteHeaderInfo">
 						<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
 							<i v-if="appearNote.visibility === 'home'" class="ti ti-home"></i>
@@ -710,4 +713,17 @@ if (appearNote.replyId) {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.badgeRoles {
+	margin: 0 .5em 0 0;
+}
+
+.badgeRole {
+	height: 1.3em;
+	vertical-align: -20%;
+
+	& + .badgeRole {
+		margin-left: 0.2em;
+	}
+}
 </style>