From 3e42aede962c93976627d98ef68fed539dc56aad Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Mon, 12 Jun 2023 16:17:35 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=83=8E=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E8=A9=B3=E3=81=97=E3=81=8F=E8=A6=8B=E3=82=8B=E3=81=A8?=
 =?UTF-8?q?=E3=81=8D=E3=81=AB=E3=83=AD=E3=83=BC=E3=83=AB=E3=83=90=E3=83=83?=
 =?UTF-8?q?=E3=82=B8=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                          |  1 +
 .../frontend/src/components/MkNoteDetailed.vue   | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 39c4ab926a..282779e67a 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/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) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index fc778367eb..f7830a29c8 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/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>