From 490abe7275cc69e19970d65330c5fee0b70f036f Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Sun, 17 Sep 2023 21:59:09 +0000
Subject: [PATCH] feat: vibration

---
 locales/en-US.yml                                   |  1 +
 packages/client/src/components/MkButton.vue         |  3 +++
 packages/client/src/components/MkEmojiPicker.vue    |  1 +
 packages/client/src/components/MkFolder.vue         |  1 +
 packages/client/src/components/MkFollowButton.vue   |  2 ++
 packages/client/src/components/MkMenu.vue           |  1 +
 packages/client/src/components/MkNote.vue           |  7 ++++---
 packages/client/src/components/MkNoteSub.vue        |  6 +++---
 packages/client/src/components/MkPostForm.vue       |  2 ++
 .../src/components/MkReactionsViewer.reaction.vue   |  1 +
 packages/client/src/components/MkRenoteButton.vue   |  2 ++
 packages/client/src/components/MkStarButton.vue     |  1 +
 .../client/src/components/MkStarButtonNoEmoji.vue   |  1 +
 .../client/src/components/global/MkPageHeader.vue   |  4 ++++
 packages/client/src/directives/index.ts             |  2 ++
 packages/client/src/directives/vibrate.ts           | 11 +++++++++++
 packages/client/src/pages/auth.vue                  | 11 +++--------
 .../client/src/pages/messaging/messaging-room.vue   |  2 ++
 packages/client/src/pages/settings/general.vue      | 13 ++++++++++++-
 .../src/pages/settings/preferences-backups.vue      |  1 +
 packages/client/src/scripts/get-note-menu.ts        |  4 ++--
 packages/client/src/scripts/please-login.ts         |  2 ++
 packages/client/src/scripts/vibrate.ts              |  6 ++++++
 packages/client/src/store.ts                        |  1 +
 packages/client/src/ui/universal.vue                |  9 ++++++++-
 25 files changed, 77 insertions(+), 18 deletions(-)
 create mode 100644 packages/client/src/directives/vibrate.ts
 create mode 100644 packages/client/src/scripts/vibrate.ts

diff --git a/locales/en-US.yml b/locales/en-US.yml
index abab49641..fa3c4af25 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1142,6 +1142,7 @@ indexable: "Indexable"
 indexableDescription: "Allow built-in search to show your public posts"
 languageForTranslation: "Post translation language"
 detectPostLanguage: "Automatically detect the language and show a translate button for posts in foreign languages"
+vibrate: "Play vibrations"
 openServerInfo: "Show server information by clicking the server ticker on a post"
 
 _sensitiveMediaDetection:
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 53f20d3d4..071e981dd 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -28,6 +28,7 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted, ref } from "vue";
+import { vibrate } from "@/scripts/vibrate";
 
 const props = defineProps<{
 	type?: "button" | "submit" | "reset";
@@ -93,6 +94,8 @@ function onMousedown(evt: MouseEvent): void {
 		circleCenterY,
 	);
 
+	vibrate(10);
+
 	window.setTimeout(() => {
 		ripple.style.transform = "scale(" + scale / 2 + ")";
 	}, 1);
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 799b7462c..d14071d5a 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -23,6 +23,7 @@
 						<button
 							v-for="emoji in searchResultCustom"
 							:key="emoji.id"
+							v-vibrate="50"
 							class="_button item"
 							:title="emoji.name"
 							tabindex="0"
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 4bd490de9..5de841b62 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -4,6 +4,7 @@
 			<div class="title"><slot name="header"></slot></div>
 			<div class="divider"></div>
 			<button
+				v-vibrate="5"
 				class="_button"
 				:aria-expanded="showBody"
 				:aria-controls="bodyId"
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 394baab18..afbebf124 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -69,6 +69,7 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { getUserMenu } from "@/scripts/get-user-menu";
 import { useRouter } from "@/router";
+import { vibrate } from "@/scripts/vibrate";
 
 const router = useRouter();
 
@@ -154,6 +155,7 @@ async function onClick() {
 				await os.api("following/create", {
 					userId: props.user.id,
 				});
+				vibrate([30, 40, 100]);
 				hasPendingFollowRequestFromYou.value = true;
 			}
 		}
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 323983c49..e3021ee59 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -8,6 +8,7 @@
 		<div>
 			<div
 				ref="itemsEl"
+				v-vibrate="5"
 				class="rrevdjwt _popup _shadow"
 				:class="{ center: align === 'center', asDrawer }"
 				:style="{
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index c6bdced45..77c9e1856 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -6,6 +6,7 @@
 		ref="el"
 		v-hotkey="keymap"
 		v-size="{ max: [500, 350] }"
+		v-vibrate="5"
 		:aria-label="accessibleLabel"
 		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : null"
@@ -225,9 +226,9 @@
 							isForeignLanguage &&
 							translation == null
 						"
+						v-tooltip.noDelay.bottom="i18n.ts.translate"
 						class="button _button"
 						@click.stop="translate"
-						v-tooltip.noDelay.bottom="i18n.ts.translate"
 					>
 						<i class="ph-translate ph-bold ph-lg"></i>
 					</button>
@@ -385,8 +386,8 @@ const isForeignLanguage: boolean =
 
 async function translate_(noteId, targetLang: string) {
 	return await os.api("notes/translate", {
-		noteId: noteId,
-		targetLang: targetLang,
+		noteId,
+		targetLang,
 	});
 }
 
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 93137ef02..7deea9646 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -130,9 +130,9 @@
 							isForeignLanguage &&
 							translation == null
 						"
+						v-tooltip.noDelay.bottom="i18n.ts.translate"
 						class="button _button"
 						@click.stop="translate"
-						v-tooltip.noDelay.bottom="i18n.ts.translate"
 					>
 						<i class="ph-translate ph-bold ph-lg"></i>
 					</button>
@@ -306,8 +306,8 @@ const isForeignLanguage: boolean =
 
 async function translate_(noteId, targetLang: string) {
 	return await os.api("notes/translate", {
-		noteId: noteId,
-		targetLang: targetLang,
+		noteId,
+		targetLang,
 	});
 }
 
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 9e08edbef..8f8108f11 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -275,6 +275,7 @@ import { uploadFile } from "@/scripts/upload";
 import { deepClone } from "@/scripts/clone";
 import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
 import { preprocess } from "@/scripts/preprocess";
+import { vibrate } from "@/scripts/vibrate";
 
 const modal = inject("modal");
 
@@ -937,6 +938,7 @@ async function post() {
 				text: err.message + "\n" + (err as any).id,
 			});
 		});
+	vibrate([10, 20, 10, 20, 10, 20, 60]);
 }
 
 function cancel() {
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 3f7935e27..fdc7e4268 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -3,6 +3,7 @@
 		v-if="count > 0"
 		ref="buttonRef"
 		v-ripple="canToggle"
+		v-vibrate="[10, 30, 40]"
 		class="hkzvhatu _button"
 		:class="{
 			reacted: note.myReaction == reaction,
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index bf1275f3f..5e604a5f5 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -32,6 +32,7 @@ import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import type { MenuItem } from "@/types/menu";
+import { vibrate } from "@/scripts/vibrate";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -197,6 +198,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 			icon: "ph-hand-fist ph-bold ph-lg",
 			danger: false,
 			action: () => {
+				vibrate([30, 30, 60]);
 				os.api(
 					"notes/create",
 					props.note.visibility === "specified"
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index cf549d366..f236ae699 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -1,6 +1,7 @@
 <template>
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
+		v-vibrate="[30, 50, 50]"
 		class="button _button"
 		@click.stop="star($event)"
 	>
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
index 1e29ca5e2..161290a20 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -2,6 +2,7 @@
 	<button
 		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
+		v-vibrate="[30, 50, 50]"
 		class="button _button"
 		:class="$style.root"
 		@click.stop="toggleStar($event)"
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 639d472d0..4f7ea0b02 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -12,6 +12,7 @@
 				<button
 					v-if="displayBackButton"
 					v-tooltip.noDelay="i18n.ts.goBack"
+					v-vibrate="5"
 					class="_buttonIcon button icon backButton"
 					@click.stop="goBack()"
 					@touchstart="preventDrag"
@@ -20,6 +21,7 @@
 				</button>
 				<MkAvatar
 					v-if="narrow && props.displayMyAvatar && $i"
+					v-vibrate="5"
 					class="avatar button"
 					:user="$i"
 					:disable-preview="true"
@@ -77,6 +79,7 @@
 					v-for="tab in tabs"
 					:ref="(el) => (tabRefs[tab.key] = el)"
 					v-tooltip.noDelay="tab.title"
+					v-vibrate="5"
 					class="tab _button"
 					:class="{
 						active: tab.key != null && tab.key === props.tab,
@@ -108,6 +111,7 @@
 			<template v-for="action in actions">
 				<button
 					v-tooltip.noDelay="action.text"
+					v-vibrate="5"
 					class="_buttonIcon button"
 					:class="{ highlighted: action.highlighted }"
 					@click.stop="action.handler"
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index 6c80d4e94..1758e5362 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -12,6 +12,7 @@ import clickAnime from "./click-anime";
 import panel from "./panel";
 import adaptiveBorder from "./adaptive-border";
 import focus from "./focus";
+import vibrate from "./vibrate";
 
 export default function (app: App) {
 	app.directive("userPreview", userPreview);
@@ -27,4 +28,5 @@ export default function (app: App) {
 	app.directive("panel", panel);
 	app.directive("adaptive-border", adaptiveBorder);
 	app.directive("focus", focus);
+	app.directive("vibrate", vibrate);
 }
diff --git a/packages/client/src/directives/vibrate.ts b/packages/client/src/directives/vibrate.ts
new file mode 100644
index 000000000..15ec8bc5b
--- /dev/null
+++ b/packages/client/src/directives/vibrate.ts
@@ -0,0 +1,11 @@
+import type { Directive } from "vue";
+import { vibrate } from "../scripts/vibrate";
+
+export default {
+	mounted(el, binding) {
+		const pattern = (binding.value as VibratePattern) ?? 20;
+		el.addEventListener("mousedown", () => {
+			vibrate(pattern);
+		});
+	},
+} as Directive;
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index c77b4feed..0c0f52d75 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -46,14 +46,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XForm from "./auth.form.vue";
 import MkSignin from "@/components/MkSignin.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
-import { login } from "@/account";
+import { $i, login } from "@/account";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
 
 const props = defineProps<{
 	token: string;
@@ -102,11 +101,7 @@ const accepted = () => {
 	const isMastodon = !!getUrlParams().mastodon;
 	if (session.value.app.callbackUrl && isMastodon) {
 		const redirectUri = decodeURIComponent(getUrlParams().redirect_uri);
-		if (
-			!session.value.app.callbackUrl
-				.split("\n")
-				.some((p) => p === redirectUri)
-		) {
+		if (!session.value.app.callbackUrl.split("\n").includes(redirectUri)) {
 			state.value = "fetch-session-error";
 			fetching.value = false;
 			throw new Error("Callback URI doesn't match registered app");
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 32cb01f26..bb55121b9 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -120,6 +120,7 @@ import {
 import * as os from "@/os";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
+import { vibrate } from "@/scripts/vibrate";
 import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { defaultStore } from "@/store";
@@ -251,6 +252,7 @@ function onDrop(ev: DragEvent): void {
 
 function onMessage(message) {
 	sound.play("chat");
+	vibrate([30, 30, 30]);
 
 	const _isBottom = isBottomVisible(rootEl.value, 64);
 
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 01746406b..a6ef6d45b 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -136,6 +136,12 @@
 				class="_formBlock"
 				>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
 			>
+			<FormSwitch
+				v-model="vibrate"
+				class="_formBlock"
+				@click="demoVibrate"
+				>{{ i18n.ts.vibrate }}
+			</FormSwitch>
 			<FormRadios v-model="fontSize" class="_formBlock">
 				<template #label>{{ i18n.ts.fontSize }}</template>
 				<option :value="null">
@@ -273,7 +279,7 @@ import FormSection from "@/components/form/section.vue";
 import FormLink from "@/components/form/link.vue";
 import MkLink from "@/components/MkLink.vue";
 import { langs } from "@/config";
-import { defaultStore } from "@/store";
+import { ColdDeviceStorage, defaultStore } from "@/store";
 import * as os from "@/os";
 import { unisonReload } from "@/scripts/unison-reload";
 import { i18n } from "@/i18n";
@@ -295,6 +301,10 @@ async function reloadAsk() {
 	unisonReload();
 }
 
+function demoVibrate() {
+	window.navigator.vibrate(100);
+}
+
 const overridedDeviceKind = computed(
 	defaultStore.makeGetterSetter("overridedDeviceKind"),
 );
@@ -331,6 +341,7 @@ const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
 const disableShowingAnimatedImages = computed(
 	defaultStore.makeGetterSetter("disableShowingAnimatedImages"),
 );
+const vibrate = computed(ColdDeviceStorage.makeGetterSetter("vibrate"));
 const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
 const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
 const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index 236d8f596..4e97b0562 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -126,6 +126,7 @@ const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	"syncDeviceDarkMode",
 	"plugins",
 	"mediaVolume",
+	"vibrate",
 	"sound_masterVolume",
 	"sound_note",
 	"sound_noteMy",
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 38fc6c8f3..9b5ac12ee 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -239,8 +239,8 @@ export function getNoteMenu(props: {
 
 	async function translate_(noteId: number, targetLang: string) {
 		return await os.api("notes/translate", {
-			noteId: noteId,
-			targetLang: targetLang,
+			noteId,
+			targetLang,
 		});
 	}
 
diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
index 9b660dd6d..f8f3983ae 100644
--- a/packages/client/src/scripts/please-login.ts
+++ b/packages/client/src/scripts/please-login.ts
@@ -2,9 +2,11 @@ import { defineAsyncComponent } from "vue";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";
 import { popup } from "@/os";
+import { vibrate } from "@/scripts/vibrate";
 
 export function pleaseLogin(path?: string) {
 	if ($i) return;
+	vibrate(100);
 
 	popup(
 		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
diff --git a/packages/client/src/scripts/vibrate.ts b/packages/client/src/scripts/vibrate.ts
new file mode 100644
index 000000000..24708c882
--- /dev/null
+++ b/packages/client/src/scripts/vibrate.ts
@@ -0,0 +1,6 @@
+import { ColdDeviceStorage } from "@/store";
+
+export function vibrate(pattern: VibratePattern) {
+	if (!ColdDeviceStorage.get("vibrate") || !window.navigator.vibrate) return;
+	window.navigator.vibrate(pattern);
+}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index ce91baa55..84ac279dd 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -382,6 +382,7 @@ export class ColdDeviceStorage {
 		syncDeviceDarkMode: true,
 		plugins: [] as Plugin[],
 		mediaVolume: 0.5,
+		vibrate: true,
 		sound_masterVolume: 0.3,
 		sound_note: { type: "none", volume: 0 },
 		sound_noteMy: { type: "syuilo/up", volume: 1 },
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 1c9f5ed2c..213f132af 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -25,6 +25,7 @@
 
 		<button
 			v-if="!isDesktop && !isMobile"
+			v-vibrate="5"
 			class="widgetButton _button"
 			@click="widgetsShowing = true"
 		>
@@ -33,6 +34,7 @@
 
 		<div v-if="isMobile" class="buttons">
 			<button
+				v-vibrate="5"
 				:aria-label="i18n.t('menu')"
 				class="button nav _button"
 				@click="drawerMenuShowing = true"
@@ -48,6 +50,7 @@
 				</div>
 			</button>
 			<button
+				v-vibrate="5"
 				:aria-label="i18n.t('home')"
 				class="button home _button"
 				@click="
@@ -65,6 +68,7 @@
 				</div>
 			</button>
 			<button
+				v-vibrate="5"
 				:aria-label="i18n.t('notifications')"
 				class="button notifications _button"
 				@click="
@@ -73,6 +77,7 @@
 				"
 			>
 				<div
+					v-vibrate="5"
 					class="button-wrapper"
 					:class="buttonAnimIndex === 1 ? 'on' : ''"
 				>
@@ -86,6 +91,7 @@
 				</div>
 			</button>
 			<button
+				v-vibrate="5"
 				:aria-label="i18n.t('messaging')"
 				class="button messaging _button"
 				@click="
@@ -107,6 +113,7 @@
 				</div>
 			</button>
 			<button
+				v-vibrate="5"
 				:aria-label="i18n.t('_deck._columns.widgets')"
 				class="button widget _button"
 				@click="widgetsShowing = true"
@@ -225,7 +232,7 @@ provideMetadataReceiver((info) => {
 
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
-		if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから
+		if (def === "notifications" || def === "messaging") continue; // Notifications & Messaging are bottom nav buttons and thus shouldn't be highlighted in the sidebar
 		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;