From e4db9b64df75bfd56b72c0c11e8330b7b6776789 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 22 May 2025 13:05:28 +0900
Subject: [PATCH] refactor(frontend): better type defs

---
 .../frontend/src/components/MkNotesTimeline.vue    |  4 ++--
 packages/frontend/src/components/MkPagination.vue  | 14 +++++++++++---
 .../frontend/src/composables/use-pagination.ts     |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue
index aaaed5987e..fbf3eaec6f 100644
--- a/packages/frontend/src/components/MkNotesTimeline.vue
+++ b/packages/frontend/src/components/MkNotesTimeline.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </MkPagination>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends PagingCtx<'notes/mentions'>">
 import { useTemplateRef } from 'vue';
 import type { PagingCtx } from '@/composables/use-pagination.js';
 import MkNote from '@/components/MkNote.vue';
@@ -41,7 +41,7 @@ import { globalEvents, useGlobalEvent } from '@/events.js';
 import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js';
 
 const props = withDefaults(defineProps<{
-	pagination: PagingCtx;
+	pagination: T;
 	noGap?: boolean;
 	disableAutoLoad?: boolean;
 	pullToRefresh?: boolean;
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 4d55ac1900..681abd2eff 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -40,16 +40,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 </component>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends PagingCtx">
 import type { PagingCtx } from '@/composables/use-pagination.js';
+import type { UnwrapRef } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { usePagination } from '@/composables/use-pagination.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 
+type Paginator = ReturnType<typeof usePagination<T['endpoint']>>;
+
 const props = withDefaults(defineProps<{
-	pagination: PagingCtx;
+	pagination: T;
 	disableAutoLoad?: boolean;
 	displayLimit?: number;
 	pullToRefresh?: boolean;
@@ -58,7 +61,7 @@ const props = withDefaults(defineProps<{
 	pullToRefresh: true,
 });
 
-const paginator = usePagination({
+const paginator: Paginator = usePagination({
 	ctx: props.pagination,
 });
 
@@ -70,6 +73,11 @@ function appearFetchMore() {
 	paginator.fetchOlder();
 }
 
+defineSlots<{
+	empty: () => void;
+	default: (props: { items: UnwrapRef<Paginator['items']> }) => void;
+}>();
+
 defineExpose({
 	paginator: paginator,
 });
diff --git a/packages/frontend/src/composables/use-pagination.ts b/packages/frontend/src/composables/use-pagination.ts
index 92d7227a71..6a9f00bb91 100644
--- a/packages/frontend/src/composables/use-pagination.ts
+++ b/packages/frontend/src/composables/use-pagination.ts
@@ -40,7 +40,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 	canFetchDetection?: 'safe' | 'limit';
 };
 
-export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
+export function usePagination<Endpoint extends keyof Misskey.Endpoints, T extends { id: string; } = (Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I extends { id: string } ? I : { id: string } : { id: string })>(props: {
 	ctx: PagingCtx<Endpoint>;
 	autoInit?: boolean;
 	autoReInit?: boolean;