feat: ⚗️ Swiping in featured

packages/client/src/pages/explore.vue

@@ -2,35 +2,45 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div class="lznhrdub">
-		<div v-if="tab === 'featured'">
-			<XFeatured/>
-		</div>
-		<div v-else-if="tab === 'users'">
-			<XUsers/>
-		</div>
-		<div v-else-if="tab === 'search'">
-			<MkSpacer :content-max="1200">
-				<div>
-					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="fas fa-search"></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>
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<XFeatured/>
+			</swiper-slide>
+			<swiper-slide>
+				<XUsers/>
+			</swiper-slide>
+			<swiper-slide>
+				<MkSpacer :content-max="1200">
+					<div>
+						<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
+							<template #prefix><i class="fas fa-search"></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"/>
-			</MkSpacer>
-		</div>
+					<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
+				</MkSpacer>
+			</swiper-slide>
+		</swiper>
 	</div>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import MkFolder from '@/components/ui/folder.vue';
@@ -42,12 +52,22 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import XUserList from '@/components/MkUserList.vue';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const props = defineProps<{
 	tag?: string;
 }>();
 
-let tab = $ref('featured');
+// let tab = $ref('featured');
+
+const tab = $computed({
+	get: () => getSrc(),
+	set: (x) => {
+		syncSlide(['featured', 'users', 'search'].indexOf(x));
+	},
+});
+
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let searchQuery = $ref(null);
 let searchOrigin = $ref('combined');
@@ -85,4 +105,25 @@ definePageMetadata(computed(() => ({
 	title: i18n.ts.explore,
 	icon: 'fas fa-hashtag',
 })));
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+}
+
+function onSlideChange() {
+	saveSrc(timelines[swiperRef.activeIndex]);
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
+function getSrc() {
+	const dSrc = $ref('featured');
+	syncSlide(dSrc);
+	return dSrc;
+}
+
 </script>