Exploreページを実装

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

@@ -33,6 +33,7 @@ import urlPreview from './url-preview.vue';
 import fileTypeIcon from './file-type-icon.vue';
 import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
+import userList from './user-list.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
 import uiHorizonGroup from './ui/horizon-group.vue';
@@ -79,6 +80,7 @@ Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-file-type-icon', fileTypeIcon);
 Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
+Vue.component('mk-user-list', userList);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
 Vue.component('ui-horizon-group', uiHorizonGroup);

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

@@ -0,0 +1,73 @@
+<template>
+<ui-container :body-togglable="true">
+	<template slot="header"><slot></slot></template>
+	<div class="efvhhmdq">
+		<div class="user" v-for="friend in users">
+			<mk-avatar class="avatar" :user="friend"/>
+			<div class="body">
+				<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
+				<p class="username">@{{ friend | acct }}</p>
+			</div>
+		</div>
+	</div>
+</ui-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		users: {
+			type: Array,
+			required: true
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.efvhhmdq
+	> .user
+		padding 16px
+		border-bottom solid 1px var(--faceDivider)
+
+		&:last-child
+			border-bottom none
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar
+			display block
+			float left
+			margin 0 12px 0 0
+			width 42px
+			height 42px
+			border-radius 8px
+
+		> .body
+			float left
+			width calc(100% - 54px)
+
+			> .name
+				margin 0
+				font-size 16px
+				line-height 24px
+				color var(--text)
+
+			> .username
+				display block
+				margin 0
+				font-size 15px
+				line-height 16px
+				color var(--text)
+				opacity 0.7
+
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+<div>
+	<mk-user-list :users="verifiedUsers">
+		<span><fa :icon="faBookmark"/> {{ $t('verified-users') }}</span>
+	</mk-user-list>
+	<mk-user-list :users="popularUsers">
+		<span><fa :icon="faChartLine"/> {{ $t('popular-users') }}</span>
+	</mk-user-list>
+	<mk-user-list :users="recentlyUpdatedUsers">
+		<span><fa :icon="faCommentAlt"/> {{ $t('recently-updated-users') }}</span>
+	</mk-user-list>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { faChartLine } 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'),
+
+	data() {
+		return {
+			verifiedUsers: [],
+			popularUsers: [],
+			recentlyUpdatedUsers: [],
+			faBookmark, faChartLine, faCommentAlt
+		};
+	},
+
+	created() {
+		this.$root.api('users', {
+			state: 'verified',
+			origin: 'local',
+			sort: '+follower',
+			limit: 10
+		}).then(users => {
+			this.verifiedUsers = users;
+		});
+
+		this.$root.api('users', {
+			state: 'alive',
+			origin: 'local',
+			sort: '+follower',
+			limit: 10
+		}).then(users => {
+			this.popularUsers = users;
+		});
+
+		this.$root.api('users', {
+			origin: 'local',
+			sort: '+updatedAt',
+			limit: 10
+		}).then(users => {
+			this.recentlyUpdatedUsers = users;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>