feat: in-channel featured note

Resolve #9938
This commit is contained in:
syuilo 2023-02-25 18:26:35 +09:00
parent 24553eb69a
commit ea04778649
3 changed files with 29 additions and 11 deletions

View File

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

View File

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

View File

@ -1,9 +1,9 @@
<template> <template>
<MkStickyContainer> <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"> <MkSpacer :content-max="700">
<div v-if="channel"> <div v-if="channel && tab === 'timeline'" class="_gaps">
<div class="wpgynlbz _panel _margin" :class="{ hide: !showBanner }"> <div class="wpgynlbz _panel" :class="{ hide: !showBanner }">
<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/> <XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
<button class="_button toggle" @click="() => showBanner = !showBanner"> <button class="_button toggle" @click="() => showBanner = !showBanner">
<template v-if="showBanner"><i class="ti ti-chevron-up"></i></template> <template v-if="showBanner"><i class="ti ti-chevron-up"></i></template>
@ -24,9 +24,12 @@
</div> </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> </div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
@ -43,6 +46,7 @@ import { $i } from '@/account';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import MkNotes from '@/components/MkNotes.vue';
const router = useRouter(); const router = useRouter();
@ -50,15 +54,17 @@ const props = defineProps<{
channelId: string; channelId: string;
}>(); }>();
let tab = $ref('timeline');
let channel = $ref(null); let channel = $ref(null);
let showBanner = $ref(true); let showBanner = $ref(true);
const pagination = { const featuredPagination = $computed(() => ({
endpoint: 'channels/timeline' as const, endpoint: 'notes/featured' as const,
limit: 10, limit: 10,
params: computed(() => ({ offsetMode: true,
params: {
channelId: props.channelId, channelId: props.channelId,
})), },
}; }));
watch(() => props.channelId, async () => { watch(() => props.channelId, async () => {
channel = await os.api('channels/show', { channel = await os.api('channels/show', {
@ -76,7 +82,15 @@ const headerActions = $computed(() => channel && channel.userId ? [{
handler: edit, handler: edit,
}] : null); }] : 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 ? { definePageMetadata(computed(() => channel ? {
title: channel.name, title: channel.name,