feat: ✨ swipe thru notifs

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

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",

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 {

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>

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);
 		}