enhance(frontend): アンテナ・リストの設定画面・タイムラインの動線を改善 (#16739)

* enhance(frontend): アンテナ・リストの設定画面からタイムラインへの動線を追加

* Update Changelog

* fix

CHANGELOG.md

@@ -16,6 +16,9 @@
 - Enhance: プッシュ通知を行うための権限確認をより確実に行うように
 - Enhance: 投稿フォームのチュートリアルを追加
 - Enhance: 「自動でもっと見る」をほとんどの箇所で利用可能に
+- Enhance: アンテナ・リスト設定画面とタイムラインの動線を改善
+	- アンテナ・リスト一覧画面の項目を選択すると、設定画面ではなくタイムラインに移動するようになりました
+	- アンテナ・リストの設定画面の右上にタイムラインに移動するボタンを追加しました
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように
 - Fix: ページのタイトルが長いとき、はみ出る問題を修正

packages/frontend/src/pages/my-antennas/edit.vue

@@ -36,7 +36,17 @@ misskeyApi('antennas/show', { antennaId: props.antennaId }).then((antennaRespons
 	antenna.value = antennaResponse;
 });
 
-const headerActions = computed(() => []);
+const headerActions = computed(() => antenna.value ? [{
+	icon: 'ti ti-timeline',
+	text: i18n.ts.timeline,
+	handler: () => {
+		router.push('/timeline/antenna/:antennaId', {
+			params: {
+				antennaId: antenna.value!.id,
+			},
+		});
+	},
+}] : []);
 const headerTabs = computed(() => []);
 
 definePage(() => ({

packages/frontend/src/pages/my-antennas/index.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton :link="true" to="/my/antennas/create" primary :class="$style.add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 			<div v-if="antennas.length > 0" class="_gaps">
-				<MkA v-for="antenna in antennas" :key="antenna.id" :class="$style.antenna" :to="`/my/antennas/${antenna.id}`">
+				<MkA v-for="antenna in antennas" :key="antenna.id" :class="$style.antenna" :to="`/timeline/antenna/${antenna.id}`">
 					<div class="name">{{ antenna.name }}</div>
 				</MkA>
 			</div>

packages/frontend/src/pages/my-lists/index.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
 			<div v-if="items.length > 0" class="_gaps">
-				<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
+				<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/timeline/list/${list.id}`">
 					<div style="margin-bottom: 4px;">{{ list.name }} <span :class="$style.nUsers">({{ i18n.tsx.nUsers({ n: `${list.userIds!.length}/${$i.policies['userEachUserListsLimit']}` }) }})</span></div>
 					<MkAvatars :userIds="list.userIds!" :limit="10"/>
 				</MkA>

packages/frontend/src/pages/my-lists/list.vue

@@ -26,10 +26,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.members }}</template>
 				<template #caption>{{ i18n.tsx.nUsers({ n: `${list.userIds!.length}/${$i.policies['userEachUserListsLimit']}` }) }}</template>
 
-				<div class="_gaps_s">
+				<div class="_gaps">
-					<MkButton rounded primary style="margin: 0 auto;" @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
+					<MkButton rounded primary style="margin: 0 auto;" @click="addUser()"><i class="ti ti-plus"></i> {{ i18n.ts.addUser }}</MkButton>
 
-					<MkPagination :paginator="membershipsPaginator" withControl>
+					<MkPagination :paginator="membershipsPaginator">
 						<template #default="{ items }">
 							<div class="_gaps_s">
 								<div v-for="item in items" :key="item.id">
@@ -67,12 +67,13 @@ import MkInput from '@/components/MkInput.vue';
 import { userListsCache } from '@/cache.js';
 import { ensureSignin } from '@/i.js';
 import MkPagination from '@/components/MkPagination.vue';
-import { mainRouter } from '@/router.js';
+import { useRouter } from '@/router.js';
-import { prefer } from '@/preferences.js';
 import { Paginator } from '@/utility/paginator.js';
 
 const $i = ensureSignin();
 
+const router = useRouter();
+
 const props = defineProps<{
 	listId: string;
 }>();
@@ -162,7 +163,7 @@ async function deleteList() {
 		listId: list.value.id,
 	});
 	userListsCache.delete();
-	mainRouter.push('/my/lists');
+	router.push('/my/lists');
 }
 
 async function updateSettings() {
@@ -181,7 +182,17 @@ async function updateSettings() {
 
 watch(() => props.listId, fetchList, { immediate: true });
 
-const headerActions = computed(() => []);
+const headerActions = computed(() => list.value ? [{
+	icon: 'ti ti-timeline',
+	text: i18n.ts.timeline,
+	handler: () => {
+		router.push('/timeline/list/:listId', {
+			params: {
+				listId: list.value!.id,
+			},
+		});
+	},
+}] : []);
 
 const headerTabs = computed(() => []);