update linr

packages/client/.eslintrc.js

@@ -14,6 +14,18 @@ module.exports = {
 		"plugin:vue/vue3-recommended"
 	],
 	rules: {
+		"vue/attributes-order": ["error", {
+			"alphabetical": false
+		}],
+		"vue/no-use-v-if-with-v-for": ["error", {
+			"allowUsingIterationVar": false
+		}],
+		"vue/no-ref-as-operand": "error",
+		"vue/no-multi-spaces": ["error", {
+			"ignoreProperties": false
+		}],
+		"vue/no-v-html": "error",
+		"vue/order-in-components": "error",
 		"vue/html-indent": ["warn", "tab", {
 			"attribute": 1,
 			"baseIndent": 0,

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

@@ -16,7 +16,7 @@
 			</MkTextarea>
 		</div>
 		<div class="_section">
-			<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $ts.send }}</MkButton>
+			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ $ts.send }}</MkButton>
 		</div>
 	</div>
 </XWindow>

packages/client/src/components/analog-clock.vue

@@ -1,11 +1,11 @@
 <template>
 <svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
 	<circle v-for="(angle, i) in graduations"
+					:key="i"
 					:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
 					:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
 					:r="i % 5 == 0 ? 0.125 : 0.05"
 					:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
-					:key="i"
 	/>
 
 	<line

packages/client/src/components/autocomplete.vue

@@ -1,31 +1,31 @@
 <template>
 <div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
-	<ol class="users" ref="suggests" v-if="type === 'user'">
+	<ol v-if="type === 'user'" ref="suggests" class="users">
-		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
+		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
 			<img class="avatar" :src="user.avatarUrl"/>
 			<span class="name">
-				<MkUserName :user="user" :key="user.id"/>
+				<MkUserName :key="user.id" :user="user"/>
 			</span>
 			<span class="username">@{{ acct(user) }}</span>
 		</li>
-		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $ts.selectUser }}</li>
+		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ $ts.selectUser }}</li>
 	</ol>
-	<ol class="hashtags" ref="suggests" v-else-if="hashtags.length > 0">
+	<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
-		<li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">
+		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
 			<span class="name">{{ hashtag }}</span>
 		</li>
 	</ol>
-	<ol class="emojis" ref="suggests" v-else-if="emojis.length > 0">
+	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
+		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
+			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span class="emoji" v-else-if="!$store.state.useOsNativeEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span v-else-if="!$store.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
-			<span class="emoji" v-else>{{ emoji.emoji }}</span>
+			<span v-else class="emoji">{{ emoji.emoji }}</span>
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
+			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
-	<ol class="mfmTags" ref="suggests" v-else-if="mfmTags.length > 0">
+	<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
-		<li v-for="tag in mfmTags" @click="complete(type, tag)" @keydown="onKeydown" tabindex="-1">
+		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
 			<span class="tag">{{ tag }}</span>
 		</li>
 	</ol>

packages/client/src/components/channel-follow-button.vue

@@ -1,8 +1,8 @@
 <template>
 <button class="hdcaacmi _button"
 	:class="{ wait, active: isFollowing, full }"
-	@click="onClick"
 	:disabled="wait"
+	@click="onClick"
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">

packages/client/src/components/channel-preview.vue

@@ -44,6 +44,11 @@ export default defineComponent({
 		},
 	},
 
+	data() {
+		return {
+		};
+	},
+
 	computed: {
 		bannerStyle() {
 			if (this.channel.bannerUrl) {
@@ -53,11 +58,6 @@ export default defineComponent({
 			}
 		}
 	},
-
-	data() {
-		return {
-		};
-	},
 });
 </script>
 

packages/client/src/components/code-core.vue

@@ -1,6 +1,6 @@
 <template>
-<code v-if="inline" v-html="html" :class="`language-${prismLang}`"></code>
+<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code v-html="html" :class="`language-${prismLang}`"></code></pre>
+<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
 </template>
 
 <script lang="ts">

packages/client/src/components/debobigego/base.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="rbusrurv" :class="{ wide: forceWide }" v-size="{ max: [400] }">
+<div v-size="{ max: [400] }" class="rbusrurv" :class="{ wide: forceWide }">
 	<slot></slot>
 </div>
 </template>

packages/client/src/components/debobigego/group.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="vrtktovg _debobigegoItem _debobigegoNoConcat" v-size="{ max: [500] }" v-sticky-container>
+<div v-size="{ max: [500] }" v-sticky-container class="vrtktovg _debobigegoItem _debobigegoNoConcat">
 	<div class="_debobigegoLabel"><slot name="label"></slot></div>
-	<div class="main _debobigego_group" ref="child">
+	<div ref="child" class="main _debobigego_group">
 		<slot></slot>
 	</div>
 	<div class="_debobigegoCaption"><slot name="caption"></slot></div>

packages/client/src/components/debobigego/input.vue

@@ -2,12 +2,12 @@
 <FormGroup class="_debobigegoItem">
 	<template #label><slot></slot></template>
 	<div class="ztzhwixg _debobigegoItem" :class="{ inline, disabled }">
-		<div class="icon" ref="icon"><slot name="icon"></slot></div>
+		<div ref="icon" class="icon"><slot name="icon"></slot></div>
 		<div class="input _debobigegoPanel">
-			<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
 			<input ref="inputEl"
-				:type="type"
 				v-model="v"
+				:type="type"
 				:disabled="disabled"
 				:required="required"
 				:readonly="readonly"
@@ -16,21 +16,21 @@
 				:autocomplete="autocomplete"
 				:spellcheck="spellcheck"
 				:step="step"
+				:list="id"
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="onKeydown($event)"
 				@input="onInput"
-				:list="id"
 			>
-			<datalist :id="id" v-if="datalist">
+			<datalist v-if="datalist" :id="id">
 				<option v-for="data in datalist" :value="data"/>
 			</datalist>
-			<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+			<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
 		</div>
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 

packages/client/src/components/debobigego/link.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="qmfkfnzi _debobigegoItem">
-	<a class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank" v-if="external">
+	<a v-if="external" class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">
@@ -8,7 +8,7 @@
 			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
-	<MkA class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
+	<MkA v-else class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">

packages/client/src/components/debobigego/object-view.vue

@@ -3,8 +3,8 @@
 	<template #label><slot></slot></template>
 	<div class="drooglns _debobigegoItem" :class="{ tall }">
 		<div class="input _debobigegoPanel">
-			<textarea class="_monospace"
+			<textarea v-model="v"
-				v-model="v"
+				class="_monospace"
 				readonly
 				:spellcheck="false"
 			></textarea>

packages/client/src/components/debobigego/pagination.vue

@@ -2,10 +2,10 @@
 <FormGroup class="uljviswt _debobigegoItem">
 	<template #label><slot name="label"></slot></template>
 	<slot :items="items"></slot>
-	<div class="empty" v-if="empty" key="_empty_">
+	<div v-if="empty" key="_empty_" class="empty">
 		<slot name="empty"></slot>
 	</div>
-	<FormButton v-show="more" class="button" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+	<FormButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 		<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 		<template v-if="moreFetching"><MkLoading inline/></template>
 	</FormButton>

packages/client/src/components/debobigego/range.vue

@@ -3,9 +3,9 @@
 	<div class="_debobigegoLabel"><slot name="label"></slot></div>
 	<div class="_debobigegoPanel main">
 		<input
-			type="range"
 			ref="input"
 			v-model="v"
+			type="range"
 			:disabled="disabled"
 			:min="min"
 			:max="max"

packages/client/src/components/debobigego/select.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="yrtfrpux _debobigegoItem" :class="{ disabled, inline }">
 	<div class="_debobigegoLabel"><slot name="label"></slot></div>
-	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div ref="icon" class="icon"><slot name="icon"></slot></div>
 	<div class="input _debobigegoPanel _debobigegoClickable" @click="focus">
-		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<div ref="prefix" class="prefix"><slot name="prefix"></slot></div>
 		<select ref="input"
 			v-model="v"
 			:required="required"

packages/client/src/components/debobigego/suspense.vue

@@ -1,6 +1,6 @@
 <template>
 <transition name="fade" mode="out-in">
-	<div class="_debobigegoItem" v-if="pending">
+	<div v-if="pending" class="_debobigegoItem">
 		<div class="_debobigegoPanel">
 			<MkLoading/>
 		</div>
@@ -8,10 +8,10 @@
 	<div v-else-if="resolved" class="_debobigegoItem">
 		<slot :result="result"></slot>
 	</div>
-	<div class="_debobigegoItem" v-else>
+	<div v-else class="_debobigegoItem">
 		<div class="_debobigegoPanel eiurkvay">
 			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
-			<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
+			<MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
 		</div>
 	</div>
 </transition>

packages/client/src/components/debobigego/switch.vue

@@ -7,12 +7,12 @@
 		@click.prevent="toggle"
 	>
 		<input
-			type="checkbox"
 			ref="input"
+			type="checkbox"
 			:disabled="disabled"
 			@keydown.enter="toggle"
 		>
-		<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+		<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
 			<span class="handle"></span>
 		</span>
 		<span class="label">

packages/client/src/components/debobigego/textarea.vue

@@ -3,8 +3,8 @@
 	<template #label><slot></slot></template>
 	<div class="rivhosbp _debobigegoItem" :class="{ tall, pre }">
 		<div class="input _debobigegoPanel">
-			<textarea ref="input" :class="{ code, _monospace: code }"
+			<textarea ref="input" v-model="v"
-				v-model="v"
+				:class="{ code, _monospace: code }"
 				:required="required"
 				:readonly="readonly"
 				:pattern="pattern"
@@ -18,7 +18,7 @@
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 

packages/client/src/components/debobigego/tuple.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wthhikgt _debobigegoItem" v-size="{ max: [500] }">
+<div v-size="{ max: [500] }" class="wthhikgt _debobigegoItem">
 	<slot></slot>
 </div>
 </template>

packages/client/src/components/dialog.vue

@@ -1,10 +1,10 @@
 <template>
 <MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
 	<div class="mk-dialog">
-		<div class="icon" v-if="icon">
+		<div v-if="icon" class="icon">
 			<i :class="icon"></i>
 		</div>
-		<div class="icon" v-else-if="!input && !select" :class="type">
+		<div v-else-if="!input && !select" class="icon" :class="type">
 			<i v-if="type === 'success'" class="fas fa-check"></i>
 			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
 			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
@@ -13,7 +13,7 @@
 			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
-		<div class="body" v-if="text"><Mfm :text="text"/></div>
+		<div v-if="text" class="body"><Mfm :text="text"/></div>
 		<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">
@@ -25,12 +25,12 @@
 				</optgroup>
 			</template>
 		</MkSelect>
-		<div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
+		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
-			<MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
+			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
-			<MkButton inline @click="cancel" v-if="showCancelButton || input || select">{{ $ts.cancel }}</MkButton>
+			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ $ts.cancel }}</MkButton>
 		</div>
-		<div class="buttons" v-if="actions">
+		<div v-if="actions" class="buttons">
-			<MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
+			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
 		</div>
 	</div>
 </MkModal>

packages/client/src/components/drive-file-thumbnail.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="zdjebgpv" ref="thumbnail">
+<div ref="thumbnail" class="zdjebgpv">
 	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
 	<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
 	<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>

packages/client/src/components/drive-select-dialog.vue

@@ -13,7 +13,7 @@
 		{{ multiple ? ((type === 'file') ? $ts.selectFiles : $ts.selectFolders) : ((type === 'file') ? $ts.selectFile : $ts.selectFolder) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
-	<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
+	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
 </XModalWindow>
 </template>
 

packages/client/src/components/drive.file.vue

@@ -1,22 +1,22 @@
 <template>
 <div class="ncvczrfv"
 	:class="{ isSelected }"
+	draggable="true"
+	:title="title"
 	@click="onClick"
 	@contextmenu.stop="onContextmenu"
-	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
-	:title="title"
 >
-	<div class="label" v-if="$i.avatarId == file.id">
+	<div v-if="$i.avatarId == file.id" class="label">
 		<img src="/client-assets/label.svg"/>
 		<p>{{ $ts.avatar }}</p>
 	</div>
-	<div class="label" v-if="$i.bannerId == file.id">
+	<div v-if="$i.bannerId == file.id" class="label">
 		<img src="/client-assets/label.svg"/>
 		<p>{{ $ts.banner }}</p>
 	</div>
-	<div class="label red" v-if="file.isSensitive">
+	<div v-if="file.isSensitive" class="label red">
 		<img src="/client-assets/label-red.svg"/>
 		<p>{{ $ts.nsfw }}</p>
 	</div>
@@ -25,7 +25,7 @@
 
 	<p class="name">
 		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
 	</p>
 </div>
 </template>

packages/client/src/components/drive.folder.vue

@@ -1,6 +1,8 @@
 <template>
 <div class="rghtznwe"
 	:class="{ draghover }"
+	draggable="true"
+	:title="title"
 	@click="onClick"
 	@contextmenu.stop="onContextmenu"
 	@mouseover="onMouseover"
@@ -9,17 +11,15 @@
 	@dragenter.prevent="onDragenter"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
-	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
-	:title="title"
 >
 	<p class="name">
 		<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
 		<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
 		{{ folder.name }}
 	</p>
-	<p class="upload" v-if="$store.state.uploadFolder == folder.id">
+	<p v-if="$store.state.uploadFolder == folder.id" class="upload">
 		{{ $ts.uploadFolder }}
 	</p>
 	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>

packages/client/src/components/drive.vue

@@ -7,33 +7,33 @@
 				<span class="separator"><i class="fas fa-angle-right"></i></span>
 				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
+			<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
-			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
+			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
 		</div>
-		<button @click="showMenu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+		<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 	</nav>
-	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
+	<div ref="main" class="main"
-		ref="main"
+		:class="{ uploading: uploadings.length > 0, fetching }"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
 		@contextmenu.stop="onContextmenu"
 	>
-		<div class="contents" ref="contents">
+		<div ref="contents" class="contents">
-			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
+			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
-				<XFolder v-for="(f, i) in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder" v-anim="i"/>
+				<XFolder v-for="(f, i) in folders" :key="f.id" v-anim="i" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
+				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton ref="moreFolders" v-if="moreFolders">{{ $ts.loadMore }}</MkButton>
+				<MkButton v-if="moreFolders" ref="moreFolders">{{ $ts.loadMore }}</MkButton>
 			</div>
-			<div class="files" ref="filesContainer" v-show="files.length > 0">
+			<div v-show="files.length > 0" ref="filesContainer" class="files">
-				<XFile v-for="(file, i) in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile" v-anim="i"/>
+				<XFile v-for="(file, i) in files" :key="file.id" v-anim="i" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
+				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $ts.loadMore }}</MkButton>
+				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ $ts.loadMore }}</MkButton>
 			</div>
-			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
+			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
 				<p v-if="!draghover && folder == null"><strong>{{ $ts.emptyDrive }}</strong><br/>{{ $t('empty-drive-description') }}</p>
 				<p v-if="!draghover && folder != null">{{ $ts.emptyFolder }}</p>
@@ -41,7 +41,7 @@
 		</div>
 		<MkLoading v-if="fetching"/>
 	</div>
-	<div class="dropzone" v-if="draghover"></div>
+	<div v-if="draghover" class="dropzone"></div>
 	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
 </div>
 </template>

packages/client/src/components/emoji-picker-dialog.vue

@@ -1,6 +1,6 @@
 <template>
-<MkPopup ref="popup" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" #default="{point}">
+<MkPopup ref="popup" #default="{point}" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.popup.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
-	<MkEmojiPicker class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
+	<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ pointer: point === 'top' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
 </MkPopup>
 </template>
 

packages/client/src/components/emoji-picker.section.vue

@@ -5,9 +5,9 @@
 	</header>
 	<div v-if="shown">
 		<button v-for="emoji in emojis"
+			:key="emoji"
 			class="_button"
 			@click="chosen(emoji, $event)"
-			:key="emoji"
 		>
 			<MkEmoji :emoji="emoji" :normal="true"/>
 		</button>

packages/client/src/components/emoji-picker.vue

@@ -1,15 +1,15 @@
 <template>
 <div class="omfetrab" :class="['w' + width, 'h' + height, { big }]">
-	<input ref="search" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
+	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
-	<div class="emojis" ref="emojis">
+	<div ref="emojis" class="emojis">
 		<section class="result">
 			<div v-if="searchResultCustom.length > 0">
 				<button v-for="emoji in searchResultCustom"
+					:key="emoji"
 					class="_button"
 					:title="emoji.name"
-					@click="chosen(emoji, $event)"
-					:key="emoji"
 					tabindex="0"
+					@click="chosen(emoji, $event)"
 				>
 					<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
 					<img v-else :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
@@ -17,25 +17,25 @@
 			</div>
 			<div v-if="searchResultUnicode.length > 0">
 				<button v-for="emoji in searchResultUnicode"
+					:key="emoji.name"
 					class="_button"
 					:title="emoji.name"
-					@click="chosen(emoji, $event)"
-					:key="emoji.name"
 					tabindex="0"
+					@click="chosen(emoji, $event)"
 				>
 					<MkEmoji :emoji="emoji.char"/>
 				</button>
 			</div>
 		</section>
 
-		<div class="index" v-if="tab === 'index'">
+		<div v-if="tab === 'index'" class="index">
 			<section v-if="showPinned">
 				<div>
 					<button v-for="emoji in pinned"
-						class="_button"
-						@click="chosen(emoji, $event)"
-						tabindex="0"
 						:key="emoji"
+						class="_button"
+						tabindex="0"
+						@click="chosen(emoji, $event)"
 					>
 						<MkEmoji :emoji="emoji" :normal="true"/>
 					</button>
@@ -46,9 +46,9 @@
 				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
 				<div>
 					<button v-for="emoji in $store.state.recentlyUsedEmojis"
+						:key="emoji"
 						class="_button"
 						@click="chosen(emoji, $event)"
-						:key="emoji"
 					>
 						<MkEmoji :emoji="emoji" :normal="true"/>
 					</button>

packages/client/src/components/featured-photos.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="xfbouadm" v-if="meta" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
 </template>
 
 <script lang="ts">

packages/client/src/components/follow-button.vue

@@ -1,8 +1,8 @@
 <template>
 <button class="kpoogebi _button"
 	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
-	@click="onClick"
 	:disabled="wait"
+	@click="onClick"
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">

packages/client/src/components/forgot-password.vue

@@ -7,14 +7,14 @@
 >
 	<template #header>{{ $ts.forgotPassword }}</template>
 
-	<form class="bafeceda" @submit.prevent="onSubmit" v-if="$instance.enableEmail">
+	<form v-if="$instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
 		<div class="main _formRoot">
-			<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
+			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
 				<template #label>{{ $ts.username }}</template>
 				<template #prefix>@</template>
 			</MkInput>
 
-			<MkInput class="_formBlock" v-model="email" type="email" spellcheck="false" required>
+			<MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
 				<template #label>{{ $ts.emailAddress }}</template>
 				<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
 			</MkInput>

packages/client/src/components/form-dialog.vue

@@ -32,11 +32,11 @@
 			</FormSwitch>
 			<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-				<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
+				<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
 			</FormSelect>
 			<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]">
 				<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-				<option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
+				<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
 			</FormRadios>
 			<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>

packages/client/src/components/form/input.vue

@@ -2,10 +2,10 @@
 <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>
+		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
 		<input ref="inputEl"
-			:type="type"
 			v-model="v"
+			:type="type"
 			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
@@ -14,20 +14,20 @@
 			:autocomplete="autocomplete"
 			:spellcheck="spellcheck"
 			:step="step"
+			:list="id"
 			@focus="focused = true"
 			@blur="focused = false"
 			@keydown="onKeydown($event)"
 			@input="onInput"
-			:list="id"
 		>
-		<datalist :id="id" v-if="datalist">
+		<datalist v-if="datalist" :id="id">
 			<option v-for="data in datalist" :value="data"/>
 		</datalist>
-		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+		<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
 	</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>
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 

packages/client/src/components/form/range.vue

@@ -3,9 +3,9 @@
 	<div class="icon"><slot name="icon"></slot></div>
 	<span class="label"><slot name="label"></slot></span>
 	<input
-		type="range"
 		ref="input"
 		v-model="v"
+		type="range"
 		:disabled="disabled"
 		:min="min"
 		:max="max"

packages/client/src/components/form/section.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="vrtktovh" v-size="{ max: [500] }" v-sticky-container>
+<div v-size="{ max: [500] }" v-sticky-container class="vrtktovh">
 	<div class="label"><slot name="label"></slot></div>
 	<div class="main">
 		<slot></slot>

packages/client/src/components/form/select.vue

@@ -1,10 +1,10 @@
 <template>
 <div class="vblkjoeq">
 	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick" ref="container">
+	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
-		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select class="select" ref="inputEl"
+		<select ref="inputEl" v-model="v"
-			v-model="v"
+			class="select"
 			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
@@ -15,11 +15,11 @@
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
+		<div ref="suffixEl" class="suffix"><i class="fas fa-chevron-down"></i></div>
 	</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>
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 

packages/client/src/components/form/switch.vue

@@ -8,12 +8,12 @@
 	@click.prevent="toggle"
 >
 	<input
-		type="checkbox"
 		ref="input"
+		type="checkbox"
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+	<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
 		<span class="handle"></span>
 	</span>
 	<span class="label">

packages/client/src/components/form/textarea.vue

@@ -3,8 +3,8 @@
 	<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"
+			:class="{ code, _monospace: code }"
 			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
@@ -20,7 +20,7 @@
 	</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>
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>
 

packages/client/src/components/global/acct.vue

@@ -1,7 +1,7 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span class="host" v-if="user.host || detail || $store.state.showFullAcct">@{{ user.host || host }}</span>
+	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
 </span>
 </template>
 

packages/client/src/components/global/ad.vue

@@ -1,12 +1,12 @@
 <template>
-<div class="qiivuoyo" v-if="ad">
+<div v-if="ad" class="qiivuoyo">
-	<div class="main" :class="ad.place" v-if="!showMenu">
+	<div v-if="!showMenu" class="main" :class="ad.place">
 		<a :href="ad.url" target="_blank">
 			<img :src="ad.imageUrl">
 			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle"></span></button>
 		</a>
 	</div>
-	<div class="menu" v-else>
+	<div v-else class="menu">
 		<div class="body">
 			<div>Ads by {{ host }}</div>
 			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->

packages/client/src/components/global/avatar.vue

@@ -1,9 +1,9 @@
 <template>
-<span class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :title="acct(user)" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
-<MkA class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat, square: $store.state.squareAvatars }" :to="userPage(user)" :title="acct(user)" :target="target">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>

packages/client/src/components/global/error.vue

@@ -3,7 +3,7 @@
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
-		<MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton>
+		<MkButton class="button" @click="() => $emit('retry')">{{ $ts.retry }}</MkButton>
 	</div>
 </transition>
 </template>

packages/client/src/components/global/header.vue

@@ -1,24 +1,24 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
+<div ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
 	<template v-if="info">
-		<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
+		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
 			<MkAvatar v-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
 			<i v-else-if="info.icon" class="icon" :class="info.icon"></i>
 
 			<div class="title">
 				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
 				<div v-else-if="info.title" class="title">{{ info.title }}</div>
-				<div class="subtitle" v-if="!narrow && info.subtitle">
+				<div v-if="!narrow && info.subtitle" class="subtitle">
 					{{ info.subtitle }}
 				</div>
-				<div class="subtitle activeTab" v-if="narrow && hasTabs">
+				<div v-if="narrow && hasTabs" class="subtitle activeTab">
 					{{ info.tabs.find(tab => tab.active)?.title }}
 					<i class="chevron fas fa-chevron-down"></i>
 				</div>
 			</div>
 		</div>
-		<div class="tabs" v-if="!narrow || hideTitle">
+		<div v-if="!narrow || hideTitle" class="tabs">
-			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+			<button v-for="tab in info.tabs" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.active }" @click="tab.onClick">
 				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
 				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
 			</button>
@@ -27,11 +27,11 @@
 	<div class="buttons right">
 		<template v-if="info && info.actions && !narrow">
 			<template v-for="action in info.actions">
-				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+				<button v-else v-tooltip="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
 			</template>
 		</template>
-		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+		<button v-if="shouldShowMenu" v-tooltip="$ts.menu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag"><i class="fas fa-ellipsis-h"></i></button>
 	</div>
 </div>
 </template>

packages/client/src/components/global/url.vue

@@ -7,12 +7,12 @@
 	<template v-if="!self">
 		<span class="schema">{{ schema }}//</span>
 		<span class="hostname">{{ hostname }}</span>
-		<span class="port" v-if="port != ''">:{{ port }}</span>
+		<span v-if="port != ''" class="port">:{{ port }}</span>
 	</template>
 	<template v-if="pathname === '/' && self">
 		<span class="self">{{ hostname }}</span>
 	</template>
-	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
+	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
 	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>

packages/client/src/components/google.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-google">
-	<input type="search" v-model="query" :placeholder="q">
+	<input v-model="query" type="search" :placeholder="q">
 	<button @click="search"><i class="fas fa-search"></i> {{ $ts.search }}</button>
 </div>
 </template>

packages/client/src/components/img-with-blurhash.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="xubzgfgb" :class="{ cover }" :title="title">
-	<canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
+	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
 	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>

packages/client/src/components/launch-pad.vue

@@ -3,12 +3,12 @@
 	<div class="szkkfdyq _popup">
 		<div class="main">
 			<template v-for="item in items">
-				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }" v-click-anime>
+				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
-				<MkA v-else :to="item.to" @click.passive="close()" v-click-anime>
+				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
 					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
@@ -16,15 +16,15 @@
 			</template>
 		</div>
 		<div class="sub">
-			<a href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()" v-click-anime>
+			<a v-click-anime href="https://misskey-hub.net/help.html" target="_blank" @click.passive="close()">
 				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ $ts.help }}</div>
 			</a>
-			<MkA to="/about" @click.passive="close()" v-click-anime>
+			<MkA v-click-anime to="/about" @click.passive="close()">
 				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
 			</MkA>
-			<MkA to="/about-misskey" @click.passive="close()" v-click-anime>
+			<MkA v-click-anime to="/about-misskey" @click.passive="close()">
 				<img src="/static-assets/favicon.png" class="icon"/>
 				<div class="text">{{ $ts.aboutMisskey }}</div>
 			</MkA>

packages/client/src/components/link.vue

@@ -1,8 +1,8 @@
 <template>
 <component :is="self ? 'MkA' : 'a'" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+	:title="url"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
-	:title="url"
 >
 	<slot></slot>
 	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>

packages/client/src/components/media-banner.vue

@@ -1,20 +1,20 @@
 <template>
 <div class="mk-media-banner">
-	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
 		<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
 		<b>{{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
-	<div class="audio" v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'">
+	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio class="audio"
+		<audio ref="audio"
+			class="audio"
 			:src="media.url"
 			:title="media.name"
 			controls
-			ref="audio"
+			preload="metadata"
-			@volumechange="volumechange"
+			@volumechange="volumechange" />
-			preload="metadata" />
 	</div>
-	<a class="download" v-else
+	<a v-else class="download"
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"

packages/client/src/components/media-caption.vue

@@ -7,9 +7,9 @@
 						<Mfm v-if="title" class="title" :text="title"/>
 						<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
 					</header>
-					<textarea autofocus v-model="inputValue" :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
+					<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-					<div class="buttons" v-if="(showOkButton || showCancelButton)">
+					<div v-if="(showOkButton || showCancelButton)" class="buttons">
-						<MkButton inline @click="ok" primary :disabled="remainingLength < 0">{{ $ts.ok }}</MkButton>
+						<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
 						<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
 					</div>
 				</div>

packages/client/src/components/media-image.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="qjewsnkg" v-if="hide" @click="hide = false">
+<div v-if="hide" class="qjewsnkg" @click="hide = false">
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
 	<div class="text">
 		<div>
@@ -8,13 +8,13 @@
 		</div>
 	</div>
 </div>
-<div class="gqnyydlz" :style="{ background: color }" v-else>
+<div v-else class="gqnyydlz" :style="{ background: color }">
 	<a
 		:href="image.url"
 		:title="image.name"
 	>
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
-		<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
+		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 	</a>
 	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>

packages/client/src/components/media-list.vue

@@ -1,11 +1,11 @@
 <template>
 <div class="hoawjimk">
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
+	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
-		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="gallery">
+		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
 			<template v-for="media in mediaList">
-				<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
-				<XImage class="image" :data-id="media.id" :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
 			</template>
 		</div>
 	</div>

packages/client/src/components/media-video.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
+<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
 	<div>
 		<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 </div>
-<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
+<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
 	<video
 		:poster="video.thumbnailUrl"
 		:title="video.name"

packages/client/src/components/mention.vue

@@ -1,9 +1,9 @@
 <template>
-<MkA v-if="url.startsWith('/')" class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" :style="{ background: bg }">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="ldlomzub" :class="{ isMe }" :to="url" :style="{ background: bg }">
 	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
-		<span class="host" v-if="(host != localHost) || $store.state.showFullAcct">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
 <a v-else class="ldlomzub" :href="url" target="_blank" rel="noopener" :style="{ background: bg }">

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

@@ -2,7 +2,7 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
 			<span v-if="pageInfo" class="title">
 				<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>

packages/client/src/components/note-detailed.vue

@@ -1,36 +1,36 @@
 <template>
 <div
-	class="lxwezrsl _block"
 	v-if="!muted"
 	v-show="!isDeleted"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
+	class="lxwezrsl _block"
+	:tabindex="!isDeleted ? '-1' : null"
+	:class="{ renote: isRenote }"
 >
-	<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
+	<XSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
-	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
+	<XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div class="renote" v-if="isRenote">
+	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
-				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
 					<MkUserName :user="note.user"/>
 				</MkA>
 			</template>
 		</I18n>
 		<div class="info">
-			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
+			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
 				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
-			<span class="visibility" v-if="note.visibility !== 'public'">
+			<span v-if="note.visibility !== 'public'" class="visibility">
 				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
 				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+			<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -38,18 +38,18 @@
 			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
 			<div class="body">
 				<div class="top">
-					<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">
+					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
 						<MkUserName :user="appearNote.user"/>
 					</MkA>
-					<span class="is-bot" v-if="appearNote.user.isBot">bot</span>
+					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
-					<span class="admin" v-if="appearNote.user.isAdmin"><i class="fas fa-bookmark"></i></span>
+					<span v-if="appearNote.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></span>
-					<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><i class="far fa-bookmark"></i></span>
+					<span v-if="!appearNote.user.isAdmin && appearNote.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></span>
-					<span class="visibility" v-if="appearNote.visibility !== 'public'">
+					<span v-if="appearNote.visibility !== 'public'" class="visibility">
 						<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
 						<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
 						<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
 					</span>
-					<span class="localOnly" v-if="appearNote.localOnly"><i class="fas fa-biohazard"></i></span>
+					<span v-if="appearNote.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
 				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@@ -61,26 +61,26 @@
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
-				<div class="content" v-show="appearNote.cw == null || showContent">
+				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<a class="rp" v-if="appearNote.renote != null">RN:</a>
+						<a v-if="appearNote.renote != null" class="rp">RN:</a>
-						<div class="translation" v-if="translating || translation">
+						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
-							<div class="translated" v-else>
+							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>
-					<div class="files" v-if="appearNote.files.length > 0">
+					<div v-if="appearNote.files.length > 0" class="files">
 						<XMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
+					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
+					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -88,20 +88,20 @@
 				<div class="info">
 					<MkTime class="created-at" :time="appearNote.createdAt" mode="detail"/>
 				</div>
-				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button @click="reply()" class="button _button">
+				<button class="button _button" @click="reply()">
 					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
 					<template v-else><i class="fas fa-reply"></i></template>
-					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
+					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
-				<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
+				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="fas fa-plus"></i>
 				</button>
-				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
 					<i class="fas fa-minus"></i>
 				</button>
-				<button class="button _button" @click="menu()" ref="menuButton">
+				<button ref="menuButton" class="button _button" @click="menu()">
 					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
@@ -112,7 +112,7 @@
 <div v-else class="_panel muted" @click="muted = false">
 	<I18n :src="$ts.userSaysSomething" tag="small">
 		<template #name>
-			<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
 				<MkUserName :user="appearNote.user"/>
 			</MkA>
 		</template>

packages/client/src/components/note-header.vue

@@ -1,22 +1,22 @@
 <template>
 <header class="kkwtjztg">
-	<MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
 		<MkUserName :user="note.user"/>
 	</MkA>
-	<div class="is-bot" v-if="note.user.isBot">bot</div>
+	<div v-if="note.user.isBot" class="is-bot">bot</div>
 	<div class="username"><MkAcct :user="note.user"/></div>
-	<div class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></div>
+	<div v-if="note.user.isAdmin" class="admin"><i class="fas fa-bookmark"></i></div>
-	<div class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></div>
+	<div v-if="!note.user.isAdmin && note.user.isModerator" class="moderator"><i class="far fa-bookmark"></i></div>
 	<div class="info">
 		<MkA class="created-at" :to="notePage(note)">
 			<MkTime :time="note.createdAt"/>
 		</MkA>
-		<span class="visibility" v-if="note.visibility !== 'public'">
+		<span v-if="note.visibility !== 'public'" class="visibility">
 			<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
 			<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 			<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+		<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
 	</div>
 </header>
 </template>

packages/client/src/components/note-preview.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fefdfafb" v-size="{ min: [350, 500] }">
+<div v-size="{ min: [350, 500] }" class="fefdfafb">
 	<MkAvatar class="avatar" :user="$i"/>
 	<div class="main">
 		<div class="header">

packages/client/src/components/note-simple.vue

@@ -1,14 +1,14 @@
 <template>
-<div class="yohlumlk" v-size="{ min: [350, 500] }">
+<div v-size="{ min: [350, 500] }" class="yohlumlk">
 	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
-				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<span v-if="note.cw != ''" class="text">{{ note.cw }}</span>
 				<XCwButton v-model="showContent" :note="note"/>
 			</p>
-			<div class="content" v-show="note.cw == null || showContent">
+			<div v-show="note.cw == null || showContent" class="content">
 				<XSubNote-content class="text" :note="note"/>
 			</div>
 		</div>

packages/client/src/components/note.sub.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrpstxzv" :class="{ children: depth > 1 }" v-size="{ max: [450] }">
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
 	<div class="main">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
@@ -9,7 +9,7 @@
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
-				<div class="content" v-show="note.cw == null || showContent">
+				<div v-show="note.cw == null || showContent" class="content">
 					<XSubNote-content class="text" :note="note"/>
 				</div>
 			</div>

packages/client/src/components/note.vue

@@ -1,38 +1,38 @@
 <template>
 <div
-	class="tkcbzcuz"
 	v-if="!muted"
 	v-show="!isDeleted"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
+	class="tkcbzcuz"
+	:tabindex="!isDeleted ? '-1' : null"
+	:class="{ renote: isRenote }"
 >
-	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
+	<XSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
+	<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
-	<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
+	<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
+	<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
-	<div class="renote" v-if="isRenote">
+	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
 		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
-				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
 					<MkUserName :user="note.user"/>
 				</MkA>
 			</template>
 		</I18n>
 		<div class="info">
-			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
+			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
 				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
-			<span class="visibility" v-if="note.visibility !== 'public'">
+			<span v-if="note.visibility !== 'public'" class="visibility">
 				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
 				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
+			<span v-if="note.localOnly" class="localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -45,26 +45,26 @@
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
-				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
+				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<a class="rp" v-if="appearNote.renote != null">RN:</a>
+						<a v-if="appearNote.renote != null" class="rp">RN:</a>
-						<div class="translation" v-if="translating || translation">
+						<div v-if="translating || translation" class="translation">
 							<MkLoading v-if="translating" mini/>
-							<div class="translated" v-else>
+							<div v-else class="translated">
 								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>
-					<div class="files" v-if="appearNote.files.length > 0">
+					<div v-if="appearNote.files.length > 0" class="files">
 						<XMediaList :media-list="appearNote.files"/>
 					</div>
-					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
+					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
+					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
 					<button v-if="collapsed" class="fade _button" @click="collapsed = false">
 						<span>{{ $ts.showMore }}</span>
 					</button>
@@ -72,20 +72,20 @@
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
-				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button @click="reply()" class="button _button">
+				<button class="button _button" @click="reply()">
 					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
 					<template v-else><i class="fas fa-reply"></i></template>
-					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
+					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
-				<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
+				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
 					<i class="fas fa-plus"></i>
 				</button>
-				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
 					<i class="fas fa-minus"></i>
 				</button>
-				<button class="button _button" @click="menu()" ref="menuButton">
+				<button ref="menuButton" class="button _button" @click="menu()">
 					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
@@ -95,7 +95,7 @@
 <div v-else class="muted" @click="muted = false">
 	<I18n :src="$ts.userSaysSomething" tag="small">
 		<template #name>
-			<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
 				<MkUserName :user="appearNote.user"/>
 			</MkA>
 		</template>

packages/client/src/components/notes.vue

@@ -4,25 +4,25 @@
 
 	<MkError v-else-if="error" @retry="init()"/>
 
-	<div class="_fullinfo" v-else-if="empty">
+	<div v-else-if="empty" class="_fullinfo">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
 	<div v-else class="giivymft" :class="{ noGap }">
 		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<MkButton style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMoreFeature">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 				<template v-if="moreFetching"><MkLoading inline/></template>
 			</MkButton>
 		</div>
 
-		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
+		<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
-			<XNote class="qtqtichx" :note="note" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
+			<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note" @update:note="updated(note, $event)"/>
 		</XList>
 
 		<div v-show="more && !reversed" style="margin-top: var(--margin);">
-			<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<MkButton v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
 				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 				<template v-if="moreFetching"><MkLoading inline/></template>
 			</MkButton>

packages/client/src/components/notification.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }" ref="elRef">
+<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
 	<div class="head">
 		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
@@ -15,6 +15,7 @@
 			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<XReactionIcon v-else-if="notification.type === 'reaction'"
+				ref="reactionRef"
 				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
 				:custom-emojis="notification.note.emojis"
 				:no-style="true"
@@ -22,15 +23,14 @@
 				@mouseover="onReactionMouseover"
 				@mouseleave="onReactionMouseleave"
 				@touchend="onReactionMouseleave"
-				ref="reactionRef"
 			/>
 		</div>
 	</div>
 	<div class="tail">
 		<header>
-			<MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
+			<MkA v-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
-			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
+			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<i class="fas fa-quote-left"></i>

packages/client/src/components/notifications.vue

@@ -4,15 +4,15 @@
 
 	<MkError v-else-if="error" @retry="init()"/>
 
-	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
+	<p v-else-if="empty" class="mfcuwfyp">{{ $ts.noNotifications }}</p>
 
 	<div v-else>
-		<XList class="elsfgstc" :items="items" v-slot="{ item: notification }" :no-gap="true">
+		<XList v-slot="{ item: notification }" class="elsfgstc" :items="items" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
+			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note" @update:note="noteUpdated(notification.note, $event)"/>
-			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
 
-		<MkButton primary style="margin: var(--margin) auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<MkButton v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" primary style="margin: var(--margin) auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
 			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
 			<template v-if="moreFetching"><MkLoading inline/></template>
 		</MkButton>

packages/client/src/components/page-preview.vue

@@ -1,6 +1,6 @@
 <template>
 <MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block _isolated" tabindex="-1">
-	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
+	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
 			<h1 :title="page.title">{{ page.title }}</h1>

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

@@ -14,7 +14,7 @@
 		</template>
 	</template>
 	<template #headerLeft>
-		<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+		<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 	</template>
 	<div class="yrolvcoq">
 		<MkStickyContainer>

packages/client/src/components/page/page.block.vue

@@ -1,5 +1,5 @@
 <template>
-<component :is="'x-' + block.type" :block="block" :hpml="hpml" :key="block.id" :h="h"/>
+<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
 </template>
 
 <script lang="ts">

packages/client/src/components/page/page.button.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkButton class="kudkigyw" @click="click()" :primary="block.primary">{{ hpml.interpolate(block.text) }}</MkButton>
+	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
 </div>
 </template>
 

packages/client/src/components/page/page.if.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-show="hpml.vars.value[block.var]">
-	<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h"/>
+	<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
 </div>
 </template>
 

packages/client/src/components/page/page.note.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" v-model:note="note" :key="note.id + ':normal'"/>
+	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
-	<XNoteDetailed v-if="note && block.detailed" v-model:note="note" :key="note.id + ':detail'"/>
+	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
 </div>
 </template>
 

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

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

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

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

packages/client/src/components/page/page.radio-button.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :modelValue="value" @update:modelValue="updateValue($event)" :value="item" :key="item">{{ item }}</MkRadio>
+	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
 </div>
 </template>
 

packages/client/src/components/page/page.section.vue

@@ -3,7 +3,7 @@
 	<component :is="'h' + h">{{ block.title }}</component>
 
 	<div class="children">
-		<XBlock v-for="child in block.children" :block="child" :hpml="hpml" :key="child.id" :h="h + 1"/>
+		<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
 	</div>
 </section>
 </template>

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

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

packages/client/src/components/page/page.text.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mrdgzndn">
-	<Mfm :text="text" :is-note="false" :i="$i" :key="text"/>
+	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
-	<MkUrlPreview v-for="url in urls" :url="url" :key="url" class="url"/>
+	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
 </div>
 </template>
 

packages/client/src/components/page/page.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
+<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-	<XBlock v-for="child in page.content" :block="child" :hpml="hpml" :key="child.id" :h="2"/>
+	<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
 </div>
 </template>
 

packages/client/src/components/poll-editor.vue

@@ -1,19 +1,19 @@
 <template>
 <div class="zmdxowus">
-	<p class="caution" v-if="choices.length < 2">
+	<p v-if="choices.length < 2" class="caution">
 		<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" :model-value="choice" @update:modelValue="onInput(i, $event)" :placeholder="$t('_poll.choiceN', { n: i + 1 })">
+			<MkInput class="input" :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
 			</MkInput>
-			<button @click="remove(i)" class="_button">
+			<button class="_button" @click="remove(i)">
 				<i class="fas fa-times"></i>
 			</button>
 		</li>
 	</ul>
-	<MkButton class="add" v-if="choices.length < 10" @click="add">{{ $ts.add }}</MkButton>
+	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ $ts.add }}</MkButton>
-	<MkButton class="add" v-else disabled>{{ $ts._poll.noMore }}</MkButton>
+	<MkButton v-else class="add" disabled>{{ $ts._poll.noMore }}</MkButton>
 	<section>
 		<MkSwitch v-model="multiple">{{ $ts._poll.canMultipleVote }}</MkSwitch>
 		<div>

packages/client/src/components/poll.vue

@@ -1,12 +1,12 @@
 <template>
 <div class="tivcixzd" :class="{ done: closed || isVoted }">
 	<ul>
-		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
+		<li v-for="(choice, i) in poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
 				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
-				<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
+				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
 		</li>
 	</ul>

packages/client/src/components/post-form-attaches.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="skeikyzd" v-show="files.length != 0">
+<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
 		<template #item="{element}">
 			<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
-				<div class="sensitive" v-if="element.isSensitive">
+				<div v-if="element.isSensitive" class="sensitive">
 					<i class="fas fa-exclamation-triangle icon"></i>
 				</div>
 			</div>

packages/client/src/components/post-form-dialog.vue

@@ -1,6 +1,6 @@
 <template>
-<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')" :position="'top'">
+<MkModal ref="modal" :position="'top'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<MkPostForm @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()" v-bind="$attrs"/>
+	<MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
 </MkModal>
 </template>
 

packages/client/src/components/post-form.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="gafaadew" :class="{ modal, _popup: modal }"
+<div v-size="{ max: [310, 500] }" class="gafaadew"
-	v-size="{ max: [310, 500] }"
+	:class="{ modal, _popup: modal }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -10,21 +10,21 @@
 		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
 		<div>
 			<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
-			<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
+			<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
-			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
+			<button ref="visibilityButton" v-tooltip="$ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
 				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
 				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.previewNoteText"><i class="fas fa-file-code"></i></button>
+			<button v-tooltip="$ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
-		<XNoteSimple class="preview" v-if="reply" :note="reply"/>
+		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple class="preview" v-if="renote" :note="renote"/>
+		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
+		<div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
 			<div class="visibleUsers">
@@ -32,27 +32,27 @@
 					<MkAcct :user="u"/>
 					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
+				<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
 			</div>
 		</div>
-		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
+		<MkInfo v-if="hasNotSpecifiedMentions" warn 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">
+		<input v-show="useCw" ref="cw" v-model="cw" class="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" data-cy-post-form-text/>
+		<textarea ref="text" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
+		<input v-show="withHashtags" ref="hashtags" v-model="hashtags" class="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"/>
-		<XNotePreview class="preview" v-if="showPreview" :text="text"/>
+		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
-			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
+			<button v-tooltip="$ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
-			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
+			<button v-tooltip="$ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><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 v-tooltip="$ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !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 v-tooltip="$ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
-			<button class="_button" @click="withHashtags = !withHashtags" :class="{ active: withHashtags }" v-tooltip="$ts.hashtags"><i class="fas fa-hashtag"></i></button>
+			<button v-tooltip="$ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><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 v-tooltip="$ts.emoji" class="_button" @click="insertEmoji"><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>
+			<button v-if="postFormActions.length > 0" v-tooltip="$ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
 		</footer>
 		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :value="hashtag" :key="hashtag"/>
+			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
 		</datalist>
 	</div>
 </div>

packages/client/src/components/reaction-tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
+<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
 	<div class="beeadbfb">
 		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
 		<div class="name">{{ reaction.replace('@.', '') }}</div>

packages/client/src/components/reactions-viewer.details.vue

@@ -1,12 +1,12 @@
 <template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
+<MkTooltip ref="tooltip" :source="source" :max-width="340" @closed="$emit('closed')">
 	<div class="bqxuuuey">
 		<div class="reaction">
 			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
 			<div class="name">{{ reaction.replace('@.', '') }}</div>
 		</div>
 		<div class="users">
-			<div class="user" v-for="u in users" :key="u.id">
+			<div v-for="u in users" :key="u.id" class="user">
 				<MkAvatar class="avatar" :user="u"/>
 				<MkUserName class="name" :user="u" :nowrap="true"/>
 			</div>

packages/client/src/components/reactions-viewer.reaction.vue

@@ -1,15 +1,15 @@
 <template>
 <button
+	v-if="count > 0"
+	ref="buttonRef"
+	v-particle="canToggle"
 	class="hkzvhatu _button"
 	:class="{ reacted: note.myReaction == reaction, canToggle }"
 	@click="toggleReaction()"
-	v-if="count > 0"
 	@touchstart.passive="onMouseover"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
 	@touchend="onMouseleave"
-	ref="buttonRef"
-	v-particle="canToggle"
 >
 	<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
 	<span>{{ count }}</span>

packages/client/src/components/reactions-viewer.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="tdflqwzn" :class="{ isMe }">
-	<XReaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
+	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
 </div>
 </template>
 

packages/client/src/components/renote-button.vue

@@ -1,15 +1,15 @@
 <template>
 <button v-if="canRenote"
+	ref="buttonRef"
 	class="eddddedb _button canRenote"
 	@click="renote()"
 	@touchstart.passive="onMouseover"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
 	@touchend="onMouseleave"
-	ref="buttonRef"
 >
 	<i class="fas fa-retweet"></i>
-	<p class="count" v-if="count > 0">{{ count }}</p>
+	<p v-if="count > 0" class="count">{{ count }}</p>
 </button>
 <button v-else class="eddddedb _button">
 	<i class="fas fa-ban"></i>

packages/client/src/components/renote.details.vue

@@ -1,7 +1,7 @@
 <template>
-<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="250">
+<MkTooltip ref="tooltip" :source="source" :max-width="250" @closed="$emit('closed')">
 	<div class="beaffaef">
-		<div class="user" v-for="u in users" :key="u.id">
+		<div v-for="u in users" :key="u.id" class="user">
 			<MkAvatar class="avatar" :user="u"/>
 			<MkUserName class="name" :user="u" :nowrap="true"/>
 		</div>

packages/client/src/components/signin.vue

@@ -1,31 +1,31 @@
 <template>
 <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="auth _section _formRoot">
-		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
+		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }"></div>
-		<div class="normal-signin" v-if="!totpLogin">
+		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
+			<MkInput v-model="username" class="_formBlock" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
+			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="$ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
-				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
+				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
 			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
-		<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
+		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
 			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
 				<p>{{ $ts.tapSecurityKey }}</p>
-				<MkButton @click="queryKey" v-if="!queryingKey">
+				<MkButton v-if="!queryingKey" @click="queryKey">
 					{{ $ts.retry }}
 				</MkButton>
 			</div>
-			<div class="or-hr" v-if="user && user.securityKeys">
+			<div v-if="user && user.securityKeys" class="or-hr">
 				<p class="or-msg">{{ $ts.or }}</p>
 			</div>
 			<div class="twofa-group totp-group">
 				<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
-				<MkInput v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
 					<template #label>{{ $ts.password }}</template>
 					<template #prefix><i class="fas fa-lock"></i></template>
 				</MkInput>
@@ -38,9 +38,9 @@
 		</div>
 	</div>
 	<div class="social _section">
-		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>

packages/client/src/components/signup.vue

@@ -1,12 +1,12 @@
 <template>
-<form class="qlvuhzng _formRoot" @submit.prevent="onSubmit" :autocomplete="Math.random()">
+<form class="qlvuhzng _formRoot" :autocomplete="Math.random()" @submit.prevent="onSubmit">
 	<template v-if="meta">
-		<MkInput class="_formBlock" v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+		<MkInput v-if="meta.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<template #label>{{ $ts.invitationCode }}</template>
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
-		<MkInput class="_formBlock" v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
+		<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
-			<template #label>{{ $ts.username }} <div class="_button _help" v-tooltip:dialog="$ts.usernameInfo"><i class="far fa-question-circle"></i></div></template>
+			<template #label>{{ $ts.username }} <div v-tooltip:dialog="$ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #caption>
@@ -19,8 +19,8 @@
 				<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-if="meta.emailRequiredForSignup" class="_formBlock" v-model="email" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeEmail" data-cy-signup-email>
+		<MkInput v-if="meta.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :autocomplete="Math.random()" spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
-			<template #label>{{ $ts.emailAddress }} <div class="_button _help" v-tooltip:dialog="$ts._signup.emailAddressInfo"><i class="far fa-question-circle"></i></div></template>
+			<template #label>{{ $ts.emailAddress }} <div v-tooltip:dialog="$ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 			<template #prefix><i class="fas fa-envelope"></i></template>
 			<template #caption>
 				<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
@@ -34,7 +34,7 @@
 				<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
 			</template>
 		</MkInput>
-		<MkInput class="_formBlock" v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
+		<MkInput v-model="password" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password @update:modelValue="onChangePassword">
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -43,7 +43,7 @@
 				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
 			</template>
 		</MkInput>
-		<MkInput class="_formBlock" v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
+		<MkInput v-model="retypedPassword" class="_formBlock" type="password" :autocomplete="Math.random()" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
 			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -52,15 +52,15 @@
 			</template>
 		</MkInput>
 		<label v-if="meta.tosUrl" class="_formBlock tou">
-			<input type="checkbox" v-model="ToSAgreement">
+			<input v-model="ToSAgreement" type="checkbox">
 			<I18n :src="$ts.agreeTo">
 				<template #0>
 					<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
 				</template>
 			</I18n>
 		</label>
-		<captcha v-if="meta.enableHcaptcha" class="_formBlock captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="_formBlock captcha" provider="recaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
 	</template>
 </form>

packages/client/src/components/sub-note-content.vue

@@ -3,9 +3,9 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
-		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-		<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>

packages/client/src/components/taskmanager.vue

@@ -12,7 +12,7 @@
 		</MkTab>
 
 		<div class="content">
-			<div v-if="tab === 'windows'" class="windows" v-follow>
+			<div v-if="tab === 'windows'" v-follow class="windows">
 				<div class="header">
 					<div>#ID</div>
 					<div>Component</div>
@@ -24,7 +24,7 @@
 					<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
 				</div>
 			</div>
-			<div v-if="tab === 'stream'" class="stream" v-follow>
+			<div v-if="tab === 'stream'" v-follow class="stream">
 				<div class="header">
 					<div>#ID</div>
 					<div>Ch</div>
@@ -41,7 +41,7 @@
 					<div>{{ c.out }}</div>
 				</div>
 			</div>
-			<div v-if="tab === 'streamPool'" class="streamPool" v-follow>
+			<div v-if="tab === 'streamPool'" v-follow class="streamPool">
 				<div class="header">
 					<div>#ID</div>
 					<div>Ch</div>
@@ -53,7 +53,7 @@
 					<div>{{ p.users }}</div>
 				</div>
 			</div>
-			<div v-if="tab === 'api'" class="api" v-follow>
+			<div v-if="tab === 'api'" v-follow class="api">
 				<div class="header">
 					<div>#ID</div>
 					<div>Endpoint</div>

packages/client/src/components/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes ref="tl" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">

packages/client/src/components/toast.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-toast">
 	<transition name="notification-slide" appear @after-leave="$emit('closed')">
-		<XNotification :notification="notification" class="notification _acrylic" v-if="showing"/>
+		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
 	</transition>
 </div>
 </template>

packages/client/src/components/ui/container.vue

@@ -1,10 +1,10 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }">
+<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
 	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
 			<slot name="func"></slot>
-			<button class="_button" v-if="foldable" @click="() => showBody = !showBody">
+			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
 				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
 				<template v-else><i class="fas fa-angle-down"></i></template>
 			</button>
@@ -16,7 +16,7 @@
 		@leave="leave"
 		@after-leave="afterLeave"
 	>
-		<div v-show="showBody" class="content" :class="{ omitted }" ref="content">
+		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
 			<slot></slot>
 			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
 				<span>{{ $ts.showMore }}</span>

packages/client/src/components/ui/context-menu.vue

@@ -1,7 +1,7 @@
 <template>
 <transition :name="$store.state.animation ? 'fade' : ''" appear>
 	<div class="nvlagfpb" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" @close="$emit('closed')" class="_popup _shadow" :align="'left'"/>
+		<MkMenu :items="items" class="_popup _shadow" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </transition>
 </template>

packages/client/src/components/ui/folder.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="ssazuxis" v-size="{ max: [500] }">
+<div v-size="{ max: [500] }" class="ssazuxis">
-	<header @click="showBody = !showBody" class="_button" :style="{ background: bg }">
+	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">

packages/client/src/components/ui/menu.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="rrevdjwt" :class="{ center: align === 'center' }"
+<div ref="items" v-hotkey="keymap"
+	class="rrevdjwt"
+	:class="{ center: align === 'center' }"
 	:style="{ width: width ? width + 'px' : null }"
-	ref="items"
 	@contextmenu.self="e => e.preventDefault()"
-	v-hotkey="keymap"
 >
 	<template v-for="(item, i) in items2">
 		<div v-if="item === null" class="divider"></div>
@@ -13,22 +13,22 @@
 		<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
 			<span><MkEllipsis/></span>
 		</span>
-		<MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
+		<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close()">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</MkA>
-		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
+		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close()">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<span>{{ item.text }}</span>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</a>
-		<button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
+		<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" @click="clicked(item.action, $event)">
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
-		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active">
+		<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)">
 			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>

packages/client/src/components/ui/modal-window.vue

@@ -1,20 +1,20 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div class="ebkgoccj _window _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
+	<div class="ebkgoccj _window _narrow_" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
 		<div class="header">
-			<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
+			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<span class="title">
 				<slot name="header"></slot>
 			</span>
-			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
+			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="fas fa-times"></i></button>
-			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><i class="fas fa-check"></i></button>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
 		</div>
-		<div class="body" v-if="padding">
+		<div v-if="padding" class="body">
 			<div class="_section">
 				<slot></slot>
 			</div>
 		</div>
-		<div class="body" v-else>
+		<div v-else class="body">
 			<slot></slot>
 		</div>
 	</div>

packages/client/src/components/ui/modal.vue

@@ -1,8 +1,8 @@
 <template>
 <transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
-	<div v-show="manualShowing != null ? manualShowing : showing" class="qzhlnise" :class="{ front }" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ front }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<div class="bg _modalBg" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-		<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
+		<div ref="content" class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick">
 			<slot></slot>
 		</div>
 	</div>