refactor(frontend): improve pagination implementation

packages/frontend/src/pages/about.federation.vue

@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</FormSplit>
 	</div>
 
-	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
+	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :paginator="paginator">
 		<div :class="$style.items">
 			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.item" :to="`/instance-info/${instance.host}`">
 				<MkInstanceCardMini :instance="instance"/>
@@ -51,24 +51,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, markRaw, ref } from 'vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import type { PagingCtx } from '@/composables/use-pagination.js';
 import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
 import FormSplit from '@/components/form/split.vue';
 import { i18n } from '@/i18n.js';
+import { Paginator } from '@/utility/paginator.js';
 
 const host = ref('');
 const state = ref('federating');
 const sort = ref('+pubSub');
-const pagination = {
-	endpoint: 'federation/instances' as const,
+const paginator = markRaw(new Paginator('federation/instances', {
 	limit: 10,
-	displayLimit: 50,
 	offsetMode: true,
-	params: computed(() => ({
+	computedParams: computed(() => ({
 		sort: sort.value,
 		host: host.value !== '' ? host.value : null,
 		...(
@@ -81,7 +79,7 @@ const pagination = {
 			state.value === 'notResponding' ? { notResponding: true } :
 			{}),
 	})),
-} as PagingCtx;
+}));
 
 function getStatus(instance) {
 	if (instance.isSuspended) return 'Suspended';