From c2e1cd19e76a76b294e8ee9f375c4d8602f1a587 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 13 Jul 2022 18:09:41 +0900
Subject: [PATCH] chore(client): tweak explore page

---
 packages/client/src/pages/explore.users.vue |  7 ++++++-
 packages/client/src/pages/explore.vue       | 13 +++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index bdc96b33a..8af37ab52 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,5 +1,9 @@
 <template>
 <MkSpacer :content-max="1200">
+	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
+		<option value="local">{{ $ts.local }}</option>
+		<option value="remote">{{ $ts.remote }}</option>
+	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
 			<MkFolder class="_gap" persist-key="explore-pinned-users">
@@ -57,16 +61,17 @@
 import { computed, watch } from 'vue';
 import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
+import MkTab from '@/components/tab.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 
 const props = defineProps<{
-	origin: 'local' | 'remote';
 	tag?: string;
 }>();
 
+let origin = $ref('local');
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index c0b9438a5..059e94d1d 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -5,11 +5,8 @@
 		<div v-if="tab === 'featured'">
 			<XFeatured/>
 		</div>
-		<div v-else-if="tab === 'localUsers'">
-			<XUsers origin="local"/>
-		</div>
-		<div v-else-if="tab === 'remoteUsers'">
-			<XUsers origin="remote"/>
+		<div v-else-if="tab === 'users'">
+			<XUsers/>
 		</div>
 		<div v-else-if="tab === 'search'">
 			<MkSpacer :content-max="1200">
@@ -75,13 +72,9 @@ const headerTabs = $computed(() => [{
 	icon: 'fas fa-bolt',
 	title: i18n.ts.featured,
 }, {
-	key: 'localUsers',
+	key: 'users',
 	icon: 'fas fa-users',
 	title: i18n.ts.users,
-}, {
-	key: 'remoteUsers',
-	icon: 'fas fa-users',
-	title: i18n.ts.remote,
 }, {
 	key: 'search',
 	title: i18n.ts.search,