enhance(client): tweak ui

packages/client/src/pages/admin/users.vue

@@ -41,25 +41,9 @@
 					</div>
 
 					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-						<button v-for="user in items" :key="user.id" class="user _panel _button _gap" @click="show(user)">
-							<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-							<div class="body">
-								<header>
-									<MkUserName class="name" :user="user"/>
-									<span class="acct">@{{ acct(user) }}</span>
-									<span v-if="user.isAdmin" class="staff"><i class="fas fa-bookmark"></i></span>
-									<span v-if="user.isModerator" class="staff"><i class="far fa-bookmark"></i></span>
-									<span v-if="user.isSilenced" class="punished"><i class="fas fa-microphone-slash"></i></span>
-									<span v-if="user.isSuspended" class="punished"><i class="fas fa-snowflake"></i></span>
-								</header>
-								<div>
-									<span>{{ $ts.lastUsed }}: <MkTime v-if="user.updatedAt" :time="user.updatedAt" mode="detail"/></span>
-								</div>
-								<div>
-									<span>{{ $ts.registeredDate }}: <MkTime :time="user.createdAt" mode="detail"/></span>
-								</div>
-							</div>
-						</button>
+						<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}`" :behavior="'window'">
+							<MkUserCardMini :user="user"/>
+						</MkA>
 					</MkPagination>
 				</div>
 			</div>
@@ -74,11 +58,11 @@ import XHeader from './_header_.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { lookupUser } from '@/scripts/lookup-user';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import MkUserCardMini from '@/components/user-card-mini.vue';
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
@@ -174,54 +158,12 @@ definePageMetadata(computed(() => ({
 	
 		> .users {
 			margin-top: var(--margin);
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+			grid-gap: 12px;
 
-			> .user {
-				display: flex;
-				width: 100%;
-				box-sizing: border-box;
-				text-align: left;
-				align-items: center;
-				padding: 16px;
-
-				&:hover {
-					color: var(--accent);
-				}
-
-				> .avatar {
-					width: 60px;
-					height: 60px;
-				}
-
-				> .body {
-					margin-left: 0.3em;
-					padding: 0 8px;
-					flex: 1;
-
-					@media (max-width: 500px) {
-						font-size: 14px;
-					}
-
-					> header {
-						> .name {
-							font-weight: bold;
-						}
-
-						> .acct {
-							margin-left: 8px;
-							opacity: 0.7;
-						}
-
-						> .staff {
-							margin-left: 0.5em;
-							color: var(--badge);
-						}
-
-						> .punished {
-							margin-left: 0.5em;
-							color: #4dabf7;
-						}
-					}
-				}
+			> .user:hover {
+				text-decoration: none;
 			}
 		}
 	}

packages/client/src/pages/federation.vue

@@ -42,7 +42,7 @@
 			<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
 				<div class="dqokceoi">
 					<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`" :behavior="'window'">
-						<MkInstanceInfo :instance="instance"/>
+						<MkInstanceCardMini :instance="instance"/>
 					</MkA>
 				</div>
 			</MkPagination>
@@ -57,7 +57,7 @@ import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
-import MkInstanceInfo from '@/components/instance-info.vue';
+import MkInstanceCardMini from '@/components/instance-card-mini.vue';
 import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/pages/user-info.vue

@@ -77,6 +77,10 @@
 					</div>
 				</div>
 			</div>
+			<div v-else-if="tab === 'ap'" class="_formRoot">
+				<MkObjectView v-if="ap" tall :value="user">
+				</MkObjectView>
+			</div>
 			<div v-else-if="tab === 'raw'" class="_formRoot">
 				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
 				</MkObjectView>
@@ -225,7 +229,7 @@ watch(() => props.userId, () => {
 
 watch(() => user, () => {
 	os.api('ap/get', {
-		uri: user.uri || `${url}/users/${user.id}`,
+		uri: user.uri ?? `${url}/users/${user.id}`,
 	}).then(res => {
 		ap = res;
 	});
@@ -241,6 +245,10 @@ const headerTabs = $computed(() => [{
 	key: 'chart',
 	title: i18n.ts.charts,
 	icon: 'fas fa-chart-simple',
+}, {
+	key: 'ap',
+	title: 'AP',
+	icon: 'fas fa-share-alt',
 }, {
 	key: 'raw',
 	title: 'Raw data',