feat(frontend): introduce haptic feedback as experimental feature

#16410

packages/frontend/src/components/MkEmojiPicker.vue

@@ -141,6 +141,7 @@ import { $i } from '@/i.js';
 import { checkReactionPermissions } from '@/utility/check-reaction-permissions.js';
 import { prefer } from '@/preferences.js';
 import { useRouter } from '@/router.js';
+import { haptic } from '@/utility/haptic.js';
 
 const router = useRouter();
 
@@ -431,6 +432,8 @@ function chosen(emoji: string | Misskey.entities.EmojiSimple | UnicodeEmojiDef,
 	const key = getKey(emoji);
 	emit('chosen', key);
 
+	haptic();
+
 	// 最近使った絵文字更新
 	if (!pinned.value?.includes(key)) {
 		let recents = store.s.recentlyUsedEmojis;

packages/frontend/src/components/MkFollowButton.vue

@@ -46,6 +46,7 @@ import { claimAchievement } from '@/utility/achievements.js';
 import { pleaseLogin } from '@/utility/please-login.js';
 import { $i } from '@/i.js';
 import { prefer } from '@/preferences.js';
+import { haptic } from '@/utility/haptic.js';
 
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed,
@@ -84,6 +85,8 @@ async function onClick() {
 
 	wait.value = true;
 
+	haptic();
+
 	try {
 		if (isFollowing.value) {
 			const { canceled } = await os.confirm({

packages/frontend/src/components/MkPullToRefresh.vue

@@ -27,6 +27,7 @@ import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { getScrollContainer } from '@@/js/scroll.js';
 import { i18n } from '@/i18n.js';
 import { isHorizontalSwipeSwiping } from '@/utility/touch.js';
+import { haptic } from '@/utility/haptic.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
@@ -203,6 +204,8 @@ function moving(event: MouseEvent | TouchEvent) {
 	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
 
 	isPulledEnough.value = pullDistance.value >= FIRE_THRESHOLD;
+
+	if (isPulledEnough.value) haptic();
 }
 
 /**

packages/frontend/src/components/MkSwitch.vue

@@ -30,6 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { toRefs } from 'vue';
 import type { Ref } from 'vue';
 import XButton from '@/components/MkSwitch.button.vue';
+import { haptic } from '@/utility/haptic.js';
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -48,6 +49,8 @@ const toggle = () => {
 	if (props.disabled) return;
 	emit('update:modelValue', !checked.value);
 	emit('change', !checked.value);
+
+	haptic();
 };
 </script>