wip

8 files changed, 350 insertions, 562 deletions

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/views/components/post-menu.vue b/src/web/app/common/views/components/post-menu.vue
new file mode 100644
index 0000000000..078e4745a4
--- /dev/null
+++ b/src/web/app/common/views/components/post-menu.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="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>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import anime from 'animejs';
+
+export default Vue.extend({
+	props: ['post', 'source', 'compact'],
+	mounted() {
+		const popover = this.$refs.popover as any;
+
+		const rect = this.source.getBoundingClientRect();
+		const width = popover.offsetWidth;
+		const height = popover.offsetHeight;
+
+		if (this.compact) {
+			const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+			const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+			popover.style.left = (x - (width / 2)) + 'px';
+			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;
+			popover.style.left = (x - (width / 2)) + 'px';
+			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
+		});
+	},
+	methods: {
+		pin() {
+			this.$root.$data.os.api('i/pin', {
+				post_id: this.post.id
+			}).then(() => {
+				this.$destroy();
+			});
+		},
+
+		close() {
+			(this.$refs.backdrop as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.backdrop,
+				opacity: 0,
+				duration: 200,
+				easing: 'linear'
+			});
+
+			(this.$refs.popover as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.popover,
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+$border-color = rgba(27, 31, 35, 0.15)
+
+.mk-post-menu
+	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>
diff --git a/src/web/app/common/views/components/reaction-picker.vue b/src/web/app/common/views/components/reaction-picker.vue
index dd4d1380b7..62ccbfdd04 100644
--- a/src/web/app/common/views/components/reaction-picker.vue
+++ b/src/web/app/common/views/components/reaction-picker.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="mk-reaction-picker">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
@@ -18,171 +18,169 @@
 </div>
 </template>
 
-<script lang="typescript">
-	import anime from 'animejs';
-	import api from '../scripts/api';
-	import MkReactionIcon from './reaction-icon.vue';
+<script lang="ts">
+import Vue from 'vue';
+import anime from 'animejs';
 
-	const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
+const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%';
 
-	export default {
-		components: {
-			MkReactionIcon
+export default Vue.extend({
+	props: ['post', 'source', 'compact', 'cb'],
+	data() {
+		return {
+			title: placeholder
+		};
+	},
+	mounted() {
+		const popover = this.$refs.popover as any;
+
+		const rect = this.source.getBoundingClientRect();
+		const width = popover.offsetWidth;
+		const height = popover.offsetHeight;
+
+		if (this.compact) {
+			const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
+			const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
+			popover.style.left = (x - (width / 2)) + 'px';
+			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;
+			popover.style.left = (x - (width / 2)) + 'px';
+			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
+		});
+	},
+	methods: {
+		react(reaction) {
+			this.$root.$data.os.api('posts/reactions/create', {
+				post_id: this.post.id,
+				reaction: reaction
+			}).then(() => {
+				if (this.cb) this.cb();
+				this.$destroy();
+			});
 		},
-		props: ['post', 'source', 'compact', 'cb'],
-		data() {
-			return {
-				title: placeholder
-			};
+		onMouseover(e) {
+			this.title = e.target.title;
 		},
-		created() {
-			const rect = this.source.getBoundingClientRect();
-			const width = this.$refs.popover.offsetWidth;
-			const height = this.$refs.popover.offsetHeight;
-			if (this.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';
-			}
-
+		onMouseout(e) {
+			this.title = placeholder;
+		},
+		close() {
+			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 			anime({
 				targets: this.$refs.backdrop,
-				opacity: 1,
-				duration: 100,
+				opacity: 0,
+				duration: 200,
 				easing: 'linear'
 			});
 
+			(this.$refs.popover as any).style.pointerEvents = 'none';
 			anime({
 				targets: this.$refs.popover,
-				opacity: 1,
-				scale: [0.5, 1],
-				duration: 500
+				opacity: 0,
+				scale: 0.5,
+				duration: 200,
+				easing: 'easeInBack',
+				complete: () => this.$destroy()
 			});
-		},
-		methods: {
-			react(reaction) {
-				api('posts/reactions/create', {
-					post_id: this.post.id,
-					reaction: reaction
-				}).then(() => {
-					if (this.cb) this.cb();
-					this.$destroy();
-				});
-			},
-			onMouseover(e) {
-				this.title = e.target.title;
-			},
-			onMouseout(e) {
-				this.title = placeholder;
-			},
-			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>
 
 <style lang="stylus" scoped>
 	$border-color = rgba(27, 31, 35, 0.15)
 
-	:scope
-		display block
-		position initial
+.mk-reaction-picker
+	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
+	> .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
+	> .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
+		$balloon-size = 16px
 
-			&:not(.compact)
-				margin-top $balloon-size
-				transform-origin center -($balloon-size)
+		&: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
+			&: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
 
-			> p
+			&:after
+				content ""
 				display block
-				margin 0
-				padding 8px 10px
-				font-size 14px
-				color #586069
-				border-bottom solid 1px #e1e4e8
+				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
+
+		> p
+			display block
+			margin 0
+			padding 8px 10px
+			font-size 14px
+			color #586069
+			border-bottom solid 1px #e1e4e8
 
-			> div
-				padding 4px
-				width 240px
-				text-align center
+		> div
+			padding 4px
+			width 240px
+			text-align center
 
-				> button
-					width 40px
-					height 40px
-					font-size 24px
-					border-radius 2px
+			> button
+				width 40px
+				height 40px
+				font-size 24px
+				border-radius 2px
 
-					&:hover
-						background #eee
+				&:hover
+					background #eee
 
-					&:active
-						background $theme-color
-						box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
+				&:active
+					background $theme-color
+					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
 </style>
diff --git a/src/web/app/desktop/-tags/index.ts b/src/web/app/desktop/-tags/index.ts
deleted file mode 100644
index 4edda83534..0000000000
--- a/src/web/app/desktop/-tags/index.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-require('./contextmenu.tag');
-require('./dialog.tag');
-require('./window.tag');
-require('./input-dialog.tag');
-require('./follow-button.tag');
-require('./drive/base-contextmenu.tag');
-require('./drive/file-contextmenu.tag');
-require('./drive/folder-contextmenu.tag');
-require('./drive/file.tag');
-require('./drive/folder.tag');
-require('./drive/nav-folder.tag');
-require('./drive/browser-window.tag');
-require('./drive/browser.tag');
-require('./select-file-from-drive-window.tag');
-require('./select-folder-from-drive-window.tag');
-require('./crop-window.tag');
-require('./settings.tag');
-require('./settings-window.tag');
-require('./analog-clock.tag');
-require('./notifications.tag');
-require('./post-form-window.tag');
-require('./post-form.tag');
-require('./post-preview.tag');
-require('./repost-form-window.tag');
-require('./home-widgets/user-recommendation.tag');
-require('./home-widgets/timeline.tag');
-require('./home-widgets/mentions.tag');
-require('./home-widgets/calendar.tag');
-require('./home-widgets/donation.tag');
-require('./home-widgets/tips.tag');
-require('./home-widgets/nav.tag');
-require('./home-widgets/profile.tag');
-require('./home-widgets/notifications.tag');
-require('./home-widgets/rss-reader.tag');
-require('./home-widgets/photo-stream.tag');
-require('./home-widgets/broadcast.tag');
-require('./home-widgets/version.tag');
-require('./home-widgets/recommended-polls.tag');
-require('./home-widgets/trends.tag');
-require('./home-widgets/activity.tag');
-require('./home-widgets/server.tag');
-require('./home-widgets/slideshow.tag');
-require('./home-widgets/channel.tag');
-require('./home-widgets/timemachine.tag');
-require('./home-widgets/post-form.tag');
-require('./home-widgets/access-log.tag');
-require('./home-widgets/messaging.tag');
-require('./timeline.tag');
-require('./messaging/window.tag');
-require('./messaging/room-window.tag');
-require('./following-setuper.tag');
-require('./ellipsis-icon.tag');
-require('./ui.tag');
-require('./home.tag');
-require('./user-timeline.tag');
-require('./user.tag');
-require('./big-follow-button.tag');
-require('./pages/entrance.tag');
-require('./pages/home.tag');
-require('./pages/home-customize.tag');
-require('./pages/user.tag');
-require('./pages/post.tag');
-require('./pages/search.tag');
-require('./pages/not-found.tag');
-require('./pages/selectdrive.tag');
-require('./pages/drive.tag');
-require('./pages/messaging-room.tag');
-require('./autocomplete-suggestion.tag');
-require('./progress-dialog.tag');
-require('./user-preview.tag');
-require('./post-detail.tag');
-require('./post-detail-sub.tag');
-require('./search.tag');
-require('./search-posts.tag');
-require('./set-avatar-suggestion.tag');
-require('./set-banner-suggestion.tag');
-require('./repost-form.tag');
-require('./sub-post-content.tag');
-require('./images.tag');
-require('./donation.tag');
-require('./users-list.tag');
-require('./user-following.tag');
-require('./user-followers.tag');
-require('./user-following-window.tag');
-require('./user-followers-window.tag');
-require('./list-user.tag');
-require('./detailed-post-window.tag');
-require('./widgets/calendar.tag');
-require('./widgets/activity.tag');
diff --git a/src/web/app/desktop/-tags/set-avatar-suggestion.tag b/src/web/app/desktop/-tags/set-avatar-suggestion.tag
deleted file mode 100644
index e67a8c66d4..0000000000
--- a/src/web/app/desktop/-tags/set-avatar-suggestion.tag
+++ /dev/null
@@ -1,48 +0,0 @@
-<mk-set-avatar-suggestion @click="set">
-	<p><b>アバターを設定</b>してみませんか？
-		<button @click="close">%fa:times%</button>
-	</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			cursor pointer
-			color #fff
-			background #a8cad0
-
-			&:hover
-				background #70abb5
-
-			> p
-				display block
-				margin 0 auto
-				padding 8px
-				max-width 1024px
-
-				> a
-					font-weight bold
-					color #fff
-
-				> button
-					position absolute
-					top 0
-					right 0
-					padding 8px
-					color #fff
-
-	</style>
-	<script lang="typescript">
-		import updateAvatar from '../scripts/update-avatar';
-
-		this.mixin('i');
-
-		this.set = () => {
-			updateAvatar(this.I);
-		};
-
-		this.close = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.$destroy();
-		};
-	</script>
-</mk-set-avatar-suggestion>
diff --git a/src/web/app/desktop/-tags/set-banner-suggestion.tag b/src/web/app/desktop/-tags/set-banner-suggestion.tag
deleted file mode 100644
index 0d32c9a0e3..0000000000
--- a/src/web/app/desktop/-tags/set-banner-suggestion.tag
+++ /dev/null
@@ -1,48 +0,0 @@
-<mk-set-banner-suggestion @click="set">
-	<p><b>バナーを設定</b>してみませんか？
-		<button @click="close">%fa:times%</button>
-	</p>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-			cursor pointer
-			color #fff
-			background #a8cad0
-
-			&:hover
-				background #70abb5
-
-			> p
-				display block
-				margin 0 auto
-				padding 8px
-				max-width 1024px
-
-				> a
-					font-weight bold
-					color #fff
-
-				> button
-					position absolute
-					top 0
-					right 0
-					padding 8px
-					color #fff
-
-	</style>
-	<script lang="typescript">
-		import updateBanner from '../scripts/update-banner';
-
-		this.mixin('i');
-
-		this.set = () => {
-			updateBanner(this.I);
-		};
-
-		this.close = e => {
-			e.preventDefault();
-			e.stopPropagation();
-			this.$destroy();
-		};
-	</script>
-</mk-set-banner-suggestion>
diff --git a/src/web/app/desktop/views/components/sub-post-content.vue b/src/web/app/desktop/views/components/sub-post-content.vue
index 2463e8a9bb..e5264cefcd 100644
--- a/src/web/app/desktop/views/components/sub-post-content.vue
+++ b/src/web/app/desktop/views/components/sub-post-content.vue
@@ -2,8 +2,9 @@
 <div class="mk-sub-post-content">
 	<div class="body">
 		<a class="reply" v-if="post.reply_id">%fa:reply%</a>
-		<span ref="text"></span>
+		<mk-post-html :ast="post.ast" :i="$root.$data.os.i"/>
 		<a class="quote" v-if="post.repost_id" :href="`/post:${post.repost_id}`">RP: ...</a>
+		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 	</div>
 	<details v-if="post.media">
 		<summary>({{ post.media.length }}つのメディア)</summary>
@@ -16,23 +17,23 @@
 </div>
 </template>
 
-<script lang="typescript">
-	import compile from '../../common/scripts/text-compiler';
+<script lang="ts">
+import Vue from 'vue';
 
-	this.mixin('user-preview');
-
-	this.post = this.opts.post;
-
-	this.on('mount', () => {
-		if (this.post.text) {
-			const tokens = this.post.ast;
-			this.$refs.text.innerHTML = compile(tokens, false);
-
-			Array.from(this.$refs.text.children).forEach(e => {
-				if (e.tagName == 'MK-URL') riot.mount(e);
-			});
+export default Vue.extend({
+	props: ['post'],
+	computed: {
+		urls(): string[] {
+			if (this.post.ast) {
+				return this.post.ast
+					.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
+					.map(t => t.url);
+			} else {
+				return null;
+			}
 		}
-	});
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/web/app/desktop/views/components/timeline-post.vue b/src/web/app/desktop/views/components/timeline-post.vue
index c18cff36a8..6c3d525d59 100644
--- a/src/web/app/desktop/views/components/timeline-post.vue
+++ b/src/web/app/desktop/views/components/timeline-post.vue
@@ -76,6 +76,19 @@ import Vue from 'vue';
 import dateStringify from '../../../common/scripts/date-stringify';
 import MkPostFormWindow from './post-form-window.vue';
 import MkRepostFormWindow from './repost-form-window.vue';
+import MkPostMenu from '../../../common/views/components/post-menu.vue';
+import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
+
+function focus(el, fn) {
+	const target = fn(el);
+	if (target) {
+		if (target.hasAttribute('tabindex')) {
+			target.focus();
+		} else {
+			focus(target, fn);
+		}
+	}
+}
 
 export default Vue.extend({
 	props: ['post'],
@@ -171,81 +184,61 @@ export default Vue.extend({
 					post: this.p
 				}
 			}).$mount().$el);
-		}
-	}
-});
-</script>
-
-<script lang="typescript">
-
-
-this.react = () => {
-	riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
-		source: this.$refs.reactButton,
-		post: this.p
-	});
-};
-
-this.menu = () => {
-	riot.mount(document.body.appendChild(document.createElement('mk-post-menu')), {
-		source: this.$refs.menuButton,
-		post: this.p
-	});
-};
-
-this.onKeyDown = e => {
-	let shouldBeCancel = true;
-
-	switch (true) {
-		case e.which == 38: // [↑]
-		case e.which == 74: // [j]
-		case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-			focus(this.root, e => e.previousElementSibling);
-			break;
-
-		case e.which == 40: // [↓]
-		case e.which == 75: // [k]
-		case e.which == 9: // [Tab]
-			focus(this.root, e => e.nextElementSibling);
-			break;
+		},
+		react() {
+			document.body.appendChild(new MkReactionPicker({
+				propsData: {
+					source: this.$refs.menuButton,
+					post: this.p
+				}
+			}).$mount().$el);
+		},
+		menu() {
+			document.body.appendChild(new MkPostMenu({
+				propsData: {
+					source: this.$refs.menuButton,
+					post: this.p
+				}
+			}).$mount().$el);
+		},
+		onKeydown(e) {
+			let shouldBeCancel = true;
 
-		case e.which == 81: // [q]
-		case e.which == 69: // [e]
-			this.repost();
-			break;
+			switch (true) {
+				case e.which == 38: // [↑]
+				case e.which == 74: // [j]
+				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
+					focus(this.$el, e => e.previousElementSibling);
+					break;
 
-		case e.which == 70: // [f]
-		case e.which == 76: // [l]
-			this.like();
-			break;
+				case e.which == 40: // [↓]
+				case e.which == 75: // [k]
+				case e.which == 9: // [Tab]
+					focus(this.$el, e => e.nextElementSibling);
+					break;
 
-		case e.which == 82: // [r]
-			this.reply();
-			break;
+				case e.which == 81: // [q]
+				case e.which == 69: // [e]
+					this.repost();
+					break;
 
-		default:
-			shouldBeCancel = false;
-	}
+				case e.which == 70: // [f]
+				case e.which == 76: // [l]
+					//this.like();
+					break;
 
-	if (shouldBeCancel) e.preventDefault();
-};
+				case e.which == 82: // [r]
+					this.reply();
+					break;
 
-this.onDblClick = () => {
-	riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
-		post: this.p.id
-	});
-};
+				default:
+					shouldBeCancel = false;
+			}
 
-function focus(el, fn) {
-	const target = fn(el);
-	if (target) {
-		if (target.hasAttribute('tabindex')) {
-			target.focus();
-		} else {
-			focus(target, fn);
+			if (shouldBeCancel) e.preventDefault();
 		}
 	}
-}
+});
 </script>
 
 <style lang="stylus" scoped>