enhance(client): add users tab to instance-info

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',