From 890dc36251d7ce97d29a91e25c90d61908ad040f Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 1 Dec 2023 17:58:34 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A7=8C=20=EC=83=88=EB=A1=9C=20=EA=B3=A0?=
 =?UTF-8?q?=EC=B3=90=EB=8F=84=20=EC=A0=81=EC=9A=A9=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EC=84=A4=EC=A0=95=EC=9D=80=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EC=83=88=EB=A1=9C=20=EA=B3=A0?=
 =?UTF-8?q?=EC=B9=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=9D=84=20=EB=B0=98=EC=98=81=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  2 +
 .../src/components/MkNotifications.vue        |  3 ++
 .../frontend/src/components/MkTimeline.vue    |  7 +++-
 .../frontend/src/pages/settings/general.vue   | 40 ++++++++++++++-----
 4 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 46fc22c42e..78cdc7cea2 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -57,6 +57,8 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
   - 진동을 사용할 수 없는 이유를 보다 명확하게 표시하도록 개선
 - Enhance: 데이터 절약 모드 적용 범위를 개별적으로 설정할 수 있음 (misskey-dev/misskey#12526)
   - 기존 데이터 절약 모드 설정이 재설정됩니다.
+- Enhance: 컴포넌트만 새로 고쳐도 적용할 수 있는 설정은 페이지를 새로 고치지 않고 설정을 반영함
+  - 각 기능이 적용되는 컴포넌트(타임라인, 알림)에 따라 해당 컴포넌트만 새로 로드됩니다.
 - Fix: '모달 배경색 제거' 옵션이 이모지 피커에 반영되지 않음
 - Fix: 열람 주의로 설정된 노트의 반응이 더 보기를 눌러야 표시됨
 - Fix: 채널 이름이 긴 경우 게시 양식 표시가 깨지는 문제 (misskey-dev/misskey#12524)
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
index 37b93bf019..ab7bc48145 100644
--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -37,6 +37,7 @@ import { infoImageUrl } from '@/instance.js';
 import { defaultStore } from '@/store.js';
 import { mainRouter } from '@/router.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
+import { globalEvents } from '@/events.js';
 
 const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
@@ -82,6 +83,8 @@ let connection;
 onMounted(() => {
 	connection = useStream().useChannel('main');
 	connection.on('notification', onNotification);
+
+	globalEvents.on('reloadNotification', () => reload());
 });
 
 onActivated(() => {
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 330e3392d7..be21188d6b 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onUnmounted, provide } from 'vue';
+import { computed, watch, onUnmounted, provide, onMounted } from 'vue';
 import { Connection } from 'cherrypick-js/built/streaming.js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
@@ -29,6 +29,7 @@ import { defaultStore } from '@/store.js';
 import { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { vibrate } from '@/scripts/vibrate.js';
+import { globalEvents } from '@/events.js';
 
 const props = withDefaults(defineProps<{
 	src: string;
@@ -269,6 +270,10 @@ watch(() => [props.list, props.antenna, props.channel, props.role], refreshEndpo
 // 初回表示用
 refreshEndpointAndChannel();
 
+onMounted(() => {
+	globalEvents.on('reloadTimeline', () => reloadTimeline());
+});
+
 onUnmounted(() => {
 	disconnectChannel();
 });
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 6679e59bbe..61d32b3b5e 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -365,6 +365,14 @@ async function reloadAsk() {
 	} else globalEvents.emit('hasRequireRefresh', true);
 }
 
+function reloadTimeline() {
+	globalEvents.emit('reloadTimeline');
+}
+
+function reloadNotification() {
+	globalEvents.emit('reloadNotification');
+}
+
 const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
 const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
 const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNoteActionsOnlyHover'));
@@ -456,31 +464,41 @@ watch([
 	// fontSize,
 	useBoldFont,
 	useSystemFont,
-	enableInfiniteScroll,
 	squareAvatars,
+	showGapBetweenNotesInTimeline,
+	overridedDeviceKind,
+	keepScreenOn,
+	disableStreamingTimeline,
+	showUnreadNotificationsCount,
+	showFixedPostFormInReplies,
+	showingAnimatedImages,
+], async () => {
+	await reloadAsk();
+});
+
+watch([
+	enableInfiniteScroll,
 	hideAvatarsInNote,
 	showNoteActionsOnlyHover,
-	showGapBetweenNotesInTimeline,
 	instanceTicker,
-	overridedDeviceKind,
 	mediaListWithOneImageAppearance,
 	reactionsDisplaySize,
 	limitWidthOfReaction,
 	highlightSensitiveMedia,
-	keepScreenOn,
-	disableStreamingTimeline,
-	showUnreadNotificationsCount,
 	enableAbsoluteTime,
 	enableMarkByDate,
 	showSubNoteFooterButton,
 	infoButtonForNoteActionsEnabled,
-	showReplyInNotification,
 	renoteQuoteButtonSeparation,
-	showFixedPostFormInReplies,
-	showingAnimatedImages,
 	allMediaNoteCollapse,
-], async () => {
-	await reloadAsk();
+], () => {
+	reloadTimeline();
+});
+
+watch([
+	showReplyInNotification,
+], () => {
+	reloadNotification();
 });
 
 const emojiIndexLangs = ['en-US'];