feat: ⚗️ Swiping in featured

packages/client/src/pages/explore.vue

@@ -2,13 +2,20 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div class="lznhrdub">
-		<div v-if="tab === 'featured'">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
 				<XFeatured/>
-		</div>
-		<div v-else-if="tab === 'users'">
+			</swiper-slide>
+			<swiper-slide>
 				<XUsers/>
-		</div>
-		<div v-else-if="tab === 'search'">
+			</swiper-slide>
+			<swiper-slide>
 				<MkSpacer :content-max="1200">
 					<div>
 						<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
@@ -24,13 +31,16 @@
 
 					<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
 				</MkSpacer>
-		</div>
+			</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>