refactor(frontend): better type defs

2 files changed, 13 insertions, 5 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,
 });