From dbfafe25e3230d5efa0406ea7a297af4633ed800 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Fri, 19 Apr 2024 13:35:18 +0100
Subject: [PATCH 1/2] rework pagination - fixes #491

previously, when adding items either at the beginnig (e.g. new notes
coming in while we're not looking at the top of the timeline) or a the
end (e.g. more items arriving from a background fetch) of a paginated
view, the resulting list got truncated to `displayLimit`, potentially
throwing data away and causing a new fetch.

This, coupled with the async nature of scrolling & fetching, could
cause weird results.

Also, `offset` was always incremented by the size of the fetched
results, even if not all of them were displayed, meant that it was
possible for offset-based pagination to drop items.

Finally, the "queue" of new items (usually, new notes) also got
truncated to `displayLimit`, which again could drop items (this effect
was usually masked by the first point: when scrolling to the top of
the timeline, if the queue's length was equal to `displayLimit`, those
notes displaced any existing ones, `unshiftItems` set
`more.value=true`, you got scrolled to the top, and notes were fetched
again, so you lost your position but at least all notes got shown,
eventually)
---
 .../frontend/src/components/MkPagination.vue   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index 62a85389ad..6f6007d432 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -395,10 +395,10 @@ const prepend = (item: MisskeyEntity): void => {
  * @param newItems 新しいアイテムの配列
  */
 function unshiftItems(newItems: MisskeyEntity[]) {
-	const length = newItems.length + items.value.size;
-	items.value = new Map([...arrayToEntries(newItems), ...items.value].slice(0, props.displayLimit));
-
-	if (length >= props.displayLimit) more.value = true;
+	const prevLength = items.value.size;
+	items.value = new Map([...arrayToEntries(newItems), ...items.value].slice(0, newItems.length + props.displayLimit));
+	// if we truncated, mark that there are more values to fetch
+	if (items.value.size < prevLength) more.value = true;
 }
 
 /**
@@ -406,10 +406,10 @@ function unshiftItems(newItems: MisskeyEntity[]) {
  * @param oldItems 古いアイテムの配列
  */
 function concatItems(oldItems: MisskeyEntity[]) {
-	const length = oldItems.length + items.value.size;
-	items.value = new Map([...items.value, ...arrayToEntries(oldItems)].slice(0, props.displayLimit));
-
-	if (length >= props.displayLimit) more.value = true;
+	const prevLength = items.value.size;
+	items.value = new Map([...items.value, ...arrayToEntries(oldItems)].slice(0, oldItems.length + props.displayLimit));
+	// if we truncated, mark that there are more values to fetch
+	if (items.value.size < prevLength) more.value = true;
 }
 
 function executeQueue() {
@@ -418,7 +418,7 @@ function executeQueue() {
 }
 
 function prependQueue(newItem: MisskeyEntity) {
-	queue.value = new Map([[newItem.id, newItem], ...queue.value].slice(0, props.displayLimit) as [string, MisskeyEntity][]);
+	queue.value = new Map([[newItem.id, newItem], ...queue.value] as [string, MisskeyEntity][]);
 }
 
 /*

From 504ff4c2af04d474cdd6d3da5c469d9ca00ce9e1 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Sun, 21 Apr 2024 11:17:17 +0100
Subject: [PATCH 2/2] increase page size for most admin lists - #491

Since I can't quite figure out how to prevent `MkPagination` from
truncating the lists too eagerly, I'm going to hide the problem by
making it truncate _less_.
---
 packages/frontend/src/components/MkFileListForAdmin.vue | 2 +-
 packages/frontend/src/components/MkUserList.vue         | 2 +-
 packages/frontend/src/pages/about.federation.vue        | 2 +-
 packages/frontend/src/pages/admin/abuses.vue            | 2 +-
 packages/frontend/src/pages/admin/approvals.vue         | 2 +-
 packages/frontend/src/pages/admin/federation.vue        | 2 +-
 packages/frontend/src/pages/admin/invites.vue           | 2 +-
 packages/frontend/src/pages/admin/modlog.vue            | 2 +-
 packages/frontend/src/pages/admin/roles.role.vue        | 2 +-
 packages/frontend/src/pages/admin/users.vue             | 2 +-
 packages/frontend/src/pages/custom-emojis-manager.vue   | 4 ++--
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
index f3305e9f54..bab844c27f 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.vue
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+	<MkPagination v-slot="{items}" :pagination="pagination" :displayLimit="50" class="urempief" :class="{ grid: viewMode === 'grid' }">
 		<MkA
 			v-for="file in (items as Misskey.entities.DriveFile[])"
 			:key="file.id"
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
index 17a9254d01..ac82ecc3d6 100644
--- a/packages/frontend/src/components/MkUserList.vue
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkPagination :pagination="pagination">
+<MkPagination :pagination="pagination" :displayLimit="50">
 	<template #empty>
 		<div class="_fullinfo">
 			<img :src="infoImageUrl" class="_ghost"/>
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
index c7f2315faa..b8f2fcc883 100644
--- a/packages/frontend/src/pages/about.federation.vue
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -42,7 +42,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" :pagination="pagination" :displayLimit="50">
 		<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"/>
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 42fcc3a598..6e1f5f9cec 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			-->
 
-					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
+					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" :displayLimit="50" style="margin-top: var(--margin);">
 						<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
 					</MkPagination>
 				</div>
diff --git a/packages/frontend/src/pages/admin/approvals.vue b/packages/frontend/src/pages/admin/approvals.vue
index 998e16681a..03420232c8 100644
--- a/packages/frontend/src/pages/admin/approvals.vue
+++ b/packages/frontend/src/pages/admin/approvals.vue
@@ -4,7 +4,7 @@
 		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 		<MkSpacer :contentMax="900">
 			<div class="_gaps_m">
-				<MkPagination ref="paginationComponent" :pagination="pagination">
+				<MkPagination ref="paginationComponent" :pagination="pagination" :displayLimit="50">
 					<template #default="{ items }">
 						<div class="_gaps_s">
 							<SkApprovalUser v-for="item in items" :key="item.id" :user="(item as any)" :onDeleted="deleted"/>
diff --git a/packages/frontend/src/pages/admin/federation.vue b/packages/frontend/src/pages/admin/federation.vue
index f8c4a3b272..db9211929f 100644
--- a/packages/frontend/src/pages/admin/federation.vue
+++ b/packages/frontend/src/pages/admin/federation.vue
@@ -45,7 +45,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" :pagination="pagination" :displayLimit="50">
 					<div :class="$style.instances">
 						<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Status: ${getStatus(instance)}`" :class="$style.instance" :to="`/instance-info/${instance.host}`">
 							<MkInstanceCardMini :instance="instance"/>
diff --git a/packages/frontend/src/pages/admin/invites.vue b/packages/frontend/src/pages/admin/invites.vue
index 7b8a1e1d4e..4dc8ded7a2 100644
--- a/packages/frontend/src/pages/admin/invites.vue
+++ b/packages/frontend/src/pages/admin/invites.vue
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<option value="-usedAt">{{ i18n.ts.usedAt }} ({{ i18n.ts.descendingOrder }})</option>
 				</MkSelect>
 			</div>
-			<MkPagination ref="pagingComponent" :pagination="pagination">
+			<MkPagination ref="pagingComponent" :pagination="pagination" :displayLimit="50">
 				<template #default="{ items }">
 					<div class="_gaps_s">
 						<MkInviteCode v-for="item in items" :key="item.id" :invite="(item as any)" :onDeleted="deleted" moderator/>
diff --git a/packages/frontend/src/pages/admin/modlog.vue b/packages/frontend/src/pages/admin/modlog.vue
index 4651bb4516..850d36063e 100644
--- a/packages/frontend/src/pages/admin/modlog.vue
+++ b/packages/frontend/src/pages/admin/modlog.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkInput>
 			</div>
 
-			<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--margin);">
+			<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" :displayLimit="50" style="margin-top: var(--margin);">
 				<div class="_gaps_s">
 					<XModLog v-for="item in items" :key="item.id" :log="item"/>
 				</div>
diff --git a/packages/frontend/src/pages/admin/roles.role.vue b/packages/frontend/src/pages/admin/roles.role.vue
index cda524f787..c084d5f8df 100644
--- a/packages/frontend/src/pages/admin/roles.role.vue
+++ b/packages/frontend/src/pages/admin/roles.role.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div class="_gaps">
 						<MkButton primary rounded @click="assign"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.assign }}</MkButton>
 
-						<MkPagination :pagination="usersPagination">
+						<MkPagination :pagination="usersPagination" :displayLimit="50">
 							<template #empty>
 								<div class="_fullinfo">
 									<img :src="infoImageUrl" class="_ghost"/>
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
index 626346a998..001b7dc82d 100644
--- a/packages/frontend/src/pages/admin/users.vue
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkInput>
 				</div>
 
-				<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination">
+				<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" :displayLimit="50">
 					<div :class="$style.users">
 						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" :class="$style.user" :to="`/admin/user/${user.id}`">
 							<MkUserCardMini :user="user"/>
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 1a745d6626..a0f2a817c9 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkButton inline @click="setLicenseBulk">Set License</MkButton>
 						<MkButton inline danger @click="delBulk">Delete</MkButton>
 					</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+					<MkPagination ref="emojisPaginationComponent" :pagination="pagination" :displayLimit="50">
 						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">
@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
 					</FormSplit>
-					<MkPagination :pagination="remotePagination">
+					<MkPagination :pagination="remotePagination" :displayLimit="50">
 						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">