From 4d00155a427b938d67e0888e586b699e022617d5 Mon Sep 17 00:00:00 2001
From: Nafu Satsuki <satsuki@nafusoft.dev>
Date: Sat, 14 Oct 2023 18:29:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=83=AF=E3=83=BC=E3=83=89=E3=83=9F?=
 =?UTF-8?q?=E3=83=A5=E3=83=BC=E3=83=88=E3=81=AB=E8=A9=B2=E5=BD=93=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=83=8E=E3=83=BC=E3=83=88=E3=82=92=E9=9D=9E=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E3=81=AB=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en-US.yml                             |   1 +
 locales/index.d.ts                            |   1 +
 locales/ja-JP.yml                             |   1 +
 packages/frontend/src/components/MkNote.vue   | 186 +++++++++---------
 .../frontend/src/pages/settings/general.vue   |   2 +
 packages/frontend/src/store.ts                |   4 +
 6 files changed, 100 insertions(+), 95 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 7b0f64f50d..0841adb136 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1634,6 +1634,7 @@ _wordMute:
   muteWords: "Muted words"
   muteWordsDescription: "Separate with spaces for an AND condition or with line breaks for an OR condition."
   muteWordsDescription2: "Surround keywords with slashes to use regular expressions."
+  hideMutedNotes: "Hide notes containing muted words"
 _instanceMute:
   instanceMuteDescription: "This will mute any notes/renotes from the listed instances, including those of users replying to a user from a muted instance."
   instanceMuteDescription2: "Separate with newlines"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 791ae673c4..86580f44a9 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1772,6 +1772,7 @@ export interface Locale {
         "muteWords": string;
         "muteWordsDescription": string;
         "muteWordsDescription2": string;
+        "hideMutedNotes": string;
     };
     "_instanceMute": {
         "instanceMuteDescription": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index eebd1a5830..d77b24804f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1689,6 +1689,7 @@ _wordMute:
   muteWords: "ミュートするワード"
   muteWordsDescription: "スペースで区切るとAND指定になり、改行で区切るとOR指定になります。"
   muteWordsDescription2: "キーワードをスラッシュで囲むと正規表現になります。"
+  hideMutedNotes: "ミュートされた単語を含むノートを非表示にする"
 
 _instanceMute:
   instanceMuteDescription: "ミュートしたサーバーのユーザーへの返信を含めて、設定したサーバーの全てのノートとRenoteをミュートします。"
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index eff81f3894..0743989e85 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -45,107 +45,102 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
 				<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 			</span>
-				<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i
-					class="ti ti-rocket-off"></i></span>
-				<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
-			</div>
+			<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+			<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
 		</div>
-		<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
-			<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
-			<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user"
-					 :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
-		</div>
-		<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
-			<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
-			<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
-			<div :class="$style.main">
-				<MkNoteHeader :note="appearNote" :mini="true"/>
-				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
-				<div style="container-type: inline-size;">
-					<p v-if="appearNote.cw != null" :class="$style.cw">
-						<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user"
-								 :i="$i"/>
-						<MkCwButton v-model="showContent" :note="appearNote" style="margin: 4px 0;"/>
-					</p>
-					<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
-						<div :class="$style.text">
-							<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-							<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i
-								class="ti ti-arrow-back-up"></i></MkA>
-							<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i"
-									 :emojiUrls="appearNote.emojis"/>
-							<div v-if="translating || translation" :class="$style.translation">
-								<MkLoading v-if="translating" mini/>
-								<div v-else>
-									<b>{{ i18n.t('translatedFrom', {x: translation.sourceLang}) }}: </b>
-									<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
-								</div>
+	</div>
+	<div v-if="renoteCollapsed" :class="$style.collapsedRenoteTarget">
+		<MkAvatar :class="$style.collapsedRenoteTargetAvatar" :user="appearNote.user" link preview/>
+		<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
+	</div>
+	<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
+		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
+		<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
+		<div :class="$style.main">
+			<MkNoteHeader :note="appearNote" :mini="true"/>
+			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
+			<div style="container-type: inline-size;">
+				<p v-if="appearNote.cw != null" :class="$style.cw">
+					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
+					<MkCwButton v-model="showContent" :note="appearNote" style="margin: 4px 0;"/>
+				</p>
+				<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
+					<div :class="$style.text">
+						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+						<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
+						<div v-if="translating || translation" :class="$style.translation">
+							<MkLoading v-if="translating" mini/>
+							<div v-else>
+								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
 							</div>
 						</div>
-						<div v-if="appearNote.files.length > 0">
-							<MkMediaList :mediaList="appearNote.files"/>
-						</div>
-						<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
-						<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false"
-													:class="$style.urlPreview"/>
-						<div v-if="appearNote.renote" :class="$style.quote">
-							<MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/>
-						</div>
-						<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
-							<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
-						</button>
-						<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
-							<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
-						</button>
 					</div>
-					<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel"
-							 :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}
-					</MkA>
+					<div v-if="appearNote.files.length > 0">
+						<MkMediaList :mediaList="appearNote.files"/>
+					</div>
+					<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
+					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" :class="$style.urlPreview"/>
+					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click="collapsed = false">
+						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
+					</button>
+					<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
+						<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
+					</button>
 				</div>
-				<MkReactionsViewer :note="appearNote" :maxNumber="16">
-					<template #more>
-						<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
-					</template>
-				</MkReactionsViewer>
-				<footer :class="$style.footer">
-					<button :class="$style.footerButton" class="_button" @click="reply()">
-						<i class="ti ti-arrow-back-up"></i>
-						<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
-					</button>
-					<button
-						v-if="canRenote"
-						ref="renoteButton"
-						:class="$style.footerButton"
-						class="_button"
-						@mousedown="renote()"
-					>
-						<i class="ti ti-repeat"></i>
-						<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
-					</button>
-					<button v-else :class="$style.footerButton" class="_button" disabled>
-						<i class="ti ti-ban"></i>
-					</button>
-					<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button"
-									@mousedown="react()">
-						<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
-						<i v-else class="ti ti-plus"></i>
-					</button>
-					<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button"
-									@click="undoReact(appearNote)">
-						<i class="ti ti-minus"></i>
-					</button>
-					<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton"
-									class="_button" @mousedown="clip()">
-						<i class="ti ti-paperclip"></i>
-					</button>
-					<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
-						<i class="ti ti-dots"></i>
-					</button>
-				</footer>
+				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
-		</article>
-	</div>
-	<div v-else />
+			<MkReactionsViewer :note="appearNote" :maxNumber="16">
+				<template #more>
+					<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
+				</template>
+			</MkReactionsViewer>
+			<footer :class="$style.footer">
+				<button :class="$style.footerButton" class="_button" @click="reply()">
+					<i class="ti ti-arrow-back-up"></i>
+					<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ appearNote.repliesCount }}</p>
+				</button>
+				<button
+					v-if="canRenote"
+					ref="renoteButton"
+					:class="$style.footerButton"
+					class="_button"
+					@mousedown="renote()"
+				>
+					<i class="ti ti-repeat"></i>
+					<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ appearNote.renoteCount }}</p>
+				</button>
+				<button v-else :class="$style.footerButton" class="_button" disabled>
+					<i class="ti ti-ban"></i>
+				</button>
+				<button v-if="appearNote.myReaction == null" ref="reactButton" :class="$style.footerButton" class="_button" @mousedown="react()">
+					<i v-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
+					<i v-else class="ti ti-plus"></i>
+				</button>
+				<button v-if="appearNote.myReaction != null" ref="reactButton" :class="$style.footerButton" class="_button" @click="undoReact(appearNote)">
+					<i class="ti ti-minus"></i>
+				</button>
+				<button v-if="defaultStore.state.showClipButtonInNoteFooter" ref="clipButton" :class="$style.footerButton" class="_button" @mousedown="clip()">
+					<i class="ti ti-paperclip"></i>
+				</button>
+				<button ref="menuButton" :class="$style.footerButton" class="_button" @mousedown="menu()">
+					<i class="ti ti-dots"></i>
+				</button>
+			</footer>
+		</div>
+	</article>
+</div>
+<div v-else-if="muted && !hideMutedNotes" :class="$style.muted" @click="muted = false">
+	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+		<template #name>
+			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</I18n>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -228,6 +223,7 @@ const translation = ref<any>(null);
 const translating = ref(false);
 const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || (appearNote.visibility === 'followers' && appearNote.userId === $i.id));
+const hideMutedNotes = defaultStore.state.hideMutedNotes;
 let renoteCollapsed = $ref(defaultStore.state.collapseRenotes && isRenote && (($i && ($i.id === note.userId || $i.id === appearNote.userId)) || (appearNote.myReaction != null)));
 
 const keymap = {
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 59a53b5657..03da2884bb 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -50,6 +50,7 @@ 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>
@@ -251,6 +252,7 @@ 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/store.ts b/packages/frontend/src/store.ts
index ae29849d55..d4dbb99555 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -456,6 +456,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'account',
 		default: false,
 	},
+	hideMutedNotes: {
+		where: 'device',
+		default: false,
+	},
 }));