Enhance(frontend): リスト/アンテナ/チャンネルをタイムラインから新規作成できるように (#12629)

* add short leads to lists, antennas, and channels

* remove unused import

* add CHANGELOG.md

* hide separator when there is no item

* fix mistakes

* Update timeline.vue

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

CHANGELOG.md

@@ -35,6 +35,7 @@
 - Enhance: ノートプレビューに「内容を隠す」が反映されるように
 - Enhance: データセーバーの適用範囲を個別で設定できるように
 	- 従来のデータセーバーの設定はリセットされます
+- Enhance: タイムライン上のタブからリスト、アンテナ、チャンネルの管理ページにジャンプできるように
 - Feat: センシティブと判断されたウェブサイトのサムネイルをぼかすように
   - ウェブサイトをセンシティブと判断する仕組みが動いていないため、summalyProxyを使用しないと機能しません。
 - fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正

packages/frontend/src/pages/timeline.vue

@@ -48,6 +48,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { antennasCache, userListsCache } from '@/cache.js';
 import { deviceKind } from '@/scripts/device-kind.js';
+import { MenuItem } from '@/types/menu.js';
 
 provide('shouldOmitHeaderTitle', true);
 
@@ -83,22 +84,40 @@ function top(): void {
 
 async function chooseList(ev: MouseEvent): Promise<void> {
 	const lists = await userListsCache.fetch();
-	const items = lists.map(list => ({
+	const items: MenuItem[] = [
-		type: 'link' as const,
+		...lists.map(list => ({
-		text: list.name,
+			type: 'link' as const,
-		to: `/timeline/list/${list.id}`,
+			text: list.name,
-	}));
+			to: `/timeline/list/${list.id}`,
+		})),
+		(lists.length === 0 ? undefined : { type: 'divider' }),
+		{
+			type: 'link' as const,
+			icon: 'ti ti-plus',
+			text: i18n.ts.createNew,
+			to: '/my/lists',
+		},
+	];
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 async function chooseAntenna(ev: MouseEvent): Promise<void> {
 	const antennas = await antennasCache.fetch();
-	const items = antennas.map(antenna => ({
+	const items: MenuItem[] = [
-		type: 'link' as const,
+		...antennas.map(antenna => ({
-		text: antenna.name,
+			type: 'link' as const,
-		indicate: antenna.hasUnreadNote,
+			text: antenna.name,
-		to: `/timeline/antenna/${antenna.id}`,
+			indicate: antenna.hasUnreadNote,
-	}));
+			to: `/timeline/antenna/${antenna.id}`,
+		})),
+		(antennas.length === 0 ? undefined : { type: 'divider' }),
+		{
+			type: 'link' as const,
+			icon: 'ti ti-plus',
+			text: i18n.ts.createNew,
+			to: '/my/antennas',
+		},
+	];
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
@@ -106,12 +125,21 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
 	const channels = await os.api('channels/my-favorites', {
 		limit: 100,
 	});
-	const items = channels.map(channel => ({
+	const items = [
-		type: 'link' as const,
+		...channels.map(channel => ({
-		text: channel.name,
+			type: 'link' as const,
-		indicate: channel.hasUnreadNote,
+			text: channel.name,
-		to: `/channels/${channel.id}`,
+			indicate: channel.hasUnreadNote,
-	}));
+			to: `/channels/${channel.id}`,
+		})),
+		(channels.length === 0 ? undefined : null),
+		{
+			type: 'link' as const,
+			icon: 'ti ti-plus',
+			text: i18n.ts.createNew,
+			to: '/channels',
+		},
+	];
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }