feat: ✨ Swipe through timelines on mobile

package.json

@@ -51,7 +51,8 @@
 		"gulp-terser": "2.1.0",
 		"js-yaml": "4.1.0",
 		"long": "^5.2.0",
-		"seedrandom": "^3.0.5"
+		"seedrandom": "^3.0.5",
+		"tocada": "^1.0.0-beta.6"
 	},
 	"devDependencies": {
 		"@types/gulp": "4.0.9",

packages/client/src/pages/timeline.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from 'vue';
+import { defineAsyncComponent, computed, watch, ref } from 'vue';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
@@ -32,6 +32,9 @@ import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
+
+import 'tocada';
 
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
@@ -43,6 +46,16 @@ const keymap = {
 	't': focus,
 };
 
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 500;
+
+// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
+const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
 const rootEl = $ref<HTMLElement>();
 
@@ -91,7 +104,7 @@ async function chooseChannel(ev: MouseEvent): Promise<void> {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global'): void {
+function saveSrc(newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global'): void {
 	defaultStore.set('tl', {
 		...defaultStore.state.tl,
 		src: newSrc,
@@ -162,6 +175,20 @@ definePageMetadata(computed(() => ({
 	title: i18n.ts.timeline,
 	icon: src === 'local' ? 'fas fa-user-group' : src === 'social' ? 'fas fa-handshake-simple' : src === 'recommended' ? 'fas fa-signs-post' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 })));
+
+if (isMobile.value) {
+	window.addEventListener('swipeleft', () => {
+		const current = headerTabs.value.find(x => x.key === src.value);
+		const next = headerTabs.value[(headerTabs.value.indexOf(current) - 1) % headerTabs.value.length];
+		saveSrc(next.key);
+	});
+	window.addEventListener('swiperight', () => {
+		const current = headerTabs.value.find(x => x.key === src.value);
+		const next = headerTabs.value[(headerTabs.value.indexOf(current) + 1) % headerTabs.value.length];
+		saveSrc(next.key);
+	});
+}
+
 </script>
 
 <style lang="scss" scoped>

packages/client/src/ui/universal.vue

@@ -4,7 +4,7 @@
 
 	<MkStickyContainer class="contents">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
-		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
+		<main id="maincontent" style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
 			<div :class="$style.content">
 				<RouterView/>
 			</div>
@@ -71,6 +71,7 @@ import { Router } from '@/nirax';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
@@ -170,6 +171,7 @@ function top() {
 }
 
 const wallpaper = localStorage.getItem('wallpaper') != null;
+
 </script>
 
 <style lang="scss" scoped>
@@ -288,14 +290,11 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		z-index: 1000;
 		bottom: 0;
 		left: 0;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		-webkit-backdrop-filter: var(--blur, blur(32px));
+		background-color: var(--bg);
-		backdrop-filter: var(--blur, blur(32px));
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
 
 		> .button {
 			position: relative;
@@ -341,7 +340,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 			}
 
 			> * {
-				font-size: 20px;
+				font-size: 16px;
 			}
 
 			&:disabled {

yarn.lock

@@ -3236,7 +3236,7 @@ __metadata:
 "browser-image-resizer@git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.2":
   version: 2.2.1-misskey.2
   resolution: "browser-image-resizer@https://github.com/misskey-dev/browser-image-resizer.git#commit=a58834f5fe2af9f9f31ff115121aef3de6f9d416"
-  checksum: eb5ddfe7f6a2de96340ef420df9be03a75f2bfd8f568a60be22cc8f2ccdcb754105b7799cf706c09add3f9d82b7ce1c6f963842f80a85f234b26ef6bf1b8da09
+  checksum: 8ea30705704cc3f81eca23ff6cd0d5bf0d5404cd82612a52de11c0b851be511613022758babf5c202cc92b019483cfb97d7ef48cc18368a8913803fd654ac5d1
   languageName: node
   linkType: hard
 
@@ -10101,6 +10101,7 @@ __metadata:
     long: ^5.2.0
     seedrandom: ^3.0.5
     start-server-and-test: 1.14.0
+    tocada: ^1.0.0-beta.6
     typescript: 4.7.4
     vue-eslint-parser: ^9.0.2
   languageName: unknown
@@ -14374,6 +14375,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tocada@npm:^1.0.0-beta.6":
+  version: 1.0.0-beta.6
+  resolution: "tocada@npm:1.0.0-beta.6"
+  checksum: 62637d2a5ca96b592cb0aa95d1e474386b95ac52111da90a0a9348b73f5f27633fef95222b0c8ff2f6c2767dabea0a3182ea1d4d6454ef02e03efe3a364d18c7
+  languageName: node
+  linkType: hard
+
 "toidentifier@npm:1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"
@@ -14783,7 +14791,7 @@ __metadata:
 
 "typescript@patch:typescript@4.7.4#~builtin<compat/typescript>":
   version: 4.7.4
-  resolution: "typescript@patch:typescript@npm%3A4.7.4#~builtin<compat/typescript>::version=4.7.4&hash=7ad353"
+  resolution: "typescript@patch:typescript@npm%3A4.7.4#~builtin<compat/typescript>::version=4.7.4&hash=f456af"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver