feat(client): collapse sub note automatically

1 files changed, 42 insertions, 1 deletions

diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/sub-note-content.vue
index 3f03f021cd..0a557c0c6c 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">
+<div class="wrmlmaau" :class="{ collapsed }">
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
@@ -15,6 +15,9 @@
 		<summary>{{ $ts.poll }}</summary>
 		<XPoll :note="note"/>
 	</details>
+	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
+		<span>{{ $ts.showMore }}</span>
+	</button>
 </div>
 </template>
 
@@ -37,7 +40,14 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			collapsed: false,
 		};
+	},
+	created() {
+		this.collapsed = this.note.cw == null && this.note.text && (
+			(this.note.text.split('\n').length > 9) ||
+			(this.note.text.length > 500)
+		);
 	}
 });
 </script>
@@ -58,5 +68,36 @@ export default defineComponent({
 			color: var(--renote);
 		}
 	}
+
+	&.collapsed {
+		position: relative;
+		max-height: 9em;
+		overflow: hidden;
+
+		> .fade {
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+
+			> span {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+			}
+
+			&:hover {
+				> span {
+					background: var(--panelHighlight);
+				}
+			}
+		}
+	}
 }
 </style>