enhance(frontend): 컴포넌트만 새로 고쳐도 적용할 수 있는 설정은 페이지를 새로 고치지 않고 설정을 반영함

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)

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(() => {

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();
 });

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'];