fix(client): 引用内・返信元の長文ノートが畳まれない・畳まれていても開くと閉じられない (#16)

resolve #16

packages/client/src/components/MkSubNoteContent.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed }">
-	<div class="body">
+<div class="wrmlmaau" :class="{ collapsed, isLong }">
+	<div ref="textEl" class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<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="ti ti-arrow-back-up"></i></MkA>
@@ -15,28 +15,50 @@
 		<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="collapsedFlag = false">
 		<span>{{ i18n.ts.showMore }}</span>
 	</button>
+	<button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsedFlag = true">
+		<span>{{ i18n.ts.showLess }}</span>
+	</button>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { onMounted, ref } from 'vue';
 import * as misskey from 'misskey-js';
 import XMediaList from '@/components/MkMediaList.vue';
 import XPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 }>();
 
-const collapsed = $ref(
-	props.note.cw == null && props.note.text != null && (
-		(props.note.text.split('\n').length > 9) ||
-		(props.note.text.length > 500)
-	));
+const textEl = ref<HTMLElement>();
+let textElHeight = $ref(0);
+onMounted(() => {
+	if (textEl.value) {
+		const resizeObserver = new ResizeObserver(() => {
+			textElHeight = textEl.value?.offsetHeight ?? 0;
+		});
+		resizeObserver.observe(textEl.value);
+	}
+});
+
+const tmsIsLongEnabled = defaultStore.state.tmsIsLongEnabled ?? true;
+const tmsIsLongTextElHeight = defaultStore.state.tmsIsLongTextElHeight ?? 500;
+const isLong = $computed(() => {
+	return tmsIsLongEnabled && !!(
+		props.note.cw == null && 
+		props.note.text != null && (
+			(textElHeight >= tmsIsLongTextElHeight)
+		)
+	);
+});
+const collapsedFlag = ref(true);
+const collapsed = $computed(() => collapsedFlag.value && isLong);
 </script>
 
 <style lang="scss" scoped>
@@ -55,6 +77,23 @@ const collapsed = $ref(
 			color: var(--renote);
 		}
 	}
+	&.isLong {
+		> .showLess {
+			width: 100%;
+			margin-top: 1em;
+			position: sticky;
+			bottom: 1em;
+
+			> span {
+				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%);
+			}
+		}
+	}
 
 	&.collapsed {
 		position: relative;