From a73a09a99953374050e4b45b6834276cc122cefb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A6=E3=81=83?=
 =?UTF-8?q?=E3=83=BC=E3=80=82?=
 <56515516+mattyatea@users.noreply.github.com>
Date: Sun, 20 Oct 2024 05:31:35 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend/reactions):=20=E3=83=AA=E3=82=A2?=
 =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=9F=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=97?=
 =?UTF-8?q?=E3=81=BE=E3=81=97=E3=81=9F=20(MisskeyIO#758)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  8 +++
 locales/ja-JP.yml                             |  2 +
 .../src/components/MkEmojiPickerDialog.vue    | 32 +++++++++-
 .../src/components/MkReactionsViewer.vue      | 11 +++-
 .../src/pages/settings/mute-block.vue         | 59 ++++++++++++++++++-
 .../pages/settings/preferences-backups.vue    |  1 +
 packages/frontend/src/store.ts                |  4 ++
 7 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 888fd3870..262cc0b35 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -580,6 +580,14 @@ export interface Locale extends ILocale {
      * リノートのミュートを解除
      */
     "renoteUnmute": string;
+    /**
+     * リアクションのミュート
+     */
+    "mutedReactions": string;
+    /**
+     * リモートの絵文字をミュート
+     */
+    "remoteCustomEmojiMuted": string;
     /**
      * ブロック
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e03a0d739..3ff82c457 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -141,6 +141,8 @@ mute: "ミュート"
 unmute: "ミュート解除"
 renoteMute: "リノートをミュート"
 renoteUnmute: "リノートのミュートを解除"
+mutedReactions: "リアクションのミュート"
+remoteCustomEmojiMuted: "リモートの絵文字をミュート"
 block: "ブロック"
 unblock: "ブロック解除"
 suspend: "凍結"
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index 90b37e390..65f227e9a 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -29,15 +29,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:max-height="maxHeight"
 		@chosen="chosen"
 	/>
+	<div v-if="manualReactionInput" :class="$style.remoteReactionInputWrapper">
+		<span>{{ i18n.ts.remoteCustomEmojiMuted }}</span>
+		<MkInput v-model="remoteReactionName" placeholder=":emojiname@host:" autocapitalize="off"/>
+		<MkButton :disabled="!(remoteReactionName && remoteReactionName[0] === ':')" @click="chosen(remoteReactionName)">
+			{{ i18n.ts.add }}
+		</MkButton>
+		<div :class="$style.emojiContainer">
+			<MkCustomEmoji v-if="remoteReactionName && remoteReactionName[0] === ':' " :class="$style.emoji" :name="remoteReactionName" :normal="true"/>
+		</div>
+	</div>
 </MkModal>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { shallowRef } from 'vue';
+import { shallowRef, ref } from 'vue';
+import { i18n } from '@/i18n.js';
 import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store.js';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
 
 const props = withDefaults(defineProps<{
 	manualShowing?: boolean | null;
@@ -47,12 +61,14 @@ const props = withDefaults(defineProps<{
 	asReactionPicker?: boolean;
 	targetNote?: Misskey.entities.Note;
 	choseAndClose?: boolean;
+	manualReactionInput?: boolean;
 }>(), {
 	manualShowing: null,
 	showPinned: true,
 	pinnedEmojis: undefined,
 	asReactionPicker: false,
 	choseAndClose: true,
+	manualReactionInput: false,
 });
 
 const emit = defineEmits<{
@@ -64,6 +80,8 @@ const emit = defineEmits<{
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
 
+const remoteReactionName = ref('');
+
 function chosen(emoji: string) {
 	emit('done', emoji);
 	if (props.choseAndClose) {
@@ -88,4 +106,16 @@ function opening() {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
 }
+
+.remoteReactionInputWrapper {
+	margin-top: var(--margin);
+	padding: 16px;
+	border-radius: var(--radius);
+	background: var(--popup);
+}
+
+.emojiContainer {
+	height: 48px;
+	width: 48px;
+}
 </style>
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 63b202f9f..302a7ea12 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -22,6 +22,7 @@ import * as Misskey from 'misskey-js';
 import { inject, watch, ref } from 'vue';
 import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { defaultStore } from '@/store.js';
+import { $i } from '@/account.js';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -45,6 +46,13 @@ if (props.note.myReaction && !Object.keys(reactions.value).includes(props.note.m
 	reactions.value[props.note.myReaction] = props.note.reactions[props.note.myReaction];
 }
 
+function shouldDisplayReaction([reaction]: [string, number]): boolean {
+	if (!$i) return true; // 非ログイン状態なら全部のリアクションを見れるように
+	if (reaction === props.note.myReaction) return true; // 自分がつけたリアクションなら表示する
+	if (!defaultStore.state.mutedReactions.includes(reaction.replace('@.', ''))) return true; // ローカルの絵文字には @. というsuffixがつくのでそれを消してから比較してあげる
+	return false;
+}
+
 function onMockToggleReaction(emoji: string, count: number) {
 	if (!mock) return;
 
@@ -80,7 +88,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 		newReactions.push([props.note.myReaction, newSource[props.note.myReaction]]);
 	}
 
-	reactions.value = newReactions;
+	reactions.value = newReactions.filter(shouldDisplayReaction);
 }, { immediate: true, deep: true });
 </script>
 
@@ -104,6 +112,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
 	flex-wrap: wrap;
 	align-items: center;
 	margin: 4px -2px 0 -2px;
+	max-width: 100%;
 
 	&:empty {
 		display: none;
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index de4db848d..2445a14d5 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -12,6 +12,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
 	</MkFolder>
 
+	<MkFolder>
+		<template #icon><i class="ti ti-message-off"></i></template>
+		<template #label>{{ i18n.ts.mutedReactions }}</template>
+
+		<div class="_gaps">
+			<div v-panel style="border-radius: var(--radius); padding: var(--margin);">
+				<button v-for="emoji in mutedReactions" class="_button" :class="$style.emojisItem" @click="removeReaction(emoji, $event)">
+					<MkCustomEmoji v-if="emoji && emoji[0] === ':'" :name="emoji"/>
+					<MkEmoji v-else :emoji="emoji ? emoji : 'null'"/>
+				</button>
+				<button class="_button" @click="chooseReaction">
+					<i class="ti ti-plus"></i>
+				</button>
+			</div>
+		</div>
+	</MkFolder>
+
 	<MkFolder>
 		<template #icon><i class="ti ti-planet-off"></i></template>
 		<template #label>{{ i18n.ts.instanceMute }}</template>
@@ -119,7 +136,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, Ref } from 'vue';
 import XInstanceMute from './mute-block.instance-mute.vue';
 import XWordMute from './mute-block.word-mute.vue';
 import MkPagination from '@/components/MkPagination.vue';
@@ -132,6 +149,9 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
 import { infoImageUrl } from '@/instance.js';
 import { signinRequired } from '@/account.js';
 import MkFolder from '@/components/MkFolder.vue';
+import MkCustomEmoji from '@/components/global/MkCustomEmoji.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+import { defaultStore } from '@/store.js';
 
 const $i = signinRequired();
 
@@ -154,6 +174,38 @@ const expandedRenoteMuteItems = ref([]);
 const expandedMuteItems = ref([]);
 const expandedBlockItems = ref([]);
 
+const mutedReactions = ref<string[]>(defaultStore.state.mutedReactions);
+
+watch(mutedReactions, () => {
+	defaultStore.set('mutedReactions', mutedReactions.value);
+}, {
+	deep: true,
+});
+
+const chooseReaction = (ev: MouseEvent) => pickEmoji(mutedReactions, ev);
+const removeReaction = (reaction: string, ev: MouseEvent) => remove(mutedReactions, reaction, ev);
+
+function remove(itemsRef: Ref<string[]>, reaction: string, ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.remove,
+		action: () => {
+			itemsRef.value = itemsRef.value.filter(x => x !== reaction);
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
+async function pickEmoji(itemsRef: Ref<string[]>, ev: MouseEvent) {
+	os.pickEmoji(ev.currentTarget ?? ev.target, {
+		showPinned: false,
+		manualReactionInput: true,
+	}).then(it => {
+		const emoji = it;
+		if (!itemsRef.value.includes(emoji)) {
+			itemsRef.value.push(emoji);
+		}
+	});
+}
+
 async function unrenoteMute(user, ev) {
 	os.popupMenu([{
 		text: i18n.ts.renoteUnmute,
@@ -263,4 +315,9 @@ definePageMetadata(() => ({
 		transform: rotateX(180deg);
 	}
 }
+
+.emojisItem{
+	display: inline-block;
+	padding: 8px;
+}
 </style>
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index d2e1944a8..da6fb5f6b 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -120,6 +120,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'sound_notification',
 	'sound_antenna',
 	'sound_channel',
+	'mutedReactions',
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	'lightTheme',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index e813722a6..8ed9de227 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -507,6 +507,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: { type: 'syuilo/bubble2', volume: 1 } as SoundStore,
 	},
+	mutedReactions: {
+		where: 'account',
+		default: [] as string[],
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期