fix(frontend): 横スワイプの挙動改善 by kakkokari-gtyih · Pull Request #17101 · misskey-dev/misskey

kakkokari-gtyih · 2026-01-14T15:30:14Z

What

いくつかの修正

横スワイプ開始時に、開始までにスワイプした分のpx数を無視するように（ゆっくりスワイプすると変に吸い付く感じになるのを修正）
横スワイプ実施状態で常にCSSイージング効果が適用され、タッチアクションに完全には追従していないのを修正（MkPullToRefresh同様にスワイプ量をJSで測るようにした）
一部の要素上に指を置いた状態からスワイプを開始できないのを修正（hasSomethingToDoWithXSwipeの条件緩和）

いくつかのリファクタ

MkPullToRefreshで1msごとにsetIntervalしていたのをrequestAnimationFrameに置き換えて負荷を軽減
MkSwiperの関数名をMkPullToRefreshに寄せて挙動の把握をやりやすく

Why

UX / Refactor

Additional info (optional)

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Add story of storybook
(If needed) Update CHANGELOG.md
(If possible) Add tests

codecov · 2026-01-14T15:33:03Z

Codecov Report

❌ Patch coverage is 1.31004% with 226 lines in your changes missing coverage. Please review.
✅ Project coverage is 13.63%. Comparing base (810faa8) to head (26b4d97).

Files with missing lines	Patch %	Lines
packages/frontend/src/components/MkSwiper.vue	1.76%	124 Missing and 43 partials ⚠️
...ckages/frontend/src/components/MkPullToRefresh.vue	0.00%	48 Missing and 11 partials ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #17101       +/-   ##
============================================
- Coverage    63.48%   13.63%   -49.85%     
============================================
  Files         1161      241      -920     
  Lines       115968    11858   -104110     
  Branches      8351     3983     -4368     
============================================
- Hits         73619     1617    -72002     
+ Misses       40159     8040    -32119     
- Partials      2190     2201       +11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Pull request overview

This PR improves the horizontal swipe behavior and refactors animation handling in the frontend components. The changes address issues with swipe gesture tracking, animation artifacts, and performance.

Changes:

Fixed horizontal swipe initiation by ignoring initial distance traveled before swipe starts
Replaced CSS easing with JavaScript-controlled animations for better touch tracking
Improved swipe detection by relaxing element checks in hasSomethingToDoWithXSwipe
Refactored MkPullToRefresh to use requestAnimationFrame instead of setInterval for better performance

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/frontend/src/components/MkSwiper.vue	Refactored horizontal swipe handling with improved tracking, effective distance calculation, and requestAnimationFrame-based animations
packages/frontend/src/components/MkPullToRefresh.vue	Replaced setInterval with requestAnimationFrame for animation loop and added cancellation support

Comments suppressed due to low confidence (1)

packages/frontend/src/components/MkSwiper.vue:249

On line 244, when currentTabIndex.value === 0, accessing props.tabs[currentTabIndex.value - 1] (i.e., props.tabs[-1]) is undefined in JavaScript. The short-circuit evaluation prevents the error from occurring, but the logic is checking a non-existent array element. Similarly on line 247, when at the last index, props.tabs[currentTabIndex.value + 1] accesses beyond array bounds. While JavaScript returns undefined for out-of-bounds access and the conditions work correctly due to short-circuiting, this could be confusing. Consider checking bounds before accessing array elements for clarity: (currentTabIndex.value > 0 && props.tabs[currentTabIndex.value - 1]?.onClick) and (currentTabIndex.value < props.tabs.length - 1 && props.tabs[currentTabIndex.value + 1]?.onClick).

	if (currentTabIndex.value === 0 || props.tabs[currentTabIndex.value - 1].onClick) {
		distanceX = Math.min(distanceX, 0);
	}
	if (currentTabIndex.value === props.tabs.length - 1 || props.tabs[currentTabIndex.value + 1].onClick) {
		distanceX = Math.max(distanceX, 0);
	}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/frontend/src/components/MkSwiper.vue

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

packages/frontend/src/components/MkPullToRefresh.vue:293

The onUnmounted cleanup doesn't handle the case where mouseup or touchend event listeners might still be registered on the window. These listeners are added with once: true on lines 116 and 135, but if the component unmounts before the user releases their mouse/touch, these listeners will remain until they're triggered. Consider removing these listeners explicitly in onUnmounted to prevent potential memory leaks or unexpected behavior after unmount.

onUnmounted(() => {
	if (moveBySystemCancel != null) {
		moveBySystemCancel();
		moveBySystemCancel = null;
	}
	moveBySystemRafId = null;
	// pull中にwindowへ登録したリスナーが残るのを防ぐ
	window.removeEventListener('mousemove', onMouseMove);
	window.removeEventListener('touchmove', onTouchMove);
	unlockDownScroll();
	if (rootEl.value) rootEl.value.removeEventListener('mousedown', moveStartByMouse);
	if (rootEl.value) rootEl.value.removeEventListener('touchstart', moveStartByTouch);
	if (rootEl.value) rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
});

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/frontend/src/components/MkSwiper.vue

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

packages/frontend/src/components/MkPullToRefresh.vue

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

packages/frontend/src/components/MkSwiper.vue

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

Copilot · 2026-02-28T08:22:51Z

packages/frontend/src/components/MkSwiper.vue


 	if (swipeAborted) return;

 	if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;


movingByPointer calls hasSomethingToDoWithXSwipe(event.target as HTMLElement) without verifying that event.target is a non-null HTMLElement. If the pointer events are retargeted (e.g. to a Text node, SVGElement, or null), this will throw at runtime inside hasSomethingToDoWithXSwipe (uses tagName/getComputedStyle). Add the same instanceof HTMLElement guard used in moveStartByPointer (or use event.currentTarget).

Suggested change

if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;

const target = event.target;

if (!(target instanceof HTMLElement)) return;

if (hasSomethingToDoWithXSwipe(target)) return;

Copilot · 2026-02-28T08:22:52Z

packages/frontend/src/components/MkSwiper.vue

+
+	if (!isSwiping.value) return;
+
+	if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;


moveEndByPointer also passes event.target as HTMLElement into hasSomethingToDoWithXSwipe without checking the target type/nullability. Pointerup targets can be outside the component (or non-HTMLElement), which can lead to a runtime error. Consider guarding with event.target instanceof HTMLElement (or switching to event.currentTarget).

Suggested change

if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;

const target = event.currentTarget ?? event.target;

if (!(target instanceof HTMLElement)) {

resetState();

return;

}

if (hasSomethingToDoWithXSwipe(target)) return;

Copilot · 2026-02-28T08:22:52Z

packages/frontend/src/components/MkSwiper.vue

+function moveCancelByPointer(event: PointerEvent) {
+	if (event.pointerType === 'mouse') return;
+	if (activePointerId != null && event.pointerId !== activePointerId) return;
+	resetState();
+	closeContent().finally(() => {
+		isSwipingForClass.value = false;
+	});


moveCancelByPointer runs for lostpointercapture, but its guard allows execution even when activePointerId is already null (e.g. after a normal pointerup where resetState() already ran). This can trigger an extra closeContent() call that cancels/restarts the release animation unnecessarily. Tighten the guard to only handle cancel when isTracking is true and event.pointerId === activePointerId (or track the last captured id separately), and/or release pointer capture explicitly on end/cancel and drop the lostpointercapture handler if it’s redundant.

kakkokari-gtyih · 2026-03-21T03:06:48Z

/preview

kakkokari-gtyih · 2026-03-21T14:50:12Z

スワイプした時の感触が軽すぎるのでなんか入れる

kakkokari-gtyih added 3 commits January 15, 2026 00:06

fix(frontend): 横スワイプの挙動改善

630116e

redactor

bd48e5f

refactor

b96290e

github-project-automation bot added this to [実験中] 管理用 Jan 14, 2026

github-project-automation bot moved this to Todo in [実験中] 管理用 Jan 14, 2026

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jan 14, 2026

github-actions bot added the packages/frontend Client side specific issue/PR label Jan 14, 2026

kakkokari-gtyih requested a review from Copilot January 14, 2026 15:33

Copilot started reviewing on behalf of kakkokari-gtyih January 14, 2026 15:34 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

packages/frontend/src/components/MkSwiper.vue Show resolved Hide resolved

packages/frontend/src/components/MkSwiper.vue Outdated Show resolved Hide resolved

kakkokari-gtyih added 2 commits January 15, 2026 00:43

fix: relax swipe condition

c8d8d92

fix: apply copilot reviews / remove listeners on unmount

96e11c1

kakkokari-gtyih requested a review from Copilot January 14, 2026 15:44

Copilot started reviewing on behalf of kakkokari-gtyih January 14, 2026 15:45 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

kakkokari-gtyih marked this pull request as draft January 14, 2026 15:51

kakkokari-gtyih mentioned this pull request Feb 28, 2026

refactor(frontend): TouchEventとMouseEventをPointerEventに統合 #17201

Open

5 tasks

kakkokari-gtyih added 2 commits February 28, 2026 16:34

Merge remote-tracking branch 'msky/develop' into fix-swiper-2

c47a4b2

fix reviews

bfd3ce4

kakkokari-gtyih requested a review from Copilot February 28, 2026 07:40

Copilot started reviewing on behalf of kakkokari-gtyih February 28, 2026 07:40 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/frontend/src/components/MkPullToRefresh.vue Show resolved Hide resolved

packages/frontend/src/components/MkPullToRefresh.vue Outdated Show resolved Hide resolved

kakkokari-gtyih added 2 commits February 28, 2026 16:48

TouchEventをPointerEventに変更

cfd4155

fix mkpulltorefresh

a54d372

kakkokari-gtyih requested a review from Copilot February 28, 2026 07:50

Copilot started reviewing on behalf of kakkokari-gtyih February 28, 2026 07:50 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

packages/frontend/src/components/MkSwiper.vue Outdated Show resolved Hide resolved

packages/frontend/src/components/MkSwiper.vue Outdated Show resolved Hide resolved

packages/frontend/src/components/MkSwiper.vue Show resolved Hide resolved

fix

ee51716

kakkokari-gtyih requested a review from Copilot February 28, 2026 08:19

Copilot started reviewing on behalf of kakkokari-gtyih February 28, 2026 08:19 View session

Copilot AI reviewed Feb 28, 2026

View reviewed changes

kakkokari-gtyih added 2 commits February 28, 2026 17:23

clean up

1717a43

fix

26b4d97


		if (swipeAborted) return;

		if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;

-	if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;
+	const target = event.target;
+	if (!(target instanceof HTMLElement)) return;
+	if (hasSomethingToDoWithXSwipe(target)) return;


		if (!isSwiping.value) return;

		if (hasSomethingToDoWithXSwipe(event.target as HTMLElement)) return;

Uh oh!

Conversation

kakkokari-gtyih commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Additional info (optional)

Checklist

Uh oh!

codecov bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 28, 2026

Choose a reason for hiding this comment

Uh oh!

kakkokari-gtyih commented Mar 21, 2026

Uh oh!

kakkokari-gtyih commented Mar 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kakkokari-gtyih commented Jan 14, 2026 •

edited

Loading

codecov bot commented Jan 14, 2026 •

edited

Loading