From b05bee58d28c3209d7f86a909f877c1e121c12ed Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 20 Mar 2017 04:24:19 +0900
Subject: [PATCH] #298

---
 src/api/endpoints.ts                          |  19 +--
 .../posts/{likes.ts => reactions.ts}          |  12 +-
 .../posts/{likes => reactions}/create.ts      |  61 ++++----
 .../posts/{likes => reactions}/delete.ts      |  48 +++---
 src/api/models/like.ts                        |   3 -
 src/api/models/post-reaction.ts               |   3 +
 src/api/serializers/notification.ts           |   2 +-
 src/api/serializers/post-reaction.ts          |  43 ++++++
 src/api/serializers/post.ts                   |  14 +-
 src/web/app/common/tags/index.js              |   3 +
 src/web/app/common/tags/reaction-icon.tag     |  12 ++
 src/web/app/common/tags/reaction-picker.tag   |  58 ++++++++
 src/web/app/common/tags/reactions-viewer.tag  |  29 ++++
 src/web/app/desktop/tags/notifications.tag    |  38 +++--
 src/web/app/desktop/tags/post-detail.tag      | 138 ++----------------
 src/web/app/desktop/tags/timeline-post.tag    |  36 ++---
 src/web/app/dev/tags/new-app-form.tag         |   4 +-
 .../app/mobile/tags/notification-preview.tag  |  29 ++--
 src/web/app/mobile/tags/notification.tag      |  10 +-
 src/web/app/mobile/tags/post-detail.tag       | 137 ++---------------
 src/web/app/mobile/tags/timeline-post.tag     |  31 ++--
 test/api.js                                   |  65 +++++----
 tools/migration/like-to-reactions.js          |  22 +++
 23 files changed, 371 insertions(+), 446 deletions(-)
 rename src/api/endpoints/posts/{likes.ts => reactions.ts} (81%)
 rename src/api/endpoints/posts/{likes => reactions}/create.ts (53%)
 rename src/api/endpoints/posts/{likes => reactions}/delete.ts (57%)
 delete mode 100644 src/api/models/like.ts
 create mode 100644 src/api/models/post-reaction.ts
 create mode 100644 src/api/serializers/post-reaction.ts
 create mode 100644 src/web/app/common/tags/reaction-icon.tag
 create mode 100644 src/web/app/common/tags/reaction-picker.tag
 create mode 100644 src/web/app/common/tags/reactions-viewer.tag
 create mode 100644 tools/migration/like-to-reactions.js

diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index 17cd8ff56f..2d3716bb85 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -115,21 +115,12 @@ const endpoints: Endpoint[] = [
 	{
 		name: 'aggregation/users/post',
 	},
-	{
-		name: 'aggregation/users/like'
-	},
 	{
 		name: 'aggregation/users/followers'
 	},
 	{
 		name: 'aggregation/users/following'
 	},
-	{
-		name: 'aggregation/posts/like'
-	},
-	{
-		name: 'aggregation/posts/likes'
-	},
 	{
 		name: 'aggregation/posts/repost'
 	},
@@ -370,26 +361,26 @@ const endpoints: Endpoint[] = [
 		}
 	},
 	{
-		name: 'posts/likes',
+		name: 'posts/reactions',
 		withCredential: true
 	},
 	{
-		name: 'posts/likes/create',
+		name: 'posts/reactions/create',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
 			max: 100
 		},
-		kind: 'like-write'
+		kind: 'reaction-write'
 	},
 	{
-		name: 'posts/likes/delete',
+		name: 'posts/reactions/delete',
 		withCredential: true,
 		limit: {
 			duration: ms('1hour'),
 			max: 100
 		},
-		kind: 'like-write'
+		kind: 'reaction-write'
 	},
 	{
 		name: 'posts/favorites/create',
diff --git a/src/api/endpoints/posts/likes.ts b/src/api/endpoints/posts/reactions.ts
similarity index 81%
rename from src/api/endpoints/posts/likes.ts
rename to src/api/endpoints/posts/reactions.ts
index 29aff1de38..eab5d9b258 100644
--- a/src/api/endpoints/posts/likes.ts
+++ b/src/api/endpoints/posts/reactions.ts
@@ -3,11 +3,11 @@
  */
 import $ from 'cafy';
 import Post from '../../models/post';
-import Like from '../../models/like';
-import serialize from '../../serializers/user';
+import Reaction from '../../models/post-reaction';
+import serialize from '../../serializers/post-reaction';
 
 /**
- * Show a likes of a post
+ * Show reactions of a post
  *
  * @param {any} params
  * @param {any} user
@@ -40,7 +40,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	}
 
 	// Issue query
-	const likes = await Like
+	const reactions = await Reaction
 		.find({
 			post_id: post._id,
 			deleted_at: { $exists: false }
@@ -53,6 +53,6 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		});
 
 	// Serialize
-	res(await Promise.all(likes.map(async like =>
-		await serialize(like.user_id, user))));
+	res(await Promise.all(reactions.map(async reaction =>
+		await serialize(reaction, user))));
 });
diff --git a/src/api/endpoints/posts/likes/create.ts b/src/api/endpoints/posts/reactions/create.ts
similarity index 53%
rename from src/api/endpoints/posts/likes/create.ts
rename to src/api/endpoints/posts/reactions/create.ts
index 3a7650dead..de4df5fbe1 100644
--- a/src/api/endpoints/posts/likes/create.ts
+++ b/src/api/endpoints/posts/reactions/create.ts
@@ -2,13 +2,12 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import Like from '../../../models/like';
+import Reaction from '../../../models/post-reaction';
 import Post from '../../../models/post';
-import User from '../../../models/user';
 import notify from '../../../common/notify';
 
 /**
- * Like a post
+ * React to a post
  *
  * @param {any} params
  * @param {any} user
@@ -19,7 +18,18 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [postId, postIdErr] = $(params.post_id).id().$;
 	if (postIdErr) return rej('invalid post_id param');
 
-	// Get likee
+	// Get 'reaction' parameter
+	const [reaction, reactionErr] = $(params.reaction).string().or([
+		'like',
+		'love',
+		'laugh',
+		'hmm',
+		'surprise',
+		'congrats'
+	]).$;
+	if (reactionErr) return rej('invalid reaction param');
+
+	// Fetch reactee
 	const post = await Post.findOne({
 		_id: postId
 	});
@@ -30,53 +40,42 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 
 	// Myself
 	if (post.user_id.equals(user._id)) {
-		return rej('-need-translate-');
+		return rej('cannot react to my post');
 	}
 
-	// if already liked
-	const exist = await Like.findOne({
+	// if already reacted
+	const exist = await Reaction.findOne({
 		post_id: post._id,
 		user_id: user._id,
 		deleted_at: { $exists: false }
 	});
 
 	if (exist !== null) {
-		return rej('already liked');
+		return rej('already reacted');
 	}
 
-	// Create like
-	await Like.insert({
+	// Create reaction
+	await Reaction.insert({
 		created_at: new Date(),
 		post_id: post._id,
-		user_id: user._id
+		user_id: user._id,
+		reaction: reaction
 	});
 
 	// Send response
 	res();
 
-	// Increment likes count
+	const inc = {};
+	inc['reaction_counts.' + reaction] = 1;
+
+	// Increment reactions count
 	Post.update({ _id: post._id }, {
-		$inc: {
-			likes_count: 1
-		}
-	});
-
-	// Increment user likes count
-	User.update({ _id: user._id }, {
-		$inc: {
-			likes_count: 1
-		}
-	});
-
-	// Increment user liked count
-	User.update({ _id: post.user_id }, {
-		$inc: {
-			liked_count: 1
-		}
+		$inc: inc
 	});
 
 	// Notify
-	notify(post.user_id, user._id, 'like', {
-		post_id: post._id
+	notify(post.user_id, user._id, 'reaction', {
+		post_id: post._id,
+		reaction: reaction
 	});
 });
diff --git a/src/api/endpoints/posts/likes/delete.ts b/src/api/endpoints/posts/reactions/delete.ts
similarity index 57%
rename from src/api/endpoints/posts/likes/delete.ts
rename to src/api/endpoints/posts/reactions/delete.ts
index d90f2937e0..89f6beb103 100644
--- a/src/api/endpoints/posts/likes/delete.ts
+++ b/src/api/endpoints/posts/reactions/delete.ts
@@ -2,13 +2,12 @@
  * Module dependencies
  */
 import $ from 'cafy';
-import Like from '../../../models/like';
+import Reaction from '../../../models/post-reaction';
 import Post from '../../../models/post';
-import User from '../../../models/user';
 // import event from '../../../event';
 
 /**
- * Unlike a post
+ * Unreact to a post
  *
  * @param {any} params
  * @param {any} user
@@ -19,7 +18,7 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 	const [postId, postIdErr] = $(params.post_id).id().$;
 	if (postIdErr) return rej('invalid post_id param');
 
-	// Get likee
+	// Fetch unreactee
 	const post = await Post.findOne({
 		_id: postId
 	});
@@ -28,47 +27,34 @@ module.exports = (params, user) => new Promise(async (res, rej) => {
 		return rej('post not found');
 	}
 
-	// if already liked
-	const exist = await Like.findOne({
+	// if already unreacted
+	const exist = await Reaction.findOne({
 		post_id: post._id,
 		user_id: user._id,
 		deleted_at: { $exists: false }
 	});
 
 	if (exist === null) {
-		return rej('already not liked');
+		return rej('never reacted');
 	}
 
-	// Delete like
-	await Like.update({
+	// Delete reaction
+	await Reaction.update({
 		_id: exist._id
 	}, {
-			$set: {
-				deleted_at: new Date()
-			}
-		});
+		$set: {
+			deleted_at: new Date()
+		}
+	});
 
 	// Send response
 	res();
 
-	// Decrement likes count
+	const dec = {};
+	dec['reaction_counts.' + exist.reaction] = -1;
+
+	// Decrement reactions count
 	Post.update({ _id: post._id }, {
-		$inc: {
-			likes_count: -1
-		}
-	});
-
-	// Decrement user likes count
-	User.update({ _id: user._id }, {
-		$inc: {
-			likes_count: -1
-		}
-	});
-
-	// Decrement user liked count
-	User.update({ _id: post.user_id }, {
-		$inc: {
-			liked_count: -1
-		}
+		$inc: dec
 	});
 });
diff --git a/src/api/models/like.ts b/src/api/models/like.ts
deleted file mode 100644
index ff04d8d0f7..0000000000
--- a/src/api/models/like.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import db from '../../db/mongodb';
-
-export default db.get('likes') as any; // fuck type definition
diff --git a/src/api/models/post-reaction.ts b/src/api/models/post-reaction.ts
new file mode 100644
index 0000000000..282ae5bd21
--- /dev/null
+++ b/src/api/models/post-reaction.ts
@@ -0,0 +1,3 @@
+import db from '../../db/mongodb';
+
+export default db.get('post_reactions') as any; // fuck type definition
diff --git a/src/api/serializers/notification.ts b/src/api/serializers/notification.ts
index 50952e5426..ac919dc8b0 100644
--- a/src/api/serializers/notification.ts
+++ b/src/api/serializers/notification.ts
@@ -51,7 +51,7 @@ export default (notification: any) => new Promise<any>(async (resolve, reject) =
 		case 'reply':
 		case 'repost':
 		case 'quote':
-		case 'like':
+		case 'reaction':
 		case 'poll_vote':
 			// Populate post
 			_notification.post = await serializePost(_notification.post_id, me);
diff --git a/src/api/serializers/post-reaction.ts b/src/api/serializers/post-reaction.ts
new file mode 100644
index 0000000000..b8807a741c
--- /dev/null
+++ b/src/api/serializers/post-reaction.ts
@@ -0,0 +1,43 @@
+/**
+ * Module dependencies
+ */
+import * as mongo from 'mongodb';
+import deepcopy = require('deepcopy');
+import Reaction from '../models/post-reaction';
+import serializeUser from './user';
+
+/**
+ * Serialize a reaction
+ *
+ * @param {any} reaction
+ * @param {any} me?
+ * @return {Promise<any>}
+ */
+export default (
+	reaction: any,
+	me?: any
+) => new Promise<any>(async (resolve, reject) => {
+	let _reaction: any;
+
+	// Populate the reaction if 'reaction' is ID
+	if (mongo.ObjectID.prototype.isPrototypeOf(reaction)) {
+		_reaction = await Reaction.findOne({
+			_id: reaction
+		});
+	} else if (typeof reaction === 'string') {
+		_reaction = await Reaction.findOne({
+			_id: new mongo.ObjectID(reaction)
+		});
+	} else {
+		_reaction = deepcopy(reaction);
+	}
+
+	// Rename _id to id
+	_reaction.id = _reaction._id;
+	delete _reaction._id;
+
+	// Populate user
+	_reaction.user = await serializeUser(_reaction.user_id, me);
+
+	resolve(_reaction);
+});
diff --git a/src/api/serializers/post.ts b/src/api/serializers/post.ts
index f459529697..3c96884dd1 100644
--- a/src/api/serializers/post.ts
+++ b/src/api/serializers/post.ts
@@ -4,7 +4,7 @@
 import * as mongo from 'mongodb';
 import deepcopy = require('deepcopy');
 import Post from '../models/post';
-import Like from '../models/like';
+import Reaction from '../models/post-reaction';
 import Vote from '../models/poll-vote';
 import serializeApp from './app';
 import serializeUser from './user';
@@ -100,18 +100,18 @@ const self = (
 		}
 	}
 
-	// Check if it is liked
+	// Fetch my reaction
 	if (me && opts.detail) {
-		const liked = await Like
-			.count({
+		const reaction = await Reaction
+			.findOne({
 				user_id: me._id,
 				post_id: id,
 				deleted_at: { $exists: false }
-			}, {
-				limit: 1
 			});
 
-		_post.is_liked = liked === 1;
+		if (reaction) {
+			_post.my_reaction = reaction.reaction;
+		}
 	}
 
 	resolve(_post);
diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js
index 85b34ab363..567f2ffd78 100644
--- a/src/web/app/common/tags/index.js
+++ b/src/web/app/common/tags/index.js
@@ -26,3 +26,6 @@ require('./messaging/form.tag');
 require('./stream-indicator.tag');
 require('./public-timeline.tag');
 require('./activity-table.tag');
+require('./reaction-picker.tag');
+require('./reactions-viewer.tag');
+require('./reaction-icon.tag');
diff --git a/src/web/app/common/tags/reaction-icon.tag b/src/web/app/common/tags/reaction-icon.tag
new file mode 100644
index 0000000000..5cf357cbd4
--- /dev/null
+++ b/src/web/app/common/tags/reaction-icon.tag
@@ -0,0 +1,12 @@
+<mk-reaction-icon>
+	<virtual if={ opts.reaction == 'like' }>👍</virtual>
+	<virtual if={ opts.reaction == 'love' }>❤️</virtual>
+	<virtual if={ opts.reaction == 'laugh' }>😆</virtual>
+	<virtual if={ opts.reaction == 'hmm' }>🤔</virtual>
+	<virtual if={ opts.reaction == 'surprise' }>😮</virtual>
+	<virtual if={ opts.reaction == 'congrats' }>🎉</virtual>
+	<style>
+		:scope
+			display inline
+	</style>
+</mk-reaction-icon>
diff --git a/src/web/app/common/tags/reaction-picker.tag b/src/web/app/common/tags/reaction-picker.tag
new file mode 100644
index 0000000000..ed2beb0d2a
--- /dev/null
+++ b/src/web/app/common/tags/reaction-picker.tag
@@ -0,0 +1,58 @@
+<mk-reaction-picker>
+	<div class="backdrop" onclick={ unmount }></div>
+	<div class="popover" ref="popover">
+		<button onclick={ react.bind(null, 'like') } tabindex="1" title="いいね"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
+		<button onclick={ react.bind(null, 'love') } tabindex="2" title="ハート"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
+		<button onclick={ react.bind(null, 'laugh') } tabindex="3" title="笑"><mk-reaction-icon reaction='laugh'></mk-reaction-icon></button>
+		<button onclick={ react.bind(null, 'hmm') } tabindex="4" title="ふぅ~む"><mk-reaction-icon reaction='hmm'></mk-reaction-icon></button>
+		<button onclick={ react.bind(null, 'surprise') } tabindex="5" title="驚き"><mk-reaction-icon reaction='surprise'></mk-reaction-icon></button>
+		<button onclick={ react.bind(null, 'congrats') } tabindex="6" title="おめでとう"><mk-reaction-icon reaction='congrats'></mk-reaction-icon></button>
+	</div>
+	<style>
+		: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)
+
+			> .popover
+				position absolute
+				z-index 10001
+				background #fff
+				border 1px solid rgba(27, 31, 35, 0.15)
+				border-radius 4px
+				box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
+
+				> button
+					font-size 24px
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.post = this.opts.post;
+
+		this.on('mount', () => {
+			const width = this.refs.popover.offsetWidth;
+			this.refs.popover.style.top = this.opts.top + 'px';
+			this.refs.popover.style.left = (this.opts.left - (width / 2)) + 'px';
+		});
+
+		this.react = reaction => {
+			this.api('posts/reactions/create', {
+				post_id: this.post.id,
+				reaction: reaction
+			}).then(() => {
+				if (this.opts.cb) this.opts.cb();
+				this.unmount();
+			});
+		};
+	</script>
+</mk-reaction-picker>
diff --git a/src/web/app/common/tags/reactions-viewer.tag b/src/web/app/common/tags/reactions-viewer.tag
new file mode 100644
index 0000000000..b289d89e85
--- /dev/null
+++ b/src/web/app/common/tags/reactions-viewer.tag
@@ -0,0 +1,29 @@
+<mk-reactions-viewer>
+	<virtual if={ reactions }>
+		<span if={ reactions.like }><mk-reaction-icon reaction='like'></mk-reaction-icon><span>{ reactions.like }</span></span>
+		<span if={ reactions.love }><mk-reaction-icon reaction='love'></mk-reaction-icon><span>{ reactions.love }</span></span>
+		<span if={ reactions.laugh }><mk-reaction-icon reaction='laugh'></mk-reaction-icon><span>{ reactions.laugh }</span></span>
+		<span if={ reactions.hmm }><mk-reaction-icon reaction='hmm'></mk-reaction-icon><span>{ reactions.hmm }</span></span>
+		<span if={ reactions.surprise }><mk-reaction-icon reaction='surprise'></mk-reaction-icon><span>{ reactions.surprise }</span></span>
+		<span if={ reactions.congrats }><mk-reaction-icon reaction='congrats'></mk-reaction-icon><span>{ reactions.congrats }</span></span>
+	</virtual>
+	<style>
+		:scope
+			display block
+
+			> span
+				margin-right 8px
+
+				> mk-reaction-icon
+					font-size 20px
+
+				> span
+					margin-left 4px
+					font-size 16px
+					color #444
+
+	</style>
+	<script>
+		this.reactions = this.opts.post.reaction_counts;
+	</script>
+</mk-reactions-viewer>
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index d459b7f31a..2a038b5e08 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -3,44 +3,58 @@
 		<virtual each={ notification, i in notifications }>
 			<div class="notification { notification.type }">
 				<mk-time time={ notification.created_at }></mk-time>
-				<virtual if={ notification.type == 'like' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+				<virtual if={ notification.type == 'reaction' }>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
-						<p><i class="fa fa-thumbs-o-up"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+						<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'repost' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-retweet"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'quote' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-quote-left"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'follow' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-user-plus"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'reply' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-reply"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'mention' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>
+						<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-at"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
 				</virtual>
 				<virtual if={ notification.type == 'poll_vote' }>
-					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a>
+					<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>
+						<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
+					</a>
 					<div class="text">
 						<p><i class="fa fa-pie-chart"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 					</div>
@@ -105,7 +119,7 @@
 						p
 							margin 0
 
-							i
+							i, mk-reaction-icon
 								margin-right 4px
 
 					.post-preview
@@ -128,10 +142,6 @@
 						&:after
 							content "\f10e"
 
-					&.like
-						.text p i
-							color #FFAC33
-
 					&.repost, &.quote
 						.text p i
 							color #77B255
diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag
index 0495c5c6ec..b1bec9f7ef 100644
--- a/src/web/app/desktop/tags/post-detail.tag
+++ b/src/web/app/desktop/tags/post-detail.tag
@@ -45,42 +45,18 @@
 				<mk-poll if={ p.poll } post={ p }></mk-poll>
 			</div>
 			<footer>
+				<mk-reactions-viewer post={ p }></mk-reactions-viewer>
 				<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
 					<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
 					<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
-				<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
-					<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
+				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
+					<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
-				<button onclick={ NotImplementedException }><i class="fa fa-ellipsis-h"></i></button>
+				<button><i class="fa fa-ellipsis-h"></i></button>
 			</footer>
-			<div class="reposts-and-likes">
-				<div class="reposts" if={ reposts && reposts.length > 0 }>
-					<header>
-						<a>{ p.repost_count }</a>
-						<p>Repost</p>
-					</header>
-					<ol class="users">
-						<li class="user" each={ reposts }>
-							<a class="avatar-anchor" href={ CONFIG.url + '/' + user.username } title={ user.name } data-user-preview={ user.id }>
-							<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/></a>
-						</li>
-					</ol>
-				</div>
-				<div class="likes" if={ likes && likes.length > 0 }>
-					<header><a>{ p.likes_count }</a>
-						<p>いいね</p>
-					</header>
-					<ol class="users">
-						<li class="user" each={ likes }>
-							<a class="avatar-anchor" href={ CONFIG.url + '/' + username } title={ name } data-user-preview={ id }>
-							<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/></a>
-						</li>
-					</ol>
-				</div>
-			</div>
 		</article>
 		<div class="replies">
 			<virtual each={ post in replies }>
@@ -271,68 +247,9 @@
 								margin 0 0 0 8px
 								color #999
 
-							&.liked
+							&.reacted
 								color $theme-color
 
-					> .reposts-and-likes
-						display flex
-						justify-content center
-						padding 0
-						margin 16px 0
-
-						&:empty
-							display none
-
-						> .reposts
-						> .likes
-							display flex
-							flex 1 1
-							padding 0
-							border-top solid 1px #F2EFEE
-
-							> header
-								flex 1 1 80px
-								max-width 80px
-								padding 8px 5px 0px 10px
-
-								> a
-									display block
-									font-size 1.5em
-									line-height 1.4em
-
-								> p
-									display block
-									margin 0
-									font-size 0.7em
-									line-height 1em
-									font-weight normal
-									color #a0a2a5
-
-							> .users
-								display block
-								flex 1 1
-								margin 0
-								padding 10px 10px 10px 5px
-								list-style none
-
-								> .user
-									display block
-									float left
-									margin 4px
-									padding 0
-
-									> .avatar-anchor
-										display:block
-
-										> .avatar
-											vertical-align bottom
-											width 24px
-											height 24px
-											border-radius 4px
-
-						> .reposts + .likes
-							margin-left 16px
-
 				> .replies
 					> *
 						border-top 1px solid #eef0f2
@@ -356,6 +273,8 @@
 			}).then(post => {
 				const isRepost = post.repost != null;
 				const p = isRepost ? post.repost : post;
+				p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+
 				this.update({
 					fetching: false,
 					post: post,
@@ -385,26 +304,6 @@
 					});
 				}
 
-				// Get likes
-				this.api('posts/likes', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(likes => {
-					this.update({
-						likes: likes
-					});
-				});
-
-				// Get reposts
-				this.api('posts/reposts', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(reposts => {
-					this.update({
-						reposts: reposts
-					});
-				});
-
 				// Get replies
 				this.api('posts/replies', {
 					post_id: this.p.id,
@@ -429,22 +328,13 @@
 			});
 		};
 
-		this.like = () => {
-			if (this.p.is_liked) {
-				this.api('posts/likes/delete', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = false;
-					this.update();
-				});
-			} else {
-				this.api('posts/likes/create', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = true;
-					this.update();
-				});
-			}
+		this.react = () => {
+			const rect = this.refs.reactButton.getBoundingClientRect();
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				top: rect.top + window.pageYOffset,
+				left: rect.left + window.pageXOffset,
+				post: this.p
+			});
 		};
 
 		this.loadContext = () => {
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index 0559aaf6a0..ccd5f25703 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -46,14 +46,15 @@
 				</div>
 			</div>
 			<footer>
+				<mk-reactions-viewer post={ p }></mk-reactions-viewer>
 				<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
 					<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
 					<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
-				<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
-					<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
+				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
+					<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
 				<button>
 					<i class="fa fa-ellipsis-h"></i>
@@ -313,7 +314,7 @@
 								margin 0 0 0 8px
 								color #999
 
-							&.liked
+							&.reacted
 								color $theme-color
 
 							&:last-child
@@ -333,14 +334,14 @@
 		this.mixin('api');
 		this.mixin('user-preview');
 
+		this.isDetailOpened = false;
+
 		this.post = this.opts.post;
 		this.isRepost = this.post.repost && this.post.text == null && this.post.media_ids == null && this.post.poll == null;
 		this.p = this.isRepost ? this.post.repost : this.post;
-
+		this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
 		this.title = dateStringify(this.p.created_at);
-
 		this.url = `/${this.p.user.username}/${this.p.id}`;
-		this.isDetailOpened = false;
 
 		this.on('mount', () => {
 			if (this.p.text) {
@@ -375,22 +376,13 @@
 			});
 		};
 
-		this.like = () => {
-			if (this.p.is_liked) {
-				this.api('posts/likes/delete', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = false;
-					this.update();
-				});
-			} else {
-				this.api('posts/likes/create', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = true;
-					this.update();
-				});
-			}
+		this.react = () => {
+			const rect = this.refs.reactButton.getBoundingClientRect();
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				top: rect.top + window.pageYOffset,
+				left: rect.left + window.pageXOffset,
+				post: this.p
+			});
 		};
 
 		this.toggleDetail = () => {
diff --git a/src/web/app/dev/tags/new-app-form.tag b/src/web/app/dev/tags/new-app-form.tag
index e01be512fb..0a8b5cd258 100644
--- a/src/web/app/dev/tags/new-app-form.tag
+++ b/src/web/app/dev/tags/new-app-form.tag
@@ -47,8 +47,8 @@
 					<p>投稿する。</p>
 				</label>
 				<label>
-					<input type="checkbox" value="like-write"/>
-					<p>いいねしたりいいね解除する。</p>
+					<input type="checkbox" value="reaction-write"/>
+					<p>リアクションしたりリアクションをキャンセルする。</p>
 				</label>
 				<label>
 					<input type="checkbox" value="following-write"/>
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index e20307ebc5..9edbf9a562 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -1,40 +1,47 @@
 <mk-notification-preview class={ notification.type }>
-	<virtual if={ notification.type == 'like' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'reaction' }>
+		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
-			<p><i class="fa fa-thumbs-o-up"></i>{ notification.user.name }</p>
+			<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>{ notification.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'repost' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'repost' }>
+		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-retweet"></i>{ notification.post.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'quote' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'quote' }>
+		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-quote-left"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'follow' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'follow' }>
+		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-user-plus"></i>{ notification.user.name }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'reply' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'reply' }>
+		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-reply"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'mention' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'mention' }>
+		<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-at"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
 	</virtual>
-	<virtual if={ notification.type == 'poll_vote' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'poll_vote' }>
+		<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-pie-chart"></i>{ notification.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post) }</p>
@@ -70,7 +77,7 @@
 				p
 					margin 0
 
-					i
+					i, mk-reaction-icon
 						margin-right 4px
 
 			.post-ref
@@ -89,10 +96,6 @@
 				&:after
 					content "\f10e"
 
-			&.like
-				.text p i
-					color #FFAC33
-
 			&.repost, &.quote
 				.text p i
 					color #77B255
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index 591638858d..fcdc05dcb5 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -1,12 +1,12 @@
 <mk-notification class={ notification.type }>
 	<mk-time time={ notification.created_at }></mk-time>
-	<virtual if={ notification.type == 'like' }>
+	<virtual if={ notification.type == 'reaction' }>
 		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }>
 			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		</a>
 		<div class="text">
 			<p>
-				<i class="fa fa-thumbs-o-up"></i>
+				<mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>
 				<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
 			</p>
 			<a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
@@ -123,7 +123,7 @@
 				p
 					margin 0
 
-					i
+					i, mk-reaction-icon
 						margin-right 4px
 
 			.post-preview
@@ -146,10 +146,6 @@
 				&:after
 					content "\f10e"
 
-			&.like
-				.text p i
-					color #FFAC33
-
 			&.repost, &.quote
 				.text p i
 					color #77B255
diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag
index 4fc16bcb38..5dfbd0ce64 100644
--- a/src/web/app/mobile/tags/post-detail.tag
+++ b/src/web/app/mobile/tags/post-detail.tag
@@ -46,41 +46,18 @@
 				<mk-time time={ p.created_at } mode="detail"></mk-time>
 			</a>
 			<footer>
+				<mk-reactions-viewer post={ p }></mk-reactions-viewer>
 				<button onclick={ reply } title="返信"><i class="fa fa-reply"></i>
 					<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
 					<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
-				<button class={ liked: p.is_liked } onclick={ like } title="善哉"><i class="fa fa-thumbs-o-up"></i>
-					<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
+				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton" title="リアクション"><i class="fa fa-plus"></i>
+					<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
-				<button onclick={ NotImplementedException }><i class="fa fa-ellipsis-h"></i></button>
+				<button><i class="fa fa-ellipsis-h"></i></button>
 			</footer>
-			<div class="reposts-and-likes">
-				<div class="reposts" if={ reposts && reposts.length > 0 }>
-					<header><a>{ p.repost_count }</a>
-						<p>Repost</p>
-					</header>
-					<ol class="users">
-						<li class="user" each={ reposts }>
-							<a class="avatar-anchor" href={ CONFIG.url + '/' + user.username } title={ user.name }>
-							<img class="avatar" src={ user.avatar_url + '?thumbnail&size=32' } alt=""/></a>
-						</li>
-					</ol>
-				</div>
-				<div class="likes" if={ likes && likes.length > 0 }>
-					<header><a>{ p.likes_count }</a>
-						<p>いいね</p>
-					</header>
-					<ol class="users">
-						<li class="user" each={ likes }>
-							<a class="avatar-anchor" href={ CONFIG.url + '/' + username } title={ name }>
-							<img class="avatar" src={ avatar_url + '?thumbnail&size=32' } alt=""/></a>
-						</li>
-					</ol>
-				</div>
-			</div>
 		</article>
 		<div class="replies">
 			<virtual each={ post in replies }>
@@ -273,68 +250,9 @@
 								margin 0 0 0 8px
 								color #999
 
-							&.liked
+							&.reacted
 								color $theme-color
 
-					> .reposts-and-likes
-						display flex
-						justify-content center
-						padding 0
-						margin 16px 0
-
-						&:empty
-							display none
-
-						> .reposts
-						> .likes
-							display flex
-							flex 1 1
-							padding 0
-							border-top solid 1px #F2EFEE
-
-							> header
-								flex 1 1 80px
-								max-width 80px
-								padding 8px 5px 0px 10px
-
-								> a
-									display block
-									font-size 1.5em
-									line-height 1.4em
-
-								> p
-									display block
-									margin 0
-									font-size 0.7em
-									line-height 1em
-									font-weight normal
-									color #a0a2a5
-
-							> .users
-								display block
-								flex 1 1
-								margin 0
-								padding 10px 10px 10px 5px
-								list-style none
-
-								> .user
-									display block
-									float left
-									margin 4px
-									padding 0
-
-									> .avatar-anchor
-										display:block
-
-										> .avatar
-											vertical-align bottom
-											width 24px
-											height 24px
-											border-radius 4px
-
-						> .reposts + .likes
-							margin-left 16px
-
 				> .replies
 					> *
 						border-top 1px solid #eef0f2
@@ -358,6 +276,8 @@
 			}).then(post => {
 				const isRepost = post.repost != null;
 				const p = isRepost ? post.repost : post;
+				p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
+
 				this.update({
 					fetching: false,
 					post: post,
@@ -387,26 +307,6 @@
 					});
 				}
 
-				// Get likes
-				this.api('posts/likes', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(likes => {
-					this.update({
-						likes: likes
-					});
-				});
-
-				// Get reposts
-				this.api('posts/reposts', {
-					post_id: this.p.id,
-					limit: 8
-				}).then(reposts => {
-					this.update({
-						reposts: reposts
-					});
-				});
-
 				// Get replies
 				this.api('posts/replies', {
 					post_id: this.p.id,
@@ -434,22 +334,13 @@
 			});
 		};
 
-		this.like = () => {
-			if (this.p.is_liked) {
-				this.api('posts/likes/delete', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = false;
-					this.update();
-				});
-			} else {
-				this.api('posts/likes/create', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = true;
-					this.update();
-				});
-			}
+		this.react = () => {
+			const rect = this.refs.reactButton.getBoundingClientRect();
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				top: rect.top + window.pageYOffset,
+				left: rect.left + window.pageXOffset,
+				post: this.p
+			});
 		};
 
 		this.loadContext = () => {
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index c861130b66..9f861961a9 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -43,14 +43,15 @@
 				</div>
 			</div>
 			<footer>
+				<mk-reactions-viewer post={ p }></mk-reactions-viewer>
 				<button onclick={ reply }><i class="fa fa-reply"></i>
 					<p class="count" if={ p.replies_count > 0 }>{ p.replies_count }</p>
 				</button>
 				<button onclick={ repost } title="Repost"><i class="fa fa-retweet"></i>
 					<p class="count" if={ p.repost_count > 0 }>{ p.repost_count }</p>
 				</button>
-				<button class={ liked: p.is_liked } onclick={ like }><i class="fa fa-thumbs-o-up"></i>
-					<p class="count" if={ p.likes_count > 0 }>{ p.likes_count }</p>
+				<button class={ reacted: p.my_reaction != null } onclick={ react } ref="reactButton"><i class="fa fa-plus"></i>
+					<p class="count" if={ p.reactions_count > 0 }>{ p.reactions_count }</p>
 				</button>
 			</footer>
 		</div>
@@ -300,7 +301,7 @@
 								margin 0 0 0 8px
 								color #999
 
-							&.liked
+							&.reacted
 								color $theme-color
 
 	</style>
@@ -314,6 +315,7 @@
 		this.post = this.opts.post;
 		this.isRepost = this.post.repost != null && this.post.text == null;
 		this.p = this.isRepost ? this.post.repost : this.post;
+		this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
 		this.summary = getPostSummary(this.p);
 		this.url = `/${this.p.user.username}/${this.p.id}`;
 
@@ -353,22 +355,13 @@
 			});
 		};
 
-		this.like = () => {
-			if (this.p.is_liked) {
-				this.api('posts/likes/delete', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = false;
-					this.update();
-				});
-			} else {
-				this.api('posts/likes/create', {
-					post_id: this.p.id
-				}).then(() => {
-					this.p.is_liked = true;
-					this.update();
-				});
-			}
+		this.react = () => {
+			const rect = this.refs.reactButton.getBoundingClientRect();
+			riot.mount(document.body.appendChild(document.createElement('mk-reaction-picker')), {
+				top: rect.top + window.pageYOffset,
+				left: rect.left + window.pageXOffset,
+				post: this.p
+			});
 		};
 	</script>
 </mk-timeline-post>
diff --git a/test/api.js b/test/api.js
index d234ad7244..52468af00b 100644
--- a/test/api.js
+++ b/test/api.js
@@ -458,8 +458,8 @@ describe('API', () => {
 		}));
 	});
 
-	describe('posts/likes/create', () => {
-		it('いいねできる', async(async () => {
+	describe('posts/reactions/create', () => {
+		it('リアクションできる', async(async () => {
 			const hima = await insertHimawari();
 			const himaPost = await db.get('posts').insert({
 				user_id: hima._id,
@@ -467,26 +467,28 @@ describe('API', () => {
 			});
 
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/create', {
-				post_id: himaPost._id.toString()
+			const res = await request('/posts/reactions/create', {
+				post_id: himaPost._id.toString(),
+				reaction: 'like'
 			}, me);
 			res.should.have.status(204);
 		}));
 
-		it('自分の投稿にはいいねできない', async(async () => {
+		it('自分の投稿にはリアクションできない', async(async () => {
 			const me = await insertSakurako();
 			const myPost = await db.get('posts').insert({
 				user_id: me._id,
 				text: 'お腹ペコい'
 			});
 
-			const res = await request('/posts/likes/create', {
-				post_id: myPost._id.toString()
+			const res = await request('/posts/reactions/create', {
+				post_id: myPost._id.toString(),
+				reaction: 'like'
 			}, me);
 			res.should.have.status(400);
 		}));
 
-		it('二重にいいねできない', async(async () => {
+		it('二重にリアクションできない', async(async () => {
 			const hima = await insertHimawari();
 			const himaPost = await db.get('posts').insert({
 				user_id: hima._id,
@@ -494,42 +496,46 @@ describe('API', () => {
 			});
 
 			const me = await insertSakurako();
-			await db.get('likes').insert({
+			await db.get('post_reactions').insert({
 				user_id: me._id,
-				post_id: himaPost._id
+				post_id: himaPost._id,
+				reaction: 'like'
 			});
 
-			const res = await request('/posts/likes/create', {
-				post_id: himaPost._id.toString()
+			const res = await request('/posts/reactions/create', {
+				post_id: himaPost._id.toString(),
+				reaction: 'like'
 			}, me);
 			res.should.have.status(400);
 		}));
 
-		it('存在しない投稿にはいいねできない', async(async () => {
+		it('存在しない投稿にはリアクションできない', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/create', {
-				post_id: '000000000000000000000000'
+			const res = await request('/posts/reactions/create', {
+				post_id: '000000000000000000000000',
+				reaction: 'like'
 			}, me);
 			res.should.have.status(400);
 		}));
 
 		it('空のパラメータで怒られる', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/create', {}, me);
+			const res = await request('/posts/reactions/create', {}, me);
 			res.should.have.status(400);
 		}));
 
 		it('間違ったIDで怒られる', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/create', {
-				post_id: 'kyoppie'
+			const res = await request('/posts/reactions/create', {
+				post_id: 'kyoppie',
+				reaction: 'like'
 			}, me);
 			res.should.have.status(400);
 		}));
 	});
 
-	describe('posts/likes/delete', () => {
-		it('いいね解除できる', async(async () => {
+	describe('posts/reactions/delete', () => {
+		it('リアクションをキャンセルできる', async(async () => {
 			const hima = await insertHimawari();
 			const himaPost = await db.get('posts').insert({
 				user_id: hima._id,
@@ -537,18 +543,19 @@ describe('API', () => {
 			});
 
 			const me = await insertSakurako();
-			await db.get('likes').insert({
+			await db.get('post_reactions').insert({
 				user_id: me._id,
-				post_id: himaPost._id
+				post_id: himaPost._id,
+				reaction: 'like'
 			});
 
-			const res = await request('/posts/likes/delete', {
+			const res = await request('/posts/reactions/delete', {
 				post_id: himaPost._id.toString()
 			}, me);
 			res.should.have.status(204);
 		}));
 
-		it('いいねしていない投稿はいいね解除できない', async(async () => {
+		it('リアクションしていない投稿はリアクションをキャンセルできない', async(async () => {
 			const hima = await insertHimawari();
 			const himaPost = await db.get('posts').insert({
 				user_id: hima._id,
@@ -556,15 +563,15 @@ describe('API', () => {
 			});
 
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/delete', {
+			const res = await request('/posts/reactions/delete', {
 				post_id: himaPost._id.toString()
 			}, me);
 			res.should.have.status(400);
 		}));
 
-		it('存在しない投稿はいいね解除できない', async(async () => {
+		it('存在しない投稿はリアクションをキャンセルできない', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/delete', {
+			const res = await request('/posts/reactions/delete', {
 				post_id: '000000000000000000000000'
 			}, me);
 			res.should.have.status(400);
@@ -572,13 +579,13 @@ describe('API', () => {
 
 		it('空のパラメータで怒られる', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/delete', {}, me);
+			const res = await request('/posts/reactions/delete', {}, me);
 			res.should.have.status(400);
 		}));
 
 		it('間違ったIDで怒られる', async(async () => {
 			const me = await insertSakurako();
-			const res = await request('/posts/likes/delete', {
+			const res = await request('/posts/reactions/delete', {
 				post_id: 'kyoppie'
 			}, me);
 			res.should.have.status(400);
diff --git a/tools/migration/like-to-reactions.js b/tools/migration/like-to-reactions.js
new file mode 100644
index 0000000000..962a0f00ef
--- /dev/null
+++ b/tools/migration/like-to-reactions.js
@@ -0,0 +1,22 @@
+db.users.update({}, {
+	$unset: {
+		likes_count: 1,
+		liked_count: 1
+	}
+}, false, true)
+
+db.likes.renameCollection('post_reactions')
+
+db.post_reactions.update({}, {
+	$set: {
+		reaction: 'like'
+	}
+}, false, true)
+
+db.posts.update({}, {
+	$rename: {
+		likes_count: 'reaction_counts.like'
+	}
+}, false, true);
+
+db.notifications.remove({})