merge: Fix "show muted word" setting (!1016)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1016

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

packages/frontend-shared/js/i18n.ts

@@ -59,6 +59,7 @@ export class I18n<T extends ILocale> {
 					if (typeof value === 'string') {
 						const parameters = Array.from(value.matchAll(/\{(\w+)\}/g), ([, parameter]) => parameter);
 
+						// TODO add a flag to suppress this warning from uses of <I18n> component
 						if (parameters.length) {
 							console.error(`Missing locale parameters: ${parameters.join(', ')} at ${String(p)}`);
 						}

packages/frontend/src/components/MkNote.vue

@@ -171,24 +171,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</article>
 </div>
 <div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
-	<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
-	<I18n v-else-if="showSoftWordMutedWord !== true" :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
-	<I18n v-else :src="i18n.ts.userSaysSomethingAbout" tag="small">
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-		<template #word>
-			{{ Array.isArray(muted) ? muted.map(words => Array.isArray(words) ? words.join() : words).slice(0, 3).join(' ') : muted }}
-		</template>
-	</I18n>
 </div>
 <div v-else>
 	<!--
@@ -224,7 +207,7 @@ import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import MkButton from '@/components/MkButton.vue';
 import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import number from '@/filters/number.js';
@@ -253,6 +236,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { useRouter } from '@/router.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -272,8 +256,6 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-const inTimeline = inject<boolean>('inTimeline', false);
-const tl_withSensitive = inject<Ref<boolean>>('tl_withSensitive', ref(true));
 const inChannel = inject('inChannel', null);
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
 
@@ -327,9 +309,7 @@ const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
 const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
 const isDeleted = ref(false);
 const renoted = ref(false);
-const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
+const { muted, hardMuted } = checkMutes(appearNote.value, props.withHardMute);
-const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords, true));
-const showSoftWordMutedWord = computed(() => prefer.s.showSoftWordMutedWord);
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@@ -354,31 +334,6 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const renoteTooltip = computeRenoteTooltip(renoted);
 
-/* Overload FunctionにLintが対応していないのでコメントアウト
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): Array<string | string[]> | false | 'sensitiveMute';
-*/
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly = false): Array<string | string[]> | false | 'sensitiveMute' {
-	if (mutedWords != null) {
-		const result = checkWordMute(noteToCheck, $i, mutedWords);
-		if (Array.isArray(result)) return result;
-
-		const replyResult = noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords);
-		if (Array.isArray(replyResult)) return replyResult;
-
-		const renoteResult = noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords);
-		if (Array.isArray(renoteResult)) return renoteResult;
-	}
-
-	if (checkOnly) return false;
-
-	if (inTimeline && tl_withSensitive.value === false && noteToCheck.files?.some((v) => v.isSensitive)) {
-		return 'sensitiveMute';
-	}
-
-	return false;
-}
-
 let renoting = false;
 
 const keymap = {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -230,11 +230,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </div>
 <div v-else class="_panel" :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
 </div>
 </template>
 
@@ -260,7 +256,7 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
 import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { userPage } from '@/filters/user.js';
 import { notePage } from '@/filters/note.js';
 import number from '@/filters/number.js';
@@ -290,6 +286,7 @@ import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -340,7 +337,6 @@ const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(prefer.s.uncollapseCW);
 const isDeleted = ref(false);
 const renoted = ref(false);
-const muted = ref($i ? checkWordMute(appearNote.value, $i, $i.mutedWords) : false);
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
@@ -358,6 +354,8 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const renoteTooltip = computeRenoteTooltip(renoted);
 
+const { muted } = checkMutes(appearNote.value);
+
 watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
 });

packages/frontend/src/components/MkNoteSub.vue

@@ -73,11 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </div>
 <div v-else :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
 </div>
 </template>
 
@@ -99,7 +95,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { userPage } from '@/filters/user.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { pleaseLogin } from '@/utility/please-login.js';
 import { showMovedDialog } from '@/utility/show-moved-dialog.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
@@ -109,6 +105,7 @@ import { getNoteMenu } from '@/utility/get-note-menu.js';
 import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
 import { prefer } from '@/preferences.js';
 import { useNoteCapture } from '@/use/use-note-capture.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -126,7 +123,6 @@ const props = withDefaults(defineProps<{
 const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
 
 const el = shallowRef<HTMLElement>();
-const muted = computed(() => $i ? checkWordMute(props.note, $i, $i.mutedWords) : false);
 const translation = ref<any>(null);
 const translating = ref(false);
 const isDeleted = ref(false);
@@ -170,6 +166,8 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
+const { muted } = checkMutes(appearNote.value);
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,

packages/frontend/src/components/SkFollowingFeedEntry.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="$style.root" @click="$emit('select', note.user)">
+<div v-if="!hardMuted" :class="$style.root" @click="$emit('select', note.user)">
 	<div :class="$style.avatar">
 		<MkAvatar :class="$style.icon" :user="note.user" indictor/>
 	</div>
@@ -18,11 +18,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkA>
 		</header>
 		<div>
-			<div v-if="isMuted" :class="[$style.text, $style.muted]">({{ i18n.ts.postFiltered }})</div>
+			<div v-if="muted" :class="[$style.text, $style.muted]">
+				<SkMutedNote :muted="muted" :note="note"></SkMutedNote>
+			</div>
 			<Mfm v-else :class="$style.text" :text="getNoteSummary(note)" :isBlock="true" :plain="true" :nowrap="false" :isNote="true" nyaize="respect" :author="note.user"/>
 		</div>
 	</div>
 </div>
+<div v-else>
+	<!--
+		MkDateSeparatedList uses TransitionGroup which requires single element in the child elements
+		so MkNote create empty div instead of no elements
+	-->
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -30,19 +38,19 @@ import * as Misskey from 'misskey-js';
 import { getNoteSummary } from '@/utility/get-note-summary.js';
 import { userPage } from '@/filters/user.js';
 import { notePage } from '@/filters/note.js';
-import { i18n } from '@/i18n.js';
+import { checkMutes } from '@/utility/check-word-mute';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
-withDefaults(defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note,
-	isMuted: boolean
+}>();
-}>(), {
-	isMuted: false,
-});
 
 defineEmits<{
 	(event: 'select', user: Misskey.entities.UserLite): void
 }>();
 
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const { muted, hardMuted } = checkMutes(props.note);
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/SkFollowingRecentNotes.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template #default="{ items: notes }">
 			<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
-				<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
+				<SkFollowingFeedEntry :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
 			</MkDateSeparatedList>
 		</template>
 	</MkPagination>
@@ -23,17 +23,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import * as Misskey from 'misskey-js';
 import { computed, shallowRef } from 'vue';
-import type { FollowingFeedTab } from '@/types/following-feed.js';
 import type { Paging } from '@/components/MkPagination.vue';
+import type { FollowingFeedTab } from '@/types/following-feed.js';
 import { infoImageUrl } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import SkFollowingFeedEntry from '@/components/SkFollowingFeedEntry.vue';
-import { $i } from '@/i.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 
 const props = defineProps<{
@@ -84,37 +81,6 @@ const latestNotesPagination: Paging<'notes/following'> = {
 };
 
 const latestNotesPaging = shallowRef<InstanceType<typeof MkPagination>>();
-
-function isSoftMuted(note: Misskey.entities.Note): boolean {
-	return isMuted(note, $i?.mutedWords);
-}
-
-function isHardMuted(note: Misskey.entities.Note): boolean {
-	return isMuted(note, $i?.hardMutedWords);
-}
-
-// Match the typing used by Misskey
-type Mutes = (string | string[])[] | null | undefined;
-
-// Adapted from MkNote.ts
-function isMuted(note: Misskey.entities.Note, mutes: Mutes): boolean {
-	return checkMute(note, mutes)
-		|| checkMute(note.reply, mutes)
-		|| checkMute(note.renote, mutes);
-}
-
-// Adapted from check-word-mute.ts
-function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): boolean {
-	if (!note) {
-		return false;
-	}
-
-	if (!mutes || mutes.length < 1) {
-		return false;
-	}
-
-	return !!checkWordMute(note, $i, mutes);
-}
 </script>
 
 <style module lang="scss">

packages/frontend/src/components/SkMutedNote.vue

@@ -0,0 +1,45 @@
+<!--
+SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
+	<template #name>
+		<MkUserName :user="note.user"/>
+	</template>
+</I18n>
+<I18n v-else-if="prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomething" tag="small">
+	<template #name>
+		<MkUserName :user="note.user"/>
+	</template>
+</I18n>
+<I18n v-else :src="i18n.ts.userSaysSomethingAbout" tag="small">
+	<template #name>
+		<MkUserName :user="note.user"/>
+	</template>
+	<template #word>
+		{{ mutedWords }}
+	</template>
+</I18n>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed } from 'vue';
+import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
+
+const props = defineProps<{
+	muted: false | 'sensitiveMute' | string[];
+	note: Misskey.entities.Note;
+}>();
+
+const mutedWords = computed(() => Array.isArray(props.muted)
+	? props.muted.join(', ')
+	: props.muted);
+</script>
+
+<style module lang="scss">
+
+</style>

packages/frontend/src/components/SkNote.vue

@@ -172,24 +172,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</article>
 </div>
 <div v-else-if="!hardMuted" :class="$style.muted" @click="muted = false">
-	<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
-	<I18n v-else-if="showSoftWordMutedWord !== true" :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
-	<I18n v-else :src="i18n.ts.userSaysSomethingAbout" tag="small">
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-		<template #word>
-			{{ Array.isArray(muted) ? muted.map(words => Array.isArray(words) ? words.join() : words).slice(0, 3).join(' ') : muted }}
-		</template>
-	</I18n>
 </div>
 <div v-else>
 	<!--
@@ -224,7 +207,7 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import MkButton from '@/components/MkButton.vue';
 import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import number from '@/filters/number.js';
@@ -253,6 +236,7 @@ import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
 import { useRouter } from '@/router.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -272,8 +256,6 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-const inTimeline = inject<boolean>('inTimeline', false);
-const tl_withSensitive = inject<Ref<boolean>>('tl_withSensitive', ref(true));
 const inChannel = inject('inChannel', null);
 const currentClip = inject<Ref<Misskey.entities.Clip> | null>('currentClip', null);
 
@@ -327,9 +309,7 @@ const isLong = shouldCollapsed(appearNote.value, urls.value ?? []);
 const collapsed = ref(prefer.s.expandLongNote && appearNote.value.cw == null && isLong ? false : appearNote.value.cw == null && isLong);
 const isDeleted = ref(false);
 const renoted = ref(false);
-const muted = ref(checkMute(appearNote.value, $i?.mutedWords));
+const { muted, hardMuted } = checkMutes(appearNote.value, props.withHardMute);
-const hardMuted = ref(props.withHardMute && checkMute(appearNote.value, $i?.hardMutedWords, true));
-const showSoftWordMutedWord = computed(() => prefer.s.showSoftWordMutedWord);
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@@ -354,31 +334,6 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const renoteTooltip = computeRenoteTooltip(renoted);
 
-/* Overload FunctionにLintが対応していないのでコメントアウト
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: true): boolean;
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly: false): Array<string | string[]> | false | 'sensitiveMute';
-*/
-function checkMute(noteToCheck: Misskey.entities.Note, mutedWords: Array<string | string[]> | undefined | null, checkOnly = false): Array<string | string[]> | false | 'sensitiveMute' {
-	if (mutedWords != null) {
-		const result = checkWordMute(noteToCheck, $i, mutedWords);
-		if (Array.isArray(result)) return result;
-
-		const replyResult = noteToCheck.reply && checkWordMute(noteToCheck.reply, $i, mutedWords);
-		if (Array.isArray(replyResult)) return replyResult;
-
-		const renoteResult = noteToCheck.renote && checkWordMute(noteToCheck.renote, $i, mutedWords);
-		if (Array.isArray(renoteResult)) return renoteResult;
-	}
-
-	if (checkOnly) return false;
-
-	if (inTimeline && tl_withSensitive.value === false && noteToCheck.files?.some((v) => v.isSensitive)) {
-		return 'sensitiveMute';
-	}
-
-	return false;
-}
-
 let renoting = false;
 
 const keymap = {

packages/frontend/src/components/SkNoteDetailed.vue

@@ -235,11 +235,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </div>
 <div v-else class="_panel" :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
 </div>
 </template>
 
@@ -265,7 +261,7 @@ import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import SkInstanceTicker from '@/components/SkInstanceTicker.vue';
 import { pleaseLogin } from '@/utility/please-login.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { userPage } from '@/filters/user.js';
 import { notePage } from '@/filters/note.js';
 import number from '@/filters/number.js';
@@ -295,6 +291,7 @@ import { getAppearNote } from '@/utility/get-appear-note.js';
 import { prefer } from '@/preferences.js';
 import { getPluginHandlers } from '@/plugin.js';
 import { DI } from '@/di.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -346,7 +343,6 @@ const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(prefer.s.uncollapseCW);
 const isDeleted = ref(false);
 const renoted = ref(false);
-const muted = ref($i ? checkWordMute(appearNote.value, $i, $i.mutedWords) : false);
 const translation = ref<Misskey.entities.NotesTranslateResponse | null>(null);
 const translating = ref(false);
 const parsed = appearNote.value.text ? mfm.parse(appearNote.value.text) : null;
@@ -364,6 +360,8 @@ const mergedCW = computed(() => computeMergedCw(appearNote.value));
 
 const renoteTooltip = computeRenoteTooltip(renoted);
 
+const { muted } = checkMutes(appearNote.value);
+
 watch(() => props.expandAllCws, (expandAllCws) => {
 	if (expandAllCws !== showContent.value) showContent.value = expandAllCws;
 });

packages/frontend/src/components/SkNoteSub.vue

@@ -81,16 +81,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </div>
 <div v-else :class="$style.muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+	<SkMutedNote :muted="muted" :note="appearNote"></SkMutedNote>
-		<template #name>
-			<MkUserName :user="appearNote.user"/>
-		</template>
-	</I18n>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, shallowRef, watch } from 'vue';
+import { computed, inject, ref, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import { host } from '@@/js/config.js';
@@ -107,7 +103,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { userPage } from '@/filters/user.js';
-import { checkWordMute } from '@/utility/check-word-mute.js';
+import { checkMutes } from '@/utility/check-word-mute.js';
 import { pleaseLogin } from '@/utility/please-login.js';
 import { showMovedDialog } from '@/utility/show-moved-dialog.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
@@ -117,6 +113,7 @@ import { getNoteMenu } from '@/utility/get-note-menu.js';
 import { boostMenuItems, computeRenoteTooltip } from '@/utility/boost-quote.js';
 import { prefer } from '@/preferences.js';
 import { useNoteCapture } from '@/use/use-note-capture.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -140,7 +137,6 @@ const canRenote = computed(() => ['public', 'home'].includes(props.note.visibili
 const hideLine = computed(() => props.detail);
 
 const el = shallowRef<HTMLElement>();
-const muted = ref($i ? checkWordMute(props.note, $i, $i.mutedWords) : false);
 const translation = ref<any>(null);
 const translating = ref(false);
 const isDeleted = ref(false);
@@ -184,6 +180,8 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
+const { muted } = checkMutes(appearNote.value);
+
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,

packages/frontend/src/components/SkPatternTest.vue

@@ -44,7 +44,7 @@ function testWordMutes() {
 	try {
 		const mutes = parseMutes(props.mutedWords);
 		const matches = checkWordMute(testWords.value, null, mutes);
-		testMatches.value = matches ? matches.flat(2).join(', ') : '';
+		testMatches.value = matches ? matches.join(', ') : '';
 	} catch {
 		// Error is displayed by above function
 		testMatches.value = null;

packages/frontend/src/utility/check-word-mute.ts

@@ -3,8 +3,49 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import * as Misskey from 'misskey-js';
+import { inject, ref } from 'vue';
+import type { Ref } from 'vue';
+import { $i } from '@/i';
+
+export function checkMutes(noteToCheck: Misskey.entities.Note, withHardMute = false) {
+	const muted = ref(checkMute(noteToCheck, $i?.mutedWords));
+	const hardMuted = ref(withHardMute && checkMute(noteToCheck, $i?.hardMutedWords, true));
+	return { muted, hardMuted };
+}
+
+export function checkMute(note: Misskey.entities.Note, mutes: undefined | null): false;
+export function checkMute(note: Misskey.entities.Note, mutes: undefined | null, checkOnly: false): false;
+export function checkMute(note: Misskey.entities.Note, mutes: undefined | null, checkOnly?: boolean): false | 'sensitiveMute';
+export function checkMute(note: Misskey.entities.Note, mutes: Array<string | string[]> | undefined | null): string[] | false;
+export function checkMute(note: Misskey.entities.Note, mutes: Array<string | string[]> | undefined | null, checkOnly: false): string[] | false;
+export function checkMute(note: Misskey.entities.Note, mutes: Array<string | string[]> | undefined | null, checkOnly?: boolean): string[] | false | 'sensitiveMute';
+export function checkMute(note: Misskey.entities.Note, mutes: Array<string | string[]> | undefined | null, checkOnly = false): string[] | false | 'sensitiveMute' {
+	if (mutes != null) {
+		const result =
+			checkWordMute(note, $i, mutes)
+			|| checkWordMute(note.reply, $i, mutes)
+			|| checkWordMute(note.renote, $i, mutes);
+
+		// Only continue to sensitiveMute if we don't match any *actual* mutes
+		if (result) {
+			return result;
+		}
+	}
+
+	if (checkOnly) {
+		const inTimeline = inject<boolean>('inTimeline', false);
+		const tl_withSensitive = inject<Ref<boolean> | null>('tl_withSensitive', null);
+		if (inTimeline && tl_withSensitive?.value === false && note.files?.some((v) => v.isSensitive)) {
+			return 'sensitiveMute';
+		}
+	}
+
+	return false;
+}
+
+export function checkWordMute(note: string | Misskey.entities.Note | undefined | null, me: Misskey.entities.UserLite | null | undefined, mutedWords: Array<string | string[]>): string[] | false {
+	if (note == null) return false;
 
-export function checkWordMute(note: string | Misskey.entities.Note, me: Misskey.entities.UserLite | null | undefined, mutedWords: Array<string | string[]>): Array<string | string[]> | false {
 	// 自分自身
 	if (me && typeof(note) === 'object' && (note.userId === me.id)) return false;
 
@@ -13,30 +54,37 @@ export function checkWordMute(note: string | Misskey.entities.Note, me: Misskey.
 
 		if (text === '') return false;
 
-		const matched = mutedWords.filter(filter => {
+		const matched = mutedWords.reduce((matchedWords, filter) => {
 			if (Array.isArray(filter)) {
 				// Clean up
 				const filteredFilter = filter.filter(keyword => keyword !== '');
-				if (filteredFilter.length === 0) return false;
+				if (filteredFilter.length > 0 && filteredFilter.every(keyword => text.includes(keyword))) {
-
+					const fullFilter = filteredFilter.join(' ');
-				return filteredFilter.every(keyword => text.includes(keyword));
+					matchedWords.add(fullFilter);
+				}
 			} else {
 				// represents RegExp
 				const regexp = filter.match(/^\/(.+)\/(.*)$/);
 
 				// This should never happen due to input sanitisation.
-				if (!regexp) return false;
+				if (regexp) {
-
 					try {
-					return new RegExp(regexp[1], regexp[2]).test(text);
+						const flags = regexp[2].includes('g') ? regexp[2] : (regexp[2] + 'g');
-				} catch (err) {
+						const matches = text.matchAll(new RegExp(regexp[1], flags));
+						for (const match of matches) {
+							matchedWords.add(match[0]);
+						}
+					} catch {
 						// This should never happen due to input sanitisation.
-					return false;
 					}
 				}
-		});
+			}
 
-		if (matched.length > 0) return matched;
+			return matchedWords;
+		}, new Set<string>());
+
+		// Nested arrays are intentional, otherwise the note components will join with space (" ") and it's confusing.
+		if (matched.size > 0) return Array.from(matched);
 	}
 
 	return false;

packages/frontend/src/utility/following-feed-utils.ts

@@ -149,3 +149,4 @@ function createDefaultStorage(): Ref<StorageInterface> {
 		},
 	}));
 }
+