improve ui

17 files changed, 198 insertions, 171 deletions

diff --git a/src/client/pages/instance/database.vue b/src/client/pages/instance/database.vue
index a8a1e9a54a..ffbeed8b30 100644
--- a/src/client/pages/instance/database.vue
+++ b/src/client/pages/instance/database.vue
@@ -43,7 +43,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.database,
-				icon: 'fas fa-database'
+				icon: 'fas fa-database',
+				bg: 'var(--bg)',
 			},
 			databasePromiseFactory: () => os.api('admin/get-table-stats', {}).then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size)),
 		}
diff --git a/src/client/pages/instance/email-settings.vue b/src/client/pages/instance/email-settings.vue
index 251354a43a..ebf724fcdd 100644
--- a/src/client/pages/instance/email-settings.vue
+++ b/src/client/pages/instance/email-settings.vue
@@ -66,7 +66,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailServer,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 			enableEmail: false,
 			email: null,
diff --git a/src/client/pages/instance/files-settings.vue b/src/client/pages/instance/files-settings.vue
index 8bf4613a76..8aefa9e90d 100644
--- a/src/client/pages/instance/files-settings.vue
+++ b/src/client/pages/instance/files-settings.vue
@@ -56,7 +56,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.files,
-				icon: 'fas fa-cloud'
+				icon: 'fas fa-cloud',
+				bg: 'var(--bg)',
 			},
 			cacheRemoteFiles: false,
 			proxyRemoteFiles: false,
diff --git a/src/client/pages/instance/index.link.vue b/src/client/pages/instance/index.link.vue
deleted file mode 100644
index e1f4773800..0000000000
--- a/src/client/pages/instance/index.link.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-<div class="qmfkfnzh">
-	<a class="main _button" :href="to" target="_blank" v-if="external">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</a>
-	<MkA class="main _button" :class="{ active }" :to="to" :behavior="behavior" v-else>
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-	</MkA>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		to: {
-			type: String,
-			required: true
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
-		external: {
-			type: Boolean,
-			required: false
-		},
-		behavior: {
-			type: String,
-			required: false,
-		},
-	},
-	data() {
-		return {
-		};
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.qmfkfnzh {
-	> .main {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 16px 10px 14px;
-		border-radius: 999px;
-		font-size: 0.9em;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--panelHighlight);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--accentedBg);
-		}
-
-		> .icon {
-			width: 32px;
-			margin-right: 2px;
-			flex-shrink: 0;
-			text-align: center;
-			opacity: 0.8;
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			padding-right: 12px;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 959c4be6cd..e2cb5b8f58 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,47 +1,15 @@
 <template>
 <div class="hiyeyicy" :class="{ wide: !narrow }" ref="el">
 	<div class="nav" v-if="!narrow || page == null">
-		<div class="group">
-			<div class="lxpfedzu">
-				<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</div>
-			<XLink :active="page === 'overview'" replace to="/instance/overview"><template #icon><i class="fas fa-tachometer-alt"></i></template>{{ $ts.overview }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.quickAction }}</div>
-			<FormButton @click="lookup"><i class="fas fa-search"></i> {{ $ts.lookup }}</FormButton>
-			<FormButton v-if="$instance.disableRegistration" @click="invite"><i class="fas fa-user"></i> {{ $ts.invite }}</FormButton>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.administration }}</div>
-			<XLink :active="page === 'users'" replace to="/instance/users"><template #icon><i class="fas fa-users"></i></template>{{ $ts.users }}</XLink>
-			<XLink :active="page === 'emojis'" replace to="/instance/emojis"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.customEmojis }}</XLink>
-			<XLink :active="page === 'federation'" replace to="/instance/federation"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.federation }}</XLink>
-			<XLink :active="page === 'queue'" replace to="/instance/queue"><template #icon><i class="fas fa-clipboard-list"></i></template>{{ $ts.jobQueue }}</XLink>
-			<XLink :active="page === 'files'" replace to="/instance/files"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
-			<XLink :active="page === 'announcements'" replace to="/instance/announcements"><template #icon><i class="fas fa-broadcast-tower"></i></template>{{ $ts.announcements }}</XLink>
-			<XLink :active="page === 'ads'" replace to="/instance/ads"><template #icon><i class="fas fa-audio-description"></i></template>{{ $ts.ads }}</XLink>
-			<XLink :active="page === 'abuses'" replace to="/instance/abuses"><template #icon><i class="fas fa-exclamation-circle"></i></template>{{ $ts.abuseReports }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.settings }}</div>
-			<XLink :active="page === 'settings'" replace to="/instance/settings"><template #icon><i class="fas fa-cog"></i></template>{{ $ts.general }}</XLink>
-			<XLink :active="page === 'files-settings'" replace to="/instance/files-settings"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.files }}</XLink>
-			<XLink :active="page === 'email-settings'" replace to="/instance/email-settings"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.emailServer }}</XLink>
-			<XLink :active="page === 'object-storage'" replace to="/instance/object-storage"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.objectStorage }}</XLink>
-			<XLink :active="page === 'security'" replace to="/instance/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</XLink>
-			<XLink :active="page === 'service-worker'" replace to="/instance/service-worker"><template #icon><i class="fas fa-bolt"></i></template>ServiceWorker</XLink>
-			<XLink :active="page === 'relays'" replace to="/instance/relays"><template #icon><i class="fas fa-globe"></i></template>{{ $ts.relays }}</XLink>
-			<XLink :active="page === 'integrations'" replace to="/instance/integrations"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</XLink>
-			<XLink :active="page === 'instance-block'" replace to="/instance/instance-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.instanceBlocking }}</XLink>
-			<XLink :active="page === 'proxy-account'" replace to="/instance/proxy-account"><template #icon><i class="fas fa-ghost"></i></template>{{ $ts.proxyAccount }}</XLink>
-			<XLink :active="page === 'other-settings'" replace to="/instance/other-settings"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.other }}</XLink>
-		</div>
-		<div class="group">
-			<div class="label">{{ $ts.info }}</div>
-			<XLink :active="page === 'database'" replace to="/instance/database"><template #icon><i class="fas fa-database"></i></template>{{ $ts.database }}</XLink>
-			<XLink :active="page === 'logs'" replace to="/instance/logs"><template #icon><i class="fas fa-stream"></i></template>{{ $ts.logs }}</XLink>
+		<MkHeader :info="header"></MkHeader>
+
+		<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+		<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+	
+		<div class="lxpfedzu">
+			<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
 		</div>
+		<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
 	</div>
 	<div class="main">
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
@@ -52,11 +20,13 @@
 <script lang="ts">
 import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@client/i18n';
-import XLink from './index.link.vue';
+import MkSuperMenu from '@client/components/ui/super-menu.vue';
 import FormGroup from '@client/components/debobigego/group.vue';
 import FormBase from '@client/components/debobigego/base.vue';
 import FormButton from '@client/components/debobigego/button.vue';
+import MkInfo from '@client/components/ui/info.vue';
 import { scroll } from '@client/scripts/scroll';
+import { instance } from '@client/instance';
 import * as symbols from '@client/symbols';
 import * as os from '@client/os';
 import { lookupUser } from '@client/scripts/lookup-user';
@@ -64,9 +34,10 @@ import { lookupUser } from '@client/scripts/lookup-user';
 export default defineComponent({
 	components: {
 		FormBase,
-		XLink,
+		MkSuperMenu,
 		FormGroup,
 		FormButton,
+		MkInfo,
 	},
 
 	props: {
@@ -91,6 +62,151 @@ export default defineComponent({
 			INFO.value = viewInfo;
 		};
 		const pageProps = ref({});
+
+		const isEmpty = (x: any) => x == null || x == '';
+
+		const noMaintainerInformation = ref(false);
+		const noBotProtection = ref(false);
+
+		os.api('meta', { detail: true }).then(meta => {
+			// TODO: 設定が完了しても残ったままになるので、ストリーミングでmeta更新イベントを受け取ってよしなに更新する
+			noMaintainerInformation.value = isEmpty(meta.maintainerName) || isEmpty(meta.maintainerEmail);
+			noBotProtection.value = !meta.enableHcaptcha && !meta.enableRecaptcha;
+		});
+
+		const menuDef = computed(() => [{
+			title: i18n.locale.quickAction,
+			items: [{
+				type: 'button',
+				icon: 'fas fa-search',
+				text: i18n.locale.lookup,
+				action: lookup,
+			}, ...(instance.disableRegistration ? [{
+				type: 'button',
+				icon: 'fas fa-user',
+				text: i18n.locale.invite,
+				action: invite,
+			}] : [])],
+		}, {
+			title: i18n.locale.administration,
+			items: [{
+				icon: 'fas fa-tachometer-alt',
+				text: i18n.locale.dashboard,
+				to: '/instance/overview',
+				active: page.value === 'overview',
+			}, {
+				icon: 'fas fa-users',
+				text: i18n.locale.users,
+				to: '/instance/users',
+				active: page.value === 'users',
+			}, {
+				icon: 'fas fa-laugh',
+				text: i18n.locale.customEmojis,
+				to: '/instance/emojis',
+				active: page.value === 'emojis',
+			}, {
+				icon: 'fas fa-globe',
+				text: i18n.locale.federation,
+				to: '/instance/federation',
+				active: page.value === 'federation',
+			}, {
+				icon: 'fas fa-clipboard-list',
+				text: i18n.locale.jobQueue,
+				to: '/instance/queue',
+				active: page.value === 'queue',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.files,
+				to: '/instance/files',
+				active: page.value === 'files',
+			}, {
+				icon: 'fas fa-broadcast-tower',
+				text: i18n.locale.announcements,
+				to: '/instance/announcements',
+				active: page.value === 'announcements',
+			}, {
+				icon: 'fas fa-audio-description',
+				text: i18n.locale.ads,
+				to: '/instance/ads',
+				active: page.value === 'ads',
+			}, {
+				icon: 'fas fa-exclamation-circle',
+				text: i18n.locale.abuseReports,
+				to: '/instance/abuses',
+				active: page.value === 'abuses',
+			}],
+		}, {
+			title: i18n.locale.settings,
+			items: [{
+				icon: 'fas fa-cog',
+				text: i18n.locale.general,
+				to: '/instance/settings',
+				active: page.value === 'settings',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.files,
+				to: '/instance/files-settings',
+				active: page.value === 'files-settings',
+			}, {
+				icon: 'fas fa-envelope',
+				text: i18n.locale.emailServer,
+				to: '/instance/email-settings',
+				active: page.value === 'email-settings',
+			}, {
+				icon: 'fas fa-cloud',
+				text: i18n.locale.objectStorage,
+				to: '/instance/object-storage',
+				active: page.value === 'object-storage',
+			}, {
+				icon: 'fas fa-lock',
+				text: i18n.locale.security,
+				to: '/instance/security',
+				active: page.value === 'security',
+			}, {
+				icon: 'fas fa-bolt',
+				text: 'ServiceWorker',
+				to: '/instance/service-worker',
+				active: page.value === 'service-worker',
+			}, {
+				icon: 'fas fa-globe',
+				text: i18n.locale.relays,
+				to: '/instance/relays',
+				active: page.value === 'relays',
+			}, {
+				icon: 'fas fa-share-alt',
+				text: i18n.locale.integration,
+				to: '/instance/integrations',
+				active: page.value === 'integrations',
+			}, {
+				icon: 'fas fa-ban',
+				text: i18n.locale.instanceBlocking,
+				to: '/instance/instance-block',
+				active: page.value === 'instance-block',
+			}, {
+				icon: 'fas fa-ghost',
+				text: i18n.locale.proxyAccount,
+				to: '/instance/proxy-account',
+				active: page.value === 'proxy-account',
+			}, {
+				icon: 'fas fa-cogs',
+				text: i18n.locale.other,
+				to: '/instance/other-settings',
+				active: page.value === 'other-settings',
+			}],
+		}, {
+			title: i18n.locale.info,
+			items: [{
+				icon: 'fas fa-database',
+				text: i18n.locale.database,
+				to: '/instance/database',
+				active: page.value === 'database',
+			}, {
+				icon: 'fas fa-stream',
+				text: i18n.locale.logs,
+				to: '/instance/logs',
+				active: page.value === 'logs',
+			}],
+		}]);
 		const component = computed(() => {
 			if (page.value == null) return null;
 			switch (page.value) {
@@ -193,6 +309,12 @@ export default defineComponent({
 
 		return {
 			[symbols.PAGE_INFO]: INFO,
+			menuDef,
+			header: {
+				title: i18n.locale.controllPanel,
+			},
+			noMaintainerInformation,
+			noBotProtection,
 			page,
 			narrow,
 			view,
@@ -216,20 +338,11 @@ export default defineComponent({
 
 		> .nav {
 			width: 32%;
-			max-width: 320px;
+			max-width: 280px;
 			box-sizing: border-box;
 			border-right: solid 0.5px var(--divider);
 			overflow: auto;
-
-			> .group {
-				padding: 16px;
-
-				> .label {
-					font-size: 0.9em;
-					opacity: 0.7;
-					margin: 0 0 8px 12px;
-				}
-			}
+			height: 100%;
 		}
 
 		> .main {
@@ -238,6 +351,12 @@ export default defineComponent({
 			--baseContentWidth: 100%;
 		}
 	}
+
+	> .nav {
+		> .info {
+			margin: 16px;
+		}
+	}
 }
 
 .lxpfedzu {
diff --git a/src/client/pages/instance/instance-block.vue b/src/client/pages/instance/instance-block.vue
index a00970d85b..105cdb4941 100644
--- a/src/client/pages/instance/instance-block.vue
+++ b/src/client/pages/instance/instance-block.vue
@@ -43,7 +43,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.instanceBlocking,
-				icon: 'fas fa-ban'
+				icon: 'fas fa-ban',
+				bg: 'var(--bg)',
 			},
 			blockedHosts: '',
 		}
diff --git a/src/client/pages/instance/integrations.vue b/src/client/pages/instance/integrations.vue
index bfd9e2f349..6964ae5704 100644
--- a/src/client/pages/instance/integrations.vue
+++ b/src/client/pages/instance/integrations.vue
@@ -49,7 +49,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.integration,
-				icon: 'fas fa-share-alt'
+				icon: 'fas fa-share-alt',
+				bg: 'var(--bg)',
 			},
 			enableTwitterIntegration: false,
 			enableGithubIntegration: false,
diff --git a/src/client/pages/instance/object-storage.vue b/src/client/pages/instance/object-storage.vue
index ba6a249685..2d765270e6 100644
--- a/src/client/pages/instance/object-storage.vue
+++ b/src/client/pages/instance/object-storage.vue
@@ -91,7 +91,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.objectStorage,
-				icon: 'fas fa-cloud'
+				icon: 'fas fa-cloud',
+				bg: 'var(--bg)',
 			},
 			useObjectStorage: false,
 			objectStorageBaseUrl: null,
diff --git a/src/client/pages/instance/other-settings.vue b/src/client/pages/instance/other-settings.vue
index b9f9ce30f7..4e55df41fb 100644
--- a/src/client/pages/instance/other-settings.vue
+++ b/src/client/pages/instance/other-settings.vue
@@ -49,7 +49,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
-				icon: 'fas fa-cogs'
+				icon: 'fas fa-cogs',
+				bg: 'var(--bg)',
 			},
 			summalyProxy: '',
 			deeplAuthKey: '',
diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue
index 61fbc03c64..c6db9d0c04 100644
--- a/src/client/pages/instance/overview.vue
+++ b/src/client/pages/instance/overview.vue
@@ -1,9 +1,6 @@
 <template>
 <FormBase>
 	<FormSuspense :p="init">
-		<FormInfo v-if="noMaintainerInformation" warn>{{ $ts.noMaintainerInformationWarning }} <MkA to="/instance/settings" class="_link">{{ $ts.configure }}</MkA></FormInfo>
-		<FormInfo v-if="noBotProtection" warn>{{ $ts.noBotProtectionWarning }} <MkA to="/instance/bot-protection" class="_link">{{ $ts.configure }}</MkA></FormInfo>
-
 		<FormSuspense :p="fetchStats" v-slot="{ result: stats }">
 			<FormGroup>
 				<FormKeyValueView>
@@ -98,8 +95,6 @@ export default defineComponent({
 			fetchServerInfo: () => os.api('admin/server-info', {}),
 			fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
 			fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
-			noMaintainerInformation: false,
-			noBotProtection: false,
 		}
 	},
 
@@ -110,11 +105,6 @@ export default defineComponent({
 	methods: {
 		async init() {
 			this.meta = await os.api('meta', { detail: true });
-
-			const isEmpty = (x: any) => x == null || x == '';
-
-			this.noMaintainerInformation = isEmpty(this.meta.maintainerName) || isEmpty(this.meta.maintainerEmail);
-			this.noBotProtection = !this.meta.enableHcaptcha && !this.meta.enableRecaptcha;
 		},
 	
 		async showInstanceInfo(q) {
diff --git a/src/client/pages/instance/proxy-account.vue b/src/client/pages/instance/proxy-account.vue
index a80ecccb05..b1ece19710 100644
--- a/src/client/pages/instance/proxy-account.vue
+++ b/src/client/pages/instance/proxy-account.vue
@@ -46,7 +46,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.proxyAccount,
-				icon: 'fas fa-ghost'
+				icon: 'fas fa-ghost',
+				bg: 'var(--bg)',
 			},
 			proxyAccount: null,
 			proxyAccountId: null,
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 031bda2bed..f88825eb19 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -34,6 +34,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.jobQueue,
 				icon: 'fas fa-clipboard-list',
+				bg: 'var(--bg)',
 			},
 			connection: markRaw(os.stream.useChannel('queueStats')),
 		}
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index cb9b27a625..7d7888eaa8 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -36,6 +36,7 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.relays,
 				icon: 'fas fa-globe',
+				bg: 'var(--bg)',
 			},
 			relays: [],
 			inbox: '',
diff --git a/src/client/pages/instance/security.vue b/src/client/pages/instance/security.vue
index 2b525261ae..a854b6dbd0 100644
--- a/src/client/pages/instance/security.vue
+++ b/src/client/pages/instance/security.vue
@@ -47,7 +47,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.security,
-				icon: 'fas fa-lock'
+				icon: 'fas fa-lock',
+				bg: 'var(--bg)',
 			},
 			enableHcaptcha: false,
 			enableRecaptcha: false,
diff --git a/src/client/pages/instance/service-worker.vue b/src/client/pages/instance/service-worker.vue
index 9fa10def07..430e02ad2e 100644
--- a/src/client/pages/instance/service-worker.vue
+++ b/src/client/pages/instance/service-worker.vue
@@ -51,7 +51,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: 'ServiceWorker',
-				icon: 'fas fa-bolt'
+				icon: 'fas fa-bolt',
+				bg: 'var(--bg)',
 			},
 			enableServiceWorker: false,
 			swPublicKey: null,
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 2ce9361d08..c9a948da7d 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -84,7 +84,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.general,
-				icon: 'fas fa-cog'
+				icon: 'fas fa-cog',
+				bg: 'var(--bg)',
 			},
 			name: null,
 			description: null,
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 69242f3786..f7f9306b70 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -29,9 +29,11 @@
 		</div>
 		<div class="inputs">
 			<MkInput v-model="searchUsername" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
+				<template #prefix>@</template>
 				<template #label>{{ $ts.username }}</template>
 			</MkInput>
 			<MkInput v-model="searchHost" style="flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+				<template #prefix>@</template>
 				<template #label>{{ $ts.host }}</template>
 			</MkInput>
 		</div>