Exploreページを実装

src/client/app/mobile/script.ts

@@ -134,6 +134,7 @@ init((launch) => {
 			{ path: '/search', component: MkSearch },
 			{ path: '/tags/:tag', component: MkTag },
 			{ path: '/featured', name: 'featured', component: () => import('./views/pages/featured.vue').then(m => m.default) },
+			{ path: '/explore', name: 'explore', component: () => import('./views/pages/explore.vue').then(m => m.default) },
 			{ path: '/share', component: MkShare },
 			{ path: '/games/reversi/:game?', name: 'reversi', component: MkReversi },
 			{ path: '/@:user', component: () => import('./views/pages/user.vue').then(m => m.default) },

src/client/app/mobile/views/components/ui-container.vue

@@ -3,6 +3,10 @@
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
+		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+			<template v-if="showBody"><fa icon="angle-up"/></template>
+			<template v-else><fa icon="angle-down"/></template>
+		</button>
 	</header>
 	<div v-show="showBody">
 		<slot></slot>
@@ -21,7 +25,16 @@ export default Vue.extend({
 		naked: {
 			type: Boolean,
 			default: false
-		}
+		},
+		bodyTogglable: {
+			type: Boolean,
+			default: false
+		},
+	},
+	data() {
+		return {
+			showBody: true
+		};
 	}
 });
 </script>

src/client/app/mobile/views/components/ui.nav.vue

@@ -20,6 +20,7 @@
 					<li><router-link to="/i/messaging" :data-active="$route.name == 'messaging'"><i><fa :icon="['far', 'comments']" fixed-width/></i>{{ $t('@.messaging') }}<i v-if="hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 					<li v-if="$store.getters.isSignedIn && ($store.state.i.isLocked || $store.state.i.carefulBot)"><router-link to="/i/received-follow-requests" :data-active="$route.name == 'received-follow-requests'"><i><fa :icon="['far', 'envelope']" fixed-width/></i>{{ $t('follow-requests') }}<i v-if="$store.getters.isSignedIn && $store.state.i.pendingReceivedFollowRequestsCount" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 					<li><router-link to="/featured" :data-active="$route.name == 'featured'"><i><fa :icon="faNewspaper" fixed-width/></i>{{ $t('@.featured-notes') }}<i><fa icon="angle-right"/></i></router-link></li>
+					<li><router-link to="/explore" :data-active="$route.name == 'explore'"><i><fa :icon="faHashtag" fixed-width/></i>{{ $t('@.explore') }}<i><fa icon="angle-right"/></i></router-link></li>
 					<li><router-link to="/games/reversi" :data-active="$route.name == 'reversi'"><i><fa icon="gamepad" fixed-width/></i>{{ $t('game') }}<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i><i><fa icon="angle-right"/></i></router-link></li>
 				</ul>
 				<ul>
@@ -51,7 +52,7 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import { lang } from '../../../config';
-import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/components/ui.nav.vue'),
@@ -64,7 +65,7 @@ export default Vue.extend({
 			aboutUrl: `/docs/${lang}/about`,
 			announcements: [],
 			searching: false,
-			faNewspaper
+			faNewspaper, faHashtag
 		};
 	},
 

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

@@ -0,0 +1,37 @@
+<template>
+<mk-ui>
+	<span slot="header"><span style="margin-right:4px;"><fa :icon="faHashtag"/></span>{{ $t('@.explore') }}</span>
+
+	<main>
+		<x-explore/>
+	</main>
+</mk-ui>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import XExplore from '../../../common/views/pages/explore.vue';
+
+export default Vue.extend({
+	i18n: i18n(''),
+	components: {
+		XExplore
+	},
+	data() {
+		return {
+			faHashtag
+		};
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+main
+	width 100%
+	max-width 680px
+	margin 0 auto
+	padding 8px
+
+</style>