fix(frontend): MFM doesn't work in some places

packages/frontend/src/components/MkChannelPreview.vue

@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 		<article v-if="channel.description">
-			<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+			<Mfm :text="channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description" :isNote="false"/>
 		</article>
 		<footer>
 			<span v-if="channel.lastNotedAt">
@@ -47,11 +47,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 
 const props = defineProps<{
-	channel: Record<string, any>;
+	channel: Misskey.entities.Channel;
 }>();
 
 const getLastReadedAt = (): number | null => {

packages/frontend/src/components/MkFlashPreview.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</p>
 		<footer>
 			<img class="icon" :src="flash.user.avatarUrl"/>
-			<p>{{ userName(flash.user) }}</p>
+			<MkUserName class="name" :user="flash.user"/>
 		</footer>
 	</article>
 </MkA>
@@ -23,7 +23,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import { userName } from '@/filters/user.js';
 
 const props = defineProps<{
 	flash: Misskey.entities.Flash;
@@ -80,7 +79,7 @@ const props = defineProps<{
 				vertical-align: top;
 			}
 
-			> p {
+			> .name {
 				display: inline-block;
 				margin: 0;
 				color: var(--urlPreviewInfo);

packages/frontend/src/components/MkPagePreview.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
 			<img v-if="page.user.avatarUrl" class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ userName(page.user) }}</p>
+			<MkUserName class="name" :user="page.user"/>
 		</footer>
 	</article>
 </MkA>
@@ -30,7 +30,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import { userName } from '@/filters/user.js';
 import MediaImage from '@/components/MkMediaImage.vue';
 
 const props = defineProps<{
@@ -112,7 +111,7 @@ const props = defineProps<{
 				vertical-align: top;
 			}
 
-			> p {
+			> .name {
 				display: inline-block;
 				margin: 0;
 				color: var(--urlPreviewInfo);

packages/frontend/src/components/MkPageWindow.vue

@@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header>
 		<template v-if="pageMetadata">
 			<i v-if="pageMetadata.icon" :class="pageMetadata.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.title }}</span>
+			<Mfm :text="pageMetadata.title" :plain="true"/>
 		</template>
 	</template>
 

packages/frontend/src/components/MkToast.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	>
 		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
 			<div style="padding: 16px 24px;">
-				{{ message }}
+				<Mfm :text="message" :plain="true" :nowrap="true"/>
 			</div>
 		</div>
 	</Transition>

packages/frontend/src/filters/user.ts

@@ -10,10 +10,6 @@ export const acct = (user: Misskey.Acct) => {
 	return Misskey.acct.toString(user);
 };
 
-export const userName = (user: Misskey.entities.User) => {
-	return user.name || user.username;
-};
-
 export const userPage = (user: Misskey.Acct, path?: string, absolute = false) => {
 	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
 };