fix

locales/index.d.ts

@@ -2158,6 +2158,26 @@ export interface Locale extends ILocale {
      * {x}を上限に
      */
     "limitTo": ParameterizedString<"x">;
+    /**
+     * ノートを畳む大きさ
+     */
+    "collapsingNoteSize": string;
+    /**
+     * ノートを畳む条件
+     */
+    "collapsingNoteCondition": string;
+    /**
+     * 高精度の算出方法
+     */
+    "detailedCalculation": string;
+    /**
+     * 旧式の算出方法
+     */
+    "legacyCalculation": string;
+    /**
+     * 実際の表示サイズに基づく
+     */
+    "seeRenderedSize": string;
     /**
      * フォロー申請はありません
      */

packages/frontend-embed/src/components/EmNote.vue

@@ -125,7 +125,6 @@ import EmUserName from '@/components/EmUserName.vue';
 import EmTime from '@/components/EmTime.vue';
 import { userPage } from '@/utils.js';
 import { i18n } from '@/i18n.js';
-import { shouldCollapsed } from '@@/js/collapsed.js';
 
 function getAppearNote(note: Misskey.entities.Note) {
 	return Misskey.note.isPureRenote(note) ? note.renote : note;

packages/frontend/src/components/MkNote.vue

@@ -84,6 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
 							</div>
 						</div>
+					</div>
 					<div v-if="appearNote.files && appearNote.files.length > 0">
 						<MkMediaList ref="galleryEl" :mediaList="appearNote.files"/>
 					</div>
@@ -181,7 +182,7 @@ import { computed, inject, onMounted, ref, useTemplateRef, watch, provide } from
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
-import { shouldCollapsed } from '@@/js/collapsed.js';
+import { shouldCollapsedLegacy, shouldCollapsed } from '@@/js/collapsed.js';
 import { host } from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -218,7 +219,6 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { getNoteSummary } from '@/utility/get-note-summary.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { showMovedDialog } from '@/utility/show-moved-dialog.js';
-import { shouldCollapsedLegacy, shouldCollapsed } from '@@/js/collapsed.js';
 import { isEnabledUrlPreview } from '@/instance.js';
 import { focusPrev, focusNext } from '@/utility/focus.js';
 import { getAppearNote } from '@/utility/get-appear-note.js';
@@ -249,17 +249,6 @@ const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', nul
 
 const note = ref(deepClone(props.note));
 
-// used later
-const collapsingNoteCondition = defaultStore.state.collapsingNoteCondition;
-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;
-	});
-}
-
 // plugin
 const noteViewInterruptors = getPluginHandlers('note_view_interruptor');
 if (noteViewInterruptors.length > 0) {
@@ -310,8 +299,9 @@ const renoteCollapsed = ref(
 );
 
 // oversized note collapsing
-const collapsibleArea = ref(null);
+const collapsibleArea = useTemplateRef('collapsibleArea');
-const collapseSize = defaultStore.state.collapsingNoteSize;
+const collapsingNoteCondition = prefer.s.collapsingNoteCondition;
+const collapseSize = prefer.s.collapsingNoteSize;
 const isLong = ref(true);
 switch (collapsingNoteCondition) {
 	case 'detailedCalculation':
@@ -326,6 +316,15 @@ switch (collapsingNoteCondition) {
 		break;
 }
 const collapsed = ref(appearNote.value.cw == null && isLong.value);
+// v-sizeディレクティブを使ったほうがよい？
+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 pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',

packages/frontend/src/components/MkSubNoteContent.vue

@@ -32,14 +32,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as mfm from 'mfm-js';
 import { shouldCollapsedLegacy, shouldCollapsed } from '@@/js/collapsed.js';
 import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n.js';
-import { defaultStore } from '@/store.js'; // 後でpreferに置き換える
+import { prefer } from '@/preferences.js';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -48,9 +48,24 @@ const props = defineProps<{
 const ast = computed(() => props.note.text ? mfm.parse(props.note.text) : []);
 
 // oversized note collapsing
-const collapsingNoteCondition = defaultStore.state.collapsingNoteCondition;
+const collapsibleArea = useTemplateRef('collapsibleArea');
-const collapseSize = defaultStore.state.collapsingNoteSize;
+const collapsingNoteCondition = prefer.s.collapsingNoteCondition;
-const collapsibleArea = ref(null);
+const collapseSize = prefer.s.collapsingNoteSize;
+const isLong = ref(true);
+switch (collapsingNoteCondition) {
+	case 'detailedCalculation':
+		isLong.value = shouldCollapsed(props.note, collapseSize, ast.value);
+		break;
+	case 'seeRenderedSize':
+		break;
+	// fail safe
+	case 'legacyCalculation':
+	default:
+		isLong.value = shouldCollapsedLegacy(props.note, []);
+		break;
+}
+const collapsed = ref(isLong.value);
+// v-sizeディレクティブを使ったほうがよい？
 if (collapsingNoteCondition === 'seeRenderedSize') {
 	onMounted(() => {
 		const current = collapsibleArea.value.clientHeight;
@@ -59,22 +74,6 @@ if (collapsingNoteCondition === 'seeRenderedSize') {
 		collapsed.value &&= isLong.value;
 	});
 }
-const isLong = ref(true);
-switch (collapsingNoteCondition) {
-	case 'detailedCalculation':
-		// eslint-disable-next-line vue/no-setup-props-destructure
-		isLong.value = shouldCollapsed(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 = shouldCollapsedLegacy(props.note, []);
-		break;
-}
-const collapsed = ref(isLong.value);
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/settings/preferences.vue

@@ -250,6 +250,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 								</MkPreferenceContainer>
 							</SearchMarker>
 
+							<SearchMarker :keywords="['size', 'height']">
+								<MkPreferenceContainer k="collapsingNoteCondition">
+									<MkRadios v-model="collapsingNoteCondition">
+										<template #label><SearchLabel>{{ i18n.ts.collapsingNoteCondition }}</SearchLabel></template>
+										<option value="detailedCalculation">{{ i18n.ts.detailedCalculation }}</option>
+										<option value="legacyCalculation">{{ i18n.ts.legacyCalculation }}</option>
+										<option value="seeRenderedSize">{{ i18n.ts.seeRenderedSize }}</option>
+									</MkRadios>
+								</MkPreferenceContainer>
+							</SearchMarker>
+
+							<!-- collapsingNoteConditionの付属条件として扱い、これ自体は検索で出ないようにする -->
+							<MkPreferenceContainer v-if="collapsingNoteCondition !== 'legacyCalculation'" k="collapsingNoteSize">
+								<MkRadios v-model="collapsingNoteSize">
+									<template #label>{{ i18n.ts.collapsingNoteSize }}</template>
+									<option value="9">{{ i18n.ts.small }}</option>
+									<option value="13.5">{{ i18n.ts.medium }}</option>
+									<option value="18">{{ i18n.ts.large }}</option>
+								</MkRadios>
+							</MkPreferenceContainer>
+
 							<SearchMarker :keywords="['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation']">
 								<MkPreferenceContainer k="instanceTicker">
 									<MkSelect v-if="instance.federation !== 'none'" v-model="instanceTicker">
@@ -773,6 +794,8 @@ const notificationStackAxis = prefer.model('notificationStackAxis');
 const instanceTicker = prefer.model('instanceTicker');
 const highlightSensitiveMedia = prefer.model('highlightSensitiveMedia');
 const mediaListWithOneImageAppearance = prefer.model('mediaListWithOneImageAppearance');
+const collapsingNoteCondition = prefer.model('collapsingNoteCondition');
+const collapsingNoteSize = prefer.model('collapsingNoteSize');
 const reactionsDisplaySize = prefer.model('reactionsDisplaySize');
 const limitWidthOfReaction = prefer.model('limitWidthOfReaction');
 const squareAvatars = prefer.model('squareAvatars');

packages/frontend/src/pages/welcome.timeline.note.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 			</div>
 		</div>
-		<div v-else ref="noteTextEl" :class="[$style.text, { [$style.collapsed]: shouldCollapsed }]">
+		<div v-else ref="noteTextEl" :class="[$style.text, { [$style.collapsed]: shouldCollapse }]">
 			<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 			<Mfm v-if="note.text" :text="note.text" :author="note.user"/>
 			<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
@@ -46,14 +46,14 @@ defineProps<{
 }>();
 
 const noteTextEl = useTemplateRef('noteTextEl');
-const shouldCollapsed = ref(false);
+const shouldCollapse = ref(false);
 const showContent = ref(false);
 
 function calcCollapse() {
 	if (noteTextEl.value) {
 		const height = noteTextEl.value.scrollHeight;
 		if (height > 200) {
-			shouldCollapsed.value = true;
+			shouldCollapse.value = true;
 		}
 	}
 }

packages/frontend/src/preferences/def.ts

@@ -265,6 +265,12 @@ export const PREF_DEF = {
 	mediaListWithOneImageAppearance: {
 		default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
 	},
+	collapsingNoteCondition: {
+		default: 'detailedCalculation' as 'detailedCalculation' | 'legacyCalculation' | 'seeRenderedSize',
+	},
+	collapsingNoteSize: {
+		default: 13.5,
+	},
 	notificationPosition: {
 		default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom',
 	},

packages/frontend/src/store.ts

@@ -358,14 +358,6 @@ export const store = markRaw(new Pizzax('base', {
 		where: 'device',
 		default: 'expand' as 'expand' | '16_9' | '1_1' | '2_3',
 	},
-	collapsingNoteSize: {
-		where: 'device',
-		default: 13.5,
-	},
-	collapsingNoteCondition: {
-		where: 'device',
-		default: 'detailedCalculation' as 'detailedCalculation' | 'legacyCalculation' | 'seeRenderedSize',
-	},
 	notificationPosition: {
 		where: 'device',
 		default: 'rightBottom' as 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom',