Merge pull request '[PR]: feat: channel column in deck view' (#10291) from naskya/calckey:feat/deck-channel-column into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10291

locales/en-US.yml

@@ -147,6 +147,7 @@ unsuspendConfirm: "Are you sure that you want to unsuspend this account?"
 selectList: "Select a list"
 selectAntenna: "Select an antenna"
 selectWidget: "Select a widget"
+selectChannel: "Select a channel"
 editWidgets: "Edit widgets"
 editWidgetsExit: "Done"
 customEmojis: "Custom Emoji"
@@ -2027,8 +2028,9 @@ _deck:
     widgets: "Widgets"
     notifications: "Notifications"
     tl: "Timeline"
-    antenna: "Antennas"
+    antenna: "Antenna"
     list: "List"
+    channel: "Channel"
     mentions: "Mentions"
     direct: "Direct messages"
 _experiments:

locales/ja-JP.yml

@@ -133,6 +133,7 @@ unsuspendConfirm: "解凍しますか？"
 selectList: "リストを選択"
 selectAntenna: "アンテナを選択"
 selectWidget: "ウィジェットを選択"
+selectChannel: "チャンネルを選択"
 editWidgets: "ウィジェットを編集"
 editWidgetsExit: "編集を終了"
 customEmojis: "カスタム絵文字"
@@ -1854,6 +1855,7 @@ _deck:
     tl: "タイムライン"
     antenna: "アンテナ"
     list: "リスト"
+    channel: "チャンネル"
     mentions: "あなた宛て"
     direct: "ダイレクト"
 noteId: 投稿のID

packages/client/src/ui/deck.vue

@@ -245,6 +245,7 @@ const addColumn = async (ev) => {
 		"tl",
 		"antenna",
 		"list",
+		"channel",
 		"mentions",
 		"direct",
 	];

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

@@ -0,0 +1,73 @@
+<template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i class="ph-television ph-bold ph-lg"></i
+			><span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
+
+		<XTimeline
+			v-if="column.channelId"
+			ref="timeline"
+			src="channel"
+			:channel="column.channelId"
+			@after="() => emit('loaded')"
+		/>
+	</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 * 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 = $ref<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, {
+		name: channel.name,
+		channelId: channel.id,
+	});
+}
+
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.selectChannel,
+		action: setChannel,
+	},
+];
+</script>
+
+<style lang="scss" module></style>

packages/client/src/ui/deck/column-core.vue

@@ -49,6 +49,12 @@
 		:is-stacked="isStacked"
 		@parent-focus="emit('parent-focus', $event)"
 	/>
+	<XChannelColumn
+		v-else-if="column.type === 'channel'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
 </template>
 
 <script lang="ts" setup>
@@ -61,6 +67,7 @@ import XNotificationsColumn from "./notifications-column.vue";
 import XWidgetsColumn from "./widgets-column.vue";
 import XMentionsColumn from "./mentions-column.vue";
 import XDirectColumn from "./direct-column.vue";
+import XChannelColumn from "./channel-column.vue";
 import { Column } from "./deck-store";
 
 defineProps<{