Merge branch 'develop'

15 files changed, 73 insertions, 248 deletions

diff --git a/src/client/pages/instance/abuses.vue b/src/client/pages/instance/abuses.vue
index 900c9f8333..ac20ebabe5 100644
--- a/src/client/pages/instance/abuses.vue
+++ b/src/client/pages/instance/abuses.vue
@@ -3,19 +3,19 @@
 	<div class="_section reports">
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
-				<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
+				<MkSelect v-model="state" style="margin: 0; flex: 1;">
 					<template #label>{{ $ts.state }}</template>
 					<option value="all">{{ $ts.all }}</option>
 					<option value="unresolved">{{ $ts.unresolved }}</option>
 					<option value="resolved">{{ $ts.resolved }}</option>
 				</MkSelect>
-				<MkSelect v-model:value="targetUserOrigin" style="margin: 0; flex: 1;">
+				<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
 					<template #label>{{ $ts.targetUserOrigin }}</template>
 					<option value="combined">{{ $ts.all }}</option>
 					<option value="local">{{ $ts.local }}</option>
 					<option value="remote">{{ $ts.remote }}</option>
 				</MkSelect>
-				<MkSelect v-model:value="reporterOrigin" style="margin: 0; flex: 1;">
+				<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
 					<template #label>{{ $ts.reporterOrigin }}</template>
 					<option value="combined">{{ $ts.all }}</option>
 					<option value="local">{{ $ts.local }}</option>
@@ -68,7 +68,7 @@ import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { acct } from '../../filters/user';
+import { acct } from '@client/filters/user';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 
diff --git a/src/client/pages/instance/ads.vue b/src/client/pages/instance/ads.vue
index 6b536793b7..50c8c29cbf 100644
--- a/src/client/pages/instance/ads.vue
+++ b/src/client/pages/instance/ads.vue
@@ -4,11 +4,11 @@
 	<section class="_card _gap ads" v-for="ad in ads">
 		<div class="_content ad">
 			<MkAd v-if="ad.url" :specify="ad"/>
-			<MkInput v-model:value="ad.url" type="url">
-				<span>URL</span>
+			<MkInput v-model="ad.url" type="url">
+				<template #label>URL</template>
 			</MkInput>
-			<MkInput v-model:value="ad.imageUrl">
-				<span>{{ $ts.imageUrl }}</span>
+			<MkInput v-model="ad.imageUrl">
+				<template #label>{{ $ts.imageUrl }}</template>
 			</MkInput>
 			<div style="margin: 32px 0;">
 				<MkRadio v-model="ad.place" value="square">square</MkRadio>
@@ -23,14 +23,14 @@
 				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
 			</div>
 			-->
-			<MkInput v-model:value="ad.ratio" type="number">
-				<span>{{ $ts.ratio }}</span>
+			<MkInput v-model="ad.ratio" type="number">
+				<template #label>{{ $ts.ratio }}</template>
 			</MkInput>
-			<MkInput v-model:value="ad.expiresAt" type="date">
-				<span>{{ $ts.expiration }}</span>
+			<MkInput v-model="ad.expiresAt" type="date">
+				<template #label>{{ $ts.expiration }}</template>
 			</MkInput>
-			<MkTextarea v-model:value="ad.memo">
-				<span>{{ $ts.memo }}</span>
+			<MkTextarea v-model="ad.memo">
+				<template #label>{{ $ts.memo }}</template>
 			</MkTextarea>
 			<div class="buttons">
 				<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index ac0e9d5135..d48e3737ad 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -3,14 +3,14 @@
 	<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 	<section class="_card _gap announcements" v-for="announcement in announcements">
 		<div class="_content announcement">
-			<MkInput v-model:value="announcement.title">
-				<span>{{ $ts.title }}</span>
+			<MkInput v-model="announcement.title">
+				<template #label>{{ $ts.title }}</template>
 			</MkInput>
-			<MkTextarea v-model:value="announcement.text">
-				<span>{{ $ts.text }}</span>
+			<MkTextarea v-model="announcement.text">
+				<template #label>{{ $ts.text }}</template>
 			</MkTextarea>
-			<MkInput v-model:value="announcement.imageUrl">
-				<span>{{ $ts.imageUrl }}</span>
+			<MkInput v-model="announcement.imageUrl">
+				<template #label>{{ $ts.imageUrl }}</template>
 			</MkInput>
 			<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
 			<div class="buttons">
diff --git a/src/client/pages/instance/emoji-edit-dialog.vue b/src/client/pages/instance/emoji-edit-dialog.vue
index f7a3671584..7e9bdc80dd 100644
--- a/src/client/pages/instance/emoji-edit-dialog.vue
+++ b/src/client/pages/instance/emoji-edit-dialog.vue
@@ -11,11 +11,15 @@
 	<div class="_monolithic_">
 		<div class="yigymqpb _section">
 			<img :src="emoji.url" class="img"/>
-			<MkInput v-model:value="name"><span>{{ $ts.name }}</span></MkInput>
-			<MkInput v-model:value="category" :datalist="categories"><span>{{ $ts.category }}</span></MkInput>
-			<MkInput v-model:value="aliases">
-				<span>{{ $ts.tags }}</span>
-				<template #desc>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
+			<MkInput v-model="name">
+				<template #label>{{ $ts.name }}</template>
+			</MkInput>
+			<MkInput v-model="category" :datalist="categories">
+				<template #label>{{ $ts.category }}</template>
+			</MkInput>
+			<MkInput v-model="aliases">
+				<template #label>{{ $ts.tags }}</template>
+				<template #caption>{{ $ts.setMultipleBySeparatingWithSpace }}</template>
 			</MkInput>
 			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ $ts.delete }}</MkButton>
 		</div>
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index fd641703cb..7badc9da02 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -7,7 +7,10 @@
 
 	<div class="local" v-if="tab === 'local'">
 		<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
-		<MkInput v-model:value="query" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
+		<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
+			<template #prefix><i class="fas fa-search"></i></template>
+			<template #label>{{ $ts.search }}</template>
+		</MkInput>
 		<MkPagination :pagination="pagination" ref="emojis">
 			<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
 			<template #default="{items}">
@@ -25,8 +28,13 @@
 	</div>
 
 	<div class="remote" v-else-if="tab === 'remote'">
-		<MkInput v-model:value="queryRemote" :debounce="true" type="search" style="margin: var(--margin);"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
-		<MkInput v-model:value="host" :debounce="true" style="margin: var(--margin);"><span>{{ $ts.host }}</span></MkInput>
+		<MkInput v-model="queryRemote" :debounce="true" type="search" style="margin: var(--margin);">
+			<template #prefix><i class="fas fa-search"></i></template>
+			<template #label>{{ $ts.search }}</template>
+		</MkInput>
+		<MkInput v-model="host" :debounce="true" style="margin: var(--margin);">
+			<template #label>{{ $ts.host }}</template>
+		</MkInput>
 		<MkPagination :pagination="remotePagination" ref="remoteEmojis">
 			<template #empty><span>{{ $ts.noCustomEmojis }}</span></template>
 			<template #default="{items}">
@@ -138,7 +146,7 @@ export default defineComponent({
 		},
 
 		remoteMenu(emoji, ev) {
-			os.modalMenu([{
+			os.popupMenu([{
 				type: 'label',
 				text: ':' + emoji.name + ':',
 			}, {
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
deleted file mode 100644
index 96f72fed44..0000000000
--- a/src/client/pages/instance/federation.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-<div class="enuoauvw">
-	<div class="query">
-		<MkInput v-model:value="host" :debounce="true"><span>{{ $ts.host }}</span></MkInput>
-		<div class="inputs" style="display: flex;">
-			<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
-				<template #label>{{ $ts.state }}</template>
-				<option value="all">{{ $ts.all }}</option>
-				<option value="federating">{{ $ts.federating }}</option>
-				<option value="subscribing">{{ $ts.subscribing }}</option>
-				<option value="publishing">{{ $ts.publishing }}</option>
-				<option value="suspended">{{ $ts.suspended }}</option>
-				<option value="blocked">{{ $ts.blocked }}</option>
-				<option value="notResponding">{{ $ts.notResponding }}</option>
-			</MkSelect>
-			<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
-				<template #label>{{ $ts.sort }}</template>
-				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
-				<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
-				<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
-				<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
-				<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ $ts.caughtAt }} ({{ $ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ $ts.caughtAt }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ $ts.lastCommunicatedAt }} ({{ $ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ $ts.lastCommunicatedAt }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveFiles">{{ $ts.driveFiles }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveFiles">{{ $ts.driveFiles }} ({{ $ts.ascendingOrder }})</option>
-			</MkSelect>
-		</div>
-	</div>
-
-	<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
-		<div class="ppgwaixt _block" v-for="instance in items" :key="instance.id" @click="info(instance)">
-			<div class="host"><i class="fas fa-circle indicator" :class="getStatus(instance)"></i><b>{{ instance.host }}</b></div>
-			<div class="status">
-				<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
-				<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
-				<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
-				<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
-				<span class="lastCommunicatedAt"><i class="fas fa-exchange-alt icon"></i><MkTime :time="instance.lastCommunicatedAt"/></span>
-				<span class="latestStatus"><i class="fas fa-traffic-light icon"></i>{{ instance.latestStatus || '-' }}</span>
-			</div>
-		</div>
-	</MkPagination>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
-import MkPagination from '@client/components/ui/pagination.vue';
-import MkInstanceInfo from './instance.vue';
-import * as os from '@client/os';
-import * as symbols from '@client/symbols';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkInput,
-		MkSelect,
-		MkPagination,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.federation,
-				icon: 'fas fa-globe'
-			},
-			host: '',
-			state: 'federating',
-			sort: '+pubSub',
-			pagination: {
-				endpoint: 'federation/instances',
-				limit: 10,
-				offsetMode: true,
-				params: () => ({
-					sort: this.sort,
-					host: this.host != '' ? this.host : null,
-					...(
-						this.state === 'federating' ? { federating: true } :
-						this.state === 'subscribing' ? { subscribing: true } :
-						this.state === 'publishing' ? { publishing: true } :
-						this.state === 'suspended' ? { suspended: true } :
-						this.state === 'blocked' ? { blocked: true } :
-						this.state === 'notResponding' ? { notResponding: true } :
-						{})
-				})
-			},
-		}
-	},
-
-	watch: {
-		host() {
-			this.$refs.instances.reload();
-		},
-		state() {
-			this.$refs.instances.reload();
-		}
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		getStatus(instance) {
-			if (instance.isSuspended) return 'off';
-			if (instance.isNotResponding) return 'red';
-			return 'green';
-		},
-
-		info(instance) {
-			os.popup(MkInstanceInfo, {
-				instance: instance
-			}, {}, 'closed');
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.enuoauvw {
-	> .query {
-		margin: var(--margin);
-	}
-}
-
-.ppgwaixt {
-	cursor: pointer;
-	padding: 16px;
-
-	&:hover {
-		color: var(--accent);
-	}
-
-	> .host {
-		> .indicator {
-			font-size: 70%;
-			vertical-align: baseline;
-			margin-right: 4px;
-
-			&.green {
-				color: #49c5ba;
-			}
-
-			&.yellow {
-				color: #c5a549;
-			}
-
-			&.red {
-				color: #c54949;
-			}
-
-			&.off {
-				color: rgba(0, 0, 0, 0.5);
-			}
-		}
-	}
-
-	> .status {
-		display: flex;
-		align-items: center;
-		font-size: 90%;
-
-		> span {
-			flex: 1;
-			
-			> .icon {
-				margin-right: 6px;
-			}
-		}
-	}
-}
-</style>
diff --git a/src/client/pages/instance/file-dialog.vue b/src/client/pages/instance/file-dialog.vue
index 74a755fa15..be6bf6cbf2 100644
--- a/src/client/pages/instance/file-dialog.vue
+++ b/src/client/pages/instance/file-dialog.vue
@@ -16,7 +16,7 @@
 		</div>
 		<div class="_section">
 			<div class="_content">
-				<MkSwitch @update:value="toggleIsSensitive" v-model:value="isSensitive">NSFW</MkSwitch>
+				<MkSwitch @update:modelValue="toggleIsSensitive" v-model="isSensitive">NSFW</MkSwitch>
 			</div>
 		</div>
 		<div class="_section">
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index 427c5b411a..b7f472b7c8 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -9,8 +9,8 @@
 	<div class="_section lookup">
 		<div class="_title"><i class="fas fa-search"></i> {{ $ts.lookup }}</div>
 		<div class="_content">
-			<MkInput class="target" v-model:value="q" type="text" @enter="find()">
-				<span>{{ $ts.fileIdOrUrl }}</span>
+			<MkInput class="target" v-model="q" type="text" @enter="find()">
+				<template #label>{{ $ts.fileIdOrUrl }}</template>
 			</MkInput>
 			<MkButton @click="find()" primary><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
 		</div>
@@ -19,19 +19,19 @@
 	<div class="_section">
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
-				<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
+				<MkSelect v-model="origin" style="margin: 0; flex: 1;">
 					<template #label>{{ $ts.instance }}</template>
 					<option value="combined">{{ $ts.all }}</option>
 					<option value="local">{{ $ts.local }}</option>
 					<option value="remote">{{ $ts.remote }}</option>
 				</MkSelect>
-				<MkInput v-model:value="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
-					<span>{{ $ts.host }}</span>
+				<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params().origin === 'local'">
+					<template #label>{{ $ts.host }}</template>
 				</MkInput>
 			</div>
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model:value="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-					<span>{{ $ts.type }}</span>
+				<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
+					<template #label>{{ $ts.type }}</template>
 				</MkInput>
 			</div>
 			<MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files">
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index acd46518f5..612bfa762a 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -100,7 +100,7 @@ export default defineComponent({
 				case 'overview': return defineAsyncComponent(() => import('./overview.vue'));
 				case 'users': return defineAsyncComponent(() => import('./users.vue'));
 				case 'emojis': return defineAsyncComponent(() => import('./emojis.vue'));
-				case 'federation': return defineAsyncComponent(() => import('./federation.vue'));
+				case 'federation': return defineAsyncComponent(() => import('../federation.vue'));
 				case 'queue': return defineAsyncComponent(() => import('./queue.vue'));
 				case 'files': return defineAsyncComponent(() => import('./files.vue'));
 				case 'announcements': return defineAsyncComponent(() => import('./announcements.vue'));
@@ -167,7 +167,7 @@ export default defineComponent({
 		};
 
 		const lookup = (ev) => {
-			os.modalMenu([{
+			os.popupMenu([{
 				text: i18n.locale.user,
 				icon: 'fas fa-user',
 				action: () => {
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 75a24bcb80..c39f0d1ecb 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -77,7 +77,7 @@
 			<div class="header">
 				<span class="label">{{ $ts.charts }}</span>
 				<div class="selects">
-					<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 						<option value="requests">{{ $ts._instanceCharts.requests }}</option>
 						<option value="users">{{ $ts._instanceCharts.users }}</option>
 						<option value="users-total">{{ $ts._instanceCharts.usersTotal }}</option>
@@ -90,7 +90,7 @@
 						<option value="drive-files">{{ $ts._instanceCharts.files }}</option>
 						<option value="drive-files-total">{{ $ts._instanceCharts.filesTotal }}</option>
 					</MkSelect>
-					<MkSelect v-model:value="chartSpan" style="margin: 0;">
+					<MkSelect v-model="chartSpan" style="margin: 0;">
 						<option value="hour">{{ $ts.perHour }}</option>
 						<option value="day">{{ $ts.perDay }}</option>
 					</MkSelect>
@@ -102,8 +102,8 @@
 		</div>
 		<div class="operations section">
 			<span class="label">{{ $ts.operations }}</span>
-			<MkSwitch v-model:value="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
-			<MkSwitch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
+			<MkSwitch v-model="isSuspended" class="switch">{{ $ts.stopActivityDelivery }}</MkSwitch>
+			<MkSwitch :model-value="isBlocked" class="switch" @update:modelValue="changeBlock">{{ $ts.blockThisInstance }}</MkSwitch>
 			<details>
 				<summary>{{ $ts.deleteAllFiles }}</summary>
 				<MkButton @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><i class="fas fa-trash-alt"></i> {{ $ts.deleteAllFiles }}</MkButton>
@@ -131,8 +131,8 @@ import MkSelect from '@client/components/ui/select.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import MkInfo from '@client/components/ui/info.vue';
-import bytes from '../../filters/bytes';
-import number from '../../filters/number';
+import bytes from '@client/filters/bytes';
+import number from '@client/filters/number';
 import * as os from '@client/os';
 
 const chartLimit = 90;
diff --git a/src/client/pages/instance/logs.vue b/src/client/pages/instance/logs.vue
index 112b0f66d0..4eee816f96 100644
--- a/src/client/pages/instance/logs.vue
+++ b/src/client/pages/instance/logs.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="_section">
 	<div class="_inputs">
-		<MkInput v-model:value="logDomain" :debounce="true">
-			<span>{{ $ts.domain }}</span>
+		<MkInput v-model="logDomain" :debounce="true">
+			<template #label>{{ $ts.domain }}</template>
 		</MkInput>
-		<MkSelect v-model:value="logLevel">
+		<MkSelect v-model="logLevel">
 			<template #label>Level</template>
 			<option value="all">All</option>
 			<option value="info">Info</option>
diff --git a/src/client/pages/instance/metrics.vue b/src/client/pages/instance/metrics.vue
index 131af37c7f..283b5939f0 100644
--- a/src/client/pages/instance/metrics.vue
+++ b/src/client/pages/instance/metrics.vue
@@ -60,8 +60,8 @@ import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import MkwFederation from '../../widgets/federation.vue';
 import { version, url } from '@client/config';
-import bytes from '../../filters/bytes';
-import number from '../../filters/number';
+import bytes from '@client/filters/bytes';
+import number from '@client/filters/number';
 import MkInstanceInfo from './instance.vue';
 
 const alpha = (hex, a) => {
diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue
index cb9cff9fc5..0d7a5d1501 100644
--- a/src/client/pages/instance/overview.vue
+++ b/src/client/pages/instance/overview.vue
@@ -62,8 +62,8 @@ import MkInput from '@client/components/ui/input.vue';
 import MkContainer from '@client/components/ui/container.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import { version, url } from '@client/config';
-import bytes from '../../filters/bytes';
-import number from '../../filters/number';
+import bytes from '@client/filters/bytes';
+import number from '@client/filters/number';
 import MkInstanceInfo from './instance.vue';
 import XMetrics from './metrics.vue';
 import * as os from '@client/os';
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue
index 0cd983127f..53d790598a 100644
--- a/src/client/pages/instance/queue.chart.vue
+++ b/src/client/pages/instance/queue.chart.vue
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
-import number from '../../filters/number';
+import number from '@client/filters/number';
 
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 2808b70fba..8db62683ba 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -7,14 +7,14 @@
 
 	<div class="users">
 		<div class="inputs" style="display: flex;">
-			<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
+			<MkSelect v-model="sort" style="margin: 0; flex: 1;">
 				<template #label>{{ $ts.sort }}</template>
 				<option value="-createdAt">{{ $ts.registeredDate }} ({{ $ts.ascendingOrder }})</option>
 				<option value="+createdAt">{{ $ts.registeredDate }} ({{ $ts.descendingOrder }})</option>
 				<option value="-updatedAt">{{ $ts.lastUsed }} ({{ $ts.ascendingOrder }})</option>
 				<option value="+updatedAt">{{ $ts.lastUsed }} ({{ $ts.descendingOrder }})</option>
 			</MkSelect>
-			<MkSelect v-model:value="state" style="margin: 0; flex: 1;">
+			<MkSelect v-model="state" style="margin: 0; flex: 1;">
 				<template #label>{{ $ts.state }}</template>
 				<option value="all">{{ $ts.all }}</option>
 				<option value="available">{{ $ts.normal }}</option>
@@ -23,7 +23,7 @@
 				<option value="silenced">{{ $ts.silence }}</option>
 				<option value="suspended">{{ $ts.suspend }}</option>
 			</MkSelect>
-			<MkSelect v-model:value="origin" style="margin: 0; flex: 1;">
+			<MkSelect v-model="origin" style="margin: 0; flex: 1;">
 				<template #label>{{ $ts.instance }}</template>
 				<option value="combined">{{ $ts.all }}</option>
 				<option value="local">{{ $ts.local }}</option>
@@ -31,11 +31,11 @@
 			</MkSelect>
 		</div>
 		<div class="inputs" style="display: flex; padding-top: 1.2em;">
-			<MkInput v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()">
-				<span>{{ $ts.username }}</span>
+			<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()">
+				<template #label>{{ $ts.username }}</template>
 			</MkInput>
-			<MkInput v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
-				<span>{{ $ts.host }}</span>
+			<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+				<template #label>{{ $ts.host }}</template>
 			</MkInput>
 		</div>
 
@@ -70,7 +70,7 @@ import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { acct } from '../../filters/user';
+import { acct } from '@client/filters/user';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 import { lookupUser } from '@client/scripts/lookup-user';