From 6490f4cf764a8a201b887f4bb91f1433762049f7 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Mon, 15 Aug 2022 22:28:13 +0200
Subject: [PATCH] enhance: add re-collapsing to quoted notes

---
 .../src/components/sub-note-content.vue       | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/sub-note-content.vue
index 9ee1803459..6a8d9b78dd 100644
--- a/packages/client/src/components/sub-note-content.vue
+++ b/packages/client/src/components/sub-note-content.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed }">
+<div class="wrmlmaau" :class="{ collapsed, isLong }">
 	<div class="body">
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
@@ -14,9 +14,12 @@
 		<summary>{{ i18n.ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</details>
-	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
+	<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
 		<span>{{ i18n.ts.showMore }}</span>
 	</button>
+	<button v-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
+		<span>{{ i18n.ts.showLess }}</span>
+	</button>
 </div>
 </template>
 
@@ -31,11 +34,14 @@ 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(props.note.cw == null && isLong);
 </script>
 
 <style lang="scss" scoped>
@@ -85,5 +91,23 @@ const collapsed = $ref(
 			}
 		}
 	}
+
+	&.isLong {
+		> .showLess {
+			width: 100%;
+			margin-top: 1em;
+			position: sticky;
+			bottom: 1em;
+
+			> span {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 0 7px 7px var(--bg);
+			}
+		}
+	}
 }
 </style>