fix: 表示済みのカラムから別のチャンネルを選択した時、タイムラインの内容が追従して変更されない問題に対処 (#12237)

* 表示済みのカラムから別のチャンネルを選択した時、タイムラインの内容が追従して変更されない問題に対処

* fix CHANGELOG.md

* fix code style

* Update MkTimeline.vue

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

* fix CHANGELOG.md

* Update MkPagination.vue

---------

Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

CHANGELOG.md

@@ -22,6 +22,7 @@
 ### Client
 - Enhance: プラグインでエラーが発生した場合のハンドリングを強化
 - Enhance: 細かなUIのブラッシュアップ
+- Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
 - Fix: プラグインでノートの表示を書き換えられない問題を修正
 - Fix: アイコンデコレーションが見切れる場合がある問題を修正
 - Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正

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,7 @@ function concatMapWithArray(map: MisskeyEntityMap, entities: MisskeyEntity[]): M
 </script>
 <script lang="ts" setup>
 import { infoImageUrl } from '@/instance.js';
+import MkButton from '@/components/MkButton.vue';
 
 const props = withDefaults(defineProps<{
 	pagination: Paging;
@@ -185,9 +185,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 +439,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 +451,8 @@ function toBottom() {
 	scrollToBottom(contentEl!);
 }
 
-onMounted(() => {
-	inited.then(() => {
+onBeforeMount(() => {
+	init().then(() => {
 		if (props.pagination.reversed) {
 			nextTick(() => {
 				setTimeout(toBottom, 800);
@@ -487,7 +484,6 @@ defineExpose({
 	queue,
 	backed,
 	more,
-	inited,
 	reload,
 	prepend,
 	append: appendItem,

packages/frontend/src/components/MkTimeline.vue

@@ -5,12 +5,20 @@ 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 } from '@/stream.js';
@@ -18,6 +26,7 @@ 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) => {