コメント対応（MkButtonのimportとonBeforeUpdate->watch）

CHANGELOG.md

@@ -65,6 +65,7 @@
 - Fix: サイレンス状態で公開範囲のパブリックを選択できてしまう問題を修正 #12224
 - Fix: In deck layout, replies option is not saved after refresh
 - Fix: アーカイブしたお知らせがコントロールパネルに表示される問題を修正
+- Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
 - Note: アップデート後、サウンドに関する設定が初期化されます
 
 ### Server

packages/frontend/src/components/MkPagination.vue

@@ -43,12 +43,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll.js';
 import { useDocumentVisibility } from '@/scripts/use-document-visibility.js';
-import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store.js';
 import { MisskeyEntity } from '@/types/date-separated-list';
 import { i18n } from '@/i18n.js';
@@ -91,6 +90,9 @@ function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): M
 </script>
 <script lang="ts" setup>
 import { infoImageUrl } from '@/instance.js';
+import MkButton from '@/components/MkButton.vue';
+import MkLoading from '@/components/global/MkLoading.vue';
+import MkError from '@/components/global/MkError.vue';
 
 const props = withDefaults(defineProps<{
 	pagination: Paging;
@@ -185,9 +187,8 @@ watch([$$(backed), $$(contentEl)], () => {
 	}
 });
 
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
-}
+// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど）
+watch(() => props.pagination.params, init, { deep: true });
 
 watch(queue, (a, b) => {
 	if (a.size === 0 && b.size === 0) return;
@@ -440,8 +441,6 @@ const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => M
 	if (queueItem) queue.value.set(id, replacer(queueItem));
 };
 
-const inited = init();
-
 onActivated(() => {
 	isBackTop.value = false;
 });
@@ -454,8 +453,8 @@ function toBottom() {
 	scrollToBottom(contentEl!);
 }
 
-onMounted(() => {
-	inited.then(() => {
+onBeforeMount(() => {
+	init().then(() => {
 		if (props.pagination.reversed) {
 			nextTick(() => {
 				setTimeout(toBottom, 800);
@@ -487,7 +486,6 @@ defineExpose({
 	queue,
 	backed,
 	more,
-	inited,
 	reload,
 	prepend,
 	append: appendItem,

packages/frontend/src/components/MkTimeline.vue

@@ -5,19 +5,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkPullToRefresh ref="prComponent" :refresher="() => reloadTimeline()">
-	<MkNotes ref="tlComponent" :noGap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)" @status="prComponent.setDisabled($event)"/>
+	<MkNotes
+		v-if="paginationQuery"
+		ref="tlComponent"
+		:pagination="paginationQuery"
+		:noGap="!defaultStore.state.showGapBetweenNotesInTimeline"
+		@queue="emit('queue', $event)"
+		@status="prComponent.setDisabled($event)"
+	/>
 </MkPullToRefresh>
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, onUnmounted } from 'vue';
+import { computed, watch, onUnmounted, provide } from 'vue';
+import { Connection } from 'misskey-js/built/streaming.js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
-import { useStream, reloadStream } from '@/stream.js';
+import { reloadStream, useStream } from '@/stream.js';
 import * as sound from '@/scripts/sound.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
 import { defaultStore } from '@/store.js';
+import { Paging } from '@/components/MkPagination.vue';
 
 const props = withDefaults(defineProps<{
 	src: string;
@@ -42,6 +51,17 @@ const emit = defineEmits<{
 
 provide('inChannel', computed(() => props.src === 'channel'));
 
+type TimelineQueryType = {
+  antennaId?: string,
+  withRenotes?: boolean,
+  withReplies?: boolean,
+  withFiles?: boolean,
+  visibility?: string,
+  listId?: string,
+  channelId?: string,
+  roleId?: string
+}
+
 const prComponent: InstanceType<typeof MkPullToRefresh> = $ref();
 const tlComponent: InstanceType<typeof MkNotes> = $ref();
 
@@ -63,13 +83,13 @@ const prepend = note => {
 	}
 };
 
-let endpoint;
-let query;
-let connection;
-let connection2;
+let connection: Connection;
+let connection2: Connection;
+let paginationQuery: Paging | null = null;
 
 const stream = useStream();
-const connectChannel = () => {
+
+function connectChannel() {
 	if (props.src === 'antenna') {
 		connection = stream.useChannel('antenna', {
 			antennaId: props.antenna,
@@ -123,78 +143,106 @@ const connectChannel = () => {
 		});
 	}
 	if (props.src !== 'directs' || props.src !== 'mentions') connection.on('note', prepend);
-};
-
-if (props.src === 'antenna') {
-	endpoint = 'antennas/notes';
-	query = {
-		antennaId: props.antenna,
-	};
-} else if (props.src === 'home') {
-	endpoint = 'notes/timeline';
-	query = {
-		withRenotes: props.withRenotes,
-		withFiles: props.onlyFiles ? true : undefined,
-	};
-} else if (props.src === 'local') {
-	endpoint = 'notes/local-timeline';
-	query = {
-		withRenotes: props.withRenotes,
-		withReplies: props.withReplies,
-		withFiles: props.onlyFiles ? true : undefined,
-	};
-} else if (props.src === 'social') {
-	endpoint = 'notes/hybrid-timeline';
-	query = {
-		withRenotes: props.withRenotes,
-		withReplies: props.withReplies,
-		withFiles: props.onlyFiles ? true : undefined,
-	};
-} else if (props.src === 'global') {
-	endpoint = 'notes/global-timeline';
-	query = {
-		withRenotes: props.withRenotes,
-		withFiles: props.onlyFiles ? true : undefined,
-	};
-} else if (props.src === 'mentions') {
-	endpoint = 'notes/mentions';
-} else if (props.src === 'directs') {
-	endpoint = 'notes/mentions';
-	query = {
-		visibility: 'specified',
-	};
-} else if (props.src === 'list') {
-	endpoint = 'notes/user-list-timeline';
-	query = {
-		withFiles: props.onlyFiles ? true : undefined,
-		listId: props.list,
-	};
-} else if (props.src === 'channel') {
-	endpoint = 'channels/timeline';
-	query = {
-		channelId: props.channel,
-	};
-} else if (props.src === 'role') {
-	endpoint = 'roles/notes';
-	query = {
-		roleId: props.role,
-	};
 }
 
-if (!defaultStore.state.disableStreamingTimeline) {
-	connectChannel();
-
-	onUnmounted(() => {
-		connection.dispose();
-		if (connection2) connection2.dispose();
-	});
+function disconnectChannel() {
+	if (connection) connection.dispose();
+	if (connection2) connection2.dispose();
 }
 
-const pagination = {
-	endpoint: endpoint,
-	limit: 10,
-	params: query,
-};
+function updatePaginationQuery() {
+	let endpoint: string | null;
+	let query: TimelineQueryType | null;
+
+	if (props.src === 'antenna') {
+		endpoint = 'antennas/notes';
+		query = {
+			antennaId: props.antenna,
+		};
+	} else if (props.src === 'home') {
+		endpoint = 'notes/timeline';
+		query = {
+			withRenotes: props.withRenotes,
+			withFiles: props.onlyFiles ? true : undefined,
+		};
+	} else if (props.src === 'local') {
+		endpoint = 'notes/local-timeline';
+		query = {
+			withRenotes: props.withRenotes,
+			withReplies: props.withReplies,
+			withFiles: props.onlyFiles ? true : undefined,
+		};
+	} else if (props.src === 'social') {
+		endpoint = 'notes/hybrid-timeline';
+		query = {
+			withRenotes: props.withRenotes,
+			withReplies: props.withReplies,
+			withFiles: props.onlyFiles ? true : undefined,
+		};
+	} else if (props.src === 'global') {
+		endpoint = 'notes/global-timeline';
+		query = {
+			withRenotes: props.withRenotes,
+			withFiles: props.onlyFiles ? true : undefined,
+		};
+	} else if (props.src === 'mentions') {
+		endpoint = 'notes/mentions';
+		query = null;
+	} else if (props.src === 'directs') {
+		endpoint = 'notes/mentions';
+		query = {
+			visibility: 'specified',
+		};
+	} else if (props.src === 'list') {
+		endpoint = 'notes/user-list-timeline';
+		query = {
+			withFiles: props.onlyFiles ? true : undefined,
+			listId: props.list,
+		};
+	} else if (props.src === 'channel') {
+		endpoint = 'channels/timeline';
+		query = {
+			channelId: props.channel,
+		};
+	} else if (props.src === 'role') {
+		endpoint = 'roles/notes';
+		query = {
+			roleId: props.role,
+		};
+	} else {
+		endpoint = null;
+		query = null;
+	}
+
+	if (endpoint && query) {
+		paginationQuery = {
+			endpoint: endpoint,
+			limit: 10,
+			params: query,
+		};
+	} else {
+		paginationQuery = null;
+	}
+}
+
+function refreshEndpointAndChannel() {
+	if (!defaultStore.state.disableStreamingTimeline) {
+		disconnectChannel();
+		connectChannel();
+	}
+
+	updatePaginationQuery();
+}
+
+// IDが切り替わったら切り替え先のTLを表示させたい
+watch(() => [props.list, props.antenna, props.channel, props.role], refreshEndpointAndChannel);
+
+// 初回表示用
+refreshEndpointAndChannel();
+
+onUnmounted(() => {
+	disconnectChannel();
+});
 
 function reloadTimeline() {
 	return new Promise<void>((res) => {