feat: add an option to collapse replies

2024-06-11 15:11:14 +02:00 · 2024-06-11 15:11:14 +02:00 · c9d0b81555
commit c9d0b81555
parent 8f3549b494
6 changed files with 68 additions and 8 deletions
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@ -1058,6 +1058,7 @@ thisPostIsMissingAltTextCancel: "Cancel"
 thisPostIsMissingAltTextIgnore: "Post anyway"
 thisPostIsMissingAltText: "One of the files attached to this post is missing alt text. Please ensure all the attachments have alt text."
 collapseRenotes: "Collapse boosts you've already seen"
+collapseReplies: "Collapse replies"
 collapseFiles: "Collapse files"
 autoloadConversation: "Load conversation on replies"
 internalServerError: "Internal Server Error"
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -12,7 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
 	:tabindex="!isDeleted ? '-1' : undefined"
 >
-	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<div v-if="appearNote.reply && replyCollapsed" :class="$style.collapsedReply">
+		<MkAvatar :class="$style.collapsedReplyAvatar" :user="appearNote.reply.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedReplyText" @click="replyCollapsed = false"/>
+	</div>
+	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
 	<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>-->
@ -310,6 +314,7 @@ const renoteCollapsed = ref(
 		(appearNote.value.myReaction != null)
 	)
 );
+const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
 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);
@ -919,7 +924,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }

-.collapsedRenoteTarget {
+.collapsedRenoteTarget, .collapsedReply {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
@ -927,7 +932,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 0 32px 18px;
 }

-.collapsedRenoteTargetAvatar {
+.collapsedReply {
+	padding: 28px 32px 0;
+	opacity: 0.7;
+}
+
+.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@ -936,12 +946,15 @@ function emitUpdReaction(emoji: string, delta: number) {
 }

 .collapsedRenoteTargetText {
+	opacity: 0.7;
+}
+
+.collapsedRenoteTargetText, .collapsedReplyText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-size: 90%;
-	opacity: 0.7;
 	cursor: pointer;

 	&:hover {
@ -1154,6 +1167,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}

+	.collapsedReply {
+		padding: 28px 16px 0;
+	}
+
 	.article {
 		padding: 14px 16px;
 	}
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@ -12,7 +12,12 @@ 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 && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<div v-if="appearNote.reply && replyCollapsed && !renoteCollapsed" :class="$style.collapsedReply">
+		<div :class="$style.collapsedReplyLine"></div>
+		<MkAvatar :class="$style.collapsedReplyAvatar" :user="appearNote.reply.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedReplyText" @click="replyCollapsed = 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>-->
@ -309,6 +314,7 @@ const renoteCollapsed = ref(
 		(appearNote.value.myReaction != null)
 	)
 );
+const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
 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);
@ -934,7 +940,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }

-.collapsedRenoteTarget {
+.collapsedRenoteTarget, .collapsedReply {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
@ -942,7 +948,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 8px 38px 24px;
 }

-.collapsedRenoteTargetAvatar {
+.collapsedReply {
+	padding: 28px 44px 0;
+}
+
+.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@ -950,7 +960,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin: 0 8px 0 0;
 }

-.collapsedRenoteTargetText {
+.collapsedRenoteTargetText, .collapsedReplyText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
@ -964,6 +974,15 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 }

+.collapsedReplyLine {
+	position: absolute;
+	left: 56px;
+	// 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;
@ -1142,6 +1161,14 @@ function emitUpdReaction(emoji: string, delta: number) {
 		padding: 8px 26px 24px;
 	}

+	.collapsedReply {
+		padding: 28px 35px 0;
+	}
+
+	.collapsedReplyLine {
+		left: 47px;
+	}
+
 	.article {
 		padding: 24px 26px;
 	}
@ -1189,6 +1216,14 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}

+	.collapsedReply {
+		padding: 28px 33px 0;
+	}
+
+	.collapsedReplyLine {
+		left: 45px;
+	}
+
 	.article {
 		padding: 22px 24px;
 	}
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@ -53,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
+				<MkSwitch v-model="collapseReplies">{{ i18n.ts.collapseReplies }}</MkSwitch>
 				<MkSwitch v-model="collapseFiles">{{ i18n.ts.collapseFiles }}</MkSwitch>
 				<MkSwitch v-model="uncollapseCW">Uncollapse CWs on notes</MkSwitch>
 				<MkSwitch v-model="autoloadConversation">{{ i18n.ts.autoloadConversation }}</MkSwitch>
@ -321,6 +322,7 @@ const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showC
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const limitWidthOfReaction = computed(defaultStore.makeGetterSetter('limitWidthOfReaction'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
+const collapseReplies = computed(defaultStore.makeGetterSetter('collapseReplies'));
 const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
 // copied from src/pages/timeline.vue
 const showBots = computed<boolean>({
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@ -56,6 +56,7 @@ const { t, ts } = i18n;

 const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'collapseRenotes',
+	'collapseReplies',
 	'menu',
 	'visibility',
 	'localOnly',
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -89,6 +89,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: false,
 	},
+	collapseReplies: {
+		where: 'account',
+		default: false,
+	},
 	collapseFiles: {
 		where: 'account',
 		default: false,