フロントエンドもMkPaginationに

packages/frontend/src/components/MkSchedulePostListDialog.vue

@@ -12,39 +12,51 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="$emit('closed')"
 >
 	<template #header>{{ i18n.ts._schedulePost.list }}</template>
-	<div v-for="item in notes">
 	<MkSpacer :marginMin="14" :marginMax="16">
-			<MkNoteSimple scheduled="true" :note="item.note"/>
+		<MkPagination :pagination="pagination">
-		</MkSpacer>
+			<template #empty>
+				<div class="_fullinfo">
+					<img :src="infoImageUrl" class="_ghost"/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
+			</template>
+
+			<template #default="{ items }">
+				<div class="_gaps">
+					<MkNoteSimple v-for="item in items" :key="item.id" :scheduled="true" :note="item.note"/>
+				</div>
+			</template>
+		</MkPagination>
+	</MkSpacer>
 </MkModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { Paging } from '@/components/MkPagination.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os.js';
+import MkPagination from '@/components/MkPagination.vue';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import { i18n } from '@/i18n.js';
+import { infoImageUrl } from '@/instance.js';
 
 const emit = defineEmits<{
 	(ev: 'ok', selected: Misskey.entities.UserDetailed): void;
 	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: 'c-losed'): void;
 }>();
 
-let dialogEl = $ref();
+const dialogEl = ref();
-const notes = ref([]);
 const cancel = () => {
 	emit('cancel');
-	dialogEl.close();
+	dialogEl.value.close();
 };
 
-onMounted(async () => {
+const pagination: Paging = {
-	notes.value = await os.api('notes/schedule/list');
+	endpoint: 'notes/schedule/list',
-});
+	limit: 10,
-
+};
 </script>
 
 <style lang="scss" module>