Exploreページを実装

17 files changed, 418 insertions, 154 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index f60f7391d2..f4d40f9b1a 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/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);
diff --git a/src/client/app/common/views/components/user-list.vue b/src/client/app/common/views/components/user-list.vue
new file mode 100644
index 0000000000..35569687ba
--- /dev/null
+++ b/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>
diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue
new file mode 100644
index 0000000000..b1e28415d8
--- /dev/null
+++ b/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>
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index fe13151159..1ec7de0cc5 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -135,6 +135,7 @@ init(async (launch, os) => {
 					{ path: '/search', component: () => import('./views/deck/deck.search-column.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/deck/deck.hashtag-column.vue').then(m => m.default) },
 					{ path: '/featured', component: () => import('./views/deck/deck.featured-column.vue').then(m => m.default) },
+					{ path: '/explore', component: () => import('./views/deck/deck.explore-column.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/deck/deck.favorites-column.vue').then(m => m.default) }
 				]}
 				: { path: '/', component: MkHome, children: [
@@ -144,6 +145,7 @@ init(async (launch, os) => {
 					{ path: '/search', component: () => import('./views/home/search.vue').then(m => m.default) },
 					{ path: '/tags/:tag', name: 'tag', component: () => import('./views/home/tag.vue').then(m => m.default) },
 					{ path: '/featured', component: () => import('./views/home/featured.vue').then(m => m.default) },
+					{ path: '/explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
 					{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) }
 				]},
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
diff --git a/src/client/app/desktop/views/components/ui-container.vue b/src/client/app/desktop/views/components/ui-container.vue
index b4f7744d4e..04351b29cf 100644
--- a/src/client/app/desktop/views/components/ui-container.vue
+++ b/src/client/app/desktop/views/components/ui-container.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="kedshtep" :class="{ naked }">
+<div class="kedshtep" :class="{ naked, inDeck }">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -31,6 +31,11 @@ export default Vue.extend({
 			default: false
 		},
 	},
+	inject: {
+		inDeck: {
+			default: false
+		}
+	},
 	data() {
 		return {
 			showBody: true
@@ -41,49 +46,72 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .kedshtep
-	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
 	overflow hidden
 
-	&.naked
-		background transparent !important
-		box-shadow none !important
+	&:not(.inDeck)
+		background var(--face)
+		box-shadow var(--shadow)
+		border-radius var(--round)
 
-	> header
-		background var(--faceHeader)
+		& + .kedshtep
+			margin-top 16px
 
-		> .title
-			z-index 1
-			margin 0
-			padding 0 16px
-			line-height 42px
-			font-size 0.9em
-			font-weight bold
-			color var(--faceHeaderText)
-			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+		&.naked
+			background transparent !important
+			box-shadow none !important
+
+		> header
+			background var(--faceHeader)
+
+			> .title
+				z-index 1
+				margin 0
+				padding 0 16px
+				line-height 42px
+				font-size 0.9em
+				font-weight bold
+				color var(--faceHeaderText)
+				box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
 
-			> [data-icon]
-				margin-right 6px
+				> [data-icon]
+					margin-right 6px
 
-			&:empty
-				display none
+				&:empty
+					display none
 
-		> button
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding 0
-			width 42px
-			font-size 0.9em
-			line-height 42px
-			color var(--faceTextButton)
+			> button
+				position absolute
+				z-index 2
+				top 0
+				right 0
+				padding 0
+				width 42px
+				font-size 0.9em
+				line-height 42px
+				color var(--faceTextButton)
 
-			&:hover
-				color var(--faceTextButtonHover)
+				&:hover
+					color var(--faceTextButtonHover)
+
+				&:active
+					color var(--faceTextButtonActive)
+
+	&.inDeck
+		background var(--face)
+
+		> header
+			margin 0
+			padding 8px 16px
+			font-size 12px
+			color var(--text)
+			background var(--deckColumnBg)
 
-			&:active
-				color var(--faceTextButtonActive)
+			> button
+				position absolute
+				top 0
+				right 8px
+				padding 8px 6px
+				font-size 14px
+				color var(--text)
 
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 4a3cc71548..d94549c2aa 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -60,6 +60,13 @@
 				</li>
 			</ul>
 			<ul>
+				<li @click="toggleDeckMode">
+					<p>
+						<span>{{ $t('@.deck') }}</span>
+						<template v-if="$store.state.device.deckMode"><i><fa :icon="faHome"/></i></template>
+						<template v-else><i><fa :icon="faColumns"/></i></template>
+					</p>
+				</li>
 				<li @click="dark">
 					<p>
 						<span>{{ $t('dark') }}</span>
@@ -90,12 +97,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
 import MkSettingsWindow from './settings-window.vue';
 import MkDriveWindow from './drive-window.vue';
 import contains from '../../../common/scripts/contains';
+import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.account.vue'),
 	data() {
 		return {
-			isOpen: false
+			isOpen: false,
+			faHome, faColumns
 		};
 	},
 	computed: {
@@ -154,7 +163,11 @@ export default Vue.extend({
 				key: 'darkmode',
 				value: !this.$store.state.device.darkmode
 			});
-		}
+		},
+		toggleDeckMode() {
+			this.$store.commit('device/set', { key: 'deckMode', value: !this.$store.state.device.deckMode });
+			location.reload();
+		},
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/components/ui.header.messaging.vue b/src/client/app/desktop/views/components/ui.header.messaging.vue
new file mode 100644
index 0000000000..fc41144d1f
--- /dev/null
+++ b/src/client/app/desktop/views/components/ui.header.messaging.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="toltmoik">
+	<button @click="open()" :title="$t('@.messaging')">
+		<i class="bell"><fa :icon="faComments"/></i>
+		<i class="circle" v-if="hasUnreadMessagingMessage"><fa icon="circle"/></i>
+	</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import MkMessagingWindow from './messaging-window.vue';
+import { faComments } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	data() {
+		return {
+			faComments
+		};
+	},
+
+	computed: {
+		hasUnreadMessagingMessage(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
+		}
+	},
+
+	methods: {
+		open() {
+			this.$root.new(MkMessagingWindow);
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.toltmoik
+	> button
+		display block
+		margin 0
+		padding 0
+		width 32px
+		color var(--desktopHeaderFg)
+		border none
+		background transparent
+		cursor pointer
+
+		*
+			pointer-events none
+
+		&:hover
+		&[data-active='true']
+			color var(--desktopHeaderHoverFg)
+
+		> i.bell
+			font-size 1.2em
+			line-height 48px
+
+		> i.circle
+			margin-left -5px
+			vertical-align super
+			font-size 10px
+			color var(--notificationIndicator)
+
+</style>
diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
index 40fb0117a5..612c8d931f 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -1,34 +1,15 @@
 <template>
 <div class="nav">
 	<ul>
-		<template v-if="$store.getters.isSignedIn">
-			<template v-if="$store.state.device.deckMode">
-				<li class="deck active" @click="goToTop">
-					<router-link to="/"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
-				</li>
-				<li class="home">
-					<a @click="toggleDeckMode(false)"><fa icon="home"/><p>{{ $t('home') }}</p></a>
-				</li>
-			</template>
-			<template v-else>
-				<li class="home active" @click="goToTop">
-					<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
-				</li>
-				<li class="deck">
-					<a @click="toggleDeckMode(true)"><fa icon="columns"/><p>{{ $t('deck') }}</p></a>
-				</li>
-			</template>
-			<li class="messaging">
-				<a @click="messaging">
-					<fa icon="comments"/>
-					<p>{{ $t('@.messaging') }}</p>
-					<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
-				</a>
-			</li>
-		</template>
+		<li class="home active" @click="goToTop">
+			<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
+		</li>
 		<li class="featured">
 			<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
 		</li>
+		<li class="explore">
+			<router-link to="/explore"><fa :icon="faHashtag"/><p>{{ $t('@.explore') }}</p></router-link>
+		</li>
 		<li class="game">
 			<a @click="game">
 				<fa icon="gamepad"/>
@@ -43,9 +24,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import MkMessagingWindow from './messaging-window.vue';
 import MkGameWindow from './game-window.vue';
-import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
+import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/ui.header.nav.vue'),
@@ -53,14 +33,9 @@ export default Vue.extend({
 		return {
 			hasGameInvitations: false,
 			connection: null,
-			faNewspaper
+			faNewspaper, faHashtag
 		};
 	},
-	computed: {
-		hasUnreadMessagingMessage(): boolean {
-			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
-		}
-	},
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
@@ -75,11 +50,6 @@ export default Vue.extend({
 		}
 	},
 	methods: {
-		toggleDeckMode(deck) {
-			this.$store.commit('device/set', { key: 'deckMode', value: deck });
-			location.reload();
-		},
-
 		onReversiInvited() {
 			this.hasGameInvitations = true;
 		},
@@ -88,10 +58,6 @@ export default Vue.extend({
 			this.hasGameInvitations = false;
 		},
 
-		messaging() {
-			this.$root.new(MkMessagingWindow);
-		},
-
 		game() {
 			this.$root.new(MkGameWindow);
 		},
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index d487ae5dc2..0883c9b97d 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -16,6 +16,7 @@
 				<div class="right">
 					<x-search/>
 					<x-account v-if="$store.getters.isSignedIn"/>
+					<x-messaging v-if="$store.getters.isSignedIn"/>
 					<x-notifications v-if="$store.getters.isSignedIn"/>
 					<x-post v-if="$store.getters.isSignedIn"/>
 					<x-clock v-if="$store.state.settings.showClockOnHeader" class="clock"/>
@@ -37,6 +38,7 @@ import XAccount from './ui.header.account.vue';
 import XNotifications from './ui.header.notifications.vue';
 import XPost from './ui.header.post.vue';
 import XClock from './ui.header.clock.vue';
+import XMessaging from './ui.header.messaging.vue';
 
 export default Vue.extend({
 	i18n: i18n(),
@@ -45,6 +47,7 @@ export default Vue.extend({
 		XSearch,
 		XAccount,
 		XNotifications,
+		XMessaging,
 		XPost,
 		XClock
 	},
diff --git a/src/client/app/desktop/views/components/user-card.vue b/src/client/app/desktop/views/components/user-card.vue
index 28c4552d4b..21a4ab9f6c 100644
--- a/src/client/app/desktop/views/components/user-card.vue
+++ b/src/client/app/desktop/views/components/user-card.vue
@@ -41,7 +41,6 @@ export default Vue.extend({
 	height 280px
 	overflow hidden
 	font-size 13px
-	text-align center
 	background $bg
 	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
 	color var(--faceText)
@@ -54,7 +53,7 @@ export default Vue.extend({
 
 	> .avatar
 		display block
-		margin -40px auto 0 auto
+		margin -40px 0 0 16px
 		width 80px
 		height 80px
 		border-radius 100%
@@ -67,6 +66,7 @@ export default Vue.extend({
 
 	> .body
 		padding 0px 24px
+		margin-top -40px
 
 		> .name
 			font-size 120%
diff --git a/src/client/app/desktop/views/deck/deck.column.vue b/src/client/app/desktop/views/deck/deck.column.vue
index 1fd6952a39..016784e913 100644
--- a/src/client/app/desktop/views/deck/deck.column.vue
+++ b/src/client/app/desktop/views/deck/deck.column.vue
@@ -109,7 +109,8 @@ export default Vue.extend({
 		return {
 			column: this,
 			isScrollTop: this.isScrollTop,
-			count: v => this.count = v
+			count: v => this.count = v,
+			inDeck: !this.naked
 		};
 	},
 
diff --git a/src/client/app/desktop/views/deck/deck.explore-column.vue b/src/client/app/desktop/views/deck/deck.explore-column.vue
new file mode 100644
index 0000000000..f0f0180fc4
--- /dev/null
+++ b/src/client/app/desktop/views/deck/deck.explore-column.vue
@@ -0,0 +1,34 @@
+<template>
+<x-column>
+	<span slot="header">
+		<fa :icon="faHashtag"/>{{ $t('@.explore') }}
+	</span>
+
+	<div>
+		<x-explore/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import XColumn from './deck.column.vue';
+import XExplore from '../../../common/views/pages/explore.vue';
+import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+
+export default Vue.extend({
+	i18n: i18n(),
+
+	components: {
+		XColumn,
+		XExplore,
+	},
+
+	data() {
+		return {
+			faHashtag
+		};
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/deck/deck.user-column.vue b/src/client/app/desktop/views/deck/deck.user-column.vue
index 788b1cd6b0..16a7aa5b35 100644
--- a/src/client/app/desktop/views/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/deck/deck.user-column.vue
@@ -56,19 +56,15 @@
 				</div>
 			</div>
 		</div>
-		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
-			<p class="caption" @click="toggleShowPinned"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</p>
-			<span class="angle" v-if="showPinned"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div class="notes" v-show="showPinned">
+		<ui-container v-if="user.pinnedNotes && user.pinnedNotes.length > 0" :body-togglable="true">
+			<span slot="header"><fa icon="thumbtack"/> {{ $t('pinned-notes') }}</span>
+			<div>
 				<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 			</div>
-		</div>
-		<div class="images" v-if="images.length > 0">
-			<p class="caption" @click="toggleShowImages"><fa :icon="['far', 'images']"/> {{ $t('images') }}</p>
-			<span class="angle" v-if="showImages"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showImages">
+		</ui-container>
+		<ui-container v-if="images.length > 0" :body-togglable="true">
+			<span slot="header"><fa :icon="['far', 'images']"/> {{ $t('images') }}</span>
+			<div class="sainvnaq">
 				<router-link v-for="image in images"
 					:style="`background-image: url(${image.thumbnailUrl})`"
 					:key="`${image.id}:${image._note.id}`"
@@ -76,21 +72,19 @@
 					:title="`${image.name}\n${(new Date(image.createdAt)).toLocaleString()}`"
 				></router-link>
 			</div>
-		</div>
-		<div class="activity">
-			<p class="caption" @click="toggleShowActivity"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</p>
-			<span class="angle" v-if="showActivity"><fa icon="angle-up"/></span>
-			<span class="angle" v-else><fa icon="angle-down"/></span>
-			<div v-show="showActivity">
+		</ui-container>
+		<ui-container :body-togglable="true">
+			<span slot="header"><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</span>
+			<div>
 				<div ref="chart"></div>
 			</div>
-		</div>
-		<div class="tl">
-			<p class="caption"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</p>
+		</ui-container>
+		<ui-container>
+			<span slot="header"><fa :icon="['far', 'comment-alt']"/> {{ $t('timeline') }}</span>
 			<div>
 				<x-notes ref="timeline" :more="existMore ? fetchMoreNotes : null"/>
 			</div>
-		</div>
+		</ui-container>
 	</div>
 </x-column>
 </template>
@@ -124,9 +118,6 @@ export default Vue.extend({
 			moreFetching: false,
 			withFiles: false,
 			images: [],
-			showPinned: true,
-			showImages: true,
-			showActivity: true
 		};
 	},
 
@@ -314,18 +305,6 @@ export default Vue.extend({
 				source: this.$refs.menu,
 				user: this.user
 			});
-		},
-
-		toggleShowPinned() {
-			this.showPinned = !this.showPinned;
-		},
-
-		toggleShowImages() {
-			this.showImages = !this.showImages;
-		},
-
-		toggleShowActivity() {
-			this.showActivity = !this.showActivity;
 		}
 	}
 });
@@ -469,39 +448,18 @@ export default Vue.extend({
 					font-size 80%
 					opacity 0.7
 
-	> *
-		> p.caption
-			margin 0
-			padding 8px 16px
-			font-size 12px
-			color var(--text)
-
-			& + .angle
-				position absolute
-				top 0
-				right 8px
-				padding 6px
-				font-size 14px
-				color var(--text)
-
-	> .pinned
-		> .notes
-			background var(--face)
-
-	> .images
-		> div
-			display grid
-			grid-template-columns 1fr 1fr 1fr
-			gap 8px
-			padding 16px
-			background var(--face)
+	.sainvnaq
+		display grid
+		grid-template-columns 1fr 1fr 1fr
+		gap 8px
+		padding 16px
 
-			> *
-				height 70px
-				background-position center center
-				background-size cover
-				background-clip content-box
-				border-radius 4px
+		> *
+			height 70px
+			background-position center center
+			background-size cover
+			background-clip content-box
+			border-radius 4px
 
 	> .activity
 		> div
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index f912c0d53b..1feff3d5eb 100644
--- a/src/client/app/mobile/script.ts
+++ b/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) },
diff --git a/src/client/app/mobile/views/components/ui-container.vue b/src/client/app/mobile/views/components/ui-container.vue
index 6254a97ead..2dcd83f586 100644
--- a/src/client/app/mobile/views/components/ui-container.vue
+++ b/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>
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index af2e3e4c6f..16bde6030e 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/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
 		};
 	},
 
diff --git a/src/client/app/mobile/views/pages/explore.vue b/src/client/app/mobile/views/pages/explore.vue
new file mode 100644
index 0000000000..80b819472c
--- /dev/null
+++ b/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>