feat(frontend): ユーザーリスト管理でユーザー数とロールポリシーの登録可能ユーザー数を表示するなど (#11231)

* feat(frontend): ユーザーリスト一覧で、ユーザー数とロールポリシーの登録可能ユーザー数を表示する

* ✌️

* fix

* fix

* wip

* loading

* fix

packages/frontend/src/pages/my-lists/list.vue

@@ -20,6 +20,7 @@
 
 			<MkFolder defaultOpen>
 				<template #label>{{ i18n.ts.members }}</template>
+				<template #caption>{{ i18n.t('nUsers', { n: `${list.userIds.length}/${$i?.policies['userEachUserListsLimit']}` }) }}</template>
 
 				<div class="_gaps_s">
 					<MkButton rounded primary style="margin: 0 auto;" @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
@@ -29,6 +30,10 @@
 						</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"/>
 				</div>
 			</MkFolder>
 		</div>
@@ -49,34 +54,57 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkInput from '@/components/MkInput.vue';
 import { userListsCache } from '@/cache';
+import { UserList, UserLite } from 'misskey-js/built/entities';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
+const {
+	enableInfiniteScroll,
+} = defaultStore.reactiveState;
 
 const props = defineProps<{
 	listId: string;
 }>();
 
-let list = $ref(null);
-let users = $ref([]);
+const FETCH_USERS_LIMIT = 20;
+
+let list = $ref<UserList | null>(null);
+let users = $ref<UserLite[]>([]);
+let queueUserIds = $ref<string[]>([]);
+let fetching = $ref(true);
 const isPublic = ref(false);
 const name = ref('');
 
 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;
 
-		os.api('users/show', {
-			userIds: list.userIds,
-		}).then(_users => {
-			users = _users;
-		});
+		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;
 	});
 }
 
 function addUser() {
 	os.selectUser().then(user => {
+		if (!list) return;
 		os.apiWithDialog('users/lists/push', {
 			listId: list.id,
 			userId: user.id,
@@ -92,6 +120,7 @@ async function removeUser(user, ev) {
 		icon: 'ti ti-x',
 		danger: true,
 		action: async () => {
+			if (!list) return;
 			os.api('users/lists/pull', {
 				listId: list.id,
 				userId: user.id,
@@ -103,6 +132,7 @@ async function removeUser(user, ev) {
 }
 
 async function deleteList() {
+	if (!list) return;
 	const { canceled } = await os.confirm({
 		type: 'warning',
 		text: i18n.t('removeAreYouSure', { x: list.name }),
@@ -117,6 +147,7 @@ async function deleteList() {
 }
 
 async function updateSettings() {
+	if (!list) return;
 	await os.apiWithDialog('users/lists/update', {
 		listId: list.id,
 		name: name.value,
@@ -166,6 +197,11 @@ definePageMetadata(computed(() => list ? {
 	align-self: center;
 }
 
+.more {
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .footer {
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));