引用一覧を読み込むときにnotes/quotesを使うように

packages/backend/src/server/api/EndpointsModule.ts

@@ -273,6 +273,7 @@ import * as ep___notes_localTimeline from './endpoints/notes/local-timeline.js';
 import * as ep___notes_mentions from './endpoints/notes/mentions.js';
 import * as ep___notes_polls_recommendation from './endpoints/notes/polls/recommendation.js';
 import * as ep___notes_polls_vote from './endpoints/notes/polls/vote.js';
+import * as ep___notes_quotes from './endpoints/notes/quotes.js';
 import * as ep___notes_reactions from './endpoints/notes/reactions.js';
 import * as ep___notes_reactions_create from './endpoints/notes/reactions/create.js';
 import * as ep___notes_reactions_delete from './endpoints/notes/reactions/delete.js';
@@ -631,6 +632,7 @@ const $notes_localTimeline: Provider = { provide: 'ep:notes/local-timeline', use
 const $notes_mentions: Provider = { provide: 'ep:notes/mentions', useClass: ep___notes_mentions.default };
 const $notes_polls_recommendation: Provider = { provide: 'ep:notes/polls/recommendation', useClass: ep___notes_polls_recommendation.default };
 const $notes_polls_vote: Provider = { provide: 'ep:notes/polls/vote', useClass: ep___notes_polls_vote.default };
+const $notes_quotes: Provider = { provide: 'ep:notes/quotes', useClass: ep___notes_quotes.default };
 const $notes_reactions: Provider = { provide: 'ep:notes/reactions', useClass: ep___notes_reactions.default };
 const $notes_reactions_create: Provider = { provide: 'ep:notes/reactions/create', useClass: ep___notes_reactions_create.default };
 const $notes_reactions_delete: Provider = { provide: 'ep:notes/reactions/delete', useClass: ep___notes_reactions_delete.default };
@@ -993,6 +995,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$notes_mentions,
 		$notes_polls_recommendation,
 		$notes_polls_vote,
+		$notes_quotes,
 		$notes_reactions,
 		$notes_reactions_create,
 		$notes_reactions_delete,
@@ -1349,6 +1352,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$notes_mentions,
 		$notes_polls_recommendation,
 		$notes_polls_vote,
+		$notes_quotes,
 		$notes_reactions,
 		$notes_reactions_create,
 		$notes_reactions_delete,

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

@@ -273,6 +273,7 @@ import * as ep___notes_localTimeline from './endpoints/notes/local-timeline.js';
 import * as ep___notes_mentions from './endpoints/notes/mentions.js';
 import * as ep___notes_polls_recommendation from './endpoints/notes/polls/recommendation.js';
 import * as ep___notes_polls_vote from './endpoints/notes/polls/vote.js';
+import * as ep___notes_quotes from './endpoints/notes/quotes.js';
 import * as ep___notes_reactions from './endpoints/notes/reactions.js';
 import * as ep___notes_reactions_create from './endpoints/notes/reactions/create.js';
 import * as ep___notes_reactions_delete from './endpoints/notes/reactions/delete.js';
@@ -629,6 +630,7 @@ const eps = [
 	['notes/mentions', ep___notes_mentions],
 	['notes/polls/recommendation', ep___notes_polls_recommendation],
 	['notes/polls/vote', ep___notes_polls_vote],
+	['notes/quotes', ep___notes_quotes],
 	['notes/reactions', ep___notes_reactions],
 	['notes/reactions/create', ep___notes_reactions_create],
 	['notes/reactions/delete', ep___notes_reactions_delete],

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

@@ -0,0 +1,80 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { Brackets } from 'typeorm';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/_.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
+
+export const meta = {
+	tags: ['notes'],
+
+	requireCredential: false,
+
+	res: {
+		type: 'array',
+		optional: false, nullable: false,
+		items: {
+			type: 'object',
+			optional: false, nullable: false,
+			ref: 'Note',
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		noteId: { type: 'string', format: 'misskey:id' },
+		sinceId: { type: 'string', format: 'misskey:id' },
+		untilId: { type: 'string', format: 'misskey:id' },
+		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
+	},
+	required: ['noteId'],
+} as const;
+
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-disable-line import/no-default-export
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.andWhere(new Brackets(qb => {
+					qb
+						.where('note.renoteId = :noteId', { noteId: ps.noteId })
+						.andWhere(new Brackets(qb => {
+							qb
+								.where('note.text IS NOT NULL')
+								.orWhere('note.fileIds != \'{}\'')
+								.orWhere('note.hasPoll = TRUE')
+								.orWhere('note.replyId IS NULL');
+						}));
+				}))
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('renote.user', 'renoteUser');
+
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) {
+				this.queryService.generateMutedUserQuery(query, me);
+				this.queryService.generateBlockedUserQuery(query, me);
+			}
+
+			const notes = await query.limit(ps.limit).getMany();
+
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}

packages/frontend/src/components/MkNoteDetailed.vue

@@ -133,7 +133,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.tabs">
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
-		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'quote' }]" @click="tab = 'quote'"><i class="ti ti-quote"></i> {{ i18n.ts.quote }}</button>
+		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'quotes' }]" @click="tab = 'quotes'"><i class="ti ti-quote"></i> {{ i18n.ts.quote }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
 	</div>
 	<div>
@@ -154,11 +154,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</MkPagination>
 		</div>
-		<div v-else-if="tab === 'quote'" :class="$style.tab_quotes">
-			<div v-if="!quotesLoaded" style="padding: 16px">
-				<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.showMore }}</MkButton>
-			</div>
-			<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.quote" :detail="true"/>
+		<div v-if="tab === 'quotes'" :class="$style.tab_replies">
+			<MkPagination :pagination="quotesPagination">
+				<template #default="{ items }">
+					<MkNoteSub v-for="item in items" :key="item.id" :note="item" :class="$style.reply" :detail="true"/>
+				</template>
+			</MkPagination>
 		</div>
 		<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
 			<div :class="$style.reactionTabs">
@@ -304,6 +305,14 @@ const reactionsPagination = $computed(() => ({
 	},
 }));
 
+const quotesPagination = $computed(() => ({
+	endpoint: 'notes/quotes',
+	limit: 10,
+	params: {
+		noteId: appearNote.id,
+	},
+}));
+
 useNoteCapture({
 	rootEl: el,
 	note: $$(appearNote),
@@ -458,18 +467,6 @@ function loadReplies() {
 	});
 }
 
-const quotesLoaded = ref(false);
-
-function loadQuotes() {
-	quotesLoaded.value = true;
-	os.api('notes/children', {
-		noteId: appearNote.id,
-		limit: 30,
-	}).then(res => {
-		quotes.value = res.filter(item => item.renoteId != null);
-	});
-}
-
 const conversationLoaded = ref(false);
 
 function loadConversation() {

packages/misskey-js/etc/misskey-js.api.md

@@ -1825,6 +1825,15 @@ export type Endpoints = {
         };
         res: null;
     };
+		'notes/quotes': {
+		    req: {
+            noteId: Note['id'];
+            limit?: number;
+            sinceId?: Note['id'];
+            untilId?: Note['id'];
+        };
+        res: Note[];	
+		}
     'notes/reactions': {
         req: {
             noteId: Note['id'];

packages/misskey-js/src/api.types.ts

@@ -518,6 +518,7 @@ export type Endpoints = {
 	'notes/mentions': { req: { following?: boolean; limit?: number; sinceId?: Note['id']; untilId?: Note['id']; }; res: Note[]; };
 	'notes/polls/recommendation': { req: TODO; res: TODO; };
 	'notes/polls/vote': { req: { noteId: Note['id']; choice: number; }; res: null; };
+	'notes/quotes': { req: { noteId: Note['id']; limit?: number; sinceId?: Note['id']; untilId?: Note['id']; }; res: Note[]; };
 	'notes/reactions': { req: { noteId: Note['id']; type?: string | null; limit?: number; }; res: NoteReaction[]; };
 	'notes/reactions/create': { req: { noteId: Note['id']; reaction: string; }; res: null; };
 	'notes/reactions/delete': { req: { noteId: Note['id']; }; res: null; };