From 96f1728573204498482b2a8424ad789dc038c205 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?=
 <46447427+samunohito@users.noreply.github.com>
Date: Wed, 15 Nov 2023 11:24:54 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A8=E7=A4=BA=E6=B8=88=E3=81=BF?=
 =?UTF-8?q?=E3=81=AE=E3=82=AB=E3=83=A9=E3=83=A0=E3=81=8B=E3=82=89=E5=88=A5?=
 =?UTF-8?q?=E3=81=AE=E3=83=81=E3=83=A3=E3=83=B3=E3=83=8D=E3=83=AB=E3=82=92?=
 =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=97=E3=81=9F=E6=99=82=E3=80=81=E3=82=BF?=
 =?UTF-8?q?=E3=82=A4=E3=83=A0=E3=83=A9=E3=82=A4=E3=83=B3=E3=81=AE=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E3=81=8C=E8=BF=BD=E5=BE=93=E3=81=97=E3=81=A6=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4=E3=81=95=E3=82=8C=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C?=
 =?UTF-8?q?=E3=81=AB=E5=AF=BE=E5=87=A6=20(#12237)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* 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                                  |   1 +
 .../frontend/src/components/MkPagination.vue  |  16 +-
 .../frontend/src/components/MkTimeline.vue    | 198 +++++++++++-------
 3 files changed, 130 insertions(+), 85 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c08cb036f..42cc4e137 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@
 ### Client
 - Enhance: プラグインでエラーが発生した場合のハンドリングを強化
 - Enhance: 細かなUIのブラッシュアップ
+- Fix: デッキに表示されたチャンネルの表示先チャンネルを切り替えた際、即座に反映されない問題を修正 #12236
 - Fix: プラグインでノートの表示を書き換えられない問題を修正
 - Fix: アイコンデコレーションが見切れる場合がある問題を修正
 - Fix: 「フォロー中の人全員の返信を含める/含めないようにする」のボタンを押下した際の確認が機能していない問題を修正
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 5643de768..e7796dfcb 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/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,
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 0f8fcaab6..04716ebab 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/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) => {