From c9d0b815550584c3fb27c3f3caf7499f68e71267 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 15:11:14 +0200
Subject: [PATCH 1/7] feat: add an option to collapse replies

---
 locales/en-US.yml                             |  1 +
 packages/frontend/src/components/MkNote.vue   | 25 +++++++++--
 packages/frontend/src/components/SkNote.vue   | 43 +++++++++++++++++--
 .../frontend/src/pages/settings/general.vue   |  2 +
 .../pages/settings/preferences-backups.vue    |  1 +
 packages/frontend/src/store.ts                |  4 ++
 6 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 5df1a3f8fe..67980552de 100644
--- 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"
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index a14854fba6..068a99a59e 100644
--- 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;
 	}
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 3c5a1baffc..553c38eed8 100644
--- 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;
 	}
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 76081666d8..0f428b6d30 100644
--- 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>({
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index d4349b466d..514a37a3ff 100644
--- 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',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 7f6377613e..ba77f96dd5 100644
--- 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,

From c808147292b78ec9fe3b0ad1e607a9b49c0b9932 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 16:28:09 +0200
Subject: [PATCH 2/7] replace reply with inReplyTo in in-reply-to collapse code

---
 locales/en-US.yml                             |  2 +-
 packages/frontend/src/components/MkNote.vue   | 20 ++++++-------
 packages/frontend/src/components/SkNote.vue   | 30 +++++++++----------
 .../frontend/src/pages/settings/general.vue   |  4 +--
 .../pages/settings/preferences-backups.vue    |  2 +-
 packages/frontend/src/store.ts                |  2 +-
 6 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 67980552de..d9a04ea783 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1058,7 +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"
+collapseNotesRepliedTo: "Collapse notes replied to"
 collapseFiles: "Collapse files"
 autoloadConversation: "Load conversation on replies"
 internalServerError: "Internal Server Error"
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 068a99a59e..67991a4e1c 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -12,11 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
 	:tabindex="!isDeleted ? '-1' : undefined"
 >
-	<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 v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
+		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
 	</div>
-	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :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>-->
@@ -314,7 +314,7 @@ const renoteCollapsed = ref(
 		(appearNote.value.myReaction != null)
 	)
 );
-const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !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);
@@ -924,7 +924,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }
 
-.collapsedRenoteTarget, .collapsedReply {
+.collapsedRenoteTarget, .collapsedInReplyTo {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
@@ -932,12 +932,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 0 32px 18px;
 }
 
-.collapsedReply {
+.collapsedInReplyTo {
 	padding: 28px 32px 0;
 	opacity: 0.7;
 }
 
-.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
+.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@@ -949,7 +949,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	opacity: 0.7;
 }
 
-.collapsedRenoteTargetText, .collapsedReplyText {
+.collapsedRenoteTargetText, .collapsedInReplyToText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
@@ -1167,7 +1167,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}
 
-	.collapsedReply {
+	.collapsedInReplyTo {
 		padding: 28px 16px 0;
 	}
 
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 553c38eed8..306bd1c3f8 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -12,11 +12,11 @@ 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 && !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"/>
+	<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/>
+		<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>-->
@@ -314,7 +314,7 @@ const renoteCollapsed = ref(
 		(appearNote.value.myReaction != null)
 	)
 );
-const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !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);
@@ -940,7 +940,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }
 
-.collapsedRenoteTarget, .collapsedReply {
+.collapsedRenoteTarget, .collapsedInReplyTo {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
@@ -948,11 +948,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 	padding: 8px 38px 24px;
 }
 
-.collapsedReply {
+.collapsedInReplyTo {
 	padding: 28px 44px 0;
 }
 
-.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
+.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@@ -960,7 +960,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin: 0 8px 0 0;
 }
 
-.collapsedRenoteTargetText, .collapsedReplyText {
+.collapsedRenoteTargetText, .collapsedInReplyToText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
@@ -974,7 +974,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 }
 
-.collapsedReplyLine {
+.collapsedInReplyToLine {
 	position: absolute;
 	left: 56px;
 	// using solid instead of dotted, stylelistic choice
@@ -1161,11 +1161,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 		padding: 8px 26px 24px;
 	}
 
-	.collapsedReply {
+	.collapsedInReplyTo {
 		padding: 28px 35px 0;
 	}
 
-	.collapsedReplyLine {
+	.collapsedInReplyToLine {
 		left: 47px;
 	}
 
@@ -1216,11 +1216,11 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}
 
-	.collapsedReply {
+	.collapsedInReplyTo {
 		padding: 28px 33px 0;
 	}
 
-	.collapsedReplyLine {
+	.collapsedInReplyToLine {
 		left: 45px;
 	}
 
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 0f428b6d30..696178d3ae 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -53,7 +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="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</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>
@@ -322,7 +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 collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
 const clickToOpen = computed(defaultStore.makeGetterSetter('clickToOpen'));
 // copied from src/pages/timeline.vue
 const showBots = computed<boolean>({
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index 514a37a3ff..eeedcca3c8 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -56,7 +56,7 @@ const { t, ts } = i18n;
 
 const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'collapseRenotes',
-	'collapseReplies',
+	'collapseNotesRepliedTo',
 	'menu',
 	'visibility',
 	'localOnly',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index ba77f96dd5..07c1eaaf69 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -89,7 +89,7 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: false,
 	},
-	collapseReplies: {
+	collapseNotesRepliedTo: {
 		where: 'account',
 		default: false,
 	},

From 9ce2c8c081c384e470360753dd83ee60db268af0 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 17:19:24 +0200
Subject: [PATCH 3/7] include usernames in collapsed notes replied to

---
 packages/frontend/src/components/MkNote.vue | 3 +++
 packages/frontend/src/components/SkNote.vue | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 67991a4e1c..e6fe8ff9d8 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -14,6 +14,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 >
 	<div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
 		<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>
 	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 306bd1c3f8..1b1d8e49ec 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -16,6 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<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>

From 460e7f05ab3de81f2d7f96612e0e8182ae135e42 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 17:24:45 +0200
Subject: [PATCH 4/7] correct collapsed in reply to line alignment with small
 screen sizes

---
 packages/frontend/src/components/SkNote.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 1b1d8e49ec..236728c6ae 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -979,7 +979,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .collapsedInReplyToLine {
 	position: absolute;
-	left: 56px;
+	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)
@@ -1169,7 +1169,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: 47px;
+		left: calc(26px + .5 * var(--avatar));
 	}
 
 	.article {
@@ -1189,6 +1189,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 	.footer {
 		margin-bottom: -8px;
 	}
+
+	.collapsedInReplyToLine {
+		left: calc(25px + .5 * var(--avatar));
+	}
 }
 
 @container (max-width: 500px) {
@@ -1224,7 +1228,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: 45px;
+		left: calc(24px + .5 * var(--avatar));
 	}
 
 	.article {

From c149734fbadf2c8c258722b3cff12ec4fe91f8df Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 19:57:31 +0200
Subject: [PATCH 5/7] avoid renoteCollapsed dependency in inReplyToCollapsed

---
 packages/frontend/src/components/MkNote.vue | 11 +++++------
 packages/frontend/src/components/SkNote.vue | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index e6fe8ff9d8..6f50f81eaf 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -311,13 +311,12 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
-const renoteCollapsed = ref(
-	defaultStore.state.collapseRenotes && isRenote && (
-		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-		(appearNote.value.myReaction != null)
-	)
+const renoteCollapsedInitialValue = defaultStore.state.collapseRenotes && isRenote && (
+	($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+	(appearNote.value.myReaction != null)
 );
-const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsed.value);
+const renoteCollapsed = ref(renoteCollapsedInitialValue);
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsedInitialValue);
 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);
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 236728c6ae..00ecbd99d2 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -311,13 +311,12 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
-const renoteCollapsed = ref(
-	defaultStore.state.collapseRenotes && isRenote && (
-		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-		(appearNote.value.myReaction != null)
-	)
+const renoteCollapsedInitialValue = defaultStore.state.collapseRenotes && isRenote && (
+	($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+	(appearNote.value.myReaction != null)
 );
-const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsed.value);
+const renoteCollapsed = ref(renoteCollapsedInitialValue);
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsedInitialValue);
 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);

From a061c6c2d52cdb5434ec32265d3e101a57e1deb1 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 20:33:22 +0200
Subject: [PATCH 6/7] reduce margin-top for collapsed in replies to in small
 containers

---
 packages/frontend/src/components/MkNote.vue | 2 +-
 packages/frontend/src/components/SkNote.vue | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 6f50f81eaf..d052370217 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -1170,7 +1170,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyTo {
-		padding: 28px 16px 0;
+		padding: 14px 16px 0;
 	}
 
 	.article {
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 00ecbd99d2..55e2e27cb7 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -1223,11 +1223,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyTo {
-		padding: 28px 33px 0;
+		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 {

From ed8b1b8f07d9d7c6aa5d3a40757d70837e61f235 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Wed, 12 Jun 2024 11:32:02 +0100
Subject: [PATCH 7/7] keep renoteCollapsed as it was before adding reply
 collapse

---
 packages/frontend/src/components/MkNote.vue | 13 +++++++------
 packages/frontend/src/components/SkNote.vue | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index d052370217..13440e2845 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -51,7 +51,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 v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
@@ -311,12 +311,13 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
-const renoteCollapsedInitialValue = defaultStore.state.collapseRenotes && isRenote && (
-	($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-	(appearNote.value.myReaction != null)
+const renoteCollapsed = ref(
+	defaultStore.state.collapseRenotes && isRenote && (
+		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+		(appearNote.value.myReaction != null)
+	)
 );
-const renoteCollapsed = ref(renoteCollapsedInitialValue);
-const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsedInitialValue);
+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);
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 55e2e27cb7..afee2587df 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -52,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;">
@@ -311,12 +311,13 @@ const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
-const renoteCollapsedInitialValue = defaultStore.state.collapseRenotes && isRenote && (
-	($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
-	(appearNote.value.myReaction != null)
+const renoteCollapsed = ref(
+	defaultStore.state.collapseRenotes && isRenote && (
+		($i && ($i.id === note.value.userId || $i.id === appearNote.value.userId)) || // `||` must be `||`! See https://github.com/misskey-dev/misskey/issues/13131
+		(appearNote.value.myReaction != null)
+	)
 );
-const renoteCollapsed = ref(renoteCollapsedInitialValue);
-const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo && !renoteCollapsedInitialValue);
+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);