Implement the poll feature

Closes #164

17 files changed, 433 insertions, 56 deletions

diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts
index e4abc06f53..963d1df258 100644
--- a/src/api/endpoints.ts
+++ b/src/api/endpoints.ts
@@ -93,6 +93,7 @@ export default [
 	{ name: 'posts/likes/delete',     shouldBeSignin: true, limitDuration: hour, limitMax: 100, kind: 'like-write' },
 	{ name: 'posts/favorites/create', shouldBeSignin: true, limitDuration: hour, limitMax: 100, kind: 'favorite-write' },
 	{ name: 'posts/favorites/delete', shouldBeSignin: true, limitDuration: hour, limitMax: 100, kind: 'favorite-write' },
+	{ name: 'posts/polls/vote',       shouldBeSignin: true, limitDuration: hour, limitMax: 100, kind: 'vote-write' },
 
 	{ name: 'messaging/history',         shouldBeSignin: true, kind: 'messaging-read' },
 	{ name: 'messaging/unread',          shouldBeSignin: true, kind: 'messaging-read' },
diff --git a/src/api/endpoints/posts/create.js b/src/api/endpoints/posts/create.js
index e7c1d0ceca..61f8e714fb 100644
--- a/src/api/endpoints/posts/create.js
+++ b/src/api/endpoints/posts/create.js
@@ -161,9 +161,59 @@ module.exports = (params, user, app) =>
 		replyTo = null;
 	}
 
-	// テキストが無いかつ添付ファイルが無いかつRepostも無かったらエラー
-	if (text === null && files === null && repost === null) {
-		return rej('text, media_ids or repost_id is required');
+	// Get 'poll' parameter
+	let poll = params.poll;
+	if (poll !== undefined && poll !== null) {
+		// 選択肢が無かったらエラー
+		if (poll.choices == null) {
+			return rej('poll choices is required');
+		}
+
+		// 選択肢が配列でなかったらエラー
+		if (!Array.isArray(poll.choices)) {
+			return rej('poll choices must be an array');
+		}
+
+		// Validate each choices
+		const shouldReject = poll.choices.some(choice => {
+			if (typeof choice !== 'string') return true;
+			if (choice.trim().length === 0) return true;
+			if (choice.trim().length > 100) return true;
+		});
+
+		if (shouldReject) {
+			return rej('invalid poll choices');
+		}
+
+		// Trim choices
+		poll.choices = poll.choices.map(choice => choice.trim());
+
+		// Drop duplicates
+		poll.choices = poll.choices.filter((x, i, s) => s.indexOf(x) == i);
+
+		// 選択肢がひとつならエラー
+		if (poll.choices.length == 1) {
+			return rej('poll choices must be ひとつ以上');
+		}
+
+		// 選択肢が多すぎてもエラー
+		if (poll.choices.length > 10) {
+			return rej('many poll choices');
+		}
+
+		// serialize
+		poll.choices = poll.choices.map((choice, i) => ({
+			id: i, // IDを付与
+			text: choice,
+			votes: 0
+		}));
+	} else {
+		poll = null;
+	}
+
+	// テキストが無いかつ添付ファイルが無いかつRepostも無いかつ投票も無かったらエラー
+	if (text === null && files === null && repost === null && poll === null) {
+		return rej('text, media_ids, repost_id or poll is required');
 	}
 
 	// 投稿を作成
@@ -172,6 +222,7 @@ module.exports = (params, user, app) =>
 		media_ids: media ? files.map(file => file._id) : undefined,
 		reply_to_id: replyTo ? replyTo._id : undefined,
 		repost_id: repost ? repost._id : undefined,
+		poll: poll ? poll : undefined,
 		text: text,
 		user_id: user._id,
 		app_id: app ? app._id : null
diff --git a/src/api/endpoints/posts/polls/vote.js b/src/api/endpoints/posts/polls/vote.js
new file mode 100644
index 0000000000..f1842069d4
--- /dev/null
+++ b/src/api/endpoints/posts/polls/vote.js
@@ -0,0 +1,101 @@
+'use strict';
+
+/**
+ * Module dependencies
+ */
+import * as mongo from 'mongodb';
+import Vote from '../../../models/poll-vote';
+import Post from '../../../models/post';
+import notify from '../../../common/notify';
+
+/**
+ * Vote poll of a post
+ *
+ * @param {Object} params
+ * @param {Object} user
+ * @return {Promise<object>}
+ */
+module.exports = (params, user) =>
+	new Promise(async (res, rej) =>
+{
+	// Get 'post_id' parameter
+	const postId = params.post_id;
+	if (postId === undefined || postId === null) {
+		return rej('post_id is required');
+	}
+
+	// Validate id
+	if (!mongo.ObjectID.isValid(postId)) {
+		return rej('incorrect post_id');
+	}
+
+	// Get votee
+	const post = await Post.findOne({
+		_id: new mongo.ObjectID(postId)
+	});
+
+	if (post === null) {
+		return rej('post not found');
+	}
+
+	if (post.poll == null) {
+		return rej('poll not found');
+	}
+
+	// Get 'choice' parameter
+	const choice = params.choice;
+	if (choice == null) {
+		return rej('choice is required');
+	}
+
+	// Validate choice
+	if (!post.poll.choices.some(x => x.id == choice)) {
+		return rej('invalid choice');
+	}
+
+	// Check arleady voted
+	const exist = await Vote.findOne({
+		post_id: post._id,
+		user_id: user._id
+	});
+
+	if (exist !== null) {
+		return rej('already voted');
+	}
+
+	// Create vote
+	await Vote.insert({
+		created_at: new Date(),
+		post_id: post._id,
+		user_id: user._id,
+		choice: choice
+	});
+
+	// Send response
+	res();
+
+	const inc = {};
+	inc[`poll.choices.${ findWithAttr(post.poll.choices, 'id', choice) }.votes`] = 1;
+
+	console.log(inc);
+
+	// Increment likes count
+	Post.update({ _id: post._id }, {
+		$inc: inc
+	});
+
+	// Notify
+	notify(post.user_id, user._id, 'poll_vote', {
+		post_id: post._id,
+		choice: choice
+	});
+});
+
+function findWithAttr(array, attr, value) {
+	for (let i = 0; i < array.length; i += 1) {
+		if(array[i][attr] === value) {
+			return i;
+		}
+	}
+	return -1;
+}
diff --git a/src/api/endpoints/posts/show.js b/src/api/endpoints/posts/show.js
index f399d86c8a..1b9a747a8d 100644
--- a/src/api/endpoints/posts/show.js
+++ b/src/api/endpoints/posts/show.js
@@ -39,7 +39,6 @@ module.exports = (params, user) =>
 
 	// Serialize
 	res(await serialize(post, user, {
-		serializeReplyTo: true,
-		includeIsLiked: true
+		detail: true
 	}));
 });
diff --git a/src/api/models/poll-vote.ts b/src/api/models/poll-vote.ts
new file mode 100644
index 0000000000..af77a2643e
--- /dev/null
+++ b/src/api/models/poll-vote.ts
@@ -0,0 +1,3 @@
+import db from '../../db/mongodb';
+
+export default db.get('poll_votes') as any; // fuck type definition
diff --git a/src/api/serializers/notification.ts b/src/api/serializers/notification.ts
index 076fef5fe2..df86218aa7 100644
--- a/src/api/serializers/notification.ts
+++ b/src/api/serializers/notification.ts
@@ -54,6 +54,7 @@ export default (notification: any) => new Promise<Object>(async (resolve, reject
 		case 'repost':
 		case 'quote':
 		case 'like':
+		case 'poll_vote':
 			// Populate post
 			_notification.post = await serializePost(_notification.post_id, me);
 			break;
diff --git a/src/api/serializers/post.ts b/src/api/serializers/post.ts
index 5473cd1a07..575cfc2394 100644
--- a/src/api/serializers/post.ts
+++ b/src/api/serializers/post.ts
@@ -6,6 +6,7 @@
 import * as mongo from 'mongodb';
 import Post from '../models/post';
 import Like from '../models/like';
+import Vote from '../models/poll-vote';
 import serializeApp from './app';
 import serializeUser from './user';
 import serializeDriveFile from './drive-file';
@@ -23,15 +24,11 @@ const self = (
 	post: any,
 	me?: any,
 	options?: {
-		serializeReplyTo: boolean,
-		serializeRepost: boolean,
-		includeIsLiked: boolean
+		detail: boolean
 	}
 ) => new Promise<Object>(async (resolve, reject) => {
 	const opts = options || {
-		serializeReplyTo: true,
-		serializeRepost: true,
-		includeIsLiked: true
+		detail: true,
 	};
 
 	let _post: any;
@@ -72,26 +69,35 @@ const self = (
 		));
 	}
 
-	if (_post.reply_to_id && opts.serializeReplyTo) {
+	if (_post.reply_to_id && opts.detail) {
 		// Populate reply to post
 		_post.reply_to = await self(_post.reply_to_id, me, {
-			serializeReplyTo: false,
-			serializeRepost: false,
-			includeIsLiked: false
+			detail: false
 		});
 	}
 
-	if (_post.repost_id && opts.serializeRepost) {
+	if (_post.repost_id && opts.detail) {
 		// Populate repost
 		_post.repost = await self(_post.repost_id, me, {
-			serializeReplyTo: _post.text == null,
-			serializeRepost: _post.text == null,
-			includeIsLiked: _post.text == null
+			detail: _post.text == null
 		});
 	}
 
+	// Poll
+	if (me && _post.poll && opts.detail) {
+		const vote = await Vote
+			.findOne({
+				user_id: me._id,
+				post_id: id
+			});
+
+		if (vote != null) {
+			_post.poll.choices.filter(c => c.id == vote.choice)[0].is_voted = true;
+		}
+	}
+
 	// Check if it is liked
-	if (me && opts.includeIsLiked) {
+	if (me && opts.detail) {
 		const liked = await Like
 			.count({
 				user_id: me._id,
diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js
index ef61d51ba4..692a7070a4 100644
--- a/src/web/app/common/tags/index.js
+++ b/src/web/app/common/tags/index.js
@@ -18,3 +18,5 @@ require('./signin-history.tag');
 require('./api-info.tag');
 require('./twitter-setting.tag');
 require('./authorized-apps.tag');
+require('./poll.tag');
+require('./poll-editor.tag');
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..04c712b611
--- /dev/null
+++ b/src/web/app/common/tags/poll-editor.tag
@@ -0,0 +1,47 @@
+<mk-poll-editor>
+	<ul>
+		<li each={ choice, i in choices }>
+			<input value={ choice } oninput={ oninput.bind(null, i) }>
+			<button onclick={ remove.bind(null, i) }>削除</button>
+		</li>
+	</ul>
+	<button onclick={ add }>選択肢を追加</button>
+	<style type="stylus">
+		:scope
+			display block
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 4px
+					padding 8px 12px
+					width 100%
+
+	</style>
+	<script>
+		@choices = ['', '']
+
+		@oninput = (i, e) ~>
+			@choices[i] = e.target.value
+
+		@add = ~>
+			@choices.push ''
+			@update!
+
+		@remove = (i) ~>
+			console.log i
+			console.log @choices.filter((_, _i) -> _i != i)
+			@choices = @choices.filter((_, _i) -> _i != i)
+			@update!
+
+		@get = ~>
+			return {
+				choices: @choices.filter (choice) -> choice != ''
+			}
+	</script>
+</mk-poll-editor>
diff --git a/src/web/app/common/tags/poll.tag b/src/web/app/common/tags/poll.tag
new file mode 100644
index 0000000000..8c14b895eb
--- /dev/null
+++ b/src/web/app/common/tags/poll.tag
@@ -0,0 +1,73 @@
+<mk-poll>
+	<ul>
+		<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted }>
+			<div class="backdrop" if={ parent.result } style={ 'width:' + (votes / parent.total * 100) + '%' }></div>
+			<span>
+				<i class="fa fa-check" if={ is_voted }></i>
+				{ text }
+				<span class="votes" if={ parent.result }>({ votes }票)</span>
+			</span>
+		</li>
+	</ul>
+	<p>{ total }人が投票</p>
+	<style type="stylus">
+		:scope
+			display block
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 4px
+					padding 4px 8px
+					width 100%
+					border-radius 4px
+					overflow hidden
+					cursor pointer
+
+					&:hover
+						background rgba(0, 0, 0, 0.05)
+
+					&:active
+						background rgba(0, 0, 0, 0.1)
+
+					> .backdrop
+						position absolute
+						top 0
+						left 0
+						height 100%
+						background $theme-color
+
+					> .votes
+						margin-left 4px
+
+	</style>
+	<script>
+		@mixin \api
+
+		@post = @opts.post
+		@poll = @post.poll
+		@total = @poll.choices.reduce ((a, b) -> a + b.votes), 0
+		@result = @poll.choices.some (c) -> c.is_voted
+
+		@vote = (id) ~>
+			if (@poll.choices.some (c) -> c.is_voted) then return
+			@api \posts/polls/vote do
+				post_id: @post.id
+				choice: id
+			.then ~>
+				@poll.choices.for-each (c) ->
+					if c.id == id
+						c.votes++
+						c.is_voted = true
+				@update do
+					poll: @poll
+					result: true
+					total: @total + 1
+
+	</script>
+</mk-poll>
diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag
index aaf72bb2ca..3c5f3d89e2 100644
--- a/src/web/app/desktop/tags/notifications.tag
+++ b/src/web/app/desktop/tags/notifications.tag
@@ -39,6 +39,12 @@
 						<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>
+					<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>
+				</virtual>
 			</div>
 			<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p>
 		</virtual>
diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag
index 872e928816..d4b93a6a18 100644
--- a/src/web/app/desktop/tags/post-form.tag
+++ b/src/web/app/desktop/tags/post-form.tag
@@ -10,9 +10,11 @@
 		<p class="remain">残り{ 4 - files.length }</p>
 	</div>
 	<mk-uploader ref="uploader"></mk-uploader>
+	<div ref="pollZone"></div>
 	<button ref="upload" title="PCからファイルを添付" onclick={ selectFile }><i class="fa fa-upload"></i></button>
 	<button ref="drive" title="ドライブからファイルを添付" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
 	<button class="cat" title="Insert The Cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
+	<button class="poll" title="投票を作成" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button>
 	<p class="text-count { over: refs.text.value.length > 1000 }">のこり{ 1000 - refs.text.value.length }文字</p>
 	<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0 && files.length == 0) } onclick={ post }>{ wait ? '投稿中' : opts.reply ? '返信' : '投稿' }
 		<mk-ellipsis if={ wait }></mk-ellipsis>
@@ -239,6 +241,7 @@
 			[ref='upload']
 			[ref='drive']
 			.cat
+			.poll
 				display inline-block
 				cursor pointer
 				padding 0
@@ -295,6 +298,7 @@
 		@uploadings = []
 		@files = []
 		@autocomplete = null
+		@poll = null
 
 		@in-reply-to-post = @opts.reply
 
@@ -409,6 +413,13 @@
 			@trigger \change-files @files
 			@update!
 
+		@add-poll = ~>
+			if @poll?
+				@poll.unmount!
+				@poll = null
+				return
+			@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0
+
 		@post = (e) ~>
 			@wait = true
 
@@ -420,6 +431,7 @@
 				text: @refs.text.value
 				media_ids: files
 				reply_to_id: if @in-reply-to-post? then @in-reply-to-post.id else undefined
+				poll: if @poll? then @poll.get! else undefined
 			.then (data) ~>
 				@trigger \post
 				@notify if @in-reply-to-post? then '返信しました！' else '投稿しました！'
diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag
index dd26f79e2d..b4e83ae1f3 100644
--- a/src/web/app/desktop/tags/timeline-post.tag
+++ b/src/web/app/desktop/tags/timeline-post.tag
@@ -40,6 +40,7 @@
 				<div class="media" if={ p.media }>
 					<mk-images-viewer images={ p.media }></mk-images-viewer>
 				</div>
+				<mk-poll if={ p.poll } post={ p }></mk-poll>
 				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
 					<mk-post-preview class="repost" post={ p.repost }></mk-post-preview>
 				</div>
@@ -258,6 +259,9 @@
 								display block
 								max-width 100%
 
+						> mk-poll
+							font-size 80%
+
 						> .repost
 							margin 8px 0
 
diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index aaae1d483b..131866d1d7 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -1,48 +1,52 @@
 <mk-notification-preview class={ notification.type }>
-	<div class="main" if={ notification.type == 'like' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'like' }><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 class="post-ref">{ getPostSummary(notification.post) }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'repost' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<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>
-	</div>
-	<div class="main" if={ notification.type == 'quote' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<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>
-	</div>
-	<div class="main" if={ notification.type == 'follow' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<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>
-	</div>
-	<div class="main" if={ notification.type == 'reply' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<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>
-	</div>
-	<div class="main" if={ notification.type == 'mention' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<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>
-	</div>
+	</virtual>
+	<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>
+		</div>
+	</virtual>
 	<style type="stylus">
 		:scope
 			display block
 			margin 0
 			padding 8px
 			color #fff
-
-			> .main
-				overflow-wrap break-word
+			overflow-wrap break-word
 
 			&:after
 				content ""
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index 583e74b727..ccd4d1dc9d 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -1,40 +1,94 @@
 <mk-notification class={ notification.type }>
 	<mk-time time={ notification.created_at }></mk-time>
-	<div class="main" if={ notification.type == 'like' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	<virtual if={ notification.type == 'like' }>
+		<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><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>
+			<p>
+				<i class="fa fa-thumbs-o-up"></i>
+				<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>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'repost' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'repost' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-retweet"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ 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>
+			<p>
+				<i class="fa fa-retweet"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ 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>
-	</div>
-	<div class="main" if={ notification.type == 'quote' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'quote' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-quote-left"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-quote-left"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ 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>
-	</div>
-	<div class="main" if={ notification.type == 'follow' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'follow' }>
+		<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-user-plus"></i><a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a></p>
+			<p>
+				<i class="fa fa-user-plus"></i>
+				<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
+			</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'reply' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'reply' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-reply"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-reply"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ 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>
-	</div>
-	<div class="main" if={ notification.type == 'mention' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'mention' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-at"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-at"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ 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>
-	</div>
+	</virtual>
+	<virtual if={ notification.type == 'poll_vote' }>
+		<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-pie-shart"></i>
+				<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>
+		</div>
+	</virtual>
 	<style type="stylus">
 		:scope
 			display block
 			margin 0
 			padding 16px
+			overflow-wrap break-word
 
 			> mk-time
 				display inline
@@ -45,9 +99,6 @@
 				color rgba(0, 0, 0, 0.6)
 				font-size 12px
 
-			> .main
-				overflow-wrap break-word
-
 			&:after
 				content ""
 				display block
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 900f742e85..cfed7c1a8d 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -19,9 +19,11 @@
 			</ul>
 		</div>
 		<mk-uploader ref="uploader"></mk-uploader>
+		<div ref="pollZone"></div>
 		<button ref="upload" onclick={ selectFile }><i class="fa fa-upload"></i></button>
 		<button ref="drive" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
 		<button class="cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
+		<button class="poll" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button>
 		<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	</div>
 	<style type="stylus">
@@ -163,6 +165,7 @@
 				> [ref='upload']
 				> [ref='drive']
 				.cat
+				.poll
 					display inline-block
 					padding 0
 					margin 0
@@ -185,6 +188,7 @@
 		@wait = false
 		@uploadings = []
 		@files = []
+		@poll = null
 
 		@on \mount ~>
 			@refs.uploader.on \uploaded (file) ~>
@@ -241,6 +245,13 @@
 			@trigger \change-files @files
 			@update!
 
+		@add-poll = ~>
+			if @poll?
+				@poll.unmount!
+				@poll = null
+				return
+			@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0
+
 		@post = ~>
 			@wait = true
 
@@ -252,6 +263,7 @@
 				text: @refs.text.value
 				media_ids: files
 				reply_to_id: if @opts.reply? then @opts.reply.id else undefined
+				poll: if @poll? then @poll.get! else undefined
 			.then (data) ~>
 				@trigger \post
 				@unmount!
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index d4696e6037..ff4007f0c9 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -27,6 +27,7 @@
 				<div class="media" if={ p.media }>
 					<mk-images-viewer images={ p.media }></mk-images-viewer>
 				</div>
+				<mk-poll if={ p.poll } post={ p }></mk-poll>
 				<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
 				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
 					<mk-post-preview class="repost" post={ p.repost }></mk-post-preview>
@@ -242,6 +243,9 @@
 							font-size 12px
 							color #ccc
 
+						> mk-poll
+							font-size 80%
+
 						> .repost
 							margin 8px 0