merge: Expand Mandatory CW feature and fixup block/mute/silence features (resolves #809, #910, #912, #943, #1064, #1142, and #1186) (!1148)

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

Closes #809, #910, #912, #943, #1064, #1142, and #1186

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

packages/frontend/src/components/DynamicNote.vue

@@ -14,28 +14,31 @@ Displays a note with either Misskey or Sharkey style, based on user preference.
 	:withHardMute="withHardMute"
 	@reaction="emoji => emit('reaction', emoji)"
 	@removeReaction="emoji => emit('removeReaction', emoji)"
+	@expandMute="n => onExpandNote(n)"
 />
 </template>
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
+import { defineAsyncComponent, useTemplateRef } from 'vue';
 import type { ComponentExposed } from 'vue-component-type-helpers';
 import type MkNote from '@/components/MkNote.vue';
 import type SkNote from '@/components/SkNote.vue';
 import { prefer } from '@/preferences';
+import { deepAssign } from '@/utility/merge';
+import { useMuteOverrides } from '@/utility/check-word-mute';
 
 const XNote = defineAsyncComponent(() =>
 	prefer.s.noteDesign === 'misskey'
-	? import('@/components/MkNote.vue')
-	: import('@/components/SkNote.vue')
-);
+		? import('@/components/MkNote.vue')
+		: import('@/components/SkNote.vue'));
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');
+const muteOverrides = useMuteOverrides();
 
 defineExpose({ rootEl });
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 	pinned?: boolean;
 	mock?: boolean;
@@ -45,5 +48,28 @@ defineProps<{
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
 }>();
+
+function onExpandNote(note: Misskey.entities.Note) {
+	// Expand the user/instance CW for matching subthread (and the inline reply/renote view)
+	if (note.id === props.note.id) {
+		deepAssign(muteOverrides, {
+			user: {
+				[note.user.id]: {
+					userMandatoryCW: null,
+					userSilenced: false,
+				},
+			},
+			instance: {
+				[note.user.host ?? '']: {
+					instanceMandatoryCW: null,
+					instanceSilenced: false,
+				},
+			},
+		});
+	}
+
+	emit('expandMute', note);
+}
 </script>

packages/frontend/src/components/DynamicNoteDetailed.vue

@@ -11,30 +11,70 @@ Displays a note in the detailed view with either Misskey or Sharkey style, based
 	:note="note"
 	:initialTab="initialTab"
 	:expandAllCws="expandAllCws"
+	@expandMute="n => onExpandNote(n)"
 />
 </template>
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
+import { defineAsyncComponent, useTemplateRef, watch } from 'vue';
 import type { ComponentExposed } from 'vue-component-type-helpers';
 import type MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import type SkNoteDetailed from '@/components/SkNoteDetailed.vue';
 import { prefer } from '@/preferences';
+import { useMuteOverrides } from '@/utility/check-word-mute';
+import { deepAssign } from '@/utility/merge';
 
 const XNoteDetailed = defineAsyncComponent(() =>
 	prefer.s.noteDesign === 'misskey'
-	? import('@/components/MkNoteDetailed.vue')
-	: import('@/components/SkNoteDetailed.vue'),
-);
+		? import('@/components/MkNoteDetailed.vue')
+		: import('@/components/SkNoteDetailed.vue'));
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>('rootEl');
+const muteOverrides = useMuteOverrides();
 
 defineExpose({ rootEl });
 
-defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note;
 	initialTab?: string;
 	expandAllCws?: boolean;
 }>();
+
+// Expand mandatory CWs when "expand all CWs" is clicked
+watch(() => props.expandAllCws, () => {
+	deepAssign(muteOverrides, {
+		all: {
+			noteMandatoryCW: null,
+			userMandatoryCW: null,
+			instanceMandatoryCW: null,
+		},
+	});
+});
+
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
+function onExpandNote(note: Misskey.entities.Note) {
+	// Since this is a Detailed note, note.props must point to the top of a thread.
+	// Go ahead and expand matching user/instance/thread mutes downstream, since the user is very likely to want them.
+	if (note.id === props.note.id) {
+		deepAssign(muteOverrides, {
+			user: {
+				[note.user.id]: {
+					userMandatoryCW: null,
+					instanceMandatoryCW: null,
+				},
+			},
+			thread: {
+				[note.threadId]: {
+					threadMuted: false,
+				},
+			},
+		});
+	}
+
+	emit('expandMute', note);
+}
 </script>

packages/frontend/src/components/DynamicNoteSimple.vue

@@ -10,14 +10,16 @@ Displays a note in the simple view with either Misskey or Sharkey style, based o
 	ref="rootEl"
 	:note="note"
 	:expandAllCws="expandAllCws"
+	:skipMute="skipMute"
 	:hideFiles="hideFiles"
 	@editScheduledNote="() => emit('editScheduleNote')"
+	@expandMute="n => emit('expandMute', n)"
 />
 </template>
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
+import { defineAsyncComponent, useTemplateRef } from 'vue';
 import type { ComponentExposed } from 'vue-component-type-helpers';
 import type MkNoteSimple from '@/components/MkNoteSimple.vue';
 import type SkNoteSimple from '@/components/SkNoteSimple.vue';
@@ -25,9 +27,8 @@ import { prefer } from '@/preferences';
 
 const XNoteSimple = defineAsyncComponent(() =>
 	prefer.s.noteDesign === 'misskey'
-	? import('@/components/MkNoteSimple.vue')
-	: import('@/components/SkNoteSimple.vue'),
-);
+		? import('@/components/MkNoteSimple.vue')
+		: import('@/components/SkNoteSimple.vue'));
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteSimple | typeof SkNoteSimple>>('rootEl');
 
@@ -39,10 +40,12 @@ defineProps<{
 		scheduledNoteId?: string
 	};
 	expandAllCws?: boolean;
+	skipMute?: boolean;
 	hideFiles?: boolean;
 }>();
 
 const emit = defineEmits<{
 	(ev: 'editScheduleNote'): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
 }>();
 </script>

packages/frontend/src/components/MkNote.vue

@@ -4,20 +4,22 @@ 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'"
+	@expandMute="n => emit('expandMute', n)"
 >
 	<div v-if="appearNote.reply && inReplyToCollapsed" :class="$style.collapsedInReplyTo">
 		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
 		<MkAcct :user="appearNote.reply.user" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>:
 		<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedInReplyToText" @click="inReplyToCollapsed = false"/>
 	</div>
-	<MkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<MkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo" @expandMute="n => emit('expandMute', n)"/>
 	<div v-if="pinned" :class="$style.tip"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
 	<div v-if="isRenote" :class="$style.renote">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@@ -57,10 +59,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 +71,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>
@@ -96,9 +98,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
 					<div v-if="isEnabledUrlPreview" :class="[$style.urlPreview, '_gaps_s']" @click.stop>
-						<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
+						<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
 					</div>
-					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" @expandMute="n => emit('expandMute', n)"/></div>
 					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
 						<span :class="$style.collapsedLabel">{{ i18n.ts.showMore }}</span>
 					</button>
@@ -167,16 +169,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 +179,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 +197,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 +208,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';
@@ -254,6 +245,7 @@ provide(DI.mock, props.mock);
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
 }>();
 
 const router = useRouter();
@@ -272,7 +264,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 +284,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 +306,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 +1281,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;

packages/frontend/src/components/MkNoteDetailed.vue

@@ -4,21 +4,22 @@ 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'"
+	@expandMute="n => emit('expandMute', n)"
 >
 	<div v-if="appearNote.reply && appearNote.reply.replyId">
 		<div v-if="!conversationLoaded" style="padding: 16px">
 			<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
 		</div>
-		<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
+		<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
 	</div>
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
+	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
 	<div v-if="isRenote" :class="$style.renote">
 		<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
 		<i class="ti ti-repeat" style="margin-right: 4px;"></i>
@@ -75,10 +76,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 +88,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>
@@ -112,9 +113,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 				<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
 				<div v-if="isEnabledUrlPreview" class="_gaps_s" style="margin-top: 6px;" @click.stop>
-					<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
+					<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
 				</div>
-				<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
+				<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/></div>
 			</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>
@@ -188,7 +189,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+			<MkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" @expandMute="n => emit('expandMute', n)"/>
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -205,7 +206,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!quotesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+			<MkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" @expandMute="n => emit('expandMute', n)"/>
 		</div>
 		<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
 			<div :class="$style.reactionTabs">
@@ -225,10 +226,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>
@@ -237,7 +235,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';
@@ -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';
@@ -296,13 +292,18 @@ const props = withDefaults(defineProps<{
 	initialTab: 'replies',
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const inChannel = inject('inChannel', null);
 
 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 +330,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 +1146,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>

packages/frontend/src/components/MkNoteSimple.vue

@@ -4,16 +4,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="!isDeleted" :class="$style.root">
+<SkMutedNote v-if="!isDeleted" :note="note" :skipMute="skipMute" :class="$style.root" @expandMute="n => emit('expandMute', n)">
 	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 	<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>
@@ -22,18 +22,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import * as os from '@/os.js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import MkButton from '@/components/MkButton.vue';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { setupNoteViewInterruptors } from '@/plugin.js';
@@ -45,6 +45,7 @@ const props = defineProps<{
 		scheduledNoteId?: string
 	};
 	expandAllCws?: boolean;
+	skipMute?: boolean;
 	hideFiles?: boolean;
 }>();
 
@@ -53,14 +54,13 @@ const isDeleted = ref(false);
 
 const note = ref(deepClone(props.note));
 
-const mergedCW = computed(() => computeMergedCw(note.value));
-
 if (!note.value.isSchedule) {
 	setupNoteViewInterruptors(note, null);
 }
 
 const emit = defineEmits<{
 	(ev: 'editScheduleNote'): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
 }>();
 
 async function deleteScheduleNote() {

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 }]" @expandMute="n => emit('expandMute', n)">
 	<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>
@@ -72,21 +72,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<template v-if="depth < prefer.s.numberOfReplies">
-		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="$style.reply" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" @expandMute="n => emit('expandMute', n)"/>
 	</template>
 	<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';
@@ -131,13 +126,18 @@ const props = withDefaults(defineProps<{
 	onDeleteCallback: undefined,
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const note = ref(deepClone(props.note));
 
 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 +153,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 +175,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
-const { muted, noteMuted } = checkMutes(appearNote);
-
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
@@ -504,15 +500,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>

packages/frontend/src/components/MkNotes.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #default="{ items: notes }">
 		<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
 			<template v-for="(note, i) in notes" :key="note.id">
-				<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id"/>
+				<DynamicNote :class="$style.note" :note="note as Misskey.entities.Note" :withHardMute="true" :data-scroll-anchor="note.id" @expandMute="n => emit('expandMute', n)"/>
 				<MkAd v-if="note._shouldInsertAd_" :preferForms="['horizontal', 'horizontal-big']" :class="$style.ad"/>
 			</template>
 		</div>
@@ -37,6 +37,10 @@ const pagingComponent = useTemplateRef('pagingComponent');
 defineExpose({
 	pagingComponent,
 });
+
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/MkPostForm.vue

@@ -52,8 +52,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 		</div>
 	</header>
-	<MkNoteSimple v-if="reply" :class="$style.targetNote" :hideFiles="true" :note="reply"/>
-	<MkNoteSimple v-if="renoteTargetNote" :class="$style.targetNote" :hideFiles="true" :note="renoteTargetNote"/>
+	<MkNoteSimple v-if="reply" :class="$style.targetNote" :hideFiles="true" :note="reply" :skipMute="true"/>
+	<MkNoteSimple v-if="renoteTargetNote" :class="$style.targetNote" :hideFiles="true" :note="renoteTargetNote" :skipMute="true"/>
 	<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null; renoteTargetNote = null;"><i class="ti ti-x"></i></button></div>
 	<div v-if="visibility === 'specified'" :class="$style.toSpecified">
 		<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>

packages/frontend/src/components/MkSchedulePostListDialog.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<template #default="{ items }">
 				<div class="_gaps">
-					<MkNoteSimple v-for="item in items" :key="item.id" :scheduled="true" :note="item.note" @editScheduleNote="listUpdate"/>
+					<MkNoteSimple v-for="item in items" :key="item.id" :scheduled="true" :note="item.note" :skipMute="true" @editScheduleNote="listUpdate"/>
 				</div>
 			</template>
 		</MkPagination>

packages/frontend/src/components/MkUrlPreview.vue

@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkButton>
 	</div>
 </template>
-<div v-else-if="theNote" :class="[$style.link, { [$style.compact]: compact }]"><DynamicNoteSimple :note="theNote" :class="$style.body"/></div>
+<div v-else-if="theNote" :class="[$style.link, { [$style.compact]: compact }]"><DynamicNoteSimple :note="theNote" :class="$style.body" @expandMute="n => emit('expandMute', n)"/></div>
 <div v-else-if="!hidePreview">
 	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="maybeRelativeUrl" rel="nofollow noopener" :target="target" :title="url" @click.prevent="self ? true : warningExternalWebsite(url)" @click.stop>
 		<div v-if="thumbnail && !sensitive" :class="$style.thumbnail" :style="prefer.s.dataSaver.urlPreview ? '' : { backgroundImage: `url('${thumbnail}')` }">
@@ -151,6 +151,10 @@ const props = withDefaults(defineProps<{
 	attributionHint: undefined,
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 

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, false)" :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) {

packages/frontend/src/components/SkMutedNote.vue

@@ -6,62 +6,168 @@ 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, $style.muteContainer, mutedClass]" @click.stop="expand">
+		<!-- Mandatory CWs -->
+		<I18n v-if="mute.noteMandatoryCW" :src="i18n.ts.noteIsFlaggedAs" tag="small">
+			<template #cw>
+				{{ mute.noteMandatoryCW }}
+			</template>
+		</I18n>
+		<I18n v-if="mute.userMandatoryCW" :src="i18n.ts.userIsFlaggedAs" tag="small">
+			<template #name>
+				{{ userName }}
+			</template>
+			<template #cw>
+				{{ mute.userMandatoryCW }}
+			</template>
+		</I18n>
+		<I18n v-if="mute.instanceMandatoryCW" :src="i18n.ts.instanceIsFlaggedAs" tag="small">
+			<template #name>
+				{{ instanceName }}
+			</template>
+			<template #cw>
+				{{ mute.instanceMandatoryCW }}
+			</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>
+				{{ userName }}
+			</template>
+		</I18n>
+		<I18n v-else-if="mute.threadMuted" :src="i18n.ts.userSaysSomethingInMutedThread" tag="small">
+			<template #name>
+				{{ userName }}
+			</template>
+		</I18n>
+
+		<!-- Silenced users/instances -->
+		<I18n v-if="mute.userSilenced" :src="i18n.ts.silencedUserSaysSomething" tag="small">
+			<template #name>
+				{{ userName }}
+			</template>
+			<template #host>
+				{{ host }}
+			</template>
+		</I18n>
+		<I18n v-if="mute.instanceSilenced" :src="i18n.ts.silencedInstanceSaysSomething" tag="small">
+			<template #name>
+				{{ instanceName }}
+			</template>
+			<template #host>
+				{{ host }}
+			</template>
+		</I18n>
+
+		<!-- Word mutes -->
+		<template v-if="mutedWords">
+			<I18n v-if="prefer.s.showSoftWordMutedWord" :src="i18n.ts.userSaysSomethingAbout" tag="small">
+				<template #name>
+					{{ userName }}
+				</template>
+				<template #word>
+					{{ mutedWords }}
+				</template>
+			</I18n>
+			<I18n v-else :src="i18n.ts.userSaysSomething" tag="small">
+				<template #name>
+					{{ userName }}
+				</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>
+				{{ userName }}
+			</template>
+		</I18n>
+	</div>
+</div>
 </template>
 
 <script setup lang="ts">
 import * as Misskey from 'misskey-js';
-import { computed } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
+import { host } from '@@/js/config.js';
+import type { Ref } from 'vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { checkMute } from '@/utility/check-word-mute.js';
 
 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>)[];
+	skipMute?: boolean;
 }>(), {
-	threadMuted: false,
-	noteMuted: false,
+	withHardMute: true,
+	mutedClass: undefined,
+	expandedClass: undefined,
+	skipMute: false,
 });
 
-const mutedWords = computed(() => Array.isArray(props.muted)
-	? props.muted.join(', ')
-	: props.muted);
+const emit = defineEmits<{
+	(type: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
+const expandNote = ref(false);
+
+function expand() {
+	expandNote.value = true;
+	emit('expandMute', props.note);
+}
+
+const mute = checkMute(
+	computed(() => props.note),
+	computed(() => props.withHardMute),
+	computed(() => prefer.s.uncollapseCW),
+);
+
+const mutedWords = computed(() => mute.value.softMutedWords?.join(', '));
+const isExpanded = computed(() => props.skipMute || expandNote.value || !mute.value.hasMute);
+const rootClass = computed(() => isExpanded.value ? props.expandedClass : undefined);
+
+const userName = computed(() => props.note.user.host
+	? `@${props.note.user.username}@${props.note.user.host}`
+	: `@${props.note.user.username}`);
+const instanceName = computed(() => props.note.user.host ?? host);
+
+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;
 
+	// Without this, the mute placeholder collapses weirdly when the note is rendered in a flax container.
+	flex: 1;
+}
+
+.muted:hover {
+	background: var(--MI_THEME-buttonBg);
+}
+
+.muteContainer > :not(:first-child) {
+	margin-left: 0.75rem;
+
+	&:before {
+		content: "•";
+		margin-right: 0.75rem;
+		font-size: 1rem;
+	}
+}
 </style>

packages/frontend/src/components/SkNote.vue

@@ -6,15 +6,17 @@ 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'"
+	@expandMute="n => emit('expandMute', n)"
 >
-	<SkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
+	<SkNoteSub v-if="appearNote.reply" v-show="!renoteCollapsed && !inReplyToCollapsed" :note="appearNote.reply" :class="$style.replyTo" @expandMute="n => emit('expandMute', n)"/>
 	<div v-if="appearNote.reply && inReplyToCollapsed && !renoteCollapsed" :class="$style.collapsedInReplyTo">
 		<div :class="$style.collapsedInReplyToLine"></div>
 		<MkAvatar :class="$style.collapsedInReplyToAvatar" :user="appearNote.reply.user" link preview/>
@@ -62,10 +64,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 +77,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
@@ -99,7 +101,7 @@ Displays a note in the Sharkey style. Used to show the "main" note in a given co
 					</div>
 					<MkPoll v-if="appearNote.poll" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :author="appearNote.user" :emojiUrls="appearNote.emojis" :class="$style.poll" @click.stop/>
 					<div v-if="isEnabledUrlPreview" :class="[$style.urlPreview, '_gaps_s']" @click.stop>
-						<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
+						<SkUrlPreviewGroup :sourceUrls="urls" :sourceNote="appearNote" :compact="true" :detail="false" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
 					</div>
 					<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
 					<button v-if="isLong && collapsed" :class="$style.collapsed" class="_button" @click.stop @click="collapsed = false">
@@ -169,16 +171,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 +181,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 +198,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';
@@ -240,6 +231,7 @@ import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
 import { extractPreviewUrls } from '@/utility/extract-preview-urls.js';
 import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -255,6 +247,7 @@ provide(DI.mock, props.mock);
 const emit = defineEmits<{
 	(ev: 'reaction', emoji: string): void;
 	(ev: 'removeReaction', emoji: string): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
 }>();
 
 const router = useRouter();
@@ -273,7 +266,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 +286,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 +308,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 +1332,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;

packages/frontend/src/components/SkNoteDetailed.vue

@@ -6,13 +6,14 @@ 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'"
+	@expandMute="n => emit('expandMute', n)"
 >
 	<div v-if="appearNote.reply && appearNote.reply.replyId && !conversationLoaded" style="padding: 16px">
 		<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
@@ -43,9 +44,9 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 		</div>
 	</div>
 	<template v-if="appearNote.reply && appearNote.reply.replyId">
-		<SkNoteSub v-for="note in conversation" :key="note.id" :note="note" :expandAllCws="props.expandAllCws" detailed/>
+		<SkNoteSub v-for="note in conversation" :key="note.id" :note="note" :expandAllCws="props.expandAllCws" detailed @expandMute="n => emit('expandMute', n)"/>
 	</template>
-	<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed/>
+	<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws" detailed @expandMute="n => emit('expandMute', n)"/>
 	<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
 			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
@@ -83,10 +84,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 +96,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"
@@ -118,7 +119,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 				</div>
 				<MkPoll v-if="appearNote.poll" ref="pollViewer" :noteId="appearNote.id" :poll="appearNote.poll" :local="!appearNote.user.host" :class="$style.poll" :author="appearNote.user" :emojiUrls="appearNote.emojis"/>
 				<div v-if="isEnabledUrlPreview" class="_gaps_s" style="margin-top: 6px;" @click.stop>
-					<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
+					<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds" @expandMute="n => emit('expandMute', n)"/>
 				</div>
 				<div v-if="appearNote.renote" :class="$style.quote"><SkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :expandAllCws="props.expandAllCws"/></div>
 			</div>
@@ -194,7 +195,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true"/>
+			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="true" @expandMute="n => emit('expandMute', n)"/>
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -211,7 +212,7 @@ Detailed view of a note in the Sharkey style. Used when opening a note onto its
 			<div v-if="!quotesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
+			<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true" @expandMute="n => emit('expandMute', n)"/>
 		</div>
 		<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
 			<div :class="$style.reactionTabs">
@@ -231,10 +232,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 +241,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 +256,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';
@@ -293,6 +289,7 @@ import SkMutedNote from '@/components/SkMutedNote.vue';
 import SkNoteTranslation from '@/components/SkNoteTranslation.vue';
 import { getSelfNoteIds } from '@/utility/get-self-note-ids.js';
 import SkUrlPreviewGroup from '@/components/SkUrlPreviewGroup.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
 
 const props = withDefaults(defineProps<{
 	note: Misskey.entities.Note;
@@ -302,13 +299,18 @@ const props = withDefaults(defineProps<{
 	initialTab: 'replies',
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const inChannel = inject('inChannel', null);
 
 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 +338,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 +1224,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;

packages/frontend/src/components/SkNoteSimple.vue

@@ -6,46 +6,53 @@ Simple view of a note in the Sharkey style. Used in quote renotes, link previews
 -->
 
 <template>
-<div :class="$style.root">
+<SkMutedNote :note="note" :skipMute="skipMute" :class="$style.root" @expandMute="n => emit('expandMute', n)">
 	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 	<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>
 	</div>
-</div>
+</SkMutedNote>
 </template>
 
 <script lang="ts" setup>
-import { watch, ref, computed } from 'vue';
+import { watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { computeMergedCw } from '@@/js/compute-merged-cw.js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import { prefer } from '@/preferences.js';
 import { setupNoteViewInterruptors } from '@/plugin.js';
 import { deepClone } from '@/utility/clone.js';
+import SkMutedNote from '@/components/SkMutedNote.vue';
 
 const props = defineProps<{
-	note: Misskey.entities.Note;
+	note: Misskey.entities.Note & {
+		isSchedule?: boolean,
+		scheduledNoteId?: string
+	};
 	expandAllCws?: boolean;
+	skipMute?: boolean;
 	hideFiles?: boolean;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'editScheduleNote'): void;
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 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) => {

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 }]" @expandMute="n => emit('expandMute', n)">
 	<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>
@@ -84,21 +84,17 @@ For example, when viewing a reply on the timeline, SkNoteSub will be used to dis
 		</div>
 	</div>
 	<template v-if="depth < prefer.s.numberOfReplies">
-		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply"/>
+		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :isReply="props.isReply" @expandMute="n => emit('expandMute', n)"/>
 	</template>
 	<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';
@@ -148,6 +143,10 @@ const props = withDefaults(defineProps<{
 	onDeleteCallback: undefined,
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const note = ref(deepClone(props.note));
 
 const appearNote = computed(() => getAppearNote(note.value));
@@ -171,8 +170,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 +192,6 @@ async function removeReply(id: Misskey.entities.Note['id']) {
 	}
 }
 
-const { muted, noteMuted } = checkMutes(appearNote);
-
 useNoteCapture({
 	rootEl: el,
 	note: appearNote,
@@ -602,16 +597,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

packages/frontend/src/components/SkOldNoteWindow.vue

@@ -52,7 +52,7 @@ Displays an old version of an edited note.
 					<div class="_gaps_s" style="margin-top: 6px;" @click.stop>
 						<SkUrlPreviewGroup :sourceNodes="parsed" :sourceNote="appearNote" :compact="true" :detail="true" :showAsQuote="!appearNote.user.rejectQuotes" :skipNoteIds="selfNoteIds"/>
 					</div>
-					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote"/></div>
+					<div v-if="appearNote.renote" :class="$style.quote"><MkNoteSimple :note="appearNote.renote" :class="$style.quoteNote" :skipMute="true"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 			</div>

packages/frontend/src/components/SkPatternTest.vue

@@ -27,26 +27,26 @@ import { i18n } from '@/i18n';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import { parseMutes } from '@/utility/parse-mutes';
-import { checkWordMute } from '@/utility/check-word-mute';
+import { parseMutes } from '@/utility/parse-mutes.js';
+import { getMutedWords } from '@/utility/check-word-mute.js';
 
 const props = defineProps<{
-	mutedWords?: string | null,
+	mutedWords: string,
 }>();
 
 const testWords = ref<string | null>(null);
 const testMatches = ref<string | null>(null);
 
 function testWordMutes() {
-	if (!testWords.value || !props.mutedWords) {
+	if (!testWords.value) {
 		testMatches.value = null;
 		return;
 	}
 
 	try {
 		const mutes = parseMutes(props.mutedWords);
-		const matches = checkWordMute(testWords.value, null, mutes);
-		testMatches.value = matches ? matches.join(', ') : '';
+		const matches = getMutedWords(mutes, testWords.value);
+		testMatches.value = matches.join(', ');
 	} catch {
 		// Error is displayed by above function
 		testMatches.value = null;

packages/frontend/src/components/SkUrlPreviewGroup.vue

@@ -25,6 +25,7 @@ Attempts to avoid displaying the same preview twice, even if multiple URLs point
 		:showAsQuote="showAsQuote"
 		:showActions="showActions"
 		:skipNoteIds="skipNoteIds"
+		@expandMute="n => onExpandNote(n)"
 	></MkUrlPreview>
 </template>
 </template>
@@ -42,6 +43,8 @@ import { $i } from '@/i';
 import { misskeyApi } from '@/utility/misskey-api';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import { getNoteUrls } from '@/utility/getNoteUrls';
+import { deepAssign } from '@/utility/merge';
+import { useMuteOverrides } from '@/utility/check-word-mute';
 
 type Summary = SummalyResult & {
 	note?: Misskey.entities.Note | null;
@@ -74,6 +77,32 @@ const props = withDefaults(defineProps<{
 	skipNoteIds: () => [],
 });
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
+const muteOverrides = useMuteOverrides();
+
+function onExpandNote(note: Misskey.entities.Note) {
+	// Expand related mutes within this preview group
+	deepAssign(muteOverrides, {
+		user: {
+			[note.user.id]: {
+				userMandatoryCW: null,
+				userSilenced: false,
+			},
+		},
+		instance: {
+			[note.user.host ?? '']: {
+				instanceMandatoryCW: null,
+				instanceSilenced: false,
+			},
+		},
+	});
+
+	emit('expandMute', note);
+}
+
 const urlPreviews = ref<Summary[]>([]);
 
 const urls = computed<string[]>(() => {

packages/frontend/src/components/SkUserRecentNotes.vue

@@ -9,7 +9,7 @@ Displays a user's recent notes for the "Following" feed.
 <MkPullToRefresh :refresher="() => reload()">
 	<div v-if="user" :class="$style.userInfo">
 		<MkUserInfo :class="$style.userInfo" class="user" :user="user"/>
-		<MkNotes :noGap="true" :pagination="pagination"/>
+		<MkNotes :noGap="true" :pagination="pagination" @expandMute="n => onExpandMute(n)"/>
 	</div>
 	<div v-else-if="loadError" :class="$style.panel">{{ loadError }}</div>
 	<MkLoading v-else-if="userId"/>
@@ -26,6 +26,8 @@ import MkNotes from '@/components/MkNotes.vue';
 import MkUserInfo from '@/components/MkUserInfo.vue';
 import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 import { misskeyApi } from '@/utility/misskey-api.js';
+import { useMuteOverrides } from '@/utility/check-word-mute';
+import { deepAssign } from '@/utility/merge';
 
 const props = defineProps<{
 	userId: string;
@@ -54,6 +56,22 @@ const pagination: Paging<'users/notes'> = {
 	})),
 };
 
+const muteOverrides = useMuteOverrides();
+
+function onExpandMute(note: Misskey.entities.Note) {
+	if (note.user.id === props.userId) {
+		// This kills the mandatoryCW for this user below this point
+		deepAssign(muteOverrides, {
+			user: {
+				[props.userId]: {
+					userMandatoryCW: null,
+					instanceMandatoryCW: null,
+				},
+			},
+		});
+	}
+}
+
 defineExpose({
 	reload,
 	user,

packages/frontend/src/components/page/page.block.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<component :is="getComponent(block.type)" :key="block.id" :page="page" :block="block" :h="h"/>
+<component :is="getComponent(block.type)" :key="block.id" :page="page" :block="block" :h="h" @expandMute="n => onExpandNote(n)"/>
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +15,8 @@ import XSection from './page.section.vue';
 import XImage from './page.image.vue';
 import XNote from './page.note.vue';
 import XDynamic from './page.dynamic.vue';
+import { deepAssign } from '@/utility/merge';
+import { useMuteOverrides } from '@/utility/check-word-mute';
 
 function getComponent(type: string) {
 	switch (type) {
@@ -45,4 +47,30 @@ defineProps<{
 	h: number,
 	page: Misskey.entities.Page,
 }>();
+
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
+const muteOverrides = useMuteOverrides();
+
+function onExpandNote(note: Misskey.entities.Note) {
+	// Expand related mutes within this page group
+	deepAssign(muteOverrides, {
+		user: {
+			[note.user.id]: {
+				userMandatoryCW: null,
+				userSilenced: false,
+			},
+		},
+		instance: {
+			[note.user.host ?? '']: {
+				instanceMandatoryCW: null,
+				instanceSilenced: false,
+			},
+		},
+	});
+
+	emit('expandMute', note);
+}
 </script>

packages/frontend/src/components/page/page.dynamic.vue

@@ -23,6 +23,10 @@ const props = defineProps<{
 	block: Misskey.entities.PageBlock,
 	page: Misskey.entities.Page,
 }>();
+
+defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/page/page.image.vue

@@ -19,6 +19,10 @@ const props = defineProps<{
 	page: Misskey.entities.Page,
 }>();
 
+defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const image = ref<Misskey.entities.DriveFile | null>(null);
 
 onMounted(() => {

packages/frontend/src/components/page/page.note.vue

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note"/>
-	<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note"/>
+	<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" :note="note" @expandMute="n => emit('expandMute', n)"/>
+	<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" :note="note" @expandMute="n => emit('expandMute', n)"/>
 </div>
 </template>
 
@@ -24,6 +24,10 @@ const props = defineProps<{
 	index: number;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
+
 const note = ref<Misskey.entities.Note | null>(null);
 
 // eslint-disable-next-line id-denylist

packages/frontend/src/components/page/page.section.vue

@@ -33,6 +33,10 @@ defineProps<{
 	h: number,
 	page: Misskey.entities.Page,
 }>();
+
+defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/page/page.text.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps" :class="$style.textRoot">
 	<Mfm :text="block.text ?? ''" :isBlock="true" :isNote="false"/>
 	<div v-if="isEnabledUrlPreview" class="_gaps_s" @click.stop>
-		<SkUrlPreviewGroup :sourceText="block.text" :showAsQuote="!page.user.rejectQuotes"/>
+		<SkUrlPreviewGroup :sourceText="block.text" :showAsQuote="!page.user.rejectQuotes" @expandMute="n => emit('expandMute', n)"/>
 	</div>
 </div>
 </template>
@@ -21,6 +21,10 @@ defineProps<{
 	block: Misskey.entities.PageBlock,
 	page: Misskey.entities.Page,
 }>();
+
+const emit = defineEmits<{
+	(ev: 'expandMute', note: Misskey.entities.Note): void;
+}>();
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/about.federation.vue

@@ -19,7 +19,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
 				<option value="publishing">{{ i18n.ts.publishing }}</option>
 				<option value="bubble">Bubble</option>
-				<option value="nsfw">NSFW</option>
 				<option v-if="$i" value="suspended">{{ i18n.ts.suspended }}</option>
 				<option v-if="$i" value="silenced">{{ i18n.ts.silence }}</option>
 				<option v-if="$i" value="blocked">{{ i18n.ts.blocked }}</option>
@@ -83,18 +82,16 @@ const pagination = {
 			state.value === 'blocked' ? { blocked: true } :
 			state.value === 'silenced' ? { silenced: true } :
 			state.value === 'notResponding' ? { notResponding: true } :
-			state.value === 'nsfw' ? { nsfw: true } :
 			state.value === 'bubble' ? { bubble: true } :
 			{}),
 	})),
-} as Paging;
+} satisfies Paging;
 
 function getStatus(instance) {
 	if (instance.isSuspended) return 'Suspended';
 	if (instance.isBlocked) return 'Blocked';
 	if (instance.isSilenced) return 'Silenced';
 	if (instance.isNotResponding) return 'Error';
-	if (instance.isNSFW) return 'NSFW';
 	return 'Alive';
 }
 </script>

packages/frontend/src/pages/admin-user.vue

@@ -491,7 +491,7 @@ async function refreshUser() {
 
 async function onMandatoryCWChanged(value: string | number) {
 	await os.promiseDialog(async () => {
-		await misskeyApi('admin/cw-user', { userId: props.userId, cw: String(value) });
+		await misskeyApi('admin/cw-user', { userId: props.userId, cw: String(value) || null });
 		await refreshUser();
 	});
 }

packages/frontend/src/pages/admin/federation.vue

@@ -19,8 +19,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<option value="federating">{{ i18n.ts.federating }}</option>
 						<option value="subscribing">{{ i18n.ts.subscribing }}</option>
 						<option value="publishing">{{ i18n.ts.publishing }}</option>
-						<!-- TODO translate -->
-						<option value="nsfw">NSFW</option>
 						<option value="suspended">{{ i18n.ts.suspended }}</option>
 						<option value="blocked">{{ i18n.ts.blocked }}</option>
 						<option value="silenced">{{ i18n.ts.silence }}</option>
@@ -85,7 +83,6 @@ const pagination = {
 			state.value === 'blocked' ? { blocked: true } :
 			state.value === 'silenced' ? { silenced: true } :
 			state.value === 'notResponding' ? { notResponding: true } :
-			state.value === 'nsfw' ? { nsfw: true } :
 			{}),
 	})),
 };
@@ -104,7 +101,6 @@ function getStatus(instance: Misskey.entities.FederationInstance) {
 	if (instance.isBlocked) return 'Blocked';
 	if (instance.isSilenced) return 'Silenced';
 	if (instance.isNotResponding) return 'Error';
-	if (instance.isNSFW) return 'NSFW';
 	return 'Alive';
 }
 

packages/frontend/src/pages/admin/modlog.ModLog.vue

@@ -27,9 +27,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					'markSensitiveDriveFile',
 					'resetPassword',
 					'setMandatoryCW',
+					'setMandatoryCWForNote',
+					'setMandatoryCWForInstance',
 					'suspendRemoteInstance',
-					'setRemoteInstanceNSFW',
-					'unsetRemoteInstanceNSFW',
 					'rejectRemoteInstanceReports',
 					'acceptRemoteInstanceReports',
 					'rejectQuotesUser',
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					'removeRelay',
 				].includes(log.type)
 			}"
-		>{{ i18n.ts._moderationLogTypes[log.type] }}</b>
+		>{{ i18n.ts._moderationLogTypes[log.type] ?? log.type }}</b>
 		<span v-if="log.type === 'updateUserNote'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'suspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'approve'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
@@ -79,6 +79,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else-if="log.type === 'unsuspend'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'resetPassword'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
 		<span v-else-if="log.type === 'setMandatoryCW'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</span>
+		<span v-else-if="log.type === 'setMandatoryCWForNote'">: @{{ log.info.noteUserUsername }}{{ log.info.noteUserHost ? '@' + log.info.noteUserHost : '' }}</span>
+		<span v-else-if="log.type === 'setMandatoryCWForInstance'">: {{ log.info.host }}</span>
 		<span v-else-if="log.type === 'assignRole'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }} <i class="ti ti-arrow-right"></i> {{ log.info.roleName }}</span>
 		<span v-else-if="log.type === 'unassignRole'">: @{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }} <i class="ti ti-equal-not"></i> {{ log.info.roleName }}</span>
 		<span v-else-if="log.type === 'createRole'">: {{ log.info.role.name }}</span>
@@ -91,8 +93,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span v-else-if="log.type === 'unmarkSensitiveDriveFile'">: @{{ log.info.fileUserUsername }}{{ log.info.fileUserHost ? '@' + log.info.fileUserHost : '' }}</span>
 		<span v-else-if="log.type === 'suspendRemoteInstance'">: {{ log.info.host }}</span>
 		<span v-else-if="log.type === 'unsuspendRemoteInstance'">: {{ log.info.host }}</span>
-		<span v-else-if="log.type === 'setRemoteInstanceNSFW'">: {{ log.info.host }}</span>
-		<span v-else-if="log.type === 'unsetRemoteInstanceNSFW'">: {{ log.info.host }}</span>
 		<span v-else-if="log.type === 'rejectRemoteInstanceReports'">: {{ log.info.host }}</span>
 		<span v-else-if="log.type === 'acceptRemoteInstanceReports'">: {{ log.info.host }}</span>
 		<span v-else-if="log.type === 'createGlobalAnnouncement'">: {{ log.info.announcement.title }}</span>
@@ -208,6 +208,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<CodeDiff :context="0" :hideHeader="true" :oldString="log.info.oldCW ?? ''" :newString="log.info.newCW ?? ''" maxHeight="150px"/>
 			</div>
 		</template>
+		<template v-else-if="log.type === 'setMandatoryCWForNote'">
+			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.noteUserId}`" class="_link">@{{ log.info.noteUserUsername }}{{ log.info.noteUserHost ? '@' + log.info.noteUserHost : '' }}</MkA></div>
+			<div>{{ i18n.ts.note }}: <MkA :to="`/notes/${log.info.noteId}`" class="_link">{{ log.info.noteId }}</MkA></div>
+			<div :class="$style.diff">
+				<CodeDiff :context="0" :hideHeader="true" :oldString="log.info.oldCW ?? ''" :newString="log.info.newCW ?? ''" maxHeight="150px"/>
+			</div>
+		</template>
+		<template v-else-if="log.type === 'setMandatoryCWForInstance'">
+			<div :class="$style.diff">
+				<CodeDiff :context="0" :hideHeader="true" :oldString="log.info.oldCW ?? ''" :newString="log.info.newCW ?? ''" maxHeight="150px"/>
+			</div>
+		</template>
 		<template v-else-if="log.type === 'unsuspend'">
 			<div>{{ i18n.ts.user }}: <MkA :to="`/admin/user/${log.info.userId}`" class="_link">@{{ log.info.userUsername }}{{ log.info.userHost ? '@' + log.info.userHost : '' }}</MkA></div>
 		</template>
@@ -323,6 +335,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</template>
 
+		<MkUrlPreview v-if="'noteId' in log.info" :url="`${url}/notes/${log.info.noteId}`" :compact="false" :detail="false" :showAsQuote="true"></MkUrlPreview>
+
 		<details>
 			<summary>raw</summary>
 			<pre>{{ JSON5.stringify(log, null, '\t') }}</pre>
@@ -338,6 +352,8 @@ import JSON5 from 'json5';
 import { i18n } from '@/i18n.js';
 import MkFolder from '@/components/MkFolder.vue';
 import SkFetchNote from '@/components/SkFetchNote.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import { url } from '@@/js/config.js';
 
 const props = defineProps<{
 	log: Misskey.entities.ModerationLog;

packages/frontend/src/pages/instance-info.vue

@@ -118,11 +118,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInfo v-if="isBaseBlocked" warn>{{ i18n.ts.blockedByBase }}</MkInfo>
 						<MkSwitch v-model="isBlocked" :disabled="!meta || !instance || isBaseBlocked" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</MkSwitch>
 						<MkSwitch v-model="rejectQuotes" :disabled="!instance" @update:modelValue="toggleRejectQuotes">{{ i18n.ts.rejectQuotesInstance }}</MkSwitch>
-						<MkSwitch v-model="isNSFW" :disabled="!instance" @update:modelValue="toggleNSFW">{{ i18n.ts.markInstanceAsNSFW }}</MkSwitch>
 						<MkSwitch v-model="rejectReports" :disabled="!instance" @update:modelValue="toggleRejectReports">{{ i18n.ts.rejectReports }}</MkSwitch>
 						<MkInfo v-if="isBaseMediaSilenced" warn>{{ i18n.ts.mediaSilencedByBase }}</MkInfo>
 						<MkSwitch v-model="isMediaSilenced" :disabled="!meta || !instance || isBaseMediaSilenced" @update:modelValue="toggleMediaSilenced">{{ i18n.ts.mediaSilenceThisInstance }}</MkSwitch>
 
+						<MkInput v-model="mandatoryCW" type="text" manualSave @update:modelValue="onMandatoryCWChanged">
+							<template #label>{{ i18n.ts.mandatoryCW }}</template>
+							<template #caption>{{ i18n.ts.mandatoryCWDescription }}</template>
+						</MkInput>
+
 						<div :class="$style.buttonStrip">
 							<MkButton inline :disabled="!instance" @click="refreshMetadata"><i class="ph-cloud-arrow-down ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</MkButton>
 							<MkButton inline :disabled="!instance" danger @click="deleteAllFiles"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAllFiles }}</MkButton>
@@ -234,6 +238,7 @@ import { copyToClipboard } from '@/utility/copy-to-clipboard';
 import MkFolder from '@/components/MkFolder.vue';
 import MkNumber from '@/components/MkNumber.vue';
 import SkBadgeStrip from '@/components/SkBadgeStrip.vue';
+import MkInput from '@/components/MkInput.vue';
 
 const props = withDefaults(defineProps<{
 	host: string;
@@ -253,12 +258,12 @@ const suspensionState = ref<'none' | 'manuallySuspended' | 'goneSuspended' | 'au
 const isSuspended = ref(false);
 const isBlocked = ref(false);
 const isSilenced = ref(false);
-const isNSFW = ref(false);
 const rejectQuotes = ref(false);
 const rejectReports = ref(false);
 const isMediaSilenced = ref(false);
 const faviconUrl = ref<string | null>(null);
 const moderationNote = ref('');
+const mandatoryCW = ref<string | null>(null);
 
 const baseDomains = computed(() => {
 	const domains: string[] = [];
@@ -306,10 +311,10 @@ const badges = computed(() => {
 				style: 'warning',
 			});
 		}
-		if (instance.value.isNSFW) {
+		if (instance.value.mandatoryCW) {
 			arr.push({
-				key: 'nsfw',
-				label: i18n.ts.nsfw,
+				key: 'cw',
+				label: i18n.ts.cw,
 				style: 'warning',
 			});
 		}
@@ -365,6 +370,13 @@ async function saveModerationNote() {
 	}
 }
 
+async function onMandatoryCWChanged(value: string | number) {
+	await os.promiseDialog(async () => {
+		await misskeyApi('admin/cw-instance', { host: props.host, cw: String(value) || null });
+		await fetch();
+	});
+}
+
 async function fetch(withHint = false): Promise<void> {
 	const [m, i] = await Promise.all([
 		(withHint && props.metaHint)
@@ -383,12 +395,12 @@ async function fetch(withHint = false): Promise<void> {
 	isSuspended.value = suspensionState.value !== 'none';
 	isBlocked.value = instance.value?.isBlocked ?? false;
 	isSilenced.value = instance.value?.isSilenced ?? false;
-	isNSFW.value = instance.value?.isNSFW ?? false;
 	rejectReports.value = instance.value?.rejectReports ?? false;
 	rejectQuotes.value = instance.value?.rejectQuotes ?? false;
 	isMediaSilenced.value = instance.value?.isMediaSilenced ?? false;
 	faviconUrl.value = getProxiedImageUrlNullable(instance.value?.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.value?.iconUrl, 'preview');
 	moderationNote.value = instance.value?.moderationNote ?? '';
+	mandatoryCW.value = instance.value?.mandatoryCW ?? '';
 }
 
 async function toggleBlock(): Promise<void> {
@@ -448,18 +460,6 @@ async function toggleSuspended(): Promise<void> {
 	});
 }
 
-async function toggleNSFW(): Promise<void> {
-	if (!iAmModerator) return;
-	await os.promiseDialog(async () => {
-		if (!instance.value) throw new Error('No instance?');
-		await misskeyApi('admin/federation/update-instance', {
-			host: instance.value.host,
-			isNSFW: isNSFW.value,
-		});
-		await fetch();
-	});
-}
-
 async function toggleRejectReports(): Promise<void> {
 	if (!iAmModerator) return;
 	await os.promiseDialog(async () => {

packages/frontend/src/pages/user/home.vue

@@ -176,10 +176,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkResult type="empty" :text="i18n.ts.noNotes"/>
 							</div>
 							<div v-else class="_panel">
-								<DynamicNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
+								<DynamicNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true" @expandMute="n => onExpandMute(n)"/>
 							</div>
 						</div>
-						<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
+						<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination" @expandMute="n => onExpandMute(n)"/>
 					</MkLazy>
 				</MkStickyContainer>
 			</div>
@@ -198,6 +198,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { getScrollPosition } from '@@/js/scroll.js';
+import { useMuteOverrides } from '@/utility/check-word-mute.js';
 import MkTab from '@/components/MkTab.vue';
 import MkNotes from '@/components/MkNotes.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -222,6 +223,8 @@ import { getStaticImageUrl } from '@/utility/media-proxy.js';
 import MkSparkle from '@/components/MkSparkle.vue';
 import { prefer } from '@/preferences.js';
 import DynamicNote from '@/components/DynamicNote.vue';
+import MkOmit from '@/components/MkOmit.vue';
+import { deepAssign } from '@/utility/merge';
 
 function calcAge(birthdate: string): number {
 	const date = new Date(birthdate);
@@ -254,6 +257,28 @@ const emit = defineEmits<{
 	(ev: 'unfoldFiles'): void;
 }>();
 
+const muteOverrides = useMuteOverrides();
+
+function onExpandMute(note: Misskey.entities.Note) {
+	if (note.user.id === props.user.id) {
+		// This kills the mandatoryCW for this user below this point
+		deepAssign(muteOverrides, {
+			user: {
+				[props.user.id]: {
+					userMandatoryCW: null,
+					userSilenced: false,
+				},
+				instance: {
+					[props.user.host ?? '']: {
+						instanceMandatoryCW: null,
+						instanceSilenced: false,
+					},
+				},
+			},
+		});
+	}
+}
+
 const router = useRouter();
 
 const user = ref(props.user);

packages/frontend/src/pages/user/index.vue

@@ -36,6 +36,8 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { serverContext, assertServerContext } from '@/server-context.js';
 import { isTouchUsing } from '@/utility/touch.js';
+import { useMuteOverrides } from '@/utility/check-word-mute';
+import { deepAssign } from '@/utility/merge';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
@@ -65,6 +67,21 @@ const tab = ref(props.page);
 const user = ref<null | Misskey.entities.UserDetailed>(CTX_USER);
 const error = ref<any>(null);
 
+const muteOverrides = useMuteOverrides();
+
+watch(user, () => {
+	if (user.value) {
+		deepAssign(muteOverrides, {
+			user: {
+				[user.value.id]: {
+					userSilenced: false,
+					instanceSilenced: false,
+				},
+			},
+		});
+	}
+});
+
 function fetchUser(): void {
 	if (props.acct == null) return;
 

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

@@ -1,138 +1,286 @@
 /*
- * 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 { $i } from '@/i';
+import { provide, inject, reactive, computed, unref } from 'vue';
+import type { Ref, ComputedRef, Reactive } from 'vue';
+import { $i } from '@/i.js';
+import { deepAssign } from '@/utility/merge';
 
-export function checkMutes(noteToCheck: ComputedRef<Misskey.entities.Note>, withHardMute?: ComputedRef<boolean>) {
-	const muteEnable = ref(true);
+export interface Mute {
+	hasMute: 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;
-		},
-	});
+	hardMuted?: boolean;
+	softMutedWords?: string[];
+	sensitiveMuted?: boolean;
 
-	const threadMuted = computed(() => {
-		if (!muteEnable.value) return false;
-		return noteToCheck.value.isMutingThread;
-	});
+	userSilenced?: boolean;
+	instanceSilenced?: boolean;
 
-	const noteMuted = computed(() => {
-		if (!muteEnable.value) return false;
-		return noteToCheck.value.isMutingNote;
-	});
+	threadMuted?: boolean;
+	noteMuted?: boolean;
 
-	const hardMuted = computed(() => {
-		if (!withHardMute?.value) return false;
-		return checkMute(noteToCheck.value, $i?.hardMutedWords, true);
-	});
-
-	return { muted, hardMuted, threadMuted, noteMuted };
+	noteMandatoryCW?: string | null;
+	userMandatoryCW?: string | null;
+	instanceMandatoryCW?: 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 interface MuteOverrides {
+	/**
+	 * Allows directly modifying the Mute object for all mutes.
+	 */
+	all?: Partial<Omit<Mute, 'hasMute'>>;
 
-		// Only continue to sensitiveMute if we don't match any *actual* mutes
-		if (result) {
-			return result;
-		}
-	}
+	/**
+	 * Per instance overrides.
+	 * Key: instance hostname.
+	 */
+	instance: Partial<Record<string, Partial<Mute>>>;
 
-	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';
-		}
-	}
+	/**
+	 * Per user overrides.
+	 * Key: user ID.
+	 */
+	user: Partial<Record<string, Partial<Mute>>>;
 
-	return false;
+	/**
+	 * Per note overrides.
+	 * Key: note ID.
+	 */
+	note: Partial<Record<string, Partial<Mute>>>;
+
+	/**
+	 * Per thread overrides.
+	 * Key: thread ID.
+	 */
+	thread: Partial<Record<string, Partial<Mute>>>;
 }
 
-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 const muteOverridesSymbol = Symbol('muteOverrides');
 
-	// 自分自身
-	if (me && typeof(note) === 'object' && (note.userId === me.id)) return false;
+export function useMuteOverrides(): Reactive<MuteOverrides> {
+	// Re-use the same instance if possible
+	let overrides = injectMuteOverrides();
 
-	if (mutedWords.length > 0) {
-		const text = typeof(note) === 'object' ? getNoteText(note) : note;
+	if (!overrides) {
+		overrides = reactive({
+			note: {},
+			user: {},
+			instance: {},
+			thread: {},
+		});
+		provideMuteOverrides(overrides);
+	}
 
-		if (text === '') return false;
+	return overrides;
+}
 
-		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 injectMuteOverrides(): Reactive<MuteOverrides> | null {
+	return inject(muteOverridesSymbol, null);
+}
 
-				// 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.
-					}
-				}
+function provideMuteOverrides(overrides: Reactive<MuteOverrides> | null) {
+	provide(muteOverridesSymbol, overrides);
+}
+
+export function checkMute(note: Misskey.entities.Note | ComputedRef<Misskey.entities.Note>, withHardMute?: boolean | ComputedRef<boolean>, uncollapseCW?: boolean | ComputedRef<boolean>): ComputedRef<Mute> {
+	// inject() can only be used inside script setup, so it MUST be outside the computed block!
+	const overrides = injectMuteOverrides();
+
+	return computed(() => {
+		const _note = unref(note);
+		const _withHardMute = unref(withHardMute) ?? true;
+		const _uncollapseCW = unref(uncollapseCW) ?? false;
+		return getMutes(_note, _withHardMute, _uncollapseCW, overrides);
+	});
+}
+
+function getMutes(note: Misskey.entities.Note, withHardMute: boolean, uncollapseCW: boolean, overrides: MuteOverrides | null): Mute {
+	const override: Partial<Mute> = overrides ? deepAssign(
+		{},
+		note.user.host ? overrides.instance[note.user.host] : undefined,
+		overrides.user[note.user.id],
+		overrides.thread[note.threadId],
+		overrides.note[note.id],
+		overrides.all,
+	) : {};
+
+	const isMe = $i != null && $i.id === note.userId;
+	const bypassSilence = note.bypassSilence || note.user.bypassSilence;
+
+	const hardMuted = override.hardMuted ?? (!isMe && withHardMute && isHardMuted(note));
+	const softMutedWords = override.softMutedWords ?? (isMe ? [] : isSoftMuted(note));
+	const sensitiveMuted = override.sensitiveMuted ?? isSensitiveMuted(note);
+	const userSilenced = override.userSilenced ?? (note.user.isSilenced && !bypassSilence);
+	const instanceSilenced = override.instanceSilenced ?? (note.user.instance?.isSilenced && !bypassSilence) ?? false;
+	const threadMuted = override.threadMuted ?? (!isMe && note.isMutingThread);
+	const noteMuted = override.noteMuted ?? (!isMe && note.isMutingNote);
+	const noteMandatoryCW = getNoteMandatoryCW(note, isMe, uncollapseCW, override);
+	const userMandatoryCW = getUserMandatoryCW(note, bypassSilence, uncollapseCW, override);
+	const instanceMandatoryCW = getInstanceMandatoryCW(note, bypassSilence, uncollapseCW, override);
+
+	const hasMute = hardMuted || softMutedWords.length > 0 || sensitiveMuted || userSilenced || instanceSilenced || threadMuted || noteMuted || !!noteMandatoryCW || !!userMandatoryCW || !!instanceMandatoryCW;
+
+	return { hasMute, hardMuted, softMutedWords, sensitiveMuted, userSilenced, instanceSilenced, threadMuted, noteMuted, noteMandatoryCW, userMandatoryCW, instanceMandatoryCW };
+}
+
+function getNoteMandatoryCW(note: Misskey.entities.Note, isMe: boolean, uncollapseCW: boolean, override: Partial<Mute>): string | null {
+	if (override.noteMandatoryCW !== undefined) return override.noteMandatoryCW;
+	if (uncollapseCW) return null;
+	if (isMe) return null;
+	return note.mandatoryCW ?? null;
+}
+
+function getUserMandatoryCW(note: Misskey.entities.Note, bypassSilence: boolean, uncollapseCW: boolean, override: Partial<Mute>): string | null {
+	if (override.userMandatoryCW !== undefined) return override.userMandatoryCW;
+	if (uncollapseCW) return null;
+	if (bypassSilence) return null;
+	return note.user.mandatoryCW ?? null;
+}
+
+function getInstanceMandatoryCW(note: Misskey.entities.Note, bypassSilence: boolean, uncollapseCW: boolean, override: Partial<Mute>): string | null {
+	if (override.instanceMandatoryCW !== undefined) return override.instanceMandatoryCW;
+	if (uncollapseCW) return null;
+	if (bypassSilence) return null;
+	return note.user.instance?.mandatoryCW ?? null;
+}
+
+function isHardMuted(note: Misskey.entities.Note): boolean {
+	if (!$i?.hardMutedWords.length) return false;
+
+	const inputs = expandNote(note);
+	return containsMutedWord($i.hardMutedWords, inputs);
+}
+
+function isSoftMuted(note: Misskey.entities.Note): string[] {
+	if (!$i?.mutedWords.length) return [];
+
+	const inputs = expandNote(note);
+	return getMutedWords($i.mutedWords, inputs);
+}
+
+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;
+
+	// 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;
+}
+
+export function getMutedWords(mutedWords: (string | string[])[], inputs: Iterable<string>): string[] {
+	// Fixup: string is assignable to Iterable<string>, but doesn't work below.
+	// As a workaround, we can special-case it to "upgrade" plain strings into arrays instead.
+	// We also need a noinspection tag, since JetBrains IDEs don't understand this behavior either.
+	// noinspection SuspiciousTypeOfGuard
+	if (typeof(inputs) === 'string') {
+		inputs = [inputs];
+	}
+
+	// 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 inputs) {
+		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);
+}
+
+export function containsMutedWord(mutedWords: (string | string[])[], inputs: Iterable<string>): 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 inputs) {
+		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);
-
+export 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;
+		}
+	}
+}
+
+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 };
 }

packages/frontend/src/utility/get-note-menu.ts

@@ -151,6 +151,28 @@ export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): Men
 	};
 }
 
+export function getMandatoryCWMenu(note: Misskey.entities.Note): MenuItem {
+	return {
+		icon: 'ph-warning ph-bold ph-lg',
+		text: i18n.ts.mandatoryCWForNote,
+		action: async () => {
+			const result = await os.inputText({
+				type: 'text',
+				title: i18n.ts.mandatoryCWForNote,
+				text: i18n.ts.mandatoryCWForNoteDescription,
+				default: note.mandatoryCW ?? '',
+			});
+
+			if (result.canceled) return;
+
+			await os.apiWithDialog('admin/cw-note', {
+				noteId: note.id,
+				cw: result.result || null,
+			});
+		},
+	};
+}
+
 export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string): MenuItem {
 	return {
 		icon: 'ti ti-link',
@@ -481,6 +503,9 @@ export function getNoteMenu(props: {
 
 		if (appearNote.userId === $i.id || $i.isModerator || $i.isAdmin) {
 			menuItems.push({ type: 'divider' });
+			if ($i.isModerator || $i.isAdmin) {
+				menuItems.push(getMandatoryCWMenu(appearNote));
+			}
 			if (appearNote.userId === $i.id) {
 				menuItems.push({
 					icon: 'ph-pencil-simple ph-bold ph-lg',

packages/frontend/src/utility/get-note-summary.ts

@@ -5,13 +5,15 @@
 
 import * as Misskey from 'misskey-js';
 import { appendContentWarning } from '@@/js/append-content-warning.js';
+import { host } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 
 /**
  * 投稿を表す文字列を取得します。
- * @param {*} note (packされた)投稿
+ * @param note (packされた)投稿
+ * @param withMandatoryCw if true (default), include the note/user/instance mandatory CW
  */
-export const getNoteSummary = (note?: Misskey.entities.Note | null): string => {
+export const getNoteSummary = (note: Misskey.entities.Note | null | undefined, withMandatoryCw = true): string => {
 	if (note == null) {
 		return '';
 	}
@@ -28,8 +30,20 @@ export const getNoteSummary = (note?: Misskey.entities.Note | null): string => {
 
 	// Append mandatory CW, if applicable
 	let cw = note.cw;
-	if (note.user.mandatoryCW) {
-		cw = appendContentWarning(cw, note.user.mandatoryCW);
+	if (withMandatoryCw) {
+		if (note.mandatoryCW) {
+			cw = appendContentWarning(cw, i18n.tsx.noteIsFlaggedAs({ cw: note.mandatoryCW }));
+		}
+		if (note.user.mandatoryCW) {
+			const username = note.user.host
+				? `@${note.user.username}@${note.user.host}`
+				: `@${note.user.username}`;
+			cw = appendContentWarning(cw, i18n.tsx.userIsFlaggedAs({ name: username, cw: note.user.mandatoryCW }));
+		}
+		if (note.user.instance?.mandatoryCW) {
+			const instanceName = note.user.host ?? host;
+			cw = appendContentWarning(cw, i18n.tsx.instanceIsFlaggedAs({ name: instanceName, cw: note.user.instance.mandatoryCW }));
+		}
 	}
 
 	// 本文

packages/frontend/src/utility/get-user-menu.ts

@@ -102,6 +102,22 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		});
 	}
 
+	async function setMandatoryCW() {
+		const result = await os.inputText({
+			type: 'text',
+			title: i18n.ts.mandatoryCW,
+			text: i18n.ts.mandatoryCWDescription,
+			default: user.mandatoryCW ?? '',
+		});
+
+		if (result.canceled) return;
+
+		await os.apiWithDialog('admin/cw-user', {
+			userId: user.id,
+			cw: result.result || null,
+		});
+	}
+
 	async function getConfirmed(text: string): Promise<boolean> {
 		const confirm = await os.confirm({
 			type: 'question',
@@ -157,6 +173,10 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 			action: () => {
 				router.push(`/admin/user/${user.id}`);
 			},
+		}, {
+			icon: 'ph-warning ph-bold ph-lg',
+			text: i18n.ts.mandatoryCW,
+			action: setMandatoryCW,
 		}, { type: 'divider' });
 	}
 

packages/frontend/src/utility/merge.ts

@@ -33,3 +33,39 @@ export function deepMerge<X extends Record<PropertyKey, unknown>>(value: DeepPar
 	}
 	throw new Error('deepMerge: value and def must be pure objects');
 }
+
+/**
+ * Assigns properties from one or more partial objects into a target.
+ * Nested objects are assigned in the same way.
+ * Like Object.assign, but deep.
+ */
+export function deepAssign<T extends Record<PropertyKey, unknown>>(target: T, ...partials: (DeepPartial<T> | undefined)[]): T {
+	return _deepAssign(target, ...partials) as T;
+}
+
+function _deepAssign(target: Record<PropertyKey, unknown>, ...partials: (Record<PropertyKey, unknown> | undefined)[]): Record<PropertyKey, unknown> {
+	if (isPureObject(target)) {
+		for (const partial of partials) {
+			if (!isPureObject(partial)) continue;
+
+			for (const [key, value] of Object.entries(partial)) {
+				// Populate empty keys
+				if (!Reflect.has(target, key)) {
+					target[key] = value;
+					continue;
+				}
+
+				// Merge objects
+				if (isPureObject(target[key]) && isPureObject(value)) {
+					_deepAssign(target[key], value);
+					continue;
+				}
+
+				// Replace flat values
+				target[key] = value;
+			}
+		}
+	}
+
+	return target;
+}