enhance(frontend): 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように

Resolve #11185

CHANGELOG.md

@@ -25,6 +25,7 @@
 - オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
 - 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
 - フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように
+- 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正

packages/frontend/src/components/MkSubNoteContent.vue

@@ -15,9 +15,12 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<MkPoll :note="note"/>
 	</details>
-	<button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
+	<button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
 		<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
 	</button>
+	<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+		<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
+	</button>
 </div>
 </template>
 
@@ -33,11 +36,13 @@ const props = defineProps<{
 	note: misskey.entities.Note;
 }>();
 
-const collapsed = $ref(
+const isLong =
 	props.note.cw == null && props.note.text != null && (
 		(props.note.text.split('\n').length > 9) ||
 		(props.note.text.length > 500)
-	));
+	);
+
+const collapsed = $ref(isLong);
 </script>
 
 <style lang="scss" module>
@@ -86,4 +91,20 @@ const collapsed = $ref(
 	font-style: oblique;
 	color: var(--renote);
 }
+
+.showLess {
+	width: 100%;
+	margin-top: 14px;
+	position: sticky;
+	bottom: calc(var(--stickyBottom, 0px) + 14px);
+}
+
+.showLessLabel {
+	display: inline-block;
+	background: var(--popup);
+	padding: 6px 10px;
+	font-size: 0.8em;
+	border-radius: 999px;
+	box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+}
 </style>