reduce requests to retrieve timeline name

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

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>
 
 	<MkTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @note="onNote"/>
@@ -36,21 +36,16 @@ 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();
+	} else if (props.column.timelineNameCache == null) {
+		misskeyApi('antennas/show', { antennaId: props.column.antennaId })
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
-watch([() => props.column.name, () => props.column.antennaId], () => {
-	if (!props.column.name && props.column.antennaId) {
-		misskeyApi('antennas/show', { antennaId: props.column.antennaId })
-			.then(value => antennaName.value = value.name);
-	}
-}, { immediate: true });
-
 watch(soundSetting, v => {
 	updateColumn(props.column.id, { soundSetting: v });
 });
@@ -78,6 +73,7 @@ async function setAntenna() {
 				antennasCache.delete();
 				updateColumn(props.column.id, {
 					antennaId: newAntenna.id,
+					timelineNameCache: newAntenna.name,
 				});
 			},
 			closed: () => {
@@ -89,6 +85,7 @@ async function setAntenna() {
 
 	updateColumn(props.column.id, {
 		antennaId: antenna.id,
+		timelineNameCache: antenna.name,
 	});
 }
 

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">
@@ -47,16 +47,12 @@ const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null,
 onMounted(() => {
 	if (props.column.channelId == null) {
 		setChannel();
+	} else if (!props.column.name && props.column.channelId) {
+		misskeyApi('channels/show', { channelId: props.column.channelId })
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
-watch([() => props.column.name, () => props.column.channelId], () => {
-	if (!props.column.name && props.column.channelId) {
-		misskeyApi('channels/show', { channelId: props.column.channelId })
-			.then(value => channel.value = value);
-	}
-}, { immediate: true });
-
 watch(soundSetting, v => {
 	updateColumn(props.column.id, { soundSetting: v });
 });
@@ -73,7 +69,7 @@ async function setChannel() {
 	if (canceled || chosenChannel == null) return;
 	updateColumn(props.column.id, {
 		channelId: chosenChannel.id,
-		name: chosenChannel.name,
+		timelineNameCache: chosenChannel.name,
 	});
 }
 

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>
 
 	<MkTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" :withRenotes="withRenotes" @note="onNote"/>
@@ -37,21 +37,16 @@ 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();
+	} else if (props.column.timelineNameCache == null) {
+		misskeyApi('users/lists/show', { listId: props.column.listId })
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
-watch([() => props.column.name, () => props.column.listId], () => {
-	if (!props.column.name && props.column.listId) {
-		misskeyApi('users/lists/show', { listId: props.column.listId })
-			.then(value => listName.value = value.name);
-	}
-}, { immediate: true });
-
 watch(withRenotes, v => {
 	updateColumn(props.column.id, {
 		withRenotes: v,
@@ -90,10 +85,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,
 		});
 	}
 }

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>
 
 	<MkTimeline v-if="column.roleId" ref="timeline" src="role" :role="column.roleId" @note="onNote"/>
@@ -34,21 +34,16 @@ 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();
+	} else if (props.column.timelineNameCache == null) {
+		misskeyApi('roles/show', { roleId: props.column.roleId })
+			.then(value => updateColumn(props.column.id, { timelineNameCache: value.name }));
 	}
 });
 
-watch([() => props.column.name, () => props.column.roleId], () => {
-	if (!props.column.name && props.column.roleId) {
-		misskeyApi('roles/show', { roleId: props.column.roleId })
-			.then(value => roleName.value = value.name);
-	}
-}, { immediate: true });
-
 watch(soundSetting, v => {
 	updateColumn(props.column.id, { soundSetting: v });
 });
@@ -65,6 +60,7 @@ async function setRole() {
 	if (canceled || role == null) return;
 	updateColumn(props.column.id, {
 		roleId: role.id,
+		timelineNameCache: role.name,
 	});
 }