From 54ad6438af52b2a0094a8cf478d7bc3cc2442d7c Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Fri, 27 Jun 2025 18:52:08 -0400
Subject: [PATCH] refactor note mutes and render mandatoryCW as a mute

---
 locales/index.d.ts                            |   4 +
 packages/frontend/src/components/MkNote.vue   |  47 +---
 .../src/components/MkNoteDetailed.vue         |  40 +--
 .../frontend/src/components/MkNoteSimple.vue  |   8 +-
 .../frontend/src/components/MkNoteSub.vue     |  29 +--
 .../src/components/SkFollowingFeedEntry.vue   |  27 +-
 .../frontend/src/components/SkMutedNote.vue   | 119 ++++++---
 packages/frontend/src/components/SkNote.vue   |  45 +---
 .../src/components/SkNoteDetailed.vue         |  39 +--
 .../frontend/src/components/SkNoteSimple.vue  |   8 +-
 .../frontend/src/components/SkNoteSub.vue     |  26 +-
 .../frontend/src/utility/check-word-mute.ts   | 240 +++++++++++-------
 sharkey-locales/en-US.yml                     |   1 +
 13 files changed, 304 insertions(+), 329 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7f20c6803f..bb953a4a5e 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -12084,6 +12084,10 @@ export interface Locale extends ILocale {
      * {name} said something in a muted thread
      */
     "userSaysSomethingInMutedThread": ParameterizedString<"name">;
+    /**
+     * {name} is flagged: "{cw}"
+     */
+    "userIsFlaggedAs": ParameterizedString<"name" | "cw">;
     /**
      * Mark all media from user as NSFW
      */
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index cd36bc2b89..fd752eb3f8 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -4,11 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	v-if="!hardMuted && muted === false && !threadMuted && !noteMuted"
+<SkMutedNote
 	v-show="!isDeleted"
-	ref="rootEl"
+	ref="rootComp"
 	v-hotkey="keymap"
+	:note="appearNote"
+	:withHardMute="withHardMute"
 	:class="[$style.root, { [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
@@ -57,10 +58,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkInstanceTicker v-if="showTicker" :host="appearNote.user.host" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<bdi>
-				<p v-if="mergedCW != null" :class="$style.cw">
+				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm
-						v-if="mergedCW != ''"
-						:text="mergedCW"
+						v-if="appearNote.cw != ''"
+						:text="appearNote.cw"
 						:author="appearNote.user"
 						:nyaize="'respect'"
 						:enableEmojiMenu="true"
@@ -69,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					/>
 					<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;" @click.stop/>
 				</p>
-				<div v-show="mergedCW == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
+				<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>
 						<div>
@@ -167,16 +168,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</footer>
 		</div>
 	</article>
-</div>
-<div v-else-if="!hardMuted" :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</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>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
@@ -186,7 +178,6 @@ import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
 import { shouldCollapsed } from '@@/js/collapsed.js';
 import * as config from '@@/js/config.js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import type { Ref } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
@@ -205,7 +196,6 @@ 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 { 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';
@@ -217,7 +207,7 @@ import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
 import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
-import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
+import { getAbuseNoteMenu, getCopyNoteLinkMenu, getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
 import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
 import { useNoteCapture } from '@/use/use-note-capture.js';
 import { deepClone } from '@/utility/clone.js';
@@ -272,7 +262,8 @@ function noteclick(id: string) {
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
-const rootEl = useTemplateRef('rootEl');
+const rootComp = useTemplateRef('rootComp');
+const rootEl = computed(() => rootComp.value?.rootEl ?? null);
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
 const renoteTime = useTemplateRef('renoteTime');
@@ -291,7 +282,6 @@ const selfNoteIds = computed(() => getSelfNoteIds(props.note));
 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 { muted, hardMuted, threadMuted, noteMuted } = checkMutes(appearNote, computed(() => props.withHardMute));
 const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
 const translating = ref(false);
 const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@@ -314,8 +304,6 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
 }));
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const renoteTooltip = computeRenoteTooltip(appearNote);
 
 let renoting = false;
@@ -1291,16 +1279,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 }
 
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
-}
+// Mute CSS moved to SkMutedNote.vue
 
 .reactionOmitted {
 	display: inline-block;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 773cac73ac..98582c56fc 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div
-	v-if="!muted && !threadMuted && !noteMuted"
+<SkMutedNote
 	v-show="!isDeleted"
-	ref="rootEl"
+	ref="rootComp"
 	v-hotkey="keymap"
+	:note="appearNote"
 	:class="$style.root"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
@@ -75,10 +75,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</header>
 		<div :class="$style.noteContent">
-			<p v-if="mergedCW != null" :class="$style.cw">
+			<p v-if="appearNote.cw != null" :class="$style.cw">
 				<Mfm
-					v-if="mergedCW != ''"
-					:text="mergedCW"
+					v-if="appearNote.cw != ''"
+					:text="appearNote.cw"
 					:author="appearNote.user"
 					:nyaize="'respect'"
 					:enableEmojiMenu="true"
@@ -87,7 +87,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				/>
 				<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
 			</p>
-			<div v-show="mergedCW == null || showContent">
+			<div v-show="appearNote.cw == null || showContent">
 				<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 				<div>
 					<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
@@ -225,10 +225,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkPagination>
 		</div>
 	</div>
-</div>
-<div v-else class="_panel" :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
@@ -253,7 +250,6 @@ 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 { 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';
@@ -264,7 +260,7 @@ import { reactionPicker } from '@/utility/reaction-picker.js';
 import { extractUrlFromMfm } from '@/utility/extract-url-from-mfm.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
-import { getNoteClipMenu, getNoteMenu, getRenoteMenu, translateNote } from '@/utility/get-note-menu.js';
+import { getNoteClipMenu, getNoteMenu, translateNote } from '@/utility/get-note-menu.js';
 import { getNoteVersionsMenu } from '@/utility/get-note-versions-menu.js';
 import { checkAnimationFromMfm } from '@/utility/check-animated-mfm.js';
 import { useNoteCapture } from '@/use/use-note-capture.js';
@@ -302,7 +298,8 @@ const note = ref(deepClone(props.note));
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
-const rootEl = useTemplateRef('rootEl');
+const rootComp = useTemplateRef('rootComp');
+const rootEl = computed(() => rootComp.value?.rootEl ?? null);
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
 const renoteTime = useTemplateRef('renoteTime');
@@ -329,12 +326,8 @@ const quotes = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const renoteTooltip = computeRenoteTooltip(appearNote);
 
-const { muted, threadMuted, noteMuted } = checkMutes(appearNote);
-
 setupNoteViewInterruptors(note, isDeleted);
 
 watch(() => props.expandAllCws, (expandAllCws) => {
@@ -1149,14 +1142,5 @@ function animatedMFM() {
 	}
 }
 
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
-}
+// Mute CSS moved to SkMutedNote.vue
 </style>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
index 2fd32f0f82..ba3719cf85 100644
--- a/packages/frontend/src/components/MkNoteSimple.vue
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -9,11 +9,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.main">
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div>
-			<p v-if="mergedCW != null" :class="$style.cw">
-				<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+			<p v-if="props.note.cw != null" :class="$style.cw">
+				<Mfm v-if="props.note.cw != ''" style="margin-right: 8px;" :text="props.note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
 				<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
 			</p>
-			<div v-show="mergedCW == null || showContent">
+			<div v-show="props.note.cw == null || showContent">
 				<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
 				<div v-if="note.isSchedule" style="margin-top: 10px;">
 					<MkButton :class="$style.button" inline @click.stop.prevent="editScheduleNote()"><i class="ti ti-eraser"></i> {{ i18n.ts.edit }}</MkButton>
@@ -53,8 +53,6 @@ const isDeleted = ref(false);
 
 const note = ref(deepClone(props.note));
 
-const mergedCW = computed(() => computeMergedCw(note.value));
-
 if (!note.value.isSchedule) {
 	setupNoteViewInterruptors(note, null);
 }
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
index 948472d6ea..1c66d5580b 100644
--- a/packages/frontend/src/components/MkNoteSub.vue
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -4,18 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-show="!isDeleted" v-if="!muted && !noteMuted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
+<SkMutedNote v-show="!isDeleted" ref="rootComp" :note="appearNote" :mutedClass="$style.muted" :expandedClass="[$style.root, { [$style.children]: depth > 1 }]">
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 		<div :class="$style.body">
 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 			<div :class="$style.content">
-				<p v-if="mergedCW != null" :class="$style.cw">
-					<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
+				<p v-if="appearNote.cw != null" :class="$style.cw">
+					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
 					<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
 				</p>
-				<div v-show="mergedCW == null || showContent">
+				<div v-show="appearNote.cw == null || showContent">
 					<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
 				</div>
 			</div>
@@ -77,16 +77,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
 	</div>
-</div>
-<div v-else :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="false" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import * as config from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { Visibility } from '@/utility/boost-quote.js';
@@ -102,7 +98,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { userPage } from '@/filters/user.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';
@@ -137,7 +132,8 @@ const appearNote = computed(() => getAppearNote(note.value));
 
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || appearNote.value.userId === $i?.id);
 
-const el = shallowRef<HTMLElement>();
+const rootComp = useTemplateRef('rootComp');
+const el = computed(() => rootComp.value?.rootEl ?? null);
 const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
 const translating = ref(false);
 const isDeleted = ref(false);
@@ -153,8 +149,6 @@ const renoteTooltip = computeRenoteTooltip(appearNote);
 const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
 const replies = ref<Misskey.entities.Note[]>([]);
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
 	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
@@ -177,8 +171,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
-const { muted, noteMuted } = checkMutes(appearNote);
-
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
@@ -504,15 +496,8 @@ if (props.detail) {
 }
 
 .muted {
-	text-align: center;
-	padding: 8px !important;
 	border: 1px solid var(--MI_THEME-divider);
 	margin: 8px 8px 0 8px;
 	border-radius: var(--MI-radius-sm);
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
 }
 </style>
diff --git a/packages/frontend/src/components/SkFollowingFeedEntry.vue b/packages/frontend/src/components/SkFollowingFeedEntry.vue
index 9edff66977..047ec9144b 100644
--- a/packages/frontend/src/components/SkFollowingFeedEntry.vue
+++ b/packages/frontend/src/components/SkFollowingFeedEntry.vue
@@ -6,7 +6,7 @@ Selectable entry on the "Following" feed, displaying a user with their most rece
 -->
 
 <template>
-<div v-if="!hardMuted" :class="$style.root" @click="$emit('select', note.user)">
+<SkMutedNote :note="note" :mutedClass="$style.muted" :expandedClass="$style.root" @click="$emit('select', note.user)">
 	<div :class="$style.avatar">
 		<MkAvatar :class="$style.icon" :user="note.user" indictor/>
 	</div>
@@ -20,39 +20,26 @@ Selectable entry on the "Following" feed, displaying a user with their most rece
 			</MkA>
 		</header>
 		<div>
-			<div v-if="muted || threadMuted || noteMuted" :class="[$style.text, $style.muted]">
-				<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :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"/>
+			<Mfm :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>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { computed } from 'vue';
 import { getNoteSummary } from '@/utility/get-note-summary.js';
 import { userPage } from '@/filters/user.js';
 import { notePage } from '@/filters/note.js';
-import { checkMutes } from '@/utility/check-word-mute';
 import SkMutedNote from '@/components/SkMutedNote.vue';
 
-const props = defineProps<{
+defineProps<{
 	note: Misskey.entities.Note,
 }>();
 
 defineEmits<{
 	(event: 'select', user: Misskey.entities.UserLite): void
 }>();
-
-const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => props.note));
 </script>
 
 <style lang="scss" module>
@@ -67,6 +54,10 @@ const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => p
 	cursor: pointer;
 }
 
+.root:hover {
+	background: var(--MI_THEME-buttonBg);
+}
+
 .avatar {
 	align-self: center;
 	flex-shrink: 0;
@@ -116,6 +107,8 @@ const { muted, hardMuted, threadMuted, noteMuted } = checkMutes(computed(() => p
 
 .muted {
 	font-style: italic;
+	align-items: center;
+	justify-content: center;
 }
 
 @container (max-width: 600px) {
diff --git a/packages/frontend/src/components/SkMutedNote.vue b/packages/frontend/src/components/SkMutedNote.vue
index 83ce68c088..b392db7af2 100644
--- a/packages/frontend/src/components/SkMutedNote.vue
+++ b/packages/frontend/src/components/SkMutedNote.vue
@@ -6,62 +6,103 @@ Displays a placeholder for a muted note.
 -->
 
 <template>
-<I18n v-if="noteMuted" :src="i18n.ts.userSaysSomethingInMutedNote" tag="small">
-	<template #name>
-		<MkUserName :user="note.user"/>
-	</template>
-</I18n>
-<I18n v-else-if="threadMuted" :src="i18n.ts.userSaysSomethingInMutedThread" tag="small">
-	<template #name>
-		<MkUserName :user="note.user"/>
-	</template>
-</I18n>
+<div ref="rootEl" :class="rootClass">
+	<!-- The actual note (or whatever we're wrapping) will render here. -->
+	<slot v-if="isExpanded"></slot>
 
-<br v-if="threadMuted && muted">
+	<!-- If hard muted, we want to hide *everything*, including the placeholders and controls to expand. -->
+	<div v-else-if="!mute.hardMuted" :class="[$style.muted, mutedClass]" class="_gaps_s" @click.stop="expandNote = true">
+		<!-- Mandatory CWs -->
+		<I18n v-if="mute.userMandatoryCW" :src="i18n.ts.userIsFlaggedAs" tag="small">
+			<template #name>
+				<MkUserName :user="note.user"/>
+			</template>
+			<template #cw>
+				{{ mute.userMandatoryCW }}
+			</template>
+		</I18n>
 
-<template v-if="muted">
-	<I18n v-if="muted === 'sensitiveMute'" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
-		<template #name>
-			<MkUserName :user="note.user"/>
+		<!-- Muted notes/threads -->
+		<I18n v-if="mute.noteMuted" :src="i18n.ts.userSaysSomethingInMutedNote" tag="small">
+			<template #name>
+				<MkUserName :user="note.user"/>
+			</template>
+		</I18n>
+		<I18n v-else-if="mute.threadMuted" :src="i18n.ts.userSaysSomethingInMutedThread" tag="small">
+			<template #name>
+				<MkUserName :user="note.user"/>
+			</template>
+		</I18n>
+
+		<!-- Word mutes -->
+		<template v-if="mutedWords">
+			<I18n v-if="prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomethingAbout" tag="small">
+				<template #name>
+					<MkUserName :user="note.user"/>
+				</template>
+				<template #word>
+					{{ mutedWords }}
+				</template>
+			</I18n>
+			<I18n v-else :src="i18n.ts.userSaysSomething" tag="small">
+				<template #name>
+					<MkUserName :user="note.user"/>
+				</template>
+			</I18n>
 		</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>
+
+		<!-- Sensitive mute -->
+		<I18n v-if="mute.sensitiveMuted" :src="i18n.ts.userSaysSomethingSensitive" tag="small">
+			<template #name>
+				<MkUserName :user="note.user"/>
+			</template>
+		</I18n>
+	</div>
+</div>
 </template>
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed } from 'vue';
+import { computed, ref, useTemplateRef, defineExpose } from 'vue';
+import type { Ref } from 'vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { checkMute } from '@/utility/check-word-mute';
 
 const props = withDefaults(defineProps<{
-	muted: false | 'sensitiveMute' | string[];
-	threadMuted?: boolean;
-	noteMuted?: boolean;
 	note: Misskey.entities.Note;
+	withHardMute?: boolean;
+	mutedClass?: string | string[] | Record<string, boolean> | (string | string[] | Record<string, boolean>)[];
+	expandedClass?: string | string[] | Record<string, boolean> | (string | string[] | Record<string, boolean>)[];
 }>(), {
-	threadMuted: false,
-	noteMuted: false,
+	withHardMute: false, // TODO check default
+	mutedClass: undefined,
+	expandedClass: undefined,
 });
 
-const mutedWords = computed(() => Array.isArray(props.muted)
-	? props.muted.join(', ')
-	: props.muted);
+const expandNote = ref(false);
+
+const mute = computed(() => checkMute(props.note, props.withHardMute));
+const mutedWords = computed(() => mute.value.softMutedWords?.join(', '));
+const isMuted = computed(() => mute.value.hardMuted || mutedWords.value || mute.value.userMandatoryCW || mute.value.noteMuted || mute.value.threadMuted || mute.value.sensitiveMuted);
+const isExpanded = computed(() => expandNote.value || !isMuted.value);
+const rootClass = computed(() => isExpanded.value ? props.expandedClass : undefined);
+
+const rootEl = useTemplateRef('rootEl');
+defineExpose({
+	rootEl: rootEl as Ref<HTMLElement | null>,
+});
 </script>
 
 <style module lang="scss">
+.muted {
+	padding: 8px;
+	text-align: center;
+	opacity: 0.7;
+	cursor: pointer;
+}
 
+.muted:hover {
+	background: var(--MI_THEME-buttonBg);
+}
 </style>
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 08098f89a5..8cfdcec62b 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -6,11 +6,12 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
 -->
 
 <template>
-<div
-	v-if="!hardMuted && muted === false && !threadMuted && !noteMuted"
+<SkMutedNote
 	v-show="!isDeleted"
-	ref="rootEl"
+	ref="rootComp"
 	v-hotkey="keymap"
+	:note="appearNote"
+	:withHardMute="withHardMute"
 	:class="[$style.root, { [$style.showActionsOnlyHover]: prefer.s.showNoteActionsOnlyHover, [$style.skipRender]: prefer.s.skipNoteRender }]"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
@@ -62,10 +63,10 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
 		</div>
 		<div :class="[{ [$style.clickToOpen]: prefer.s.clickToOpen }]" @click.stop="prefer.s.clickToOpen ? noteclick(appearNote.id) : undefined">
 			<div style="container-type: inline-size;">
-				<p v-if="mergedCW != null" :class="$style.cw">
+				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm
-						v-if="mergedCW != ''"
-						:text="mergedCW"
+						v-if="appearNote.cw != ''"
+						:text="appearNote.cw"
 						:author="appearNote.user"
 						:nyaize="'respect'"
 						:enableEmojiMenu="true"
@@ -75,7 +76,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
 					/>
 					<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll" style="margin: 4px 0;" @click.stop/>
 				</p>
-				<div v-show="mergedCW == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]">
+				<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>
 						<Mfm
@@ -169,16 +170,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
 			</footer>
 		</div>
 	</article>
-</div>
-<div v-else-if="!hardMuted" :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</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>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
@@ -188,7 +180,6 @@ import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
 import { shouldCollapsed } from '@@/js/collapsed.js';
 import * as config from '@@/js/config.js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import type { Ref } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
@@ -206,7 +197,6 @@ 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 { 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';
@@ -273,7 +263,8 @@ function noteclick(id: string) {
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
-const rootEl = useTemplateRef('rootEl');
+const rootComp = useTemplateRef('rootComp');
+const rootEl = computed(() => rootComp.value?.rootEl ?? null);
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
 const renoteTime = useTemplateRef('renoteTime');
@@ -292,7 +283,6 @@ const selfNoteIds = computed(() => getSelfNoteIds(props.note));
 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 { muted, hardMuted, threadMuted, noteMuted } = checkMutes(appearNote, computed(() => props.withHardMute));
 const translation = ref<Misskey.entities.NotesTranslateResponse | false | null>(null);
 const translating = ref(false);
 const showTicker = (prefer.s.instanceTicker === 'always') || (prefer.s.instanceTicker === 'remote' && appearNote.value.user.instance);
@@ -315,8 +305,6 @@ const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
 }));
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const renoteTooltip = computeRenoteTooltip(appearNote);
 
 let renoting = false;
@@ -1341,16 +1329,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 }
 
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
-}
+// Mute CSS moved to SkMutedNote.vue
 
 .reactionOmitted {
 	display: inline-block;
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 7640dc4588..fe2da9f914 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -6,11 +6,11 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 -->
 
 <template>
-<div
-	v-if="!muted && !threadMuted && !noteMuted"
+<SkMutedNote
 	v-show="!isDeleted"
-	ref="rootEl"
+	ref="rootComp"
 	v-hotkey="keymap"
+	:note="appearNote"
 	:class="$style.root"
 	:tabindex="isDeleted ? '-1' : '0'"
 >
@@ -83,10 +83,10 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 			</div>
 		</header>
 		<div :class="$style.noteContent">
-			<p v-if="mergedCW != null" :class="$style.cw">
+			<p v-if="appearNote.cw != null" :class="$style.cw">
 				<Mfm
-					v-if="mergedCW != ''"
-					:text="mergedCW"
+					v-if="appearNote.cw != ''"
+					:text="appearNote.cw"
 					:author="appearNote.user"
 					:nyaize="'respect'"
 					:enableEmojiMenu="true"
@@ -95,7 +95,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 				/>
 				<MkCwButton v-model="showContent" :text="appearNote.text" :renote="appearNote.renote" :files="appearNote.files" :poll="appearNote.poll"/>
 			</p>
-			<div v-show="mergedCW == null || showContent">
+			<div v-show="appearNote.cw == null || showContent">
 				<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 				<Mfm
 					v-if="appearNote.text"
@@ -231,10 +231,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 			</MkPagination>
 		</div>
 	</div>
-</div>
-<div v-else class="_panel" :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="threadMuted" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
@@ -243,7 +240,6 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
 import * as config from '@@/js/config.js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
 import type { Paging } from '@/components/MkPagination.vue';
 import type { Keymap } from '@/utility/hotkey.js';
@@ -259,7 +255,6 @@ 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 { 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';
@@ -308,7 +303,8 @@ const note = ref(deepClone(props.note));
 
 const isRenote = Misskey.note.isPureRenote(note.value);
 
-const rootEl = useTemplateRef('rootEl');
+const rootComp = useTemplateRef('rootComp');
+const rootEl = computed(() => rootComp.value?.rootEl ?? null);
 const noteEl = useTemplateRef('noteEl');
 const menuButton = useTemplateRef('menuButton');
 const renoteButton = useTemplateRef('renoteButton');
@@ -336,12 +332,8 @@ const quotes = ref<Misskey.entities.Note[]>([]);
 const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
 const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const renoteTooltip = computeRenoteTooltip(appearNote);
 
-const { muted, threadMuted, noteMuted } = checkMutes(appearNote);
-
 setupNoteViewInterruptors(note, isDeleted);
 
 watch(() => props.expandAllCws, (expandAllCws) => {
@@ -1226,16 +1218,7 @@ onUnmounted(() => {
 	border-radius: var(--MI-radius-sm) !important;
 }
 
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
-}
+// Mute CSS moved to SkMutedNote.vue
 
 .badgeRoles {
 	margin: 0 .5em 0 0;
diff --git a/packages/frontend/src/components/SkNoteSimple.vue b/packages/frontend/src/components/SkNoteSimple.vue
index f543971508..3023498748 100644
--- a/packages/frontend/src/components/SkNoteSimple.vue
+++ b/packages/frontend/src/components/SkNoteSimple.vue
@@ -11,11 +11,11 @@ Simple view of a note in the Sharkey style. Used in quote renotes, link previews
 	<div :class="$style.main">
 		<MkNoteHeader :class="$style.header" :classic="true" :note="note" :mini="true"/>
 		<div>
-			<p v-if="mergedCW != null" :class="$style.cw">
-				<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
+			<p v-if="props.note.cw != null" :class="$style.cw">
+				<Mfm v-if="props.note.cw != ''" style="margin-right: 8px;" :text="props.note.cw" :isBlock="true" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
 				<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll" @click.stop/>
 			</p>
-			<div v-show="mergedCW == null || showContent">
+			<div v-show="props.note.cw == null || showContent">
 				<MkSubNoteContent :hideFiles="hideFiles" :class="$style.text" :note="note" :expandAllCws="props.expandAllCws"/>
 			</div>
 		</div>
@@ -44,8 +44,6 @@ let showContent = ref(prefer.s.uncollapseCW);
 
 const note = ref(deepClone(props.note));
 
-const mergedCW = computed(() => computeMergedCw(note.value));
-
 setupNoteViewInterruptors(note, null);
 
 watch(() => props.expandAllCws, (expandAllCws) => {
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 0396f579af..584303bc5c 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -8,7 +8,7 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
 -->
 
 <template>
-<div v-show="!isDeleted" v-if="!muted && !noteMuted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]">
+<SkMutedNote v-show="!isDeleted" ref="rootComp" :note="appearNote" :mutedClass="$style.muted" :expandedClass="[$style.root, { [$style.children]: depth > 1, [$style.isReply]: props.isReply, [$style.detailed]: props.detailed }]">
 	<div v-if="!hideLine" :class="$style.line"></div>
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@@ -23,11 +23,11 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
 		<div :class="$style.body">
 			<SkNoteHeader :class="$style.header" :note="note" :classic="true" :mini="true"/>
 			<div :class="$style.content">
-				<p v-if="mergedCW != null" :class="$style.cw">
-					<Mfm v-if="mergedCW != ''" style="margin-right: 8px;" :text="mergedCW" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
+				<p v-if="appearNote.cw != null" :class="$style.cw">
+					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :isBlock="true" :author="note.user" :nyaize="'respect'"/>
 					<MkCwButton v-model="showContent" :text="note.text" :files="note.files" :poll="note.poll"/>
 				</p>
-				<div v-show="mergedCW == null || showContent">
+				<div v-show="appearNote.cw == null || showContent">
 					<MkSubNoteContent :class="$style.text" :note="note" :translating="translating" :translation="translation" :expandAllCws="props.expandAllCws"/>
 				</div>
 			</div>
@@ -89,16 +89,12 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
 	</div>
-</div>
-<div v-else :class="$style.muted" @click.stop="muted = false">
-	<SkMutedNote :muted="muted" :threadMuted="false" :noteMuted="noteMuted" :note="appearNote"></SkMutedNote>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref, shallowRef, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import * as config from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { Visibility } from '@/utility/boost-quote.js';
@@ -114,7 +110,6 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { userPage } from '@/filters/user.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';
@@ -171,8 +166,6 @@ const renoteTooltip = computeRenoteTooltip(appearNote);
 const defaultLike = computed(() => prefer.s.like ? prefer.s.like : null);
 const replies = ref<Misskey.entities.Note[]>([]);
 
-const mergedCW = computed(() => computeMergedCw(appearNote.value));
-
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
 	url: appearNote.value.url ?? appearNote.value.uri ?? `${config.url}/notes/${appearNote.value.id}`,
@@ -195,8 +188,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
-const { muted, noteMuted } = checkMutes(appearNote);
-
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
@@ -602,16 +593,9 @@ if (props.detail) {
 }
 
 .muted {
-	text-align: center;
-	padding: 8px !important;
 	border: 1px solid var(--MI_THEME-divider);
 	margin: 8px 8px 0 8px;
 	border-radius: var(--MI-radius-sm);
-	cursor: pointer;
-}
-
-.muted:hover {
-	background: var(--MI_THEME-buttonBg);
 }
 
 // avatar container with line
diff --git a/packages/frontend/src/utility/check-word-mute.ts b/packages/frontend/src/utility/check-word-mute.ts
index 9c16841a39..9a6ad6b9c9 100644
--- a/packages/frontend/src/utility/check-word-mute.ts
+++ b/packages/frontend/src/utility/check-word-mute.ts
@@ -1,138 +1,184 @@
 /*
- * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+
 import * as Misskey from 'misskey-js';
-import { computed, inject, ref } from 'vue';
-import type { Ref, ComputedRef } from 'vue';
+import { inject } from 'vue';
+import type { Ref } from 'vue';
 import { $i } from '@/i';
 
-export function checkMutes(noteToCheck: ComputedRef<Misskey.entities.Note>, withHardMute?: ComputedRef<boolean>) {
-	const muteEnable = ref(true);
+export interface Mute {
+	hardMuted?: boolean;
+	softMutedWords?: string[];
+	sensitiveMuted?: boolean;
 
-	const muted = computed<false | string[], boolean>({
-		get() {
-			if (!muteEnable.value) return false;
-			return checkMute(noteToCheck.value, $i?.mutedWords);
-		},
-		set(value: boolean) {
-			muteEnable.value = value;
-		},
-	});
+	isSensitive?: boolean;
 
-	const threadMuted = computed(() => {
-		if (!muteEnable.value) return false;
-		return noteToCheck.value.isMutingThread;
-	});
+	threadMuted?: boolean;
+	noteMuted?: boolean;
 
-	const noteMuted = computed(() => {
-		if (!muteEnable.value) return false;
-		return noteToCheck.value.isMutingNote;
-	});
-
-	const hardMuted = computed(() => {
-		if (!withHardMute?.value) return false;
-		return checkMute(noteToCheck.value, $i?.hardMutedWords, true);
-	});
-
-	return { muted, hardMuted, threadMuted, noteMuted };
+	// TODO show this as a single block on user timelines
+	userMandatoryCW?: string | null;
 }
 
-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);
+export function checkMute(note: Misskey.entities.Note, withHardMute?: boolean): Mute {
+	const sensitiveMuted = isSensitiveMuted(note);
 
-		// Only continue to sensitiveMute if we don't match any *actual* mutes
-		if (result) {
-			return result;
-		}
+	// My own note
+	if ($i && $i.id === note.userId) {
+		return { sensitiveMuted };
 	}
 
-	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';
-		}
+	const threadMuted = note.isMutingThread;
+	const noteMuted = note.isMutingNote;
+	const userMandatoryCW = note.user.mandatoryCW;
+
+	// Hard mute
+	if (withHardMute && isHardMuted(note)) {
+		return { hardMuted: true, sensitiveMuted, threadMuted, noteMuted, userMandatoryCW };
 	}
 
-	return false;
+	// Soft mute
+	const softMutedWords = isSoftMuted(note);
+	if (softMutedWords.length > 0) {
+		return { softMutedWords, sensitiveMuted, threadMuted, noteMuted, userMandatoryCW };
+	}
+
+	// Other / no mute
+	return { sensitiveMuted, threadMuted, noteMuted, userMandatoryCW };
 }
 
-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;
+function isHardMuted(note: Misskey.entities.Note): boolean {
+	if (!$i?.hardMutedWords.length) return false;
 
-	// 自分自身
-	if (me && typeof(note) === 'object' && (note.userId === me.id)) return false;
+	return containsMutedWord($i.hardMutedWords, note);
+}
 
-	if (mutedWords.length > 0) {
-		const text = typeof(note) === 'object' ? getNoteText(note) : note;
+function isSoftMuted(note: Misskey.entities.Note): string[] {
+	if (!$i?.mutedWords.length) return [];
 
-		if (text === '') return false;
+	return getMutedWords($i.mutedWords, note);
+}
 
-		const matched = mutedWords.reduce((matchedWords, filter) => {
-			if (Array.isArray(filter)) {
-				// Clean up
-				const filteredFilter = filter.filter(keyword => keyword !== '');
-				if (filteredFilter.length > 0 && filteredFilter.every(keyword => text.includes(keyword))) {
-					const fullFilter = filteredFilter.join(' ');
-					matchedWords.add(fullFilter);
-				}
-			} else {
-				// represents RegExp
-				const regexp = filter.match(/^\/(.+)\/(.*)$/);
+function isSensitiveMuted(note: Misskey.entities.Note): boolean {
+	// 1. At least one sensitive file
+	if (!note.files) return false;
+	if (!note.files.some((v) => v.isSensitive)) return false;
 
-				// This should never happen due to input sanitisation.
-				if (regexp) {
-					try {
-						const flags = regexp[2].includes('g') ? regexp[2] : (regexp[2] + 'g');
-						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.
-					}
-				}
+	// 2. In a timeline
+	const inTimeline = inject<boolean>('inTimeline', false);
+	if (!inTimeline) return false;
+
+	// 3. With sensitive files hidden
+	const tl_withSensitive = inject<Ref<boolean> | null>('tl_withSensitive', null);
+	return tl_withSensitive?.value === false;
+}
+
+function getMutedWords(mutedWords: (string | string[])[], note: Misskey.entities.Note): string[] {
+	// Parse mutes
+	const { regexMutes, patternMutes } = parseMutes(mutedWords);
+
+	// Make sure we didn't filter them all out
+	if (regexMutes.length < 1 && patternMutes.length < 1) {
+		return [];
+	}
+
+	const matches = new Set<string>();
+
+	// Expand notes into searchable test
+	for (const text of expandNote(note)) {
+		for (const pattern of patternMutes) {
+			// Case-sensitive, non-boundary search for backwards compatibility
+			if (pattern.every(word => text.includes(word))) {
+				const muteLabel = pattern.join(' ');
+				matches.add(muteLabel);
 			}
+		}
 
-			return matchedWords;
-		}, new Set<string>());
+		for (const regex of regexMutes) {
+			for (const match of text.matchAll(regex)) {
+				matches.add(match[0]);
+			}
+		}
+	}
 
-		// 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 Array.from(matches);
+}
+
+function containsMutedWord(mutedWords: (string | string[])[], note: Misskey.entities.Note): boolean {
+	// Parse mutes
+	const { regexMutes, patternMutes } = parseMutes(mutedWords);
+
+	// Make sure we didn't filter them all out
+	if (regexMutes.length < 1 && patternMutes.length < 1) {
+		return false;
+	}
+
+	// Expand notes into searchable test
+	for (const text of expandNote(note)) {
+		for (const pattern of patternMutes) {
+			// Case-sensitive, non-boundary search for backwards compatibility
+			if (pattern.every(word => text.includes(word))) {
+				return true;
+			}
+		}
+
+		if (regexMutes.some(regex => text.match(regex))) {
+			return true;
+		}
 	}
 
 	return false;
 }
 
-function getNoteText(note: Misskey.entities.Note): string {
-	const textParts: string[] = [];
-
-	if (note.cw) textParts.push(note.cw);
-
-	if (note.text) textParts.push(note.text);
-
+function *expandNote(note: Misskey.entities.Note): Generator<string> {
+	if (note.cw) yield note.cw;
+	if (note.text) yield note.text;
 	if (note.files) {
 		for (const file of note.files) {
-			if (file.comment) textParts.push(file.comment);
+			if (file.comment) yield file.comment;
 		}
 	}
-
 	if (note.poll) {
 		for (const choice of note.poll.choices) {
-			if (choice.text) textParts.push(choice.text);
+			if (choice.text) yield choice.text;
+		}
+	}
+	if (note.reply) {
+		yield * expandNote(note.reply);
+	}
+	if (note.renote) {
+		yield * expandNote(note.renote);
+	}
+}
+
+function parseMutes(mutedWords: (string | string[])[]) {
+	const regexMutes: RegExp[] = [];
+	const patternMutes: string[][] = [];
+
+	for (const mute of mutedWords) {
+		if (Array.isArray(mute)) {
+			if (mute.length > 0) {
+				const filtered = mute.filter(keyword => keyword !== '');
+				if (filtered.length > 0) {
+					patternMutes.push(filtered);
+				} else {
+					console.warn('Skipping invalid pattern mute:', mute);
+				}
+			}
+		} else {
+			const parsed = mute.match(/^\/(.+)\/(.*)$/);
+			if (parsed && parsed.length === 3) {
+				try {
+					const flags = parsed[2].includes('g') ? parsed[2] : `${parsed[2]}g`;
+					regexMutes.push(new RegExp(parsed[1], flags));
+				} catch {
+					console.warn('Skipping invalid regexp mute:', mute);
+				}
+			}
 		}
 	}
 
-	return textParts.join('\n').trim();
+	return { regexMutes, patternMutes };
 }
diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml
index 83d5560b28..47b6f80bdb 100644
--- a/sharkey-locales/en-US.yml
+++ b/sharkey-locales/en-US.yml
@@ -35,6 +35,7 @@ muteNote: "Mute note"
 unmuteNote: "Unmute note"
 userSaysSomethingInMutedNote: "{name} said something in a muted post"
 userSaysSomethingInMutedThread: "{name} said something in a muted thread"
+userIsFlaggedAs: "{name} is flagged: \"{cw}\""
 markAsNSFW: "Mark all media from user as NSFW"
 markInstanceAsNSFW: "Mark as NSFW"
 nsfwConfirm: "Are you sure that you want to mark all media from this account as NSFW?"