diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index 0f59ca0b36..38cee91a51 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -14,7 +14,7 @@
- {{ list.name }}
+ {{ list.name }} ({{ i18n.t('nUsers', { n: `${list.userIds.length}/${$i?.policies['userEachUserListsLimit']}` }) }})
@@ -32,6 +32,7 @@ import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { userListsCache } from '@/cache';
import { infoImageUrl } from '@/instance';
+import { $i } from '@/account';
const items = $computed(() => userListsCache.value.value ?? []);
@@ -66,10 +67,6 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.manageLists,
icon: 'ti ti-list',
- action: {
- icon: 'ti ti-plus',
- handler: create,
- },
});
onActivated(() => {
@@ -90,4 +87,9 @@ onActivated(() => {
text-decoration: none;
}
}
+
+.nUsers {
+ font-size: .9em;
+ opacity: .7;
+}
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index dd431e8dc0..36a3a123c5 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -20,6 +20,7 @@
{{ i18n.ts.members }}
+ {{ i18n.t('nUsers', { n: `${list.userIds.length}/${$i?.policies['userEachUserListsLimit']}` }) }}
{{ i18n.ts.addUser }}
@@ -29,6 +30,10 @@
+
+ {{ i18n.ts.loadMore }}
+
+
@@ -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(null);
+let users = $ref([]);
+let queueUserIds = $ref([]);
+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));