From 6c4e53db104deb30eea4ee58a8605dece04a4bc1 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 20 Aug 2022 00:02:15 -0700
Subject: [PATCH] feat: :sparkles: swipe thru notifs

---
 CALCKEY.md                                   |  2 +-
 package.json                                 |  2 +-
 packages/client/src/components/cw-button.vue |  3 +-
 packages/client/src/pages/notifications.vue  | 64 +++++++++++++++++++-
 packages/client/src/pages/timeline.vue       |  4 +-
 5 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 522b34286..4b079659b 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -39,7 +39,7 @@
 - Saner defaults
 - Recommended instances timeline
 - Improve mobile UX
-  - Swipe through timelines on mobile
+  - Swipe through timelines/notifications on mobile
   - Redesigned mobile bottom nav bar
   - Post button on TL
 - Star as default reaction
diff --git a/package.json b/package.json
index c445b4cd7..dd4df6415 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "12.118.1-calc.11.4",
+	"version": "12.118.1-calc.11.5",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/cw-button.vue b/packages/client/src/components/cw-button.vue
index 87a03cd5a..96b89d862 100644
--- a/packages/client/src/components/cw-button.vue
+++ b/packages/client/src/components/cw-button.vue
@@ -49,7 +49,8 @@ const toggle = () => {
 	transition: background-color 0.25s ease-in-out;
 
 	&:hover {
-		background: lighten(var(--cwBg), 10%);
+		background: var(--cwFg);
+		color: var(--cwBg);
 	}
 
 	> span {
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index a3539ac7e..b290203f0 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -16,19 +16,29 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import XNotifications from '@/components/notifications.vue';
 import XNotes from '@/components/notes.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
 
 let tab = $ref('all');
 let includeTypes = $ref<string[] | null>(null);
 let unreadOnly = $computed(() => tab === 'unread');
 os.api('notifications/mark-all-as-read');
 
+const MOBILE_THRESHOLD = 500;
+const isMobile = ref(
+	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+);
+window.addEventListener('resize', () => {
+	isMobile.value =
+		deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
 const mentionsPagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
@@ -93,4 +103,56 @@ definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
 	icon: 'fas fa-bell',
 })));
+
+if (isMobile.value) {
+	document.addEventListener('touchstart', handleTouchStart, false);
+	document.addEventListener('touchmove', handleTouchMove, false);
+
+	let xDown = null;
+	let yDown = null;
+
+	function getTouches(evt) {
+		return (
+			evt.touches || evt.originalEvent.touches
+		);
+	}
+
+	function handleTouchStart(evt) {
+		const firstTouch = getTouches(evt)[0];
+		xDown = firstTouch.clientX;
+		yDown = firstTouch.clientY;
+	}
+
+	function handleTouchMove(evt) {
+		if (!xDown || !yDown) {
+			return;
+		}
+
+		let xUp = evt.touches[0].clientX;
+		let yUp = evt.touches[0].clientY;
+
+		let xDiff = xDown - xUp;
+		let yDiff = yDown - yUp;
+
+		let next = 'home';
+		let tabs = ['all', 'unread', 'mentions', 'directNotes'];
+
+		if (Math.abs(xDiff) > Math.abs(yDiff)) {
+			if (xDiff > 0) {
+				if (tab === 'all') {
+					next = 'directNotes';
+				}
+				else {
+					next = tabs[(tabs.indexOf(tab) + 1) % tabs.length];
+				}
+			} else {
+				next = tabs[(tabs.indexOf(tab) - 1) % tabs.length];
+			}
+			tab = next;
+		}
+		xDown = null;
+		yDown = null;
+		return;
+	}
+}
 </script>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index d5cab01e3..82fac4105 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -280,10 +280,10 @@ if (isMobile.value) {
 					next = 'global'
 				}
 				else {
-					next = timelines[(timelines.indexOf(src) - 1) % timelines.length];
+					next = timelines[(timelines.indexOf(src) + 1) % timelines.length];
 				}
 			} else {
-				next = timelines[(timelines.indexOf(src) + 1) % timelines.length];
+				next = timelines[(timelines.indexOf(src) - 1) % timelines.length];
 			}
 			saveSrc(next);
 		}