changeDefaultEmoji

locales/en-US.yml

@@ -2837,3 +2837,5 @@ _selfXssPrevention:
   description3: "For more information, please check here: {link}"
 insertNewNotes: "Insert new notes at current position"
 insertNewNotesDescription: "Insert new notes at the current position while scrolling timeline."
+defaultReactionEmoji: "Default reaction emoji"
+defaultReactionEmojiDescription: "Set the emoji used for quick reaction button."

packages/frontend/src/components/MkNote.vue

@@ -500,28 +500,34 @@ function reply(): void {
 	});
 }
 
-function like(): void {
-	pleaseLogin(undefined, pleaseLoginContext.value);
-	showMovedDialog();
-	sound.playMisskeySfx('reaction');
+async function toggleReaction(reaction: string): Promise<void> {
 	if (props.mock) {
+		if (appearNote.value.myReaction) {
+			emit('removeReaction', appearNote.value.myReaction);
+		} else {
+			emit('reaction', reaction);
+		}
 		return;
 	}
-	misskeyApi('notes/reactions/create', {
-		noteId: appearNote.value.id,
-		reaction: '❤️',
-	});
-	const el = likeButton.value as HTMLElement | null | undefined;
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		const { dispose } = os.popup(MkRippleEffect, { x, y }, {
-			end: () => dispose(),
+
+	if (appearNote.value.myReaction) {
+		await misskeyApi('notes/reactions/delete', {
+			noteId: appearNote.value.id,
+		});
+	} else {
+		await misskeyApi('notes/reactions/create', {
+			noteId: appearNote.value.id,
+			reaction: reaction,
 		});
 	}
 }
 
+async function like() {
+	if (props.appearNote.myReaction) return;
+	const emoji = defaultStore.state.defaultReactionEmoji;
+	await toggleReaction(emoji);
+}
+
 function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();

packages/frontend/src/components/MkNoteDetailed.vue

@@ -484,28 +484,25 @@ function reply(): void {
 	});
 }
 
-function like(): void {
-	pleaseLogin(undefined, pleaseLoginContext.value);
-	showMovedDialog();
-	sound.playMisskeySfx('reaction');
-	if (props.mock) {
-		return;
-	}
-	misskeyApi('notes/reactions/create', {
-		noteId: appearNote.value.id,
-		reaction: '❤️',
-	});
-	const el = likeButton.value as HTMLElement | null | undefined;
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		const { dispose } = os.popup(MkRippleEffect, { x, y }, {
-			end: () => dispose(),
+async function toggleReaction(reaction: string): Promise<void> {
+	if (appearNote.value.myReaction) {
+		await misskeyApi('notes/reactions/delete', {
+			noteId: appearNote.value.id,
+		});
+	} else {
+		await misskeyApi('notes/reactions/create', {
+			noteId: appearNote.value.id,
+			reaction: reaction,
 		});
 	}
 }
 
+async function like() {
+	if (props.appearNote.myReaction) return;
+	const emoji = defaultStore.state.defaultReactionEmoji;
+	await toggleReaction(emoji);
+}
+
 function react(): void {
 	pleaseLogin({ openOnRemote: pleaseLoginContext.value });
 	showMovedDialog();

packages/frontend/src/pages/settings/pari.vue

@@ -69,6 +69,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="showDetailTimeWhenHover">{{ i18n.ts.showDetailTimeWhenHover }}</MkSwitch>
 				<MkSwitch v-model="noteClickToOpen">{{ i18n.ts.noteClickToOpen }}</MkSwitch>
 				<MkSwitch v-model="enableFallbackReactButton">{{ i18n.ts.enableFallbackReactButton }}</MkSwitch>
+				<MkButton @click="changeDefaultEmoji">
+					<template #label>{{ i18n.ts.defaultReactionEmoji }}</template>
+					<template #suffix>{{ defaultReactionEmoji }}</template>
+				</MkButton>
 				<MkSwitch v-model="enableMFMCheatsheet">{{ i18n.ts.enableMFMCheatsheet }}</MkSwitch>
 				<MkSwitch v-model="enableUndoClearPostForm">{{ i18n.ts.enableUndoClearPostForm }}</MkSwitch>
 				<MkSwitch v-model="collapseNotesRepliedTo">{{ i18n.ts.collapseNotesRepliedTo }}</MkSwitch>
@@ -106,6 +110,7 @@ import MkInfo from '@/components/MkInfo.vue';
 import MkRange from '@/components/MkRange.vue';
 import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
+import * as os from '@/os.js';
 
 const defaultFont = getDefaultFontSettings();
 console.log(defaultFont);
@@ -138,6 +143,14 @@ const collapsedUnexpectedLangs = computed(defaultStore.makeGetterSetter('collaps
 const emojiAutoSpacing = computed(defaultStore.makeGetterSetter('emojiAutoSpacing'));
 const insertNewNotes = computed(defaultStore.makeGetterSetter('insertNewNotes'));
 
+const defaultReactionEmoji = computed(defaultStore.makeGetterSetter('defaultReactionEmoji'));
+
+async function changeDefaultEmoji() {
+	const { canceled, result: emoji } = await os.pickEmoji();
+	if (canceled) return;
+	defaultReactionEmoji.value = emoji;
+}
+
 definePageMetadata(() => ({
 	title: 'Pari Plus!',
 	icon: 'ti ti-plus',

packages/frontend/src/store.ts

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