From bbf1ba6a540d9c9859ba77e526a3eeee4fd74db6 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Fri, 20 Oct 2023 14:39:25 +0900
Subject: [PATCH] Fix: mute

---
 packages/frontend/src/components/MkNote.vue   | 20 ++++++++++++++++---
 .../frontend/src/pages/settings/general.vue   |  2 --
 .../pages/settings/mute-block.word-mute.vue   |  7 ++++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7b326ecbdd..b2374def60 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -141,6 +141,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</I18n>
 </div>
+    <div v-else-if="hideMutedNotes" />
+
 </template>
 
 <script lang="ts" setup>
@@ -274,6 +276,7 @@ function smallerVisibility(a: Visibility | string, b: Visibility | string): Visi
 }
 
 function renote(viaKeyboard = false) {
+    if (muted && !hideMutedNotes) return;
 	pleaseLogin();
 	showMovedDialog();
 
@@ -286,7 +289,7 @@ function renote(viaKeyboard = false) {
 			action: () => {
 				const el = renoteButton.value as HTMLElement | null | undefined;
 				if (el) {
-					const rect = el.getBoundingClientRect();
+					const rect = el?.getBoundingClientRect();
 					const x = rect.left + (el.offsetWidth / 2);
 					const y = rect.top + (el.offsetHeight / 2);
 					os.popup(MkRippleEffect, {x, y}, {}, 'end');
@@ -317,7 +320,7 @@ function renote(viaKeyboard = false) {
 		action: () => {
 			const el = renoteButton.value as HTMLElement | null | undefined;
 			if (el) {
-				const rect = el.getBoundingClientRect();
+				const rect = el?.getBoundingClientRect();
 				const x = rect.left + (el.offsetWidth / 2);
 				const y = rect.top + (el.offsetHeight / 2);
 				os.popup(MkRippleEffect, {x, y}, {}, 'end');
@@ -356,6 +359,7 @@ function renote(viaKeyboard = false) {
 }
 
 function reply(viaKeyboard = false): void {
+    if (muted && !hideMutedNotes) return;
 	pleaseLogin();
 	os.post({
 		reply: appearNote,
@@ -367,6 +371,7 @@ function reply(viaKeyboard = false): void {
 }
 
 function react(viaKeyboard = false): void {
+    if (muted && !hideMutedNotes) return;
 	pleaseLogin();
 	showMovedDialog();
 	if (appearNote.reactionAcceptance === 'likeOnly') {
@@ -376,7 +381,7 @@ function react(viaKeyboard = false): void {
 		});
 		const el = reactButton.value as HTMLElement | null | undefined;
 		if (el) {
-			const rect = el.getBoundingClientRect();
+			const rect = el?.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);
 			os.popup(MkRippleEffect, {x, y}, {}, 'end');
@@ -398,6 +403,7 @@ function react(viaKeyboard = false): void {
 }
 
 function undoReact(note): void {
+    if (muted && !hideMutedNotes) return;
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
 	os.api('notes/reactions/delete', {
@@ -406,6 +412,7 @@ function undoReact(note): void {
 }
 
 function onContextmenu(ev: MouseEvent): void {
+    if (muted && !hideMutedNotes) return;
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
 		// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
@@ -434,6 +441,7 @@ function onContextmenu(ev: MouseEvent): void {
 }
 
 function menu(viaKeyboard = false): void {
+    if (muted && !hideMutedNotes) return;
 	const {menu, cleanup} = getNoteMenu({
 		note: note,
 		translating,
@@ -448,6 +456,7 @@ function menu(viaKeyboard = false): void {
 }
 
 async function clip() {
+    if (muted && !hideMutedNotes) return;
 	os.popupMenu(await getNoteClipMenu({
 		note: note,
 		isDeleted,
@@ -456,6 +465,7 @@ async function clip() {
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
+    if (muted && !hideMutedNotes) return;
 	function getUnrenote(): MenuItem {
 		return {
 			text: i18n.ts.unrenote,
@@ -492,18 +502,22 @@ function showRenoteMenu(viaKeyboard = false): void {
 }
 
 function focus() {
+    if (muted && !hideMutedNotes) return;
 	el.value.focus();
 }
 
 function blur() {
+    if (muted && !hideMutedNotes) return;
 	el.value.blur();
 }
 
 function focusBefore() {
+    if (muted && !hideMutedNotes) return;
 	focusPrev(el.value);
 }
 
 function focusAfter() {
+    if (muted && !hideMutedNotes) return;
 	focusNext(el.value);
 }
 
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 03da2884bb..59a53b5657 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -50,7 +50,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch v-model="showNoteActionsOnlyHover">{{ i18n.ts.showNoteActionsOnlyHover }}</MkSwitch>
 				<MkSwitch v-model="showClipButtonInNoteFooter">{{ i18n.ts.showClipButtonInNoteFooter }}</MkSwitch>
 				<MkSwitch v-model="collapseRenotes">{{ i18n.ts.collapseRenotes }}</MkSwitch>
-				<MkSwitch v-model="hideMutedNotes">{{ i18n.ts.hideMutedNotes }}</MkSwitch>
 				<MkSwitch v-model="showVisibilityColor">{{ i18n.ts.showVisibilityColor}}</MkSwitch>
         <MkColorInput v-if="showVisibilityColor" v-model="homeColor">
           <template #label>{{ i18n.ts._visibility.home }}</template>
@@ -252,7 +251,6 @@ const showNoteActionsOnlyHover = computed(defaultStore.makeGetterSetter('showNot
 const showClipButtonInNoteFooter = computed(defaultStore.makeGetterSetter('showClipButtonInNoteFooter'));
 const reactionsDisplaySize = computed(defaultStore.makeGetterSetter('reactionsDisplaySize'));
 const collapseRenotes = computed(defaultStore.makeGetterSetter('collapseRenotes'));
-const hideMutedNotes = computed(defaultStore.makeGetterSetter('hideMutedNotes'));
 const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
 const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
diff --git a/packages/frontend/src/pages/settings/mute-block.word-mute.vue b/packages/frontend/src/pages/settings/mute-block.word-mute.vue
index 25a836ea55..5c8b0c30df 100644
--- a/packages/frontend/src/pages/settings/mute-block.word-mute.vue
+++ b/packages/frontend/src/pages/settings/mute-block.word-mute.vue
@@ -11,12 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
 		</MkTextarea>
 	</div>
+    <MkSwitch v-model="hideMutedNotes">{{ i18n.ts._wordMute.hideMutedNotes }}</MkSwitch>
 	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import {computed, ref, watch} from 'vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -28,6 +29,7 @@ import { defaultStore } from '@/store.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkSwitch from "@/components/MkSwitch.vue";
 
 const render = (mutedWords) => mutedWords.map(x => {
 	if (Array.isArray(x)) {
@@ -37,10 +39,9 @@ const render = (mutedWords) => mutedWords.map(x => {
 	}
 }).join('\n');
 
-const tab = ref('soft');
 const mutedWords = ref(render($i!.mutedWords));
 const changed = ref(false);
-
+const hideMutedNotes = computed(defaultStore.makeGetterSetter('hideMutedNotes'));
 watch(mutedWords, () => {
 	changed.value = true;
 });