refactor

packages/frontend/src/components/MkNote.vue

@@ -289,11 +289,7 @@ const renoteCollapsed = ref(
 
 // oversized note collapsing
 const collapsibleArea = ref(null);
-const collapseSize = ({
+const collapseSize = defaultStore.state.collapsingNoteSize;
-	small: 9,
-	medium: 13.5,
-	large: 18,
-})[defaultStore.state.collapsingNoteSize] ?? 13.5;
 const isLong = ref(true);
 switch (collapsingNoteCondition) {
 	case 'detailedCalculation':

packages/frontend/src/components/MkSubNoteContent.vue

@@ -4,7 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
+<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>
@@ -26,6 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
 			<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
 		</button>
+	</div>
 </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
+// oversized note collapsing
-const isLong = shouldCollapsed(props.note, ast.value);
+const collapsingNoteCondition = defaultStore.state.collapsingNoteCondition;
-
+const collapseSize = defaultStore.state.collapsingNoteSize;
-const collapsed = ref(isLong);
+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 {

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="18">{{ i18n.ts.large }}</option>
-				<option value="medium">{{ i18n.ts.medium }}</option>
+				<option :value="13.5">{{ i18n.ts.medium }}</option>
-				<option value="small">{{ i18n.ts.small }}</option>
+				<option :value="9">{{ i18n.ts.small }}</option>
 			</MkRadios>
 		</div>
 	</FormSection>

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',