refactor(frontend): improve pagination implementation

2 files changed, 13 insertions, 17 deletions

diff --git a/packages/frontend/src/ui/deck/direct-column.vue b/packages/frontend/src/ui/deck/direct-column.vue
index c8b174da09..c92ab49e31 100644
--- a/packages/frontend/src/ui/deck/direct-column.vue
+++ b/packages/frontend/src/ui/deck/direct-column.vue
@@ -7,35 +7,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()">
 	<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name || i18n.ts._deck._columns.direct }}</template>
 
-	<MkNotesTimeline ref="tlComponent" :pagination="pagination"/>
+	<MkNotesTimeline :paginator="paginator"/>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue';
+import { markRaw, ref } from 'vue';
 import XColumn from './column.vue';
 import type { Column } from '@/deck.js';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
 import { i18n } from '@/i18n.js';
+import { Paginator } from '@/utility/paginator.js';
 
 defineProps<{
 	column: Column;
 	isStacked: boolean;
 }>();
 
-const pagination = {
-	endpoint: 'notes/mentions' as const,
+const paginator = markRaw(new Paginator('notes/mentions', {
 	limit: 10,
 	params: {
 		visibility: 'specified',
 	},
-};
-
-const tlComponent = useTemplateRef('tlComponent');
+}));
 
 function reloadTimeline() {
 	return new Promise<void>((res) => {
-		tlComponent.value?.reload().then(() => {
+		paginator.reload().then(() => {
 			res();
 		});
 	});
diff --git a/packages/frontend/src/ui/deck/mentions-column.vue b/packages/frontend/src/ui/deck/mentions-column.vue
index 640e933f23..1244f68ef5 100644
--- a/packages/frontend/src/ui/deck/mentions-column.vue
+++ b/packages/frontend/src/ui/deck/mentions-column.vue
@@ -7,34 +7,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 <XColumn :column="column" :isStacked="isStacked" :refresher="() => reloadTimeline()">
 	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name || i18n.ts._deck._columns.mentions }}</template>
 
-	<MkNotesTimeline ref="tlComponent" :pagination="pagination"/>
+	<MkNotesTimeline :paginator="paginator"/>
 </XColumn>
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef } from 'vue';
+import { markRaw, ref } from 'vue';
 import XColumn from './column.vue';
 import type { Column } from '@/deck.js';
 import { i18n } from '@/i18n.js';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
+import { Paginator } from '@/utility/paginator.js';
 
 defineProps<{
 	column: Column;
 	isStacked: boolean;
 }>();
 
-const tlComponent = useTemplateRef('tlComponent');
+const paginator = markRaw(new Paginator('notes/mentions', {
+	limit: 10,
+}));
 
 function reloadTimeline() {
 	return new Promise<void>((res) => {
-		tlComponent.value?.reload().then(() => {
+		paginator.reload().then(() => {
 			res();
 		});
 	});
 }
-
-const pagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-};
 </script>