enhance(client): Use tab component for page list

2 files changed, 21 insertions, 20 deletions

diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index 3ea63fa59f..824f150840 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="pxhvhrfw" v-size="[{ max: 500 }]">
-	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value">{{ item.label }}</button>
+	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
 
@@ -33,6 +33,10 @@ export default Vue.extend({
 			color: var(--accent);
 			border-bottom-color: var(--accent);
 		}
+
+		> .icon {
+			margin-right: 6px;
+		}
 	}
 
 	&.max-width_500px {
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index a261785715..9f9c68ee28 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -3,24 +3,20 @@
 	<portal to="icon"><fa :icon="faStickyNote"/></portal>
 	<portal to="title">{{ $t('pages') }}</portal>
 
-	<mk-container :body-togglable="true">
-		<template #header><fa :icon="faEdit" fixed-width/>{{ $t('_pages.my') }}</template>
-		<div class="rknalgpo my">
-			<mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button>
-			<mk-pagination :pagination="myPagesPagination" #default="{items}">
-				<mk-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
-			</mk-pagination>
-		</div>
-	</mk-container>
+	<mk-tab v-model="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
 
-	<mk-container :body-togglable="true">
-		<template #header><fa :icon="faHeart" fixed-width/>{{ $t('_pages.liked') }}</template>
-		<div class="rknalgpo">
-			<mk-pagination :pagination="likedPagesPagination" #default="{items}">
-				<mk-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
-			</mk-pagination>
-		</div>
-	</mk-container>
+	<div class="rknalgpo my" v-if="tab === 'my'">
+		<mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button>
+		<mk-pagination :pagination="myPagesPagination" #default="{items}">
+			<mk-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/>
+		</mk-pagination>
+	</div>
+
+	<div class="rknalgpo" v-if="tab === 'liked'">
+		<mk-pagination :pagination="likedPagesPagination" #default="{items}">
+			<mk-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/>
+		</mk-pagination>
+	</div>
 </div>
 </template>
 
@@ -31,14 +27,15 @@ import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons';
 import MkPagePreview from '../components/page-preview.vue';
 import MkPagination from '../components/ui/pagination.vue';
 import MkButton from '../components/ui/button.vue';
-import MkContainer from '../components/ui/container.vue';
+import MkTab from '../components/tab.vue';
 
 export default Vue.extend({
 	components: {
-		MkPagePreview, MkPagination, MkButton, MkContainer
+		MkPagePreview, MkPagination, MkButton, MkTab
 	},
 	data() {
 		return {
+			tab: 'my',
 			myPagesPagination: {
 				endpoint: 'i/pages',
 				limit: 5,