enhance(client): MkNote isLong condexp

Squashed commit of the following:

commit 5992edb0da758ee5e20f138ecaff274f8af83630
Author: taiyme <[email protected]>
Date:   Mon Feb 13 20:37:34 2023 +0900

    fix(client): collapsedFlag

commit b49f1c20368e8588d2c1155e2807bcfadace4aaf
Author: taiyme <[email protected]>
Date:   Mon Feb 13 20:18:40 2023 +0900

    Revert "fix(client): collapsed"

    This reverts commit 0a46ab6f1565c334114b7208a9020529e626350d.

commit 0a46ab6f1565c334114b7208a9020529e626350d
Author: taiyme <[email protected]>
Date:   Mon Feb 13 20:03:15 2023 +0900

    fix(client): collapsed

commit 9977859857cb31b90fef4065d62dc4b1bb944b88
Author: taiyme <[email protected]>
Date:   Mon Feb 13 19:12:58 2023 +0900

    fix(client): computed

commit e1e29cdfb8c7a4cab71825d0644210d6285526f6
Author: taiyme <[email protected]>
Date:   Mon Feb 13 18:42:48 2023 +0900

    fix(client): resize

commit a1196a6cef61f000f4094776876e363859f244fa
Author: taiyme <[email protected]>
Date:   Mon Feb 13 17:57:34 2023 +0900

    fix(client): isLong

commit 46caa08c64eeaaebc5cf72d2f6fb1124abc9cdc7
Author: taiyme <[email protected]>
Date:   Mon Feb 13 17:33:13 2023 +0900

    fix(client): isLong

commit e0bb64f4b770e303b68bd2b293035fa5a241bbb5
Merge: ed57a1d10 34e15e5
Author: taiyme <[email protected]>
Date:   Mon Feb 13 17:16:25 2023 +0900

    Merge branch 'taiyme-v12' into feat/islong-cond

commit ed57a1d10a97bb26d0cfe7f29979759dc93bed66
Author: taiyme <[email protected]>
Date:   Mon Feb 13 17:11:01 2023 +0900

    fix(client): isLong

commit 0599276870908b8ba0c001e65a48da368d75ddee
Merge: d84c0d713 d0645e1
Author: taiyme <[email protected]>
Date:   Mon Feb 13 17:08:58 2023 +0900

    Merge branch 'taiyme-v12' into feat/islong-cond

commit d84c0d713928f524263193dac06ee4b4a1343326
Author: taiyme <[email protected]>
Date:   Sat Feb 11 23:57:09 2023 +0900

    fix(client): isLong

commit 1ca925797c222b405fc82bba27868ac277b60194
Author: taiyme <[email protected]>
Date:   Sat Feb 11 23:12:17 2023 +0900

    enhance(client): 500px以上でノートを畳むようにする

packages/client/src/components/MkNote.vue

@@ -42,7 +42,7 @@
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text">
+					<div ref="textEl" class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
@@ -61,10 +61,10 @@
 					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
 					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
-					<button v-if="isLong && 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="collapsed = true">
+					<button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsedFlag = true">
 						<span>{{ i18n.ts.showLess }}</span>
 					</button>
 				</div>
@@ -156,6 +156,17 @@ const isRenote = (
 	note.poll == null
 );
 
+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 el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
@@ -164,16 +175,23 @@ const reactButton = ref<HTMLElement>();
 let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
 const isMyRenote = $i && ($i.id === note.userId || $i.isModerator || $i.isAdmin);
 const showContent = ref(false);
-const isLong = (appearNote.cw == null && appearNote.text != null && (
-	(appearNote.text.split('\n').length > 9) ||
-	(appearNote.text.length > 500)
-));
-const collapsed = ref(appearNote.cw == null && isLong);
+const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
+const isLong = $computed(() => {
+	return !!(
+		appearNote.cw == null && 
+		appearNote.text != null && (
+			(textElHeight >= 500) ||
+			(appearNote.files.length >= 5) ||
+			(urls && urls.length >= 4)
+		)
+	);
+});
+const collapsedFlag = ref(true);
+const collapsed = $computed(() => isLong && collapsedFlag);
 const isDeleted = ref(false);
 const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 
 const keymap = {