enhance(client): 返信ノートのデザイン改善

CHANGELOG_CHERRYPICK.md

@@ -37,6 +37,7 @@
 - 노트 디자인 개선
 - 채팅을 읽지 않았을 떄 표시되는 인디케이터의 위치 조정
 - 이미 읽은 채팅은 가독성 개선을 위해 배경을 연하게
+- 답글 노트의 디자인 개선
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/components/MkNote.vue

@@ -43,7 +43,7 @@
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div style="display: flex; padding-bottom: 10px;">
 			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-			<MkAvatar :class="[$style.avatar, { [$style.showEl]: showEl && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: showEl && mainRouter.currentRoute.value.name !== 'index' }]" :user="appearNote.user" link preview/>
+			<MkAvatar :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply, [$style.showEl]: !appearNote.reply && showEl && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: !appearNote.reply && showEl && mainRouter.currentRoute.value.name !== 'index' }]" :user="appearNote.user" link preview/>
 			<div :class="$style.main">
 				<MkNoteHeader :note="appearNote" :mini="true"/>
 				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
@@ -689,6 +689,11 @@ function showReactions(): void {
 	position: sticky !important;
 	top: calc(22px + var(--stickyTop, 0px));
 	left: 0;
+
+	&.avatarReplyTo {
+		position: relative !important;
+		top: 0 !important;
+	}
 }
 
 .main {

packages/frontend/src/components/MkNoteSub.vue

@@ -1,5 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.children]: depth > 1 }]">
+	<div :class="$style.line"></div>
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
@@ -71,6 +72,13 @@ if (props.detail) {
 	}
 }
 
+.line {
+	position: absolute;
+	height: 100%;
+	left: 55px;
+	border-left: 2.5px dotted rgb(174, 174, 174);
+}
+
 .main {
 	display: flex;
 }
@@ -129,12 +137,20 @@ if (props.detail) {
 	.root {
 		padding: 28px 26px 0;
 	}
+
+	.line {
+		left: 48.5px;
+	}
 }
 
 @container (max-width: 500px) {
 	.root {
 		padding: 23px 25px;
 	}
+
+	.line {
+		left: 47.5px;
+	}
 }
 
 @container (max-width: 480px) {
@@ -146,6 +162,10 @@ if (props.detail) {
 		}
 	}
 
+	.line {
+		left: 46px;
+	}
+
 	.avatar {
 		width: 46px;
 		height: 46px;