From b8243c94488944f5f3f4901e64d67162973ae9e0 Mon Sep 17 00:00:00 2001
From: FineArchs <cicada1003@gmail.com>
Date: Sun, 9 Jun 2024 20:39:43 +0900
Subject: [PATCH] refactor

---
 packages/frontend/src/components/MkNote.vue   |  6 +-
 .../src/components/MkSubNoteContent.vue       | 80 ++++++++++++-------
 .../frontend/src/pages/settings/general.vue   |  6 +-
 packages/frontend/src/store.ts                |  2 +-
 4 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 2c19667224..64e542d578 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -289,11 +289,7 @@ const renoteCollapsed = ref(
 
 // oversized note collapsing
 const collapsibleArea = ref(null);
-const collapseSize = ({
-	small: 9,
-	medium: 13.5,
-	large: 18,
-})[defaultStore.state.collapsingNoteSize] ?? 13.5;
+const collapseSize = defaultStore.state.collapsingNoteSize;
 const isLong = ref(true);
 switch (collapsingNoteCondition) {
 	case 'detailedCalculation':
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index 3b47c831c2..dae949c841 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -4,28 +4,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
-	<div>
-		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
-		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" :text="note.text" :parsedNodes="ast" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
-		<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+<div :class="[$style.root, { [$style.collapsed]: collapsed }]" :style="{ 'max-height': collapsed ? `${collapseSize}em` : undefined }">
+	<div ref="collapsibleArea">
+		<div>
+			<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+			<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
+			<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+			<Mfm v-if="note.text" :text="note.text" :parsedNodes="ast" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+			<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+		</div>
+		<details v-if="note.files && note.files.length > 0">
+			<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
+			<MkMediaList :mediaList="note.files"/>
+		</details>
+		<details v-if="note.poll">
+			<summary>{{ i18n.ts.poll }}</summary>
+			<MkPoll :noteId="note.id" :poll="note.poll"/>
+		</details>
+		<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>
-	<details v-if="note.files && note.files.length > 0">
-		<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
-		<MkMediaList :mediaList="note.files"/>
-	</details>
-	<details v-if="note.poll">
-		<summary>{{ i18n.ts.poll }}</summary>
-		<MkPoll :noteId="note.id" :poll="note.poll"/>
-	</details>
-	<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>
 
@@ -36,7 +38,8 @@ import * as mfm from 'mfm-js';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n.js';
-import { shouldCollapsed } from '@/scripts/collapsed.js';
+import { defaultStore } from '@/store.js';
+import { shouldCollapseLegacy, shouldCollapse } from '@/scripts/collapsed.js';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -44,10 +47,34 @@ const props = defineProps<{
 
 const ast = computed(() => props.note.text ? mfm.parse(props.note.text) : []);
 
-// eslint-disable-next-line vue/no-setup-props-destructure
-const isLong = shouldCollapsed(props.note, ast.value);
-
-const collapsed = ref(isLong);
+// oversized note collapsing
+const collapsingNoteCondition = defaultStore.state.collapsingNoteCondition;
+const collapseSize = defaultStore.state.collapsingNoteSize;
+const collapsibleArea = ref(null);
+if (collapsingNoteCondition === 'seeRenderedSize') {
+	onMounted(() => {
+		const current = collapsibleArea.value.clientHeight;
+		const limit = collapseSize * parseFloat(getComputedStyle(collapsibleArea.value).fontSize);
+		isLong.value = current > limit;
+		collapsed.value &&= isLong.value;
+	})
+}
+const isLong = ref(true);
+switch (collapsingNoteCondition) {
+	case 'detailedCalculation':
+		// eslint-disable-next-line vue/no-setup-props-destructure
+		isLong.value = shouldCollapse(props.note, collapseSize, ast.value);
+		break;
+	case 'seeRenderedSize':
+		break;
+	// fail safe
+	case 'legacyCalculation':
+	default:
+		// eslint-disable-next-line vue/no-setup-props-destructure
+		isLong.value = shouldCollapseLegacy(props.note, []);
+		break;
+}
+const collapsed = ref(isLong.value);
 </script>
 
 <style lang="scss" module>
@@ -56,7 +83,6 @@ const collapsed = ref(isLong);
 
 	&.collapsed {
 		position: relative;
-		max-height: 9em;
 		overflow: clip;
 
 		> .fade {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 3f3093747a..e619671d5c 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -100,9 +100,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkRadios>
 			<MkRadios v-model="collapsingNoteSize" v-if="collapsingNoteCondition !== 'legacyCalculation'">
 				<template #label>{{ i18n.ts.collapsingNoteSize }}</template>
-				<option value="large">{{ i18n.ts.large }}</option>
-				<option value="medium">{{ i18n.ts.medium }}</option>
-				<option value="small">{{ i18n.ts.small }}</option>
+				<option :value="18">{{ i18n.ts.large }}</option>
+				<option :value="13.5">{{ i18n.ts.medium }}</option>
+				<option :value="9">{{ i18n.ts.small }}</option>
 			</MkRadios>
 		</div>
 	</FormSection>
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 15521c14c3..c0105a0e0a 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -384,7 +384,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	collapsingNoteSize: {
 		where: 'device',
-		default: 'medium' as 'small' | 'medium' | 'large',
+		default: 13.5,
 	},
 	collapsingNoteCondition: {
 		where: 'device',