3 files changed, 114 insertions, 0 deletions
diff --git a/src/web/app/desktop/tags/home-widgets/trends.tag b/src/web/app/desktop/tags/home-widgets/trends.tag
new file mode 100644
index 0000000000..0ad7729abd
--- /dev/null
+++ b/src/web/app/desktop/tags/home-widgets/trends.tag
@@ -0,0 +1,112 @@
+<mk-trends-home-widget>
+	<p class="title"><i class="fa fa-fire"></i>トレンド</p>
+	<button onclick={ refresh } title="他を見る"><i class="fa fa-refresh"></i></button>
+	<div class="post" if={ !loading && post != null }>
+		<p class="text">{ post.text }</p>
+		<p class="author">―<a href="/{ post.user.username }">@{ post.user.username }</a></p>
+	</div>
+	<p class="empty" if={ !loading && post == null }>ありません！</p>
+	<p class="loading" if={ loading }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis></mk-ellipsis></p>
+	<style>
+		:scope
+			display block
+			background #fff
+
+			> .title
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color #888
+				border-bottom solid 1px #eee
+
+				> i
+					margin-right 4px
+
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color #ccc
+
+				&:hover
+					color #aaa
+
+				&:active
+					color #999
+
+			> .post
+				padding 16px
+				font-size 12px
+				font-style oblique
+				color #555
+
+				> p
+					margin 0
+
+				> .author
+					> a
+						color inherit
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .loading
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.post = null;
+		this.loading = true;
+
+		this.offset = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				loading: true,
+				post: null
+			});
+			this.api('posts/trend', {
+				limit: 1,
+				offset: this.offset,
+				repost: false,
+				reply: false,
+				media: false,
+				poll: false
+			}).then(posts => {
+				const post = posts ? posts[0] : null;
+				if (post == null) this.offset = 0;
+				this.update({
+					loading: false,
+					post: post
+				});
+			});
+		};
+
+		this.refresh = () => {
+			this.offset++;
+			this.fetch();
+		};
+	</script>
+</mk-trends-home-widget>
diff --git a/src/web/app/desktop/tags/home.tag b/src/web/app/desktop/tags/home.tag
index 93840bdf0e..a913739af6 100644
--- a/src/web/app/desktop/tags/home.tag
+++ b/src/web/app/desktop/tags/home.tag
@@ -69,6 +69,7 @@
 				'profile',
 				'calendar',
 				'rss-reader',
+				'trends',
 				'photo-stream',
 				'version'
 			],
diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js
index 3032c9c544..f92200b3d9 100644
--- a/src/web/app/desktop/tags/index.js
+++ b/src/web/app/desktop/tags/index.js
@@ -43,6 +43,7 @@ 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('./timeline.tag');
 require('./messaging/window.tag');
 require('./messaging/room-window.tag');