feat: ✨ Add setting for swipe behavior

locales/en-US.yml

@@ -914,6 +914,7 @@ recommendedInstancesDescription: "Recommended instances seperated by line breaks
 caption: "Auto Caption"
 splash: "Splash Screen"
 updateAvailable: "There's an update available!"
+swipeOnDesktop: "Allow mobile-style swiping on desktop"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."

locales/ja-JP.yml

@@ -914,6 +914,7 @@ recommendedInstancesDescription: "推奨タイムラインに表示するため
 caption: "自動キャプション"
 splash: "スプラッシュスクリーン"
 updateAvailable: "アップデートがありますよ"
+swipeOnDesktop: "デスクトップでモバイルスタイルのスワイプを可能にする"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.1-rc.1",
+	"version": "12.119.0-calc.1-rc.2",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/about.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -109,6 +109,7 @@ import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { iAmModerator } from '@/account';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/admin-file.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -95,6 +95,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { acct } from '@/filters/user';
 import { iAmAdmin, iAmModerator } from '@/account';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/channels.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -48,6 +48,7 @@ import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/explore.vue

@@ -7,7 +7,7 @@
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop')"
+				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 				@swiper="setSwiperRef"
 				@slide-change="onSlideChange"
 			>
@@ -53,6 +53,7 @@ import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import XUserList from '@/components/MkUserList.vue';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/gallery/index.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -59,6 +59,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
 import { useRouter } from '@/router';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/instance-info.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -32,14 +32,14 @@
 						<template #key>{{ i18n.ts.description }}</template>
 						<template #value>{{ instance.description }}</template>
 					</MkKeyValue>
-	
+
 					<FormSection v-if="iAmModerator">
 						<template #label>Moderation</template>
 						<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
 						<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
 						<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
 					</FormSection>
-	
+
 					<FormSection>
 						<MkKeyValue oneline style="margin: 1em 0;">
 							<template #key>{{ i18n.ts.registeredAt }}</template>
@@ -62,7 +62,7 @@
 							<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
 						</MkKeyValue>
 					</FormSection>
-	
+
 					<FormSection>
 						<MkKeyValue oneline style="margin: 1em 0;">
 							<template #key>Following (Pub)</template>
@@ -73,7 +73,7 @@
 							<template #value>{{ number(instance.followersCount) }}</template>
 						</MkKeyValue>
 					</FormSection>
-	
+
 					<FormSection>
 						<template #label>Well-known resources</template>
 						<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
@@ -151,6 +151,7 @@ import bytes from '@/filters/bytes';
 import { iAmModerator } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';

packages/client/src/pages/notifications.vue

@@ -13,7 +13,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -45,6 +45,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/pages.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -48,6 +48,7 @@ import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/settings/general.vue

@@ -27,6 +27,7 @@
 		<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
 		<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
 		<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
+		<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{ i18n.ts.swipeOnDesktop }}</FormSwitch>
 		<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{ i18n.ts.enterSendsMessage }}</FormSwitch>
 		<FormSwitch v-model="disablePagesScript" class="_formBlock">{{ i18n.ts.disablePagesScript }}</FormSwitch>
 
@@ -145,6 +146,7 @@ const enterSendsMessage = computed(defaultStore.makeGetterSetter('enterSendsMess
 const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
 const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
 const showUpdates = computed(defaultStore.makeGetterSetter('showUpdates'));
+const swipeOnDesktop = computed(defaultStore.makeGetterSetter('swipeOnDesktop'));
 
 watch(lang, () => {
 	localStorage.setItem('lang', lang.value as string);
@@ -178,6 +180,7 @@ watch([
 	overridedDeviceKind,
 	showAds,
 	showUpdates,
+	swipeOnDesktop,
 ], async () => {
 	await reloadAsk();
 });

packages/client/src/pages/settings/preferences-backups.vue

@@ -84,6 +84,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'squareAvatars',
 	'numberOfPageCache',
 	'showUpdates',
+	'swipeOnDesktop',
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	'lightTheme',

packages/client/src/pages/timeline.vue

@@ -40,7 +40,7 @@
 					:modules="[Virtual]"
 					:space-between="20"
 					:virtual="true"
-					:allow-touch-move="!(deviceKind === 'desktop')"
+					:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 					@swiper="setSwiperRef"
 					@slide-change="onSlideChange"
 				>
@@ -79,6 +79,7 @@ import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/pages/user/index.vue

@@ -6,7 +6,7 @@
 			:modules="[Virtual]"
 			:space-between="20"
 			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop')"
+			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
 			@swiper="setSwiperRef"
 			@slide-change="onSlideChange"
 		>
@@ -48,6 +48,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 import 'swiper/scss';
 import 'swiper/scss/virtual';
 

packages/client/src/store.ts

@@ -255,6 +255,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	swipeOnDesktop: {
+		where: 'device',
+		default: false,
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期