From 2f817cec8ac8bb6944125a8ef79dc50b1cb3fe69 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 3 May 2025 15:04:31 +0900
Subject: [PATCH] wip

---
 .../frontend/src/components/MkChannelList.vue |  4 ++--
 .../frontend/src/components/MkUserList.vue    |  4 ++--
 .../components/MkUserSetupDialog.Follow.vue   |  6 +++---
 .../frontend/src/pages/about.federation.vue   |  4 ++--
 packages/frontend/src/pages/admin/abuses.vue  |  2 +-
 packages/frontend/src/pages/admin/invites.vue |  8 ++++----
 packages/frontend/src/pages/admin/users.vue   |  2 +-
 packages/frontend/src/pages/announcements.vue |  8 ++++----
 .../src/pages/custom-emojis-manager.vue       | 20 +++++++++----------
 .../frontend/src/pages/drive.file.notes.vue   |  4 ++--
 .../frontend/src/pages/follow-requests.vue    | 10 +++++-----
 packages/frontend/src/pages/instance-info.vue |  4 ++--
 packages/frontend/src/pages/invite.vue        |  8 ++++----
 .../frontend/src/pages/my-clips/index.vue     |  6 +++---
 packages/frontend/src/pages/my-lists/list.vue |  6 +++---
 packages/frontend/src/pages/note.vue          | 10 +++++-----
 packages/frontend/src/pages/search.note.vue   |  4 ++--
 packages/frontend/src/pages/search.user.vue   |  4 ++--
 packages/frontend/src/pages/settings/apps.vue |  2 +-
 packages/frontend/src/use/use-pagination.ts   | 19 ++++++++++++++++++
 20 files changed, 77 insertions(+), 58 deletions(-)

diff --git a/packages/frontend/src/components/MkChannelList.vue b/packages/frontend/src/components/MkChannelList.vue
index fdb7d2a1c4..272fab194a 100644
--- a/packages/frontend/src/components/MkChannelList.vue
+++ b/packages/frontend/src/components/MkChannelList.vue
@@ -19,14 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkChannelPreview from '@/components/MkChannelPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
 
 const props = withDefaults(defineProps<{
-	pagination: Paging;
+	pagination: PagingCtx;
 	noGap?: boolean;
 	extractor?: (item: any) => any;
 }>(), {
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index 0d1ffd715f..7f26b4b360 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -21,14 +21,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n.js';
 import { infoImageUrl } from '@/instance.js';
 
 const props = withDefaults(defineProps<{
-	pagination: Paging;
+	pagination: PagingCtx;
 	noGap?: boolean;
 	extractor?: (item: any) => any;
 }>(), {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
index 67a06c70db..1c1247e3e8 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.Follow.vue
@@ -39,15 +39,15 @@ import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
 import XUser from '@/components/MkUserSetupDialog.User.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 
-const pinnedUsers: Paging = {
+const pinnedUsers: PagingCtx = {
 	endpoint: 'pinned-users',
 	noPaging: true,
 	limit: 10,
 };
 
-const popularUsers: Paging = {
+const popularUsers: PagingCtx = {
 	endpoint: 'users',
 	limit: 10,
 	noPaging: true,
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
index 97743995bf..dc3c906217 100644
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -55,7 +55,7 @@ import { computed, ref } from 'vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
 import FormSplit from '@/components/form/split.vue';
 import { i18n } from '@/i18n.js';
@@ -81,7 +81,7 @@ const pagination = {
 			state.value === 'notResponding' ? { notResponding: true } :
 			{}),
 	})),
-} as Paging;
+} as PagingCtx;
 
 function getStatus(instance) {
 	if (instance.isSuspended) return 'Suspended';
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 3dc5c2ef7e..14e8e600b0 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -87,7 +87,7 @@ const pagination = {
 };
 
 function resolved(reportId) {
-	reports.value?.removeItem(reportId);
+	reports.value?.paginator.removeItem(reportId);
 }
 
 function closeTutorial() {
diff --git a/packages/frontend/src/pages/admin/invites.vue b/packages/frontend/src/pages/admin/invites.vue
index 072175f3af..754bf74c2a 100644
--- a/packages/frontend/src/pages/admin/invites.vue
+++ b/packages/frontend/src/pages/admin/invites.vue
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef } from 'vue';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -73,7 +73,7 @@ const pagingComponent = useTemplateRef('pagingComponent');
 const type = ref('all');
 const sort = ref('+createdAt');
 
-const pagination: Paging = {
+const pagination: PagingCtx = {
 	endpoint: 'admin/invite/list' as const,
 	limit: 10,
 	params: computed(() => ({
@@ -100,12 +100,12 @@ async function createWithOptions() {
 		text: tickets.map(x => x.code).join('\n'),
 	});
 
-	tickets.forEach(ticket => pagingComponent.value?.prepend(ticket));
+	tickets.forEach(ticket => pagingComponent.value?.paginator.prepend(ticket));
 }
 
 function deleted(id: string) {
 	if (pagingComponent.value) {
-		pagingComponent.value.items.delete(id);
+		pagingComponent.value.paginator.removeItem(id);
 	}
 }
 
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index 6eb3c04dde..56cf8876f0 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -121,7 +121,7 @@ async function addUser() {
 		username: username,
 		password: password,
 	}).then(res => {
-		paginationComponent.value?.reload();
+		paginationComponent.value?.paginator.reload();
 	});
 }
 
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 746d679cf0..2c671c6b34 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -86,10 +86,10 @@ async function read(target) {
 	}
 
 	if (!paginationEl.value) return;
-	paginationEl.value.updateItem(target.id, a => {
-		a.isRead = true;
-		return a;
-	});
+	paginationEl.value.paginator.updateItem(target.id, a => ({
+		...a,
+		isRead: true,
+	}));
 	misskeyApi('i/read-announcement', { announcementId: target.id });
 	updateCurrentAccountPartial({
 		unreadAnnouncements: $i!.unreadAnnouncements.filter(a => a.id !== target.id),
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 16a95c6753..46e494e6f6 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -115,7 +115,7 @@ const selectAll = () => {
 	if (selectedEmojis.value.length > 0) {
 		selectedEmojis.value = [];
 	} else {
-		selectedEmojis.value = Array.from(emojisPaginationComponent.value?.items.values(), item => item.id);
+		selectedEmojis.value = emojisPaginationComponent.value?.paginator.items.value.map(item => item.id);
 	}
 };
 
@@ -132,7 +132,7 @@ const add = async (ev: MouseEvent) => {
 	}, {
 		done: result => {
 			if (result.created) {
-				emojisPaginationComponent.value?.prepend(result.created);
+				emojisPaginationComponent.value?.paginator.prepend(result.created);
 			}
 		},
 		closed: () => dispose(),
@@ -145,12 +145,12 @@ const edit = (emoji) => {
 	}, {
 		done: result => {
 			if (result.updated) {
-				emojisPaginationComponent.value?.updateItem(result.updated.id, (oldEmoji) => ({
+				emojisPaginationComponent.value?.paginator.updateItem(result.updated.id, (oldEmoji) => ({
 					...oldEmoji,
 					...result.updated,
 				}));
 			} else if (result.deleted) {
-				emojisPaginationComponent.value?.removeItem(emoji.id);
+				emojisPaginationComponent.value?.paginator.removeItem(emoji.id);
 			}
 		},
 		closed: () => dispose(),
@@ -242,7 +242,7 @@ const setCategoryBulk = async () => {
 		ids: selectedEmojis.value,
 		category: result,
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const setLicenseBulk = async () => {
@@ -254,7 +254,7 @@ const setLicenseBulk = async () => {
 		ids: selectedEmojis.value,
 		license: result,
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const addTagBulk = async () => {
@@ -266,7 +266,7 @@ const addTagBulk = async () => {
 		ids: selectedEmojis.value,
 		aliases: result.split(' '),
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const removeTagBulk = async () => {
@@ -278,7 +278,7 @@ const removeTagBulk = async () => {
 		ids: selectedEmojis.value,
 		aliases: result.split(' '),
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const setTagBulk = async () => {
@@ -290,7 +290,7 @@ const setTagBulk = async () => {
 		ids: selectedEmojis.value,
 		aliases: result.split(' '),
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const delBulk = async () => {
@@ -302,7 +302,7 @@ const delBulk = async () => {
 	await os.apiWithDialog('admin/emoji/delete-bulk', {
 		ids: selectedEmojis.value,
 	});
-	emojisPaginationComponent.value?.reload();
+	emojisPaginationComponent.value?.paginator.reload();
 };
 
 const headerActions = computed(() => [{
diff --git a/packages/frontend/src/pages/drive.file.notes.vue b/packages/frontend/src/pages/drive.file.notes.vue
index 5eaf84224b..95ac5082bb 100644
--- a/packages/frontend/src/pages/drive.file.notes.vue
+++ b/packages/frontend/src/pages/drive.file.notes.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import { i18n } from '@/i18n.js';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
 
@@ -23,7 +23,7 @@ const props = defineProps<{
 
 const realFileId = computed(() => props.fileId);
 
-const pagination = ref<Paging>({
+const pagination = ref<PagingCtx>({
 	endpoint: 'drive/files/attached-notes',
 	limit: 10,
 	params: {
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index 8ea385a74f..d2db4e2e2a 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { useTemplateRef, computed, ref } from 'vue';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { userPage, acct } from '@/filters/user.js';
@@ -53,7 +53,7 @@ import { $i } from '@/i.js';
 
 const paginationComponent = useTemplateRef('paginationComponent');
 
-const pagination = computed<Paging>(() => tab.value === 'list' ? {
+const pagination = computed<PagingCtx>(() => tab.value === 'list' ? {
 	endpoint: 'following/requests/list',
 	limit: 10,
 } : {
@@ -63,19 +63,19 @@ const pagination = computed<Paging>(() => tab.value === 'list' ? {
 
 function accept(user: Misskey.entities.UserLite) {
 	os.apiWithDialog('following/requests/accept', { userId: user.id }).then(() => {
-		paginationComponent.value?.reload();
+		paginationComponent.value?.paginator.reload();
 	});
 }
 
 function reject(user: Misskey.entities.UserLite) {
 	os.apiWithDialog('following/requests/reject', { userId: user.id }).then(() => {
-		paginationComponent.value?.reload();
+		paginationComponent.value?.paginator.reload();
 	});
 }
 
 function cancel(user: Misskey.entities.UserLite) {
 	os.apiWithDialog('following/requests/cancel', { userId: user.id }).then(() => {
-		paginationComponent.value?.reload();
+		paginationComponent.value?.paginator.reload();
 	});
 }
 
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index 96a43f67e8..c25a5b36d8 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -133,7 +133,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { ChartSrc } from '@/components/MkChart.vue';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
 import FormLink from '@/components/form/link.vue';
@@ -180,7 +180,7 @@ const usersPagination = {
 		hostname: props.host,
 	},
 	offsetMode: true,
-} satisfies Paging;
+} satisfies PagingCtx;
 
 if (iAmModerator) {
 	watch(moderationNote, async () => {
diff --git a/packages/frontend/src/pages/invite.vue b/packages/frontend/src/pages/invite.vue
index cc114ae9b3..1a6073eff6 100644
--- a/packages/frontend/src/pages/invite.vue
+++ b/packages/frontend/src/pages/invite.vue
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -51,7 +51,7 @@ const currentInviteLimit = ref<null | number>(null);
 const inviteLimit = (($i != null && $i.policies.inviteLimit) || (($i == null && instance.policies.inviteLimit))) as number;
 const inviteLimitCycle = (($i != null && $i.policies.inviteLimitCycle) || ($i == null && instance.policies.inviteLimitCycle)) as number;
 
-const pagination: Paging = {
+const pagination: PagingCtx = {
 	endpoint: 'invite/list' as const,
 	limit: 10,
 };
@@ -74,13 +74,13 @@ async function create() {
 		text: ticket.code,
 	});
 
-	pagingComponent.value?.prepend(ticket);
+	pagingComponent.value?.paginator.prepend(ticket);
 	update();
 }
 
 function deleted(id: string) {
 	if (pagingComponent.value) {
-		pagingComponent.value.items.delete(id);
+		pagingComponent.value.paginator.removeItem(id);
 	}
 	update();
 }
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index 9e427ecf35..4dafd87b80 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -73,15 +73,15 @@ async function create() {
 
 	clipsCache.delete();
 
-	pagingComponent.value?.reload();
+	pagingComponent.value?.paginator.reload();
 }
 
 function onClipCreated() {
-	pagingComponent.value?.reload();
+	pagingComponent.value?.paginator.reload();
 }
 
 function onClipDeleted() {
-	pagingComponent.value?.reload();
+	pagingComponent.value?.paginator.reload();
 }
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index bcb60b266b..06abe3d7fd 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -109,7 +109,7 @@ function addUser() {
 			listId: list.value.id,
 			userId: user.id,
 		}).then(() => {
-			paginationEl.value?.reload();
+			paginationEl.value?.paginator.reload();
 		});
 	});
 }
@@ -125,7 +125,7 @@ async function removeUser(item, ev) {
 				listId: list.value.id,
 				userId: item.userId,
 			}).then(() => {
-				paginationEl.value?.removeItem(item.id);
+				paginationEl.value?.paginator.removeItem(item.id);
 			});
 		},
 	}], ev.currentTarget ?? ev.target);
@@ -147,7 +147,7 @@ async function showMembershipMenu(item, ev) {
 			userId: item.userId,
 			withReplies,
 		}).then(() => {
-			paginationEl.value!.updateItem(item.id, (old) => ({
+			paginationEl.value!.paginator.updateItem(item.id, (old) => ({
 				...old,
 				withReplies,
 			}));
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 64aa87dc83..0e91f36279 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { host } from '@@/js/config.js';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@@ -80,7 +80,7 @@ const showPrev = ref<'user' | 'channel' | false>(false);
 const showNext = ref<'user' | 'channel' | false>(false);
 const error = ref();
 
-const prevUserPagination: Paging = {
+const prevUserPagination: PagingCtx = {
 	endpoint: 'users/notes',
 	limit: 10,
 	params: computed(() => note.value ? ({
@@ -89,7 +89,7 @@ const prevUserPagination: Paging = {
 	}) : undefined),
 };
 
-const nextUserPagination: Paging = {
+const nextUserPagination: PagingCtx = {
 	reversed: true,
 	endpoint: 'users/notes',
 	limit: 10,
@@ -99,7 +99,7 @@ const nextUserPagination: Paging = {
 	}) : undefined),
 };
 
-const prevChannelPagination: Paging = {
+const prevChannelPagination: PagingCtx = {
 	endpoint: 'channels/timeline',
 	limit: 10,
 	params: computed(() => note.value ? ({
@@ -108,7 +108,7 @@ const prevChannelPagination: Paging = {
 	}) : undefined),
 };
 
-const nextChannelPagination: Paging = {
+const nextChannelPagination: PagingCtx = {
 	reversed: true,
 	endpoint: 'channels/timeline',
 	limit: 10,
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index d6928d2c14..35609912eb 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, shallowRef, toRef } from 'vue';
 import type * as Misskey from 'misskey-js';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import { $i } from '@/i.js';
 import { host as localHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
@@ -144,7 +144,7 @@ const props = withDefaults(defineProps<{
 const router = useRouter();
 
 const key = ref(0);
-const notePagination = ref<Paging<'notes/search'>>();
+const notePagination = ref<PagingCtx<'notes/search'>>();
 
 const searchQuery = ref(toRef(props, 'query').value);
 const hostInput = ref(toRef(props, 'host').value);
diff --git a/packages/frontend/src/pages/search.user.vue b/packages/frontend/src/pages/search.user.vue
index 101de6a64f..fb4166fe36 100644
--- a/packages/frontend/src/pages/search.user.vue
+++ b/packages/frontend/src/pages/search.user.vue
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, toRef } from 'vue';
 import type { Endpoints } from 'misskey-js';
-import type { Paging } from '@/components/MkPagination.vue';
+import type { PagingCtx } from '@/use/use-pagination.js';
 import MkUserList from '@/components/MkUserList.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<{
 const router = useRouter();
 
 const key = ref(0);
-const userPagination = ref<Paging<'users/search'>>();
+const userPagination = ref<PagingCtx<'users/search'>>();
 
 const searchQuery = ref(toRef(props, 'query').value);
 const searchOrigin = ref(toRef(props, 'origin').value);
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
index 03b66e9f18..ad46d7f4e8 100644
--- a/packages/frontend/src/pages/settings/apps.vue
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -78,7 +78,7 @@ const pagination = {
 
 function revoke(token) {
 	misskeyApi('i/revoke-token', { tokenId: token.id }).then(() => {
-		list.value?.reload();
+		list.value?.paginator.reload();
 	});
 }
 
diff --git a/packages/frontend/src/use/use-pagination.ts b/packages/frontend/src/use/use-pagination.ts
index ec34d38901..166c178277 100644
--- a/packages/frontend/src/use/use-pagination.ts
+++ b/packages/frontend/src/use/use-pagination.ts
@@ -196,6 +196,23 @@ export function usePagination<T extends MisskeyEntity>(props: {
 		queuedAheadItemsCount.value = 0;
 	}
 
+	function removeItem(id: string) {
+		const index = items.value.findIndex(x => x.id === id);
+		if (index !== -1) {
+			items.value.splice(index, 1);
+			if (props.useShallowRef) triggerRef(items);
+		}
+	}
+
+	function updateItem(id: string, updator: (item: T) => T) {
+		const index = items.value.findIndex(x => x.id === id);
+		if (index !== -1) {
+			const item = items.value[index]!;
+			items.value[index] = updator(item);
+			if (props.useShallowRef) triggerRef(items);
+		}
+	}
+
 	onMounted(() => {
 		init();
 	});
@@ -213,6 +230,8 @@ export function usePagination<T extends MisskeyEntity>(props: {
 		unshiftItems,
 		prepend,
 		trim,
+		removeItem,
+		updateItem,
 		enqueue,
 		releaseQueue,
 		error,