feat: in-channel featured note

Resolve #9938

CHANGELOG.md

@@ -12,6 +12,7 @@ You should also include the user name that made the change.
 ## 13.x.x (unreleased)
 
 ### Improvements
+- チャンネル内ハイライト
 - renoteした際の表示を改善
 - バックグラウンドで一定時間経過したらページネーションのアイテム更新をしない
 - enhance(client): MkUrlPreviewの閉じるボタンを見やすく

packages/backend/src/server/api/endpoints/notes/featured.ts

@@ -28,6 +28,7 @@ export const paramDef = {
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		offset: { type: 'integer', default: 0 },
+		channelId: { type: 'string', nullable: true, format: 'misskey:id' },
 	},
 	required: [],
 } as const;
@@ -63,6 +64,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
 				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
+			if (ps.channelId) query.andWhere('note.channelId = :channelId', { channelId: ps.channelId });
+
 			if (me) this.queryService.generateMutedUserQuery(query, me);
 			if (me) this.queryService.generateBlockedUserQuery(query, me);
 

packages/frontend/src/pages/channel.vue

@@ -1,9 +1,9 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
-		<div v-if="channel">
-			<div class="wpgynlbz _panel _margin" :class="{ hide: !showBanner }">
+		<div v-if="channel && tab === 'timeline'" class="_gaps">
+			<div class="wpgynlbz _panel" :class="{ hide: !showBanner }">
 				<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
 				<button class="_button toggle" @click="() => showBanner = !showBanner">
 					<template v-if="showBanner"><i class="ti ti-chevron-up"></i></template>
@@ -24,9 +24,12 @@
 			</div>
 
 			<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
-			<MkPostForm v-if="$i" :channel="channel" class="post-form _panel _margin" fixed :autofocus="deviceKind === 'desktop'"/>
+			<MkPostForm v-if="$i" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
 
-			<MkTimeline :key="channelId" class="_margin" src="channel" :channel="channelId" @before="before" @after="after"/>
+			<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after"/>
+		</div>
+		<div v-else-if="tab === 'featured'">
+			<MkNotes :pagination="featuredPagination"/>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -43,6 +46,7 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import MkNotes from '@/components/MkNotes.vue';
 
 const router = useRouter();
 
@@ -50,15 +54,17 @@ const props = defineProps<{
 	channelId: string;
 }>();
 
+let tab = $ref('timeline');
 let channel = $ref(null);
 let showBanner = $ref(true);
-const pagination = {
-	endpoint: 'channels/timeline' as const,
+const featuredPagination = $computed(() => ({
+	endpoint: 'notes/featured' as const,
 	limit: 10,
-	params: computed(() => ({
+	offsetMode: true,
+	params: {
 		channelId: props.channelId,
-	})),
-};
+	},
+}));
 
 watch(() => props.channelId, async () => {
 	channel = await os.api('channels/show', {
@@ -76,7 +82,15 @@ const headerActions = $computed(() => channel && channel.userId ? [{
 	handler: edit,
 }] : null);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [{
+	key: 'timeline',
+	title: i18n.ts.timeline,
+	icon: 'ti ti-home',
+}, {
+	key: 'featured',
+	title: i18n.ts.featured,
+	icon: 'ti ti-bolt',
+}]);
 
 definePageMetadata(computed(() => channel ? {
 	title: channel.name,