fix: カラムの名前が正しくリスト/チャンネルの名前にならない問題 (#15987)

* fix: カラムの名前が正しくリスト/チャンネルの名前にならない問題

* changelog Fix: カラムの名前が正しくリスト/チャンネルの名前にならない問題を修正

* reduce requests to retrieve timeline name

5 files changed, 20 insertions, 32 deletions

diff --git a/packages/frontend/src/deck.ts b/packages/frontend/src/deck.ts
index 73a3cecd3b..208adae8fe 100644
--- a/packages/frontend/src/deck.ts
+++ b/packages/frontend/src/deck.ts
@@ -62,6 +62,8 @@ export type Column = {
 	withSensitive?: boolean;
 	onlyFiles?: boolean;
 	soundSetting?: SoundStore;
+	// The cache for the name of the antenna, channel, list, or role
+	timelineNameCache?: string;
 };
 
 const _currentProfile = prefer.s['deck.profiles'].find(p => p.name === prefer.s['deck.profile']);
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index 8de894ee88..0042882728 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
 	<template #header>
-		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name || antennaName || i18n.ts._deck._columns.antenna }}</span>
+		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name || column.timelineNameCache || i18n.ts._deck._columns.antenna }}</span>
 	</template>
 
 	<MkStreamingNotesTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId"/>
@@ -35,18 +35,13 @@ const props = defineProps<{
 
 const timeline = useTemplateRef('timeline');
 const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
-const antennaName = ref<string | null>(null);
 
 onMounted(() => {
 	if (props.column.antennaId == null) {
 		setAntenna();
-	}
-});
-
-watch([() => props.column.name, () => props.column.antennaId], () => {
-	if (!props.column.name && props.column.antennaId) {
+	} else if (props.column.timelineNameCache == null) {
 		misskeyApi('antennas/show', { antennaId: props.column.antennaId })
-			.then(value => antennaName.value = value.name);
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
@@ -77,6 +72,7 @@ async function setAntenna() {
 				antennasCache.delete();
 				updateColumn(props.column.id, {
 					antennaId: newAntenna.id,
+					timelineNameCache: newAntenna.name,
 				});
 			},
 			closed: () => {
@@ -88,6 +84,7 @@ async function setAntenna() {
 
 	updateColumn(props.column.id, {
 		antennaId: antenna.id,
+		timelineNameCache: antenna.name,
 	});
 }
 
diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue
index 3439a2a56e..c02499e2d7 100644
--- a/packages/frontend/src/ui/deck/channel-column.vue
+++ b/packages/frontend/src/ui/deck/channel-column.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
 	<template #header>
-		<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name || channel?.name || i18n.ts._deck._columns.channel }}</span>
+		<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name || column.timelineNameCache || i18n.ts._deck._columns.channel }}</span>
 	</template>
 
 	<template v-if="column.channelId">
@@ -46,13 +46,9 @@ const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null,
 onMounted(() => {
 	if (props.column.channelId == null) {
 		setChannel();
-	}
-});
-
-watch([() => props.column.name, () => props.column.channelId], () => {
-	if (!props.column.name && props.column.channelId) {
+	} else if (!props.column.name && props.column.channelId) {
 		misskeyApi('channels/show', { channelId: props.column.channelId })
-			.then(value => channel.value = value);
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
@@ -72,7 +68,7 @@ async function setChannel() {
 	if (canceled || chosenChannel == null) return;
 	updateColumn(props.column.id, {
 		channelId: chosenChannel.id,
-		name: chosenChannel.name,
+		timelineNameCache: chosenChannel.name,
 	});
 }
 
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index 5b7390b1b2..5c5891ece8 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
 	<template #header>
-		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ (column.name || listName) ?? i18n.ts._deck._columns.list }}</span>
+		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name || column.timelineNameCache || i18n.ts._deck._columns.list }}</span>
 	</template>
 
 	<MkStreamingNotesTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :withRenotes="withRenotes"/>
@@ -36,18 +36,13 @@ const props = defineProps<{
 const timeline = useTemplateRef('timeline');
 const withRenotes = ref(props.column.withRenotes ?? true);
 const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
-const listName = ref<string | null>(null);
 
 onMounted(() => {
 	if (props.column.listId == null) {
 		setList();
-	}
-});
-
-watch([() => props.column.name, () => props.column.listId], () => {
-	if (!props.column.name && props.column.listId) {
+	} else if (props.column.timelineNameCache == null) {
 		misskeyApi('users/lists/show', { listId: props.column.listId })
-			.then(value => listName.value = value.name);
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
@@ -89,10 +84,12 @@ async function setList() {
 
 		updateColumn(props.column.id, {
 			listId: res.id,
+			timelineNameCache: res.name,
 		});
 	} else {
 		updateColumn(props.column.id, {
 			listId: list.id,
+			timelineNameCache: list.name,
 		});
 	}
 }
diff --git a/packages/frontend/src/ui/deck/role-timeline-column.vue b/packages/frontend/src/ui/deck/role-timeline-column.vue
index ff00dfa6e0..0aafeb56d7 100644
--- a/packages/frontend/src/ui/deck/role-timeline-column.vue
+++ b/packages/frontend/src/ui/deck/role-timeline-column.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
 	<template #header>
-		<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name || roleName || i18n.ts._deck._columns.roleTimeline }}</span>
+		<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name || column.timelineNameCache || i18n.ts._deck._columns.roleTimeline }}</span>
 	</template>
 
 	<MkStreamingNotesTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId"/>
@@ -33,18 +33,13 @@ const props = defineProps<{
 
 const timeline = useTemplateRef('timeline');
 const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
-const roleName = ref<string | null>(null);
 
 onMounted(() => {
 	if (props.column.roleId == null) {
 		setRole();
-	}
-});
-
-watch([() => props.column.name, () => props.column.roleId], () => {
-	if (!props.column.name && props.column.roleId) {
+	} else if (props.column.timelineNameCache == null) {
 		misskeyApi('roles/show', { roleId: props.column.roleId })
-			.then(value => roleName.value = value.name);
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
@@ -64,6 +59,7 @@ async function setRole() {
 	if (canceled || role == null) return;
 	updateColumn(props.column.id, {
 		roleId: role.id,
+		timelineNameCache: role.name,
 	});
 }