feat: improve tl performance (#11946)

* wip

* wip

* wip

* wip

* wip

* wip

* Update NoteCreateService.ts

* wip

* wip

* wip

* wip

* Update NoteCreateService.ts

* wip

* Update NoteCreateService.ts

* wip

* Update user-notes.ts

* wip

* wip

* wip

* Update NoteCreateService.ts

* wip

* Update timeline.ts

* Update timeline.ts

* Update timeline.ts

* Update timeline.ts

* Update timeline.ts

* wip

* Update timelines.ts

* Update timelines.ts

* Update timelines.ts

* wip

* wip

* wip

* Update timelines.ts

* Update misskey-js.api.md

* Update timelines.ts

* Update timelines.ts

* wip

* wip

* wip

* Update timelines.ts

* wip

* Update timelines.ts

* wip

* test

* Update activitypub.ts

* refactor: UserListJoining -> UserListMembership

* Update NoteCreateService.ts

* wip

1 files changed, 56 insertions, 38 deletions

diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index df13998f6b..b600f99fbc 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -29,16 +29,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<div class="_gaps_s">
 					<MkButton rounded primary style="margin: 0 auto;" @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
-					<div v-for="user in users" :key="user.id" :class="$style.userItem">
-						<MkA :class="$style.userItemBody" :to="`${userPage(user)}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-						<button class="_button" :class="$style.remove" @click="removeUser(user, $event)"><i class="ti ti-x"></i></button>
-					</div>
-					<MkButton v-if="!fetching && queueUserIds.length !== 0" v-appear="enableInfiniteScroll ? fetchMoreUsers : null" :class="$style.more" :style="{ cursor: 'pointer' }" primary rounded @click="fetchMoreUsers">
-						{{ i18n.ts.loadMore }}
-					</MkButton>
-					<MkLoading v-if="fetching" class="loading"/>
+
+					<MkPagination ref="paginationEl" :pagination="membershipsPagination">
+						<template #default="{ items }">
+							<div class="_gaps_s">
+								<div v-for="item in items" :key="item.id">
+									<div :class="$style.userItem">
+										<MkA :class="$style.userItemBody" :to="`${userPage(item.user)}`">
+											<MkUserCardMini :user="item.user"/>
+										</MkA>
+										<button class="_button" :class="$style.menu" @click="showMembershipMenu(item, $event)"><i class="ti ti-dots"></i></button>
+										<button class="_button" :class="$style.remove" @click="removeUser(item, $event)"><i class="ti ti-x"></i></button>
+									</div>
+								</div>
+							</div>
+						</template>
+					</MkPagination>
 				</div>
 			</MkFolder>
 		</div>
@@ -59,9 +65,11 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkInput from '@/components/MkInput.vue';
-import { userListsCache } from '@/cache';
+import { userListsCache } from '@/cache.js';
 import { $i } from '@/account.js';
 import { defaultStore } from '@/store.js';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+
 const {
 	enableInfiniteScroll,
 } = defaultStore.reactiveState;
@@ -70,40 +78,25 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-const FETCH_USERS_LIMIT = 20;
-
+const paginationEl = ref<InstanceType<typeof MkPagination>>();
 let list = $ref<Misskey.entities.UserList | null>(null);
-let users = $ref<Misskey.entities.UserLite[]>([]);
-let queueUserIds = $ref<string[]>([]);
-let fetching = $ref(true);
 const isPublic = ref(false);
 const name = ref('');
+const membershipsPagination = {
+	endpoint: 'users/lists/get-memberships' as const,
+	limit: 30,
+	params: computed(() => ({
+		listId: props.listId,
+	})),
+};
 
 function fetchList() {
-	fetching = true;
 	os.api('users/lists/show', {
 		listId: props.listId,
 	}).then(_list => {
 		list = _list;
 		name.value = list.name;
 		isPublic.value = list.isPublic;
-		queueUserIds = list.userIds;
-
-		return fetchMoreUsers();
-	});
-}
-
-function fetchMoreUsers() {
-	if (!list) return;
-	if (fetching && users.length !== 0) return; // fetchingがtrueならやめるが、usersが空なら続行
-	fetching = true;
-	os.api('users/show', {
-		userIds: queueUserIds.slice(0, FETCH_USERS_LIMIT),
-	}).then(_users => {
-		users = users.concat(_users);
-		queueUserIds = queueUserIds.slice(FETCH_USERS_LIMIT);
-	}).finally(() => {
-		fetching = false;
 	});
 }
 
@@ -114,12 +107,12 @@ function addUser() {
 			listId: list.id,
 			userId: user.id,
 		}).then(() => {
-			users.push(user);
+			paginationEl.value.reload();
 		});
 	});
 }
 
-async function removeUser(user, ev) {
+async function removeUser(item, ev) {
 	os.popupMenu([{
 		text: i18n.ts.remove,
 		icon: 'ti ti-x',
@@ -128,9 +121,28 @@ async function removeUser(user, ev) {
 			if (!list) return;
 			os.api('users/lists/pull', {
 				listId: list.id,
-				userId: user.id,
+				userId: item.userId,
+			}).then(() => {
+				paginationEl.value.removeItem(item.id);
+			});
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
+async function showMembershipMenu(item, ev) {
+	os.popupMenu([{
+		text: item.withReplies ? i18n.ts.hideRepliesToOthersInTimeline : i18n.ts.showRepliesToOthersInTimeline,
+		icon: item.withReplies ? 'ti ti-messages-off' : 'ti ti-messages',
+		action: async () => {
+			os.api('users/lists/update-membership', {
+				listId: list.id,
+				userId: item.userId,
+				withReplies: !item.withReplies,
 			}).then(() => {
-				users = users.filter(x => x.id !== user.id);
+				paginationEl.value.updateItem(item.id, (old) => ({
+					...old,
+					withReplies: !item.withReplies,
+				}));
 			});
 		},
 	}], ev.currentTarget ?? ev.target);
@@ -202,6 +214,12 @@ definePageMetadata(computed(() => list ? {
 	align-self: center;
 }
 
+.menu {
+	width: 32px;
+	height: 32px;
+	align-self: center;
+}
+
 .more {
 	margin-left: auto;
 	margin-right: auto;