From a45d2b2293fd6aa35b8509d22e9b67df052341c8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 9 Feb 2018 13:20:45 +0900
Subject: wip

---
 src/web/app/common/-tags/activity-table.tag    |  57 ++++
 src/web/app/common/-tags/authorized-apps.tag   |  35 ++
 src/web/app/common/-tags/ellipsis.tag          |  24 ++
 src/web/app/common/-tags/error.tag             | 215 ++++++++++++
 src/web/app/common/-tags/file-type-icon.tag    |  10 +
 src/web/app/common/-tags/forkit.tag            |  40 +++
 src/web/app/common/-tags/index.ts              |  30 ++
 src/web/app/common/-tags/introduction.tag      |  25 ++
 src/web/app/common/-tags/messaging/form.tag    | 175 ++++++++++
 src/web/app/common/-tags/messaging/index.tag   | 456 +++++++++++++++++++++++++
 src/web/app/common/-tags/messaging/message.tag | 238 +++++++++++++
 src/web/app/common/-tags/messaging/room.tag    | 319 +++++++++++++++++
 src/web/app/common/-tags/nav-links.tag         |  10 +
 src/web/app/common/-tags/number.tag            |  16 +
 src/web/app/common/-tags/poll-editor.tag       | 121 +++++++
 src/web/app/common/-tags/post-menu.tag         | 157 +++++++++
 src/web/app/common/-tags/raw.tag               |  13 +
 src/web/app/common/-tags/signin-history.tag    | 116 +++++++
 src/web/app/common/-tags/signin.tag            | 155 +++++++++
 src/web/app/common/-tags/signup.tag            | 307 +++++++++++++++++
 src/web/app/common/-tags/special-message.tag   |  27 ++
 src/web/app/common/-tags/twitter-setting.tag   |  62 ++++
 src/web/app/common/-tags/uploader.tag          | 199 +++++++++++
 src/web/app/common/tags/activity-table.tag     |  57 ----
 src/web/app/common/tags/authorized-apps.tag    |  35 --
 src/web/app/common/tags/ellipsis.tag           |  24 --
 src/web/app/common/tags/error.tag              | 215 ------------
 src/web/app/common/tags/file-type-icon.tag     |  10 -
 src/web/app/common/tags/forkit.tag             |  40 ---
 src/web/app/common/tags/index.ts               |  30 --
 src/web/app/common/tags/introduction.tag       |  25 --
 src/web/app/common/tags/messaging/form.tag     | 175 ----------
 src/web/app/common/tags/messaging/index.tag    | 456 -------------------------
 src/web/app/common/tags/messaging/message.tag  | 238 -------------
 src/web/app/common/tags/messaging/room.tag     | 319 -----------------
 src/web/app/common/tags/nav-links.tag          |  10 -
 src/web/app/common/tags/number.tag             |  16 -
 src/web/app/common/tags/poll-editor.tag        | 121 -------
 src/web/app/common/tags/post-menu.tag          | 157 ---------
 src/web/app/common/tags/raw.tag                |  13 -
 src/web/app/common/tags/signin-history.tag     | 116 -------
 src/web/app/common/tags/signin.tag             | 155 ---------
 src/web/app/common/tags/signup.tag             | 307 -----------------
 src/web/app/common/tags/special-message.tag    |  27 --
 src/web/app/common/tags/twitter-setting.tag    |  62 ----
 src/web/app/common/tags/uploader.tag           | 199 -----------
 46 files changed, 2807 insertions(+), 2807 deletions(-)
 create mode 100644 src/web/app/common/-tags/activity-table.tag
 create mode 100644 src/web/app/common/-tags/authorized-apps.tag
 create mode 100644 src/web/app/common/-tags/ellipsis.tag
 create mode 100644 src/web/app/common/-tags/error.tag
 create mode 100644 src/web/app/common/-tags/file-type-icon.tag
 create mode 100644 src/web/app/common/-tags/forkit.tag
 create mode 100644 src/web/app/common/-tags/index.ts
 create mode 100644 src/web/app/common/-tags/introduction.tag
 create mode 100644 src/web/app/common/-tags/messaging/form.tag
 create mode 100644 src/web/app/common/-tags/messaging/index.tag
 create mode 100644 src/web/app/common/-tags/messaging/message.tag
 create mode 100644 src/web/app/common/-tags/messaging/room.tag
 create mode 100644 src/web/app/common/-tags/nav-links.tag
 create mode 100644 src/web/app/common/-tags/number.tag
 create mode 100644 src/web/app/common/-tags/poll-editor.tag
 create mode 100644 src/web/app/common/-tags/post-menu.tag
 create mode 100644 src/web/app/common/-tags/raw.tag
 create mode 100644 src/web/app/common/-tags/signin-history.tag
 create mode 100644 src/web/app/common/-tags/signin.tag
 create mode 100644 src/web/app/common/-tags/signup.tag
 create mode 100644 src/web/app/common/-tags/special-message.tag
 create mode 100644 src/web/app/common/-tags/twitter-setting.tag
 create mode 100644 src/web/app/common/-tags/uploader.tag
 delete mode 100644 src/web/app/common/tags/activity-table.tag
 delete mode 100644 src/web/app/common/tags/authorized-apps.tag
 delete mode 100644 src/web/app/common/tags/ellipsis.tag
 delete mode 100644 src/web/app/common/tags/error.tag
 delete mode 100644 src/web/app/common/tags/file-type-icon.tag
 delete mode 100644 src/web/app/common/tags/forkit.tag
 delete mode 100644 src/web/app/common/tags/index.ts
 delete mode 100644 src/web/app/common/tags/introduction.tag
 delete mode 100644 src/web/app/common/tags/messaging/form.tag
 delete mode 100644 src/web/app/common/tags/messaging/index.tag
 delete mode 100644 src/web/app/common/tags/messaging/message.tag
 delete mode 100644 src/web/app/common/tags/messaging/room.tag
 delete mode 100644 src/web/app/common/tags/nav-links.tag
 delete mode 100644 src/web/app/common/tags/number.tag
 delete mode 100644 src/web/app/common/tags/poll-editor.tag
 delete mode 100644 src/web/app/common/tags/post-menu.tag
 delete mode 100644 src/web/app/common/tags/raw.tag
 delete mode 100644 src/web/app/common/tags/signin-history.tag
 delete mode 100644 src/web/app/common/tags/signin.tag
 delete mode 100644 src/web/app/common/tags/signup.tag
 delete mode 100644 src/web/app/common/tags/special-message.tag
 delete mode 100644 src/web/app/common/tags/twitter-setting.tag
 delete mode 100644 src/web/app/common/tags/uploader.tag

(limited to 'src/web/app/common')

diff --git a/src/web/app/common/-tags/activity-table.tag b/src/web/app/common/-tags/activity-table.tag
new file mode 100644
index 0000000000..2f716912f3
--- /dev/null
+++ b/src/web/app/common/-tags/activity-table.tag
@@ -0,0 +1,57 @@
+<mk-activity-table>
+	<svg v-if="data" ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
+		<rect each={ data } width="1" height="1"
+			riot-x={ x } riot-y={ date.weekday }
+			rx="1" ry="1"
+			fill={ color }
+			style="transform: scale({ v });"/>
+		<rect class="today" width="1" height="1"
+			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
+			rx="1" ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#f73520"/>
+	</svg>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			max-width 600px
+			margin 0 auto
+
+			> svg
+				display block
+
+				> rect
+					transform-origin center
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			this.api('aggregation/users/activity', {
+				user_id: this.user.id
+			}).then(data => {
+				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+				this.peak = Math.max.apply(null, data.map(d => d.total)) / 2;
+				let x = 0;
+				data.reverse().forEach(d => {
+					d.x = x;
+					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
+
+					d.v = d.total / this.peak;
+					if (d.v > 1) d.v = 1;
+					const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
+					const cs = d.v * 100;
+					const cl = 15 + ((1 - d.v) * 80);
+					d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+					if (d.date.weekday == 6) x++;
+				});
+				this.update({ data });
+			});
+		});
+	</script>
+</mk-activity-table>
diff --git a/src/web/app/common/-tags/authorized-apps.tag b/src/web/app/common/-tags/authorized-apps.tag
new file mode 100644
index 0000000000..26efa1316f
--- /dev/null
+++ b/src/web/app/common/-tags/authorized-apps.tag
@@ -0,0 +1,35 @@
+<mk-authorized-apps>
+	<div class="none ui info" v-if="!fetching && apps.length == 0">
+		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
+	</div>
+	<div class="apps" v-if="apps.length != 0">
+		<div each={ app in apps }>
+			<p><b>{ app.name }</b></p>
+			<p>{ app.description }</p>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .apps
+				> div
+					padding 16px 0 0 0
+					border-bottom solid 1px #eee
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.apps = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('i/authorized_apps').then(apps => {
+				this.apps = apps;
+				this.fetching = false;
+				this.update();
+			});
+		});
+	</script>
+</mk-authorized-apps>
diff --git a/src/web/app/common/-tags/ellipsis.tag b/src/web/app/common/-tags/ellipsis.tag
new file mode 100644
index 0000000000..734454e4a0
--- /dev/null
+++ b/src/web/app/common/-tags/ellipsis.tag
@@ -0,0 +1,24 @@
+<mk-ellipsis><span>.</span><span>.</span><span>.</span>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+
+			> span
+				animation ellipsis 1.4s infinite ease-in-out both
+
+				&:nth-child(1)
+					animation-delay 0s
+
+				&:nth-child(2)
+					animation-delay 0.16s
+
+				&:nth-child(3)
+					animation-delay 0.32s
+
+			@keyframes ellipsis
+				0%, 80%, 100%
+					opacity 1
+				40%
+					opacity 0
+	</style>
+</mk-ellipsis>
diff --git a/src/web/app/common/-tags/error.tag b/src/web/app/common/-tags/error.tag
new file mode 100644
index 0000000000..f09c0ce955
--- /dev/null
+++ b/src/web/app/common/-tags/error.tag
@@ -0,0 +1,215 @@
+<mk-error>
+	<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
+	<h1>%i18n:common.tags.mk-error.title%</h1>
+	<p class="text">{
+		'%i18n:common.tags.mk-error.description%'.substr(0, '%i18n:common.tags.mk-error.description%'.indexOf('{'))
+	}<a @click="reload">{
+		'%i18n:common.tags.mk-error.description%'.match(/\{(.+?)\}/)[1]
+	}</a>{
+		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1)
+	}</p>
+	<button v-if="!troubleshooting" @click="troubleshoot">%i18n:common.tags.mk-error.troubleshoot%</button>
+	<mk-troubleshooter v-if="troubleshooting"/>
+	<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 100%
+			padding 32px 18px
+			text-align center
+
+			> img
+				display block
+				height 200px
+				margin 0 auto
+				pointer-events none
+				user-select none
+
+			> h1
+				display block
+				margin 1.25em auto 0.65em auto
+				font-size 1.5em
+				color #555
+
+			> .text
+				display block
+				margin 0 auto
+				max-width 600px
+				font-size 1em
+				color #666
+
+			> button
+				display block
+				margin 1em auto 0 auto
+				padding 8px 10px
+				color $theme-color-foreground
+				background $theme-color
+
+				&:focus
+					outline solid 3px rgba($theme-color, 0.3)
+
+				&:hover
+					background lighten($theme-color, 10%)
+
+				&:active
+					background darken($theme-color, 10%)
+
+			> mk-troubleshooter
+				margin 1em auto 0 auto
+
+			> .thanks
+				display block
+				margin 2em auto 0 auto
+				padding 2em 0 0 0
+				max-width 600px
+				font-size 0.9em
+				font-style oblique
+				color #aaa
+				border-top solid 1px #eee
+
+			@media (max-width 500px)
+				padding 24px 18px
+				font-size 80%
+
+				> img
+					height 150px
+
+	</style>
+	<script lang="typescript">
+		this.troubleshooting = false;
+
+		this.on('mount', () => {
+			document.title = 'Oops!';
+			document.documentElement.style.background = '#f8f8f8';
+		});
+
+		this.reload = () => {
+			location.reload();
+		};
+
+		this.troubleshoot = () => {
+			this.update({
+				troubleshooting: true
+			});
+		};
+	</script>
+</mk-error>
+
+<mk-troubleshooter>
+	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
+	<div>
+		<p data-wip={ network == null }><template v-if="network != null"><template v-if="network">%fa:check%</template><template v-if="!network">%fa:times%</template></template>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
+		<p v-if="network == true" data-wip={ internet == null }><template v-if="internet != null"><template v-if="internet">%fa:check%</template><template v-if="!internet">%fa:times%</template></template>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
+		<p v-if="internet == true" data-wip={ server == null }><template v-if="server != null"><template v-if="server">%fa:check%</template><template v-if="!server">%fa:times%</template></template>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
+	</div>
+	<p v-if="!end">%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
+	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
+	<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
+	<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
+	<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			width 100%
+			max-width 500px
+			text-align left
+			background #fff
+			border-radius 8px
+			border solid 1px #ddd
+
+			> h1
+				margin 0
+				padding 0.6em 1.2em
+				font-size 1em
+				color #444
+				border-bottom solid 1px #eee
+
+				> [data-fa]
+					margin-right 0.25em
+
+			> div
+				overflow hidden
+				padding 0.6em 1.2em
+
+				> p
+					margin 0.5em 0
+					font-size 0.9em
+					color #444
+
+					&[data-wip]
+						color #888
+
+					> [data-fa]
+						margin-right 0.25em
+
+						&.times
+							color #e03524
+
+						&.check
+							color #84c32f
+
+			> p
+				margin 0
+				padding 0.6em 1.2em
+				font-size 1em
+				color #444
+				border-top solid 1px #eee
+
+				> b
+					> [data-fa]
+						margin-right 0.25em
+
+				&.success
+					> b
+						color #39adad
+
+				&:not(.success)
+					> b
+						color #ad4339
+
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			this.update({
+				network: navigator.onLine
+			});
+
+			if (!this.network) {
+				this.update({
+					end: true
+				});
+				return;
+			}
+
+			// Check internet connection
+			fetch('https://google.com?rand=' + Math.random(), {
+				mode: 'no-cors'
+			}).then(() => {
+				this.update({
+					internet: true
+				});
+
+				// Check misskey server is available
+				fetch(`${_API_URL_}/meta`).then(() => {
+					this.update({
+						end: true,
+						server: true
+					});
+				})
+				.catch(() => {
+					this.update({
+						end: true,
+						server: false
+					});
+				});
+			})
+			.catch(() => {
+				this.update({
+					end: true,
+					internet: false
+				});
+			});
+		});
+	</script>
+</mk-troubleshooter>
diff --git a/src/web/app/common/-tags/file-type-icon.tag b/src/web/app/common/-tags/file-type-icon.tag
new file mode 100644
index 0000000000..f630efe118
--- /dev/null
+++ b/src/web/app/common/-tags/file-type-icon.tag
@@ -0,0 +1,10 @@
+<mk-file-type-icon>
+	<template v-if="kind == 'image'">%fa:file-image%</template>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.kind = this.opts.type.split('/')[0];
+	</script>
+</mk-file-type-icon>
diff --git a/src/web/app/common/-tags/forkit.tag b/src/web/app/common/-tags/forkit.tag
new file mode 100644
index 0000000000..6a8d06e564
--- /dev/null
+++ b/src/web/app/common/-tags/forkit.tag
@@ -0,0 +1,40 @@
+<mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="%i18n:common.tags.mk-forkit.open-github-link%" aria-label="%i18n:common.tags.mk-forkit.open-github-link%">
+		<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
+			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+			<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
+			<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
+		</svg></a>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			position absolute
+			top 0
+			right 0
+
+			> a
+				display block
+
+				> svg
+					display block
+					//fill #151513
+					//color #fff
+					fill $theme-color
+					color $theme-color-foreground
+
+			.octo-arm
+				transform-origin 130px 106px
+
+			&:hover
+				.octo-arm
+					animation octocat-wave 560ms ease-in-out
+
+			@keyframes octocat-wave
+				0%, 100%
+					transform rotate(0)
+				20%, 60%
+					transform rotate(-25deg)
+				40%, 80%
+					transform rotate(10deg)
+
+	</style>
+</mk-forkit>
diff --git a/src/web/app/common/-tags/index.ts b/src/web/app/common/-tags/index.ts
new file mode 100644
index 0000000000..df99d93cc5
--- /dev/null
+++ b/src/web/app/common/-tags/index.ts
@@ -0,0 +1,30 @@
+require('./error.tag');
+require('./url.tag');
+require('./url-preview.tag');
+require('./time.tag');
+require('./file-type-icon.tag');
+require('./uploader.tag');
+require('./ellipsis.tag');
+require('./raw.tag');
+require('./number.tag');
+require('./special-message.tag');
+require('./signin.tag');
+require('./signup.tag');
+require('./forkit.tag');
+require('./introduction.tag');
+require('./signin-history.tag');
+require('./twitter-setting.tag');
+require('./authorized-apps.tag');
+require('./poll.tag');
+require('./poll-editor.tag');
+require('./messaging/room.tag');
+require('./messaging/message.tag');
+require('./messaging/index.tag');
+require('./messaging/form.tag');
+require('./stream-indicator.tag');
+require('./activity-table.tag');
+require('./reaction-picker.tag');
+require('./reactions-viewer.tag');
+require('./reaction-icon.tag');
+require('./post-menu.tag');
+require('./nav-links.tag');
diff --git a/src/web/app/common/-tags/introduction.tag b/src/web/app/common/-tags/introduction.tag
new file mode 100644
index 0000000000..c92cff0d1d
--- /dev/null
+++ b/src/web/app/common/-tags/introduction.tag
@@ -0,0 +1,25 @@
+<mk-introduction>
+	<article>
+		<h1>Misskeyとは？</h1>
+		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
+		<p>無料で誰でも利用でき、広告も掲載していません。</p>
+		<p><a href={ _DOCS_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
+	</article>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			h1
+				margin 0
+				text-align center
+				font-size 1.2em
+
+			p
+				margin 16px 0
+
+				&:last-child
+					margin 0
+					text-align center
+
+	</style>
+</mk-introduction>
diff --git a/src/web/app/common/-tags/messaging/form.tag b/src/web/app/common/-tags/messaging/form.tag
new file mode 100644
index 0000000000..9a58dc0ce7
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/form.tag
@@ -0,0 +1,175 @@
+<mk-messaging-form>
+	<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
+	<div class="files"></div>
+	<mk-uploader ref="uploader"/>
+	<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
+		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
+	</button>
+	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
+		%fa:upload%
+	</button>
+	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
+		%fa:R folder-open%
+	</button>
+	<input name="file" type="file" accept="image/*"/>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> textarea
+				cursor auto
+				display block
+				width 100%
+				min-width 100%
+				max-width 100%
+				height 64px
+				margin 0
+				padding 8px
+				font-size 1em
+				color #000
+				outline none
+				border none
+				border-top solid 1px #eee
+				border-radius 0
+				box-shadow none
+				background transparent
+
+			> .send
+				position absolute
+				bottom 0
+				right 0
+				margin 0
+				padding 10px 14px
+				line-height 1em
+				font-size 1em
+				color #aaa
+				transition color 0.1s ease
+
+				&:hover
+					color $theme-color
+
+				&:active
+					color darken($theme-color, 10%)
+					transition color 0s ease
+
+			.files
+				display block
+				margin 0
+				padding 0 8px
+				list-style none
+
+				&:after
+					content ''
+					display block
+					clear both
+
+				> li
+					display block
+					float left
+					margin 4px
+					padding 0
+					width 64px
+					height 64px
+					background-color #eee
+					background-repeat no-repeat
+					background-position center center
+					background-size cover
+					cursor move
+
+					&:hover
+						> .remove
+							display block
+
+					> .remove
+						display none
+						position absolute
+						right -6px
+						top -6px
+						margin 0
+						padding 0
+						background transparent
+						outline none
+						border none
+						border-radius 0
+						box-shadow none
+						cursor pointer
+
+			.attach-from-local
+			.attach-from-drive
+				margin 0
+				padding 10px 14px
+				line-height 1em
+				font-size 1em
+				font-weight normal
+				text-decoration none
+				color #aaa
+				transition color 0.1s ease
+
+				&:hover
+					color $theme-color
+
+				&:active
+					color darken($theme-color, 10%)
+					transition color 0s ease
+
+			input[type=file]
+				display none
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.onpaste = e => {
+			const data = e.clipboardData;
+			const items = data.items;
+			for (const item of items) {
+				if (item.kind == 'file') {
+					this.upload(item.getAsFile());
+				}
+			}
+		};
+
+		this.onkeypress = e => {
+			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
+				this.send();
+			}
+		};
+
+		this.selectFile = () => {
+			this.$refs.file.click();
+		};
+
+		this.selectFileFromDrive = () => {
+			const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
+			const event = riot.observable();
+			riot.mount(browser, {
+				multiple: true,
+				event: event
+			});
+			event.one('selected', files => {
+				files.forEach(this.addFile);
+			});
+		};
+
+		this.send = () => {
+			this.sending = true;
+			this.api('messaging/messages/create', {
+				user_id: this.opts.user.id,
+				text: this.$refs.text.value
+			}).then(message => {
+				this.clear();
+			}).catch(err => {
+				console.error(err);
+			}).then(() => {
+				this.sending = false;
+				this.update();
+			});
+		};
+
+		this.clear = () => {
+			this.$refs.text.value = '';
+			this.files = [];
+			this.update();
+		};
+	</script>
+</mk-messaging-form>
diff --git a/src/web/app/common/-tags/messaging/index.tag b/src/web/app/common/-tags/messaging/index.tag
new file mode 100644
index 0000000000..0432f7e30f
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/index.tag
@@ -0,0 +1,456 @@
+<mk-messaging data-compact={ opts.compact }>
+	<div class="search" v-if="!opts.compact">
+		<div class="form">
+			<label for="search-input">%fa:search%</label>
+			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
+		</div>
+		<div class="result">
+			<ol class="users" v-if="searchResult.length > 0" ref="searchResult">
+				<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @click="user._click" tabindex="-1">
+					<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
+					<span class="name">{ user.name }</span>
+					<span class="username">@{ user.username }</span>
+				</li>
+			</ol>
+		</div>
+	</div>
+	<div class="history" v-if="history.length > 0">
+		<template each={ history }>
+			<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
+				<div>
+					<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
+					<header>
+						<span class="name">{ is_me ? recipient.name : user.name }</span>
+						<span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
+						<mk-time time={ created_at }/>
+					</header>
+					<div class="body">
+						<p class="text"><span class="me" v-if="is_me">%i18n:common.tags.mk-messaging.you%:</span>{ text }</p>
+					</div>
+				</div>
+			</a>
+		</template>
+	</div>
+	<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			&[data-compact]
+				font-size 0.8em
+
+				> .history
+					> a
+						&:last-child
+							border-bottom none
+
+						&:not([data-is-me]):not([data-is-read])
+							> div
+								background-image none
+								border-left solid 4px #3aa2dc
+
+						> div
+							padding 16px
+
+							> header
+								> mk-time
+									font-size 1em
+
+							> .avatar
+								width 42px
+								height 42px
+								margin 0 12px 0 0
+
+			> .search
+				display block
+				position -webkit-sticky
+				position sticky
+				top 0
+				left 0
+				z-index 1
+				width 100%
+				background #fff
+				box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
+
+				> .form
+					padding 8px
+					background #f7f7f7
+
+					> label
+						display block
+						position absolute
+						top 0
+						left 8px
+						z-index 1
+						height 100%
+						width 38px
+						pointer-events none
+
+						> [data-fa]
+							display block
+							position absolute
+							top 0
+							right 0
+							bottom 0
+							left 0
+							width 1em
+							height 1em
+							margin auto
+							color #555
+
+					> input
+						margin 0
+						padding 0 0 0 38px
+						width 100%
+						font-size 1em
+						line-height 38px
+						color #000
+						outline none
+						border solid 1px #eee
+						border-radius 5px
+						box-shadow none
+						transition color 0.5s ease, border 0.5s ease
+
+						&:hover
+							border solid 1px #ddd
+							transition border 0.2s ease
+
+						&:focus
+							color darken($theme-color, 20%)
+							border solid 1px $theme-color
+							transition color 0, border 0
+
+				> .result
+					display block
+					top 0
+					left 0
+					z-index 2
+					width 100%
+					margin 0
+					padding 0
+					background #fff
+
+					> .users
+						margin 0
+						padding 0
+						list-style none
+
+						> li
+							display inline-block
+							z-index 1
+							width 100%
+							padding 8px 32px
+							vertical-align top
+							white-space nowrap
+							overflow hidden
+							color rgba(0, 0, 0, 0.8)
+							text-decoration none
+							transition none
+							cursor pointer
+
+							&:hover
+							&:focus
+								color #fff
+								background $theme-color
+
+								.name
+									color #fff
+
+								.username
+									color #fff
+
+							&:active
+								color #fff
+								background darken($theme-color, 10%)
+
+								.name
+									color #fff
+
+								.username
+									color #fff
+
+							.avatar
+								vertical-align middle
+								min-width 32px
+								min-height 32px
+								max-width 32px
+								max-height 32px
+								margin 0 8px 0 0
+								border-radius 6px
+
+							.name
+								margin 0 8px 0 0
+								/*font-weight bold*/
+								font-weight normal
+								color rgba(0, 0, 0, 0.8)
+
+							.username
+								font-weight normal
+								color rgba(0, 0, 0, 0.3)
+
+			> .history
+
+				> a
+					display block
+					text-decoration none
+					background #fff
+					border-bottom solid 1px #eee
+
+					*
+						pointer-events none
+						user-select none
+
+					&:hover
+						background #fafafa
+
+						> .avatar
+							filter saturate(200%)
+
+					&:active
+						background #eee
+
+					&[data-is-read]
+					&[data-is-me]
+						opacity 0.8
+
+					&:not([data-is-me]):not([data-is-read])
+						> div
+							background-image url("/assets/unread.svg")
+							background-repeat no-repeat
+							background-position 0 center
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> div
+						max-width 500px
+						margin 0 auto
+						padding 20px 30px
+
+						&:after
+							content ""
+							display block
+							clear both
+
+						> header
+							margin-bottom 2px
+							white-space nowrap
+							overflow hidden
+
+							> .name
+								text-align left
+								display inline
+								margin 0
+								padding 0
+								font-size 1em
+								color rgba(0, 0, 0, 0.9)
+								font-weight bold
+								transition all 0.1s ease
+
+							> .username
+								text-align left
+								margin 0 0 0 8px
+								color rgba(0, 0, 0, 0.5)
+
+							> mk-time
+								position absolute
+								top 0
+								right 0
+								display inline
+								color rgba(0, 0, 0, 0.5)
+								font-size 80%
+
+						> .avatar
+							float left
+							width 54px
+							height 54px
+							margin 0 16px 0 0
+							border-radius 8px
+							transition all 0.1s ease
+
+						> .body
+
+							> .text
+								display block
+								margin 0 0 0 0
+								padding 0
+								overflow hidden
+								overflow-wrap break-word
+								font-size 1.1em
+								color rgba(0, 0, 0, 0.8)
+
+								.me
+									color rgba(0, 0, 0, 0.4)
+
+							> .image
+								display block
+								max-width 100%
+								max-height 512px
+
+			> .no-history
+				margin 0
+				padding 2em 1em
+				text-align center
+				color #999
+				font-weight 500
+
+			> .fetching
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> [data-fa]
+					margin-right 4px
+
+			// TODO: element base media query
+			@media (max-width 400px)
+				> .search
+					> .result
+						> .users
+							> li
+								padding 8px 16px
+
+				> .history
+					> a
+						&:not([data-is-me]):not([data-is-read])
+							> div
+								background-image none
+								border-left solid 4px #3aa2dc
+
+						> div
+							padding 16px
+							font-size 14px
+
+							> .avatar
+								margin 0 12px 0 0
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('messaging-index-stream');
+		this.connection = this.messagingIndexStream.getConnection();
+		this.connectionId = this.messagingIndexStream.use();
+
+		this.searchResult = [];
+		this.history = [];
+		this.fetching = true;
+
+		this.registerMessage = message => {
+			message.is_me = message.user_id == this.I.id;
+			message._click = () => {
+				this.$emit('navigate-user', message.is_me ? message.recipient : message.user);
+			};
+		};
+
+		this.on('mount', () => {
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+
+			this.api('messaging/history').then(history => {
+				this.fetching = false;
+				history.forEach(message => {
+					this.registerMessage(message);
+				});
+				this.history = history;
+				this.update();
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('message', this.onMessage);
+			this.connection.off('read', this.onRead);
+			this.messagingIndexStream.dispose(this.connectionId);
+		});
+
+		this.onMessage = message => {
+			this.history = this.history.filter(m => !(
+				(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
+				(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
+
+			this.registerMessage(message);
+
+			this.history.unshift(message);
+			this.update();
+		};
+
+		this.onRead = ids => {
+			ids.forEach(id => {
+				const found = this.history.find(m => m.id == id);
+				if (found) found.is_read = true;
+			});
+
+			this.update();
+		};
+
+		this.search = () => {
+			const q = this.$refs.search.value;
+			if (q == '') {
+				this.searchResult = [];
+				return;
+			}
+			this.api('users/search', {
+				query: q,
+				max: 5
+			}).then(users => {
+				users.forEach(user => {
+					user._click = () => {
+						this.$emit('navigate-user', user);
+						this.searchResult = [];
+					};
+				});
+				this.update({
+					searchResult: users
+				});
+			});
+		};
+
+		this.onSearchKeydown = e => {
+			switch (e.which) {
+				case 9: // [TAB]
+				case 40: // [↓]
+					e.preventDefault();
+					e.stopPropagation();
+					this.$refs.searchResult.childNodes[0].focus();
+					break;
+			}
+		};
+
+		this.onSearchResultKeydown = (i, e) => {
+			const cancel = () => {
+				e.preventDefault();
+				e.stopPropagation();
+			};
+			switch (true) {
+				case e.which == 10: // [ENTER]
+				case e.which == 13: // [ENTER]
+					cancel();
+					this.searchResult[i]._click();
+					break;
+
+				case e.which == 27: // [ESC]
+					cancel();
+					this.$refs.search.focus();
+					break;
+
+				case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
+				case e.which == 38: // [↑]
+					cancel();
+					(this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
+					break;
+
+				case e.which == 9: // [TAB]
+				case e.which == 40: // [↓]
+					cancel();
+					(this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus();
+					break;
+			}
+		};
+
+	</script>
+</mk-messaging>
diff --git a/src/web/app/common/-tags/messaging/message.tag b/src/web/app/common/-tags/messaging/message.tag
new file mode 100644
index 0000000000..ba6d26a184
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/message.tag
@@ -0,0 +1,238 @@
+<mk-messaging-message data-is-me={ message.is_me }>
+	<a class="avatar-anchor" href={ '/' + message.user.username } title={ message.user.username } target="_blank">
+		<img class="avatar" src={ message.user.avatar_url + '?thumbnail&size=80' } alt=""/>
+	</a>
+	<div class="content-container">
+		<div class="balloon">
+			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
+			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%"><img src="/assets/desktop/messaging/delete.png" alt="Delete"/></button>
+			<div class="content" v-if="!message.is_deleted">
+				<div ref="text"></div>
+				<div class="image" v-if="message.file"><img src={ message.file.url } alt="image" title={ message.file.name }/></div>
+			</div>
+			<div class="content" v-if="message.is_deleted">
+				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
+			</div>
+		</div>
+		<footer>
+			<mk-time time={ message.created_at }/><template v-if="message.is_edited">%fa:pencil-alt%</template>
+		</footer>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			$me-balloon-color = #23A7B6
+
+			display block
+			padding 10px 12px 10px 12px
+			background-color transparent
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar-anchor
+				display block
+
+				> .avatar
+					display block
+					min-width 54px
+					min-height 54px
+					max-width 54px
+					max-height 54px
+					margin 0
+					border-radius 8px
+					transition all 0.1s ease
+
+			> .content-container
+				display block
+				margin 0 12px
+				padding 0
+				max-width calc(100% - 78px)
+
+				> .balloon
+					display block
+					float inherit
+					margin 0
+					padding 0
+					max-width 100%
+					min-height 38px
+					border-radius 16px
+
+					&:before
+						content ""
+						pointer-events none
+						display block
+						position absolute
+						top 12px
+
+					&:hover
+						> .delete-button
+							display block
+
+					> .delete-button
+						display none
+						position absolute
+						z-index 1
+						top -4px
+						right -4px
+						margin 0
+						padding 0
+						cursor pointer
+						outline none
+						border none
+						border-radius 0
+						box-shadow none
+						background transparent
+
+						> img
+							vertical-align bottom
+							width 16px
+							height 16px
+							cursor pointer
+
+					> .read
+						user-select none
+						display block
+						position absolute
+						z-index 1
+						bottom -4px
+						left -12px
+						margin 0
+						color rgba(0, 0, 0, 0.5)
+						font-size 11px
+
+					> .content
+
+						> .is-deleted
+							display block
+							margin 0
+							padding 0
+							overflow hidden
+							overflow-wrap break-word
+							font-size 1em
+							color rgba(0, 0, 0, 0.5)
+
+						> [ref='text']
+							display block
+							margin 0
+							padding 8px 16px
+							overflow hidden
+							overflow-wrap break-word
+							font-size 1em
+							color rgba(0, 0, 0, 0.8)
+
+							&, *
+								user-select text
+								cursor auto
+
+							& + .file
+								&.image
+									> img
+										border-radius 0 0 16px 16px
+
+						> .file
+							&.image
+								> img
+									display block
+									max-width 100%
+									max-height 512px
+									border-radius 16px
+
+				> footer
+					display block
+					clear both
+					margin 0
+					padding 2px
+					font-size 10px
+					color rgba(0, 0, 0, 0.4)
+
+					> [data-fa]
+						margin-left 4px
+
+			&:not([data-is-me='true'])
+				> .avatar-anchor
+					float left
+
+				> .content-container
+					float left
+
+					> .balloon
+						background #eee
+
+						&:before
+							left -14px
+							border-top solid 8px transparent
+							border-right solid 8px #eee
+							border-bottom solid 8px transparent
+							border-left solid 8px transparent
+
+					> footer
+						text-align left
+
+			&[data-is-me='true']
+				> .avatar-anchor
+					float right
+
+				> .content-container
+					float right
+
+					> .balloon
+						background $me-balloon-color
+
+						&:before
+							right -14px
+							left auto
+							border-top solid 8px transparent
+							border-right solid 8px transparent
+							border-bottom solid 8px transparent
+							border-left solid 8px $me-balloon-color
+
+						> .content
+
+							> p.is-deleted
+								color rgba(255, 255, 255, 0.5)
+
+							> [ref='text']
+								&, *
+									color #fff !important
+
+					> footer
+						text-align right
+
+			&[data-is-deleted='true']
+					> .content-container
+						opacity 0.5
+
+	</style>
+	<script lang="typescript">
+		import compile from '../../../common/scripts/text-compiler';
+
+		this.mixin('i');
+
+		this.message = this.opts.message;
+		this.message.is_me = this.message.user.id == this.I.id;
+
+		this.on('mount', () => {
+			if (this.message.text) {
+				const tokens = this.message.ast;
+
+				this.$refs.text.innerHTML = compile(tokens);
+
+				Array.from(this.$refs.text.children).forEach(e => {
+					if (e.tagName == 'MK-URL') riot.mount(e);
+				});
+
+				// URLをプレビュー
+				tokens
+					.filter(t => t.type == 'link')
+					.map(t => {
+						const el = this.$refs.text.appendChild(document.createElement('mk-url-preview'));
+						riot.mount(el, {
+							url: t.content
+						});
+					});
+			}
+		});
+	</script>
+</mk-messaging-message>
diff --git a/src/web/app/common/-tags/messaging/room.tag b/src/web/app/common/-tags/messaging/room.tag
new file mode 100644
index 0000000000..990f20a8e3
--- /dev/null
+++ b/src/web/app/common/-tags/messaging/room.tag
@@ -0,0 +1,319 @@
+<mk-messaging-room>
+	<div class="stream">
+		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
+		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
+		<p class="no-history" v-if="!init && messages.length > 0 && !moreMessagesIsInStock">%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
+		<button class="more { fetching: fetchingMoreMessages }" v-if="moreMessagesIsInStock" @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
+			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
+		</button>
+		<template each={ message, i in messages }>
+			<mk-messaging-message message={ message }/>
+			<p class="date" v-if="i != messages.length - 1 && message._date != messages[i + 1]._date"><span>{ messages[i + 1]._datetext }</span></p>
+		</template>
+	</div>
+	<footer>
+		<div ref="notifications"></div>
+		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
+		<mk-messaging-form user={ user }/>
+	</footer>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> .stream
+				max-width 600px
+				margin 0 auto
+
+				> .init
+					width 100%
+					margin 0
+					padding 16px 8px 8px 8px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .empty
+					width 100%
+					margin 0
+					padding 16px 8px 8px 8px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .no-history
+					display block
+					margin 0
+					padding 16px
+					text-align center
+					font-size 0.8em
+					color rgba(0, 0, 0, 0.4)
+
+					[data-fa]
+						margin-right 4px
+
+				> .more
+					display block
+					margin 16px auto
+					padding 0 12px
+					line-height 24px
+					color #fff
+					background rgba(0, 0, 0, 0.3)
+					border-radius 12px
+
+					&:hover
+						background rgba(0, 0, 0, 0.4)
+
+					&:active
+						background rgba(0, 0, 0, 0.5)
+
+					&.fetching
+						cursor wait
+
+					> [data-fa]
+						margin-right 4px
+
+				> .message
+					// something
+
+				> .date
+					display block
+					margin 8px 0
+					text-align center
+
+					&:before
+						content ''
+						display block
+						position absolute
+						height 1px
+						width 90%
+						top 16px
+						left 0
+						right 0
+						margin 0 auto
+						background rgba(0, 0, 0, 0.1)
+
+					> span
+						display inline-block
+						margin 0
+						padding 0 16px
+						//font-weight bold
+						line-height 32px
+						color rgba(0, 0, 0, 0.3)
+						background #fff
+
+			> footer
+				position -webkit-sticky
+				position sticky
+				z-index 2
+				bottom 0
+				width 100%
+				max-width 600px
+				margin 0 auto
+				padding 0
+				background rgba(255, 255, 255, 0.95)
+				background-clip content-box
+
+				> [ref='notifications']
+					position absolute
+					top -48px
+					width 100%
+					padding 8px 0
+					text-align center
+
+					&:empty
+						display none
+
+					> p
+						display inline-block
+						margin 0
+						padding 0 12px 0 28px
+						cursor pointer
+						line-height 32px
+						font-size 12px
+						color $theme-color-foreground
+						background $theme-color
+						border-radius 16px
+						transition opacity 1s ease
+
+						> [data-fa]
+							position absolute
+							top 0
+							left 10px
+							line-height 32px
+							font-size 16px
+
+				> .grippie
+					height 10px
+					margin-top -10px
+					background transparent
+					cursor ns-resize
+
+					&:hover
+						//background rgba(0, 0, 0, 0.1)
+
+					&:active
+						//background rgba(0, 0, 0, 0.2)
+
+	</style>
+	<script lang="typescript">
+		import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.init = true;
+		this.sending = false;
+		this.messages = [];
+		this.isNaked = this.opts.isNaked;
+
+		this.connection = new MessagingStreamConnection(this.I, this.user.id);
+
+		this.on('mount', () => {
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+
+			document.addEventListener('visibilitychange', this.onVisibilitychange);
+
+			this.fetchMessages().then(() => {
+				this.init = false;
+				this.update();
+				this.scrollToBottom();
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('message', this.onMessage);
+			this.connection.off('read', this.onRead);
+			this.connection.close();
+
+			document.removeEventListener('visibilitychange', this.onVisibilitychange);
+		});
+
+		this.on('update', () => {
+			this.messages.forEach(message => {
+				const date = (new Date(message.created_at)).getDate();
+				const month = (new Date(message.created_at)).getMonth() + 1;
+				message._date = date;
+				message._datetext = month + '月 ' + date + '日';
+			});
+		});
+
+		this.onMessage = (message) => {
+			const isBottom = this.isBottom();
+
+			this.messages.push(message);
+			if (message.user_id != this.I.id && !document.hidden) {
+				this.connection.send({
+					type: 'read',
+					id: message.id
+				});
+			}
+			this.update();
+
+			if (isBottom) {
+				// Scroll to bottom
+				this.scrollToBottom();
+			} else if (message.user_id != this.I.id) {
+				// Notify
+				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
+			}
+		};
+
+		this.onRead = ids => {
+			if (!Array.isArray(ids)) ids = [ids];
+			ids.forEach(id => {
+				if (this.messages.some(x => x.id == id)) {
+					const exist = this.messages.map(x => x.id).indexOf(id);
+					this.messages[exist].is_read = true;
+					this.update();
+				}
+			});
+		};
+
+		this.fetchMoreMessages = () => {
+			this.update({
+				fetchingMoreMessages: true
+			});
+			this.fetchMessages().then(() => {
+				this.update({
+					fetchingMoreMessages: false
+				});
+			});
+		};
+
+		this.fetchMessages = () => new Promise((resolve, reject) => {
+			const max = this.moreMessagesIsInStock ? 20 : 10;
+
+			this.api('messaging/messages', {
+				user_id: this.user.id,
+				limit: max + 1,
+				until_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
+			}).then(messages => {
+				if (messages.length == max + 1) {
+					this.moreMessagesIsInStock = true;
+					messages.pop();
+				} else {
+					this.moreMessagesIsInStock = false;
+				}
+
+				this.messages.unshift.apply(this.messages, messages.reverse());
+				this.update();
+
+				resolve();
+			});
+		});
+
+		this.isBottom = () => {
+			const asobi = 32;
+			const current = this.isNaked
+				? window.scrollY + window.innerHeight
+				: this.root.scrollTop + this.root.offsetHeight;
+			const max = this.isNaked
+				? document.body.offsetHeight
+				: this.root.scrollHeight;
+			return current > (max - asobi);
+		};
+
+		this.scrollToBottom = () => {
+			if (this.isNaked) {
+				window.scroll(0, document.body.offsetHeight);
+			} else {
+				this.root.scrollTop = this.root.scrollHeight;
+			}
+		};
+
+		this.notify = message => {
+			const n = document.createElement('p');
+			n.innerHTML = '%fa:arrow-circle-down%' + message;
+			n.onclick = () => {
+				this.scrollToBottom();
+				n.parentNode.removeChild(n);
+			};
+			this.$refs.notifications.appendChild(n);
+
+			setTimeout(() => {
+				n.style.opacity = 0;
+				setTimeout(() => n.parentNode.removeChild(n), 1000);
+			}, 4000);
+		};
+
+		this.onVisibilitychange = () => {
+			if (document.hidden) return;
+			this.messages.forEach(message => {
+				if (message.user_id !== this.I.id && !message.is_read) {
+					this.connection.send({
+						type: 'read',
+						id: message.id
+					});
+				}
+			});
+		};
+	</script>
+</mk-messaging-room>
diff --git a/src/web/app/common/-tags/nav-links.tag b/src/web/app/common/-tags/nav-links.tag
new file mode 100644
index 0000000000..3f2613c16d
--- /dev/null
+++ b/src/web/app/common/-tags/nav-links.tag
@@ -0,0 +1,10 @@
+<mk-nav-links>
+	<a href={ aboutUrl }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
+	</script>
+</mk-nav-links>
diff --git a/src/web/app/common/-tags/number.tag b/src/web/app/common/-tags/number.tag
new file mode 100644
index 0000000000..9cbbacd2c7
--- /dev/null
+++ b/src/web/app/common/-tags/number.tag
@@ -0,0 +1,16 @@
+<mk-number>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.on('mount', () => {
+			let value = this.opts.value;
+			const max = this.opts.max;
+
+			if (max != null && value > max) value = max;
+
+			this.root.innerHTML = value.toLocaleString();
+		});
+	</script>
+</mk-number>
diff --git a/src/web/app/common/-tags/poll-editor.tag b/src/web/app/common/-tags/poll-editor.tag
new file mode 100644
index 0000000000..0de26f6547
--- /dev/null
+++ b/src/web/app/common/-tags/poll-editor.tag
@@ -0,0 +1,121 @@
+<mk-poll-editor>
+	<p class="caution" v-if="choices.length < 2">
+		%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
+	</p>
+	<ul ref="choices">
+		<li each={ choice, i in choices }>
+			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
+			<button @click="remove.bind(null, i)" title="%i18n:common.tags.mk-poll-editor.remove%">
+				%fa:times%
+			</button>
+		</li>
+	</ul>
+	<button class="add" v-if="choices.length < 10" @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
+	<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
+		%fa:times%
+	</button>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			padding 8px
+
+			> .caution
+				margin 0 0 8px 0
+				font-size 0.8em
+				color #f00
+
+				> [data-fa]
+					margin-right 4px
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 8px 0
+					padding 0
+					width 100%
+
+					&:first-child
+						margin-top 0
+
+					&:last-child
+						margin-bottom 0
+
+					> input
+						padding 6px
+						border solid 1px rgba($theme-color, 0.1)
+						border-radius 4px
+
+						&:hover
+							border-color rgba($theme-color, 0.2)
+
+						&:focus
+							border-color rgba($theme-color, 0.5)
+
+					> button
+						padding 4px 8px
+						color rgba($theme-color, 0.4)
+
+						&:hover
+							color rgba($theme-color, 0.6)
+
+						&:active
+							color darken($theme-color, 30%)
+
+			> .add
+				margin 8px 0 0 0
+				vertical-align top
+				color $theme-color
+
+			> .destroy
+				position absolute
+				top 0
+				right 0
+				padding 4px 8px
+				color rgba($theme-color, 0.4)
+
+				&:hover
+					color rgba($theme-color, 0.6)
+
+				&:active
+					color darken($theme-color, 30%)
+
+	</style>
+	<script lang="typescript">
+		this.choices = ['', ''];
+
+		this.oninput = (i, e) => {
+			this.choices[i] = e.target.value;
+		};
+
+		this.add = () => {
+			this.choices.push('');
+			this.update();
+			this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus();
+		};
+
+		this.remove = (i) => {
+			this.choices = this.choices.filter((_, _i) => _i != i);
+			this.update();
+		};
+
+		this.destroy = () => {
+			this.opts.ondestroy();
+		};
+
+		this.get = () => {
+			return {
+				choices: this.choices.filter(choice => choice != '')
+			}
+		};
+
+		this.set = data => {
+			if (data.choices.length == 0) return;
+			this.choices = data.choices;
+		};
+	</script>
+</mk-poll-editor>
diff --git a/src/web/app/common/-tags/post-menu.tag b/src/web/app/common/-tags/post-menu.tag
new file mode 100644
index 0000000000..c2b362e8b5
--- /dev/null
+++ b/src/web/app/common/-tags/post-menu.tag
@@ -0,0 +1,157 @@
+<mk-post-menu>
+	<div class="backdrop" ref="backdrop" @click="close"></div>
+	<div class="popover { compact: opts.compact }" ref="popover">
+		<button v-if="post.user_id === I.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
+		<div v-if="I.is_pro && !post.is_category_verified">
+			<select ref="categorySelect">
+				<option value="">%i18n:common.tags.mk-post-menu.select%</option>
+				<option value="music">%i18n:common.post_categories.music%</option>
+				<option value="game">%i18n:common.post_categories.game%</option>
+				<option value="anime">%i18n:common.post_categories.anime%</option>
+				<option value="it">%i18n:common.post_categories.it%</option>
+				<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
+				<option value="photography">%i18n:common.post_categories.photography%</option>
+			</select>
+			<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
+		</div>
+	</div>
+	<style lang="stylus" scoped>
+		$border-color = rgba(27, 31, 35, 0.15)
+
+		:scope
+			display block
+			position initial
+
+			> .backdrop
+				position fixed
+				top 0
+				left 0
+				z-index 10000
+				width 100%
+				height 100%
+				background rgba(0, 0, 0, 0.1)
+				opacity 0
+
+			> .popover
+				position absolute
+				z-index 10001
+				background #fff
+				border 1px solid $border-color
+				border-radius 4px
+				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+				transform scale(0.5)
+				opacity 0
+
+				$balloon-size = 16px
+
+				&:not(.compact)
+					margin-top $balloon-size
+					transform-origin center -($balloon-size)
+
+					&:before
+						content ""
+						display block
+						position absolute
+						top -($balloon-size * 2)
+						left s('calc(50% - %s)', $balloon-size)
+						border-top solid $balloon-size transparent
+						border-left solid $balloon-size transparent
+						border-right solid $balloon-size transparent
+						border-bottom solid $balloon-size $border-color
+
+					&:after
+						content ""
+						display block
+						position absolute
+						top -($balloon-size * 2) + 1.5px
+						left s('calc(50% - %s)', $balloon-size)
+						border-top solid $balloon-size transparent
+						border-left solid $balloon-size transparent
+						border-right solid $balloon-size transparent
+						border-bottom solid $balloon-size #fff
+
+				> button
+					display block
+
+	</style>
+	<script lang="typescript">
+		import anime from 'animejs';
+
+		this.mixin('i');
+		this.mixin('api');
+
+		this.post = this.opts.post;
+		this.source = this.opts.source;
+
+		this.on('mount', () => {
+			const rect = this.source.getBoundingClientRect();
+			const width = this.$refs.popover.offsetWidth;
+			const height = this.$refs.popover.offsetHeight;
+			if (this.opts.compact) {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
+				this.$refs.popover.style.top = (y - (height / 2)) + 'px';
+			} else {
+				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
+				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
+				this.$refs.popover.style.top = y + 'px';
+			}
+
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.popover,
+				opacity: 1,
+				scale: [0.5, 1],
+				duration: 500
+			});
+		});
+
+		this.pin = () => {
+			this.api('i/pin', {
+				post_id: this.post.id
+			}).then(() => {
+				if (this.opts.cb) this.opts.cb('pinned', '%i18n:common.tags.mk-post-menu.pinned%');
+				this.$destroy();
+			});
+		};
+
+		this.categorize = () => {
+			const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value;
+			this.api('posts/categorize', {
+				post_id: this.post.id,
+				category: category
+			}).then(() => {
+				if (this.opts.cb) this.opts.cb('categorized', '%i18n:common.tags.mk-post-menu.categorized%');
+				this.$destroy();
+			});
+		};
+
+		this.close = () => {
+			this.$refs.backdrop.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			this.$refs.popover.style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		};
+	</script>
+</mk-post-menu>
diff --git a/src/web/app/common/-tags/raw.tag b/src/web/app/common/-tags/raw.tag
new file mode 100644
index 0000000000..149ac6c4bf
--- /dev/null
+++ b/src/web/app/common/-tags/raw.tag
@@ -0,0 +1,13 @@
+<mk-raw>
+	<style lang="stylus" scoped>
+		:scope
+			display inline
+	</style>
+	<script lang="typescript">
+		this.root.innerHTML = this.opts.content;
+
+		this.on('updated', () => {
+			this.root.innerHTML = this.opts.content;
+		});
+	</script>
+</mk-raw>
diff --git a/src/web/app/common/-tags/signin-history.tag b/src/web/app/common/-tags/signin-history.tag
new file mode 100644
index 0000000000..57ac5ec979
--- /dev/null
+++ b/src/web/app/common/-tags/signin-history.tag
@@ -0,0 +1,116 @@
+<mk-signin-history>
+	<div class="records" v-if="history.length != 0">
+		<mk-signin-record each={ rec in history } rec={ rec }/>
+	</div>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+		this.mixin('api');
+
+		this.mixin('stream');
+		this.connection = this.stream.getConnection();
+		this.connectionId = this.stream.use();
+
+		this.history = [];
+		this.fetching = true;
+
+		this.on('mount', () => {
+			this.api('i/signin_history').then(history => {
+				this.update({
+					fetching: false,
+					history: history
+				});
+			});
+
+			this.connection.on('signin', this.onSignin);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('signin', this.onSignin);
+			this.stream.dispose(this.connectionId);
+		});
+
+		this.onSignin = signin => {
+			this.history.unshift(signin);
+			this.update();
+		};
+	</script>
+</mk-signin-history>
+
+<mk-signin-record>
+	<header @click="toggle">
+		<template v-if="rec.success">%fa:check%</template>
+		<template v-if="!rec.success">%fa:times%</template>
+		<span class="ip">{ rec.ip }</span>
+		<mk-time time={ rec.created_at }/>
+	</header>
+	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
+
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			border-bottom solid 1px #eee
+
+			> header
+				display flex
+				padding 8px 0
+				line-height 32px
+				cursor pointer
+
+				> [data-fa]
+					margin-right 8px
+					text-align left
+
+					&.check
+						color #0fda82
+
+					&.times
+						color #ff3100
+
+				> .ip
+					display inline-block
+					text-align left
+					padding 8px
+					line-height 16px
+					font-family monospace
+					font-size 14px
+					color #444
+					background #f8f8f8
+					border-radius 4px
+
+				> mk-time
+					margin-left auto
+					text-align right
+					color #777
+
+			> pre
+				overflow auto
+				margin 0 0 16px 0
+				max-height 100px
+				white-space pre-wrap
+				word-break break-all
+				color #4a535a
+
+	</style>
+
+	<script lang="typescript">
+		import hljs from 'highlight.js';
+
+		this.rec = this.opts.rec;
+		this.show = false;
+
+		this.on('mount', () => {
+			hljs.highlightBlock(this.$refs.headers);
+		});
+
+		this.toggle = () => {
+			this.update({
+				show: !this.show
+			});
+		};
+	</script>
+</mk-signin-record>
diff --git a/src/web/app/common/-tags/signin.tag b/src/web/app/common/-tags/signin.tag
new file mode 100644
index 0000000000..89213d1f73
--- /dev/null
+++ b/src/web/app/common/-tags/signin.tag
@@ -0,0 +1,155 @@
+<mk-signin>
+	<form :class="{ signing: signing }" onsubmit={ onsubmit }>
+		<label class="user-name">
+			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
+		</label>
+		<label class="password">
+			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
+		</label>
+		<label class="token" v-if="user && user.two_factor_enabled">
+			<input ref="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required="required"/>%fa:lock%
+		</label>
+		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
+	</form>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			> form
+				display block
+				z-index 2
+
+				&.signing
+					&, *
+						cursor wait !important
+
+				label
+					display block
+					margin 12px 0
+
+					[data-fa]
+						display block
+						pointer-events none
+						position absolute
+						bottom 0
+						top 0
+						left 0
+						z-index 1
+						margin auto
+						padding 0 16px
+						height 1em
+						color #898786
+
+					input[type=text]
+					input[type=password]
+					input[type=number]
+						user-select text
+						display inline-block
+						cursor auto
+						padding 0 0 0 38px
+						margin 0
+						width 100%
+						line-height 44px
+						font-size 1em
+						color rgba(0, 0, 0, 0.7)
+						background #fff
+						outline none
+						border solid 1px #eee
+						border-radius 4px
+
+						&:hover
+							background rgba(255, 255, 255, 0.7)
+							border-color #ddd
+
+							& + i
+								color #797776
+
+						&:focus
+							background #fff
+							border-color #ccc
+
+							& + i
+								color #797776
+
+				[type=submit]
+					cursor pointer
+					padding 16px
+					margin -6px 0 0 0
+					width 100%
+					font-size 1.2em
+					color rgba(0, 0, 0, 0.5)
+					outline none
+					border none
+					border-radius 0
+					background transparent
+					transition all .5s ease
+
+					&:hover
+						color $theme-color
+						transition all .2s ease
+
+					&:focus
+						color $theme-color
+						transition all .2s ease
+
+					&:active
+						color darken($theme-color, 30%)
+						transition all .2s ease
+
+					&:disabled
+						opacity 0.7
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+
+		this.user = null;
+		this.signing = false;
+
+		this.oninput = () => {
+			this.api('users/show', {
+				username: this.$refs.username.value
+			}).then(user => {
+				this.user = user;
+				this.$emit('user', user);
+				this.update();
+			});
+		};
+
+		this.onsubmit = e => {
+			e.preventDefault();
+
+			if (this.$refs.username.value == '') {
+				this.$refs.username.focus();
+				return false;
+			}
+			if (this.$refs.password.value == '') {
+				this.$refs.password.focus();
+				return false;
+			}
+			if (this.user && this.user.two_factor_enabled && this.$refs.token.value == '') {
+				this.$refs.token.focus();
+				return false;
+			}
+
+			this.update({
+				signing: true
+			});
+
+			this.api('signin', {
+				username: this.$refs.username.value,
+				password: this.$refs.password.value,
+				token: this.user && this.user.two_factor_enabled ? this.$refs.token.value : undefined
+			}).then(() => {
+				location.reload();
+			}).catch(() => {
+				alert('something happened');
+				this.update({
+					signing: false
+				});
+			});
+
+			return false;
+		};
+	</script>
+</mk-signin>
diff --git a/src/web/app/common/-tags/signup.tag b/src/web/app/common/-tags/signup.tag
new file mode 100644
index 0000000000..99be10609b
--- /dev/null
+++ b/src/web/app/common/-tags/signup.tag
@@ -0,0 +1,307 @@
+<mk-signup>
+	<form onsubmit={ onsubmit } autocomplete="off">
+		<label class="username">
+			<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
+			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
+			<p class="profile-page-url-preview" v-if="refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange'">{ _URL_ + '/' + refs.username.value }</p>
+			<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:common.tags.mk-signup.checking%</p>
+			<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
+			<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
+			<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
+			<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
+			<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
+			<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
+		</label>
+		<label class="password">
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
+			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
+			<div class="meter" v-if="passwordStrength != ''" data-strength={ passwordStrength }>
+				<div class="value" ref="passwordMetar"></div>
+			</div>
+			<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
+			<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
+			<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
+		</label>
+		<label class="retype-password">
+			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
+			<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
+			<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
+			<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
+		</label>
+		<label class="recaptcha">
+			<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:common.tags.mk-signup.recaptcha%</p>
+			<div v-if="recaptcha" class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
+		</label>
+		<label class="agree-tou">
+			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
+			<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
+		</label>
+		<button @click="onsubmit">%i18n:common.tags.mk-signup.create%</button>
+	</form>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			min-width 302px
+			overflow hidden
+
+			> form
+
+				label
+					display block
+					margin 16px 0
+
+					> .caption
+						margin 0 0 4px 0
+						color #828888
+						font-size 0.95em
+
+						> [data-fa]
+							margin-right 0.25em
+							color #96adac
+
+					> .info
+						display block
+						margin 4px 0
+						font-size 0.8em
+
+						> [data-fa]
+							margin-right 0.3em
+
+					&.username
+						.profile-page-url-preview
+							display block
+							margin 4px 8px 0 4px
+							font-size 0.8em
+							color #888
+
+							&:empty
+								display none
+
+							&:not(:empty) + .info
+								margin-top 0
+
+					&.password
+						.meter
+							display block
+							margin-top 8px
+							width 100%
+							height 8px
+
+							&[data-strength='']
+								display none
+
+							&[data-strength='low']
+								> .value
+									background #d73612
+
+							&[data-strength='medium']
+								> .value
+									background #d7ca12
+
+							&[data-strength='high']
+								> .value
+									background #61bb22
+
+							> .value
+								display block
+								width 0%
+								height 100%
+								background transparent
+								border-radius 4px
+								transition all 0.1s ease
+
+				[type=text], [type=password]
+					user-select text
+					display inline-block
+					cursor auto
+					padding 0 12px
+					margin 0
+					width 100%
+					line-height 44px
+					font-size 1em
+					color #333 !important
+					background #fff !important
+					outline none
+					border solid 1px rgba(0, 0, 0, 0.1)
+					border-radius 4px
+					box-shadow 0 0 0 114514px #fff inset
+					transition all .3s ease
+
+					&:hover
+						border-color rgba(0, 0, 0, 0.2)
+						transition all .1s ease
+
+					&:focus
+						color $theme-color !important
+						border-color $theme-color
+						box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
+						transition all 0s ease
+
+					&:disabled
+						opacity 0.5
+
+				.agree-tou
+					padding 4px
+					border-radius 4px
+
+					&:hover
+						background #f4f4f4
+
+					&:active
+						background #eee
+
+					&, *
+						cursor pointer
+
+					p
+						display inline
+						color #555
+
+				button
+					margin 0 0 32px 0
+					padding 16px
+					width 100%
+					font-size 1em
+					color #fff
+					background $theme-color
+					border-radius 3px
+
+					&:hover
+						background lighten($theme-color, 5%)
+
+					&:active
+						background darken($theme-color, 5%)
+
+	</style>
+	<script lang="typescript">
+		this.mixin('api');
+		const getPasswordStrength = require('syuilo-password-strength');
+
+		this.usernameState = null;
+		this.passwordStrength = '';
+		this.passwordRetypeState = null;
+		this.recaptchaed = false;
+
+		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/tou`;
+
+		window.onRecaptchaed = () => {
+			this.recaptchaed = true;
+			this.update();
+		};
+
+		window.onRecaptchaExpired = () => {
+			this.recaptchaed = false;
+			this.update();
+		};
+
+		this.on('mount', () => {
+			this.update({
+				recaptcha: {
+					site_key: _RECAPTCHA_SITEKEY_
+				}
+			});
+
+			const head = document.getElementsByTagName('head')[0];
+			const script = document.createElement('script');
+			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
+			head.appendChild(script);
+		});
+
+		this.onChangeUsername = () => {
+			const username = this.$refs.username.value;
+
+			if (username == '') {
+				this.update({
+					usernameState: null
+				});
+				return;
+			}
+
+			const err =
+				!username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
+				username.length < 3 ? 'min-range' :
+				username.length > 20 ? 'max-range' :
+				null;
+
+			if (err) {
+				this.update({
+					usernameState: err
+				});
+				return;
+			}
+
+			this.update({
+				usernameState: 'wait'
+			});
+
+			this.api('username/available', {
+				username: username
+			}).then(result => {
+				this.update({
+					usernameState: result.available ? 'ok' : 'unavailable'
+				});
+			}).catch(err => {
+				this.update({
+					usernameState: 'error'
+				});
+			});
+		};
+
+		this.onChangePassword = () => {
+			const password = this.$refs.password.value;
+
+			if (password == '') {
+				this.passwordStrength = '';
+				return;
+			}
+
+			const strength = getPasswordStrength(password);
+			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+			this.update();
+			this.$refs.passwordMetar.style.width = `${strength * 100}%`;
+		};
+
+		this.onChangePasswordRetype = () => {
+			const password = this.$refs.password.value;
+			const retypedPassword = this.$refs.passwordRetype.value;
+
+			if (retypedPassword == '') {
+				this.passwordRetypeState = null;
+				return;
+			}
+
+			this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
+		};
+
+		this.onsubmit = e => {
+			e.preventDefault();
+
+			const username = this.$refs.username.value;
+			const password = this.$refs.password.value;
+
+			const locker = document.body.appendChild(document.createElement('mk-locker'));
+
+			this.api('signup', {
+				username: username,
+				password: password,
+				'g-recaptcha-response': grecaptcha.getResponse()
+			}).then(() => {
+				this.api('signin', {
+					username: username,
+					password: password
+				}).then(() => {
+					location.href = '/';
+				});
+			}).catch(() => {
+				alert('%i18n:common.tags.mk-signup.some-error%');
+
+				grecaptcha.reset();
+				this.recaptchaed = false;
+
+				locker.parentNode.removeChild(locker);
+			});
+
+			return false;
+		};
+	</script>
+</mk-signup>
diff --git a/src/web/app/common/-tags/special-message.tag b/src/web/app/common/-tags/special-message.tag
new file mode 100644
index 0000000000..da903c6325
--- /dev/null
+++ b/src/web/app/common/-tags/special-message.tag
@@ -0,0 +1,27 @@
+<mk-special-message>
+	<p v-if="m == 1 && d == 1">%i18n:common.tags.mk-special-message.new-year%</p>
+	<p v-if="m == 12 && d == 25">%i18n:common.tags.mk-special-message.christmas%</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+
+			&:empty
+				display none
+
+			> p
+				margin 0
+				padding 4px
+				text-align center
+				font-size 14px
+				font-weight bold
+				text-transform uppercase
+				color #fff
+				background #ff1036
+
+	</style>
+	<script lang="typescript">
+		const now = new Date();
+		this.d = now.getDate();
+		this.m = now.getMonth() + 1;
+	</script>
+</mk-special-message>
diff --git a/src/web/app/common/-tags/twitter-setting.tag b/src/web/app/common/-tags/twitter-setting.tag
new file mode 100644
index 0000000000..935239f44e
--- /dev/null
+++ b/src/web/app/common/-tags/twitter-setting.tag
@@ -0,0 +1,62 @@
+<mk-twitter-setting>
+	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
+	<p class="account" v-if="I.twitter" title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
+	<p>
+		<a href={ _API_URL_ + '/connect/twitter' } target="_blank" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
+		<span v-if="I.twitter"> or </span>
+		<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" v-if="I.twitter" @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
+	</p>
+	<p class="id" v-if="I.twitter">Twitter ID: { I.twitter.user_id }</p>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			color #4a535a
+
+			.account
+				border solid 1px #e1e8ed
+				border-radius 4px
+				padding 16px
+
+				a
+					font-weight bold
+					color inherit
+
+			.id
+				color #8899a6
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.form = null;
+
+		this.on('mount', () => {
+			this.I.on('updated', this.onMeUpdated);
+		});
+
+		this.on('unmount', () => {
+			this.I.off('updated', this.onMeUpdated);
+		});
+
+		this.onMeUpdated = () => {
+			if (this.I.twitter) {
+				if (this.form) this.form.close();
+			}
+		};
+
+		this.connect = e => {
+			e.preventDefault();
+			this.form = window.open(_API_URL_ + '/connect/twitter',
+				'twitter_connect_window',
+				'height=570,width=520');
+			return false;
+		};
+
+		this.disconnect = e => {
+			e.preventDefault();
+			window.open(_API_URL_ + '/disconnect/twitter',
+				'twitter_disconnect_window',
+				'height=570,width=520');
+			return false;
+		};
+	</script>
+</mk-twitter-setting>
diff --git a/src/web/app/common/-tags/uploader.tag b/src/web/app/common/-tags/uploader.tag
new file mode 100644
index 0000000000..519b063fac
--- /dev/null
+++ b/src/web/app/common/-tags/uploader.tag
@@ -0,0 +1,199 @@
+<mk-uploader>
+	<ol v-if="uploads.length > 0">
+		<li each={ uploads }>
+			<div class="img" style="background-image: url({ img })"></div>
+			<p class="name">%fa:spinner .pulse%{ name }</p>
+			<p class="status"><span class="initing" v-if="progress == undefined">%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" v-if="progress != undefined">{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" v-if="progress != undefined">{ Math.floor((progress.value / progress.max) * 100) }</span></p>
+			<progress v-if="progress != undefined && progress.value != progress.max" value={ progress.value } max={ progress.max }></progress>
+			<div class="progress initing" v-if="progress == undefined"></div>
+			<div class="progress waiting" v-if="progress != undefined && progress.value == progress.max"></div>
+		</li>
+	</ol>
+	<style lang="stylus" scoped>
+		:scope
+			display block
+			overflow auto
+
+			&:empty
+				display none
+
+			> ol
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 8px 0 0 0
+					padding 0
+					height 36px
+					box-shadow 0 -1px 0 rgba($theme-color, 0.1)
+					border-top solid 8px transparent
+
+					&:first-child
+						margin 0
+						box-shadow none
+						border-top none
+
+					> .img
+						display block
+						position absolute
+						top 0
+						left 0
+						width 36px
+						height 36px
+						background-size cover
+						background-position center center
+
+					> .name
+						display block
+						position absolute
+						top 0
+						left 44px
+						margin 0
+						padding 0
+						max-width 256px
+						font-size 0.8em
+						color rgba($theme-color, 0.7)
+						white-space nowrap
+						text-overflow ellipsis
+						overflow hidden
+
+						> [data-fa]
+							margin-right 4px
+
+					> .status
+						display block
+						position absolute
+						top 0
+						right 0
+						margin 0
+						padding 0
+						font-size 0.8em
+
+						> .initing
+							color rgba($theme-color, 0.5)
+
+						> .kb
+							color rgba($theme-color, 0.5)
+
+						> .percentage
+							display inline-block
+							width 48px
+							text-align right
+
+							color rgba($theme-color, 0.7)
+
+							&:after
+								content '%'
+
+					> progress
+						display block
+						position absolute
+						bottom 0
+						right 0
+						margin 0
+						width calc(100% - 44px)
+						height 8px
+						background transparent
+						border none
+						border-radius 4px
+						overflow hidden
+
+						&::-webkit-progress-value
+							background $theme-color
+
+						&::-webkit-progress-bar
+							background rgba($theme-color, 0.1)
+
+					> .progress
+						display block
+						position absolute
+						bottom 0
+						right 0
+						margin 0
+						width calc(100% - 44px)
+						height 8px
+						border none
+						border-radius 4px
+						background linear-gradient(
+							45deg,
+							lighten($theme-color, 30%) 25%,
+							$theme-color               25%,
+							$theme-color               50%,
+							lighten($theme-color, 30%) 50%,
+							lighten($theme-color, 30%) 75%,
+							$theme-color               75%,
+							$theme-color
+						)
+						background-size 32px 32px
+						animation bg 1.5s linear infinite
+
+						&.initing
+							opacity 0.3
+
+						@keyframes bg
+							from {background-position: 0 0;}
+							to   {background-position: -64px 32px;}
+
+	</style>
+	<script lang="typescript">
+		this.mixin('i');
+
+		this.uploads = [];
+
+		this.upload = (file, folder) => {
+			if (folder && typeof folder == 'object') folder = folder.id;
+
+			const id = Math.random();
+
+			const ctx = {
+				id: id,
+				name: file.name || 'untitled',
+				progress: undefined
+			};
+
+			this.uploads.push(ctx);
+			this.$emit('change-uploads', this.uploads);
+			this.update();
+
+			const reader = new FileReader();
+			reader.onload = e => {
+				ctx.img = e.target.result;
+				this.update();
+			};
+			reader.readAsDataURL(file);
+
+			const data = new FormData();
+			data.append('i', this.I.token);
+			data.append('file', file);
+
+			if (folder) data.append('folder_id', folder);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', _API_URL_ + '/drive/files/create', true);
+			xhr.onload = e => {
+				const driveFile = JSON.parse(e.target.response);
+
+				this.$emit('uploaded', driveFile);
+
+				this.uploads = this.uploads.filter(x => x.id != id);
+				this.$emit('change-uploads', this.uploads);
+
+				this.update();
+			};
+
+			xhr.upload.onprogress = e => {
+				if (e.lengthComputable) {
+					if (ctx.progress == undefined) ctx.progress = {};
+					ctx.progress.max = e.total;
+					ctx.progress.value = e.loaded;
+					this.update();
+				}
+			};
+
+			xhr.send(data);
+		};
+	</script>
+</mk-uploader>
diff --git a/src/web/app/common/tags/activity-table.tag b/src/web/app/common/tags/activity-table.tag
deleted file mode 100644
index 2f716912f3..0000000000
--- a/src/web/app/common/tags/activity-table.tag
+++ /dev/null
@@ -1,57 +0,0 @@
-<mk-activity-table>
-	<svg v-if="data" ref="canvas" viewBox="0 0 53 7" preserveAspectRatio="none">
-		<rect each={ data } width="1" height="1"
-			riot-x={ x } riot-y={ date.weekday }
-			rx="1" ry="1"
-			fill={ color }
-			style="transform: scale({ v });"/>
-		<rect class="today" width="1" height="1"
-			riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
-			rx="1" ry="1"
-			fill="none"
-			stroke-width="0.1"
-			stroke="#f73520"/>
-	</svg>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			max-width 600px
-			margin 0 auto
-
-			> svg
-				display block
-
-				> rect
-					transform-origin center
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = this.opts.user;
-
-		this.on('mount', () => {
-			this.api('aggregation/users/activity', {
-				user_id: this.user.id
-			}).then(data => {
-				data.forEach(d => d.total = d.posts + d.replies + d.reposts);
-				this.peak = Math.max.apply(null, data.map(d => d.total)) / 2;
-				let x = 0;
-				data.reverse().forEach(d => {
-					d.x = x;
-					d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
-
-					d.v = d.total / this.peak;
-					if (d.v > 1) d.v = 1;
-					const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
-					const cs = d.v * 100;
-					const cl = 15 + ((1 - d.v) * 80);
-					d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
-
-					if (d.date.weekday == 6) x++;
-				});
-				this.update({ data });
-			});
-		});
-	</script>
-</mk-activity-table>
diff --git a/src/web/app/common/tags/authorized-apps.tag b/src/web/app/common/tags/authorized-apps.tag
deleted file mode 100644
index 26efa1316f..0000000000
--- a/src/web/app/common/tags/authorized-apps.tag
+++ /dev/null
@@ -1,35 +0,0 @@
-<mk-authorized-apps>
-	<div class="none ui info" v-if="!fetching && apps.length == 0">
-		<p>%fa:info-circle%%i18n:common.tags.mk-authorized-apps.no-apps%</p>
-	</div>
-	<div class="apps" v-if="apps.length != 0">
-		<div each={ app in apps }>
-			<p><b>{ app.name }</b></p>
-			<p>{ app.description }</p>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .apps
-				> div
-					padding 16px 0 0 0
-					border-bottom solid 1px #eee
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.apps = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.api('i/authorized_apps').then(apps => {
-				this.apps = apps;
-				this.fetching = false;
-				this.update();
-			});
-		});
-	</script>
-</mk-authorized-apps>
diff --git a/src/web/app/common/tags/ellipsis.tag b/src/web/app/common/tags/ellipsis.tag
deleted file mode 100644
index 734454e4a0..0000000000
--- a/src/web/app/common/tags/ellipsis.tag
+++ /dev/null
@@ -1,24 +0,0 @@
-<mk-ellipsis><span>.</span><span>.</span><span>.</span>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-
-			> span
-				animation ellipsis 1.4s infinite ease-in-out both
-
-				&:nth-child(1)
-					animation-delay 0s
-
-				&:nth-child(2)
-					animation-delay 0.16s
-
-				&:nth-child(3)
-					animation-delay 0.32s
-
-			@keyframes ellipsis
-				0%, 80%, 100%
-					opacity 1
-				40%
-					opacity 0
-	</style>
-</mk-ellipsis>
diff --git a/src/web/app/common/tags/error.tag b/src/web/app/common/tags/error.tag
deleted file mode 100644
index f09c0ce955..0000000000
--- a/src/web/app/common/tags/error.tag
+++ /dev/null
@@ -1,215 +0,0 @@
-<mk-error>
-	<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
-	<h1>%i18n:common.tags.mk-error.title%</h1>
-	<p class="text">{
-		'%i18n:common.tags.mk-error.description%'.substr(0, '%i18n:common.tags.mk-error.description%'.indexOf('{'))
-	}<a @click="reload">{
-		'%i18n:common.tags.mk-error.description%'.match(/\{(.+?)\}/)[1]
-	}</a>{
-		'%i18n:common.tags.mk-error.description%'.substr('%i18n:common.tags.mk-error.description%'.indexOf('}') + 1)
-	}</p>
-	<button v-if="!troubleshooting" @click="troubleshoot">%i18n:common.tags.mk-error.troubleshoot%</button>
-	<mk-troubleshooter v-if="troubleshooting"/>
-	<p class="thanks">%i18n:common.tags.mk-error.thanks%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 100%
-			padding 32px 18px
-			text-align center
-
-			> img
-				display block
-				height 200px
-				margin 0 auto
-				pointer-events none
-				user-select none
-
-			> h1
-				display block
-				margin 1.25em auto 0.65em auto
-				font-size 1.5em
-				color #555
-
-			> .text
-				display block
-				margin 0 auto
-				max-width 600px
-				font-size 1em
-				color #666
-
-			> button
-				display block
-				margin 1em auto 0 auto
-				padding 8px 10px
-				color $theme-color-foreground
-				background $theme-color
-
-				&:focus
-					outline solid 3px rgba($theme-color, 0.3)
-
-				&:hover
-					background lighten($theme-color, 10%)
-
-				&:active
-					background darken($theme-color, 10%)
-
-			> mk-troubleshooter
-				margin 1em auto 0 auto
-
-			> .thanks
-				display block
-				margin 2em auto 0 auto
-				padding 2em 0 0 0
-				max-width 600px
-				font-size 0.9em
-				font-style oblique
-				color #aaa
-				border-top solid 1px #eee
-
-			@media (max-width 500px)
-				padding 24px 18px
-				font-size 80%
-
-				> img
-					height 150px
-
-	</style>
-	<script lang="typescript">
-		this.troubleshooting = false;
-
-		this.on('mount', () => {
-			document.title = 'Oops!';
-			document.documentElement.style.background = '#f8f8f8';
-		});
-
-		this.reload = () => {
-			location.reload();
-		};
-
-		this.troubleshoot = () => {
-			this.update({
-				troubleshooting: true
-			});
-		};
-	</script>
-</mk-error>
-
-<mk-troubleshooter>
-	<h1>%fa:wrench%%i18n:common.tags.mk-error.troubleshooter.title%</h1>
-	<div>
-		<p data-wip={ network == null }><template v-if="network != null"><template v-if="network">%fa:check%</template><template v-if="!network">%fa:times%</template></template>{ network == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-network%' : '%i18n:common.tags.mk-error.troubleshooter.network%' }<mk-ellipsis v-if="network == null"/></p>
-		<p v-if="network == true" data-wip={ internet == null }><template v-if="internet != null"><template v-if="internet">%fa:check%</template><template v-if="!internet">%fa:times%</template></template>{ internet == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-internet%' : '%i18n:common.tags.mk-error.troubleshooter.internet%' }<mk-ellipsis v-if="internet == null"/></p>
-		<p v-if="internet == true" data-wip={ server == null }><template v-if="server != null"><template v-if="server">%fa:check%</template><template v-if="!server">%fa:times%</template></template>{ server == null ? '%i18n:common.tags.mk-error.troubleshooter.checking-server%' : '%i18n:common.tags.mk-error.troubleshooter.server%' }<mk-ellipsis v-if="server == null"/></p>
-	</div>
-	<p v-if="!end">%i18n:common.tags.mk-error.troubleshooter.finding%<mk-ellipsis/></p>
-	<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-network%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-network-desc%</p>
-	<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-internet%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-internet-desc%</p>
-	<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:common.tags.mk-error.troubleshooter.no-server%</b><br>%i18n:common.tags.mk-error.troubleshooter.no-server-desc%</p>
-	<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:common.tags.mk-error.troubleshooter.success%</b><br>%i18n:common.tags.mk-error.troubleshooter.success-desc%</p>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			width 100%
-			max-width 500px
-			text-align left
-			background #fff
-			border-radius 8px
-			border solid 1px #ddd
-
-			> h1
-				margin 0
-				padding 0.6em 1.2em
-				font-size 1em
-				color #444
-				border-bottom solid 1px #eee
-
-				> [data-fa]
-					margin-right 0.25em
-
-			> div
-				overflow hidden
-				padding 0.6em 1.2em
-
-				> p
-					margin 0.5em 0
-					font-size 0.9em
-					color #444
-
-					&[data-wip]
-						color #888
-
-					> [data-fa]
-						margin-right 0.25em
-
-						&.times
-							color #e03524
-
-						&.check
-							color #84c32f
-
-			> p
-				margin 0
-				padding 0.6em 1.2em
-				font-size 1em
-				color #444
-				border-top solid 1px #eee
-
-				> b
-					> [data-fa]
-						margin-right 0.25em
-
-				&.success
-					> b
-						color #39adad
-
-				&:not(.success)
-					> b
-						color #ad4339
-
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			this.update({
-				network: navigator.onLine
-			});
-
-			if (!this.network) {
-				this.update({
-					end: true
-				});
-				return;
-			}
-
-			// Check internet connection
-			fetch('https://google.com?rand=' + Math.random(), {
-				mode: 'no-cors'
-			}).then(() => {
-				this.update({
-					internet: true
-				});
-
-				// Check misskey server is available
-				fetch(`${_API_URL_}/meta`).then(() => {
-					this.update({
-						end: true,
-						server: true
-					});
-				})
-				.catch(() => {
-					this.update({
-						end: true,
-						server: false
-					});
-				});
-			})
-			.catch(() => {
-				this.update({
-					end: true,
-					internet: false
-				});
-			});
-		});
-	</script>
-</mk-troubleshooter>
diff --git a/src/web/app/common/tags/file-type-icon.tag b/src/web/app/common/tags/file-type-icon.tag
deleted file mode 100644
index f630efe118..0000000000
--- a/src/web/app/common/tags/file-type-icon.tag
+++ /dev/null
@@ -1,10 +0,0 @@
-<mk-file-type-icon>
-	<template v-if="kind == 'image'">%fa:file-image%</template>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.kind = this.opts.type.split('/')[0];
-	</script>
-</mk-file-type-icon>
diff --git a/src/web/app/common/tags/forkit.tag b/src/web/app/common/tags/forkit.tag
deleted file mode 100644
index 6a8d06e564..0000000000
--- a/src/web/app/common/tags/forkit.tag
+++ /dev/null
@@ -1,40 +0,0 @@
-<mk-forkit><a href="https://github.com/syuilo/misskey" target="_blank" title="%i18n:common.tags.mk-forkit.open-github-link%" aria-label="%i18n:common.tags.mk-forkit.open-github-link%">
-		<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
-			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-			<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>
-			<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor"></path>
-		</svg></a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			position absolute
-			top 0
-			right 0
-
-			> a
-				display block
-
-				> svg
-					display block
-					//fill #151513
-					//color #fff
-					fill $theme-color
-					color $theme-color-foreground
-
-			.octo-arm
-				transform-origin 130px 106px
-
-			&:hover
-				.octo-arm
-					animation octocat-wave 560ms ease-in-out
-
-			@keyframes octocat-wave
-				0%, 100%
-					transform rotate(0)
-				20%, 60%
-					transform rotate(-25deg)
-				40%, 80%
-					transform rotate(10deg)
-
-	</style>
-</mk-forkit>
diff --git a/src/web/app/common/tags/index.ts b/src/web/app/common/tags/index.ts
deleted file mode 100644
index df99d93cc5..0000000000
--- a/src/web/app/common/tags/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-require('./error.tag');
-require('./url.tag');
-require('./url-preview.tag');
-require('./time.tag');
-require('./file-type-icon.tag');
-require('./uploader.tag');
-require('./ellipsis.tag');
-require('./raw.tag');
-require('./number.tag');
-require('./special-message.tag');
-require('./signin.tag');
-require('./signup.tag');
-require('./forkit.tag');
-require('./introduction.tag');
-require('./signin-history.tag');
-require('./twitter-setting.tag');
-require('./authorized-apps.tag');
-require('./poll.tag');
-require('./poll-editor.tag');
-require('./messaging/room.tag');
-require('./messaging/message.tag');
-require('./messaging/index.tag');
-require('./messaging/form.tag');
-require('./stream-indicator.tag');
-require('./activity-table.tag');
-require('./reaction-picker.tag');
-require('./reactions-viewer.tag');
-require('./reaction-icon.tag');
-require('./post-menu.tag');
-require('./nav-links.tag');
diff --git a/src/web/app/common/tags/introduction.tag b/src/web/app/common/tags/introduction.tag
deleted file mode 100644
index c92cff0d1d..0000000000
--- a/src/web/app/common/tags/introduction.tag
+++ /dev/null
@@ -1,25 +0,0 @@
-<mk-introduction>
-	<article>
-		<h1>Misskeyとは？</h1>
-		<p><ruby>Misskey<rt>みすきー</rt></ruby>は、<a href="http://syuilo.com" target="_blank">syuilo</a>が2014年くらいから<a href="https://github.com/syuilo/misskey" target="_blank">オープンソースで</a>開発・運営を行っている、ミニブログベースのSNSです。</p>
-		<p>無料で誰でも利用でき、広告も掲載していません。</p>
-		<p><a href={ _DOCS_URL_ } target="_blank">もっと知りたい方はこちら</a></p>
-	</article>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			h1
-				margin 0
-				text-align center
-				font-size 1.2em
-
-			p
-				margin 16px 0
-
-				&:last-child
-					margin 0
-					text-align center
-
-	</style>
-</mk-introduction>
diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag
deleted file mode 100644
index 9a58dc0ce7..0000000000
--- a/src/web/app/common/tags/messaging/form.tag
+++ /dev/null
@@ -1,175 +0,0 @@
-<mk-messaging-form>
-	<textarea ref="text" onkeypress={ onkeypress } onpaste={ onpaste } placeholder="%i18n:common.input-message-here%"></textarea>
-	<div class="files"></div>
-	<mk-uploader ref="uploader"/>
-	<button class="send" @click="send" disabled={ sending } title="%i18n:common.send%">
-		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
-	</button>
-	<button class="attach-from-local" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-local%">
-		%fa:upload%
-	</button>
-	<button class="attach-from-drive" type="button" title="%i18n:common.tags.mk-messaging-form.attach-from-drive%">
-		%fa:R folder-open%
-	</button>
-	<input name="file" type="file" accept="image/*"/>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> textarea
-				cursor auto
-				display block
-				width 100%
-				min-width 100%
-				max-width 100%
-				height 64px
-				margin 0
-				padding 8px
-				font-size 1em
-				color #000
-				outline none
-				border none
-				border-top solid 1px #eee
-				border-radius 0
-				box-shadow none
-				background transparent
-
-			> .send
-				position absolute
-				bottom 0
-				right 0
-				margin 0
-				padding 10px 14px
-				line-height 1em
-				font-size 1em
-				color #aaa
-				transition color 0.1s ease
-
-				&:hover
-					color $theme-color
-
-				&:active
-					color darken($theme-color, 10%)
-					transition color 0s ease
-
-			.files
-				display block
-				margin 0
-				padding 0 8px
-				list-style none
-
-				&:after
-					content ''
-					display block
-					clear both
-
-				> li
-					display block
-					float left
-					margin 4px
-					padding 0
-					width 64px
-					height 64px
-					background-color #eee
-					background-repeat no-repeat
-					background-position center center
-					background-size cover
-					cursor move
-
-					&:hover
-						> .remove
-							display block
-
-					> .remove
-						display none
-						position absolute
-						right -6px
-						top -6px
-						margin 0
-						padding 0
-						background transparent
-						outline none
-						border none
-						border-radius 0
-						box-shadow none
-						cursor pointer
-
-			.attach-from-local
-			.attach-from-drive
-				margin 0
-				padding 10px 14px
-				line-height 1em
-				font-size 1em
-				font-weight normal
-				text-decoration none
-				color #aaa
-				transition color 0.1s ease
-
-				&:hover
-					color $theme-color
-
-				&:active
-					color darken($theme-color, 10%)
-					transition color 0s ease
-
-			input[type=file]
-				display none
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.onpaste = e => {
-			const data = e.clipboardData;
-			const items = data.items;
-			for (const item of items) {
-				if (item.kind == 'file') {
-					this.upload(item.getAsFile());
-				}
-			}
-		};
-
-		this.onkeypress = e => {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey) {
-				this.send();
-			}
-		};
-
-		this.selectFile = () => {
-			this.$refs.file.click();
-		};
-
-		this.selectFileFromDrive = () => {
-			const browser = document.body.appendChild(document.createElement('mk-select-file-from-drive-window'));
-			const event = riot.observable();
-			riot.mount(browser, {
-				multiple: true,
-				event: event
-			});
-			event.one('selected', files => {
-				files.forEach(this.addFile);
-			});
-		};
-
-		this.send = () => {
-			this.sending = true;
-			this.api('messaging/messages/create', {
-				user_id: this.opts.user.id,
-				text: this.$refs.text.value
-			}).then(message => {
-				this.clear();
-			}).catch(err => {
-				console.error(err);
-			}).then(() => {
-				this.sending = false;
-				this.update();
-			});
-		};
-
-		this.clear = () => {
-			this.$refs.text.value = '';
-			this.files = [];
-			this.update();
-		};
-	</script>
-</mk-messaging-form>
diff --git a/src/web/app/common/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag
deleted file mode 100644
index 0432f7e30f..0000000000
--- a/src/web/app/common/tags/messaging/index.tag
+++ /dev/null
@@ -1,456 +0,0 @@
-<mk-messaging data-compact={ opts.compact }>
-	<div class="search" v-if="!opts.compact">
-		<div class="form">
-			<label for="search-input">%fa:search%</label>
-			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
-		</div>
-		<div class="result">
-			<ol class="users" v-if="searchResult.length > 0" ref="searchResult">
-				<li each={ user, i in searchResult } onkeydown={ parent.onSearchResultKeydown.bind(null, i) } @click="user._click" tabindex="-1">
-					<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/>
-					<span class="name">{ user.name }</span>
-					<span class="username">@{ user.username }</span>
-				</li>
-			</ol>
-		</div>
-	</div>
-	<div class="history" v-if="history.length > 0">
-		<template each={ history }>
-			<a class="user" data-is-me={ is_me } data-is-read={ is_read } @click="_click">
-				<div>
-					<img class="avatar" src={ (is_me ? recipient.avatar_url : user.avatar_url) + '?thumbnail&size=64' } alt=""/>
-					<header>
-						<span class="name">{ is_me ? recipient.name : user.name }</span>
-						<span class="username">{ '@' + (is_me ? recipient.username : user.username ) }</span>
-						<mk-time time={ created_at }/>
-					</header>
-					<div class="body">
-						<p class="text"><span class="me" v-if="is_me">%i18n:common.tags.mk-messaging.you%:</span>{ text }</p>
-					</div>
-				</div>
-			</a>
-		</template>
-	</div>
-	<p class="no-history" v-if="!fetching && history.length == 0">%i18n:common.tags.mk-messaging.no-history%</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			&[data-compact]
-				font-size 0.8em
-
-				> .history
-					> a
-						&:last-child
-							border-bottom none
-
-						&:not([data-is-me]):not([data-is-read])
-							> div
-								background-image none
-								border-left solid 4px #3aa2dc
-
-						> div
-							padding 16px
-
-							> header
-								> mk-time
-									font-size 1em
-
-							> .avatar
-								width 42px
-								height 42px
-								margin 0 12px 0 0
-
-			> .search
-				display block
-				position -webkit-sticky
-				position sticky
-				top 0
-				left 0
-				z-index 1
-				width 100%
-				background #fff
-				box-shadow 0 0px 2px rgba(0, 0, 0, 0.2)
-
-				> .form
-					padding 8px
-					background #f7f7f7
-
-					> label
-						display block
-						position absolute
-						top 0
-						left 8px
-						z-index 1
-						height 100%
-						width 38px
-						pointer-events none
-
-						> [data-fa]
-							display block
-							position absolute
-							top 0
-							right 0
-							bottom 0
-							left 0
-							width 1em
-							height 1em
-							margin auto
-							color #555
-
-					> input
-						margin 0
-						padding 0 0 0 38px
-						width 100%
-						font-size 1em
-						line-height 38px
-						color #000
-						outline none
-						border solid 1px #eee
-						border-radius 5px
-						box-shadow none
-						transition color 0.5s ease, border 0.5s ease
-
-						&:hover
-							border solid 1px #ddd
-							transition border 0.2s ease
-
-						&:focus
-							color darken($theme-color, 20%)
-							border solid 1px $theme-color
-							transition color 0, border 0
-
-				> .result
-					display block
-					top 0
-					left 0
-					z-index 2
-					width 100%
-					margin 0
-					padding 0
-					background #fff
-
-					> .users
-						margin 0
-						padding 0
-						list-style none
-
-						> li
-							display inline-block
-							z-index 1
-							width 100%
-							padding 8px 32px
-							vertical-align top
-							white-space nowrap
-							overflow hidden
-							color rgba(0, 0, 0, 0.8)
-							text-decoration none
-							transition none
-							cursor pointer
-
-							&:hover
-							&:focus
-								color #fff
-								background $theme-color
-
-								.name
-									color #fff
-
-								.username
-									color #fff
-
-							&:active
-								color #fff
-								background darken($theme-color, 10%)
-
-								.name
-									color #fff
-
-								.username
-									color #fff
-
-							.avatar
-								vertical-align middle
-								min-width 32px
-								min-height 32px
-								max-width 32px
-								max-height 32px
-								margin 0 8px 0 0
-								border-radius 6px
-
-							.name
-								margin 0 8px 0 0
-								/*font-weight bold*/
-								font-weight normal
-								color rgba(0, 0, 0, 0.8)
-
-							.username
-								font-weight normal
-								color rgba(0, 0, 0, 0.3)
-
-			> .history
-
-				> a
-					display block
-					text-decoration none
-					background #fff
-					border-bottom solid 1px #eee
-
-					*
-						pointer-events none
-						user-select none
-
-					&:hover
-						background #fafafa
-
-						> .avatar
-							filter saturate(200%)
-
-					&:active
-						background #eee
-
-					&[data-is-read]
-					&[data-is-me]
-						opacity 0.8
-
-					&:not([data-is-me]):not([data-is-read])
-						> div
-							background-image url("/assets/unread.svg")
-							background-repeat no-repeat
-							background-position 0 center
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> div
-						max-width 500px
-						margin 0 auto
-						padding 20px 30px
-
-						&:after
-							content ""
-							display block
-							clear both
-
-						> header
-							margin-bottom 2px
-							white-space nowrap
-							overflow hidden
-
-							> .name
-								text-align left
-								display inline
-								margin 0
-								padding 0
-								font-size 1em
-								color rgba(0, 0, 0, 0.9)
-								font-weight bold
-								transition all 0.1s ease
-
-							> .username
-								text-align left
-								margin 0 0 0 8px
-								color rgba(0, 0, 0, 0.5)
-
-							> mk-time
-								position absolute
-								top 0
-								right 0
-								display inline
-								color rgba(0, 0, 0, 0.5)
-								font-size 80%
-
-						> .avatar
-							float left
-							width 54px
-							height 54px
-							margin 0 16px 0 0
-							border-radius 8px
-							transition all 0.1s ease
-
-						> .body
-
-							> .text
-								display block
-								margin 0 0 0 0
-								padding 0
-								overflow hidden
-								overflow-wrap break-word
-								font-size 1.1em
-								color rgba(0, 0, 0, 0.8)
-
-								.me
-									color rgba(0, 0, 0, 0.4)
-
-							> .image
-								display block
-								max-width 100%
-								max-height 512px
-
-			> .no-history
-				margin 0
-				padding 2em 1em
-				text-align center
-				color #999
-				font-weight 500
-
-			> .fetching
-				margin 0
-				padding 16px
-				text-align center
-				color #aaa
-
-				> [data-fa]
-					margin-right 4px
-
-			// TODO: element base media query
-			@media (max-width 400px)
-				> .search
-					> .result
-						> .users
-							> li
-								padding 8px 16px
-
-				> .history
-					> a
-						&:not([data-is-me]):not([data-is-read])
-							> div
-								background-image none
-								border-left solid 4px #3aa2dc
-
-						> div
-							padding 16px
-							font-size 14px
-
-							> .avatar
-								margin 0 12px 0 0
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('messaging-index-stream');
-		this.connection = this.messagingIndexStream.getConnection();
-		this.connectionId = this.messagingIndexStream.use();
-
-		this.searchResult = [];
-		this.history = [];
-		this.fetching = true;
-
-		this.registerMessage = message => {
-			message.is_me = message.user_id == this.I.id;
-			message._click = () => {
-				this.$emit('navigate-user', message.is_me ? message.recipient : message.user);
-			};
-		};
-
-		this.on('mount', () => {
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-
-			this.api('messaging/history').then(history => {
-				this.fetching = false;
-				history.forEach(message => {
-					this.registerMessage(message);
-				});
-				this.history = history;
-				this.update();
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('message', this.onMessage);
-			this.connection.off('read', this.onRead);
-			this.messagingIndexStream.dispose(this.connectionId);
-		});
-
-		this.onMessage = message => {
-			this.history = this.history.filter(m => !(
-				(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
-				(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
-
-			this.registerMessage(message);
-
-			this.history.unshift(message);
-			this.update();
-		};
-
-		this.onRead = ids => {
-			ids.forEach(id => {
-				const found = this.history.find(m => m.id == id);
-				if (found) found.is_read = true;
-			});
-
-			this.update();
-		};
-
-		this.search = () => {
-			const q = this.$refs.search.value;
-			if (q == '') {
-				this.searchResult = [];
-				return;
-			}
-			this.api('users/search', {
-				query: q,
-				max: 5
-			}).then(users => {
-				users.forEach(user => {
-					user._click = () => {
-						this.$emit('navigate-user', user);
-						this.searchResult = [];
-					};
-				});
-				this.update({
-					searchResult: users
-				});
-			});
-		};
-
-		this.onSearchKeydown = e => {
-			switch (e.which) {
-				case 9: // [TAB]
-				case 40: // [↓]
-					e.preventDefault();
-					e.stopPropagation();
-					this.$refs.searchResult.childNodes[0].focus();
-					break;
-			}
-		};
-
-		this.onSearchResultKeydown = (i, e) => {
-			const cancel = () => {
-				e.preventDefault();
-				e.stopPropagation();
-			};
-			switch (true) {
-				case e.which == 10: // [ENTER]
-				case e.which == 13: // [ENTER]
-					cancel();
-					this.searchResult[i]._click();
-					break;
-
-				case e.which == 27: // [ESC]
-					cancel();
-					this.$refs.search.focus();
-					break;
-
-				case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
-				case e.which == 38: // [↑]
-					cancel();
-					(this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
-					break;
-
-				case e.which == 9: // [TAB]
-				case e.which == 40: // [↓]
-					cancel();
-					(this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus();
-					break;
-			}
-		};
-
-	</script>
-</mk-messaging>
diff --git a/src/web/app/common/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag
deleted file mode 100644
index ba6d26a184..0000000000
--- a/src/web/app/common/tags/messaging/message.tag
+++ /dev/null
@@ -1,238 +0,0 @@
-<mk-messaging-message data-is-me={ message.is_me }>
-	<a class="avatar-anchor" href={ '/' + message.user.username } title={ message.user.username } target="_blank">
-		<img class="avatar" src={ message.user.avatar_url + '?thumbnail&size=80' } alt=""/>
-	</a>
-	<div class="content-container">
-		<div class="balloon">
-			<p class="read" v-if="message.is_me && message.is_read">%i18n:common.tags.mk-messaging-message.is-read%</p>
-			<button class="delete-button" v-if="message.is_me" title="%i18n:common.delete%"><img src="/assets/desktop/messaging/delete.png" alt="Delete"/></button>
-			<div class="content" v-if="!message.is_deleted">
-				<div ref="text"></div>
-				<div class="image" v-if="message.file"><img src={ message.file.url } alt="image" title={ message.file.name }/></div>
-			</div>
-			<div class="content" v-if="message.is_deleted">
-				<p class="is-deleted">%i18n:common.tags.mk-messaging-message.deleted%</p>
-			</div>
-		</div>
-		<footer>
-			<mk-time time={ message.created_at }/><template v-if="message.is_edited">%fa:pencil-alt%</template>
-		</footer>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			$me-balloon-color = #23A7B6
-
-			display block
-			padding 10px 12px 10px 12px
-			background-color transparent
-
-			&:after
-				content ""
-				display block
-				clear both
-
-			> .avatar-anchor
-				display block
-
-				> .avatar
-					display block
-					min-width 54px
-					min-height 54px
-					max-width 54px
-					max-height 54px
-					margin 0
-					border-radius 8px
-					transition all 0.1s ease
-
-			> .content-container
-				display block
-				margin 0 12px
-				padding 0
-				max-width calc(100% - 78px)
-
-				> .balloon
-					display block
-					float inherit
-					margin 0
-					padding 0
-					max-width 100%
-					min-height 38px
-					border-radius 16px
-
-					&:before
-						content ""
-						pointer-events none
-						display block
-						position absolute
-						top 12px
-
-					&:hover
-						> .delete-button
-							display block
-
-					> .delete-button
-						display none
-						position absolute
-						z-index 1
-						top -4px
-						right -4px
-						margin 0
-						padding 0
-						cursor pointer
-						outline none
-						border none
-						border-radius 0
-						box-shadow none
-						background transparent
-
-						> img
-							vertical-align bottom
-							width 16px
-							height 16px
-							cursor pointer
-
-					> .read
-						user-select none
-						display block
-						position absolute
-						z-index 1
-						bottom -4px
-						left -12px
-						margin 0
-						color rgba(0, 0, 0, 0.5)
-						font-size 11px
-
-					> .content
-
-						> .is-deleted
-							display block
-							margin 0
-							padding 0
-							overflow hidden
-							overflow-wrap break-word
-							font-size 1em
-							color rgba(0, 0, 0, 0.5)
-
-						> [ref='text']
-							display block
-							margin 0
-							padding 8px 16px
-							overflow hidden
-							overflow-wrap break-word
-							font-size 1em
-							color rgba(0, 0, 0, 0.8)
-
-							&, *
-								user-select text
-								cursor auto
-
-							& + .file
-								&.image
-									> img
-										border-radius 0 0 16px 16px
-
-						> .file
-							&.image
-								> img
-									display block
-									max-width 100%
-									max-height 512px
-									border-radius 16px
-
-				> footer
-					display block
-					clear both
-					margin 0
-					padding 2px
-					font-size 10px
-					color rgba(0, 0, 0, 0.4)
-
-					> [data-fa]
-						margin-left 4px
-
-			&:not([data-is-me='true'])
-				> .avatar-anchor
-					float left
-
-				> .content-container
-					float left
-
-					> .balloon
-						background #eee
-
-						&:before
-							left -14px
-							border-top solid 8px transparent
-							border-right solid 8px #eee
-							border-bottom solid 8px transparent
-							border-left solid 8px transparent
-
-					> footer
-						text-align left
-
-			&[data-is-me='true']
-				> .avatar-anchor
-					float right
-
-				> .content-container
-					float right
-
-					> .balloon
-						background $me-balloon-color
-
-						&:before
-							right -14px
-							left auto
-							border-top solid 8px transparent
-							border-right solid 8px transparent
-							border-bottom solid 8px transparent
-							border-left solid 8px $me-balloon-color
-
-						> .content
-
-							> p.is-deleted
-								color rgba(255, 255, 255, 0.5)
-
-							> [ref='text']
-								&, *
-									color #fff !important
-
-					> footer
-						text-align right
-
-			&[data-is-deleted='true']
-					> .content-container
-						opacity 0.5
-
-	</style>
-	<script lang="typescript">
-		import compile from '../../../common/scripts/text-compiler';
-
-		this.mixin('i');
-
-		this.message = this.opts.message;
-		this.message.is_me = this.message.user.id == this.I.id;
-
-		this.on('mount', () => {
-			if (this.message.text) {
-				const tokens = this.message.ast;
-
-				this.$refs.text.innerHTML = compile(tokens);
-
-				Array.from(this.$refs.text.children).forEach(e => {
-					if (e.tagName == 'MK-URL') riot.mount(e);
-				});
-
-				// URLをプレビュー
-				tokens
-					.filter(t => t.type == 'link')
-					.map(t => {
-						const el = this.$refs.text.appendChild(document.createElement('mk-url-preview'));
-						riot.mount(el, {
-							url: t.content
-						});
-					});
-			}
-		});
-	</script>
-</mk-messaging-message>
diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag
deleted file mode 100644
index 990f20a8e3..0000000000
--- a/src/web/app/common/tags/messaging/room.tag
+++ /dev/null
@@ -1,319 +0,0 @@
-<mk-messaging-room>
-	<div class="stream">
-		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
-		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:common.tags.mk-messaging-room.empty%</p>
-		<p class="no-history" v-if="!init && messages.length > 0 && !moreMessagesIsInStock">%fa:flag%%i18n:common.tags.mk-messaging-room.no-history%</p>
-		<button class="more { fetching: fetchingMoreMessages }" v-if="moreMessagesIsInStock" @click="fetchMoreMessages" disabled={ fetchingMoreMessages }>
-			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:common.tags.mk-messaging-room.more%' }
-		</button>
-		<template each={ message, i in messages }>
-			<mk-messaging-message message={ message }/>
-			<p class="date" v-if="i != messages.length - 1 && message._date != messages[i + 1]._date"><span>{ messages[i + 1]._datetext }</span></p>
-		</template>
-	</div>
-	<footer>
-		<div ref="notifications"></div>
-		<div class="grippie" title="%i18n:common.tags.mk-messaging-room.resize-form%"></div>
-		<mk-messaging-form user={ user }/>
-	</footer>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> .stream
-				max-width 600px
-				margin 0 auto
-
-				> .init
-					width 100%
-					margin 0
-					padding 16px 8px 8px 8px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .empty
-					width 100%
-					margin 0
-					padding 16px 8px 8px 8px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .no-history
-					display block
-					margin 0
-					padding 16px
-					text-align center
-					font-size 0.8em
-					color rgba(0, 0, 0, 0.4)
-
-					[data-fa]
-						margin-right 4px
-
-				> .more
-					display block
-					margin 16px auto
-					padding 0 12px
-					line-height 24px
-					color #fff
-					background rgba(0, 0, 0, 0.3)
-					border-radius 12px
-
-					&:hover
-						background rgba(0, 0, 0, 0.4)
-
-					&:active
-						background rgba(0, 0, 0, 0.5)
-
-					&.fetching
-						cursor wait
-
-					> [data-fa]
-						margin-right 4px
-
-				> .message
-					// something
-
-				> .date
-					display block
-					margin 8px 0
-					text-align center
-
-					&:before
-						content ''
-						display block
-						position absolute
-						height 1px
-						width 90%
-						top 16px
-						left 0
-						right 0
-						margin 0 auto
-						background rgba(0, 0, 0, 0.1)
-
-					> span
-						display inline-block
-						margin 0
-						padding 0 16px
-						//font-weight bold
-						line-height 32px
-						color rgba(0, 0, 0, 0.3)
-						background #fff
-
-			> footer
-				position -webkit-sticky
-				position sticky
-				z-index 2
-				bottom 0
-				width 100%
-				max-width 600px
-				margin 0 auto
-				padding 0
-				background rgba(255, 255, 255, 0.95)
-				background-clip content-box
-
-				> [ref='notifications']
-					position absolute
-					top -48px
-					width 100%
-					padding 8px 0
-					text-align center
-
-					&:empty
-						display none
-
-					> p
-						display inline-block
-						margin 0
-						padding 0 12px 0 28px
-						cursor pointer
-						line-height 32px
-						font-size 12px
-						color $theme-color-foreground
-						background $theme-color
-						border-radius 16px
-						transition opacity 1s ease
-
-						> [data-fa]
-							position absolute
-							top 0
-							left 10px
-							line-height 32px
-							font-size 16px
-
-				> .grippie
-					height 10px
-					margin-top -10px
-					background transparent
-					cursor ns-resize
-
-					&:hover
-						//background rgba(0, 0, 0, 0.1)
-
-					&:active
-						//background rgba(0, 0, 0, 0.2)
-
-	</style>
-	<script lang="typescript">
-		import MessagingStreamConnection from '../../scripts/streaming/messaging-stream';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.user = this.opts.user;
-		this.init = true;
-		this.sending = false;
-		this.messages = [];
-		this.isNaked = this.opts.isNaked;
-
-		this.connection = new MessagingStreamConnection(this.I, this.user.id);
-
-		this.on('mount', () => {
-			this.connection.on('message', this.onMessage);
-			this.connection.on('read', this.onRead);
-
-			document.addEventListener('visibilitychange', this.onVisibilitychange);
-
-			this.fetchMessages().then(() => {
-				this.init = false;
-				this.update();
-				this.scrollToBottom();
-			});
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('message', this.onMessage);
-			this.connection.off('read', this.onRead);
-			this.connection.close();
-
-			document.removeEventListener('visibilitychange', this.onVisibilitychange);
-		});
-
-		this.on('update', () => {
-			this.messages.forEach(message => {
-				const date = (new Date(message.created_at)).getDate();
-				const month = (new Date(message.created_at)).getMonth() + 1;
-				message._date = date;
-				message._datetext = month + '月 ' + date + '日';
-			});
-		});
-
-		this.onMessage = (message) => {
-			const isBottom = this.isBottom();
-
-			this.messages.push(message);
-			if (message.user_id != this.I.id && !document.hidden) {
-				this.connection.send({
-					type: 'read',
-					id: message.id
-				});
-			}
-			this.update();
-
-			if (isBottom) {
-				// Scroll to bottom
-				this.scrollToBottom();
-			} else if (message.user_id != this.I.id) {
-				// Notify
-				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
-			}
-		};
-
-		this.onRead = ids => {
-			if (!Array.isArray(ids)) ids = [ids];
-			ids.forEach(id => {
-				if (this.messages.some(x => x.id == id)) {
-					const exist = this.messages.map(x => x.id).indexOf(id);
-					this.messages[exist].is_read = true;
-					this.update();
-				}
-			});
-		};
-
-		this.fetchMoreMessages = () => {
-			this.update({
-				fetchingMoreMessages: true
-			});
-			this.fetchMessages().then(() => {
-				this.update({
-					fetchingMoreMessages: false
-				});
-			});
-		};
-
-		this.fetchMessages = () => new Promise((resolve, reject) => {
-			const max = this.moreMessagesIsInStock ? 20 : 10;
-
-			this.api('messaging/messages', {
-				user_id: this.user.id,
-				limit: max + 1,
-				until_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined
-			}).then(messages => {
-				if (messages.length == max + 1) {
-					this.moreMessagesIsInStock = true;
-					messages.pop();
-				} else {
-					this.moreMessagesIsInStock = false;
-				}
-
-				this.messages.unshift.apply(this.messages, messages.reverse());
-				this.update();
-
-				resolve();
-			});
-		});
-
-		this.isBottom = () => {
-			const asobi = 32;
-			const current = this.isNaked
-				? window.scrollY + window.innerHeight
-				: this.root.scrollTop + this.root.offsetHeight;
-			const max = this.isNaked
-				? document.body.offsetHeight
-				: this.root.scrollHeight;
-			return current > (max - asobi);
-		};
-
-		this.scrollToBottom = () => {
-			if (this.isNaked) {
-				window.scroll(0, document.body.offsetHeight);
-			} else {
-				this.root.scrollTop = this.root.scrollHeight;
-			}
-		};
-
-		this.notify = message => {
-			const n = document.createElement('p');
-			n.innerHTML = '%fa:arrow-circle-down%' + message;
-			n.onclick = () => {
-				this.scrollToBottom();
-				n.parentNode.removeChild(n);
-			};
-			this.$refs.notifications.appendChild(n);
-
-			setTimeout(() => {
-				n.style.opacity = 0;
-				setTimeout(() => n.parentNode.removeChild(n), 1000);
-			}, 4000);
-		};
-
-		this.onVisibilitychange = () => {
-			if (document.hidden) return;
-			this.messages.forEach(message => {
-				if (message.user_id !== this.I.id && !message.is_read) {
-					this.connection.send({
-						type: 'read',
-						id: message.id
-					});
-				}
-			});
-		};
-	</script>
-</mk-messaging-room>
diff --git a/src/web/app/common/tags/nav-links.tag b/src/web/app/common/tags/nav-links.tag
deleted file mode 100644
index 3f2613c16d..0000000000
--- a/src/web/app/common/tags/nav-links.tag
+++ /dev/null
@@ -1,10 +0,0 @@
-<mk-nav-links>
-	<a href={ aboutUrl }>%i18n:common.tags.mk-nav-links.about%</a><i>・</i><a href={ _STATS_URL_ }>%i18n:common.tags.mk-nav-links.stats%</a><i>・</i><a href={ _STATUS_URL_ }>%i18n:common.tags.mk-nav-links.status%</a><i>・</i><a href="http://zawazawa.jp/misskey/">%i18n:common.tags.mk-nav-links.wiki%</a><i>・</i><a href="https://github.com/syuilo/misskey/blob/master/DONORS.md">%i18n:common.tags.mk-nav-links.donors%</a><i>・</i><a href="https://github.com/syuilo/misskey">%i18n:common.tags.mk-nav-links.repository%</a><i>・</i><a href={ _DEV_URL_ }>%i18n:common.tags.mk-nav-links.develop%</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/about`;
-	</script>
-</mk-nav-links>
diff --git a/src/web/app/common/tags/number.tag b/src/web/app/common/tags/number.tag
deleted file mode 100644
index 9cbbacd2c7..0000000000
--- a/src/web/app/common/tags/number.tag
+++ /dev/null
@@ -1,16 +0,0 @@
-<mk-number>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.on('mount', () => {
-			let value = this.opts.value;
-			const max = this.opts.max;
-
-			if (max != null && value > max) value = max;
-
-			this.root.innerHTML = value.toLocaleString();
-		});
-	</script>
-</mk-number>
diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag
deleted file mode 100644
index 0de26f6547..0000000000
--- a/src/web/app/common/tags/poll-editor.tag
+++ /dev/null
@@ -1,121 +0,0 @@
-<mk-poll-editor>
-	<p class="caution" v-if="choices.length < 2">
-		%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
-	</p>
-	<ul ref="choices">
-		<li each={ choice, i in choices }>
-			<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
-			<button @click="remove.bind(null, i)" title="%i18n:common.tags.mk-poll-editor.remove%">
-				%fa:times%
-			</button>
-		</li>
-	</ul>
-	<button class="add" v-if="choices.length < 10" @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
-	<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
-		%fa:times%
-	</button>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			padding 8px
-
-			> .caution
-				margin 0 0 8px 0
-				font-size 0.8em
-				color #f00
-
-				> [data-fa]
-					margin-right 4px
-
-			> ul
-				display block
-				margin 0
-				padding 0
-				list-style none
-
-				> li
-					display block
-					margin 8px 0
-					padding 0
-					width 100%
-
-					&:first-child
-						margin-top 0
-
-					&:last-child
-						margin-bottom 0
-
-					> input
-						padding 6px
-						border solid 1px rgba($theme-color, 0.1)
-						border-radius 4px
-
-						&:hover
-							border-color rgba($theme-color, 0.2)
-
-						&:focus
-							border-color rgba($theme-color, 0.5)
-
-					> button
-						padding 4px 8px
-						color rgba($theme-color, 0.4)
-
-						&:hover
-							color rgba($theme-color, 0.6)
-
-						&:active
-							color darken($theme-color, 30%)
-
-			> .add
-				margin 8px 0 0 0
-				vertical-align top
-				color $theme-color
-
-			> .destroy
-				position absolute
-				top 0
-				right 0
-				padding 4px 8px
-				color rgba($theme-color, 0.4)
-
-				&:hover
-					color rgba($theme-color, 0.6)
-
-				&:active
-					color darken($theme-color, 30%)
-
-	</style>
-	<script lang="typescript">
-		this.choices = ['', ''];
-
-		this.oninput = (i, e) => {
-			this.choices[i] = e.target.value;
-		};
-
-		this.add = () => {
-			this.choices.push('');
-			this.update();
-			this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus();
-		};
-
-		this.remove = (i) => {
-			this.choices = this.choices.filter((_, _i) => _i != i);
-			this.update();
-		};
-
-		this.destroy = () => {
-			this.opts.ondestroy();
-		};
-
-		this.get = () => {
-			return {
-				choices: this.choices.filter(choice => choice != '')
-			}
-		};
-
-		this.set = data => {
-			if (data.choices.length == 0) return;
-			this.choices = data.choices;
-		};
-	</script>
-</mk-poll-editor>
diff --git a/src/web/app/common/tags/post-menu.tag b/src/web/app/common/tags/post-menu.tag
deleted file mode 100644
index c2b362e8b5..0000000000
--- a/src/web/app/common/tags/post-menu.tag
+++ /dev/null
@@ -1,157 +0,0 @@
-<mk-post-menu>
-	<div class="backdrop" ref="backdrop" @click="close"></div>
-	<div class="popover { compact: opts.compact }" ref="popover">
-		<button v-if="post.user_id === I.id" @click="pin">%i18n:common.tags.mk-post-menu.pin%</button>
-		<div v-if="I.is_pro && !post.is_category_verified">
-			<select ref="categorySelect">
-				<option value="">%i18n:common.tags.mk-post-menu.select%</option>
-				<option value="music">%i18n:common.post_categories.music%</option>
-				<option value="game">%i18n:common.post_categories.game%</option>
-				<option value="anime">%i18n:common.post_categories.anime%</option>
-				<option value="it">%i18n:common.post_categories.it%</option>
-				<option value="gadgets">%i18n:common.post_categories.gadgets%</option>
-				<option value="photography">%i18n:common.post_categories.photography%</option>
-			</select>
-			<button @click="categorize">%i18n:common.tags.mk-post-menu.categorize%</button>
-		</div>
-	</div>
-	<style lang="stylus" scoped>
-		$border-color = rgba(27, 31, 35, 0.15)
-
-		:scope
-			display block
-			position initial
-
-			> .backdrop
-				position fixed
-				top 0
-				left 0
-				z-index 10000
-				width 100%
-				height 100%
-				background rgba(0, 0, 0, 0.1)
-				opacity 0
-
-			> .popover
-				position absolute
-				z-index 10001
-				background #fff
-				border 1px solid $border-color
-				border-radius 4px
-				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
-				transform scale(0.5)
-				opacity 0
-
-				$balloon-size = 16px
-
-				&:not(.compact)
-					margin-top $balloon-size
-					transform-origin center -($balloon-size)
-
-					&:before
-						content ""
-						display block
-						position absolute
-						top -($balloon-size * 2)
-						left s('calc(50% - %s)', $balloon-size)
-						border-top solid $balloon-size transparent
-						border-left solid $balloon-size transparent
-						border-right solid $balloon-size transparent
-						border-bottom solid $balloon-size $border-color
-
-					&:after
-						content ""
-						display block
-						position absolute
-						top -($balloon-size * 2) + 1.5px
-						left s('calc(50% - %s)', $balloon-size)
-						border-top solid $balloon-size transparent
-						border-left solid $balloon-size transparent
-						border-right solid $balloon-size transparent
-						border-bottom solid $balloon-size #fff
-
-				> button
-					display block
-
-	</style>
-	<script lang="typescript">
-		import anime from 'animejs';
-
-		this.mixin('i');
-		this.mixin('api');
-
-		this.post = this.opts.post;
-		this.source = this.opts.source;
-
-		this.on('mount', () => {
-			const rect = this.source.getBoundingClientRect();
-			const width = this.$refs.popover.offsetWidth;
-			const height = this.$refs.popover.offsetHeight;
-			if (this.opts.compact) {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
-				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
-				this.$refs.popover.style.top = (y - (height / 2)) + 'px';
-			} else {
-				const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-				const y = rect.top + window.pageYOffset + this.source.offsetHeight;
-				this.$refs.popover.style.left = (x - (width / 2)) + 'px';
-				this.$refs.popover.style.top = y + 'px';
-			}
-
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 1,
-				duration: 100,
-				easing: 'linear'
-			});
-
-			anime({
-				targets: this.$refs.popover,
-				opacity: 1,
-				scale: [0.5, 1],
-				duration: 500
-			});
-		});
-
-		this.pin = () => {
-			this.api('i/pin', {
-				post_id: this.post.id
-			}).then(() => {
-				if (this.opts.cb) this.opts.cb('pinned', '%i18n:common.tags.mk-post-menu.pinned%');
-				this.$destroy();
-			});
-		};
-
-		this.categorize = () => {
-			const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value;
-			this.api('posts/categorize', {
-				post_id: this.post.id,
-				category: category
-			}).then(() => {
-				if (this.opts.cb) this.opts.cb('categorized', '%i18n:common.tags.mk-post-menu.categorized%');
-				this.$destroy();
-			});
-		};
-
-		this.close = () => {
-			this.$refs.backdrop.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.backdrop,
-				opacity: 0,
-				duration: 200,
-				easing: 'linear'
-			});
-
-			this.$refs.popover.style.pointerEvents = 'none';
-			anime({
-				targets: this.$refs.popover,
-				opacity: 0,
-				scale: 0.5,
-				duration: 200,
-				easing: 'easeInBack',
-				complete: () => this.$destroy()
-			});
-		};
-	</script>
-</mk-post-menu>
diff --git a/src/web/app/common/tags/raw.tag b/src/web/app/common/tags/raw.tag
deleted file mode 100644
index 149ac6c4bf..0000000000
--- a/src/web/app/common/tags/raw.tag
+++ /dev/null
@@ -1,13 +0,0 @@
-<mk-raw>
-	<style lang="stylus" scoped>
-		:scope
-			display inline
-	</style>
-	<script lang="typescript">
-		this.root.innerHTML = this.opts.content;
-
-		this.on('updated', () => {
-			this.root.innerHTML = this.opts.content;
-		});
-	</script>
-</mk-raw>
diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag
deleted file mode 100644
index 57ac5ec979..0000000000
--- a/src/web/app/common/tags/signin-history.tag
+++ /dev/null
@@ -1,116 +0,0 @@
-<mk-signin-history>
-	<div class="records" v-if="history.length != 0">
-		<mk-signin-record each={ rec in history } rec={ rec }/>
-	</div>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-		this.mixin('api');
-
-		this.mixin('stream');
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.history = [];
-		this.fetching = true;
-
-		this.on('mount', () => {
-			this.api('i/signin_history').then(history => {
-				this.update({
-					fetching: false,
-					history: history
-				});
-			});
-
-			this.connection.on('signin', this.onSignin);
-		});
-
-		this.on('unmount', () => {
-			this.connection.off('signin', this.onSignin);
-			this.stream.dispose(this.connectionId);
-		});
-
-		this.onSignin = signin => {
-			this.history.unshift(signin);
-			this.update();
-		};
-	</script>
-</mk-signin-history>
-
-<mk-signin-record>
-	<header @click="toggle">
-		<template v-if="rec.success">%fa:check%</template>
-		<template v-if="!rec.success">%fa:times%</template>
-		<span class="ip">{ rec.ip }</span>
-		<mk-time time={ rec.created_at }/>
-	</header>
-	<pre ref="headers" class="json" show={ show }>{ JSON.stringify(rec.headers, null, 2) }</pre>
-
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			border-bottom solid 1px #eee
-
-			> header
-				display flex
-				padding 8px 0
-				line-height 32px
-				cursor pointer
-
-				> [data-fa]
-					margin-right 8px
-					text-align left
-
-					&.check
-						color #0fda82
-
-					&.times
-						color #ff3100
-
-				> .ip
-					display inline-block
-					text-align left
-					padding 8px
-					line-height 16px
-					font-family monospace
-					font-size 14px
-					color #444
-					background #f8f8f8
-					border-radius 4px
-
-				> mk-time
-					margin-left auto
-					text-align right
-					color #777
-
-			> pre
-				overflow auto
-				margin 0 0 16px 0
-				max-height 100px
-				white-space pre-wrap
-				word-break break-all
-				color #4a535a
-
-	</style>
-
-	<script lang="typescript">
-		import hljs from 'highlight.js';
-
-		this.rec = this.opts.rec;
-		this.show = false;
-
-		this.on('mount', () => {
-			hljs.highlightBlock(this.$refs.headers);
-		});
-
-		this.toggle = () => {
-			this.update({
-				show: !this.show
-			});
-		};
-	</script>
-</mk-signin-record>
diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag
deleted file mode 100644
index 89213d1f73..0000000000
--- a/src/web/app/common/tags/signin.tag
+++ /dev/null
@@ -1,155 +0,0 @@
-<mk-signin>
-	<form :class="{ signing: signing }" onsubmit={ onsubmit }>
-		<label class="user-name">
-			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]+$" placeholder="%i18n:common.tags.mk-signin.username%" autofocus="autofocus" required="required" oninput={ oninput }/>%fa:at%
-		</label>
-		<label class="password">
-			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signin.password%" required="required"/>%fa:lock%
-		</label>
-		<label class="token" v-if="user && user.two_factor_enabled">
-			<input ref="token" type="number" placeholder="%i18n:common.tags.mk-signin.token%" required="required"/>%fa:lock%
-		</label>
-		<button type="submit" disabled={ signing }>{ signing ? '%i18n:common.tags.mk-signin.signing-in%' : '%i18n:common.tags.mk-signin.signin%' }</button>
-	</form>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> form
-				display block
-				z-index 2
-
-				&.signing
-					&, *
-						cursor wait !important
-
-				label
-					display block
-					margin 12px 0
-
-					[data-fa]
-						display block
-						pointer-events none
-						position absolute
-						bottom 0
-						top 0
-						left 0
-						z-index 1
-						margin auto
-						padding 0 16px
-						height 1em
-						color #898786
-
-					input[type=text]
-					input[type=password]
-					input[type=number]
-						user-select text
-						display inline-block
-						cursor auto
-						padding 0 0 0 38px
-						margin 0
-						width 100%
-						line-height 44px
-						font-size 1em
-						color rgba(0, 0, 0, 0.7)
-						background #fff
-						outline none
-						border solid 1px #eee
-						border-radius 4px
-
-						&:hover
-							background rgba(255, 255, 255, 0.7)
-							border-color #ddd
-
-							& + i
-								color #797776
-
-						&:focus
-							background #fff
-							border-color #ccc
-
-							& + i
-								color #797776
-
-				[type=submit]
-					cursor pointer
-					padding 16px
-					margin -6px 0 0 0
-					width 100%
-					font-size 1.2em
-					color rgba(0, 0, 0, 0.5)
-					outline none
-					border none
-					border-radius 0
-					background transparent
-					transition all .5s ease
-
-					&:hover
-						color $theme-color
-						transition all .2s ease
-
-					&:focus
-						color $theme-color
-						transition all .2s ease
-
-					&:active
-						color darken($theme-color, 30%)
-						transition all .2s ease
-
-					&:disabled
-						opacity 0.7
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-
-		this.user = null;
-		this.signing = false;
-
-		this.oninput = () => {
-			this.api('users/show', {
-				username: this.$refs.username.value
-			}).then(user => {
-				this.user = user;
-				this.$emit('user', user);
-				this.update();
-			});
-		};
-
-		this.onsubmit = e => {
-			e.preventDefault();
-
-			if (this.$refs.username.value == '') {
-				this.$refs.username.focus();
-				return false;
-			}
-			if (this.$refs.password.value == '') {
-				this.$refs.password.focus();
-				return false;
-			}
-			if (this.user && this.user.two_factor_enabled && this.$refs.token.value == '') {
-				this.$refs.token.focus();
-				return false;
-			}
-
-			this.update({
-				signing: true
-			});
-
-			this.api('signin', {
-				username: this.$refs.username.value,
-				password: this.$refs.password.value,
-				token: this.user && this.user.two_factor_enabled ? this.$refs.token.value : undefined
-			}).then(() => {
-				location.reload();
-			}).catch(() => {
-				alert('something happened');
-				this.update({
-					signing: false
-				});
-			});
-
-			return false;
-		};
-	</script>
-</mk-signin>
diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag
deleted file mode 100644
index 99be10609b..0000000000
--- a/src/web/app/common/tags/signup.tag
+++ /dev/null
@@ -1,307 +0,0 @@
-<mk-signup>
-	<form onsubmit={ onsubmit } autocomplete="off">
-		<label class="username">
-			<p class="caption">%fa:at%%i18n:common.tags.mk-signup.username%</p>
-			<input ref="username" type="text" pattern="^[a-zA-Z0-9-]{3,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required="required" onkeyup={ onChangeUsername }/>
-			<p class="profile-page-url-preview" v-if="refs.username.value != '' && username-state != 'invalidFormat' && username-state != 'minRange' && username-state != 'maxRange'">{ _URL_ + '/' + refs.username.value }</p>
-			<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:common.tags.mk-signup.checking%</p>
-			<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.available%</p>
-			<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.unavailable%</p>
-			<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.error%</p>
-			<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.invalid-format%</p>
-			<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-short%</p>
-			<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.too-long%</p>
-		</label>
-		<label class="password">
-			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%</p>
-			<input ref="password" type="password" placeholder="%i18n:common.tags.mk-signup.password-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePassword }/>
-			<div class="meter" v-if="passwordStrength != ''" data-strength={ passwordStrength }>
-				<div class="value" ref="passwordMetar"></div>
-			</div>
-			<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.weak-password%</p>
-			<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.normal-password%</p>
-			<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.strong-password%</p>
-		</label>
-		<label class="retype-password">
-			<p class="caption">%fa:lock%%i18n:common.tags.mk-signup.password%(%i18n:common.tags.mk-signup.retype%)</p>
-			<input ref="passwordRetype" type="password" placeholder="%i18n:common.tags.mk-signup.retype-placeholder%" autocomplete="off" required="required" onkeyup={ onChangePasswordRetype }/>
-			<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:common.tags.mk-signup.password-matched%</p>
-			<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:common.tags.mk-signup.password-not-matched%</p>
-		</label>
-		<label class="recaptcha">
-			<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:common.tags.mk-signup.recaptcha%</p>
-			<div v-if="recaptcha" class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" data-sitekey={ recaptcha.site_key }></div>
-		</label>
-		<label class="agree-tou">
-			<input name="agree-tou" type="checkbox" autocomplete="off" required="required"/>
-			<p><a href={ touUrl } target="_blank">利用規約</a>に同意する</p>
-		</label>
-		<button @click="onsubmit">%i18n:common.tags.mk-signup.create%</button>
-	</form>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			min-width 302px
-			overflow hidden
-
-			> form
-
-				label
-					display block
-					margin 16px 0
-
-					> .caption
-						margin 0 0 4px 0
-						color #828888
-						font-size 0.95em
-
-						> [data-fa]
-							margin-right 0.25em
-							color #96adac
-
-					> .info
-						display block
-						margin 4px 0
-						font-size 0.8em
-
-						> [data-fa]
-							margin-right 0.3em
-
-					&.username
-						.profile-page-url-preview
-							display block
-							margin 4px 8px 0 4px
-							font-size 0.8em
-							color #888
-
-							&:empty
-								display none
-
-							&:not(:empty) + .info
-								margin-top 0
-
-					&.password
-						.meter
-							display block
-							margin-top 8px
-							width 100%
-							height 8px
-
-							&[data-strength='']
-								display none
-
-							&[data-strength='low']
-								> .value
-									background #d73612
-
-							&[data-strength='medium']
-								> .value
-									background #d7ca12
-
-							&[data-strength='high']
-								> .value
-									background #61bb22
-
-							> .value
-								display block
-								width 0%
-								height 100%
-								background transparent
-								border-radius 4px
-								transition all 0.1s ease
-
-				[type=text], [type=password]
-					user-select text
-					display inline-block
-					cursor auto
-					padding 0 12px
-					margin 0
-					width 100%
-					line-height 44px
-					font-size 1em
-					color #333 !important
-					background #fff !important
-					outline none
-					border solid 1px rgba(0, 0, 0, 0.1)
-					border-radius 4px
-					box-shadow 0 0 0 114514px #fff inset
-					transition all .3s ease
-
-					&:hover
-						border-color rgba(0, 0, 0, 0.2)
-						transition all .1s ease
-
-					&:focus
-						color $theme-color !important
-						border-color $theme-color
-						box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
-						transition all 0s ease
-
-					&:disabled
-						opacity 0.5
-
-				.agree-tou
-					padding 4px
-					border-radius 4px
-
-					&:hover
-						background #f4f4f4
-
-					&:active
-						background #eee
-
-					&, *
-						cursor pointer
-
-					p
-						display inline
-						color #555
-
-				button
-					margin 0 0 32px 0
-					padding 16px
-					width 100%
-					font-size 1em
-					color #fff
-					background $theme-color
-					border-radius 3px
-
-					&:hover
-						background lighten($theme-color, 5%)
-
-					&:active
-						background darken($theme-color, 5%)
-
-	</style>
-	<script lang="typescript">
-		this.mixin('api');
-		const getPasswordStrength = require('syuilo-password-strength');
-
-		this.usernameState = null;
-		this.passwordStrength = '';
-		this.passwordRetypeState = null;
-		this.recaptchaed = false;
-
-		this.aboutUrl = `${_DOCS_URL_}/${_LANG_}/tou`;
-
-		window.onRecaptchaed = () => {
-			this.recaptchaed = true;
-			this.update();
-		};
-
-		window.onRecaptchaExpired = () => {
-			this.recaptchaed = false;
-			this.update();
-		};
-
-		this.on('mount', () => {
-			this.update({
-				recaptcha: {
-					site_key: _RECAPTCHA_SITEKEY_
-				}
-			});
-
-			const head = document.getElementsByTagName('head')[0];
-			const script = document.createElement('script');
-			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
-			head.appendChild(script);
-		});
-
-		this.onChangeUsername = () => {
-			const username = this.$refs.username.value;
-
-			if (username == '') {
-				this.update({
-					usernameState: null
-				});
-				return;
-			}
-
-			const err =
-				!username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
-				username.length < 3 ? 'min-range' :
-				username.length > 20 ? 'max-range' :
-				null;
-
-			if (err) {
-				this.update({
-					usernameState: err
-				});
-				return;
-			}
-
-			this.update({
-				usernameState: 'wait'
-			});
-
-			this.api('username/available', {
-				username: username
-			}).then(result => {
-				this.update({
-					usernameState: result.available ? 'ok' : 'unavailable'
-				});
-			}).catch(err => {
-				this.update({
-					usernameState: 'error'
-				});
-			});
-		};
-
-		this.onChangePassword = () => {
-			const password = this.$refs.password.value;
-
-			if (password == '') {
-				this.passwordStrength = '';
-				return;
-			}
-
-			const strength = getPasswordStrength(password);
-			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
-			this.update();
-			this.$refs.passwordMetar.style.width = `${strength * 100}%`;
-		};
-
-		this.onChangePasswordRetype = () => {
-			const password = this.$refs.password.value;
-			const retypedPassword = this.$refs.passwordRetype.value;
-
-			if (retypedPassword == '') {
-				this.passwordRetypeState = null;
-				return;
-			}
-
-			this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
-		};
-
-		this.onsubmit = e => {
-			e.preventDefault();
-
-			const username = this.$refs.username.value;
-			const password = this.$refs.password.value;
-
-			const locker = document.body.appendChild(document.createElement('mk-locker'));
-
-			this.api('signup', {
-				username: username,
-				password: password,
-				'g-recaptcha-response': grecaptcha.getResponse()
-			}).then(() => {
-				this.api('signin', {
-					username: username,
-					password: password
-				}).then(() => {
-					location.href = '/';
-				});
-			}).catch(() => {
-				alert('%i18n:common.tags.mk-signup.some-error%');
-
-				grecaptcha.reset();
-				this.recaptchaed = false;
-
-				locker.parentNode.removeChild(locker);
-			});
-
-			return false;
-		};
-	</script>
-</mk-signup>
diff --git a/src/web/app/common/tags/special-message.tag b/src/web/app/common/tags/special-message.tag
deleted file mode 100644
index da903c6325..0000000000
--- a/src/web/app/common/tags/special-message.tag
+++ /dev/null
@@ -1,27 +0,0 @@
-<mk-special-message>
-	<p v-if="m == 1 && d == 1">%i18n:common.tags.mk-special-message.new-year%</p>
-	<p v-if="m == 12 && d == 25">%i18n:common.tags.mk-special-message.christmas%</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			&:empty
-				display none
-
-			> p
-				margin 0
-				padding 4px
-				text-align center
-				font-size 14px
-				font-weight bold
-				text-transform uppercase
-				color #fff
-				background #ff1036
-
-	</style>
-	<script lang="typescript">
-		const now = new Date();
-		this.d = now.getDate();
-		this.m = now.getMonth() + 1;
-	</script>
-</mk-special-message>
diff --git a/src/web/app/common/tags/twitter-setting.tag b/src/web/app/common/tags/twitter-setting.tag
deleted file mode 100644
index 935239f44e..0000000000
--- a/src/web/app/common/tags/twitter-setting.tag
+++ /dev/null
@@ -1,62 +0,0 @@
-<mk-twitter-setting>
-	<p>%i18n:common.tags.mk-twitter-setting.description%<a href={ _DOCS_URL_ + '/link-to-twitter' } target="_blank">%i18n:common.tags.mk-twitter-setting.detail%</a></p>
-	<p class="account" v-if="I.twitter" title={ 'Twitter ID: ' + I.twitter.user_id }>%i18n:common.tags.mk-twitter-setting.connected-to%: <a href={ 'https://twitter.com/' + I.twitter.screen_name } target="_blank">@{ I.twitter.screen_name }</a></p>
-	<p>
-		<a href={ _API_URL_ + '/connect/twitter' } target="_blank" @click="connect">{ I.twitter ? '%i18n:common.tags.mk-twitter-setting.reconnect%' : '%i18n:common.tags.mk-twitter-setting.connect%' }</a>
-		<span v-if="I.twitter"> or </span>
-		<a href={ _API_URL_ + '/disconnect/twitter' } target="_blank" v-if="I.twitter" @click="disconnect">%i18n:common.tags.mk-twitter-setting.disconnect%</a>
-	</p>
-	<p class="id" v-if="I.twitter">Twitter ID: { I.twitter.user_id }</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			color #4a535a
-
-			.account
-				border solid 1px #e1e8ed
-				border-radius 4px
-				padding 16px
-
-				a
-					font-weight bold
-					color inherit
-
-			.id
-				color #8899a6
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.form = null;
-
-		this.on('mount', () => {
-			this.I.on('updated', this.onMeUpdated);
-		});
-
-		this.on('unmount', () => {
-			this.I.off('updated', this.onMeUpdated);
-		});
-
-		this.onMeUpdated = () => {
-			if (this.I.twitter) {
-				if (this.form) this.form.close();
-			}
-		};
-
-		this.connect = e => {
-			e.preventDefault();
-			this.form = window.open(_API_URL_ + '/connect/twitter',
-				'twitter_connect_window',
-				'height=570,width=520');
-			return false;
-		};
-
-		this.disconnect = e => {
-			e.preventDefault();
-			window.open(_API_URL_ + '/disconnect/twitter',
-				'twitter_disconnect_window',
-				'height=570,width=520');
-			return false;
-		};
-	</script>
-</mk-twitter-setting>
diff --git a/src/web/app/common/tags/uploader.tag b/src/web/app/common/tags/uploader.tag
deleted file mode 100644
index 519b063fac..0000000000
--- a/src/web/app/common/tags/uploader.tag
+++ /dev/null
@@ -1,199 +0,0 @@
-<mk-uploader>
-	<ol v-if="uploads.length > 0">
-		<li each={ uploads }>
-			<div class="img" style="background-image: url({ img })"></div>
-			<p class="name">%fa:spinner .pulse%{ name }</p>
-			<p class="status"><span class="initing" v-if="progress == undefined">%i18n:common.tags.mk-uploader.waiting%<mk-ellipsis/></span><span class="kb" v-if="progress != undefined">{ String(Math.floor(progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i> / { String(Math.floor(progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }<i>KB</i></span><span class="percentage" v-if="progress != undefined">{ Math.floor((progress.value / progress.max) * 100) }</span></p>
-			<progress v-if="progress != undefined && progress.value != progress.max" value={ progress.value } max={ progress.max }></progress>
-			<div class="progress initing" v-if="progress == undefined"></div>
-			<div class="progress waiting" v-if="progress != undefined && progress.value == progress.max"></div>
-		</li>
-	</ol>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			overflow auto
-
-			&:empty
-				display none
-
-			> ol
-				display block
-				margin 0
-				padding 0
-				list-style none
-
-				> li
-					display block
-					margin 8px 0 0 0
-					padding 0
-					height 36px
-					box-shadow 0 -1px 0 rgba($theme-color, 0.1)
-					border-top solid 8px transparent
-
-					&:first-child
-						margin 0
-						box-shadow none
-						border-top none
-
-					> .img
-						display block
-						position absolute
-						top 0
-						left 0
-						width 36px
-						height 36px
-						background-size cover
-						background-position center center
-
-					> .name
-						display block
-						position absolute
-						top 0
-						left 44px
-						margin 0
-						padding 0
-						max-width 256px
-						font-size 0.8em
-						color rgba($theme-color, 0.7)
-						white-space nowrap
-						text-overflow ellipsis
-						overflow hidden
-
-						> [data-fa]
-							margin-right 4px
-
-					> .status
-						display block
-						position absolute
-						top 0
-						right 0
-						margin 0
-						padding 0
-						font-size 0.8em
-
-						> .initing
-							color rgba($theme-color, 0.5)
-
-						> .kb
-							color rgba($theme-color, 0.5)
-
-						> .percentage
-							display inline-block
-							width 48px
-							text-align right
-
-							color rgba($theme-color, 0.7)
-
-							&:after
-								content '%'
-
-					> progress
-						display block
-						position absolute
-						bottom 0
-						right 0
-						margin 0
-						width calc(100% - 44px)
-						height 8px
-						background transparent
-						border none
-						border-radius 4px
-						overflow hidden
-
-						&::-webkit-progress-value
-							background $theme-color
-
-						&::-webkit-progress-bar
-							background rgba($theme-color, 0.1)
-
-					> .progress
-						display block
-						position absolute
-						bottom 0
-						right 0
-						margin 0
-						width calc(100% - 44px)
-						height 8px
-						border none
-						border-radius 4px
-						background linear-gradient(
-							45deg,
-							lighten($theme-color, 30%) 25%,
-							$theme-color               25%,
-							$theme-color               50%,
-							lighten($theme-color, 30%) 50%,
-							lighten($theme-color, 30%) 75%,
-							$theme-color               75%,
-							$theme-color
-						)
-						background-size 32px 32px
-						animation bg 1.5s linear infinite
-
-						&.initing
-							opacity 0.3
-
-						@keyframes bg
-							from {background-position: 0 0;}
-							to   {background-position: -64px 32px;}
-
-	</style>
-	<script lang="typescript">
-		this.mixin('i');
-
-		this.uploads = [];
-
-		this.upload = (file, folder) => {
-			if (folder && typeof folder == 'object') folder = folder.id;
-
-			const id = Math.random();
-
-			const ctx = {
-				id: id,
-				name: file.name || 'untitled',
-				progress: undefined
-			};
-
-			this.uploads.push(ctx);
-			this.$emit('change-uploads', this.uploads);
-			this.update();
-
-			const reader = new FileReader();
-			reader.onload = e => {
-				ctx.img = e.target.result;
-				this.update();
-			};
-			reader.readAsDataURL(file);
-
-			const data = new FormData();
-			data.append('i', this.I.token);
-			data.append('file', file);
-
-			if (folder) data.append('folder_id', folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', _API_URL_ + '/drive/files/create', true);
-			xhr.onload = e => {
-				const driveFile = JSON.parse(e.target.response);
-
-				this.$emit('uploaded', driveFile);
-
-				this.uploads = this.uploads.filter(x => x.id != id);
-				this.$emit('change-uploads', this.uploads);
-
-				this.update();
-			};
-
-			xhr.upload.onprogress = e => {
-				if (e.lengthComputable) {
-					if (ctx.progress == undefined) ctx.progress = {};
-					ctx.progress.max = e.total;
-					ctx.progress.value = e.loaded;
-					this.update();
-				}
-			};
-
-			xhr.send(data);
-		};
-	</script>
-</mk-uploader>
-- 
cgit v1.2.3-freya