Implement #770

4 files changed, 118 insertions, 50 deletions

diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js
index 6f985a91fd..c5aafd20ba 100644
--- a/src/web/app/mobile/tags/index.js
+++ b/src/web/app/mobile/tags/index.js
@@ -49,3 +49,4 @@ require('./users-list.tag');
 require('./user-following.tag');
 require('./user-followers.tag');
 require('./init-following.tag');
+require('./user-card.tag');
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
index d0b63ff5db..6357f86a29 100644
--- a/src/web/app/mobile/tags/init-following.tag
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -1,16 +1,9 @@
 <mk-init-following>
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" if={ !fetching && users.length > 0 }>
-		<div class="user" each={ users }>
-			<header style={ banner_url ? 'background-image: url(' + banner_url + '?thumbnail&size=1024)' : '' }>
-				<a href={ '/' + username }>
-					<img src={ avatar_url + '?thumbnail&size=200' } alt="avatar"/>
-				</a>
-			</header>
-			<a class="name" href={ '/' + username } target="_blank">{ name }</a>
-			<p class="username">@{ username }</p>
-			<mk-follow-button user={ this }/>
-		</div>
+		<virtual each={ users }>
+			<mk-user-card user={ this } />
+		</virtual>
 	</div>
 	<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
 	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます<mk-ellipsis/></p>
@@ -37,49 +30,10 @@
 				padding 16px
 				background #eee
 
-				> .user
-					display inline-block
-					width 200px
-					text-align center
-					border-radius 8px
-					background #fff
-
+				> mk-user-card
 					&:not(:last-child)
 						margin-right 16px
 
-					> header
-						display block
-						height 80px
-						background-color #ddd
-						background-size cover
-						background-position center
-						border-radius 8px 8px 0 0
-
-						> a
-							> img
-								position absolute
-								top 20px
-								left calc(50% - 40px)
-								width 80px
-								height 80px
-								border solid 2px #fff
-								border-radius 8px
-
-					> .name
-						display block
-						margin 24px 0 0 0
-						font-size 16px
-						color #555
-
-					> .username
-						margin 0
-						font-size 15px
-						color #ccc
-
-					> mk-follow-button
-						display inline-block
-						margin 8px 0 16px 0
-
 			> .empty
 				margin 0
 				padding 16px
diff --git a/src/web/app/mobile/tags/user-card.tag b/src/web/app/mobile/tags/user-card.tag
new file mode 100644
index 0000000000..d0c79698c5
--- /dev/null
+++ b/src/web/app/mobile/tags/user-card.tag
@@ -0,0 +1,55 @@
+<mk-user-card>
+	<header style={ user.banner_url ? 'background-image: url(' + user.banner_url + '?thumbnail&size=1024)' : '' }>
+		<a href={ '/' + user.username }>
+			<img src={ user.avatar_url + '?thumbnail&size=200' } alt="avatar"/>
+		</a>
+	</header>
+	<a class="name" href={ '/' + user.username } target="_blank">{ user.name }</a>
+	<p class="username">@{ user.username }</p>
+	<mk-follow-button user={ user }/>
+	<style>
+		:scope
+			display inline-block
+			width 200px
+			text-align center
+			border-radius 8px
+			background #fff
+
+			> header
+				display block
+				height 80px
+				background-color #ddd
+				background-size cover
+				background-position center
+				border-radius 8px 8px 0 0
+
+				> a
+					> img
+						position absolute
+						top 20px
+						left calc(50% - 40px)
+						width 80px
+						height 80px
+						border solid 2px #fff
+						border-radius 8px
+
+			> .name
+				display block
+				margin 24px 0 0 0
+				font-size 16px
+				color #555
+
+			> .username
+				margin 0
+				font-size 15px
+				color #ccc
+
+			> mk-follow-button
+				display inline-block
+				margin 8px 0 16px 0
+
+	</style>
+	<script>
+		this.user = this.opts.user;
+	</script>
+</mk-user-card>
diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag
index a323559218..f29f0a0c86 100644
--- a/src/web/app/mobile/tags/user.tag
+++ b/src/web/app/mobile/tags/user.tag
@@ -246,6 +246,12 @@
 			<mk-user-overview-domains user={ user }/>
 		</div>
 	</section>
+	<section class="frequently-replied-users">
+		<h2><i class="fa fa-users"></i>%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
+		<div>
+			<mk-user-overview-frequently-replied-users user={ user }/>
+		</div>
+	</section>
 	<section class="followers-you-know" if={ SIGNIN && I.id !== user.id }>
 		<h2><i class="fa fa-users"></i>%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
 		<div>
@@ -619,6 +625,58 @@
 	</script>
 </mk-user-overview-domains>
 
+<mk-user-overview-frequently-replied-users>
+	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
+	<div if={ !initializing && users.length > 0 }>
+		<virtual each={ users }>
+			<mk-user-card user={ this.user }/>
+		</virtual>
+	</div>
+	<p class="empty" if={ !initializing && users.length == 0 }>%i18n:mobile.tags.mk-user-overview-frequently-replied-users.no-users%</p>
+	<style>
+		:scope
+			display block
+
+			> div
+				overflow-x scroll
+				-webkit-overflow-scrolling touch
+				white-space nowrap
+				padding 8px
+
+				> mk-user-card
+					&:not(:last-child)
+						margin-right 8px
+
+			> .initializing
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.user = this.opts.user;
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('users/get_frequently_replied_users', {
+				user_id: this.user.id
+			}).then(x => {
+				this.update({
+					users: x,
+					initializing: false
+				});
+			});
+		});
+	</script>
+</mk-user-overview-frequently-replied-users>
+
 <mk-user-overview-followers-you-know>
 	<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
 	<div if={ !initializing && users.length > 0 }>