diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue index 6d52f2a871..4eaa60112d 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -95,6 +95,13 @@ </div> </div> </div> + <div v-else-if="tab === 'users'" class="_formRoot"> + <MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;"> + <MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`"> + <MkUserCardMini :user="user"/> + </MkA> + </MkPagination> + </div> <div v-else-if="tab === 'raw'" class="_formRoot"> <MkObjectView tall :value="instance"> </MkObjectView> @@ -121,6 +128,8 @@ import bytes from '@/filters/bytes'; import { iAmModerator } from '@/account'; import { definePageMetadata } from '@/scripts/page-metadata'; import { i18n } from '@/i18n'; +import MkUserCardMini from '@/components/user-card-mini.vue'; +import MkPagination from '@/components/ui/pagination.vue'; const props = defineProps<{ host: string; @@ -133,6 +142,18 @@ let instance = $ref<misskey.entities.Instance | null>(null); let suspended = $ref(false); let isBlocked = $ref(false); +const usersPagination = { + endpoint: 'admin/show-users' as const, + limit: 10, + params: { + sort: '+updatedAt', + state: 'all', + origin: 'remote', + hostname: props.host, + }, + offsetMode: true, +}; + async function fetch() { instance = await os.api('federation/show-instance', { host: props.host, @@ -182,6 +203,10 @@ const headerTabs = $computed(() => [{ key: 'chart', title: i18n.ts.charts, icon: 'fas fa-chart-simple', +}, { + key: 'users', + title: i18n.ts.users, + icon: 'fas fa-users', }, { key: 'raw', title: 'Raw data',