feat: ✨ Swiper in notifs

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.118.1-calc.2-beta.2-rc.12",
+	"version": "12.118.1-calc.2-beta.2-rc.13",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/notifications.vue

@@ -9,15 +9,25 @@
 		/>
 	</template>
 	<MkSpacer :content-max="800">
-		<div v-if="tab === 'all' || tab === 'unread'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
-		</div>
-		<div v-else-if="tab === 'mentions'">
-			<XNotes :pagination="mentionsPagination"/>
-		</div>
-		<div v-else-if="tab === 'directNotes'">
-			<XNotes :pagination="directNotesPagination"/>
-		</div>
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+		>
+			<swiper-slide>
+				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="false"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="true"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XNotes :pagination="mentionsPagination"/>
+			</swiper-slide>
+			<swiper-slide>
+				<XNotes :pagination="directNotesPagination"/>
+			</swiper-slide>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -25,13 +35,16 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import XNotifications from '@/components/MkNotifications.vue';
 import XNotes from '@/components/MkNotes.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
-
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 let tab = $ref('all');
 let includeTypes = $ref<string[] | null>(null);
 let unreadOnly = $computed(() => tab === 'unread');
@@ -39,7 +52,7 @@ os.api('notifications/mark-all-as-read');
 
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(
-	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD,
 );
 window.addEventListener('resize', () => {
 	isMobile.value =
@@ -112,6 +125,16 @@ const headerTabs = $computed(() => [{
 	iconOnly: true,
 }]);
 
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
+
 definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
 	icon: 'fas fa-bell',

packages/client/src/pages/timeline.vue

@@ -37,7 +37,7 @@
 			</div> *v-else on next div* -->
 			<div class="tl _block">
 				<swiper
-					:modules="[Pagination, Virtual]"
+					:modules="[Virtual]"
 					:space-between="20"
 					:virtual="true"
 					@swiper="setSwiperRef"
@@ -66,7 +66,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch, ref } from 'vue';
-import { Pagination, Virtual } from 'swiper';
+import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import XTimeline from '@/components/MkTimeline.vue';
 import XPostForm from '@/components/MkPostForm.vue';
@@ -79,7 +79,6 @@ import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import 'swiper/scss';
-import 'swiper/scss/pagination';
 import 'swiper/scss/virtual';
 
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
@@ -128,11 +127,7 @@ const rootEl = $ref<HTMLElement>();
 
 let queue = $ref(0);
 const src = $computed({
-	get: () => {
-		const lastSrc = defaultStore.reactiveState.tl.value.src;
-		syncSlide(timelines.indexOf(lastSrc));
-		return lastSrc;
-	},
+	get: () => defaultStore.reactiveState.tl.value.src,
 	set: (x) => {
 		saveSrc(x);
 		syncSlide(timelines.indexOf(x));