feat: ⚗️ try swiper

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.118.1-calc.12.2",
+	"version": "12.118.1-calc.12.3",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/package.json

@@ -46,6 +46,7 @@
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
+		"swiper": "^8.3.2",
 		"syuilo-password-strength": "0.0.1",
 		"tesseract.js": "^2.1.5",
 		"textarea-caret": "3.1.0",

packages/client/src/pages/timeline.vue

@@ -25,7 +25,7 @@
 					{{ i18n.ts.newNoteRecived }}
 				</button>
 			</div>
-			<div class="tl _block">
+			<div v-if="isDesktop" class="tl _block">
 				<XTimeline
 					ref="tl"
 					:key="src"
@@ -35,6 +35,64 @@
 					@queue="queueUpdated"
 				/>
 			</div>
+			<div v-else class="tl _block">
+				<swiper>
+					<swiper-slide>
+						<XTimeline
+							ref="tl"
+							key="home"
+							class="tl"
+							src="home"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+					<swiper-slide>
+						<XTimeline
+							v-if="isLocalTimelineAvailable"
+							ref="tl"
+							key="local"
+							class="tl"
+							src="local"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+					<swiper-slide>
+						<XTimeline
+							v-if="isRecommendedTimelineAvailable"
+							ref="tl"
+							key="recommended"
+							class="tl"
+							src="recommended"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+					<swiper-slide>
+						<XTimeline
+							v-if="isLocalTimelineAvailable"
+							ref="tl"
+							key="social"
+							class="tl"
+							src="social"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+					<swiper-slide>
+						<XTimeline
+							v-if="isGlobalTimelineAvailable"
+							ref="tl"
+							key="global"
+							class="tl"
+							src="global"
+							:sound="true"
+							@queue="queueUpdated"
+						/>
+					</swiper-slide>
+				</swiper>
+			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -42,6 +100,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, watch, ref } from 'vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
 import { scroll } from '@/scripts/scroll';
@@ -52,6 +111,7 @@ import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import 'swiper/css';
 
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
@@ -228,7 +288,7 @@ definePageMetadata(
 	}))
 );
 
-if (isMobile.value) {
+/* if (isMobile.value) {
 	document.addEventListener('touchstart', handleTouchStart, false);
 	document.addEventListener('touchmove', handleTouchMove, false);
 
@@ -292,7 +352,7 @@ if (isMobile.value) {
 		yDown = null;
 		return;
 	}
-}
+} */
 </script>
 
 <style lang="scss" scoped>

yarn.lock

@@ -3489,6 +3489,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"calckey@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "calckey@workspace:."
+  dependencies:
+    "@bull-board/api": ^4.2.2
+    "@bull-board/ui": ^4.2.2
+    "@tensorflow/tfjs": ^3.18.0
+    "@types/gulp": 4.0.9
+    "@types/gulp-rename": 2.0.1
+    "@typescript-eslint/parser": 5.33.0
+    cross-env: 7.0.3
+    cypress: 10.4.0
+    eslint: ^8.20.0
+    execa: 5.1.1
+    gulp: 4.0.2
+    gulp-cssnano: 2.1.3
+    gulp-rename: 2.0.0
+    gulp-replace: 1.1.3
+    gulp-terser: 2.1.0
+    js-yaml: 4.1.0
+    long: ^5.2.0
+    seedrandom: ^3.0.5
+    start-server-and-test: 1.14.0
+    typescript: 4.7.4
+    vue-eslint-parser: ^9.0.2
+  languageName: unknown
+  linkType: soft
+
 "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind@npm:1.0.2"
@@ -3910,6 +3938,7 @@ __metadata:
     start-server-and-test: 1.14.0
     strict-event-emitter-types: 2.0.0
     stringz: 2.1.0
+    swiper: ^8.3.2
     syuilo-password-strength: 0.0.1
     tesseract.js: ^2.1.5
     textarea-caret: 3.1.0
@@ -5115,6 +5144,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom7@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "dom7@npm:4.0.4"
+  dependencies:
+    ssr-window: ^4.0.0
+  checksum: b38604f74e915b4d05b6634f9ff239a708c468180f498a28ff67f2a61233697d9bd7192703b788a24541c3591e7f1a6e83a2cbf70bc871a85e033f82e19abc31
+  languageName: node
+  linkType: hard
+
 "domelementtype@npm:1, domelementtype@npm:^1.3.0, domelementtype@npm:^1.3.1":
   version: 1.3.1
   resolution: "domelementtype@npm:1.3.1"
@@ -10108,34 +10146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"misskey@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "misskey@workspace:."
-  dependencies:
-    "@bull-board/api": ^4.2.2
-    "@bull-board/ui": ^4.2.2
-    "@tensorflow/tfjs": ^3.18.0
-    "@types/gulp": 4.0.9
-    "@types/gulp-rename": 2.0.1
-    "@typescript-eslint/parser": 5.33.0
-    cross-env: 7.0.3
-    cypress: 10.4.0
-    eslint: ^8.20.0
-    execa: 5.1.1
-    gulp: 4.0.2
-    gulp-cssnano: 2.1.3
-    gulp-rename: 2.0.0
-    gulp-replace: 1.1.3
-    gulp-terser: 2.1.0
-    js-yaml: 4.1.0
-    long: ^5.2.0
-    seedrandom: ^3.0.5
-    start-server-and-test: 1.14.0
-    typescript: 4.7.4
-    vue-eslint-parser: ^9.0.2
-  languageName: unknown
-  linkType: soft
-
 "mixin-deep@npm:^1.2.0":
   version: 1.3.2
   resolution: "mixin-deep@npm:1.3.2"
@@ -13692,6 +13702,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ssr-window@npm:^4.0.0, ssr-window@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "ssr-window@npm:4.0.2"
+  checksum: df182600927f4f3225224cf8c02338ea637c9750519505bbfb9a9236741a2a7ec088386fb948bca7b447b8303d9109e7dc7672e3de041c79ac2a0e03665af7d2
+  languageName: node
+  linkType: hard
+
 "ssri@npm:^9.0.0":
   version: 9.0.1
   resolution: "ssri@npm:9.0.1"
@@ -14095,6 +14112,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"swiper@npm:^8.3.2":
+  version: 8.3.2
+  resolution: "swiper@npm:8.3.2"
+  dependencies:
+    dom7: ^4.0.4
+    ssr-window: ^4.0.2
+  checksum: 881d8e4fdedc391593c9ecee1ca0fddaebd16b2f6be493f80869fbaf848761cf7e41a7d7ba4b9fe4c4d61e9bef87ba33154d22bb6a8a8503c22c49f793bef1c1
+  languageName: node
+  linkType: hard
+
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"