From 6bb6c60589950a1bfe6b9f97cad0f9969533f52b Mon Sep 17 00:00:00 2001
From: Insert5StarName <anime@shourai.de>
Date: Sat, 2 Dec 2023 23:06:16 +0100
Subject: [PATCH] update SkNoteSub & SkNoteDetailed

---
 .../src/components/SkNoteDetailed.vue         | 10 ++++++++
 .../frontend/src/components/SkNoteSub.vue     | 24 +++++++++++++++----
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 91db2047e..fbc7186a1 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -1079,4 +1079,14 @@ function animatedMFM() {
 		margin-left: 0.2em;
 	}
 }
+
+[class*="threadAncestor"] + .note .noteHeader::before {
+	position: absolute;
+	content: '';
+	width: 0px;
+	height: 32px;
+	left: 29px; // todo: adapt for container width
+	border-left: 2.5px solid #0f0;
+	top: -32px;
+}
 </style>
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 629603738..f31eac790 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/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>
@@ -562,6 +562,10 @@ if (props.detail) {
 	flex-grow: 1;
 	border-left: 2.5px solid rgb(174, 174, 174);
 	margin-left: 29px;
+
+	&.threadAncestorLine {
+		border-color: pink;
+	}
 }
 
 .reply {
@@ -599,6 +603,18 @@ if (props.detail) {
 	}
 }
 
+.threadAncestor {
+	&:not(:first-of-type)::before {
+		position: absolute;
+		content: '';
+		width: 0px;
+		height: 56px;
+		left: 61px; // todo: adapt for container width
+		border-left: 2.5px solid #f00;
+		top: -28px;
+	}
+}
+
 @container (max-width: 580px) {
 	.threadLine, .reply {
 		margin-left: 25px;