feat: メディアタイムラインを輸入 (#103)

* メディアタイムラインの実装

* refactor(stream): ストリーミングにwithFilesオプションを実装

---------

Co-authored-by: tar_bin <tar.bin.master@gmail.com>

packages/frontend/src/components/MkTimeline.vue

@@ -82,6 +82,17 @@ if (props.src === 'antenna') {
 		withReplies: defaultStore.state.showTimelineReplies,
 	});
 	connection.on('note', prepend);
+} else if (props.src === 'media') {
+	endpoint = 'notes/hybrid-timeline';
+	query = {
+		withFiles: true,
+		withReplies: defaultStore.state.showTimelineReplies,
+	};
+	connection = stream.useChannel('hybridTimeline', {
+		withFiles: true,
+		withReplies: defaultStore.state.showTimelineReplies,
+	});
+	connection.on('note', prepend);
 } else if (props.src === 'social') {
 	endpoint = 'notes/hybrid-timeline';
 	query = {

packages/frontend/src/pages/timeline.vue

@@ -128,6 +128,11 @@ const headerTabs = $computed(() => [{
 	title: i18n.ts._timelines.local,
 	icon: 'ti ti-planet',
 	iconOnly: true,
+}, {
+	key: 'media',
+	title: i18n.ts._timelines.media,
+	icon: 'ti ti-photo',
+	iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,

packages/frontend/src/ui/deck/deck-store.ts

@@ -24,7 +24,7 @@ export type Column = {
 	channelId?: string;
 	roleId?: string;
 	includingTypes?: typeof notificationTypes[number][];
-	tl?: 'home' | 'local' | 'social' | 'global';
+	tl?: 'home' | 'local' | 'media' | 'social' | 'global';
 };
 
 export const deckStore = markRaw(new Storage('deck', {

packages/frontend/src/ui/deck/tl-column.vue

@@ -4,6 +4,7 @@
 		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
 		<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
 		<i v-else-if="column.tl === 'social'" class="ti ti-rocket"></i>
+		<i v-else-if="column.tl === 'media'" class="ti ti-photo"></i>
 		<i v-else-if="column.tl === 'global'" class="ti ti-whirl"></i>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
@@ -56,6 +57,8 @@ async function setType() {
 			value: 'home' as const, text: i18n.ts._timelines.home,
 		}, {
 			value: 'local' as const, text: i18n.ts._timelines.local,
+		}, {
+			value: 'media' as const, text: i18n.ts._timelines.media,
 		}, {
 			value: 'social' as const, text: i18n.ts._timelines.social,
 		}, {

packages/frontend/src/widgets/WidgetTimeline.vue

@@ -117,6 +117,10 @@ const choose = async (ev) => {
 		text: i18n.ts._timelines.local,
 		icon: 'ti ti-planet',
 		action: () => { setSrc('local'); },
+	}, {
+		text: i18n.ts._timelines.media,
+		icon: 'ti ti-photo',
+		action: () => { setSrc('media'); },
 	}, {
 		text: i18n.ts._timelines.social,
 		icon: 'ti ti-rocket',