add collapedInReplyTo

locales/en-US.yml

@@ -1052,6 +1052,7 @@ thisPostMayBeAnnoyingCancel: "Cancel"
 thisPostMayBeAnnoyingIgnore: "Post anyway"
 collapseRenotes: "Collapse renotes you've already seen"
 collapseRenotesDescription: "Collapse notes that you've reacted to or renoted before."
+collapseNotesRepliedTo: "Collapse notes replied to"
 internalServerError: "Internal Server Error"
 internalServerErrorDescription: "The server has run into an unexpected error."
 copyErrorInfo: "Copy error details"

locales/zh-CN.yml

@@ -1052,6 +1052,7 @@ thisPostMayBeAnnoyingCancel: "取消"
 thisPostMayBeAnnoyingIgnore: "就这样发布"
 collapseRenotes: "省略显示已经看过的转发内容"
 collapseRenotesDescription: "将回应过或转贴过的贴子折叠表示。"
+collapseNotesRepliedTo: "折叠被回复的帖子"
 internalServerError: "内部服务器错误"
 internalServerErrorDescription: "内部服务器发生了预期外的错误"
 copyErrorInfo: "复制错误信息"

locales/zh-TW.yml

@@ -1052,6 +1052,7 @@ thisPostMayBeAnnoyingCancel: "退出"
 thisPostMayBeAnnoyingIgnore: "直接發佈貼文"
 collapseRenotes: "省略顯示已看過的轉發貼文"
 collapseRenotesDescription: "將已做過反應和轉發的貼文折疊顯示。"
+collapseNotesRepliedTo: "省略顯示被回復的貼文"
 internalServerError: "內部伺服器錯誤"
 internalServerErrorDescription: "內部伺服器出現意外錯誤。"
 copyErrorInfo: "複製錯誤資訊"

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, [$style.skipRender]: defaultStore.state.skipNoteRender }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
-	<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+    <div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
+		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote.reply)" :stpvInline="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"/>
 	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
 	<!--<div v-if="appearNote._prId_" class="tip"><i class="ti ti-speakerphone"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>-->
 	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>-->
@@ -43,7 +47,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)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
+		<Mfm :text="getNoteSummary(appearNote)" :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;">
@@ -301,6 +305,8 @@ const renoteCollapsed = ref(
 	),
 );
 
+const inReplyToCollapsed = ref(defaultStore.state.collapseNotesRepliedTo);
+
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
 	url: `https://${host}/notes/${appearNote.value.id}`,
@@ -829,15 +835,20 @@ function emitUpdReaction(emoji: string, delta: number) {
 	margin-right: 4px;
 }
 
-.collapsedRenoteTarget {
+.collapsedRenoteTarget, .collapsedInReplyTo {
 	display: flex;
 	align-items: center;
 	line-height: 28px;
 	white-space: pre;
 	padding: 0 32px 18px;
 }
 
-.collapsedRenoteTargetAvatar {
+.collapsedInReplyTo {
+	padding: 28px 32px 0;
+	opacity: 0.7;
+}
+
+.collapsedRenoteTargetAvatar, .collapsedInReplyToAvatar {
 	flex-shrink: 0;
 	display: inline-block;
 	width: 28px;
@@ -846,6 +857,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 }
 
 .collapsedRenoteTargetText {
+	opacity: 0.7;
+}
+
+.collapsedRenoteTargetText, .collapsedInReplyToText {
 	overflow: hidden;
 	flex-shrink: 1;
 	text-overflow: ellipsis;
@@ -1060,6 +1075,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 		margin-top: 4px;
 	}
 
+	.collapsedInReplyTo {
+		padding: 14px 16px 0;
+	}
+
 	.article {
 		padding: 22px 24px;
 	}

packages/frontend/src/pages/settings/pari.vue

@@ -59,6 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSwitch v-model="noteClickToOpen">{{ i18n.ts.noteClickToOpen }}</MkSwitch>
 			<MkSwitch v-model="enableFallbackReactButton">{{ i18n.ts.enableFallbackReactButton }}</MkSwitch>
 			<MkSwitch v-model="enableMFMCheatsheet">{{ i18n.ts.enableMFMCheatsheet }}</MkSwitch>
+			<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
 			<MkSelect v-model="autoSpacingBehaviour">
 				<template #label>{{ i18n.ts.autoSpacing }}</template>
 				<option :value="null">{{ i18n.ts.disabled }}</option>
@@ -106,6 +107,7 @@ const noteClickToOpen = computed(defaultStore.makeGetterSetter('noteClickToOpen'
 const enableFallbackReactButton = computed(defaultStore.makeGetterSetter('enableFallbackReactButton'));
 const enableMFMCheatsheet = computed(defaultStore.makeGetterSetter('enableMFMCheatsheet'));
 const autoSpacingBehaviour = computed(defaultStore.makeGetterSetter('autoSpacingBehaviour'));
+const collapseNotesRepliedTo = computed(defaultStore.makeGetterSetter('collapseNotesRepliedTo'));
 
 definePageMetadata(() => ({
 	title: 'Pari Plus!',

packages/frontend/src/store.ts

@@ -531,6 +531,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: null as 'all' | 'special' | null,
 	},
+	collapseNotesRepliedTo: {
+		where: 'device',
+		default: false,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期