feat: 노트의 전체 대화와 전체 답글을 불러올 수 있음 (#495)

  - `답글을 자동으로 더 보기`를 활성화하면 `더 보기` 버튼을 누르지 않아도 노트 내 답글을 전부 표시합니다.
  - `대화를 자동으로 더 보기`를 활성화하면 `대화 보기` 버튼을 누르지 않아도 노트 내 대화를 전부 표시합니다.

CHANGELOG_CHERRYPICK.md

@@ -72,6 +72,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
     - 노트가 `내용 가리기`로 설정되어 있음
     - 내용이 긴 노트
     - 노트에 5개 이상의 파일이 포함되어 있음
+- Feat: 노트의 전체 대화와 전체 답글을 불러올 수 있음 (kokonect-link/cherrypick#495)
+  - `답글을 자동으로 더 보기`를 활성화하면 `더 보기` 버튼을 누르지 않아도 노트 내 답글을 전부 표시합니다.
+  - `대화를 자동으로 더 보기`를 활성화하면 `대화 보기` 버튼을 누르지 않아도 노트 내 대화를 전부 표시합니다.
 
 ### Client
 - Enhance: CherryPick 업데이트 페이지를 제어판 목록에 추가함

locales/en-US.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "English"
+autoLoadMoreReplies: "Show more automatically replies"
+autoLoadMoreConversation: "Show more conversation automatically"
 useAutoTranslate: "Automatic translation"
 useAutoTranslateDescription: "Enabling the automatic translation feature automatically translates all notes in the timeline, which could potentially result in the API restriction policy set by the translation service provider temporarily disabling the translation feature.\n\n<b>Do you still want to activate it?</b>"
 cantUseAutoTranslateDescription: "The server administrator has disabled automatic translation.\nPlease contact your server administrator to enable automatic translation."

locales/index.d.ts

@@ -13,6 +13,14 @@ export interface Locale extends ILocale {
      * 日本語
      */
     "_lang_": string;
+    /**
+     * 返信を自動でもっと見る
+     */
+    "autoLoadMoreReplies": string;
+    /**
+     * 会話を自動でもっと見る
+     */
+    "autoLoadMoreConversation": string;
     /**
      * 自動翻訳
      */

locales/ja-JP.yml

@@ -1,5 +1,7 @@
 _lang_: "日本語"
 
+autoLoadMoreReplies: "返信を自動でもっと見る"
+autoLoadMoreConversation: "会話を自動でもっと見る"
 useAutoTranslate: "自動翻訳"
 useAutoTranslateDescription: "自動翻訳機能を有効にすると、タイムラインのすべてのノートが自動的に翻訳され、これにより翻訳サービス提供者が設定したAPI制限ポリシーにより、翻訳機能を一時的に使用できなくなる可能性があります。\n\n<b>それでも続けましょうか？</b>"
 cantUseAutoTranslateDescription: "サーバー管理者が自動翻訳を使用できないように設定しました。\n自動翻訳を使用するには、サーバー管理者にお問い合わせください。"

locales/ko-KR.yml

@@ -1,5 +1,7 @@
 ---
 _lang_: "한국어"
+autoLoadMoreReplies: "답글을 자동으로 더 보기"
+autoLoadMoreConversation: "대화를 자동으로 더 보기"
 useAutoTranslate: "자동 번역"
 useAutoTranslateDescription: "자동 번역 기능을 활성화하면 타임라인의 모든 노트가 자동으로 번역되며, 이로 인해 번역 서비스 제공자가 설정한 API 제한 정책에 의해 번역 기능을 일시적으로 사용하지 못하게 될 가능성이 있어요.\n\n<b>그래도 활성화 하시겠어요?</b>"
 cantUseAutoTranslateDescription: "서버 관리자가 자동 번역을 사용할 수 없도록 설정했어요.\n자동 번역을 사용하려면 서버 관리자에게 문의해 주세요."

packages/frontend/src/components/MkNoteDetailed.vue

@@ -730,27 +730,30 @@ function blur() {
 	rootEl.value?.blur();
 }
 
-function loadRepliesSimple() {
+const repliesLoaded = ref(false);
+
+function loadReplies() {
+	repliesLoaded.value = true;
 	misskeyApi('notes/children', {
 		noteId: appearNote.value.id,
-		limit: 3,
+		limit: 30,
 	}).then(res => {
 		replies.value = res;
 	});
 }
 
-const repliesLoaded = ref(false);
-
-function loadReplies() {
-	repliesLoaded.value = true;
+function loadRepliesSimple() {
 	misskeyApi('notes/children', {
 		noteId: appearNote.value.id,
-		limit: 30,
+		limit: 3,
 	}).then(res => {
 		replies.value = res;
 	});
 }
 
+if (tab.value === 'replies' && !repliesLoaded.value && !defaultStore.state.autoLoadMoreReplies) loadRepliesSimple();
+else if (tab.value === 'replies' && appearNote.value.repliesCount > 2 && !repliesLoaded.value && defaultStore.state.autoLoadMoreReplies) loadReplies();
+
 const conversationLoaded = ref(false);
 
 function loadConversation() {
@@ -763,13 +766,11 @@ function loadConversation() {
 	});
 }
 
+if (appearNote.value.reply && appearNote.value.reply.replyId && defaultStore.state.autoLoadMoreConversation) loadConversation();
+
 function showOnRemote() {
 	if (props.note.user.instance !== undefined) window.open(props.note.url ?? props.note.uri, '_blank', 'noopener');
 }
-
-onMounted(() => {
-	loadRepliesSimple();
-});
 </script>
 
 <style lang="scss" module>

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

@@ -51,6 +51,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableHorizontalSwipe">{{ i18n.ts.enableHorizontalSwipe }}</MkSwitch>
 				<MkSwitch v-model="alwaysConfirmFollow">{{ i18n.ts.alwaysConfirmFollow }}</MkSwitch>
 				<MkSwitch v-model="confirmWhenRevealingSensitiveMedia">{{ i18n.ts.confirmWhenRevealingSensitiveMedia }}</MkSwitch>
+				<MkSwitch v-model="autoLoadMoreReplies">{{ i18n.ts.autoLoadMoreReplies }} <span class="_beta">CherryPick</span></MkSwitch>
+				<MkSwitch v-model="autoLoadMoreConversation">{{ i18n.ts.autoLoadMoreConversation }} <span class="_beta">CherryPick</span></MkSwitch>
 				<MkSwitch v-model="useAutoTranslate" @update:modelValue="learnMoreAutoTranslate">
 					{{ i18n.ts.useAutoTranslate }} <span class="_beta">CherryPick</span>
 					<template v-if="!$i.policies.canUseAutoTranslate" #caption>{{ i18n.ts.cannotBeUsedFunc }} <a class="_link" @click="learnMoreCantUseAutoTranslate">{{ i18n.ts.learnMore }}</a></template>
@@ -191,6 +193,8 @@ const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSette
 const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
 const newNoteReceivedNotificationBehavior = computed(defaultStore.makeGetterSetter('newNoteReceivedNotificationBehavior'));
 const requireRefreshBehavior = computed(defaultStore.makeGetterSetter('requireRefreshBehavior'));
+const autoLoadMoreReplies = computed(defaultStore.makeGetterSetter('autoLoadMoreReplies'));
+const autoLoadMoreConversation = computed(defaultStore.makeGetterSetter('autoLoadMoreConversation'));
 const useAutoTranslate = computed(defaultStore.makeGetterSetter('useAutoTranslate'));
 
 watch(lang, () => {

packages/frontend/src/store.ts

@@ -548,6 +548,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'topBottom' as 'all' | 'topBottom' | 'top' | 'bottom' | 'bg' | 'hide',
 	},
+	autoLoadMoreReplies: {
+		where: 'device',
+		default: false,
+	},
+	autoLoadMoreConversation: {
+		where: 'device',
+		default: false,
+	},
 	useAutoTranslate: {
 		where: 'device',
 		default: false,