Merge branch 'develop' into sw-notification-action

src/client/components/abuse-report-window.vue

@@ -10,9 +10,9 @@
 	</template>
 	<div class="dpvffvvy _monolithic_">
 		<div class="_section">
-			<MkTextarea v-model:value="comment">
-				<span>{{ $ts.details }}</span>
-				<template #desc>{{ $ts.fillAbuseReportDescription }}</template>
+			<MkTextarea v-model="comment">
+				<template #label>{{ $ts.details }}</template>
+				<template #caption>{{ $ts.fillAbuseReportDescription }}</template>
 			</MkTextarea>
 		</div>
 		<div class="_section">

src/client/components/dialog.vue

@@ -14,8 +14,8 @@
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div class="body" v-if="text"><Mfm :text="text"/></div>
-		<MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
-		<MkSelect v-if="select" v-model:value="selectedValue" autofocus>
+		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
+		<MkSelect v-if="select" v-model="selectedValue" autofocus>
 			<template v-if="select.items">
 				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>

src/client/components/forgot-password.vue

@@ -9,14 +9,14 @@
 
 	<form class="_monolithic_" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
 		<div class="_section">
-			<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
-				<span>{{ $ts.username }}</span>
+			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
+				<template #label>{{ $ts.username }}</template>
 				<template #prefix>@</template>
 			</MkInput>
 
-			<MkInput v-model:value="email" type="email" spellcheck="false" required>
-				<span>{{ $ts.emailAddress }}</span>
-				<template #desc>{{ $ts._forgotPassword.enterEmail }}</template>
+			<MkInput v-model="email" type="email" spellcheck="false" required>
+				<template #label>{{ $ts.emailAddress }}</template>
+				<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
 			</MkInput>
 
 			<MkButton type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>

src/client/components/global/misskey-flavored-markdown.vue

@@ -117,6 +117,11 @@ export default defineComponent({
 	75% { transform: scale3d(1.05, 0.95, 1); }
 	to { transform: scale3d(1, 1, 1); }
 }
+
+@keyframes mfm-rainbow {
+	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+}
 </style>
 
 <style lang="scss" scoped>

src/client/components/instance-stats.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="zbcjwnqg" style="margin-top: -8px;">
 	<div class="selects" style="display: flex;">
-		<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
+		<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 			<optgroup :label="$ts.federation">
 				<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
 				<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
@@ -24,7 +24,7 @@
 				<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
 			</optgroup>
 		</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>

src/client/components/mfm.ts

@@ -165,6 +165,10 @@ export default defineComponent({
 								class: '_mfm_blur_',
 							}, genEl(token.children));
 						}
+						case 'rainbow': {
+							style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : '';
+							break;
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']);

src/client/components/modal-page-window.vue

@@ -2,12 +2,9 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 			<span class="title">
-				<XHeader :info="pageInfo" :with-back="false"/>
+				<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>
 			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
 		<div class="body _flat_">
 			<keep-alive>
@@ -177,35 +174,19 @@ export default defineComponent({
 		flex-shrink: 0;
 		box-shadow: 0px 1px var(--divider);
 
-		> button {
-			height: $height;
-			width: $height;
-
-			@media (max-width: 500px) {
-				height: $height-narrow;
-				width: $height-narrow;
-			}
-		}
-
 		> .title {
 			flex: 1;
-			line-height: $height;
-			padding-left: 32px;
+			height: $height;
 			font-weight: bold;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			pointer-events: none;
 
 			@media (max-width: 500px) {
-				line-height: $height-narrow;
+				height: $height-narrow;
 				padding-left: 16px;
 			}
 		}
-
-		> button + .title {
-			padding-left: 0;
-		}
 	}
 
 	> .body {

src/client/components/note-header.vue

@@ -24,8 +24,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import notePage from '../filters/note';
-import { userPage } from '../filters/user';
+import notePage from '@client/filters/note';
+import { userPage } from '@client/filters/user';
 import * as os from '@client/os';
 
 export default defineComponent({

src/client/components/notification-setting-window.vue

@@ -11,16 +11,16 @@
 	<template #header>{{ $ts.notificationSetting }}</template>
 	<div class="_monolithic_">
 		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model:value="useGlobalSetting">
+			<MkSwitch v-model="useGlobalSetting">
 				{{ $ts.useGlobalSetting }}
-				<template #desc>{{ $ts.useGlobalSettingDesc }}</template>
+				<template #caption>{{ $ts.useGlobalSettingDesc }}</template>
 			</MkSwitch>
 		</div>
 		<div v-if="!useGlobalSetting" class="_section">
 			<MkInfo>{{ $ts.notificationSettingDesc }}</MkInfo>
 			<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
 			<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-			<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
+			<MkSwitch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
 		</div>
 	</div>
 </XModalWindow>

src/client/components/notification.vue

@@ -62,8 +62,8 @@ import { defineComponent, markRaw } from 'vue';
 import { getNoteSummary } from '@/misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
-import notePage from '../filters/note';
-import { userPage } from '../filters/user';
+import notePage from '@client/filters/note';
+import { userPage } from '@client/filters/user';
 import { i18n } from '@client/i18n';
 import * as os from '@client/os';
 

src/client/components/page-preview.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { userName } from '../filters/user';
+import { userName } from '@client/filters/user';
 import * as os from '@client/os';
 
 export default defineComponent({

src/client/components/page-window.vue

@@ -3,16 +3,12 @@
 	:initial-width="500"
 	:initial-height="500"
 	:can-resize="true"
-	:close-right="true"
+	:close-button="false"
 	:contextmenu="contextmenu"
 	@closed="$emit('closed')"
 >
 	<template #header>
-		<XHeader :info="pageInfo" :with-back="false"/>
-	</template>
-	<template #buttons>
-		<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
-		<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+		<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="close()"/>
 	</template>
 	<div class="yrolvcoq _flat_">
 		<component :is="component" v-bind="props" :ref="changePage"/>
@@ -139,6 +135,10 @@ export default defineComponent({
 			this.navigate(this.history.pop(), false);
 		},
 
+		close() {
+			this.$refs.window.close();
+		},
+
 		expand() {
 			this.$router.push(this.path);
 			this.$refs.window.close();
@@ -155,6 +155,5 @@ export default defineComponent({
 <style lang="scss" scoped>
 .yrolvcoq {
 	min-height: 100%;
-	background: var(--bg);
 }
 </style>

src/client/components/page/page.number-input.vue

@@ -1,6 +1,8 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="number">{{ hpml.interpolate(block.text) }}</MkInput>
+	<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="number">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkInput>
 </div>
 </template>
 

src/client/components/page/page.post.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="ngbfujlo">
-	<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
+	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
 	<MkButton class="button" primary @click="post()" :disabled="posting || posted">
 		<i v-if="posted" class="fas fa-check"></i>
 		<i v-else class="fas fa-paper-plane"></i>

src/client/components/page/page.switch.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="hkcxmtwj">
-	<MkSwitch :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
+	<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
 </div>
 </template>
 

src/client/components/page/page.text-input.vue

@@ -1,6 +1,8 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="text">{{ hpml.interpolate(block.text) }}</MkInput>
+	<MkInput class="kudkigyw" :model-value="value" @update:modelValue="updateValue($event)" type="text">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkInput>
 </div>
 </template>
 

src/client/components/page/page.textarea-input.vue

@@ -1,6 +1,8 @@
 <template>
 <div>
-	<MkTextarea :value="value" @update:value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkTextarea>
+	<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkTextarea>
 </div>
 </template>
 

src/client/components/page/page.textarea.vue

@@ -1,5 +1,5 @@
 <template>
-<MkTextarea :value="text" readonly></MkTextarea>
+<MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts">

src/client/components/poll-editor.vue

@@ -5,8 +5,8 @@
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" :value="choice" @update:value="onInput(i, $event)">
-				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
+			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)">
+				<template #label>{{ $t('_poll.choiceN', { n: i + 1 }) }}</template>
 			</MkInput>
 			<button @click="remove(i)" class="_button">
 				<i class="fas fa-times"></i>
@@ -16,27 +16,27 @@
 	<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton>
 	<MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton>
 	<section>
-		<MkSwitch v-model:value="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
+		<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
 		<div>
-			<MkSelect v-model:value="expiration">
+			<MkSelect v-model="expiration">
 				<template #label>{{ $ts._poll.expiration }}</template>
 				<option value="infinite">{{ $ts._poll.infinite }}</option>
 				<option value="at">{{ $ts._poll.at }}</option>
 				<option value="after">{{ $ts._poll.after }}</option>
 			</MkSelect>
 			<section v-if="expiration === 'at'">
-				<MkInput v-model:value="atDate" type="date" class="input">
-					<span>{{ $ts._poll.deadlineDate }}</span>
+				<MkInput v-model="atDate" type="date" class="input">
+					<template #label>{{ $ts._poll.deadlineDate }}</template>
 				</MkInput>
-				<MkInput v-model:value="atTime" type="time" class="input">
-					<span>{{ $ts._poll.deadlineTime }}</span>
+				<MkInput v-model="atTime" type="time" class="input">
+					<template #label>{{ $ts._poll.deadlineTime }}</template>
 				</MkInput>
 			</section>
 			<section v-if="expiration === 'after'">
-				<MkInput v-model:value="after" type="number" class="input">
-					<span>{{ $ts._poll.duration }}</span>
+				<MkInput v-model="after" type="number" class="input">
+					<template #label>{{ $ts._poll.duration }}</template>
 				</MkInput>
-				<MkSelect v-model:value="unit">
+				<MkSelect v-model="unit">
 					<option value="second">{{ $ts._time.second }}</option>
 					<option value="minute">{{ $ts._time.minute }}</option>
 					<option value="hour">{{ $ts._time.hour }}</option>

src/client/components/post-form.vue

@@ -37,6 +37,7 @@
 		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
 		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
+		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
@@ -44,9 +45,13 @@
 			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
 			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
 			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
+			<button class="_button" @click="withHashtags = !withHashtags" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
 			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
 			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
 		</footer>
+		<datalist id="hashtags">
+			<option v-for="hashtag in recentHashtags" :value="hashtag" :key="hashtag"/>
+		</datalist>
 	</div>
 </div>
 </template>
@@ -67,10 +72,11 @@ import { Autocomplete } from '@client/scripts/autocomplete';
 import { noteVisibilities } from '../../types';
 import * as os from '@client/os';
 import { selectFile } from '@client/scripts/select-file';
-import { notePostInterruptors, postFormActions } from '@client/store';
+import { defaultStore, notePostInterruptors, postFormActions } from '@client/store';
 import { isMobile } from '@client/scripts/is-mobile';
 import { throttle } from 'throttle-debounce';
 import MkInfo from '@client/components/ui/info.vue';
+import { defaultStore } from '@client/store';
 
 export default defineComponent({
 	components: {
@@ -228,7 +234,10 @@ export default defineComponent({
 
 		max(): number {
 			return this.$instance ? this.$instance.maxNoteTextLength : 1000;
-		}
+		},
+
+		withHashtags: defaultStore.makeGetterSetter('postFormWithHashtags'),
+		hashtags: defaultStore.makeGetterSetter('postFormHashtags'),
 	},
 
 	watch: {
@@ -331,6 +340,7 @@ export default defineComponent({
 		// TODO: detach when unmount
 		new Autocomplete(this.$refs.text, this, { model: 'text' });
 		new Autocomplete(this.$refs.cw, this, { model: 'cw' });
+		new Autocomplete(this.$refs.hashtags, this, { model: 'hashtags' });
 
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
@@ -631,6 +641,11 @@ export default defineComponent({
 				viaMobile: isMobile
 			};
 
+			if (this.withHashtags) {
+				const hashtags = this.hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
+				data.text = data.text ? `${data.text} ${hashtags}` : hashtags;
+			}
+
 			// plugin
 			if (notePostInterruptors.length > 0) {
 				for (const interruptor of notePostInterruptors) {
@@ -644,8 +659,8 @@ export default defineComponent({
 				this.$nextTick(() => {
 					this.deleteDraft();
 					this.$emit('posted');
-					if (this.text && this.text != '') {
-						const hashtags = mfm.parse(this.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
+					if (data.text && data.text != '') {
+						const hashtags = mfm.parse(data.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
 						const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
 						localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
 					}
@@ -811,6 +826,7 @@ export default defineComponent({
 		}
 
 		> .cw,
+		> .hashtags,
 		> .text {
 			display: block;
 			box-sizing: border-box;
@@ -839,6 +855,13 @@ export default defineComponent({
 			border-bottom: solid 0.5px var(--divider);
 		}
 
+		> .hashtags {
+			z-index: 1;
+			padding-top: 8px;
+			padding-bottom: 8px;
+			border-top: solid 0.5px var(--divider);
+		}
+
 		> .text {
 			max-width: 100%;
 			min-width: 100%;
@@ -898,6 +921,7 @@ export default defineComponent({
 			}
 
 			> .cw,
+			> .hashtags,
 			> .text {
 				padding: 0 16px;
 			}

src/client/components/sample.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="_card">
 	<div class="_content">
-		<MkInput v-model:value="text">
-			<span>Text</span>
+		<MkInput v-model="text">
+			<template #label>Text</template>
 		</MkInput>
-		<MkSwitch v-model:value="flag">
+		<MkSwitch v-model="flag">
 			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
 		</MkSwitch>
 		<div style="margin: 32px 0;">

src/client/components/signin.vue

@@ -3,15 +3,15 @@
 	<div class="auth _section">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:value="onUsernameChange">
-				<span>{{ $ts.username }}</span>
+			<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
+				<template #label>{{ $ts.username }}</template>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
-				<span>{{ $ts.password }}</span>
+			<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
+				<template #label>{{ $ts.password }}</template>
 				<template #prefix><i class="fas fa-lock"></i></template>
-				<template #desc><button class="_textButton" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
+				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
 			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
@@ -27,12 +27,12 @@
 			</div>
 			<div class="twofa-group totp-group">
 				<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
-				<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
-					<span>{{ $ts.password }}</span>
+				<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+					<template #label>{{ $ts.password }}</template>
 					<template #prefix><i class="fas fa-lock"></i></template>
 				</MkInput>
-				<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
-					<span>{{ $ts.token }}</span>
+				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
+					<template #label>{{ $ts.token }}</template>
 					<template #prefix><i class="fas fa-gavel"></i></template>
 				</MkInput>
 				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>

src/client/components/signup.vue

@@ -1,39 +1,39 @@
 <template>
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
-		<MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
-			<span>{{ $ts.invitationCode }}</span>
+		<MkInput v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+			<template #label>{{ $ts.invitationCode }}</template>
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
-		<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
-			<span>{{ $ts.username }}</span>
+		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername">
+			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
-			<template #desc>
+			<template #caption>
 				<span v-if="usernameState == 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
-				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
-				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
-				<span v-if="usernameState == 'error'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
-				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
-				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
-				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
+				<span v-if="usernameState == 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
+				<span v-if="usernameState == 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
+				<span v-if="usernameState == 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
+				<span v-if="usernameState == 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
+				<span v-if="usernameState == 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
+				<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
-			<span>{{ $ts.password }}</span>
+		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword">
+			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
-			<template #desc>
-				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</p>
-				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</p>
-				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</p>
+			<template #caption>
+				<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</span>
+				<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</span>
+				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
-			<span>{{ $ts.password }} ({{ $ts.retype }})</span>
+		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype">
+			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
-			<template #desc>
-				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</p>
-				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</p>
+			<template #caption>
+				<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</span>
+				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
 			</template>
 		</MkInput>
 		<label v-if="meta.tosUrl" class="tou">

src/client/components/token-generate-window.vue

@@ -14,13 +14,15 @@
 		<MkInfo warn>{{ information }}</MkInfo>
 	</div>
 	<div class="_section">
-		<MkInput v-model:value="name">{{ $ts.name }}</MkInput>
+		<MkInput v-model="name">
+			<template #label>{{ $ts.name }}</template>
+		</MkInput>
 	</div>
 	<div class="_section">
 		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
 		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
 		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model:value="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
+		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
 	</div>
 </XModalWindow>
 </template>

src/client/components/ui/button.vue

@@ -1,6 +1,6 @@
 <template>
 <component class="bghgjjyj _button"
-	:is="link ? 'a' : 'button'"
+	:is="link ? 'MkA' : 'button'"
 	:class="{ inline, primary, danger, full }"
 	:type="type"
 	@click="$emit('click', $event)"
@@ -115,6 +115,7 @@ export default defineComponent({
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
+	width: min-content;
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
@@ -125,6 +126,7 @@ export default defineComponent({
 	background: var(--buttonBg);
 	border-radius: 999px;
 	overflow: hidden;
+	box-sizing: border-box;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);

src/client/components/ui/folder.vue

@@ -99,9 +99,12 @@ export default defineComponent({
 		z-index: 10;
 		position: sticky;
 		top: var(--stickyTop, 0px);
+		background: var(--panel);
+		/* TODO panelの半透明バージョンをプログラマティックに作りたい
 		background: var(--X17);
 		-webkit-backdrop-filter: blur(8px);
 		backdrop-filter: blur(20px);
+		*/
 
 		> .title {
 			margin: 0;

src/client/components/ui/input.vue

@@ -1,32 +1,9 @@
 <template>
-<div class="juejbjww" :class="{ focused, filled, inline, disabled }">
-	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input">
-		<span class="label" ref="labelEl"><slot></slot></span>
-		<span class="title" ref="title">
-			<slot name="title"></slot>
-			<span class="warning" v-if="invalid"><i class="fas fa-exclamation-circle"></i>{{ $refs.input.validationMessage }}</span>
-		</span>
+<div class="matxzzsk">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
 		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-		<input v-if="debounce" ref="inputEl"
-			v-debounce="500"
-			:type="type"
-			v-model.lazy="v"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			:step="step"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-			:list="id"
-		>
-		<input v-else ref="inputEl"
+		<input ref="inputEl"
 			:type="type"
 			v-model="v"
 			:disabled="disabled"
@@ -48,23 +25,25 @@
 		</datalist>
 		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
 	</div>
-	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button>
-	<div class="desc _caption"><slot name="desc"></slot></div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import debounce from 'v-debounce';
-import * as os from '@client/os';
+import MkButton from './button.vue';
+import { debounce } from 'throttle-debounce';
 
 export default defineComponent({
-	directives: {
-		debounce
+	components: {
+		MkButton,
 	},
+
 	props: {
-		value: {
-			required: false
+		modelValue: {
+			required: true
 		},
 		type: {
 			type: String,
@@ -104,9 +83,6 @@ export default defineComponent({
 		step: {
 			required: false
 		},
-		debounce: {
-			required: false
-		},
 		datalist: {
 			type: Array,
 			required: false,
@@ -116,15 +92,23 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		save: {
-			type: Function,
+		debounce: {
+			type: Boolean,
 			required: false,
+			default: false
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
 		},
 	},
-	emits: ['change', 'keydown', 'enter'],
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
 	setup(props, context) {
-		const { value, type, autofocus } = toRefs(props);
-		const v = ref(value.value);
+		const { modelValue, type, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
 		const id = Math.random().toString(); // TODO: uuid?
 		const focused = ref(false);
 		const changed = ref(false);
@@ -133,7 +117,6 @@ export default defineComponent({
 		const inputEl = ref(null);
 		const prefixEl = ref(null);
 		const suffixEl = ref(null);
-		const labelEl = ref(null);
 
 		const focus = () => inputEl.value.focus();
 		const onInput = (ev) => {
@@ -148,15 +131,28 @@ export default defineComponent({
 			}
 		};
 
-		watch(value, newValue => {
+		const updated = () => {
+			changed.value = false;
+			if (type?.value === 'number') {
+				context.emit('update:modelValue', parseFloat(v.value));
+			} else {
+				context.emit('update:modelValue', v.value);
+			}
+		};
+
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
 			v.value = newValue;
 		});
 
 		watch(v, newValue => {
-			if (type?.value === 'number') {
-				context.emit('update:value', parseFloat(newValue));
-			} else {
-				context.emit('update:value', newValue);
+			if (!props.manualSave) {
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
 			}
 
 			invalid.value = inputEl.value.validity.badInput;
@@ -172,7 +168,6 @@ export default defineComponent({
 				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
 				const clock = setInterval(() => {
 					if (prefixEl.value) {
-						labelEl.value.style.left = (prefixEl.value.offsetLeft + prefixEl.value.offsetWidth) + 'px';
 						if (prefixEl.value.offsetWidth) {
 							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
 						}
@@ -200,148 +195,78 @@ export default defineComponent({
 			inputEl,
 			prefixEl,
 			suffixEl,
-			labelEl,
 			focus,
 			onInput,
 			onKeydown,
+			updated,
 		};
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.juejbjww {
-	position: relative;
-	margin: 32px 0;
+.matxzzsk {
+	margin: 1.5em 0;
 
-	&:not(.inline):first-child {
-		margin-top: 8px;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 6px 6px;
+		font-weight: bold;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
 	}
 
-	&:not(.inline):last-child {
-		margin-bottom: 8px;
-	}
+	> .caption {
+		font-size: 0.8em;
+		padding: 6px 0 0 6px;
+		color: var(--fgTransparentWeak);
 
-	> .icon {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
-
-		&:not(:empty) + .input {
-			margin-left: 28px;
+		&:empty {
+			display: none;
 		}
 	}
 
 	> .input {
+		$height: 42px;
 		position: relative;
 
-		&:before {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 1px;
-			background: var(--inputBorder);
-		}
-
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 2px;
-			background: var(--accent);
-			opacity: 0;
-			transform: scaleX(0.12);
-			transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-			will-change: border opacity transform;
-		}
-
-		> .label {
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			left: 0;
-			pointer-events: none;
-			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-			transition-duration: 0.3s;
-			font-size: 1em;
-			line-height: 32px;
-			color: var(--inputLabel);
-			pointer-events: none;
-			//will-change transform
-			transform-origin: top left;
-			transform: scale(1);
-		}
-
-		> .title {
-			position: absolute;
-			z-index: 1;
-			top: -17px;
-			left: 0 !important;
-			pointer-events: none;
-			font-size: 1em;
-			line-height: 32px;
-			color: var(--inputLabel);
-			pointer-events: none;
-			//will-change transform
-			transform-origin: top left;
-			transform: scale(.75);
-			white-space: nowrap;
-			width: 133%;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> .warning {
-				margin-left: 0.5em;
-				color: var(--infoWarnFg);
-
-				> svg {
-					margin-right: 0.1em;
-				}
-			}
-		}
-
 		> input {
-			$height: 32px;
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			height: $height;
 			width: 100%;
 			margin: 0;
-			padding: 0;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			line-height: $height;
-			color: var(--inputText);
-			background: transparent;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
 
-			&[type='file'] {
-				display: none;
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}
 
 		> .prefix,
 		> .suffix {
-			display: block;
+			display: flex;
+			align-items: center;
 			position: absolute;
 			z-index: 1;
 			top: 0;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: 32px;
-			color: var(--inputLabel);
+			height: $height;
 			pointer-events: none;
 
 			&:empty {
@@ -360,67 +285,33 @@ export default defineComponent({
 
 		> .prefix {
 			left: 0;
-			padding-right: 4px;
+			padding-right: 6px;
 		}
 
 		> .suffix {
 			right: 0;
-			padding-left: 4px;
-		}
-	}
-
-	> .save {
-		margin: 6px 0 0 0;
-		font-size: 0.8em;
-	}
-
-	> .desc {
-		margin: 6px 0 0 0;
-
-		&:empty {
-			display: none;
+			padding-left: 6px;
 		}
 
-		* {
+		&.inline {
+			display: inline-block;
 			margin: 0;
 		}
-	}
 
-	&.focused {
-		> .input {
-			&:after {
-				opacity: 1;
-				transform: scaleX(1);
-			}
-
-			> .label {
-				color: var(--accent);
+		&.focused {
+			> input {
+				border-color: var(--accent);
+				//box-shadow: 0 0 0 4px var(--focus);
 			}
 		}
-	}
 
-	&.focused,
-	&.filled {
-		> .input {
-			> .label {
-				top: -17px;
-				left: 0 !important;
-				transform: scale(0.75);
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
 			}
 		}
 	}
-
-	&.inline {
-		display: inline-block;
-		margin: 0;
-	}
-
-	&.disabled {
-		opacity: 0.7;
-
-		&, * {
-			cursor: not-allowed !important;
-		}
-	}
 }
 </style>

src/client/components/ui/select.vue

@@ -1,185 +1,218 @@
 <template>
-<div class="eiipwacr" :class="{ focused, disabled, filled, inline }">
-	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input" @click="focus">
-		<span class="label" ref="label"><slot name="label"></slot></span>
-		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
-		<select ref="input"
+<div class="vblkjoeq">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<select ref="inputEl"
 			v-model="v"
-			:required="required"
 			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
 			@focus="focused = true"
 			@blur="focused = false"
+			@input="onInput"
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix">
-			<slot name="suffix">
-				<i class="fas fa-chevron-down"></i>
-			</slot>
-		</div>
+		<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
 	</div>
-	<div class="text"><slot name="text"></slot></div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import MkButton from './button.vue';
 
 export default defineComponent({
+	components: {
+		MkButton,
+	},
+
 	props: {
-		value: {
-			required: false
+		modelValue: {
+			required: true
 		},
 		required: {
 			type: Boolean,
 			required: false
 		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
 		disabled: {
 			type: Boolean,
 			required: false
 		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
-	data() {
+
+	emits: ['change', 'update:modelValue'],
+
+	setup(props, context) {
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+		const prefixEl = ref(null);
+		const suffixEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		watch(modelValue, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				updated();
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+
+				// このコンポーネントが作成された時、非表示状態である場合がある
+				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+				const clock = setInterval(() => {
+					if (prefixEl.value) {
+						if (prefixEl.value.offsetWidth) {
+							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+						}
+					}
+					if (suffixEl.value) {
+						if (suffixEl.value.offsetWidth) {
+							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+						}
+					}
+				}, 100);
+
+				onUnmounted(() => {
+					clearInterval(clock);
+				});
+			});
+		});
+
 		return {
-			focused: false,
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			prefixEl,
+			suffixEl,
+			focus,
+			onInput,
+			updated,
 		};
 	},
-	computed: {
-		v: {
-			get() {
-				return this.value;
-			},
-			set(v) {
-				this.$emit('update:value', v);
-			}
-		},
-		filled(): boolean {
-			return true;
-		}
-	},
-	mounted() {
-		if (this.$refs.prefix) {
-			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
-		}
-	},
-	methods: {
-		focus() {
-			this.$refs.input.focus();
-		}
-	}
 });
 </script>
 
 <style lang="scss" scoped>
-.eiipwacr {
-	position: relative;
-	margin: 32px 0;
+.vblkjoeq {
+	margin: 1.5em 0;
 
-	&:not(.inline):first-child {
-		margin-top: 8px;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 6px 6px;
+		font-weight: bold;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
 	}
 
-	&:not(.inline):last-child {
-		margin-bottom: 8px;
-	}
+	> .caption {
+		font-size: 0.8em;
+		padding: 6px 0 0 6px;
+		color: var(--fgTransparentWeak);
 
-	> .icon {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
-
-		&:not(:empty) + .input {
-			margin-left: 28px;
+		&:empty {
+			display: none;
 		}
 	}
 
 	> .input {
-		display: flex;
+		$height: 42px;
 		position: relative;
 
-		&:before {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 1px;
-			background: var(--inputBorder);
-		}
-
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 2px;
-			background: var(--accent);
-			opacity: 0;
-			transform: scaleX(0.12);
-			transition: border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-			will-change: border opacity transform;
-		}
-
-		> .label {
-			position: absolute;
-			top: 0;
-			left: 0;
-			pointer-events: none;
-			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-			transition-duration: 0.3s;
-			font-size: 1em;
-			line-height: 32px;
-			pointer-events: none;
-			//will-change transform
-			transform-origin: top left;
-			transform: scale(1);
-		}
-
 		> select {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
-			flex: 1;
+			height: $height;
 			width: 100%;
-			padding: 0;
+			margin: 0;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			height: 32px;
-			background: none;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			appearance: none;
-			-webkit-appearance: none;
-			color: var(--fg);
+			box-sizing: border-box;
+			cursor: pointer;
 
-			option,
-			optgroup {
-				color: var(--fg);
-				background: var(--bg);
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}
 
 		> .prefix,
 		> .suffix {
-			display: block;
-			align-self: center;
-			justify-self: center;
+			display: flex;
+			align-items: center;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: 32px;
-			color: var(--inputLabel);
+			height: $height;
 			pointer-events: none;
 
 			&:empty {
@@ -187,53 +220,41 @@ export default defineComponent({
 			}
 
 			> * {
-				display: block;
+				display: inline-block;
 				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
 		}
 
 		> .prefix {
-			padding-right: 4px;
+			left: 0;
+			padding-right: 6px;
 		}
 
 		> .suffix {
-			padding-left: 4px;
-		}
-	}
-
-	> .text {
-		margin: 6px 0;
-		font-size: 0.8em;
-
-		&:empty {
-			display: none;
+			right: 0;
+			padding-left: 6px;
 		}
 
-		* {
+		&.inline {
+			display: inline-block;
 			margin: 0;
 		}
-	}
 
-	&.focused {
-		> .input {
-			&:after {
-				opacity: 1;
-				transform: scaleX(1);
-			}
-
-			> .label {
-				color: var(--accent);
+		&.focused {
+			> select {
+				border-color: var(--accent);
 			}
 		}
-	}
 
-	&.focused,
-	&.filled {
-		> .input {
-			> .label {
-				top: -17px;
-				left: 0 !important;
-				transform: scale(0.75);
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
 			}
 		}
 	}

src/client/components/ui/switch.vue

@@ -18,7 +18,7 @@
 	</span>
 	<span class="label">
 		<span><slot></slot></span>
-		<p><slot name="desc"></slot></p>
+		<p><slot name="caption"></slot></p>
 	</span>
 </div>
 </template>
@@ -28,7 +28,7 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
 	props: {
-		value: {
+		modelValue: {
 			type: Boolean,
 			default: false
 		},
@@ -39,13 +39,13 @@ export default defineComponent({
 	},
 	computed: {
 		checked(): boolean {
-			return this.value;
+			return this.modelValue;
 		}
 	},
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('update:value', !this.checked);
+			this.$emit('update:modelValue', !this.checked);
 		}
 	}
 });
@@ -136,7 +136,7 @@ export default defineComponent({
 
 		> p {
 			margin: 0;
-			opacity: 0.7;
+			color: var(--fgTransparentWeak);
 			font-size: 90%;
 		}
 	}

src/client/components/ui/textarea.vue

@@ -1,30 +1,45 @@
 <template>
-<div class="adhpbeos" :class="{ focused, filled, tall, pre }">
-	<div class="input">
-		<span class="label" ref="label"><slot></slot></span>
-		<textarea ref="input" :class="{ code, _monospace: code }"
-			:value="value"
+<div class="adhpbeos">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ disabled, focused, tall, pre }">
+		<textarea ref="inputEl"
+			:class="{ code, _monospace: code }"
+			v-model="v"
+			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
+			:placeholder="placeholder"
 			:pattern="pattern"
 			:autocomplete="autocomplete"
-			:spellcheck="!code"
-			@input="onInput"
+			:spellcheck="spellcheck"
 			@focus="focused = true"
 			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
 		></textarea>
 	</div>
-	<button class="save _textButton" v-if="save && changed" @click="() => { changed = false; save(); }">{{ $ts.save }}</button>
-	<div class="desc _caption"><slot name="desc"></slot></div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import MkButton from './button.vue';
+import { debounce } from 'throttle-debounce';
 
 export default defineComponent({
+	components: {
+		MkButton,
+	},
+
 	props: {
-		value: {
+		modelValue: {
+			required: true
+		},
+		type: {
+			type: String,
 			required: false
 		},
 		required: {
@@ -35,14 +50,29 @@ export default defineComponent({
 			type: Boolean,
 			required: false
 		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
 		pattern: {
 			type: String,
 			required: false
 		},
-		autocomplete: {
+		placeholder: {
 			type: String,
 			required: false
 		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		autocomplete: {
+			required: false
+		},
+		spellcheck: {
+			required: false
+		},
 		code: {
 			type: Boolean,
 			required: false
@@ -57,169 +87,164 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		save: {
-			type: Function,
+		debounce: {
+			type: Boolean,
 			required: false,
+			default: false
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
 		},
 	},
-	data() {
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
+	setup(props, context) {
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
+
+			if (ev.code === 'Enter') {
+				context.emit('enter');
+			}
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+			});
+		});
+
 		return {
-			focused: false,
-			changed: false,
-		}
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			focus,
+			onInput,
+			onKeydown,
+			updated,
+		};
 	},
-	computed: {
-		filled(): boolean {
-			return this.value != '' && this.value != null;
-		}
-	},
-	methods: {
-		focus() {
-			this.$refs.input.focus();
-		},
-		onInput(ev) {
-			this.changed = true;
-			this.$emit('update:value', ev.target.value);
-		}
-	}
 });
 </script>
 
 <style lang="scss" scoped>
 .adhpbeos {
-	margin: 42px 0 32px 0;
-	position: relative;
+	margin: 1.5em 0;
 
-	&:first-child {
-		margin-top: 16px;
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 6px 6px;
+		font-weight: bold;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
 	}
 
-	&:last-child {
-		margin-bottom: 0;
+	> .caption {
+		font-size: 0.8em;
+		padding: 6px 0 0 6px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
 	}
 
 	> .input {
 		position: relative;
-	
-		&:before {
-			content: '';
-			display: block;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			background: none;
-			border: solid 1px var(--inputBorder);
-			border-radius: 3px;
-			pointer-events: none;
-		}
-
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			background: none;
-			border: solid 2px var(--accent);
-			border-radius: 3px;
-			opacity: 0;
-			transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-			pointer-events: none;
-		}
-
-		> .label {
-			position: absolute;
-			top: 6px;
-			left: 12px;
-			pointer-events: none;
-			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-			transition-duration: 0.3s;
-			font-size: 1em;
-			line-height: 32px;
-			pointer-events: none;
-			//will-change transform
-			transform-origin: top left;
-			transform: scale(1);
-		}
 
 		> textarea {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			width: 100%;
 			min-width: 100%;
 			max-width: 100%;
 			min-height: 130px;
+			margin: 0;
 			padding: 12px;
-			box-sizing: border-box;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			background: transparent;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			color: var(--fg);
+			box-sizing: border-box;
 
-			&.code {
-				tab-size: 2;
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}
-	}
 
-	> .save {
-		margin: 6px 0 0 0;
-		font-size: 0.8em;
-	}
-
-	> .desc {
-		margin: 6px 0 0 0;
-
-		&:empty {
-			display: none;
-		}
-
-		* {
-			margin: 0;
-		}
-	}
-
-	&.focused {
-		> .input {
-			&:after {
-				opacity: 1;
-			}
-
-			> .label {
-				color: var(--accent);
+		&.focused {
+			> textarea {
+				border-color: var(--accent);
 			}
 		}
-	}
 
-	&.focused,
-	&.filled {
-		> .input {
-			> .label {
-				top: -24px;
-				left: 0 !important;
-				transform: scale(0.75);
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
 			}
 		}
-	}
 
-	&.tall {
-		> .input {
+		&.tall {
 			> textarea {
 				min-height: 200px;
 			}
 		}
-	}
 
-	&.pre {
-		> .input {
+		&.pre {
 			> textarea {
 				white-space: pre;
 			}

src/client/components/ui/window.vue

@@ -3,15 +3,11 @@
 	<div class="ebkgocck" :class="{ front }" v-if="showing">
 		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
-				<slot v-if="closeRight" name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
-				<button v-else class="_button" @click="close()"><i class="fas fa-times"></i></button>
+				<button v-if="closeButton" class="_button" @click="close()"><i class="fas fa-times"></i></button>
 
 				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
 					<slot name="header"></slot>
 				</span>
-
-				<button v-if="closeRight" class="_button" @click="close()"><i class="fas fa-times"></i></button>
-				<slot v-else name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
 			</div>
 			<div class="body" v-if="padding">
 				<div class="_section">
@@ -86,10 +82,10 @@ export default defineComponent({
 			required: false,
 			default: false,
 		},
-		closeRight: {
+		closeButton: {
 			type: Boolean,
 			required: false,
-			default: false,
+			default: true,
 		},
 		mini: {
 			type: Boolean,

src/client/components/user-info.vue

@@ -31,7 +31,7 @@
 import { defineComponent } from 'vue';
 import { parseAcct } from '@/misc/acct';
 import MkFollowButton from './follow-button.vue';
-import { userPage } from '../filters/user';
+import { userPage } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/components/user-list.vue

@@ -18,7 +18,7 @@
 import { defineComponent } from 'vue';
 import paging from '@client/scripts/paging';
 import MkUserInfo from './user-info.vue';
-import { userPage } from '../filters/user';
+import { userPage } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/components/user-preview.vue

@@ -35,7 +35,7 @@
 import { defineComponent } from 'vue';
 import { parseAcct } from '@/misc/acct';
 import MkFollowButton from './follow-button.vue';
-import { userPage } from '../filters/user';
+import { userPage } from '@client/filters/user';
 import * as os from '@client/os';
 
 export default defineComponent({

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

@@ -10,9 +10,15 @@
 	<template #header>{{ $ts.selectUser }}</template>
 	<div class="tbhwbxda _monolithic_">
 		<div class="_section">
-			<div class="inputs">
-				<MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $ts.username }}</span><template #prefix>@</template></MkInput>
-				<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $ts.host }}</span><template #prefix>@</template></MkInput>
+			<div class="_inputSplit _inputNoTopMargin _inputNoBottomMargin">
+				<MkInput v-model="username" class="input" @update:modelValue="search" ref="username">
+					<template #label>{{ $ts.username }}</template>
+					<template #prefix>@</template>
+				</MkInput>
+				<MkInput v-model="host" class="input" @update:modelValue="search">
+					<template #label>{{ $ts.host }}</template>
+					<template #prefix>@</template>
+				</MkInput>
 			</div>
 		</div>
 		<div class="_section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
@@ -138,14 +144,6 @@ export default defineComponent({
 			padding: 0;
 		}
 
-		> .inputs {
-			> .input {
-				display: inline-block;
-				width: 50%;
-				margin: 0;
-			}
-		}
-
 		> .users {
 			flex: 1;
 			overflow: auto;

src/client/components/users-dialog.vue

@@ -28,7 +28,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import paging from '@client/scripts/paging';
-import { userPage } from '../filters/user';
+import { userPage } from '@client/filters/user';
 
 export default defineComponent({
 	mixins: [

src/client/components/widgets.vue

@@ -2,7 +2,7 @@
 <div class="vjoppmmu">
 	<template v-if="edit">
 		<header>
-			<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
+			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
 				<template #label>{{ $ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
 			</MkSelect>

src/client/menu.ts

@@ -113,6 +113,16 @@ export const menuDef = {
 		icon: 'fas fa-satellite-dish',
 		to: '/channels',
 	},
+	federation: {
+		title: 'federation',
+		icon: 'fas fa-globe',
+		to: '/federation',
+	},
+	emojis: {
+		title: 'emojis',
+		icon: 'fas fa-laugh',
+		to: '/emojis',
+	},
 	games: {
 		title: 'games',
 		icon: 'fas fa-gamepad',

src/client/pages/_error_.vue

@@ -1,11 +1,11 @@
 <template>
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="_section">
-		<div class="mjndxjch _content">
-			<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-			<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
-			<p>{{ $ts.pageLoadErrorDescription }}</p>
-		</div>
+	<div class="mjndxjch">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
+		<p>{{ $ts.pageLoadErrorDescription }}</p>
+		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
+		<p v-if="error" class="error">ERROR: {{ error }}</p>
 	</div>
 </transition>
 </template>
@@ -19,6 +19,11 @@ export default defineComponent({
 	components: {
 		MkButton,
 	},
+	props: {
+		error: {
+			required: false,
+		}
+	},
 	data() {
 		return {
 			[symbols.PAGE_INFO]: {
@@ -32,10 +37,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mjndxjch {
+	padding: 32px;
 	text-align: center;
 
 	> p {
-		margin: 0 0 8px 0;
+		margin: 0 0 12px 0;
 	}
 
 	> .button {
@@ -45,8 +51,12 @@ export default defineComponent({
 	> img {
 		vertical-align: bottom;
 		height: 128px;
-		margin-bottom: 16px;
+		margin-bottom: 24px;
 		border-radius: 16px;
 	}
+
+	> .error {
+		opacity: 0.7;
+	}
 }
 </style>

src/client/pages/api-console.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="_root">
 	<div class="_block" style="padding: 24px;">
-		<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
-			<span>Endpoint</span>
+		<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
+			<template #label>Endpoint</template>
 		</MkInput>
-		<MkTextarea v-model:value="body" code>
-			<span>Params (JSON or JSON5)</span>
+		<MkTextarea v-model="body" code>
+			<template #label>Params (JSON or JSON5)</template>
 		</MkTextarea>
-		<MkSwitch v-model:value="withCredential">
+		<MkSwitch v-model="withCredential">
 			With credential
 		</MkSwitch>
 		<MkButton primary full @click="send" :disabled="sending">
@@ -16,8 +16,8 @@
 		</MkButton>
 	</div>
 	<div v-if="res" class="_block" style="padding: 24px;">
-		<MkTextarea v-model:value="res" code readonly tall>
-			<span>Response</span>
+		<MkTextarea v-model="res" code readonly tall>
+			<template #label>Response</template>
 		</MkTextarea>
 	</div>
 </div>

src/client/pages/channel-editor.vue

@@ -2,9 +2,13 @@
 <div>
 	<div class="_section">
 		<div class="_content">
-			<MkInput v-model:value="name">{{ $ts.name }}</MkInput>
+			<MkInput v-model="name">
+				<template #label>{{ $ts.name }}</template>
+			</MkInput>
 
-			<MkTextarea v-model:value="description">{{ $ts.description }}</MkTextarea>
+			<MkTextarea v-model="description">
+				<template #label>{{ $ts.description }}</template>
+			</MkTextarea>
 
 			<div class="banner">
 				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ $ts._channel.setBanner }}</MkButton>

src/client/pages/doc.vue

@@ -1,9 +1,11 @@
 <template>
 <div class="qyqbqfal" v-size="{ max: [500] }">
-	<div class="title">{{ title }}</div>
-	<div class="body" v-html="body"></div>
-	<div class="footer">
-		<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
+	<div class="main">
+		<div class="title">{{ title }}</div>
+		<div class="body" v-html="body"></div>
+		<div class="footer">
+			<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
+		</div>
 	</div>
 </div>
 </template>
@@ -62,6 +64,10 @@ export default defineComponent({
 		fetchDoc() {
 			fetch(`${url}/doc-assets/${lang}/${this.doc}.md`).then(res => res.text()).then(md => {
 				this.parse(md);
+			}).catch(() => {
+				fetch(`${url}/doc-assets/ja-JP/${this.doc}.md`).then(res => res.text()).then(md => {
+					this.parse(md);
+				});
 			});
 		},
 
@@ -105,103 +111,129 @@ export default defineComponent({
 <style lang="scss" scoped>
 .qyqbqfal {
 	padding: 32px;
-	max-width: 800px;
-	margin: 0 auto;
 	background: var(--panel);
+	line-height: 1.5;
 
 	&.max-width_500px {
 		padding: 16px;
 	}
 
-	> .title {
-		font-size: 1.5em;
-		font-weight: bold;
-		padding: 0 0 0.75em 0;
-		margin: 0 0 1em 0;
-		border-bottom: solid 2px var(--divider);
-	}
+	> .main {
+		max-width: 800px;
+		margin: 0 auto;
 
-	> .body {
-		> *:first-child {
-			margin-top: 0;
+		> .title {
+			font-size: 1.5em;
+			font-weight: bold;
+			padding: 0 0 0.75em 0;
+			margin: 0 0 1em 0;
+			border-bottom: solid 2px var(--divider);
 		}
 
-		> *:last-child {
-			margin-bottom: 0;
-		}
+		> .body {
+			> *:first-child {
+				margin-top: 0;
+			}
 
-		::v-deep(a) {
-			color: var(--link);
-		}
+			> *:last-child {
+				margin-bottom: 0;
+			}
 
-		::v-deep(blockquote) {
-			display: block;
-			margin: 8px;
-			padding: 6px 0 6px 12px;
-			color: var(--fg);
-			border-left: solid 3px var(--fg);
-			opacity: 0.7;
+			::v-deep(a) {
+				color: var(--link);
+			}
 
-			p {
-				margin: 0;
+			::v-deep(blockquote) {
+				display: block;
+				margin: 8px;
+				padding: 6px 0 6px 12px;
+				color: var(--fg);
+				border-left: solid 3px var(--fg);
+				opacity: 0.7;
+
+				p {
+					margin: 0;
+				}
+			}
+
+			::v-deep(h2) {
+				font-size: 1.25em;
+				padding: 0 0 0.5em 0;
+				margin: 1.5em 0 1em 0;
+				border-bottom: solid 0.5px var(--divider);
+			}
+
+			::v-deep(h3) {
+				margin: 1.25em 0 0.5em 0;
+			}
+
+			::v-deep(table) {
+				width: 100%;
+				max-width: 100%;
+				overflow: auto;
+			}
+
+			::v-deep(kbd.group) {
+				display: inline-block;
+				padding: 2px;
+				border: 1px solid var(--divider);
+				border-radius: 4px;
+				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+			}
+
+			::v-deep(kbd.key) {
+				display: inline-block;
+				padding: 6px 8px;
+				border: solid 0.5px var(--divider);
+				border-radius: 4px;
+				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+			}
+
+			::v-deep(code) {
+				display: inline-block;
+				font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+				tab-size: 2;
+				background: #272822;
+				color: #f8f8f2;
+				border-radius: 6px;
+				padding: 4px 6px;
+			}
+
+			::v-deep(pre) {
+				background: #272822;
+				color: #f8f8f2;
+				border-radius: 6px;
+				padding: 12px 16px;
+
+				> code {
+					padding: 0;
+				}
+			}
+
+			::v-deep(.info) {
+				font-size: 90%;
+				background: var(--infoBg);
+				color: var(--infoFg);
+				padding: 1em;
+				margin: 0.75em 0;
+				border-radius: 6px;
+			}
+
+			::v-deep(.warn) {
+				font-size: 90%;
+				background: var(--infoWarnBg);
+				color: var(--infoWarnFg);
+				padding: 1em;
+				margin: 0.75em 0;
+				border-radius: 6px;
 			}
 		}
 
-		::v-deep(h2) {
-			font-size: 1.25em;
-			padding: 0 0 0.5em 0;
-			margin: 1.5em 0 1em 0;
-			border-bottom: solid 0.5px var(--divider);
+		> .footer {
+			padding: 1.5em 0 0 0;
+			margin: 1.5em 0 0 0;
+			border-top: solid 2px var(--divider);
 		}
-
-		::v-deep(table) {
-			width: 100%;
-			max-width: 100%;
-			overflow: auto;
-		}
-
-		::v-deep(kbd.group) {
-			display: inline-block;
-			padding: 2px;
-			border: 1px solid var(--divider);
-			border-radius: 4px;
-			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-		}
-
-		::v-deep(kbd.key) {
-			display: inline-block;
-			padding: 6px 8px;
-			border: solid 0.5px var(--divider);
-			border-radius: 4px;
-			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-		}
-
-		::v-deep(code) {
-			display: inline-block;
-			font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-			tab-size: 2;
-			background: #272822;
-			color: #f8f8f2;
-			border-radius: 6px;
-			padding: 4px 6px;
-		}
-
-		::v-deep(pre) {
-			background: #272822;
-			color: #f8f8f2;
-			border-radius: 6px;
-			padding: 12px 16px;
-
-			> code {
-				padding: 0;
-			}
-		}
-	}
-
-	> .footer {
-		padding: 1.5em 0 0 0;
-		margin: 1.5em 0 0 0;
-		border-top: solid 2px var(--divider);
 	}
 }
 </style>

src/client/pages/docs.vue

@@ -1,7 +1,9 @@
 <template>
 <div class="vtaihdtm">
 	<div class="search">
-		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.search }}</span></MkInput>
+		<MkInput v-model="query" :debounce="true" type="search" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+			<template #prefix><i class="fas fa-search"></i></template>
+		</MkInput>
 	</div>
 	<MkFolder>
 		<template #header>{{ $ts._docs.generalTopics }}</template>
@@ -33,6 +35,16 @@
 			</MkA>
 		</div>
 	</MkFolder>
+	<MkFolder>
+		<template #header>{{ $ts._docs.admin }}</template>
+		<div class="docs">
+			<MkA v-for="doc in docs.filter(doc => doc.path.startsWith('admin/'))" :key="doc.path" :to="`/docs/${doc.path}`" class="doc">
+				<div class="title">{{ doc.title }}</div>
+				<div class="summary">{{ doc.summary }}</div>
+				<div class="read">{{ $ts._docs.continueReading }}</div>
+			</MkA>
+		</div>
+	</MkFolder>
 </div>
 </template>
 
@@ -69,8 +81,13 @@ export default defineComponent({
 	},
 
 	created() {
-		fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
-			this.docs = docs;
+		fetch(`${url}/docs.json?lang=ja-JP`).then(res => res.json()).then(jaDocs => {
+			fetch(`${url}/docs.json?lang=${lang}`).then(res => res.json()).then(docs => {
+				this.docs = jaDocs.map(doc => {
+					const exist = docs.find(d => d.path === doc.path);
+					return exist || doc;
+				});
+			});
 		});
 	},
 });
@@ -81,14 +98,14 @@ export default defineComponent({
 	background: var(--panel);
 
 	> .search {
-		padding: 8px;
+		padding: 16px;
 	}
 
 	.docs {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 		grid-gap: 12px;
-		margin: var(--margin);
+		margin: 0 16px 16px 16px;
 
 		> .doc {
 			display: inline-block;

src/client/pages/emojis.vue

@@ -0,0 +1,151 @@
+<template>
+<div class="driuhtrh">
+	<div class="query">
+		<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin" :placeholder="$ts.search">
+			<template #prefix><i class="fas fa-search"></i></template>
+		</MkInput>
+	</div>
+
+	<div class="emojis">
+		<MkFolder v-if="searchEmojis">
+			<template #header>{{ $ts.searchResult }}</template>
+			<div class="zuvgdzyt">
+				<button v-for="emoji in searchEmojis" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
+					<img :src="emoji.url" class="img" :alt="emoji.name"/>
+					<div class="body">
+						<div class="name _monospace">{{ emoji.name }}</div>
+						<div class="info">{{ emoji.aliases.join(' ') }}</div>
+					</div>
+				</button>
+			</div>
+		</MkFolder>
+		<MkFolder v-for="category in customEmojiCategories" :key="category">
+			<template #header>{{ category || $ts.other }}</template>
+			<div class="zuvgdzyt">
+				<button v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
+					<img :src="emoji.url" class="img" :alt="emoji.name"/>
+					<div class="body">
+						<div class="name _monospace">{{ emoji.name }}</div>
+						<div class="info">{{ emoji.aliases.join(' ') }}</div>
+					</div>
+				</button>
+			</div>
+		</MkFolder>
+	</div>
+</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 MkFolder from '@client/components/ui/folder.vue';
+import * as os from '@client/os';
+import * as symbols from '@client/symbols';
+import { emojiCategories } from '@client/instance';
+import copyToClipboard from '@client/scripts/copy-to-clipboard';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkInput,
+		MkSelect,
+		MkFolder,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.customEmojis,
+				icon: 'fas fa-laugh'
+			},
+			q: '',
+			customEmojiCategories: emojiCategories,
+			customEmojis: this.$instance.emojis,
+			searchEmojis: null,
+		}
+	},
+
+	watch: {
+		q() {
+			if (this.q === '' || this.q == null) {
+				this.searchEmojis = null;
+				return;
+			}
+
+			this.searchEmojis = this.customEmojis.filter(e => e.name.includes(this.q) || e.aliases.includes(this.q));
+		}
+	},
+
+	methods: {
+		menu(emoji, ev) {
+			os.modalMenu([{
+				type: 'label',
+				text: ':' + emoji.name + ':',
+			}, {
+				text: this.$ts.copy,
+				icon: 'fas fa-copy',
+				action: () => {
+					copyToClipboard(`:${emoji.name}:`);
+					os.success();
+				}
+			}], ev.currentTarget || ev.target);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.driuhtrh {
+	> .query {
+		background: var(--bg);
+		padding: 16px;
+	}
+
+	> .emojis {
+		.zuvgdzyt {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+			margin: 0 var(--margin) var(--margin) var(--margin);
+
+			> .emoji {
+				display: flex;
+				align-items: center;
+				padding: 12px;
+				text-align: left;
+				border: solid 1px var(--divider);
+				border-radius: 8px;
+
+				&:hover {
+					border-color: var(--accent);
+				}
+
+				> .img {
+					width: 42px;
+					height: 42px;
+				}
+
+				> .body {
+					padding: 0 0 0 8px;
+					white-space: nowrap;
+					overflow: hidden;
+
+					> .name {
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+
+					> .info {
+						opacity: 0.5;
+						font-size: 0.9em;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/client/pages/explore.vue

@@ -2,7 +2,10 @@
 <div class="lznhrdub _root">
 	<div>
 		<div class="_isolated">
-			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><i class="fas fa-search"></i></template><span>{{ $ts.searchUser }}</span></MkInput>
+			<MkInput v-model="query" :debounce="true" type="search">
+				<template #prefix><i class="fas fa-search"></i></template>
+				<template #label>{{ $ts.searchUser }}</template>
+			</MkInput>
 		</div>
 
 		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>

src/client/pages/federation.vue

@@ -1,9 +1,12 @@
 <template>
-<div class="enuoauvw">
+<div class="taeiyria">
 	<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;">
+		<MkInput v-model="host" :debounce="true" class="_inputNoTopMargin">
+			<template #prefix><i class="fas fa-search"></i></template>
+			<template #label>{{ $ts.host }}</template>
+		</MkInput>
+		<div class="_inputSplit _inputNoBottomMargin">
+			<MkSelect v-model="state">
 				<template #label>{{ $ts.state }}</template>
 				<option value="all">{{ $ts.all }}</option>
 				<option value="federating">{{ $ts.federating }}</option>
@@ -13,7 +16,7 @@
 				<option value="blocked">{{ $ts.blocked }}</option>
 				<option value="notResponding">{{ $ts.notResponding }}</option>
 			</MkSelect>
-			<MkSelect v-model:value="sort" style="margin: 0; flex: 1;">
+			<MkSelect v-model="sort">
 				<template #label>{{ $ts.sort }}</template>
 				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
 				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
@@ -38,16 +41,53 @@
 	</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 class="dqokceoi">
+			<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
+				<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
+				<div class="table">
+					<div class="cell">
+						<div class="key">{{ $ts.registeredAt }}</div>
+						<div class="value"><MkTime :time="instance.caughtAt"/></div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.software }}</div>
+						<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.version }}</div>
+						<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.users }}</div>
+						<div class="value">{{ instance.usersCount }}</div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.notes }}</div>
+						<div class="value">{{ instance.notesCount }}</div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.sent }}</div>
+						<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+					</div>
+					<div class="cell">
+						<div class="key">{{ $ts.received }}</div>
+						<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
+					</div>
+				</div>
+				<div class="footer">
+					<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
+					<span class="pubSub">
+						<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>
+					<span class="right">
+						<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
+						<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
+					</span>
+				</div>
+			</MkA>
 		</div>
 	</MkPagination>
 </div>
@@ -59,7 +99,6 @@ 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';
 
@@ -117,69 +156,107 @@ export default defineComponent({
 
 	methods: {
 		getStatus(instance) {
-			if (instance.isSuspended) return 'off';
-			if (instance.isNotResponding) return 'red';
-			return 'green';
+			if (instance.isSuspended) return 'suspended';
+			if (instance.isNotResponding) return 'error';
+			return 'alive';
 		},
-
-		info(instance) {
-			os.popup(MkInstanceInfo, {
-				instance: instance
-			}, {}, 'closed');
-		}
 	}
 });
 </script>
 
 <style lang="scss" scoped>
-.enuoauvw {
+.taeiyria {
 	> .query {
-		margin: var(--margin);
+		background: var(--bg);
+		padding: 16px;
 	}
 }
 
-.ppgwaixt {
-	cursor: pointer;
+.dqokceoi {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+	grid-gap: 12px;
 	padding: 16px;
 
-	&:hover {
-		color: var(--accent);
-	}
+	> .instance {
+		padding: 16px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
 
-	> .host {
-		> .indicator {
-			font-size: 70%;
-			vertical-align: baseline;
-			margin-right: 4px;
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
 
-			&.green {
-				color: #49c5ba;
-			}
+		> .host {
+			font-weight: bold;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-			&.yellow {
-				color: #c5a549;
-			}
-
-			&.red {
-				color: #c54949;
-			}
-
-			&.off {
-				color: rgba(0, 0, 0, 0.5);
+			> img {
+				width: 18px;
+				height: 18px;
+				margin-right: 6px;
+				vertical-align: middle;
 			}
 		}
-	}
 
-	> .status {
-		display: flex;
-		align-items: center;
-		font-size: 90%;
+		> .table {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+			grid-gap: 6px;
+			margin: 6px 0;
+			font-size: 70%;
 
-		> span {
-			flex: 1;
-			
-			> .icon {
-				margin-right: 6px;
+			> .cell {
+				> .key, > .value {
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				> .key {
+					opacity: 0.7;
+				}
+
+				> .value {
+				}
+			}
+		}
+
+		> .footer {
+			display: flex;
+			align-items: center;
+
+			> .status {
+				&.suspended {
+					opacity: 0.5;
+				}
+
+				&.error {
+					color: var(--error);
+				}
+
+				&.alive {
+					color: var(--success);
+				}
+			}
+
+			> .pubSub {
+				margin-left: 8px;
+			}
+
+			> .right {
+				margin-left: auto;
+				font-size: 0.9em;
+
+				> .latestStatus {
+					border: solid 1px var(--divider);
+					border-radius: 4px;
+					margin: 0 8px;
+					padding: 0 4px;
+				}
 			}
 		}
 	}

src/client/pages/follow-requests.vue

@@ -32,7 +32,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { userPage, acct } from '../filters/user';
+import { userPage, acct } from '@client/filters/user';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/instance-info.vue

@@ -62,7 +62,7 @@
 			<div class="_formLabel">{{ $ts.statistics }}</div>
 			<div class="_formPanel cmhjzshl">
 				<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>
@@ -75,7 +75,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>

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';
 

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>

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

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>

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}">

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

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

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

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;

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>

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) => {

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';

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

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';

src/client/pages/messaging/index.vue

@@ -40,7 +40,7 @@
 import { defineAsyncComponent, defineComponent, markRaw } from 'vue';
 import { getAcct } from '@/misc/acct';
 import MkButton from '@client/components/ui/button.vue';
-import { acct } from '../../filters/user';
+import { acct } from '@client/filters/user';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
 

src/client/pages/messaging/messaging-room.vue

@@ -29,7 +29,7 @@
 					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-arrow-circle-down"></i>{{ $ts.newMessageExists }}</button>
 				</div>
 			</transition>
-			<XForm v-if="!fetching" :user="user" :group="group" ref="form"/>
+			<XForm v-if="!fetching" :user="user" :group="group" ref="form" class="form"/>
 		</footer>
 	</div>
 </div>
@@ -452,6 +452,10 @@ export default Component;
 				}
 			}
 		}
+
+		> .form {
+			border-top: solid 0.5px var(--divider);
+		}
 	}
 }
 

src/client/pages/mfm-cheat-sheet.vue

@@ -7,7 +7,7 @@
 			<p>{{ $ts._mfm.mentionDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_mention"/>
-				<MkTextarea v-model:value="preview_mention"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -17,7 +17,7 @@
 			<p>{{ $ts._mfm.hashtagDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_hashtag"/>
-				<MkTextarea v-model:value="preview_hashtag"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -27,7 +27,7 @@
 			<p>{{ $ts._mfm.urlDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_url"/>
-				<MkTextarea v-model:value="preview_url"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_url"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -37,7 +37,7 @@
 			<p>{{ $ts._mfm.linkDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_link"/>
-				<MkTextarea v-model:value="preview_link"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -47,7 +47,7 @@
 			<p>{{ $ts._mfm.emojiDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_emoji"/>
-				<MkTextarea v-model:value="preview_emoji"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -57,7 +57,7 @@
 			<p>{{ $ts._mfm.boldDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_bold"/>
-				<MkTextarea v-model:value="preview_bold"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -67,7 +67,7 @@
 			<p>{{ $ts._mfm.smallDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_small"/>
-				<MkTextarea v-model:value="preview_small"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -77,7 +77,7 @@
 			<p>{{ $ts._mfm.quoteDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_quote"/>
-				<MkTextarea v-model:value="preview_quote"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -87,7 +87,7 @@
 			<p>{{ $ts._mfm.centerDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_center"/>
-				<MkTextarea v-model:value="preview_center"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -97,7 +97,7 @@
 			<p>{{ $ts._mfm.inlineCodeDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_inlineCode"/>
-				<MkTextarea v-model:value="preview_inlineCode"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -107,7 +107,7 @@
 			<p>{{ $ts._mfm.blockCodeDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_blockCode"/>
-				<MkTextarea v-model:value="preview_blockCode"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -117,7 +117,7 @@
 			<p>{{ $ts._mfm.inlineMathDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_inlineMath"/>
-				<MkTextarea v-model:value="preview_inlineMath"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -127,7 +127,7 @@
 			<p>{{ $ts._mfm.searchDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_search"/>
-				<MkTextarea v-model:value="preview_search"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -137,7 +137,7 @@
 			<p>{{ $ts._mfm.flipDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_flip"/>
-				<MkTextarea v-model:value="preview_flip"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -147,7 +147,7 @@
 			<p>{{ $ts._mfm.fontDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_font"/>
-				<MkTextarea v-model:value="preview_font"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -157,7 +157,7 @@
 			<p>{{ $ts._mfm.x2Description }}</p>
 			<div class="preview">
 				<Mfm :text="preview_x2"/>
-				<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -167,7 +167,7 @@
 			<p>{{ $ts._mfm.x3Description }}</p>
 			<div class="preview">
 				<Mfm :text="preview_x3"/>
-				<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -177,7 +177,7 @@
 			<p>{{ $ts._mfm.x4Description }}</p>
 			<div class="preview">
 				<Mfm :text="preview_x4"/>
-				<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -187,7 +187,7 @@
 			<p>{{ $ts._mfm.blurDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_blur"/>
-				<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -197,7 +197,7 @@
 			<p>{{ $ts._mfm.jellyDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_jelly"/>
-				<MkTextarea v-model:value="preview_jelly"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -207,7 +207,7 @@
 			<p>{{ $ts._mfm.tadaDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_tada"/>
-				<MkTextarea v-model:value="preview_tada"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -217,7 +217,7 @@
 			<p>{{ $ts._mfm.jumpDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_jump"/>
-				<MkTextarea v-model:value="preview_jump"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -227,7 +227,7 @@
 			<p>{{ $ts._mfm.bounceDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_bounce"/>
-				<MkTextarea v-model:value="preview_bounce"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -237,7 +237,7 @@
 			<p>{{ $ts._mfm.spinDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_spin"/>
-				<MkTextarea v-model:value="preview_spin"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -247,7 +247,7 @@
 			<p>{{ $ts._mfm.shakeDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_shake"/>
-				<MkTextarea v-model:value="preview_shake"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -257,7 +257,17 @@
 			<p>{{ $ts._mfm.twitchDescription }}</p>
 			<div class="preview">
 				<Mfm :text="preview_twitch"/>
-				<MkTextarea v-model:value="preview_twitch"><span>MFM</span></MkTextarea>
+				<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="section _block">
+		<div class="title">{{ $ts._mfm.rainbow }}</div>
+		<div class="content">
+			<p>{{ $ts._mfm.rainbowDescription }}</p>
+			<div class="preview">
+				<Mfm :text="preview_rainbow"/>
+				<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
 			</div>
 		</div>
 	</div>
@@ -306,6 +316,7 @@ export default defineComponent({
 			preview_x3: `$[x3 🍮]`,
 			preview_x4: `$[x4 🍮]`,
 			preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
+			preview_rainbow: `$[rainbow 🍮]`,
 		}
 	},
 });
@@ -313,6 +324,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mwysmxbg {
+	background: var(--bg);
+
 	> .section {
 		> .title {
 			position: sticky;

src/client/pages/my-antennas/create.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="geegznzt">
+	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			draft: {
+				name: '',
+				src: 'all',
+				userListId: null,
+				userGroupId: null,
+				users: [],
+				keywords: [],
+				excludeKeywords: [],
+				withReplies: false,
+				caseSensitive: false,
+				withFile: false,
+				notify: false
+			},
+		};
+	},
+
+	methods: {
+		onAntennaCreated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/client/pages/my-antennas/edit.vue

@@ -0,0 +1,56 @@
+<template>
+<div class="">
+	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	props: {
+		antennaId: {
+			type: String,
+			required: true,
+		}
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			antenna: null,
+		};
+	},
+
+	watch: {
+		antennaId: {
+			async handler() {
+				this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
+			},
+			immediate: true,
+		}
+	},
+
+	methods: {
+		onAntennaUpdated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/client/pages/my-antennas/editor.vue

@@ -1,11 +1,10 @@
 <template>
-<div class="shaynizk _card">
-	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
-	<div class="_content body">
-		<MkInput v-model:value="name">
-			<span>{{ $ts.name }}</span>
+<div class="shaynizk">
+	<div class="form">
+		<MkInput v-model="name" class="_inputNoTopMargin">
+			<template #label>{{ $ts.name }}</template>
 		</MkInput>
-		<MkSelect v-model:value="src">
+		<MkSelect v-model="src">
 			<template #label>{{ $ts.antennaSource }}</template>
 			<option value="all">{{ $ts._antennaSources.all }}</option>
 			<option value="home">{{ $ts._antennaSources.homeTimeline }}</option>
@@ -13,34 +12,34 @@
 			<option value="list">{{ $ts._antennaSources.userList }}</option>
 			<option value="group">{{ $ts._antennaSources.userGroup }}</option>
 		</MkSelect>
-		<MkSelect v-model:value="userListId" v-if="src === 'list'">
+		<MkSelect v-model="userListId" v-if="src === 'list'">
 			<template #label>{{ $ts.userList }}</template>
 			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
 		</MkSelect>
-		<MkSelect v-model:value="userGroupId" v-else-if="src === 'group'">
+		<MkSelect v-model="userGroupId" v-else-if="src === 'group'">
 			<template #label>{{ $ts.userGroup }}</template>
 			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
 		</MkSelect>
-		<MkTextarea v-model:value="users" v-else-if="src === 'users'">
-			<span>{{ $ts.users }}</span>
-			<template #desc>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
+		<MkTextarea v-model="users" v-else-if="src === 'users'">
+			<template #label>{{ $ts.users }}</template>
+			<template #caption>{{ $ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ $ts.addUser }}</button></template>
 		</MkTextarea>
-		<MkSwitch v-model:value="withReplies">{{ $ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model:value="keywords">
-			<span>{{ $ts.antennaKeywords }}</span>
-			<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
+		<MkSwitch v-model="withReplies">{{ $ts.withReplies }}</MkSwitch>
+		<MkTextarea v-model="keywords">
+			<template #label>{{ $ts.antennaKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
-		<MkTextarea v-model:value="excludeKeywords">
-			<span>{{ $ts.antennaExcludeKeywords }}</span>
-			<template #desc>{{ $ts.antennaKeywordsDescription }}</template>
+		<MkTextarea v-model="excludeKeywords">
+			<template #label>{{ $ts.antennaExcludeKeywords }}</template>
+			<template #caption>{{ $ts.antennaKeywordsDescription }}</template>
 		</MkTextarea>
-		<MkSwitch v-model:value="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model:value="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model:value="notify">{{ $ts.notifyAntenna }}</MkSwitch>
+		<MkSwitch v-model="caseSensitive">{{ $ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
 	</div>
-	<div class="_footer">
+	<div class="actions">
 		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
 	</div>
 </div>
 </template>
@@ -117,7 +116,7 @@ export default defineComponent({
 	methods: {
 		async saveAntenna() {
 			if (this.antenna.id == null) {
-				await os.api('antennas/create', {
+				await os.apiWithDialog('antennas/create', {
 					name: this.name,
 					src: this.src,
 					userListId: this.userListId,
@@ -132,7 +131,7 @@ export default defineComponent({
 				});
 				this.$emit('created');
 			} else {
-				await os.api('antennas/update', {
+				await os.apiWithDialog('antennas/update', {
 					antennaId: this.antenna.id,
 					name: this.name,
 					src: this.src,
@@ -146,9 +145,8 @@ export default defineComponent({
 					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
 					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
 				});
+				this.$emit('updated');
 			}
-
-			os.success();
 		},
 
 		async deleteAntenna() {
@@ -180,9 +178,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .shaynizk {
-	> .body {
-		max-height: 250px;
-		overflow: auto;
+	> .form {
+		padding: 32px;
+	}
+
+	> .actions {
+		padding: 24px 32px;
+		border-top: solid 0.5px var(--divider);
 	}
 }
 </style>

src/client/pages/my-antennas/index.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="ieepwinx _section">
-	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
 	<div class="_content">
-		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
-
-		<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
-			<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
+		<MkPagination :pagination="pagination" #default="{items}" ref="list">
+			<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
+				<div class="name">{{ antenna.name }}</div>
+			</MkA>
 		</MkPagination>
 	</div>
 </div>
@@ -16,14 +16,12 @@
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
-import XAntenna from './index.antenna.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		MkPagination,
 		MkButton,
-		XAntenna,
 	},
 
 	data() {
@@ -40,43 +38,34 @@ export default defineComponent({
 				endpoint: 'antennas/list',
 				limit: 10,
 			},
-			draft: null,
 		};
 	},
-
-	methods: {
-		create() {
-			this.draft = {
-				name: '',
-				src: 'all',
-				userListId: null,
-				userGroupId: null,
-				users: [],
-				keywords: [],
-				excludeKeywords: [],
-				withReplies: false,
-				caseSensitive: false,
-				withFile: false,
-				notify: false
-			};
-		},
-
-		onAntennaCreated() {
-			this.$refs.list.reload();
-			this.draft = null;
-		},
-
-		onAntennaDeleted() {
-			this.$refs.list.reload();
-		},
-	}
 });
 </script>
 
 <style lang="scss" scoped>
 .ieepwinx {
+	padding: 16px;
+
 	> .add {
 		margin: 0 auto 16px auto;
 	}
+
+	.ljoevbzj {
+		display: block;
+		padding: 16px;
+		margin-bottom: 8px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
+
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
+
+		> .name {
+			font-weight: bold;
+		}
+	}
 }
 </style>

src/client/pages/page-editor/els/page-editor.el.button.vue

@@ -3,9 +3,9 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._button.text }}</span></MkInput>
-		<MkSwitch v-model:value="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
-		<MkSelect v-model:value="value.action">
+		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
+		<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
+		<MkSelect v-model="value.action">
 			<template #label>{{ $ts._pages.blocks._button.action }}</template>
 			<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
 			<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
@@ -13,12 +13,12 @@
 			<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
 		</MkSelect>
 		<template v-if="value.action === 'dialog'">
-			<MkInput v-model:value="value.content"><span>{{ $ts._pages.blocks._button._action._dialog.content }}</span></MkInput>
+			<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model:value="value.event"><span>{{ $ts._pages.blocks._button._action._pushEvent.event }}</span></MkInput>
-			<MkInput v-model:value="value.message"><span>{{ $ts._pages.blocks._button._action._pushEvent.message }}</span></MkInput>
-			<MkSelect v-model:value="value.var">
+			<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
+			<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
+			<MkSelect v-model="value.var">
 				<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
 				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
 				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
@@ -31,7 +31,7 @@
 			</MkSelect>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model:value="value.fn"><span>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</span></MkInput>
+			<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
 		</template>
 	</section>
 </XContainer>

src/client/pages/page-editor/els/page-editor.el.canvas.vue

@@ -3,9 +3,18 @@
 	<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._canvas.id }}</span></MkInput>
-		<MkInput v-model:value="value.width" type="number"><span>{{ $ts._pages.blocks._canvas.width }}</span><template #suffix>px</template></MkInput>
-		<MkInput v-model:value="value.height" type="number"><span>{{ $ts._pages.blocks._canvas.height }}</span><template #suffix>px</template></MkInput>
+		<MkInput v-model="value.name">
+			<template #prefix><i class="fas fa-magic"></i></template>
+			<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
+		</MkInput>
+		<MkInput v-model="value.width" type="number">
+			<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
+			<template #suffix>px</template>
+		</MkInput>
+		<MkInput v-model="value.height" type="number">
+			<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
+			<template #suffix>px</template>
+		</MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.counter.vue

@@ -3,9 +3,16 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._counter.name }}</span></MkInput>
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._counter.text }}</span></MkInput>
-		<MkInput v-model:value="value.inc" type="number"><span>{{ $ts._pages.blocks._counter.inc }}</span></MkInput>
+		<MkInput v-model="value.name">
+			<template #prefix><i class="fas fa-magic"></i></template>
+			<template #label>{{ $ts._pages.blocks._counter.name }}</template>
+		</MkInput>
+		<MkInput v-model="value.text">
+			<template #label>{{ $ts._pages.blocks._counter.text }}</template>
+		</MkInput>
+		<MkInput v-model="value.inc" type="number">
+			<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
+		</MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.if.vue

@@ -8,7 +8,7 @@
 	</template>
 
 	<section class="romcojzs">
-		<MkSelect v-model:value="value.var">
+		<MkSelect v-model="value.var">
 			<template #label>{{ $ts._pages.blocks._if.variable }}</template>
 			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
 			<optgroup :label="$ts._pages.script.pageVariables">

src/client/pages/page-editor/els/page-editor.el.note.vue

@@ -3,11 +3,11 @@
 	<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="id">
-			<span>{{ $ts._pages.blocks._note.id }}</span>
-			<template #desc>{{ $ts._pages.blocks._note.idDescription }}</template>
+		<MkInput v-model="id">
+			<template #label>{{ $ts._pages.blocks._note.id }}</template>
+			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
 		</MkInput>
-		<MkSwitch v-model:value="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
+		<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
 
 		<XNote v-if="note && !value.detailed" v-model:note="note" :key="note.id + ':normal'" style="margin-bottom: 16px;"/>
 		<XNoteDetailed v-if="note && value.detailed" v-model:note="note" :key="note.id + ':detail'" style="margin-bottom: 16px;"/>

src/client/pages/page-editor/els/page-editor.el.number-input.vue

@@ -3,9 +3,16 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._numberInput.name }}</span></MkInput>
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._numberInput.text }}</span></MkInput>
-		<MkInput v-model:value="value.default" type="number"><span>{{ $ts._pages.blocks._numberInput.default }}</span></MkInput>
+		<MkInput v-model="value.name">
+			<template #prefix><i class="fas fa-magic"></i></template>
+			<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
+		</MkInput>
+		<MkInput v-model="value.text">
+			<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
+		</MkInput>
+		<MkInput v-model="value.default" type="number">
+			<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
+		</MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.post.vue

@@ -3,9 +3,9 @@
 	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
-		<MkTextarea v-model:value="value.text">{{ $ts._pages.blocks._post.text }}</MkTextarea>
-		<MkSwitch v-model:value="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $ts._pages.blocks._post.canvasId }}</span></MkInput>
+		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
+		<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
+		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.radio-button.vue

@@ -3,10 +3,10 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._radioButton.name }}</span></MkInput>
-		<MkInput v-model:value="value.title"><span>{{ $ts._pages.blocks._radioButton.title }}</span></MkInput>
-		<MkTextarea v-model:value="values"><span>{{ $ts._pages.blocks._radioButton.values }}</span></MkTextarea>
-		<MkInput v-model:value="value.default"><span>{{ $ts._pages.blocks._radioButton.default }}</span></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
+		<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
+		<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
+		<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.switch.vue

@@ -3,9 +3,9 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._switch.name }}</span></MkInput>
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._switch.text }}</span></MkInput>
-		<MkSwitch v-model:value="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
+		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
+		<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.text-input.vue

@@ -3,9 +3,9 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textInput.name }}</span></MkInput>
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textInput.text }}</span></MkInput>
-		<MkInput v-model:value="value.default" type="text"><span>{{ $ts._pages.blocks._textInput.default }}</span></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
+		<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/els/page-editor.el.textarea-input.vue

@@ -3,9 +3,9 @@
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model:value="value.name"><template #prefix><i class="fas fa-magic"></i></template><span>{{ $ts._pages.blocks._textareaInput.name }}</span></MkInput>
-		<MkInput v-model:value="value.text"><span>{{ $ts._pages.blocks._textareaInput.text }}</span></MkInput>
-		<MkTextarea v-model:value="value.default"><span>{{ $ts._pages.blocks._textareaInput.default }}</span></MkTextarea>
+		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
+		<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
 	</section>
 </XContainer>
 </template>

src/client/pages/page-editor/page-editor.script-block.vue

@@ -40,9 +40,9 @@
 		<input v-model="value.value"/>
 	</section>
 	<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<MkTextarea v-model:value="slots">
-			<span>{{ $ts._pages.script.blocks._fn.slots }}</span>
-			<template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
+		<MkTextarea v-model="slots">
+			<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
+			<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
 		</MkTextarea>
 		<XV v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
 	</section>

src/client/pages/page-editor/page-editor.vue

@@ -11,28 +11,28 @@
 	<MkContainer :foldable="true" :expanded="true" class="_gap">
 		<template #header><i class="fas fa-cog"></i> {{ $ts._pages.pageSetting }}</template>
 		<div style="padding: 16px;">
-			<MkInput v-model:value="title">
-				<span>{{ $ts._pages.title }}</span>
+			<MkInput v-model="title">
+				<template #label>{{ $ts._pages.title }}</template>
 			</MkInput>
 
-			<MkInput v-model:value="summary">
-				<span>{{ $ts._pages.summary }}</span>
+			<MkInput v-model="summary">
+				<template #label>{{ $ts._pages.summary }}</template>
 			</MkInput>
 
-			<MkInput v-model:value="name">
+			<MkInput v-model="name">
 				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-				<span>{{ $ts._pages.url }}</span>
+				<template #label>{{ $ts._pages.url }}</template>
 			</MkInput>
 
-			<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
+			<MkSwitch v-model="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
 
-			<MkSelect v-model:value="font">
+			<MkSelect v-model="font">
 				<template #label>{{ $ts._pages.font }}</template>
 				<option value="serif">{{ $ts._pages.fontSerif }}</option>
 				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
 			</MkSelect>
 
-			<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+			<MkSwitch v-model="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
 			<div class="eyeCatch">
 				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="fas fa-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
@@ -77,7 +77,7 @@
 	<MkContainer :foldable="true" :expanded="true" class="_gap">
 		<template #header><i class="fas fa-code"></i> {{ $ts.script }}</template>
 		<div>
-			<MkTextarea class="_code" v-model:value="script"/>
+			<MkTextarea class="_code" v-model="script"/>
 		</div>
 	</MkContainer>
 </div>

src/client/pages/reversi/game.setting.vue

@@ -57,9 +57,9 @@
 			</header>
 
 			<div>
-				<MkSwitch v-model:value="game.isLlotheo" @update:value="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch>
-				<MkSwitch v-model:value="game.loopedBoard" @update:value="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch>
-				<MkSwitch v-model:value="game.canPutEverywhere" @update:value="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch>
+				<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch>
+				<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch>
+				<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch>
 			</div>
 		</div>
 
@@ -70,7 +70,7 @@
 
 			<div>
 				<template v-for="item in form">
-					<MkSwitch v-if="item.type == 'switch'" v-model:value="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
+					<MkSwitch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
 
 					<div class="card" v-if="item.type == 'radio'" :key="item.id">
 						<header>

src/client/pages/room/room.vue

@@ -31,7 +31,7 @@
 			<MkButton @click="add()"><i class="fas fa-box-open"></i> {{ $ts._rooms.addFurniture }}</MkButton>
 		</div>
 		<div class="_content">
-			<MkSelect :value="roomType" @update:value="updateRoomType($event)">
+			<MkSelect :model-value="roomType" @update:modelValue="updateRoomType($event)">
 				<template #label>{{ $ts._rooms.roomType }}</template>
 				<option value="default">{{ $ts._rooms._roomType.default }}</option>
 				<option value="washitsu">{{ $ts._rooms._roomType.washitsu }}</option>

src/client/pages/settings/2fa.vue

@@ -20,7 +20,7 @@
 					</div>
 				</div>
 
-				<MkSwitch v-model:value="usePasswordLessLogin" @update:value="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch>
+				<MkSwitch v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin" v-if="$i.securityKeysList.length > 0">{{ $ts.passwordLessLogin }}</MkSwitch>
 
 				<MkInfo warn v-if="registration && registration.error">{{ $ts.error }} {{ registration.error }}</MkInfo>
 				<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ $ts._2fa.registerKey }}</MkButton>
@@ -32,8 +32,8 @@
 					</li>
 					<li v-if="registration.stage >= 1">
 						<MkForm :disabled="registration.stage != 1 || registration.saving">
-							<MkInput v-model:value="keyName" :max="30">
-								<span>{{ $ts.securityKeyName }}</span>
+							<MkInput v-model="keyName" :max="30">
+								<template #label>{{ $ts.securityKeyName }}</template>
 							</MkInput>
 							<MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton>
 							<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
@@ -56,7 +56,7 @@
 				</li>
 				<li>{{ $ts._2fa.step2 }}<br><img :src="data.qr"></li>
 				<li>{{ $ts._2fa.step3 }}<br>
-					<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $ts.token }}</MkInput>
+					<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false"><template #label>{{ $ts.token }}</template></MkInput>
 					<MkButton primary @click="submit">{{ $ts.done }}</MkButton>
 				</li>
 			</ol>

src/client/pages/test.vue

@@ -4,23 +4,23 @@
 		<div class="_card _gap">
 			<div class="_title">Dialog</div>
 			<div class="_content">
-				<MkInput v-model:value="dialogTitle">
-					<span>Title</span>
+				<MkInput v-model="dialogTitle">
+					<template #label>Title</template>
 				</MkInput>
-				<MkInput v-model:value="dialogBody">
-					<span>Body</span>
+				<MkInput v-model="dialogBody">
+					<template #label>Body</template>
 				</MkInput>
 				<MkRadio v-model="dialogType" value="info">Info</MkRadio>
 				<MkRadio v-model="dialogType" value="success">Success</MkRadio>
 				<MkRadio v-model="dialogType" value="warning">Warn</MkRadio>
 				<MkRadio v-model="dialogType" value="error">Error</MkRadio>
-				<MkSwitch v-model:value="dialogCancel">
+				<MkSwitch v-model="dialogCancel">
 					<span>With cancel button</span>
 				</MkSwitch>
-				<MkSwitch v-model:value="dialogCancelByBgClick">
+				<MkSwitch v-model="dialogCancelByBgClick">
 					<span>Can cancel by modal bg click</span>
 				</MkSwitch>
-				<MkSwitch v-model:value="dialogInput">
+				<MkSwitch v-model="dialogInput">
 					<span>With input field</span>
 				</MkSwitch>
 				<MkButton @click="showDialog()">Show</MkButton>
@@ -33,11 +33,11 @@
 		<div class="_card _gap">
 			<div class="_title">Form</div>
 			<div class="_content">
-				<MkInput v-model:value="formTitle">
-					<span>Title</span>
+				<MkInput v-model="formTitle">
+					<template #label>Title</template>
 				</MkInput>
-				<MkTextarea v-model:value="formForm">
-					<span>Form</span>
+				<MkTextarea v-model="formForm">
+					<template #label>Form</template>
 				</MkTextarea>
 				<MkButton @click="form()">Show</MkButton>
 			</div>
@@ -49,8 +49,8 @@
 		<div class="_card _gap">
 			<div class="_title">MFM</div>
 			<div class="_content">
-				<MkTextarea v-model:value="mfm">
-					<span>MFM</span>
+				<MkTextarea v-model="mfm">
+					<template #label>MFM</template>
 				</MkTextarea>
 			</div>
 			<div class="_content">
@@ -61,7 +61,7 @@
 		<div class="_card _gap">
 			<div class="_title">selectDriveFile</div>
 			<div class="_content">
-				<MkSwitch v-model:value="selectDriveFileMultiple">
+				<MkSwitch v-model="selectDriveFileMultiple">
 					<span>Multiple</span>
 				</MkSwitch>
 				<MkButton @click="selectDriveFile()">selectDriveFile</MkButton>
@@ -74,7 +74,7 @@
 		<div class="_card _gap">
 			<div class="_title">selectDriveFolder</div>
 			<div class="_content">
-				<MkSwitch v-model:value="selectDriveFolderMultiple">
+				<MkSwitch v-model="selectDriveFolderMultiple">
 					<span>Multiple</span>
 				</MkSwitch>
 				<MkButton @click="selectDriveFolder()">selectDriveFolder</MkButton>
@@ -97,14 +97,14 @@
 		<div class="_card _gap">
 			<div class="_title">Notification</div>
 			<div class="_content">
-				<MkInput v-model:value="notificationIconUrl">
-					<span>Icon URL</span>
+				<MkInput v-model="notificationIconUrl">
+					<template #label>Icon URL</template>
 				</MkInput>
-				<MkInput v-model:value="notificationHeader">
-					<span>Header</span>
+				<MkInput v-model="notificationHeader">
+					<template #label>Header</template>
 				</MkInput>
-				<MkTextarea v-model:value="notificationBody">
-					<span>Body</span>
+				<MkTextarea v-model="notificationBody">
+					<template #label>Body</template>
 				</MkTextarea>
 				<MkButton @click="createNotification()">createNotification</MkButton>
 			</div>

src/client/pages/timeline.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="cmuxhskf _root" v-hotkey.global="keymap">
-	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
-	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
-	<div class="tabs _block">
+	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
+	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
+	<div class="tabs">
 		<div class="left">
 			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><i class="fas fa-home"></i></button>
 			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><i class="fas fa-comments"></i></button>
@@ -20,7 +20,6 @@
 	</div>
 	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 	<XTimeline ref="tl"
-		class="_gap"
 		:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
 		:src="src"
 		:list="list ? list.id : null"
@@ -62,6 +61,7 @@ export default defineComponent({
 			queue: 0,
 			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.timeline,
+				subtitle: this.src === 'local' ? this.$ts._timelines.local : this.src === 'social' ? this.$ts._timelines.social : this.src === 'global' ? this.$ts._timelines.global : this.$ts._timelines.home,
 				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 				actions: [{
 					icon: 'fas fa-calendar-alt',
@@ -211,6 +211,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .cmuxhskf {
+	background: var(--bg);
+
 	> .new {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);

src/client/pages/user/clips.vue

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { userPage, acct } from '../../filters/user';
+import { userPage, acct } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/pages/user/follow-list.vue

@@ -12,7 +12,7 @@
 import { defineComponent } from 'vue';
 import MkUserInfo from '@client/components/user-info.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { userPage, acct } from '../../filters/user';
+import { userPage, acct } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/pages/user/gallery.vue

@@ -12,7 +12,7 @@
 import { defineComponent } from 'vue';
 import MkGalleryPostPreview from '@client/components/gallery-post-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { userPage, acct } from '../../filters/user';
+import { userPage, acct } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/pages/user/index.photos.vue

@@ -20,7 +20,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
-import notePage from '../../filters/note';
+import notePage from '@client/filters/note';
 import * as os from '@client/os';
 import MkContainer from '@client/components/ui/container.vue';
 import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';

src/client/pages/user/index.vue

@@ -1,9 +1,9 @@
 <template>
 <transition name="fade" mode="out-in">
 	<div class="ftskorzw wide" v-if="user && narrow === false">
-		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
+		<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
 
-		<div class="banner-container _gap" :style="style">
+		<div class="banner-container" :style="style">
 			<div class="banner" ref="banner" :style="style"></div>
 		</div>
 		<div class="contents">
@@ -276,6 +276,7 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.user ? {
 				title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
+				subtitle: `@${getAcct(this.user)}`,
 				userName: this.user,
 				avatar: this.user,
 				path: `/@${this.user.username}`,
@@ -313,7 +314,7 @@ export default defineComponent({
 
 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
-		this.narrow = true; //this.$el.clientWidth < 1000;
+		this.narrow = this.$el.clientWidth < 1000;
 	},
 
 	beforeUnmount() {
@@ -381,13 +382,10 @@ export default defineComponent({
 }
 
 .ftskorzw.wide {
-	max-width: 1150px;
-	margin: 0 auto;
 
 	> .banner-container {
 		position: relative;
-		height: 450px;
-		border-radius: 16px;
+		height: 300px;
 		overflow: hidden;
 		background-size: cover;
 		background-position: center;
@@ -404,6 +402,7 @@ export default defineComponent({
 
 	> .contents {
 		display: flex;
+		padding: 16px;
 
 		> .side {
 			width: 360px;
@@ -561,6 +560,7 @@ export default defineComponent({
 .ftskorzw.narrow {
 	box-sizing: border-box;
 	overflow: clip;
+	background: var(--bg);
 
 	> .punished {
 		font-size: 0.8em;

src/client/pages/user/pages.vue

@@ -10,7 +10,7 @@
 import { defineComponent } from 'vue';
 import MkPagePreview from '@client/components/page-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
-import { userPage, acct } from '../../filters/user';
+import { userPage, acct } from '@client/filters/user';
 
 export default defineComponent({
 	components: {

src/client/pages/welcome.setup.vue

@@ -3,13 +3,13 @@
 	<h1>Welcome to Misskey!</h1>
 	<div>
 		<p>{{ $ts.intro }}</p>
-		<MkInput v-model:value="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
-			<span>{{ $ts.username }}</span>
+		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
+			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</MkInput>
-		<MkInput v-model:value="password" type="password">
-			<span>{{ $ts.password }}</span>
+		<MkInput v-model="password" type="password">
+			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 		</MkInput>
 		<footer>

src/client/router.ts

@@ -4,85 +4,114 @@ import MkLoading from '@client/pages/_loading_.vue';
 import MkError from '@client/pages/_error_.vue';
 import MkTimeline from '@client/pages/timeline.vue';
 import { $i } from './account';
+import { ui } from '@client/config';
 
-const page = (path: string) => defineAsyncComponent({
-	loader: () => import(`./pages/${path}.vue`),
+const page = (path: string, ui?: string) => defineAsyncComponent({
+	loader: ui ? () => import(`./ui/${ui}/pages/${path}.vue`) : () => import(`./pages/${path}.vue`),
 	loadingComponent: MkLoading,
 	errorComponent: MkError,
 });
 
 let indexScrollPos = 0;
 
+const defaultRoutes = [
+	// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
+	{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
+	{ path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
+	{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
+	{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
+	{ path: '/@:acct/room', props: true, component: page('room/room') },
+	{ path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) },
+	{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
+	{ path: '/announcements', component: page('announcements') },
+	{ path: '/about', component: page('about') },
+	{ path: '/about-misskey', component: page('about-misskey') },
+	{ path: '/featured', component: page('featured') },
+	{ path: '/docs', component: page('docs') },
+	{ path: '/theme-editor', component: page('theme-editor') },
+	{ path: '/advanced-theme-editor', component: page('advanced-theme-editor') },
+	{ path: '/docs/:doc(.*)', component: page('doc'), props: route => ({ doc: route.params.doc }) },
+	{ path: '/explore', component: page('explore') },
+	{ path: '/explore/tags/:tag', props: true, component: page('explore') },
+	{ path: '/federation', component: page('federation') },
+	{ path: '/emojis', component: page('emojis') },
+	{ path: '/search', component: page('search') },
+	{ path: '/pages', name: 'pages', component: page('pages') },
+	{ path: '/pages/new', component: page('page-editor/page-editor') },
+	{ path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) },
+	{ path: '/gallery', component: page('gallery/index') },
+	{ path: '/gallery/new', component: page('gallery/edit') },
+	{ path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) },
+	{ path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) },
+	{ path: '/channels', component: page('channels') },
+	{ path: '/channels/new', component: page('channel-editor') },
+	{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
+	{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
+	{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
+	{ path: '/my/notifications', component: page('notifications') },
+	{ path: '/my/favorites', component: page('favorites') },
+	{ path: '/my/messages', component: page('messages') },
+	{ path: '/my/mentions', component: page('mentions') },
+	{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
+	{ path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) },
+	{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) },
+	{ path: '/my/drive', name: 'drive', component: page('drive') },
+	{ path: '/my/drive/folder/:folder', component: page('drive') },
+	{ path: '/my/follow-requests', component: page('follow-requests') },
+	{ path: '/my/lists', component: page('my-lists/index') },
+	{ path: '/my/lists/:list', component: page('my-lists/list') },
+	{ path: '/my/groups', component: page('my-groups/index') },
+	{ path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) },
+	{ path: '/my/antennas', component: page('my-antennas/index') },
+	{ path: '/my/antennas/create', component: page('my-antennas/create') },
+	{ path: '/my/antennas/:antennaId', component: page('my-antennas/edit'), props: true },
+	{ path: '/my/clips', component: page('my-clips/index') },
+	{ path: '/scratchpad', component: page('scratchpad') },
+	{ path: '/instance/:page(.*)?', component: page('instance/index'), props: route => ({ initialPage: route.params.page || null }) },
+	{ path: '/instance', component: page('instance/index') },
+	{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
+	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
+	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
+	{ path: '/user-ap-info/:user', component: page('user-ap-info'), props: route => ({ userId: route.params.user }) },
+	{ path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) },
+	{ path: '/games/reversi', component: page('reversi/index') },
+	{ path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) },
+	{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
+	{ path: '/api-console', component: page('api-console') },
+	{ path: '/preview', component: page('preview') },
+	{ path: '/test', component: page('test') },
+	{ path: '/auth/:token', component: page('auth') },
+	{ path: '/miauth/:session', component: page('miauth') },
+	{ path: '/authorize-follow', component: page('follow') },
+	{ path: '/share', component: page('share') },
+	{ path: '/:catchAll(.*)', component: page('not-found') }
+];
+
+const chatRoutes = [
+	{ path: '/timeline', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
+	{ path: '/timeline/home', component: page('timeline', 'chat'), props: route => ({ src: 'home' }) },
+	{ path: '/timeline/local', component: page('timeline', 'chat'), props: route => ({ src: 'local' }) },
+	{ path: '/timeline/social', component: page('timeline', 'chat'), props: route => ({ src: 'social' }) },
+	{ path: '/timeline/global', component: page('timeline', 'chat'), props: route => ({ src: 'global' }) },
+	{ path: '/channels/:channelId', component: page('channel', 'chat'), props: route => ({ channelId: route.params.channelId }) },
+];
+
+function margeRoutes(routes: any[]) {
+	const result = defaultRoutes;
+	for (const route of routes) {
+		const found = result.findIndex(x => x.path === route.path);
+		if (found > -1) {
+			result[found] = route;
+		} else {
+			result.unshift(route);
+		}
+	}
+	return result;
+}
+
 export const router = createRouter({
 	history: createWebHistory(),
-	routes: [
-		// NOTE: MkTimelineをdynamic importするとAsyncComponentWrapperが間に入るせいでkeep-aliveのコンポーネント指定が効かなくなる
-		{ path: '/', name: 'index', component: $i ? MkTimeline : page('welcome') },
-		{ path: '/@:acct/:page?', name: 'user', component: page('user/index'), props: route => ({ acct: route.params.acct, page: route.params.page || 'index' }) },
-		{ path: '/@:user/pages/:page', component: page('page'), props: route => ({ pageName: route.params.page, username: route.params.user }) },
-		{ path: '/@:user/pages/:pageName/view-source', component: page('page-editor/page-editor'), props: route => ({ initUser: route.params.user, initPageName: route.params.pageName }) },
-		{ path: '/@:acct/room', props: true, component: page('room/room') },
-		{ path: '/settings/:page(.*)?', name: 'settings', component: page('settings/index'), props: route => ({ initialPage: route.params.page || null }) },
-		{ path: '/reset-password/:token?', component: page('reset-password'), props: route => ({ token: route.params.token }) },
-		{ path: '/announcements', component: page('announcements') },
-		{ path: '/about', component: page('about') },
-		{ path: '/about-misskey', component: page('about-misskey') },
-		{ path: '/featured', component: page('featured') },
-		{ path: '/docs', component: page('docs') },
-		{ path: '/theme-editor', component: page('theme-editor') },
-		{ path: '/advanced-theme-editor', component: page('advanced-theme-editor') },
-		{ path: '/docs/:doc(.*)', component: page('doc'), props: route => ({ doc: route.params.doc }) },
-		{ path: '/explore', component: page('explore') },
-		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
-		{ path: '/search', component: page('search') },
-		{ path: '/pages', name: 'pages', component: page('pages') },
-		{ path: '/pages/new', component: page('page-editor/page-editor') },
-		{ path: '/pages/edit/:pageId', component: page('page-editor/page-editor'), props: route => ({ initPageId: route.params.pageId }) },
-		{ path: '/gallery', component: page('gallery/index') },
-		{ path: '/gallery/new', component: page('gallery/edit') },
-		{ path: '/gallery/:postId/edit', component: page('gallery/edit'), props: route => ({ postId: route.params.postId }) },
-		{ path: '/gallery/:postId', component: page('gallery/post'), props: route => ({ postId: route.params.postId }) },
-		{ path: '/channels', component: page('channels') },
-		{ path: '/channels/new', component: page('channel-editor') },
-		{ path: '/channels/:channelId/edit', component: page('channel-editor'), props: true },
-		{ path: '/channels/:channelId', component: page('channel'), props: route => ({ channelId: route.params.channelId }) },
-		{ path: '/clips/:clipId', component: page('clip'), props: route => ({ clipId: route.params.clipId }) },
-		{ path: '/my/notifications', component: page('notifications') },
-		{ path: '/my/favorites', component: page('favorites') },
-		{ path: '/my/messages', component: page('messages') },
-		{ path: '/my/mentions', component: page('mentions') },
-		{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
-		{ path: '/my/messaging/:user', component: page('messaging/messaging-room'), props: route => ({ userAcct: route.params.user }) },
-		{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room'), props: route => ({ groupId: route.params.group }) },
-		{ path: '/my/drive', name: 'drive', component: page('drive') },
-		{ path: '/my/drive/folder/:folder', component: page('drive') },
-		{ path: '/my/follow-requests', component: page('follow-requests') },
-		{ path: '/my/lists', component: page('my-lists/index') },
-		{ path: '/my/lists/:list', component: page('my-lists/list') },
-		{ path: '/my/groups', component: page('my-groups/index') },
-		{ path: '/my/groups/:group', component: page('my-groups/group'), props: route => ({ groupId: route.params.group }) },
-		{ path: '/my/antennas', component: page('my-antennas/index') },
-		{ path: '/my/clips', component: page('my-clips/index') },
-		{ path: '/scratchpad', component: page('scratchpad') },
-		{ path: '/instance/:page(.*)?', component: page('instance/index'), props: route => ({ initialPage: route.params.page || null }) },
-		{ path: '/instance', component: page('instance/index') },
-		{ path: '/notes/:note', name: 'note', component: page('note'), props: route => ({ noteId: route.params.note }) },
-		{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
-		{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
-		{ path: '/user-ap-info/:user', component: page('user-ap-info'), props: route => ({ userId: route.params.user }) },
-		{ path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) },
-		{ path: '/games/reversi', component: page('reversi/index') },
-		{ path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) },
-		{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
-		{ path: '/api-console', component: page('api-console') },
-		{ path: '/preview', component: page('preview') },
-		{ path: '/test', component: page('test') },
-		{ path: '/auth/:token', component: page('auth') },
-		{ path: '/miauth/:session', component: page('miauth') },
-		{ path: '/authorize-follow', component: page('follow') },
-		{ path: '/share', component: page('share') },
-		{ path: '/:catchAll(.*)', component: page('not-found') }
-	],
+	routes: margeRoutes(ui === 'chat' ? chatRoutes : []),
 	// なんかHacky
 	// 通常の使い方をすると scroll メソッドの behavior を設定できないため、自前で window.scroll するようにする
 	scrollBehavior(to) {

src/client/store.ts

@@ -198,6 +198,14 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false
 	},
+	postFormWithHashtags: {
+		where: 'device',
+		default: false
+	},
+	postFormHashtags: {
+		where: 'device',
+		default: ''
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期

src/client/style.scss

@@ -255,6 +255,7 @@ hr {
 	margin: var(--margin) 0;
 }
 
+// TODO: 廃止
 ._card {
 	@extend ._panel;
 
@@ -401,6 +402,25 @@ hr {
 	backdrop-filter: blur(15px);
 }
 
+._inputSplit {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+	grid-gap: 8px;
+	margin: 1em 0;
+
+	> * {
+		margin: 0 !important;
+	}
+}
+
+._inputNoTopMargin {
+	margin-top: 0 !important;
+}
+
+._inputNoBottomMargin {
+	margin-bottom: 0 !important;
+}
+
 ._table {
 	> ._row {
 		display: flex;

src/client/themes/_dark.json5

@@ -53,12 +53,13 @@
 		cwHoverBg: '#707b97',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
-		inputBorder: '#959da2',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		badge: '#31b1ce',
-		messageBg: ':lighten<5<@bg',
+		messageBg: '@bg',
 		success: '#86b300',
 		error: '#ec4137',
 		warn: '#ecb637',

src/client/themes/_light.json5

@@ -47,18 +47,19 @@
 		infoBg: '#e5f5ff',
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
-		infoWarnFg: '#573c08',
+		infoWarnFg: '#8f6e31',
 		cwBg: '#b1b9c1',
 		cwFg: '#fff',
 		cwHoverBg: '#bbc4ce',
 		buttonBg: 'rgba(0, 0, 0, 0.05)',
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
-		inputBorder: '#dae0e4',
+		inputBorder: 'rgba(0, 0, 0, 0.1)',
+		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
 		driveFolderBg: ':alpha<0.3<@accent',
 		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		badge: '#31b1ce',
-		messageBg: '@panel',
+		messageBg: '@bg',
 		success: '#86b300',
 		error: '#ec4137',
 		warn: '#ecb637',

src/client/themes/d-astro.json5

@@ -32,13 +32,14 @@
 		cwHoverBg: '#707b97',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
-		messageBg: ':lighten<5<@bg',
+		messageBg: '@bg',
 		navActive: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
 		navHoverFg: ':lighten<17<@fg',
 		dateLabelFg: '@fg',
-		inputBorder: '#959da2',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
 		acrylicPanel: ':alpha<0.5<@panel',