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

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

* i18n

* wip

* wip

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

locales/ja-JP.yml

@@ -265,6 +265,7 @@ watch: "ウォッチ"
 unwatch: "ウォッチ解除"
 accept: "許可"
 reject: "拒否"
+normal: "正常"
 instanceName: "インスタンス名"
 instanceDescription: "インスタンスの紹介"
 maintainerName: "管理者の名前"
@@ -319,6 +320,7 @@ notesAndReplies: "投稿と返信"
 withFiles: "ファイル付き"
 silence: "サイレンス"
 silenceConfirm: "サイレンスしますか？"
+unsilence: "サイレンス解除"
 unsilenceConfirm: "サイレンス解除しますか？"
 popularUsers: "人気のユーザー"
 recentlyUpdatedUsers: "最近投稿したユーザー"
@@ -483,6 +485,13 @@ scratchpadDescription: "スクラッチパッドは、AiScriptの実験環境を
 output: "出力"
 script: "スクリプト"
 disablePagesScript: "Pagesのスクリプトを無効にする"
+updateRemoteUser: "リモートユーザー情報の更新"
+deleteAllFiles: "すべてのファイルを削除"
+deleteAllFilesConfirm: "すべてのファイルを削除しますか？"
+removeAllFollowing: "フォローを全解除"
+removeAllFollowingDescription: "{host}からのフォローをすべて解除します。そのインスタンスがもう存在しなくなった場合などに実行してください。"
+userSuspended: "このユーザーは凍結されています。"
+userSilenced: "このユーザーはサイレンスされています。"
 
 _theme:
   explore: "テーマを探す"

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

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;
 

src/client/components/user-moderate-dialog.vue

@@ -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>

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();

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>

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"/>
+						<header>
-						<mk-acct :user="user" class="acct"/>
+							<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, faBookmark, farBookmark, faMicrophoneSlash, faSnowflake
-			faPlus, faUsers, faSearch
 		}
 	},
 
+	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);
-				this.show(user, info);
-			});
 			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) {
+		async show(user) {
-			if (info == null) info = await this.$root.api('admin/show-user', { userId: user.id });
+			this.$router.push('./users/' + 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);
-				});
-			});
 		}
 	}
 });
@@ -182,20 +244,38 @@ export default Vue.extend({
 					align-items: center;
 
 					> .avatar {
-						width: 50px;
+						width: 64px;
-						height: 50px;
+						height: 64px;
 					}
 
 					> .body {
+						margin-left: 0.3em;
 						padding: 8px;
+						flex: 1;
 
+						@media (max-width 500px) {
+							font-size: 14px;
+						}
+
+						> header {
 							> .name {
-							display: block;
 								font-weight: bold;
 							}
 
 							> .acct {
-							opacity: 0.5;
+								margin-left: 8px;
+								opacity: 0.7;
+							}
+
+							> .staff {
+								margin-left: 0.5em;
+								color: var(--badge);
+							}
+
+							> .punished {
+								margin-left: 0.5em;
+								color: #4dabf7;
+							}
 						}
 					}
 				}

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>
 

src/client/pages/user/index.vue

@@ -4,6 +4,8 @@
 	<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);

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