upd: rework threading ui 2/2

Co-authored-by: daph <d@waal.me>
Co-authored-by: Marie <marie@kaifa.ch>

1 files changed, 92 insertions, 5 deletions

diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index e11d7bc75d..629603738f 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -8,7 +8,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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>
-		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
+		<!-- 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>
+			</template>
+		</div>
+		<!-- end new avatar container -->
 		<div :class="$style.body">
 			<SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
 			<div :class="$style.content">
@@ -66,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" :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>
@@ -444,9 +451,9 @@ if (props.detail) {
 		color: var(--fgHighlighted);
 	}
 }
-
+// Responsible for Reply borders 448 and 508
 .reply, .more {
-	border-left: solid 0.5px var(--divider);
+	//border-left: solid 0.5px var(--divider);
 	margin-top: 10px;
 }
 
@@ -505,8 +512,9 @@ if (props.detail) {
 	padding: 0;
 }
 
+
 .reply, .more {
-	border-left: solid 0.5px var(--divider);
+	//border-left: solid 0.5px var(--divider);
 	margin-top: 10px;
 }
 
@@ -542,4 +550,83 @@ if (props.detail) {
 	margin: 8px 8px 0 8px;
 	border-radius: var(--radius-sm);
 }
+
+// avatar container with line
+.avatarContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.threadLine {
+	width: 0;
+	flex-grow: 1;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	margin-left: 29px;
+}
+
+.reply {
+	margin-left: 29px;
+}
+
+.reply:not(:last-child) {
+	border-left: 2.5px solid rgb(174, 174, 174);
+
+	&::before {
+		left: -2px;
+	}
+}
+
+.reply::before {
+	position: absolute;
+	content: '';
+	left: 0px;
+	top: -10px;
+	height: 49px;
+	width: 15px;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	border-bottom: 2.5px solid rgb(174, 174, 174);
+	border-bottom-left-radius: 15px;
+}
+
+.single {
+	margin-left: 0;
+	padding-left: 0 !important;
+
+	&::before {
+		left: 29px;
+		width: 0;
+		border-bottom: unset;
+	}
+}
+
+@container (max-width: 580px) {
+	.threadLine, .reply {
+		margin-left: 25px;
+	}
+	.reply::before {
+		height: 45px;
+	}
+	.single::before {
+		left: 25px;
+	}
+	.single {
+		margin-left: 0;
+	}
+}
+
+@container (max-width: 450px) {
+	.threadLine, .reply {
+		margin-left: 23px;
+	}
+	.reply::before {
+		height: 43px;
+	}
+	.single::before {
+		left: 23px;
+		width: 9px;
+	}
+	.single {
+		margin-left: 0;
+	}
+}
 </style>