show muted words in following feed

packages/frontend/src/components/SkFollowingFeedEntry.vue

@@ -18,7 +18,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkA>
 		</header>
 		<div>
-			<div v-if="isMuted" :class="[$style.text, $style.muted]">({{ i18n.ts.postFiltered }})</div>
+			<div v-if="mutedWords" :class="[$style.text, $style.muted]">
+				<template v-if="prefer.s.showSoftWordMutedWord">{{ i18n.tsx.userSaysSomethingAbout({ name: i18n.ts.user, word: mutedWords}) }}</template>
+				<template v-else>{{ i18n.ts.postFiltered }}</template>
+			</div>
 			<Mfm v-else :class="$style.text" :text="getNoteSummary(note)" :isBlock="true" :plain="true" :nowrap="false" :isNote="true" nyaize="respect" :author="note.user"/>
 		</div>
 	</div>
@@ -27,17 +30,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <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 { i18n } from '@/i18n.js';
+import { getSoftMutedWords } from '@/utility/following-feed-utils';
+import { prefer } from '@/preferences';
 
-withDefaults(defineProps<{
+const props = defineProps<{
 	note: Misskey.entities.Note,
-	isMuted: boolean
-}>(), {
-	isMuted: false,
-});
+}>();
+
+const mutedWords = computed(() => getSoftMutedWords(props.note));
 
 defineEmits<{
 	(event: 'select', user: Misskey.entities.UserLite): void

packages/frontend/src/components/SkFollowingRecentNotes.vue

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

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

@@ -4,6 +4,7 @@
  */
 
 import { computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import type { Ref, WritableComputedRef } from 'vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -13,6 +14,8 @@ import { i18n } from '@/i18n.js';
 import { popupMenu } from '@/os.js';
 import { prefer } from '@/preferences.js';
 import { followingTab, followersTab, mutualsTab, defaultFollowingFeedState } from '@/types/following-feed.js';
+import { $i } from '@/i';
+import { checkWordMute } from '@/utility/check-word-mute';
 
 export function followingTabName(tab: FollowingFeedTab): string;
 export function followingTabName(tab: FollowingFeedTab | null | undefined): null;
@@ -149,3 +152,35 @@ function createDefaultStorage(): Ref<StorageInterface> {
 		},
 	}));
 }
+
+export function getSoftMutedWords(note: Misskey.entities.Note): string | null {
+	return getMutedWords(note, $i?.mutedWords);
+}
+
+export function getHardMutedWords(note: Misskey.entities.Note): string | null {
+	return getMutedWords(note, $i?.hardMutedWords);
+}
+
+// Match the typing used by Misskey
+type Mutes = (string | string[])[] | null | undefined;
+
+// Adapted from MkNote.ts
+function getMutedWords(note: Misskey.entities.Note, mutes: Mutes): string | null {
+	return checkMute(note, mutes)
+		?? checkMute(note.reply, mutes)
+		?? checkMute(note.renote, mutes);
+}
+
+// Adapted from check-word-mute.ts
+function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes): string | null {
+	if (!note) {
+		return null;
+	}
+
+	if (!mutes || mutes.length < 1) {
+		return null;
+	}
+
+	const mutedWords = checkWordMute(note, $i, mutes);
+	return mutedWords ? mutedWords.flat(2).join(', ') : null;
+}