merge: feat: add an option to collapse replies (!545)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/545

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <marie@kaifa.ch>

1 files changed, 48 insertions, 5 deletions

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index cbdaa757e2..8f0a5a8f11 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -12,7 +12,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
 	:tabindex="!isDeleted ? '-1' : undefined"
 >
-	<SkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<SkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<div v-if="appearNote.reply && inReplyToCollapsed && !renoteCollapsed" :class="$style.collapsedInReplyTo">
+		<div :class="$style.collapsedInReplyToLine"></div>
+		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
+		<MkA v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
+			<MkAcct :user="appearNote.reply.user"/>
+		</MkA>:
+		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
+	</div>
 	<div v-if="pinned" :class="$style.tip"><i class="ph-push-pin ph-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
 	<!--<div v-if="appearNote._prId_" class="tip"><i class="ph-megaphone ph-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>-->
 	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>-->
@@ -44,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
 		<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
-		<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
+		<Mfm :text="getNoteSummary(appearNote)" :isBlock="true" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false; inReplyToCollapsed = false"/>
 	</div>
 	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
 		<div style="display: flex; padding-bottom: 10px;">
@@ -309,6 +317,7 @@ const renoteCollapsed = ref(
 		(appearNote.value.myReaction != null)
 	)
 );
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
 const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
 const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
 const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
@@ -938,7 +947,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }
 
-.collapsedRenoteTarget {
+.collapsedRenoteTarget, .collapsedInReplyTo {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
@@ -946,7 +955,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 8px 38px 24px;
 }
 
-.collapsedRenoteTargetAvatar {
+.collapsedInReplyTo {
+	padding: 28px 44px 0;
+}
+
+.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@@ -954,7 +967,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin: 0 8px 0 0;
 }
 
-.collapsedRenoteTargetText {
+.collapsedRenoteTargetText, .collapsedInReplyToText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
@@ -968,6 +981,15 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 }
 
+.collapsedInReplyToLine {
+	position: absolute;
+	left: calc(32px + .5 * var(--avatar));
+	// using solid instead of dotted, stylelistic choice
+	border-left: var(--thread-width) solid var(--thread);
+	top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
+	height: 28px;
+}
+
 .article {
 	position: relative;
 	padding: 28px 32px;
@@ -1146,6 +1168,14 @@ function emitUpdReaction(emoji: string, delta: number) {
 		padding: 8px 26px 24px;
 	}
 
+	.collapsedInReplyTo {
+		padding: 28px 35px 0;
+	}
+
+	.collapsedInReplyToLine {
+		left: calc(26px + .5 * var(--avatar));
+	}
+
 	.article {
 		padding: 24px 26px;
 	}
@@ -1163,6 +1193,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 	.footer {
 		margin-bottom: -8px;
 	}
+
+	.collapsedInReplyToLine {
+		left: calc(25px + .5 * var(--avatar));
+	}
 }
 
 @container (max-width: 500px) {
@@ -1193,6 +1227,15 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}
 
+	.collapsedInReplyTo {
+		padding: 22px 33px 0;
+	}
+
+	.collapsedInReplyToLine {
+		left: calc(24px + .5 * var(--avatar));
+		top: calc(22px + 28px); // 22px of .root padding, plus 28px of avatar height
+	}
+
 	.article {
 		padding: 22px 24px;
 	}