From 79d7f0804e451d7ddbd7bfc50af4ecc5ff2b4d1d Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 9 Sep 2022 15:44:55 -0700
Subject: [PATCH] Add swiper to notifications

---
 packages/client/src/pages/notifications.vue | 49 +++++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index c99a88ba1..9896d8ac1 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -9,21 +9,34 @@
 		/>
 	</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"
+			@slide-change="onSlideChange"
+		>
+			<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>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import { notificationTypes } from 'misskey-js';
 import XNotifications from '@/components/MkNotifications.vue';
 import XNotes from '@/components/MkNotes.vue';
@@ -31,8 +44,11 @@ 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');
+const tabs = ['all', 'unread', 'mentions', 'directNotes'];
 let includeTypes = $ref<string[] | null>(null);
 let unreadOnly = $computed(() => tab === 'unread');
 os.api('notifications/mark-all-as-read');
@@ -112,4 +128,19 @@ definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
 	icon: 'fas fa-bell',
 })));
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>