things

Co-authored-by: daph <d@waal.me>

packages/frontend/src/components/SkNote.vue

@@ -1198,4 +1198,31 @@ function emitUpdReaction(emoji: string, delta: number) {
 .clickToOpen {
 	cursor: pointer;
 }
+
+// thread line
+.avatarReplyTo::before {
+	position: absolute;
+	content: '';
+	width: 0px;
+	height: 28px;
+	left: 29px;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	top: -28px;
+}
+
+@container (max-width: 580px) {
+	.avatarReplyTo::before {
+		height: 24px;
+		top: -24px;
+		left: 25px;
+	}
+}
+
+@container (max-width: 450px) {
+	.avatarReplyTo::before {
+		height: 22px;
+		top: -22px;
+		left: 23px;
+	}
+}
 </style>

packages/frontend/src/components/SkNoteDetailed.vue

@@ -768,7 +768,7 @@ function animatedMFM() {
 .renote {
 	display: flex;
 	align-items: center;
-	padding: 16px 32px 8px 32px;
+	padding: 16px 32px 8px 47px;
 	line-height: 28px;
 	white-space: pre;
 	color: var(--renote);
@@ -1079,4 +1079,48 @@ function animatedMFM() {
 		margin-left: 0.2em;
 	}
 }
+
+// thread line
+[class*="threadAncestor"] + .note .noteHeader::before {
+	position: absolute;
+	content: '';
+	width: 0px;
+	height: 32px;
+	left: 29px;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	top: -32px;
+}
+
+@container (max-width: 580px) {
+	.renote {
+		padding-left: 37px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 19px;
+	}
+}
+@container (max-width: 500px) {
+	.renote {
+		padding-left: 36px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 18px;
+	}
+}
+@container (max-width: 480px) {
+	.renote {
+		padding-left: 35px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 17px;
+	}
+}
+@container (max-width: 450px) {
+	.renote {
+		padding-left: 33px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 31px;
+	}
+}
 </style>

packages/frontend/src/components/SkNoteSub.vue

@@ -4,15 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
-	<div v-if="!hideLine" :class="$style.line"></div>
+<div v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }, { [$style.threadAncestor]: !hideLine }]">
+	<!-- <div v-if="!hideLine" :class="$style.line"></div> -->
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<!-- new avatar container with line (post section) -->
 		<div :class="$style.avatarContainer">
 			<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 			<template v-if="note.repliesCount > 0">
-				<div v-if="hideLine" :class="$style.threadLine"></div>
+				<div :class="[$style.threadLine, {[$style.threadAncestorLine]: !hideLine}]"></div>
 			</template>
 		</div>
 		<!-- end new avatar container -->
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<template v-if="depth < 5">
-		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
+		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, {[$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws"/>
 	</template>
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@@ -599,6 +599,23 @@ if (props.detail) {
 	}
 }
 
+.threadAncestor + .threadAncestor::before,
+[class*="renote"] + .threadAncestor::before {
+	position: absolute;
+	content: '';
+	width: 0px;
+	height: 56px;
+	left: 61px;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	top: -28px;
+}
+
+// TODO FIX specificity issue
+[class*="renote"] + .threadAncestor::before {
+	height: 36px;
+	top: -8px;
+}
+
 @container (max-width: 580px) {
 	.threadLine, .reply {
 		margin-left: 25px;
@@ -613,7 +630,18 @@ if (props.detail) {
 		margin-left: 0;
 	}
 }
-
+@container (max-width: 500px) {
+	[class*="renote"] + .threadAncestor::before {
+		height: 31px;
+		top: -8px;
+	}
+}
+@container (max-width: 480px) {
+	[class*="renote"] + .threadAncestor::before {
+		height: 0px;
+		top: -8px;
+	}
+}
 @container (max-width: 450px) {
 	.threadLine, .reply {
 		margin-left: 23px;
@@ -628,5 +656,34 @@ if (props.detail) {
 	.single {
 		margin-left: 0;
 	}
+	[class*="renote"] + .threadAncestor::before {
+		height: 22px;
+		top: 0;
+	}
+}
+
+@container (max-width: 580px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 51px;
+		height: 28px;
+		top: 0;
+	}
+}
+@container (max-width: 500px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 50px;
+		height: 46px;
+		top: -23px;
+	}
+}
+@container (max-width: 480px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 49px;
+	}
+}
+@container (max-width: 450px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 47px;
+	}
 }
 </style>