feat(client): add channel column to deck

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

@@ -0,0 +1,71 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<template v-if="column.channelId">
+		<div style="padding: 8px; text-align: center;">
+			<MkButton primary gradate rounded inline @click="post"><i class="ti ti-pencil"></i></MkButton>
+		</div>
+		<XTimeline ref="timeline" src="channel" :channel="column.channelId" @after="() => emit('loaded')"/>
+	</template>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XColumn from './column.vue';
+import { updateColumn, Column } from './deck-store';
+import XTimeline from '@/components/MkTimeline.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'loaded'): void;
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let timeline = $shallowRef<InstanceType<typeof XTimeline>>();
+
+if (props.column.channelId == null) {
+	setChannel();
+}
+
+async function setChannel() {
+	const channels = await os.api('channels/followed');
+	const { canceled, result: channel } = await os.select({
+		title: i18n.ts.selectChannel,
+		items: channels.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: props.column.channelId,
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		channelId: channel.id,
+		name: channel.name,
+	});
+}
+
+function post() {
+	os.post({
+		channel: {
+			id: props.column.channelId,
+		},
+		instant: true,
+	});
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.selectChannel,
+	action: setChannel,
+}];
+</script>