From 4a6d517a853ab2fdafe66338c783cdf9dd8bd54f Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 16 Jan 2024 21:03:49 +0900
Subject: [PATCH 01/10] =?UTF-8?q?(add)=20=E6=A8=AA=E3=82=B9=E3=83=AF?=
 =?UTF-8?q?=E3=82=A4=E3=83=97=E3=81=A7=E3=82=BF=E3=83=96=E3=82=92=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E6=9B=BF=E3=81=88=E3=82=8B=E6=A9=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |   1 +
 locales/ja-JP.yml                             |   1 +
 .../frontend/src/components/MkLRSwipe.vue     | 167 ++++++++++++++
 packages/frontend/src/pages/about.vue         | 175 +++++++--------
 packages/frontend/src/pages/announcements.vue |  61 +++---
 packages/frontend/src/pages/channel.vue       |  88 ++++----
 packages/frontend/src/pages/channels.vue      |  81 +++----
 packages/frontend/src/pages/drive.file.vue    |  21 +-
 packages/frontend/src/pages/explore.vue       |  15 +-
 .../frontend/src/pages/flash/flash-index.vue  |  45 ++--
 packages/frontend/src/pages/gallery/index.vue |  11 +-
 packages/frontend/src/pages/instance-info.vue | 204 +++++++++---------
 .../frontend/src/pages/my-clips/index.vue     |  32 +--
 packages/frontend/src/pages/notifications.vue |  32 ++-
 packages/frontend/src/pages/pages.vue         |  51 +++--
 packages/frontend/src/pages/search.vue        |  31 +--
 .../frontend/src/pages/settings/general.vue   |   2 +
 packages/frontend/src/pages/timeline.vue      |  53 +++--
 packages/frontend/src/pages/user/index.vue    |  34 +--
 packages/frontend/src/store.ts                |   4 +
 20 files changed, 698 insertions(+), 411 deletions(-)
 create mode 100644 packages/frontend/src/components/MkLRSwipe.vue

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 71134544d943..84e79abc4de2 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1204,6 +1204,7 @@ export interface Locale {
     "ranking": string;
     "lastNDays": string;
     "backToTitle": string;
+    "enableXSwipe": string;
     "_bubbleGame": {
         "howToPlay": string;
         "_howToPlay": {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 743a3ca38ea2..909670c071a7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1201,6 +1201,7 @@ replaying: "リプレイ中"
 ranking: "ランキング"
 lastNDays: "直近{n}日"
 backToTitle: "タイトルへ"
+enableXSwipe: "スワイプしてタブを切り替える"
 
 _bubbleGame:
   howToPlay: "遊び方"
diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkLRSwipe.vue
new file mode 100644
index 000000000000..ff20badab144
--- /dev/null
+++ b/packages/frontend/src/components/MkLRSwipe.vue
@@ -0,0 +1,167 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div
+	ref="rootEl"
+	:class="[$style.transitionRoot, (defaultStore.state.animation && $style.enableAnimation)]"
+	@touchstart="touchStart"
+	@touchmove="touchMove"
+	@touchend="touchEnd"
+>
+	<Transition :name="transitionName" :class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]" :style="`--swipe: ${pullDistance}px;`">
+		<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
+		<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
+		<slot></slot>
+	</Transition>
+</div>
+</template>
+<script lang="ts" setup>
+import { ref, shallowRef, computed, nextTick, watch } from 'vue';
+import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
+import { defaultStore } from '@/store.js';
+
+const rootEl = shallowRef<HTMLDivElement>();
+
+const props = defineProps<{
+	tab: string;
+	tabs: Tab[];
+}>();
+
+const emit = defineEmits<{
+	(ev: 'swiped', newKey: string, direction: 'left' | 'right'): void;
+}>();
+
+const MIN_SWIPE_DISTANCE = 50;
+const SWIPE_DISTANCE_THRESHOLD = 150;
+const MAX_SWIPE_DISTANCE = 200;
+
+let startScreenX: number | null = null;
+
+const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === props.tab));
+
+const pullDistance = ref(0);
+const isSwiping = ref(false);
+const isSwipingForClass = ref(false);
+
+function touchStart(event: TouchEvent) {
+	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+
+	if (event.touches.length !== 1) return;
+
+	startScreenX = event.touches[0].screenX;
+}
+
+function touchMove(event: TouchEvent) {
+	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+
+	if (event.touches.length !== 1) return;
+
+	if (startScreenX == null) return;
+
+	let distance = event.touches[0].screenX - startScreenX;
+
+	if (Math.abs(distance) < MIN_SWIPE_DISTANCE) return;
+	if (Math.abs(distance) > MAX_SWIPE_DISTANCE) return;
+
+	if (currentTabIndex.value === 0 || props.tabs[currentTabIndex.value - 1].onClick) {
+		distance = Math.min(distance, 0);
+	}
+	if (currentTabIndex.value === props.tabs.length - 1 || props.tabs[currentTabIndex.value + 1].onClick) {
+		distance = Math.max(distance, 0);
+	}
+	if (distance === 0) return;
+
+	isSwiping.value = true;
+	isSwipingForClass.value = true;
+	nextTick(() => {
+		// グリッチを控えるため、1.5px以上の差がないと更新しない
+		if (Math.abs(distance - pullDistance.value) < 1.5) return;
+		pullDistance.value = distance;
+	});
+}
+
+function touchEnd(event: TouchEvent) {
+	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+
+	if (event.touches.length !== 0) return;
+
+	if (startScreenX == null) return;
+
+	if (!isSwiping.value) return;
+
+	const distance = event.changedTouches[0].screenX - startScreenX;
+
+	if (Math.abs(distance) > SWIPE_DISTANCE_THRESHOLD) {
+		if (distance > 0) {
+			if (props.tabs[currentTabIndex.value - 1] && !props.tabs[currentTabIndex.value - 1].onClick) {
+				emit('swiped', props.tabs[currentTabIndex.value - 1].key, 'right');
+			}
+			console.log('swiped right');
+		} else {
+			if (props.tabs[currentTabIndex.value + 1] && !props.tabs[currentTabIndex.value + 1].onClick) {
+				emit('swiped', props.tabs[currentTabIndex.value + 1].key, 'left');
+			}
+			console.log('swiped left');
+		}
+	}
+
+	pullDistance.value = 0;
+	isSwiping.value = false;
+	setTimeout(() => {
+		isSwipingForClass.value = false;
+	}, 400);
+}
+
+const transitionName = ref<'swipeAnimationLeft' | 'swipeAnimationRight' | undefined>(undefined);
+
+watch(() => props.tab, (newTab, oldTab) => {
+	const newIndex = props.tabs.findIndex(tab => tab.key === newTab);
+	const oldIndex = props.tabs.findIndex(tab => tab.key === oldTab);
+
+	if (oldIndex >= 0 && newIndex && oldIndex < newIndex) {
+		transitionName.value = 'swipeAnimationLeft';
+	} else {
+		transitionName.value = 'swipeAnimationRight';
+	}
+
+	setTimeout(() => {
+		transitionName.value = undefined;
+	}, 400);
+});
+</script>
+
+<style lang="scss" module>
+.transitionRoot.enableAnimation {
+	display: grid;
+	overflow: clip;
+
+	.transitionChildren {
+		grid-area: 1 / 1 / 2 / 2;
+		transform: translateX(var(--swipe));
+
+		&:global(.swipeAnimationLeft-enter-active),
+		&:global(.swipeAnimationRight-enter-active),
+		&:global(.swipeAnimationLeft-leave-active),
+		&:global(.swipeAnimationRight-leave-active) {
+			transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
+		}
+
+		&:global(.swipeAnimationRight-leave-to),
+		&:global(.swipeAnimationLeft-enter-from) {
+			transform: translateX(calc(100% + 24px));
+		}
+
+		&:global(.swipeAnimationRight-enter-from),
+		&:global(.swipeAnimationLeft-leave-to) {
+			transform: translateX(calc(-100% - 24px));
+		}
+	}
+}
+
+.swiping {
+	transition: transform .2s ease-out;
+}
+</style>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index f402b26ad8e7..bb1c771ef2ea 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -6,98 +6,100 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
-		<div class="_gaps_m">
-			<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
-				<div style="overflow: clip;">
-					<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
-					<div :class="$style.bannerName">
-						<b>{{ instance.name ?? host }}</b>
+	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
+			<div class="_gaps_m">
+				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
+					<div style="overflow: clip;">
+						<img :src="instance.iconUrl ?? instance.faviconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
+						<div :class="$style.bannerName">
+							<b>{{ instance.name ?? host }}</b>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value><div v-html="instance.description"></div></template>
-			</MkKeyValue>
-
-			<FormSection>
-				<div class="_gaps_m">
-					<MkKeyValue :copy="version">
-						<template #key>Misskey</template>
-						<template #value>{{ version }}</template>
-					</MkKeyValue>
-					<div v-html="i18n.t('poweredByMisskeyDescription', { name: instance.name ?? host })">
-					</div>
-					<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
-				</div>
-			</FormSection>
-
-			<FormSection>
-				<div class="_gaps_m">
-					<FormSplit>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.administrator }}</template>
-							<template #value>{{ instance.maintainerName }}</template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.contact }}</template>
-							<template #value>{{ instance.maintainerEmail }}</template>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value><div v-html="instance.description"></div></template>
+				</MkKeyValue>
+
+				<FormSection>
+					<div class="_gaps_m">
+						<MkKeyValue :copy="version">
+							<template #key>Misskey</template>
+							<template #value>{{ version }}</template>
 						</MkKeyValue>
-					</FormSplit>
-					<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>{{ i18n.ts.impressum }}</FormLink>
-					<div class="_gaps_s">
-						<MkFolder v-if="instance.serverRules.length > 0">
-							<template #label>{{ i18n.ts.serverRules }}</template>
-
-							<ol class="_gaps_s" :class="$style.rules">
-								<li v-for="item, index in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
-							</ol>
-						</MkFolder>
-						<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.termsOfService }}</FormLink>
-						<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>{{ i18n.ts.privacyPolicy }}</FormLink>
+						<div v-html="i18n.t('poweredByMisskeyDescription', { name: instance.name ?? host })">
+						</div>
+						<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
 					</div>
-				</div>
-			</FormSection>
+				</FormSection>
 
-			<FormSuspense :p="initStats">
 				<FormSection>
-					<template #label>{{ i18n.ts.statistics }}</template>
-					<FormSplit>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.users }}</template>
-							<template #value>{{ number(stats.originalUsersCount) }}</template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts.notes }}</template>
-							<template #value>{{ number(stats.originalNotesCount) }}</template>
-						</MkKeyValue>
-					</FormSplit>
+					<div class="_gaps_m">
+						<FormSplit>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.administrator }}</template>
+								<template #value>{{ instance.maintainerName }}</template>
+							</MkKeyValue>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.contact }}</template>
+								<template #value>{{ instance.maintainerEmail }}</template>
+							</MkKeyValue>
+						</FormSplit>
+						<FormLink v-if="instance.impressumUrl" :to="instance.impressumUrl" external>{{ i18n.ts.impressum }}</FormLink>
+						<div class="_gaps_s">
+							<MkFolder v-if="instance.serverRules.length > 0">
+								<template #label>{{ i18n.ts.serverRules }}</template>
+
+								<ol class="_gaps_s" :class="$style.rules">
+									<li v-for="item, index in instance.serverRules" :key="index" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
+								</ol>
+							</MkFolder>
+							<FormLink v-if="instance.tosUrl" :to="instance.tosUrl" external>{{ i18n.ts.termsOfService }}</FormLink>
+							<FormLink v-if="instance.privacyPolicyUrl" :to="instance.privacyPolicyUrl" external>{{ i18n.ts.privacyPolicy }}</FormLink>
+						</div>
+					</div>
 				</FormSection>
-			</FormSuspense>
-
-			<FormSection>
-				<template #label>Well-known resources</template>
-				<div class="_gaps_s">
-					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-					<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-					<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-				</div>
-			</FormSection>
-		</div>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
-		<XEmojis/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
-		<XFederation/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
-		<MkInstanceStats/>
-	</MkSpacer>
+
+				<FormSuspense :p="initStats">
+					<FormSection>
+						<template #label>{{ i18n.ts.statistics }}</template>
+						<FormSplit>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.users }}</template>
+								<template #value>{{ number(stats.originalUsersCount) }}</template>
+							</MkKeyValue>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.notes }}</template>
+								<template #value>{{ number(stats.originalNotesCount) }}</template>
+							</MkKeyValue>
+						</FormSplit>
+					</FormSection>
+				</FormSuspense>
+
+				<FormSection>
+					<template #label>Well-known resources</template>
+					<div class="_gaps_s">
+						<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
+						<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
+						<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+						<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
+						<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
+					</div>
+				</FormSection>
+			</div>
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
+			<XEmojis/>
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
+			<XFederation/>
+		</MkSpacer>
+		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
+			<MkInstanceStats/>
+		</MkSpacer>
+	</MkLRSwipe>
 </MkStickyContainer>
 </template>
 
@@ -114,6 +116,7 @@ import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkInstanceStats from '@/components/MkInstanceStats.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
@@ -130,6 +133,10 @@ const props = withDefaults(defineProps<{
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
 
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 watch(tab, () => {
 	if (tab.value === 'charts') {
 		claimAchievement('viewInstanceChart');
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 5632bf7caf2b..2768ff531699 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -7,34 +7,36 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<div class="_gaps">
-			<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
-			<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
-				<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
-					<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
-					<div :class="$style.header">
-						<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
-						<span style="margin-right: 0.5em;">
-							<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
-							<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
-							<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
-							<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
-						</span>
-						<span>{{ announcement.title }}</span>
-					</div>
-					<div :class="$style.content">
-						<Mfm :text="announcement.text"/>
-						<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-						<div style="opacity: 0.7; font-size: 85%;">
-							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div :key="tab" class="_gaps">
+				<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
+				<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
+					<section v-for="announcement in items" :key="announcement.id" class="_panel" :class="$style.announcement">
+						<div v-if="announcement.forYou" :class="$style.forYou"><i class="ti ti-pin"></i> {{ i18n.ts.forYou }}</div>
+						<div :class="$style.header">
+							<span v-if="$i && !announcement.silence && !announcement.isRead" style="margin-right: 0.5em;">🆕</span>
+							<span style="margin-right: 0.5em;">
+								<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
+								<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
+								<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
+								<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
+							</span>
+							<span>{{ announcement.title }}</span>
 						</div>
-					</div>
-					<div v-if="tab !== 'past' && $i && !announcement.silence && !announcement.isRead" :class="$style.footer">
-						<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
-					</div>
-				</section>
-			</MkPagination>
-		</div>
+						<div :class="$style.content">
+							<Mfm :text="announcement.text"/>
+							<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+							<div style="opacity: 0.7; font-size: 85%;">
+								<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
+							</div>
+						</div>
+						<div v-if="tab !== 'past' && $i && !announcement.silence && !announcement.isRead" :class="$style.footer">
+							<MkButton primary @click="read(announcement)"><i class="ti ti-check"></i> {{ i18n.ts.gotIt }}</MkButton>
+						</div>
+					</section>
+				</MkPagination>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -44,6 +46,7 @@ import { ref, computed } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -70,6 +73,10 @@ const paginationEl = ref<InstanceType<typeof MkPagination>>();
 
 const tab = ref('current');
 
+function onSwipe(newKey: string) {
+	tab.value = newKey;
+}
+
 async function read(announcement) {
 	if (announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index e698098f3505..6b57c52b8026 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -7,53 +7,55 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700" :class="$style.main">
-		<div v-if="channel && tab === 'overview'" class="_gaps">
-			<div class="_panel" :class="$style.bannerContainer">
-				<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
-				<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
-				<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ti ti-star"></i></MkButton>
-				<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : undefined }" :class="$style.banner">
-					<div :class="$style.bannerStatus">
-						<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="channel && tab === 'overview'" key="overview" class="_gaps">
+				<div class="_panel" :class="$style.bannerContainer">
+					<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
+					<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
+					<MkButton v-else v-tooltip="i18n.ts.favorite" asLike class="button" rounded :class="$style.favorite" @click="favorite()"><i class="ti ti-star"></i></MkButton>
+					<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : undefined }" :class="$style.banner">
+						<div :class="$style.bannerStatus">
+							<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+							<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+						</div>
+						<div v-if="channel.isSensitive" :class="$style.sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
+						<div :class="$style.bannerFade"></div>
+					</div>
+					<div v-if="channel.description" :class="$style.description">
+						<Mfm :text="channel.description" :isNote="false"/>
 					</div>
-					<div v-if="channel.isSensitive" :class="$style.sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
-					<div :class="$style.bannerFade"></div>
-				</div>
-				<div v-if="channel.description" :class="$style.description">
-					<Mfm :text="channel.description" :isNote="false"/>
 				</div>
-			</div>
 
-			<MkFoldableSection>
-				<template #header><i class="ti ti-pin ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedNotes }}</template>
-				<div v-if="channel.pinnedNotes && channel.pinnedNotes.length > 0" class="_gaps">
-					<MkNote v-for="note in channel.pinnedNotes" :key="note.id" class="_panel" :note="note"/>
-				</div>
-			</MkFoldableSection>
-		</div>
-		<div v-if="channel && tab === 'timeline'" class="_gaps">
-			<MkInfo v-if="channel.isArchived" warn>{{ i18n.ts.thisChannelArchived }}</MkInfo>
+				<MkFoldableSection>
+					<template #header><i class="ti ti-pin ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedNotes }}</template>
+					<div v-if="channel.pinnedNotes && channel.pinnedNotes.length > 0" class="_gaps">
+						<MkNote v-for="note in channel.pinnedNotes" :key="note.id" class="_panel" :note="note"/>
+					</div>
+				</MkFoldableSection>
+			</div>
+			<div v-if="channel && tab === 'timeline'" key="timeline" class="_gaps">
+				<MkInfo v-if="channel.isArchived" warn>{{ i18n.ts.thisChannelArchived }}</MkInfo>
 
-			<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
-			<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
+				<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
+				<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
 
-			<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after" @note="miLocalStorage.setItemAsJson(`channelLastReadedAt:${channel.id}`, Date.now())"/>
-		</div>
-		<div v-else-if="tab === 'featured'">
-			<MkNotes :pagination="featuredPagination"/>
-		</div>
-		<div v-else-if="tab === 'search'">
-			<div class="_gaps">
-				<div>
-					<MkInput v-model="searchQuery" @enter="search()">
-						<template #prefix><i class="ti ti-search"></i></template>
-					</MkInput>
-					<MkButton primary rounded style="margin-top: 8px;" @click="search()">{{ i18n.ts.search }}</MkButton>
+				<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after" @note="miLocalStorage.setItemAsJson(`channelLastReadedAt:${channel.id}`, Date.now())"/>
+			</div>
+			<div v-else-if="tab === 'featured'" key="featured">
+				<MkNotes :pagination="featuredPagination"/>
+			</div>
+			<div v-else-if="tab === 'search'" key="search">
+				<div class="_gaps">
+					<div>
+						<MkInput v-model="searchQuery" @enter="search()">
+							<template #prefix><i class="ti ti-search"></i></template>
+						</MkInput>
+						<MkButton primary rounded style="margin-top: 8px;" @click="search()">{{ i18n.ts.search }}</MkButton>
+					</div>
+					<MkNotes v-if="searchPagination" :key="searchKey" :pagination="searchPagination"/>
 				</div>
-				<MkNotes v-if="searchPagination" :key="searchKey" :pagination="searchPagination"/>
 			</div>
-		</div>
+		</MkLRSwipe>
 	</MkSpacer>
 	<template #footer>
 		<div :class="$style.footer">
@@ -87,6 +89,7 @@ import { defaultStore } from '@/store.js';
 import MkNote from '@/components/MkNote.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
@@ -100,6 +103,11 @@ const props = defineProps<{
 }>();
 
 const tab = ref('overview');
+
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const channel = ref<Misskey.entities.Channel | null>(null);
 const favorited = ref(false);
 const searchQuery = ref('');
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
index 80a401eee754..a2fa9957bf7c 100644
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@@ -7,44 +7,46 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'search'">
-			<div class="_gaps">
-				<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
-					<template #prefix><i class="ti ti-search"></i></template>
-				</MkInput>
-				<MkRadios v-model="searchType" @update:modelValue="search()">
-					<option value="nameAndDescription">{{ i18n.ts._channel.nameAndDescription }}</option>
-					<option value="nameOnly">{{ i18n.ts._channel.nameOnly }}</option>
-				</MkRadios>
-				<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
+		<MkLRSwipe v-model:tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'search'" key="search">
+				<div class="_gaps">
+					<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
+						<template #prefix><i class="ti ti-search"></i></template>
+					</MkInput>
+					<MkRadios v-model="searchType" @update:modelValue="search()">
+						<option value="nameAndDescription">{{ i18n.ts._channel.nameAndDescription }}</option>
+						<option value="nameOnly">{{ i18n.ts._channel.nameOnly }}</option>
+					</MkRadios>
+					<MkButton large primary gradate rounded @click="search">{{ i18n.ts.search }}</MkButton>
+				</div>
+
+				<MkFoldableSection v-if="channelPagination">
+					<template #header>{{ i18n.ts.searchResult }}</template>
+					<MkChannelList :key="key" :pagination="channelPagination"/>
+				</MkFoldableSection>
 			</div>
-
-			<MkFoldableSection v-if="channelPagination">
-				<template #header>{{ i18n.ts.searchResult }}</template>
-				<MkChannelList :key="key" :pagination="channelPagination"/>
-			</MkFoldableSection>
-		</div>
-		<div v-if="tab === 'featured'">
-			<MkPagination v-slot="{items}" :pagination="featuredPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'favorites'">
-			<MkPagination v-slot="{items}" :pagination="favoritesPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'following'">
-			<MkPagination v-slot="{items}" :pagination="followingPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'owned'">
-			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
-			<MkPagination v-slot="{items}" :pagination="ownedPagination">
-				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
-			</MkPagination>
-		</div>
+			<div v-if="tab === 'featured'" key="featured">
+				<MkPagination v-slot="{items}" :pagination="featuredPagination">
+					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'favorites'" key="favorites">
+				<MkPagination v-slot="{items}" :pagination="favoritesPagination">
+					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'following'" key="following">
+				<MkPagination v-slot="{items}" :pagination="followingPagination">
+					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'owned'" key="owned">
+				<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+				<MkPagination v-slot="{items}" :pagination="ownedPagination">
+					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
+				</MkPagination>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -58,6 +60,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -75,6 +78,10 @@ const searchQuery = ref('');
 const searchType = ref('nameAndDescription');
 const channelPagination = ref();
 
+function onSwipe(newKey: string) {
+	tab.value = newKey;
+}
+
 onMounted(() => {
 	searchQuery.value = props.query ?? '';
 	searchType.value = props.type ?? 'nameAndDescription';
diff --git a/packages/frontend/src/pages/drive.file.vue b/packages/frontend/src/pages/drive.file.vue
index 2c1e5d20a77e..fbaec7211f96 100644
--- a/packages/frontend/src/pages/drive.file.vue
+++ b/packages/frontend/src/pages/drive.file.vue
@@ -9,13 +9,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
 	</template>
 
-	<MkSpacer v-if="tab === 'info'" :contentMax="800">
-		<XFileInfo :fileId="fileId"/>
-	</MkSpacer>
-
-	<MkSpacer v-else-if="tab === 'notes'" :contentMax="800">
-		<XNotes :fileId="fileId"/>
-	</MkSpacer>
+	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkSpacer v-if="tab === 'info'" key="info" :contentMax="800">
+			<XFileInfo :fileId="fileId"/>
+		</MkSpacer>
+
+		<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800">
+			<XNotes :fileId="fileId"/>
+		</MkSpacer>
+	</MkLRSwipe>
 </MkStickyContainer>
 </template>
 
@@ -23,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref, defineAsyncComponent } from 'vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 
 const props = defineProps<{
 	fileId: string;
@@ -33,6 +36,10 @@ const XNotes = defineAsyncComponent(() => import('./drive.file.notes.vue'));
 
 const tab = ref('info');
 
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => [{
diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue
index f068de888025..e1735e848c9b 100644
--- a/packages/frontend/src/pages/explore.vue
+++ b/packages/frontend/src/pages/explore.vue
@@ -6,17 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<div v-if="tab === 'featured'">
+	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<div v-if="tab === 'featured'" key="featured">
 			<XFeatured/>
 		</div>
-		<div v-else-if="tab === 'users'">
+		<div v-else-if="tab === 'users'" key="users">
 			<XUsers/>
 		</div>
-		<div v-else-if="tab === 'roles'">
+		<div v-else-if="tab === 'roles'" key="roles">
 			<XRoles/>
 		</div>
-	</div>
+	</MkLRSwipe>
 </MkStickyContainer>
 </template>
 
@@ -26,6 +26,7 @@ import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import XRoles from './explore.roles.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
@@ -39,6 +40,10 @@ const props = withDefaults(defineProps<{
 const tab = ref(props.initialTab);
 const tagsEl = shallowRef<InstanceType<typeof MkFoldableSection>>();
 
+function onSwipe(newKey: string) {
+	tab.value = newKey;
+}
+
 watch(() => props.tag, () => {
 	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
 });
diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue
index 785201889403..a0b8387ac6bf 100644
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@@ -7,32 +7,34 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'featured'">
-			<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
-				<div class="_gaps_s">
-					<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
-				</div>
-			</MkPagination>
-		</div>
-
-		<div v-else-if="tab === 'my'">
-			<div class="_gaps">
-				<MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
-				<MkPagination v-slot="{items}" :pagination="myFlashsPagination">
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'featured'" key="featured">
+				<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
 					<div class="_gaps_s">
 						<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
 					</div>
 				</MkPagination>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'liked'">
-			<MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
-				<div class="_gaps_s">
-					<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>
+			<div v-else-if="tab === 'my'" key="my">
+				<div class="_gaps">
+					<MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
+					<MkPagination v-slot="{items}" :pagination="myFlashsPagination">
+						<div class="_gaps_s">
+							<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
+						</div>
+					</MkPagination>
 				</div>
-			</MkPagination>
-		</div>
+			</div>
+
+			<div v-else-if="tab === 'liked'" key="liked">
+				<MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
+					<div class="_gaps_s">
+						<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>
+					</div>
+				</MkPagination>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -42,6 +44,7 @@ import { computed, ref } from 'vue';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -50,6 +53,10 @@ const router = useRouter();
 
 const tab = ref('featured');
 
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const featuredFlashsPagination = {
 	endpoint: 'flash/featured' as const,
 	noPaging: true,
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index 0198ab9700f6..9f5d50878247 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="1400">
-		<div class="_root">
-			<div v-if="tab === 'explore'">
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'explore'" key="explore">
 				<MkFoldableSection class="_margin">
 					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disableAutoLoad="true">
@@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkPagination>
 				</MkFoldableSection>
 			</div>
-			<div v-else-if="tab === 'liked'">
+			<div v-else-if="tab === 'liked'" key="liked">
 				<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
 					<div :class="$style.items">
 						<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
 					</div>
 				</MkPagination>
 			</div>
-			<div v-else-if="tab === 'my'">
+			<div v-else-if="tab === 'my'" key="my">
 				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div :class="$style.items">
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkPagination>
 			</div>
-		</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -51,6 +51,7 @@ import { watch, ref, computed } from 'vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index c8a0eeeeaa0b..83d7c70b7dc1 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -7,111 +7,113 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
-		<div v-if="tab === 'overview'" class="_gaps_m">
-			<div class="fnfelxur">
-				<img :src="faviconUrl" alt="" class="icon"/>
-				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-			</div>
-			<div style="display: flex; flex-direction: column; gap: 1em;">
-				<MkKeyValue :copy="host" oneline>
-					<template #key>Host</template>
-					<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline>
-					<template #key>{{ i18n.ts.software }}</template>
-					<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline>
-					<template #key>{{ i18n.ts.administrator }}</template>
-					<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'overview'" key="overview" class="_gaps_m">
+				<div class="fnfelxur">
+					<img :src="faviconUrl" alt="" class="icon"/>
+					<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
+				</div>
+				<div style="display: flex; flex-direction: column; gap: 1em;">
+					<MkKeyValue :copy="host" oneline>
+						<template #key>Host</template>
+						<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
+					</MkKeyValue>
+					<MkKeyValue oneline>
+						<template #key>{{ i18n.ts.software }}</template>
+						<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
+					</MkKeyValue>
+					<MkKeyValue oneline>
+						<template #key>{{ i18n.ts.administrator }}</template>
+						<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
+					</MkKeyValue>
+				</div>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value>{{ instance.description }}</template>
 				</MkKeyValue>
-			</div>
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ instance.description }}</template>
-			</MkKeyValue>
 
-			<FormSection v-if="iAmModerator">
-				<template #label>Moderation</template>
-				<div class="_gaps_s">
-					<MkSwitch v-model="suspended" :disabled="!instance" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch>
-					<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
-					<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
-					<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
-				</div>
-			</FormSection>
+				<FormSection v-if="iAmModerator">
+					<template #label>Moderation</template>
+					<div class="_gaps_s">
+						<MkSwitch v-model="suspended" :disabled="!instance" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</MkSwitch>
+						<MkSwitch v-model="isBlocked" :disabled="!meta || !instance" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
+						<MkSwitch v-model="isSilenced" :disabled="!meta || !instance" @update:modelValue="toggleSilenced">{{ i18n.ts.silenceThisInstance }}</MkSwitch>
+						<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
+					</div>
+				</FormSection>
 
-			<FormSection>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.registeredAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.updatedAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
-					<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>{{ i18n.ts.registeredAt }}</template>
+						<template #value><MkTime mode="detail" :time="instance.firstRetrievedAt"/></template>
+					</MkKeyValue>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.updatedAt }}</template>
+						<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+					</MkKeyValue>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
+						<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>
-					<template #value>{{ number(instance.followingCount) }}</template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Followers (Sub)</template>
-					<template #value>{{ number(instance.followersCount) }}</template>
-				</MkKeyValue>
-			</FormSection>
+				<FormSection>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>Following (Pub)</template>
+						<template #value>{{ number(instance.followingCount) }}</template>
+					</MkKeyValue>
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>Followers (Sub)</template>
+						<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>
-				<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
-				<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
-				<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
-				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
-			</FormSection>
-		</div>
-		<div v-else-if="tab === 'chart'" class="_gaps_m">
-			<div class="cmhjzshl">
-				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
-				</div>
-				<div class="charts">
-					<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-					<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+				<FormSection>
+					<template #label>Well-known resources</template>
+					<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
+					<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
+					<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
+					<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
+					<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
+				</FormSection>
+			</div>
+			<div v-else-if="tab === 'chart'" key="chart" class="_gaps_m">
+				<div class="cmhjzshl">
+					<div class="selects">
+						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+							<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
+							<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
+							<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
+							<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
+							<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
+							<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
+							<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
+							<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
+							<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
+							<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
+							<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
+						</MkSelect>
+					</div>
+					<div class="charts">
+						<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
+						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+						<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
+						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+					</div>
 				</div>
 			</div>
-		</div>
-		<div v-else-if="tab === 'users'" class="_gaps_m">
-			<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
-					<MkUserCardMini :user="user"/>
-				</MkA>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'raw'" class="_gaps_m">
-			<MkObjectView tall :value="instance">
-			</MkObjectView>
-		</div>
+			<div v-else-if="tab === 'users'" key="users" class="_gaps_m">
+				<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
+					<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
+						<MkUserCardMini :user="user"/>
+					</MkA>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'raw'" key="raw" class="_gaps_m">
+				<MkObjectView tall :value="instance">
+				</MkObjectView>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -136,6 +138,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 import { dateString } from '@/filters/date.js';
 
@@ -144,6 +147,11 @@ const props = defineProps<{
 }>();
 
 const tab = ref('overview');
+
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const chartSrc = ref('instance-requests');
 const meta = ref<Misskey.entities.AdminMetaResponse | null>(null);
 const instance = ref<Misskey.entities.FederationInstance | null>(null);
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index 850222708e37..7d0900b7770e 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -7,20 +7,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'my'" class="_gaps">
-			<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps">
-				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`">
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'my'" key="my" class="_gaps">
+				<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+				<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps">
+					<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`">
+						<MkClipPreview :clip="item"/>
+					</MkA>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'favorites'" key="favorites" class="_gaps">
+				<MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`">
 					<MkClipPreview :clip="item"/>
 				</MkA>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'favorites'" class="_gaps">
-			<MkA v-for="item in favorites" :key="item.id" :to="`/clips/${item.id}`">
-				<MkClipPreview :clip="item"/>
-			</MkA>
-		</div>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { clipsCache } from '@/cache.js';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 
 const pagination = {
 	endpoint: 'clips/list' as const,
@@ -44,6 +47,11 @@ const pagination = {
 };
 
 const tab = ref('my');
+
+function onSwipe(tab: string) {
+	tab.value = tab;
+}
+
 const favorites = ref<Misskey.entities.Clip[] | null>(null);
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue
index d57bda41b5ac..693bf9650b1a 100644
--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@@ -7,15 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<div v-if="tab === 'all'">
-			<XNotifications class="notifications" :excludeTypes="excludeTypes"/>
-		</div>
-		<div v-else-if="tab === 'mentions'">
-			<MkNotes :pagination="mentionsPagination"/>
-		</div>
-		<div v-else-if="tab === 'directNotes'">
-			<MkNotes :pagination="directNotesPagination"/>
-		</div>
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'all'" key="all">
+				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
+			</div>
+			<div v-else-if="tab === 'mentions'" key="mention">
+				<MkNotes :pagination="mentionsPagination"/>
+			</div>
+			<div v-else-if="tab === 'directNotes'" key="directNotes">
+				<MkNotes :pagination="directNotesPagination"/>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -24,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import XNotifications from '@/components/MkNotifications.vue';
 import MkNotes from '@/components/MkNotes.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -46,6 +49,10 @@ const directNotesPagination = {
 	},
 };
 
+function onSwipe(newKey: string) {
+	tab.value = newKey;
+}
+
 function setFilter(ev) {
 	const typeItems = notificationTypes.map(t => ({
 		text: i18n.t(`_notification._types.${t}`),
@@ -96,3 +103,10 @@ definePageMetadata(computed(() => ({
 	icon: 'ti ti-bell',
 })));
 </script>
+
+<style module lang="scss">
+.notifications {
+	border-radius: var(--radius);
+	overflow: clip;
+}
+</style>
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index 22ab9ced092f..3a541de1c35a 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -7,30 +7,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'featured'">
-			<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
-				<div class="_gaps">
-					<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
-				</div>
-			</MkPagination>
-		</div>
+		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<div v-if="tab === 'featured'" key="featured">
+				<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+					</div>
+				</MkPagination>
+			</div>
 
-		<div v-else-if="tab === 'my'" class="_gaps">
-			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
-			<MkPagination v-slot="{items}" :pagination="myPagesPagination">
-				<div class="_gaps">
-					<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
-				</div>
-			</MkPagination>
-		</div>
+			<div v-else-if="tab === 'my'" key="my" class="_gaps">
+				<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+				<MkPagination v-slot="{items}" :pagination="myPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
+					</div>
+				</MkPagination>
+			</div>
 
-		<div v-else-if="tab === 'liked'">
-			<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
-				<div class="_gaps">
-					<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
-				</div>
-			</MkPagination>
-		</div>
+			<div v-else-if="tab === 'liked'" key="liked">
+				<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
+					<div class="_gaps">
+						<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>
+					</div>
+				</MkPagination>
+			</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -40,6 +42,7 @@ import { computed, ref } from 'vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -48,6 +51,10 @@ const router = useRouter();
 
 const tab = ref('featured');
 
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const featuredPagesPagination = {
 	endpoint: 'pages/featured' as const,
 	noPaging: true,
diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue
index 9d5e5697ceca..00d21f720e2e 100644
--- a/packages/frontend/src/pages/search.vue
+++ b/packages/frontend/src/pages/search.vue
@@ -7,18 +7,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 
-	<MkSpacer v-if="tab === 'note'" :contentMax="800">
-		<div v-if="notesSearchAvailable">
-			<XNote/>
-		</div>
-		<div v-else>
-			<MkInfo warn>{{ i18n.ts.notesSearchNotAvailable }}</MkInfo>
-		</div>
-	</MkSpacer>
-
-	<MkSpacer v-else-if="tab === 'user'" :contentMax="800">
-		<XUser/>
-	</MkSpacer>
+	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkSpacer v-if="tab === 'note'" key="note" :contentMax="800">
+			<div v-if="notesSearchAvailable">
+				<XNote/>
+			</div>
+			<div v-else>
+				<MkInfo warn>{{ i18n.ts.notesSearchNotAvailable }}</MkInfo>
+			</div>
+		</MkSpacer>
+
+		<MkSpacer v-else-if="tab === 'user'" key="user" :contentMax="800">
+			<XUser/>
+		</MkSpacer>
+	</MkLRSwipe>
 </MkStickyContainer>
 </template>
 
@@ -29,12 +31,17 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
 import MkInfo from '@/components/MkInfo.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 
 const XNote = defineAsyncComponent(() => import('./search.note.vue'));
 const XUser = defineAsyncComponent(() => import('./search.user.vue'));
 
 const tab = ref('note');
 
+function onSwipe(newKey: string) {
+	tab.value = newKey;
+}
+
 const notesSearchAvailable = (($i == null && instance.policies.canSearchNotes) || ($i != null && $i.policies.canSearchNotes));
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 607aaec52191..d1b7423e2c0a 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -155,6 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
 				<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
 				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
+				<MkSwitch v-model="enableXSwipe">{{ i18n.ts.enableXSwipe }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -296,6 +297,7 @@ const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
 const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
+const enableXSwipe = computed(defaultStore.makeGetterSetter('enableXSwipe'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 6fe8963f5162..0a62b29cfb48 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -7,27 +7,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
 	<MkSpacer :contentMax="800">
-		<div ref="rootEl" v-hotkey.global="keymap">
-			<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
-				{{ i18n.ts._timelineDescription[src] }}
-			</MkInfo>
-			<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
-
-			<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-			<div :class="$style.tl">
-				<MkTimeline
-					ref="tlComponent"
-					:key="src + withRenotes + withReplies + onlyFiles"
-					:src="src.split(':')[0]"
-					:list="src.split(':')[1]"
-					:withRenotes="withRenotes"
-					:withReplies="withReplies"
-					:onlyFiles="onlyFiles"
-					:sound="true"
-					@queue="queueUpdated"
-				/>
+		<MkLRSwipe :tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" @swiped="onSwipe">
+			<div :key="src + withRenotes + withReplies + onlyFiles" ref="rootEl" v-hotkey.global="keymap">
+				<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
+					{{ i18n.ts._timelineDescription[src] }}
+				</MkInfo>
+				<MkPostForm v-if="defaultStore.reactiveState.showFixedPostForm.value" :class="$style.postForm" class="post-form _panel" fixed style="margin-bottom: var(--margin);"/>
+				<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
+				<div :class="$style.tl">
+					<MkTimeline
+						ref="tlComponent"
+						:key="src + withRenotes + withReplies + onlyFiles"
+						:src="src.split(':')[0]"
+						:list="src.split(':')[1]"
+						:withRenotes="withRenotes"
+						:withReplies="withReplies"
+						:onlyFiles="onlyFiles"
+						:sound="true"
+						@queue="queueUpdated"
+					/>
+				</div>
 			</div>
-		</div>
+		</MkLRSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -38,6 +39,7 @@ import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@@ -69,7 +71,16 @@ const withRenotes = ref(true);
 const withReplies = ref($i ? defaultStore.state.tlWithReplies : false);
 const onlyFiles = ref(false);
 
-watch(src, () => queue.value = 0);
+function onSwipe(newKey: string): void {
+	const index = headerTabs.value.findIndex(tab => tab.key === newKey);
+	if (index === -1) return;
+	const tab = headerTabs.value[index];
+	src.value = tab.key;
+}
+
+watch(src, () => {
+	queue.value = 0;
+});
 
 watch(withReplies, (x) => {
 	if ($i) defaultStore.set('tlWithReplies', x);
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 95869e7b8cf6..5f3318566346 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -8,19 +8,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div>
 		<div v-if="user">
-			<XHome v-if="tab === 'home'" :user="user"/>
-			<MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
-				<XTimeline :user="user"/>
-			</MkSpacer>
-			<XActivity v-else-if="tab === 'activity'" :user="user"/>
-			<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
-			<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-			<XClips v-else-if="tab === 'clips'" :user="user"/>
-			<XLists v-else-if="tab === 'lists'" :user="user"/>
-			<XPages v-else-if="tab === 'pages'" :user="user"/>
-			<XFlashs v-else-if="tab === 'flashs'" :user="user"/>
-			<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			<XRaw v-else-if="tab === 'raw'" :user="user"/>
+			<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+				<XHome v-if="tab === 'home'" key="home" :user="user"/>
+				<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800" style="padding-top: 0">
+					<XTimeline :user="user"/>
+				</MkSpacer>
+				<XActivity v-else-if="tab === 'activity'" key="activity" :user="user"/>
+				<XAchievements v-else-if="tab === 'achievements'" key="achievements" :user="user"/>
+				<XReactions v-else-if="tab === 'reactions'" key="reactions" :user="user"/>
+				<XClips v-else-if="tab === 'clips'" key="clips" :user="user"/>
+				<XLists v-else-if="tab === 'lists'" key="lists" :user="user"/>
+				<XPages v-else-if="tab === 'pages'" key="pages" :user="user"/>
+				<XFlashs v-else-if="tab === 'flashs'" key="flashs" :user="user"/>
+				<XGallery v-else-if="tab === 'gallery'" key="gallery" :user="user"/>
+				<XRaw v-else-if="tab === 'raw'" key="raw" :user="user"/>
+			</MkLRSwipe>
 		</div>
 		<MkError v-else-if="error" @retry="fetchUser()"/>
 		<MkLoading v-else/>
@@ -36,6 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
+import MkLRSwipe from '@/components/MkLRSwipe.vue';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
@@ -57,6 +60,11 @@ const props = withDefaults(defineProps<{
 });
 
 const tab = ref(props.page);
+
+function onSwipe(key: string) {
+	tab.value = key;
+}
+
 const user = ref<null | Misskey.entities.UserDetailed>(null);
 const error = ref<any>(null);
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index e3a85377d852..7eee999daf94 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -427,6 +427,10 @@ export const defaultStore = markRaw(new Storage('base', {
 			sfxVolume: 1,
 		},
 	},
+	enableXSwipe: {
+		where: 'device',
+		default: true,
+	},
 
 	sound_masterVolume: {
 		where: 'device',

From 36de5438bcbf6f245c05ebea4b4e7d811ec3edfb Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 16 Jan 2024 21:08:02 +0900
Subject: [PATCH 02/10] Change Changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 945b6ac1ad16..c891ed2971d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
 - Feat: 音声・映像プレイヤーを追加
 - Feat: 絵文字の詳細ダイアログを追加
 - Feat: 枠線をつけるMFM`$[border.width=1,style=solid,color=fff,radius=0 ...]`を追加
+- Feat: スワイプでタブを切り替えられるように
 - Enhance: ハッシュタグ入力時に、本文の末尾の行に何も書かれていない場合は新たにスペースを追加しないように
 - Enhance: チャンネルノートのピン留めをノートのメニューからできるように
 - Enhance: 管理者の場合はAPI tokenの発行画面で管理機能に関する権限を付与できるように

From e7939e06ff476cdb5a6ef44dcb896ff6e45c4140 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 18:03:35 +0900
Subject: [PATCH 03/10] =?UTF-8?q?y=E6=96=B9=E5=90=91=E3=81=AE=E7=A7=BB?=
 =?UTF-8?q?=E5=8B=95=E3=81=8C=E4=B8=80=E5=AE=9A=E9=87=8F=E3=82=92=E8=B6=85?=
 =?UTF-8?q?=E3=81=88=E3=81=9F=E3=82=89=E3=82=B9=E3=83=AF=E3=82=A4=E3=83=97?=
 =?UTF-8?q?=E3=82=92=E4=B8=AD=E6=96=AD=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkLRSwipe.vue     | 53 +++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkLRSwipe.vue
index ff20badab144..a3a58e47aa1c 100644
--- a/packages/frontend/src/components/MkLRSwipe.vue
+++ b/packages/frontend/src/components/MkLRSwipe.vue
@@ -34,17 +34,31 @@ const emit = defineEmits<{
 	(ev: 'swiped', newKey: string, direction: 'left' | 'right'): void;
 }>();
 
+// ▼ しきい値 ▼ //
+
+// スワイプと判定される最小の距離
 const MIN_SWIPE_DISTANCE = 50;
+
+// スワイプ時の動作を発火する最小の距離
 const SWIPE_DISTANCE_THRESHOLD = 150;
+
+// スワイプを中断するY方向の移動距離
+const SWIPE_ABORT_Y_THRESHOLD = 50;
+
+// スワイプできる最大の距離
 const MAX_SWIPE_DISTANCE = 200;
 
+// ▲ しきい値 ▲ //
+
 let startScreenX: number | null = null;
+let startScreenY: number | null = null;
 
 const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === props.tab));
 
 const pullDistance = ref(0);
 const isSwiping = ref(false);
 const isSwipingForClass = ref(false);
+let swipeAborted = false;
 
 function touchStart(event: TouchEvent) {
 	if (!defaultStore.reactiveState.enableXSwipe.value) return;
@@ -52,6 +66,7 @@ function touchStart(event: TouchEvent) {
 	if (event.touches.length !== 1) return;
 
 	startScreenX = event.touches[0].screenX;
+	startScreenY = event.touches[0].screenY;
 }
 
 function touchMove(event: TouchEvent) {
@@ -59,31 +74,51 @@ function touchMove(event: TouchEvent) {
 
 	if (event.touches.length !== 1) return;
 
-	if (startScreenX == null) return;
+	if (startScreenX == null || startScreenY == null) return;
+
+	if (swipeAborted) return;
 
-	let distance = event.touches[0].screenX - startScreenX;
+	let distanceX = event.touches[0].screenX - startScreenX;
+	let distanceY = event.touches[0].screenY - startScreenY;
 
-	if (Math.abs(distance) < MIN_SWIPE_DISTANCE) return;
-	if (Math.abs(distance) > MAX_SWIPE_DISTANCE) return;
+	if (Math.abs(distanceY) > SWIPE_ABORT_Y_THRESHOLD) {
+		swipeAborted = true;
+
+		pullDistance.value = 0;
+		isSwiping.value = false;
+		setTimeout(() => {
+			isSwipingForClass.value = false;
+		}, 400);
+
+		return;
+	}
+
+	if (Math.abs(distanceX) < MIN_SWIPE_DISTANCE) return;
+	if (Math.abs(distanceX) > MAX_SWIPE_DISTANCE) return;
 
 	if (currentTabIndex.value === 0 || props.tabs[currentTabIndex.value - 1].onClick) {
-		distance = Math.min(distance, 0);
+		distanceX = Math.min(distanceX, 0);
 	}
 	if (currentTabIndex.value === props.tabs.length - 1 || props.tabs[currentTabIndex.value + 1].onClick) {
-		distance = Math.max(distance, 0);
+		distanceX = Math.max(distanceX, 0);
 	}
-	if (distance === 0) return;
+	if (distanceX === 0) return;
 
 	isSwiping.value = true;
 	isSwipingForClass.value = true;
 	nextTick(() => {
 		// グリッチを控えるため、1.5px以上の差がないと更新しない
-		if (Math.abs(distance - pullDistance.value) < 1.5) return;
-		pullDistance.value = distance;
+		if (Math.abs(distanceX - pullDistance.value) < 1.5) return;
+		pullDistance.value = distanceX;
 	});
 }
 
 function touchEnd(event: TouchEvent) {
+	if (swipeAborted) {
+		swipeAborted = false;
+		return;
+	}
+
 	if (!defaultStore.reactiveState.enableXSwipe.value) return;
 
 	if (event.touches.length !== 0) return;

From 5ee3c92f2d424b10e9d5e562eafe864f79a02647 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 18:09:18 +0900
Subject: [PATCH 04/10] Update swipe distance thresholds

---
 packages/frontend/src/components/MkLRSwipe.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkLRSwipe.vue
index a3a58e47aa1c..e94fb3890b43 100644
--- a/packages/frontend/src/components/MkLRSwipe.vue
+++ b/packages/frontend/src/components/MkLRSwipe.vue
@@ -40,13 +40,13 @@ const emit = defineEmits<{
 const MIN_SWIPE_DISTANCE = 50;
 
 // スワイプ時の動作を発火する最小の距離
-const SWIPE_DISTANCE_THRESHOLD = 150;
+const SWIPE_DISTANCE_THRESHOLD = 125;
 
 // スワイプを中断するY方向の移動距離
 const SWIPE_ABORT_Y_THRESHOLD = 50;
 
 // スワイプできる最大の距離
-const MAX_SWIPE_DISTANCE = 200;
+const MAX_SWIPE_DISTANCE = 150;
 
 // ▲ しきい値 ▲ //
 

From ff41cbb64a50d4d8542d159012e202fb0a5668fd Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 18:10:43 +0900
Subject: [PATCH 05/10] Remove console.log

---
 packages/frontend/src/components/MkLRSwipe.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkLRSwipe.vue
index e94fb3890b43..1e47d384990d 100644
--- a/packages/frontend/src/components/MkLRSwipe.vue
+++ b/packages/frontend/src/components/MkLRSwipe.vue
@@ -134,12 +134,10 @@ function touchEnd(event: TouchEvent) {
 			if (props.tabs[currentTabIndex.value - 1] && !props.tabs[currentTabIndex.value - 1].onClick) {
 				emit('swiped', props.tabs[currentTabIndex.value - 1].key, 'right');
 			}
-			console.log('swiped right');
 		} else {
 			if (props.tabs[currentTabIndex.value + 1] && !props.tabs[currentTabIndex.value + 1].onClick) {
 				emit('swiped', props.tabs[currentTabIndex.value + 1].key, 'left');
 			}
-			console.log('swiped left');
 		}
 	}
 

From 88e5ba84248fb5977120ebeb5e26b7c6e89a1068 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 19:33:48 +0900
Subject: [PATCH 06/10] adjust threshold

---
 packages/frontend/src/components/MkLRSwipe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkLRSwipe.vue
index 1e47d384990d..5f90da0bb4d2 100644
--- a/packages/frontend/src/components/MkLRSwipe.vue
+++ b/packages/frontend/src/components/MkLRSwipe.vue
@@ -43,7 +43,7 @@ const MIN_SWIPE_DISTANCE = 50;
 const SWIPE_DISTANCE_THRESHOLD = 125;
 
 // スワイプを中断するY方向の移動距離
-const SWIPE_ABORT_Y_THRESHOLD = 50;
+const SWIPE_ABORT_Y_THRESHOLD = 75;
 
 // スワイプできる最大の距離
 const MAX_SWIPE_DISTANCE = 150;

From 870da21f243ca38b4df4125327a413b0f6385495 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 22:07:59 +0900
Subject: [PATCH 07/10] rename, use v-model

---
 locales/index.d.ts                                  |  2 +-
 locales/ja-JP.yml                                   |  2 +-
 .../{MkLRSwipe.vue => MkHorizontalSwipe.vue}        | 10 +++++++---
 packages/frontend/src/pages/about.vue               | 10 +++-------
 packages/frontend/src/pages/announcements.vue       | 10 +++-------
 packages/frontend/src/pages/channel.vue             | 10 +++-------
 packages/frontend/src/pages/channels.vue            | 10 +++-------
 packages/frontend/src/pages/drive.file.vue          | 10 +++-------
 packages/frontend/src/pages/explore.vue             | 10 +++-------
 packages/frontend/src/pages/flash/flash-index.vue   | 10 +++-------
 packages/frontend/src/pages/gallery/index.vue       |  6 +++---
 packages/frontend/src/pages/instance-info.vue       | 10 +++-------
 packages/frontend/src/pages/my-clips/index.vue      | 10 +++-------
 packages/frontend/src/pages/notifications.vue       | 10 +++-------
 packages/frontend/src/pages/pages.vue               | 10 +++-------
 packages/frontend/src/pages/search.vue              | 10 +++-------
 packages/frontend/src/pages/settings/general.vue    |  4 ++--
 packages/frontend/src/pages/timeline.vue            | 13 +++----------
 packages/frontend/src/pages/user/index.vue          | 10 +++-------
 packages/frontend/src/store.ts                      |  2 +-
 20 files changed, 57 insertions(+), 112 deletions(-)
 rename packages/frontend/src/components/{MkLRSwipe.vue => MkHorizontalSwipe.vue} (95%)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 84e79abc4de2..a659e790cc49 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1204,7 +1204,7 @@ export interface Locale {
     "ranking": string;
     "lastNDays": string;
     "backToTitle": string;
-    "enableXSwipe": string;
+    "enableHorizontalSwipe": string;
     "_bubbleGame": {
         "howToPlay": string;
         "_howToPlay": {
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 909670c071a7..8749a5f49f09 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1201,7 +1201,7 @@ replaying: "リプレイ中"
 ranking: "ランキング"
 lastNDays: "直近{n}日"
 backToTitle: "タイトルへ"
-enableXSwipe: "スワイプしてタブを切り替える"
+enableHorizontalSwipe: "スワイプしてタブを切り替える"
 
 _bubbleGame:
   howToPlay: "遊び方"
diff --git a/packages/frontend/src/components/MkLRSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
similarity index 95%
rename from packages/frontend/src/components/MkLRSwipe.vue
rename to packages/frontend/src/components/MkHorizontalSwipe.vue
index 5f90da0bb4d2..c43e83d0caac 100644
--- a/packages/frontend/src/components/MkLRSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -25,8 +25,10 @@ import { defaultStore } from '@/store.js';
 
 const rootEl = shallowRef<HTMLDivElement>();
 
+// eslint-disable-next-line no-undef
+const tabModel = defineModel<string>('tab');
+
 const props = defineProps<{
-	tab: string;
 	tabs: Tab[];
 }>();
 
@@ -53,7 +55,7 @@ const MAX_SWIPE_DISTANCE = 150;
 let startScreenX: number | null = null;
 let startScreenY: number | null = null;
 
-const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === props.tab));
+const currentTabIndex = computed(() => props.tabs.findIndex(tab => tab.key === tabModel.value));
 
 const pullDistance = ref(0);
 const isSwiping = ref(false);
@@ -132,10 +134,12 @@ function touchEnd(event: TouchEvent) {
 	if (Math.abs(distance) > SWIPE_DISTANCE_THRESHOLD) {
 		if (distance > 0) {
 			if (props.tabs[currentTabIndex.value - 1] && !props.tabs[currentTabIndex.value - 1].onClick) {
+				tabModel.value = props.tabs[currentTabIndex.value - 1].key;
 				emit('swiped', props.tabs[currentTabIndex.value - 1].key, 'right');
 			}
 		} else {
 			if (props.tabs[currentTabIndex.value + 1] && !props.tabs[currentTabIndex.value + 1].onClick) {
+				tabModel.value = props.tabs[currentTabIndex.value + 1].key;
 				emit('swiped', props.tabs[currentTabIndex.value + 1].key, 'left');
 			}
 		}
@@ -150,7 +154,7 @@ function touchEnd(event: TouchEvent) {
 
 const transitionName = ref<'swipeAnimationLeft' | 'swipeAnimationRight' | undefined>(undefined);
 
-watch(() => props.tab, (newTab, oldTab) => {
+watch(tabModel, (newTab, oldTab) => {
 	const newIndex = props.tabs.findIndex(tab => tab.key === newTab);
 	const oldIndex = props.tabs.findIndex(tab => tab.key === oldTab);
 
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
index bb1c771ef2ea..4ba1b6da768d 100644
--- a/packages/frontend/src/pages/about.vue
+++ b/packages/frontend/src/pages/about.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
 			<div class="_gaps_m">
 				<div :class="$style.banner" :style="{ backgroundImage: `url(${ instance.bannerUrl })` }">
@@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
 			<MkInstanceStats/>
 		</MkSpacer>
-	</MkLRSwipe>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
 
@@ -116,7 +116,7 @@ import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import number from '@/filters/number.js';
 import { i18n } from '@/i18n.js';
@@ -133,10 +133,6 @@ const props = withDefaults(defineProps<{
 const stats = ref<Misskey.entities.StatsResponse | null>(null);
 const tab = ref(props.initialTab);
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 watch(tab, () => {
 	if (tab.value === 'charts') {
 		claimAchievement('viewInstanceChart');
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
index 2768ff531699..c31c6d090326 100644
--- a/packages/frontend/src/pages/announcements.vue
+++ b/packages/frontend/src/pages/announcements.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div :key="tab" class="_gaps">
 				<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
 				<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</section>
 				</MkPagination>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -46,7 +46,7 @@ import { ref, computed } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -73,10 +73,6 @@ const paginationEl = ref<InstanceType<typeof MkPagination>>();
 
 const tab = ref('current');
 
-function onSwipe(newKey: string) {
-	tab.value = newKey;
-}
-
 async function read(announcement) {
 	if (announcement.needConfirmationToRead) {
 		const confirm = await os.confirm({
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index a55ea0af7d87..4cdf2eea7d65 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700" :class="$style.main">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="channel && tab === 'overview'" key="overview" class="_gaps">
 				<div class="_panel" :class="$style.bannerContainer">
 					<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkNotes v-if="searchPagination" :key="searchKey" :pagination="searchPagination"/>
 				</div>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 	<template #footer>
 		<div :class="$style.footer">
@@ -89,7 +89,7 @@ import { defaultStore } from '@/store.js';
 import MkNote from '@/components/MkNote.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { PageHeaderItem } from '@/types/page-header.js';
 import { isSupportShare } from '@/scripts/navigator.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
@@ -104,10 +104,6 @@ const props = defineProps<{
 
 const tab = ref('overview');
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const channel = ref<Misskey.entities.Channel | null>(null);
 const favorited = ref(false);
 const searchQuery = ref('');
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
index a2fa9957bf7c..0b35ac0ece9c 100644
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<MkLRSwipe v-model:tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'search'" key="search">
 				<div class="_gaps">
 					<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkChannelPreview v-for="channel in items" :key="channel.id" class="_margin" :channel="channel"/>
 				</MkPagination>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -60,7 +60,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -78,10 +78,6 @@ const searchQuery = ref('');
 const searchType = ref('nameAndDescription');
 const channelPagination = ref();
 
-function onSwipe(newKey: string) {
-	tab.value = newKey;
-}
-
 onMounted(() => {
 	searchQuery.value = props.query ?? '';
 	searchType.value = props.type ?? 'nameAndDescription';
diff --git a/packages/frontend/src/pages/drive.file.vue b/packages/frontend/src/pages/drive.file.vue
index fbaec7211f96..6a9e9079637e 100644
--- a/packages/frontend/src/pages/drive.file.vue
+++ b/packages/frontend/src/pages/drive.file.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/>
 	</template>
 
-	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'info'" key="info" :contentMax="800">
 			<XFileInfo :fileId="fileId"/>
 		</MkSpacer>
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800">
 			<XNotes :fileId="fileId"/>
 		</MkSpacer>
-	</MkLRSwipe>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
 
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref, defineAsyncComponent } from 'vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const props = defineProps<{
 	fileId: string;
@@ -36,10 +36,6 @@ const XNotes = defineAsyncComponent(() => import('./drive.file.notes.vue'));
 
 const tab = ref('info');
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => [{
diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue
index e1735e848c9b..1b80014366c9 100644
--- a/packages/frontend/src/pages/explore.vue
+++ b/packages/frontend/src/pages/explore.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<div v-if="tab === 'featured'" key="featured">
 			<XFeatured/>
 		</div>
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-else-if="tab === 'roles'" key="roles">
 			<XRoles/>
 		</div>
-	</MkLRSwipe>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
 
@@ -26,7 +26,7 @@ import XFeatured from './explore.featured.vue';
 import XUsers from './explore.users.vue';
 import XRoles from './explore.roles.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 
@@ -40,10 +40,6 @@ const props = withDefaults(defineProps<{
 const tab = ref(props.initialTab);
 const tagsEl = shallowRef<InstanceType<typeof MkFoldableSection>>();
 
-function onSwipe(newKey: string) {
-	tab.value = newKey;
-}
-
 watch(() => props.tag, () => {
 	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
 });
diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue
index a0b8387ac6bf..53510ea232f8 100644
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'featured'" key="featured">
 				<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
 					<div class="_gaps_s">
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkPagination>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -44,7 +44,7 @@ import { computed, ref } from 'vue';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -53,10 +53,6 @@ const router = useRouter();
 
 const tab = ref('featured');
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const featuredFlashsPagination = {
 	endpoint: 'flash/featured' as const,
 	noPaging: true,
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index 9f5d50878247..9749888fe952 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="1400">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'explore'" key="explore">
 				<MkFoldableSection class="_margin">
 					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkPagination>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -51,7 +51,7 @@ import { watch, ref, computed } from 'vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/global/router/supplier.js';
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
index 83d7c70b7dc1..4211dc0d8734 100644
--- a/packages/frontend/src/pages/instance-info.vue
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'overview'" key="overview" class="_gaps_m">
 				<div class="fnfelxur">
 					<img :src="faviconUrl" alt="" class="icon"/>
@@ -113,7 +113,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkObjectView tall :value="instance">
 				</MkObjectView>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -138,7 +138,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
 import { dateString } from '@/filters/date.js';
 
@@ -148,10 +148,6 @@ const props = defineProps<{
 
 const tab = ref('overview');
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const chartSrc = ref('instance-requests');
 const meta = ref<Misskey.entities.AdminMetaResponse | null>(null);
 const instance = ref<Misskey.entities.FederationInstance | null>(null);
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
index 7d0900b7770e..468e46838b45 100644
--- a/packages/frontend/src/pages/my-clips/index.vue
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'my'" key="my" class="_gaps">
 				<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkClipPreview :clip="item"/>
 				</MkA>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -38,7 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { clipsCache } from '@/cache.js';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const pagination = {
 	endpoint: 'clips/list' as const,
@@ -48,10 +48,6 @@ const pagination = {
 
 const tab = ref('my');
 
-function onSwipe(tab: string) {
-	tab.value = tab;
-}
-
 const favorites = ref<Misskey.entities.Clip[] | null>(null);
 
 const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue
index 693bf9650b1a..8913a89adbdf 100644
--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'all'" key="all">
 				<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
 			</div>
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-else-if="tab === 'directNotes'" key="directNotes">
 				<MkNotes :pagination="directNotesPagination"/>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, ref } from 'vue';
 import XNotifications from '@/components/MkNotifications.vue';
 import MkNotes from '@/components/MkNotes.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
@@ -49,10 +49,6 @@ const directNotesPagination = {
 	},
 };
 
-function onSwipe(newKey: string) {
-	tab.value = newKey;
-}
-
 function setFilter(ev) {
 	const typeItems = notificationTypes.map(t => ({
 		text: i18n.t(`_notification._types.${t}`),
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
index 3a541de1c35a..8b57b1af9f18 100644
--- a/packages/frontend/src/pages/pages.vue
+++ b/packages/frontend/src/pages/pages.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'featured'" key="featured">
 				<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
 					<div class="_gaps">
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</MkPagination>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -42,7 +42,7 @@ import { computed, ref } from 'vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { useRouter } from '@/global/router/supplier.js';
@@ -51,10 +51,6 @@ const router = useRouter();
 
 const tab = ref('featured');
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const featuredPagesPagination = {
 	endpoint: 'pages/featured' as const,
 	noPaging: true,
diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue
index 00d21f720e2e..b68de805cfd9 100644
--- a/packages/frontend/src/pages/search.vue
+++ b/packages/frontend/src/pages/search.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 
-	<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+	<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 		<MkSpacer v-if="tab === 'note'" key="note" :contentMax="800">
 			<div v-if="notesSearchAvailable">
 				<XNote/>
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer v-else-if="tab === 'user'" key="user" :contentMax="800">
 			<XUser/>
 		</MkSpacer>
-	</MkLRSwipe>
+	</MkHorizontalSwipe>
 </MkStickyContainer>
 </template>
 
@@ -31,17 +31,13 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { $i } from '@/account.js';
 import { instance } from '@/instance.js';
 import MkInfo from '@/components/MkInfo.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XNote = defineAsyncComponent(() => import('./search.note.vue'));
 const XUser = defineAsyncComponent(() => import('./search.user.vue'));
 
 const tab = ref('note');
 
-function onSwipe(newKey: string) {
-	tab.value = newKey;
-}
-
 const notesSearchAvailable = (($i == null && instance.policies.canSearchNotes) || ($i != null && $i.policies.canSearchNotes));
 
 const headerActions = computed(() => []);
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index d1b7423e2c0a..e52a5ee04fca 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -155,7 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="enableInfiniteScroll">{{ i18n.ts.enableInfiniteScroll }}</MkSwitch>
 				<MkSwitch v-model="keepScreenOn">{{ i18n.ts.keepScreenOn }}</MkSwitch>
 				<MkSwitch v-model="disableStreamingTimeline">{{ i18n.ts.disableStreamingTimeline }}</MkSwitch>
-				<MkSwitch v-model="enableXSwipe">{{ i18n.ts.enableXSwipe }}</MkSwitch>
+				<MkSwitch v-model="enableHorizontalSwipe">{{ i18n.ts.enableHorizontalSwipe }}</MkSwitch>
 			</div>
 			<MkSelect v-model="serverDisconnectedBehavior">
 				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
@@ -297,7 +297,7 @@ const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
 const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline'));
 const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications'));
 const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enableSeasonalScreenEffect'));
-const enableXSwipe = computed(defaultStore.makeGetterSetter('enableXSwipe'));
+const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 0a62b29cfb48..666a9968b219 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
 	<MkSpacer :contentMax="800">
-		<MkLRSwipe :tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" @swiped="onSwipe">
+		<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
 			<div :key="src + withRenotes + withReplies + onlyFiles" ref="rootEl" v-hotkey.global="keymap">
 				<MkInfo v-if="['home', 'local', 'social', 'global'].includes(src) && !defaultStore.reactiveState.timelineTutorials.value[src]" style="margin-bottom: var(--margin);" closable @close="closeTutorial()">
 					{{ i18n.ts._timelineDescription[src] }}
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					/>
 				</div>
 			</div>
-		</MkLRSwipe>
+		</MkHorizontalSwipe>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -39,7 +39,7 @@ import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import { scroll } from '@/scripts/scroll.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
@@ -71,13 +71,6 @@ const withRenotes = ref(true);
 const withReplies = ref($i ? defaultStore.state.tlWithReplies : false);
 const onlyFiles = ref(false);
 
-function onSwipe(newKey: string): void {
-	const index = headerTabs.value.findIndex(tab => tab.key === newKey);
-	if (index === -1) return;
-	const tab = headerTabs.value[index];
-	src.value = tab.key;
-}
-
 watch(src, () => {
 	queue.value = 0;
 });
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
index 5f3318566346..603f1bef33b0 100644
--- a/packages/frontend/src/pages/user/index.vue
+++ b/packages/frontend/src/pages/user/index.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<div>
 		<div v-if="user">
-			<MkLRSwipe :tab="tab" :tabs="headerTabs" @swiped="onSwipe">
+			<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 				<XHome v-if="tab === 'home'" key="home" :user="user"/>
 				<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800" style="padding-top: 0">
 					<XTimeline :user="user"/>
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<XFlashs v-else-if="tab === 'flashs'" key="flashs" :user="user"/>
 				<XGallery v-else-if="tab === 'gallery'" key="gallery" :user="user"/>
 				<XRaw v-else-if="tab === 'raw'" key="raw" :user="user"/>
-			</MkLRSwipe>
+			</MkHorizontalSwipe>
 		</div>
 		<MkError v-else-if="error" @retry="fetchUser()"/>
 		<MkLoading v-else/>
@@ -38,7 +38,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
-import MkLRSwipe from '@/components/MkLRSwipe.vue';
+import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
@@ -61,10 +61,6 @@ const props = withDefaults(defineProps<{
 
 const tab = ref(props.page);
 
-function onSwipe(key: string) {
-	tab.value = key;
-}
-
 const user = ref<null | Misskey.entities.UserDetailed>(null);
 const error = ref<any>(null);
 
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 7eee999daf94..21b796caa1aa 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -427,7 +427,7 @@ export const defaultStore = markRaw(new Storage('base', {
 			sfxVolume: 1,
 		},
 	},
-	enableXSwipe: {
+	enableHorizontalSwipe: {
 		where: 'device',
 		default: true,
 	},

From 03e58c46c5d734c8897044f49eeb3e215c23bca4 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Wed, 17 Jan 2024 22:14:48 +0900
Subject: [PATCH 08/10] fix

---
 packages/frontend/src/components/MkHorizontalSwipe.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index c43e83d0caac..850162ed8135 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -63,7 +63,7 @@ const isSwipingForClass = ref(false);
 let swipeAborted = false;
 
 function touchStart(event: TouchEvent) {
-	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
 
 	if (event.touches.length !== 1) return;
 
@@ -72,7 +72,7 @@ function touchStart(event: TouchEvent) {
 }
 
 function touchMove(event: TouchEvent) {
-	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
 
 	if (event.touches.length !== 1) return;
 
@@ -121,7 +121,7 @@ function touchEnd(event: TouchEvent) {
 		return;
 	}
 
-	if (!defaultStore.reactiveState.enableXSwipe.value) return;
+	if (!defaultStore.reactiveState.enableHorizontalSwipe.value) return;
 
 	if (event.touches.length !== 0) return;
 

From 92eb53997e87cacac53924017deb36cb5d5d5900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:46:08 +0900
Subject: [PATCH 09/10] Update MkHorizontalSwipe.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/frontend/src/components/MkHorizontalSwipe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index 850162ed8135..fddced4eeee0 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -164,7 +164,7 @@ watch(tabModel, (newTab, oldTab) => {
 		transitionName.value = 'swipeAnimationRight';
 	}
 
-	setTimeout(() => {
+	window.setTimeout(() => {
 		transitionName.value = undefined;
 	}, 400);
 });

From 3b87bc8eada84789fbfb9f7bc4cfda0157808ea7 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Thu, 18 Jan 2024 17:59:41 +0900
Subject: [PATCH 10/10] use css module

---
 .../src/components/MkHorizontalSwipe.vue      | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue
index fddced4eeee0..2c62aadbf4cd 100644
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@@ -11,7 +11,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@touchmove="touchMove"
 	@touchend="touchEnd"
 >
-	<Transition :name="transitionName" :class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]" :style="`--swipe: ${pullDistance}px;`">
+	<Transition
+		:class="[$style.transitionChildren, { [$style.swiping]: isSwipingForClass }]"
+		:enterActiveClass="$style.swipeAnimation_enterActive"
+		:leaveActiveClass="$style.swipeAnimation_leaveActive"
+		:enterFromClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_enterFrom : $style.swipeAnimationRight_enterFrom"
+		:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
+		:style="`--swipe: ${pullDistance}px;`"
+	>
 		<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること -->
 		<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません -->
 		<slot></slot>
@@ -179,20 +186,18 @@ watch(tabModel, (newTab, oldTab) => {
 		grid-area: 1 / 1 / 2 / 2;
 		transform: translateX(var(--swipe));
 
-		&:global(.swipeAnimationLeft-enter-active),
-		&:global(.swipeAnimationRight-enter-active),
-		&:global(.swipeAnimationLeft-leave-active),
-		&:global(.swipeAnimationRight-leave-active) {
+		&.swipeAnimation_enterActive,
+		&.swipeAnimation_leaveActive {
 			transition: transform .3s cubic-bezier(0.65, 0.05, 0.36, 1);
 		}
 
-		&:global(.swipeAnimationRight-leave-to),
-		&:global(.swipeAnimationLeft-enter-from) {
+		&.swipeAnimationRight_leaveTo,
+		&.swipeAnimationLeft_enterFrom {
 			transform: translateX(calc(100% + 24px));
 		}
 
-		&:global(.swipeAnimationRight-enter-from),
-		&:global(.swipeAnimationLeft-leave-to) {
+		&.swipeAnimationRight_enterFrom,
+		&.swipeAnimationLeft_leaveTo {
 			transform: translateX(calc(-100% - 24px));
 		}
 	}