コンポーネント整理

src/client/app/mobile/views/pages/user/home.vue

@@ -1,36 +1,26 @@
 <template>
-<div class="root home">
-	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
-	<section class="recent-notes">
-		<h2><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</h2>
+<div class="wojmldye">
+	<mk-note-detail class="note" v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
+	<ui-container :body-togglable="true">
+		<template #header><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</template>
 		<div>
 			<x-notes :user="user"/>
 		</div>
-	</section>
-	<section class="images">
-		<h2><fa icon="image"/>{{ $t('images') }}</h2>
+	</ui-container>
+	<ui-container :body-togglable="true">
+		<template #header><fa icon="image"/>{{ $t('images') }}</template>
 		<div>
 			<x-photos :user="user"/>
 		</div>
-	</section>
-	<section class="activity">
-		<h2><fa icon="chart-bar"/>{{ $t('activity') }}</h2>
-		<div>
+	</ui-container>
+	<ui-container :body-togglable="true">
+		<template #header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
+		<div style="padding:8px;">
 			<x-activity :user="user"/>
 		</div>
-	</section>
-	<section class="frequently-replied-users">
-		<h2><fa icon="users"/>{{ $t('frequently-replied-users') }}</h2>
-		<div>
-			<x-friends :user="user"/>
-		</div>
-	</section>
-	<section class="followers-you-know" v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id">
-		<h2><fa icon="users"/>{{ $t('followers-you-know') }}</h2>
-		<div>
-			<x-followers-you-know :user="user"/>
-		</div>
-	</section>
+	</ui-container>
+	<mk-user-list :make-promise="makeFrequentlyRepliedUsersPromise" :icon-only="true"><fa icon="users"/> {{ $t('frequently-replied-users') }}</mk-user-list>
+	<mk-user-list v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id" :make-promise="makeFollowersYouKnowPromise" :icon-only="true"><fa icon="users"/> {{ $t('followers-you-know') }}</mk-user-list>
 </div>
 </template>
 
@@ -39,66 +29,36 @@ import Vue from 'vue';
 import i18n from '../../../../i18n';
 import XNotes from './home.notes.vue';
 import XPhotos from './home.photos.vue';
-import XFriends from './home.friends.vue';
-import XFollowersYouKnow from './home.followers-you-know.vue';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/user/home.vue'),
 	components: {
 		XNotes,
 		XPhotos,
-		XFriends,
-		XFollowersYouKnow,
 		XActivity: () => import('../../../../common/views/components/activity.vue').then(m => m.default)
 	},
-	props: ['user']
+	props: ['user'],
+	data() {
+		return {
+			makeFrequentlyRepliedUsersPromise: () => this.$root.api('users/get_frequently_replied_users', {
+				userId: this.user.id
+			}).then(res => res.map(x => x.user)),
+			makeFollowersYouKnowPromise: () => this.$root.api('users/followers', {
+				userId: this.user.id,
+				iknow: true,
+				limit: 30
+			}).then(res => res.users),
+		};
+	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.root.home
-	margin 0 auto
-
-	> .mk-note-detail
+.wojmldye
+	> .note
 		margin 0 0 8px 0
 
 		@media (min-width 500px)
 			margin 0 0 16px 0
 
-	> section
-		background var(--face)
-		border-radius 8px
-		box-shadow 0 4px 16px rgba(#000, 0.1)
-
-		&:not(:last-child)
-			margin-bottom 8px
-
-			@media (min-width 500px)
-				margin-bottom 16px
-
-		> h2
-			margin 0
-			padding 8px 10px
-			font-size 15px
-			font-weight normal
-			color var(--text)
-			background var(--faceHeader)
-			border-radius 8px 8px 0 0
-
-			@media (min-width 500px)
-				padding 10px 16px
-
-			> [data-icon]
-				margin-right 6px
-
-	> .activity
-		> div
-			padding 8px
-
-	> p
-		display block
-		margin 16px
-		text-align center
-		color var(--text)
-
 </style>