feat: ✨ search now searches posts and users

packages/client/src/pages/explore.vue

@@ -17,20 +17,6 @@
 				<swiper-slide>
 					<XUsers/>
 				</swiper-slide>
-				<swiper-slide>
-					<div>
-						<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-							<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.searchUser }}</template>
-						</MkInput>
-						<MkRadios v-model="searchOrigin" class="_formBlock">
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkRadios>
-					</div>
-					<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
-				</swiper-slide>
 			</swiper>
 		</MkSpacer>
 	</div>
@@ -44,12 +30,9 @@ import { Swiper, SwiperSlide } from 'swiper/vue';
 import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import type MkFolder from '@/components/MkFolder.vue';
-import MkInput from '@/components/form/input.vue';
-import MkRadios from '@/components/form/radios.vue';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
-import XUserList from '@/components/MkUserList.vue';
 import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
@@ -58,27 +41,16 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-const tabs = ['featured', 'users', 'search'];
+const tabs = ['featured', 'users'];
 let tab = $ref(tabs[0]);
 watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
 
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let searchQuery = $ref(null);
-let searchOrigin = $ref('combined');
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
 
-const searchPagination = {
-	endpoint: 'users/search' as const,
-	limit: 10,
-	params: computed(() => (searchQuery && searchQuery !== '') ? {
-		query: searchQuery,
-		origin: searchOrigin,
-	} : null),
-};
-
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
@@ -89,10 +61,6 @@ const headerTabs = $computed(() => [{
 	key: 'users',
 	icon: 'ph-users ph-bold ph-lg',
 	title: i18n.ts.users,
-}, {
-	key: 'search',
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	title: i18n.ts.search,
 }]);
 
 definePageMetadata(computed(() => ({

packages/client/src/pages/search.vue

@@ -1,24 +1,43 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<XNotes ref="notes" :pagination="pagination"/>
+		<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<XNotes ref="notes" :pagination="notesPagination"/>
+				</swiper-slide>
+				<swiper-slide>
+					<XUserList ref="searchEl" class="_gap" :pagination="usersPagination"/>
+				</swiper-slide>
+			</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, watch, onMounted } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import XNotes from '@/components/MkNotes.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { defaultStore } from '@/store';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const props = defineProps<{
 	query: string;
 	channel?: string;
 }>();
 
-const pagination = {
+const notesPagination = {
 	endpoint: 'notes/search' as const,
 	limit: 10,
 	params: computed(() => ({
@@ -27,9 +46,49 @@ const pagination = {
 	})),
 };
 
+const usersPagination = {
+	endpoint: 'users/search' as const,
+	limit: 10,
+	params: computed(() => ({
+		query: props.query,
+		origin: 'combined',
+	})),
+};
+
+const tabs = ['search', 'users'];
+let tab = $ref(tabs[0]);
+watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = $computed(() => [ {
+	key: 'search',
+	icon: 'ph-magnifying-glass ph-bold ph-lg',
+	title: i18n.ts.search,
+}, {
+	key: 'users',
+	icon: 'ph-users ph-bold ph-lg',
+	title: i18n.ts.users,
+}]);
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+});
 
 definePageMetadata(computed(() => ({
 	title: i18n.t('searchWith', { q: props.query }),