ハッシュタグでユーザー検索できるように (#4298)

* ハッシュタグでユーザー検索できるように

* 🎨

* Increase limit

* リモートユーザーも表示

* Fix bug

* Fix bug

* Improve performance

src/client/app/common/views/pages/explore.vue

@@ -1,29 +1,53 @@
 <template>
 <div>
-	<mk-user-list :make-promise="verifiedUsers">
-		<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
+	<mk-user-list v-if="tag != null" :make-promise="tagUsers" :key="tag">
+		<fa :icon="faHashtag" fixed-width/>{{ tag }}
 	</mk-user-list>
-	<mk-user-list :make-promise="popularUsers">
-		<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
-	</mk-user-list>
-	<mk-user-list :make-promise="recentlyUpdatedUsers">
-		<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
-	</mk-user-list>
-	<mk-user-list :make-promise="recentlyRegisteredUsers">
-		<span><fa :icon="faPlus"/> {{ $t('recently-registered-users') }}</span>
+	<mk-user-list v-if="tag != null" :make-promise="tagRemoteUsers" :key="tag">
+		<fa :icon="faHashtag" fixed-width/>{{ tag }} ({{ $t('federated') }})
 	</mk-user-list>
+
+	<ui-container :body-togglable="true">
+		<template slot="header"><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
+
+		<div class="vxjfqztj">
+			<router-link v-for="tag in tags" :to="`/explore/tags/${tag.tag}`" :key="tag.tag">{{ tag.tag }}</router-link>
+		</div>
+	</ui-container>
+
+	<template v-if="tag == null">
+		<mk-user-list :make-promise="verifiedUsers">
+			<fa :icon="faBookmark" fixed-width/>{{ $t('verified-users') }}
+		</mk-user-list>
+		<mk-user-list :make-promise="popularUsers">
+			<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
+		</mk-user-list>
+		<mk-user-list :make-promise="recentlyUpdatedUsers">
+			<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
+		</mk-user-list>
+		<mk-user-list :make-promise="recentlyRegisteredUsers">
+			<fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }}
+		</mk-user-list>
+	</template>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { faChartLine, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faChartLine, faPlus, faHashtag } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('common/views/pages/explore.vue'),
 
+	props: {
+		tag: {
+			type: String,
+			required: false
+		}
+	},
+
 	data() {
 		return {
 			verifiedUsers: () => this.$root.api('users', {
@@ -49,11 +73,49 @@ export default Vue.extend({
 				sort: '+createdAt',
 				limit: 10
 			}),
-			faBookmark, faChartLine, faCommentAlt, faPlus
+			tags: [],
+			faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag
 		};
 	},
+
+	computed: {
+		tagUsers(): () => Promise<any> {
+			return () => this.$root.api('hashtags/users', {
+				tag: this.tag,
+				state: 'alive',
+				origin: 'local',
+				sort: '+follower',
+				limit: 30
+			});
+		},
+
+		tagRemoteUsers(): () => Promise<any> {
+			return () => this.$root.api('hashtags/users', {
+				tag: this.tag,
+				state: 'alive',
+				origin: 'remote',
+				sort: '+follower',
+				limit: 30
+			});
+		},
+	},
+
+	created() {
+		this.$root.api('hashtags/list', {
+			sort: '+attachedLocalUsers',
+			limit: 30
+		}).then(tags => {
+			this.tags = tags;
+		});
+	}
 });
 </script>
 
 <style lang="stylus" scoped>
+.vxjfqztj
+	padding 16px
+
+	> *
+		margin-right 16px
+
 </style>