モデレーション周りのv11の機能復元 (#6249)

* モデレーション周りのv11の機能復元

* i18n

* wip

* wip

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

9 files changed, 400 insertions, 149 deletions

diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 07011ba50f..18d5cc34ba 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -561,13 +561,13 @@ export default Vue.extend({
 					}]
 					: []
 				),
-				...(this.appearNote.userId == this.$store.state.i.id ? [
+				...(this.appearNote.userId == this.$store.state.i.id || this.$store.state.i.isModerator || this.$store.state.i.isAdmin ? [
 					null,
-					{
+					this.appearNote.userId == this.$store.state.i.id ? {
 						icon: faEdit,
 						text: this.$t('deleteAndEdit'),
 						action: this.delEdit
-					},
+					} : undefined,
 					{
 						icon: faTrashAlt,
 						text: this.$t('delete'),
diff --git a/src/client/components/user-menu.vue b/src/client/components/user-menu.vue
index b0139380ef..a2275197d8 100644
--- a/src/client/components/user-menu.vue
+++ b/src/client/components/user-menu.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers } from '@fortawesome/free-solid-svg-icons';
+import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../i18n';
 import XMenu from './menu.vue';
@@ -60,8 +60,12 @@ export default Vue.extend({
 				action: this.toggleBlock
 			}]);
 
-			if (this.$store.state.i.isAdmin) {
+			if (this.$store.getters.isSignedIn && (this.$store.state.i.isAdmin || this.$store.state.i.isModerator)) {
 				menu = menu.concat([null, {
+					icon: faMicrophoneSlash,
+					text: this.user.isSilenced ? this.$t('unsilence') : this.$t('silence'),
+					action: this.toggleSilence
+				}, {
 					icon: faSnowflake,
 					text: this.user.isSuspended ? this.$t('unsuspend') : this.$t('suspend'),
 					action: this.toggleSuspend
@@ -194,6 +198,25 @@ export default Vue.extend({
 			});
 		},
 
+		async toggleSilence() {
+			if (!await this.getConfirmed(this.$t(this.user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
+
+			this.$root.api(this.user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
+				userId: this.user.id
+			}).then(() => {
+				this.user.isSilenced = !this.user.isSilenced;
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			}, e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e
+				});
+			});
+		},
+
 		async toggleSuspend() {
 			if (!await this.getConfirmed(this.$t(this.user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
 
diff --git a/src/client/components/user-moderate-dialog.vue b/src/client/components/user-moderate-dialog.vue
deleted file mode 100644
index 65e1e30c2e..0000000000
--- a/src/client/components/user-moderate-dialog.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-<x-window @closed="() => { $emit('closed'); destroyDom(); }" :avatar="user">
-	<template #header><mk-user-name :user="user"/></template>
-	<div class="vrcsvlkm">
-		<mk-button @click="resetPassword()" primary>{{ $t('resetPassword') }}</mk-button>
-		<mk-switch v-if="$store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator">{{ $t('moderator') }}</mk-switch>
-		<mk-switch @change="toggleSilence()" v-model="silenced">{{ $t('silence') }}</mk-switch>
-		<mk-switch @change="toggleSuspend()" v-model="suspended">{{ $t('suspend') }}</mk-switch>
-	</div>
-</x-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../i18n';
-import MkButton from './ui/button.vue';
-import MkSwitch from './ui/switch.vue';
-import XWindow from './window.vue';
-
-export default Vue.extend({
-	i18n,
-
-	components: {
-		MkButton,
-		MkSwitch,
-		XWindow,
-	},
-
-	props: {
-		user: {
-			type: Object,
-			required: true
-		}
-	},
-
-	data() {
-		return {
-			moderator: this.user.isModerator,
-			silenced: this.user.isSilenced,
-			suspended: this.user.isSuspended,
-		};
-	},
-
-	methods: {
-		async resetPassword() {
-			const dialog = this.$root.dialog({
-				type: 'waiting',
-				iconOnly: true
-			});
-
-			this.$root.api('admin/reset-password', {
-				userId: this.user.id,
-			}).then(({ password }) => {
-				this.$root.dialog({
-					type: 'success',
-					text: this.$t('newPasswordIs', { password })
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
-			}).finally(() => {
-				dialog.close();
-			});
-		},
-
-		async toggleSilence() {
-			const confirm = await this.$root.dialog({
-				type: 'warning',
-				showCancelButton: true,
-				text: this.silenced ? this.$t('silenceConfirm') : this.$t('unsilenceConfirm'),
-			});
-			if (confirm.canceled) {
-				this.silenced = !this.silenced;
-			} else {
-				this.$root.api(this.silenced ? 'admin/silence-user' : 'admin/unsilence-user', { userId: this.user.id });
-			}
-		},
-
-		async toggleSuspend() {
-			const confirm = await this.$root.dialog({
-				type: 'warning',
-				showCancelButton: true,
-				text: this.suspended ? this.$t('suspendConfirm') : this.$t('unsuspendConfirm'),
-			});
-			if (confirm.canceled) {
-				this.suspended = !this.suspended;
-			} else {
-				this.$root.api(this.suspended ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: this.user.id });
-			}
-		},
-
-		async toggleModerator() {
-			this.$root.api(this.moderator ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: this.user.id });
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.vrcsvlkm {
-
-}
-</style>
diff --git a/src/client/pages/instance/federation.instance.vue b/src/client/pages/instance/federation.instance.vue
index b86f52809e..08f4d1b4fb 100644
--- a/src/client/pages/instance/federation.instance.vue
+++ b/src/client/pages/instance/federation.instance.vue
@@ -99,10 +99,19 @@
 			<span class="label">{{ $t('operations') }}</span>
 			<mk-switch v-model="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
 			<mk-switch :value="isBlocked" class="switch" @change="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
+			<details>
+				<summary>{{ $t('deleteAllFiles') }}</summary>
+				<mk-button @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faTrashAlt"/> {{ $t('deleteAllFiles') }}</mk-button>
+			</details>
+			<details>
+				<summary>{{ $t('removeAllFollowing') }}</summary>
+				<mk-button @click="removeAllFollowing()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faMinusCircle"/> {{ $t('removeAllFollowing') }}</mk-button>
+				<mk-info warn>{{ $t('removeAllFollowingDescription', { host: instance.host }) }}</mk-info>
+			</details>
 		</div>
 		<details class="metadata">
 			<summary class="label">{{ $t('metadata') }}</summary>
-			<pre><code>{{ JSON.stringify(instance.metadata, null, 2) }}</code></pre>
+			<pre><code>{{ JSON.stringify(instance, null, 2) }}</code></pre>
 		</details>
 	</div>
 </x-window>
@@ -112,11 +121,13 @@
 import Vue from 'vue';
 import Chart from 'chart.js';
 import i18n from '../../i18n';
-import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '../../components/window.vue';
 import MkUsersDialog from '../../components/users-dialog.vue';
 import MkSelect from '../../components/ui/select.vue';
+import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
+import MkInfo from '../../components/ui/info.vue';
 
 const chartLimit = 90;
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -135,7 +146,9 @@ export default Vue.extend({
 	components: {
 		XWindow,
 		MkSelect,
+		MkButton,
 		MkSwitch,
+		MkInfo,
 	},
 
 	props: {
@@ -153,7 +166,7 @@ export default Vue.extend({
 			chartInstance: null,
 			chartSrc: 'requests',
 			chartSpan: 'hour',
-			faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown
+			faTimes, faCrosshairs, faCloudDownloadAlt, faCloudUploadAlt, faUsers, faPencilAlt, faFileImage, faDatabase, faTrafficLight, faLongArrowAltUp, faLongArrowAltDown, faMinusCircle, faTrashAlt
 		};
 	},
 
@@ -239,6 +252,28 @@ export default Vue.extend({
 			this.chartSrc = src;
 		},
 
+		removeAllFollowing() {
+			this.$root.api('admin/federation/remove-all-following', {
+				host: this.instance.host
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			});
+		},
+
+		deleteAllFiles() {
+			this.$root.api('admin/federation/delete-all-files', {
+				host: this.instance.host
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			});
+		},
+
 		renderChart() {
 			if (this.chartInstance) {
 				this.chartInstance.destroy();
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
new file mode 100644
index 0000000000..1fb064f7f0
--- /dev/null
+++ b/src/client/pages/instance/users.user.vue
@@ -0,0 +1,209 @@
+<template>
+<div class="vrcsvlkm" v-if="user && info">
+	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
+	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
+
+	<section class="_card">
+		<div class="_title">
+			<mk-avatar class="avatar" :user="user"/>
+			<mk-user-name class="name" :user="user"/>
+			<span class="acct">@{{ user | acct }}</span>
+			<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
+			<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
+			<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
+			<span class="punished" v-if="user.isSuspended"><fa :icon="faSnowflake"/></span>
+		</div>
+		<div class="_content actions">
+			<div style="flex: 1; padding-left: 1em;">
+				<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model="moderator">{{ $t('moderator') }}</mk-switch>
+				<mk-switch @change="toggleSilence()" v-model="silenced">{{ $t('silence') }}</mk-switch>
+				<mk-switch @change="toggleSuspend()" v-model="suspended">{{ $t('suspend') }}</mk-switch>
+			</div>
+			<div style="flex: 1; padding-left: 1em;">
+				<mk-button @click="openProfile"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('profile')}}</mk-button>
+				<mk-button v-if="user.host != null" @click="updateRemoteUser"><fa :icon="faSync"/> {{ $t('updateRemoteUser') }}</mk-button>
+				<mk-button @click="resetPassword"><fa :icon="faKey"/> {{ $t('resetPassword') }}</mk-button>
+				<mk-button @click="deleteAllFiles"><fa :icon="faTrashAlt"/> {{ $t('deleteAllFiles') }}</mk-button>
+			</div>
+		</div>
+		<div class="_content rawdata">
+			<pre><code>{{ JSON.stringify(info, null, 2) }}</code></pre>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faTimes, faBookmark, faKey, faSync, faMicrophoneSlash, faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faSnowflake, faTrashAlt, faBookmark as farBookmark  } from '@fortawesome/free-regular-svg-icons';
+import MkButton from '../../components/ui/button.vue';
+import MkSwitch from '../../components/ui/switch.vue';
+import i18n from '../../i18n';
+import Progress from '../../scripts/loading';
+
+export default Vue.extend({
+	i18n,
+
+	components: {
+		MkButton,
+		MkSwitch,
+	},
+
+	data() {
+		return {
+			user: null,
+			info: null,
+			moderator: false,
+			silenced: false,
+			suspended: false,
+			faTimes, faBookmark, farBookmark, faKey, faSync, faMicrophoneSlash, faSnowflake, faTrashAlt, faExternalLinkSquareAlt
+		};
+	},
+
+	watch: {
+		$route: 'fetch'
+	},
+
+	created() {
+		this.fetch();
+	},
+
+	methods: {
+		async fetch() {
+			Progress.start();
+			this.user = await this.$root.api('users/show', { userId: this.$route.params.user });
+			this.info = await this.$root.api('admin/show-user', { userId: this.$route.params.user });
+			this.moderator = this.info.isModerator;
+			this.silenced = this.info.isSilenced;
+			this.suspended = this.info.isSuspended;
+			Progress.done();
+		},
+
+		/** 処理対象ユーザーの情報を更新する */
+		async refreshUser() {
+			this.user = await this.$root.api('users/show', { userId: this.user.id });
+			this.info = await this.$root.api('admin/show-user', { userId: this.user.id });
+		},
+
+		openProfile() {
+			window.open(Vue.filter('userPage')(this.user, null, true), '_blank');
+		},
+
+		async updateRemoteUser() {
+			await this.$root.api('admin/update-remote-user', { userId: this.user.id }).then(res => {
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			});
+			await this.refreshUser();
+		},
+
+		async resetPassword() {
+			const dialog = this.$root.dialog({
+				type: 'waiting',
+				iconOnly: true
+			});
+
+			this.$root.api('admin/reset-password', {
+				userId: this.user.id,
+			}).then(({ password }) => {
+				this.$root.dialog({
+					type: 'success',
+					text: this.$t('newPasswordIs', { password })
+				});
+			}).catch(e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e
+				});
+			}).finally(() => {
+				dialog.close();
+			});
+		},
+
+		async toggleSilence() {
+			const confirm = await this.$root.dialog({
+				type: 'warning',
+				showCancelButton: true,
+				text: this.silenced ? this.$t('silenceConfirm') : this.$t('unsilenceConfirm'),
+			});
+			if (confirm.canceled) {
+				this.silenced = !this.silenced;
+			} else {
+				await this.$root.api(this.silenced ? 'admin/silence-user' : 'admin/unsilence-user', { userId: this.user.id });
+				await this.refreshUser();
+			}
+		},
+
+		async toggleSuspend() {
+			const confirm = await this.$root.dialog({
+				type: 'warning',
+				showCancelButton: true,
+				text: this.suspended ? this.$t('suspendConfirm') : this.$t('unsuspendConfirm'),
+			});
+			if (confirm.canceled) {
+				this.suspended = !this.suspended;
+			} else {
+				await this.$root.api(this.suspended ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: this.user.id });
+				await this.refreshUser();
+			}
+		},
+
+		async toggleModerator() {
+			await this.$root.api(this.moderator ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: this.user.id });
+			await this.refreshUser();
+		},
+
+		async deleteAllFiles() {
+			const confirm = await this.$root.dialog({
+				type: 'warning',
+				showCancelButton: true,
+				text: this.$t('deleteAllFilesConfirm'),
+			});
+			if (confirm.canceled) return;
+			const process = async () => {
+				await this.$root.api('admin/delete-all-files-of-a-user', { userId: this.user.id });
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			};
+			await process().catch(e => {
+				this.$root.dialog({
+					type: 'error',
+					text: e.toString()
+				});
+			});
+			await this.refreshUser();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.vrcsvlkm {
+	display: flex;
+	flex-direction: column;
+
+	> ._card {
+		> .actions {
+			display: flex;
+			box-sizing: border-box;
+			text-align: left;
+			align-items: center;
+			margin-top: 16px;
+			margin-bottom: 16px;
+		}
+
+		> .rawdata {
+			> pre > code {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index db9e625e4c..b209ab68cf 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -12,19 +12,65 @@
 			<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
 		</div>
 		<div class="_footer">
-			<mk-button inline primary @click="search()"><fa :icon="faSearch"/> {{ $t('search') }}</mk-button>
+			<mk-button inline primary @click="searchUser()"><fa :icon="faSearch"/> {{ $t('search') }}</mk-button>
 		</div>
 	</section>
 
 	<section class="_card users">
 		<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
+		<div class="_content">
+			<div class="inputs" style="display: flex;">
+				<mk-select v-model="sort" style="margin: 0; flex: 1;">
+					<template #label>{{ $t('sort') }}</template>
+					<option value="-createdAt">{{ $t('registeredDate') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+createdAt">{{ $t('registeredDate') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-updatedAt">{{ $t('lastUsed') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+updatedAt">{{ $t('lastUsed') }} ({{ $t('descendingOrder') }})</option>
+				</mk-select>
+				<mk-select v-model="state" style="margin: 0; flex: 1;">
+					<template #label>{{ $t('state') }}</template>
+					<option value="all">{{ $t('all') }}</option>
+					<option value="available">{{ $t('normal') }}</option>
+					<option value="admin">{{ $t('administrator') }}</option>
+					<option value="moderator">{{ $t('moderator') }}</option>
+					<option value="silenced">{{ $t('silence') }}</option>
+					<option value="suspended">{{ $t('suspend') }}</option>
+				</mk-select>
+				<mk-select v-model="origin" style="margin: 0; flex: 1;">
+					<template #label>{{ $t('instance') }}</template>
+					<option value="combined">{{ $t('all') }}</option>
+					<option value="local">{{ $t('local') }}</option>
+					<option value="remote">{{ $t('remote') }}</option>
+				</mk-select>
+			</div>
+			<div class="inputs" style="display: flex; padding-top: 1.2em;">
+				<mk-input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()">
+					<span>{{ $t('username') }}</span>
+				</mk-input>
+				<mk-input v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+					<span>{{ $t('host') }}</span>
+				</mk-input>
+			</div>
+		</div>
 		<div class="_content _list">
 			<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false">
 				<button class="user _button _listItem" v-for="(user, i) in items" :key="user.id" @click="show(user)">
-					<mk-avatar :user="user" class="avatar"/>
+					<mk-avatar class="avatar" :user="user" :disable-link="true"/>
 					<div class="body">
-						<mk-user-name :user="user" class="name"/>
-						<mk-acct :user="user" class="acct"/>
+						<header>
+							<mk-user-name class="name" :user="user"/>
+							<span class="acct">@{{ user | acct }}</span>
+							<span class="staff" v-if="user.isAdmin"><fa :icon="faBookmark"/></span>
+							<span class="staff" v-if="user.isModerator"><fa :icon="farBookmark"/></span>
+							<span class="punished" v-if="user.isSilenced"><fa :icon="faMicrophoneSlash"/></span>
+							<span class="punished" v-if="user.isSuspended"><fa :icon="faSnowflake"/></span>
+						</header>
+						<div>
+							<span>{{ $t('lastUsed') }}: <mk-time :time="user.updatedAt" mode="detail"/></span>
+						</div>
+						<div>
+							<span>{{ $t('registeredDate') }}: <mk-time :time="user.createdAt" mode="detail"/></span>
+						</div>
 					</div>
 				</button>
 			</mk-pagination>
@@ -38,12 +84,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faPlus, faUsers, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faUsers, faSearch, faBookmark, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
+import { faSnowflake, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import parseAcct from '../../../misc/acct/parse';
 import MkButton from '../../components/ui/button.vue';
 import MkInput from '../../components/ui/input.vue';
+import MkSelect from '../../components/ui/select.vue';
 import MkPagination from '../../components/ui/pagination.vue';
-import MkUserModerateDialog from '../../components/user-moderate-dialog.vue';
 import MkUserSelect from '../../components/user-select.vue';
 
 export default Vue.extend({
@@ -56,24 +103,46 @@ export default Vue.extend({
 	components: {
 		MkButton,
 		MkInput,
+		MkSelect,
 		MkPagination,
 	},
 
 	data() {
 		return {
+			target: '',
+			sort: '+createdAt',
+			state: 'all',
+			origin: 'local',
+			searchUsername: '',
+			searchHost: '',
 			pagination: {
 				endpoint: 'admin/show-users',
 				limit: 10,
 				params: () => ({
-					sort: '+createdAt'
+					sort: this.sort,
+					state: this.state,
+					origin: this.origin,
+					username: this.searchUsername,
+					hostname: this.searchHost,
 				}),
 				offsetMode: true
 			},
-			target: '',
-			faPlus, faUsers, faSearch
+			faPlus, faUsers, faSearch, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
 		}
 	},
 
+	watch: {
+		sort() {
+			this.$refs.users.reload();
+		},
+		state() {
+			this.$refs.users.reload();
+		},
+		origin() {
+			this.$refs.users.reload();
+		},
+	},
+
 	methods: {
 		/** テキストエリアのユーザーを解決する */
 		fetchUser() {
@@ -105,12 +174,16 @@ export default Vue.extend({
 		/** テキストエリアから処理対象ユーザーを設定する */
 		async showUser() {
 			const user = await this.fetchUser();
-			this.$root.api('admin/show-user', { userId: user.id }).then(info => {
-				this.show(user, info);
-			});
+			this.show(user);
 			this.target = '';
 		},
 
+		searchUser() {
+			this.$root.new(MkUserSelect, {}).$once('selected', user => {
+				this.show(user);
+			});
+		},
+
 		async addUser() {
 			const { canceled: canceled1, result: username } = await this.$root.dialog({
 				title: this.$t('username'),
@@ -148,19 +221,8 @@ export default Vue.extend({
 			});
 		},
 
-		async show(user, info) {
-			if (info == null) info = await this.$root.api('admin/show-user', { userId: user.id });
-			this.$root.new(MkUserModerateDialog, {
-				user: { ...user, ...info }
-			});
-		},
-
-		search() {
-			this.$root.new(MkUserSelect, {}).$once('selected', user => {
-				this.$root.api('admin/show-user', { userId: user.id }).then(info => {
-					this.show(user, info);
-				});
-			});
+		async show(user) {
+			this.$router.push('./users/' + user.id);
 		}
 	}
 });
@@ -182,20 +244,38 @@ export default Vue.extend({
 					align-items: center;
 
 					> .avatar {
-						width: 50px;
-						height: 50px;
+						width: 64px;
+						height: 64px;
 					}
 
 					> .body {
+						margin-left: 0.3em;
 						padding: 8px;
+						flex: 1;
 
-						> .name {
-							display: block;
-							font-weight: bold;
+						@media (max-width 500px) {
+							font-size: 14px;
 						}
 
-						> .acct {
-							opacity: 0.5;
+						> 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;
+							}
 						}
 					}
 				}
diff --git a/src/client/pages/user/index.photos.vue b/src/client/pages/user/index.photos.vue
index cd29254f48..3f8a24b64a 100644
--- a/src/client/pages/user/index.photos.vue
+++ b/src/client/pages/user/index.photos.vue
@@ -8,7 +8,7 @@
 			:href="image.note | notePage"
 		></a>
 	</div>
-	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('no-photos') }}</p>
+	<p class="empty" v-if="!fetching && images.length == 0">{{ $t('nothing') }}</p>
 </div>
 </template>
 
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 9f5f968901..75f61a0c0c 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -2,8 +2,10 @@
 <div class="mk-user-page" v-if="user">
 	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>
-	
+
 	<mk-remote-caution v-if="user.host != null" :href="user.url" style="margin-bottom: var(--margin)"/>
+	<div class="punished _panel" v-if="user.isSuspended"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSuspended') }}</div>
+	<div class="punished _panel" v-if="user.isSilenced"><fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $t('userSilenced') }}</div>
 	<div class="profile _panel" :key="user.id">
 		<div class="banner-container" :style="style">
 			<div class="banner" ref="banner" :style="style"></div>
@@ -105,7 +107,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker } from '@fortawesome/free-solid-svg-icons';
 import { faCalendarAlt, faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 import * as age from 's-age';
 import XUserTimeline from './index.timeline.vue';
@@ -139,7 +141,7 @@ export default Vue.extend({
 			user: null,
 			error: null,
 			parallaxAnimationId: null,
-			faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
+			faExclamationTriangle, faEllipsisH, faRobot, faLock, faBookmark, farBookmark, faChartBar, faImage, faBirthdayCake, faMapMarker, faCalendarAlt
 		};
 	},
 
@@ -217,6 +219,12 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-user-page {
+
+	> .punished {
+		font-size: 0.8em;
+		padding: 16px;
+	}
+
 	> .profile {
 		position: relative;
 		margin-bottom: var(--margin);
diff --git a/src/client/router.ts b/src/client/router.ts
index 428be7ecca..d826d6b493 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -52,6 +52,7 @@ export const router = new VueRouter({
 		{ path: '/instance', component: page('instance/index') },
 		{ path: '/instance/emojis', component: page('instance/emojis') },
 		{ path: '/instance/users', component: page('instance/users') },
+		{ path: '/instance/users/:user', component: page('instance/users.user') },
 		{ path: '/instance/files', component: page('instance/files') },
 		{ path: '/instance/queue', component: page('instance/queue') },
 		{ path: '/instance/settings', component: page('instance/settings') },