tweak ui

1 files changed, 67 insertions, 59 deletions

diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 7e0e8ea27b..15ebf8efad 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -1,72 +1,76 @@
 <template>
-<div class="lznhrdub _root">
-	<div>
-		<div class="_isolated">
-			<MkInput v-model="query" :debounce="true" type="search">
-				<template #prefix><i class="fas fa-search"></i></template>
-				<template #label>{{ $ts.searchUser }}</template>
-			</MkInput>
-		</div>
-
-		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
+<div>
+	<MkHeader :info="header"/>
 
-		<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
-			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
-			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
-		</div>
+	<div class="lznhrdub _root">
+		<div>
+			<div class="_isolated">
+				<MkInput v-model="query" :debounce="true" type="search">
+					<template #prefix><i class="fas fa-search"></i></template>
+					<template #label>{{ $ts.searchUser }}</template>
+				</MkInput>
+			</div>
 
-		<template v-if="tag == null">
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
-			</MkFolder>
-		</template>
-	</div>
-	<div>
-		<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
-			<header><span>{{ $ts.exploreFediverse }}</span></header>
-		</div>
+			<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
 
-		<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
+			<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+				<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
+				<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
+			</div>
 
-			<div class="vxjfqztj">
-				<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
-				<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
+			<template v-if="tag == null">
+				<MkFolder class="_gap" persist-key="explore-pinned-users">
+					<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
+					<XUserList :pagination="pinnedUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-popular-users">
+					<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+					<XUserList :pagination="popularUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-recently-updated-users">
+					<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+					<XUserList :pagination="recentlyUpdatedUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+					<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
+					<XUserList :pagination="recentlyRegisteredUsers"/>
+				</MkFolder>
+			</template>
+		</div>
+		<div>
+			<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
+				<header><span>{{ $ts.exploreFediverse }}</span></header>
 			</div>
-		</MkFolder>
 
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
-		</MkFolder>
+			<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
+				<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
 
-		<template v-if="tag == null">
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
+				<div class="vxjfqztj">
+					<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
+					<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
+				</div>
 			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
+
+			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+				<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+				<XUserList :pagination="tagUsers"/>
 			</MkFolder>
-		</template>
+
+			<template v-if="tag == null">
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+					<XUserList :pagination="popularUsersF"/>
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+					<XUserList :pagination="recentlyUpdatedUsersF"/>
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
+					<XUserList :pagination="recentlyRegisteredUsersF"/>
+				</MkFolder>
+			</template>
+		</div>
 	</div>
 </div>
 </template>
@@ -100,6 +104,10 @@ export default defineComponent({
 				title: this.$ts.explore,
 				icon: 'fas fa-hashtag'
 			},
+			header: {
+				title: this.$ts.explore,
+				icon: 'fas fa-hashtag'
+			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
 				state: 'alive',