Improve moderation UI (#3989)

* admin users UI

* tune

src/client/app/admin/views/users.user.vue

@@ -0,0 +1,82 @@
+<template>
+<div class="kofvwchc">
+	<div>
+		<a :href="user | userPage(null, true)">
+			<mk-avatar class="avatar" :user="user" :disable-link="true"/>
+		</a>
+	</div>
+	<div>
+		<header>
+			<b><mk-user-name :user="user"/></b>
+			<span class="username">@{{ user | acct }}</span>
+			<span class="is-admin" v-if="user.isAdmin">admin</span>
+			<span class="is-moderator" v-if="user.isModerator">moderator</span>
+			<span class="is-verified" v-if="user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
+			<span class="is-suspended" v-if="user.isSuspended" :title="$t('@.suspended-user')"><fa :icon="faSnowflake"/></span>
+		</header>
+		<div>
+			<span>{{ $t('users.updatedAt') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+		</div>
+		<div>
+			<span>{{ $t('users.createdAt') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import { faSnowflake } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/users.vue'),
+	props: ['user'],
+	data() {
+		return {
+			faSnowflake
+		};
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+.kofvwchc
+	display flex
+	padding 16px 0
+	border-top solid 1px var(--faceDivider)
+
+	> div:first-child
+		> a
+			> .avatar
+				width 64px
+				height 64px
+
+	> div:last-child
+		flex 1
+		padding-left 16px
+
+		@media (max-width 500px)
+			font-size 14px
+
+		> header
+			> .username
+				margin-left 8px
+				opacity 0.7
+
+			> .is-admin
+			> .is-moderator
+				flex-shrink 0
+				align-self center
+				margin 0 0 0 .5em
+				padding 1px 6px
+				font-size 80%
+				border-radius 3px
+				background var(--noteHeaderAdminBg)
+				color var(--noteHeaderAdminFg)
+
+			> .is-verified
+			> .is-suspended
+				margin 0 0 0 .5em
+				color #4dabf7
+</style>