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

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

* 🎨

* Increase limit

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

* Fix bug

* Fix bug

* Improve performance

src/client/app/common/views/components/mfm.ts

@@ -40,7 +40,11 @@ export default Vue.component('misskey-flavored-markdown', {
 		},
 		customEmojis: {
 			required: false,
-		}
+		},
+		isNote: {
+			type: Boolean,
+			default: true
+		},
 	},
 
 	render(createElement) {
@@ -204,7 +208,7 @@ export default Vue.component('misskey-flavored-markdown', {
 					return [createElement('router-link', {
 						key: Math.random(),
 						attrs: {
-							to: `/tags/${encodeURIComponent(token.node.props.hashtag)}`,
+							to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
 							style: 'color:var(--mfmHashtag);'
 						}
 					}, `#${token.node.props.hashtag}`)];

src/client/app/common/views/components/user-list.vue

@@ -13,7 +13,7 @@
 					<p class="username">@{{ user | acct }}</p>
 				</div>
 				<div class="description" v-if="user.description" :title="user.description">
-					<mfm :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :should-break="false"/>
+					<mfm :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis" :should-break="false"/>
 				</div>
 			</div>
 		</div>

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>

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

@@ -12,7 +12,7 @@
 			</router-link>
 			<span class="username">@{{ user | acct }}</span>
 			<div class="description">
-				<mfm v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
+				<mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 			</div>
 		</div>
 	</main>