From 73f06e591ab1aecd780fd7f1e1181b86c29b3f7e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 8 Feb 2023 20:07:19 +0900
Subject: [PATCH] revert: 650187deaf

---
 packages/backend/src/core/CustomEmojiService.ts   |  8 ++++++++
 .../src/core/entities/UserEntityService.ts        |  2 +-
 .../frontend/src/components/MkAbuseReport.vue     |  2 +-
 .../frontend/src/components/MkAutocomplete.vue    |  2 +-
 packages/frontend/src/components/MkMenu.vue       |  2 +-
 packages/frontend/src/components/MkNote.vue       |  4 ++--
 .../frontend/src/components/MkNoteDetailed.vue    |  6 +++---
 packages/frontend/src/components/MkNoteHeader.vue |  2 +-
 .../frontend/src/components/MkNotePreview.vue     |  2 +-
 .../frontend/src/components/MkNotification.vue    |  2 +-
 .../src/components/MkReactionsViewer.details.vue  |  2 +-
 .../frontend/src/components/MkUserCardMini.vue    |  2 +-
 packages/frontend/src/components/MkUserInfo.vue   |  2 +-
 .../frontend/src/components/MkUserPreview.vue     |  2 +-
 .../src/components/MkUserSelectDialog.vue         |  4 ++--
 .../frontend/src/components/MkUsersTooltip.vue    |  2 +-
 .../global/MkMisskeyFlavoredMarkdown.vue          |  9 ++++++++-
 .../src/components/global/MkPageHeader.vue        |  2 +-
 .../frontend/src/components/global/MkUserName.vue | 15 +++++++++++++++
 packages/frontend/src/components/index.ts         |  3 +++
 packages/frontend/src/pages/clip.vue              |  2 +-
 packages/frontend/src/pages/follow-requests.vue   |  2 +-
 packages/frontend/src/pages/gallery/post.vue      |  2 +-
 packages/frontend/src/pages/messaging/index.vue   |  2 +-
 packages/frontend/src/pages/my-lists/list.vue     |  2 +-
 packages/frontend/src/pages/note.vue              |  2 +-
 packages/frontend/src/pages/page.vue              |  2 +-
 packages/frontend/src/pages/settings/accounts.vue |  4 +++-
 packages/frontend/src/pages/user-info.vue         |  2 +-
 packages/frontend/src/pages/user/home.vue         |  4 ++--
 packages/frontend/src/widgets/WidgetProfile.vue   |  4 +++-
 31 files changed, 70 insertions(+), 33 deletions(-)
 create mode 100644 packages/frontend/src/components/global/MkUserName.vue

diff --git a/packages/backend/src/core/CustomEmojiService.ts b/packages/backend/src/core/CustomEmojiService.ts
index 3ac796fb2f..63f0319442 100644
--- a/packages/backend/src/core/CustomEmojiService.ts
+++ b/packages/backend/src/core/CustomEmojiService.ts
@@ -150,9 +150,17 @@ export class CustomEmojiService {
 			if (note.renote) {
 				emojis = emojis.concat(note.renote.emojis
 					.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				if (note.renote.user) {
+					emojis = emojis.concat(note.renote.user.emojis
+						.map(e => this.parseEmojiStr(e, note.renote!.userHost)));
+				}
 			}
 			const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
 			emojis = emojis.concat(customReactions);
+			if (note.user) {
+				emojis = emojis.concat(note.user.emojis
+					.map(e => this.parseEmojiStr(e, note.userHost)));
+			}
 		}
 		return emojis.filter(x => x.name != null && x.host != null) as { name: string; host: string; }[];
 	}
diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts
index 09b69d509a..eea9d5567d 100644
--- a/packages/backend/src/core/entities/UserEntityService.ts
+++ b/packages/backend/src/core/entities/UserEntityService.ts
@@ -413,6 +413,7 @@ export class UserEntityService implements OnModuleInit {
 				faviconUrl: instance.faviconUrl,
 				themeColor: instance.themeColor,
 			} : undefined) : undefined,
+			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			onlineStatus: this.getOnlineStatus(user),
 			// パフォーマンス上の理由でローカルユーザーのみ
 			badgeRoles: user.host == null ? this.roleService.getUserBadgeRoles(user.id).then(rs => rs.map(r => ({
@@ -463,7 +464,6 @@ export class UserEntityService implements OnModuleInit {
 					isModerator: role.isModerator,
 					isAdministrator: role.isAdministrator,
 				}))),
-				emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
 			} : {}),
 
 			...(opts.detail && isMe ? {
diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index 701dd8bb3d..0e18a5a83d 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -4,7 +4,7 @@
 		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
 			<MkAvatar class="avatar" :user="report.targetUser" indicator/>
 			<div class="names">
-				<span class="name _nowrap">{{ report.targetUser.name ?? report.targetUser.username }}</span>
+				<MkUserName class="name" :user="report.targetUser"/>
 				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
 			</div>
 		</MkA>
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
index 595e393e01..e523b988b0 100644
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -4,7 +4,7 @@
 		<li v-for="user in users" tabindex="-1" :class="$style.item" @click="complete(type, user)" @keydown="onKeydown">
 			<img :class="$style.avatar" :src="user.avatarUrl"/>
 			<span :class="$style.userName">
-				<span :key="user.id" class="_nowrap">{{ user.name ?? user.username }}</span>
+				<MkUserName :key="user.id" :user="user"/>
 			</span>
 			<span>@{{ acct(user) }}</span>
 		</li>
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index 2185a3ed08..eee77a9475 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -27,7 +27,7 @@
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</a>
 			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" :class="$style.avatar"/><span class="_nowrap">{{ item.user.name ?? item.user.username }}</span>
+				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 			<span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index a77158c862..351861ac17 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -17,7 +17,7 @@
 		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText">
 			<template #user>
 				<MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)">
-					<span class="_nowrap">{{ note.user.name ?? note.user.username }}</span>
+					<MkUserName :user="note.user"/>
 				</MkA>
 			</template>
 		</I18n>
@@ -108,7 +108,7 @@
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)">
-				<span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span>
+				<MkUserName :user="appearNote.user"/>
 			</MkA>
 		</template>
 	</I18n>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index b632a77396..0da06c4f14 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -16,7 +16,7 @@
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
-					<span class="_nowrap">{{ note.user.name ?? note.user.username }}</span>
+					<MkUserName :user="note.user"/>
 				</MkA>
 			</template>
 		</I18n>
@@ -39,7 +39,7 @@
 			<div class="body">
 				<div class="top">
 					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
-						<span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span>
+						<MkUserName :nowrap="false" :user="appearNote.user"/>
 					</MkA>
 					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
 					<div class="info">
@@ -125,7 +125,7 @@
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span>
+				<MkUserName :user="appearNote.user"/>
 			</MkA>
 		</template>
 	</I18n>
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index d86a37ed55..6b43f14665 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -1,7 +1,7 @@
 <template>
 <header :class="$style.root">
 	<MkA v-once v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
-		<span class="_nowrap">{{ note.user.name ?? note.user.username }}</span>
+		<MkUserName :user="note.user"/>
 	</MkA>
 	<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
 	<div :class="$style.username"><MkAcct :user="note.user"/></div>
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
index d3862e2ac3..1cc01386ba 100644
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -3,7 +3,7 @@
 	<MkAvatar :class="$style.avatar" :user="$i" link preview/>
 	<div :class="$style.main">
 		<div :class="$style.header">
-			<span class="_nowrap">{{ $i.name ?? $i.username }}</span>
+			<MkUserName :user="$i"/>
 		</div>
 		<div>
 			<div :class="$style.content">
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index fd055dfb58..e7a951dd27 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -31,7 +31,7 @@
 		<header :class="$style.header">
 			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
 			<span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span>
-			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><span class="_nowrap">{{ notification.user.name ?? notification.user.username }}</span></MkA>
+			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
 		</header>
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
index b0d7ebf3ee..b4210be911 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -8,7 +8,7 @@
 		<div :class="$style.users">
 			<div v-for="u in users" :key="u.id" :class="$style.user">
 				<MkAvatar :class="$style.avatar" :user="u"/>
-				<span class="_nowrap">{{ u.name ?? u.username }}</span>
+				<MkUserName :user="u" :nowrap="true"/>
 			</div>
 			<div v-if="users.length > 10">+{{ count - 10 }}</div>
 		</div>
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
index e2b9b2a15f..457504e6ca 100644
--- a/packages/frontend/src/components/MkUserCardMini.vue
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -2,7 +2,7 @@
 <div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
 	<MkAvatar class="avatar" :user="user" indicator/>
 	<div class="body">
-		<span class="name _nowrap">{{ user.name ?? user.username }}</span>
+		<span class="name"><MkUserName class="name" :user="user"/></span>
 		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
 	</div>
 	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index a15cc2c2c9..1486423b3d 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -3,7 +3,7 @@
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
 	<MkAvatar class="avatar" :user="user" indicator/>
 	<div class="title">
-		<MkA class="name _nowrap" :to="userPage(user)">{{ user.name ?? user.username }}</MkA>
+		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>
 	</div>
 	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
index c9519a29a5..f68fdd64d9 100644
--- a/packages/frontend/src/components/MkUserPreview.vue
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -7,7 +7,7 @@
 			</div>
 			<MkAvatar class="avatar" :user="user" indicator/>
 			<div class="title">
-				<MkA class="name _nowrap" :to="userPage(user)">{{ user.name ?? user.username }}</MkA>
+				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<p class="username"><MkAcct :user="user"/></p>
 			</div>
 			<div class="description">
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index dd976a4b35..c17b97f283 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -27,7 +27,7 @@
 				<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
 					<MkAvatar :user="user" :class="$style.avatar" indicator/>
 					<div :class="$style.userBody">
-						<span :class="$style.userName" class="_nowrap">{{ user.name ?? user.username }}</span>
+						<MkUserName :user="user" :class="$style.userName"/>
 						<MkAcct :user="user" :class="$style.userAcct"/>
 					</div>
 				</div>
@@ -41,7 +41,7 @@
 				<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()">
 					<MkAvatar :user="user" :class="$style.avatar" indicator/>
 					<div :class="$style.userBody">
-						<span :class="$style.userName" class="_nowrap">{{ user.name ?? user.username }}</span>
+						<MkUserName :user="user" :class="$style.userName"/>
 						<MkAcct :user="user" :class="$style.userAcct"/>
 					</div>
 				</div>
diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue
index c2c7271fcd..d0f95fceda 100644
--- a/packages/frontend/src/components/MkUsersTooltip.vue
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@@ -3,7 +3,7 @@
 	<div :class="$style.root">
 		<div v-for="u in users" :key="u.id" :class="$style.user">
 			<MkAvatar :class="$style.avatar" :user="u"/>
-			<span :class="$style.name" class="_nowrap">{{ u.name ?? u.username }}</span>
+			<MkUserName :class="$style.name" :user="u" :nowrap="true"/>
 		</div>
 		<div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div>
 	</div>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
index f49dc7ddff..28a0d1c986 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,5 +1,5 @@
 <template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { '_nowrap': nowrap }]"/>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/>
 </template>
 
 <script lang="ts" setup>
@@ -160,5 +160,12 @@ const props = withDefaults(defineProps<{
 <style lang="scss" module>
 .root {
 	white-space: pre-wrap;
+
+	&.nowrap {
+		white-space: pre;
+		word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 }
 </style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 3dcb19bd89..ab66502e06 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -9,7 +9,7 @@
 			<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i>
 
 			<div :class="$style.title">
-				<span v-if="metadata.userName" class="_nowrap">{{ metadata.userName.name ?? metadata.userName.username }}</span>
+				<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/>
 				<div v-else-if="metadata.title">{{ metadata.title }}</div>
 				<div v-if="!narrow && metadata.subtitle" :class="$style.subtitle">
 					{{ metadata.subtitle }}
diff --git a/packages/frontend/src/components/global/MkUserName.vue b/packages/frontend/src/components/global/MkUserName.vue
new file mode 100644
index 0000000000..4186a4a4fb
--- /dev/null
+++ b/packages/frontend/src/components/global/MkUserName.vue
@@ -0,0 +1,15 @@
+<template>
+<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	nowrap?: boolean;
+}>(), {
+	nowrap: true,
+});
+</script>
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 4ddebe7827..560870f84c 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -6,6 +6,7 @@ import MkAcct from './global/MkAcct.vue';
 import MkAvatar from './global/MkAvatar.vue';
 import MkEmoji from './global/MkEmoji.vue';
 import MkCustomEmoji from './global/MkCustomEmoji.vue';
+import MkUserName from './global/MkUserName.vue';
 import MkEllipsis from './global/MkEllipsis.vue';
 import MkTime from './global/MkTime.vue';
 import MkUrl from './global/MkUrl.vue';
@@ -27,6 +28,7 @@ export default function(app: App) {
 	app.component('MkAvatar', MkAvatar);
 	app.component('MkEmoji', MkEmoji);
 	app.component('MkCustomEmoji', MkCustomEmoji);
+	app.component('MkUserName', MkUserName);
 	app.component('MkEllipsis', MkEllipsis);
 	app.component('MkTime', MkTime);
 	app.component('MkUrl', MkUrl);
@@ -48,6 +50,7 @@ declare module '@vue/runtime-core' {
 		MkAvatar: typeof MkAvatar;
 		MkEmoji: typeof MkEmoji;
 		MkCustomEmoji: typeof MkCustomEmoji;
+		MkUserName: typeof MkUserName;
 		MkEllipsis: typeof MkEllipsis;
 		MkTime: typeof MkTime;
 		MkUrl: typeof MkUrl;
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index 89419f79cb..cd9cec0d4f 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -8,7 +8,7 @@
 					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 				</div>
 				<div class="user">
-					<MkAvatar :user="clip.user" class="avatar" indicator link preview/> <span class="_nowrap">{{ clip.user.name ?? clip.user.username }}</span>
+					<MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/>
 				</div>
 			</div>
 
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
index e8a59d71e0..835dd0b54c 100644
--- a/packages/frontend/src/pages/follow-requests.vue
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -15,7 +15,7 @@
 						<MkAvatar class="avatar" :user="req.follower" indicator link preview/>
 						<div class="body">
 							<div class="name">
-								<MkA v-user-preview="req.follower.id" class="name _nowrap" :to="userPage(req.follower)">{{ req.follower.name ?? req.follower.username }}</MkA>
+								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
 								<p class="acct">@{{ acct(req.follower) }}</p>
 							</div>
 							<div v-if="req.follower.description" class="description" :title="req.follower.description">
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 20bc0e3d39..31e2727bb5 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -30,7 +30,7 @@
 						<div class="user">
 							<MkAvatar :user="post.user" class="avatar" link preview/>
 							<div class="name">
-								<div class="_nowrap">{{ post.user.name ?? post.user.username }}</div>
+								<MkUserName :user="post.user" style="display: block;"/>
 								<MkAcct :user="post.user"/>
 							</div>
 							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 0fd1f71d42..3d11cf13e9 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -22,7 +22,7 @@
 							<MkTime :time="message.createdAt" class="time"/>
 						</header>
 						<header v-else>
-							<span class="name">{{ isMe(message) ? message.recipient.name : message.user.name }}</span>
+							<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
 							<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
 							<MkTime :time="message.createdAt" class="time"/>
 						</header>
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index cb190fb112..f47b4bf90f 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -21,7 +21,7 @@
 							<div v-for="user in users" :key="user.id" class="user _panel">
 								<MkAvatar :user="user" class="avatar" indicator link preview/>
 								<div class="body">
-									<span class="name _nowrap">{{ user.name ?? user.username }}</span>
+									<MkUserName :user="user" class="name"/>
 									<MkAcct :user="user" class="acct"/>
 								</div>
 								<div class="action">
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index e28c30f627..86b3fce3c5 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -21,7 +21,7 @@
 								<b>{{ item.name }}</b>
 								<div v-if="item.description" class="description">{{ item.description }}</div>
 								<div class="user">
-									<MkAvatar :user="item.user" class="avatar" indicator link preview/> <span class="_nowrap">{{ item.user.name ?? item.user.username }}</span>
+									<MkAvatar :user="item.user" class="avatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/>
 								</div>
 							</MkA>
 						</div>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index a4bc17e3bf..202244b34c 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -29,7 +29,7 @@
 					<div class="user">
 						<MkAvatar :user="page.user" class="avatar" link preview/>
 						<div class="name">
-							<div class="_nowrap">{{ page.user.name ?? page.user.username }}</div>
+							<MkUserName :user="page.user" style="display: block;"/>
 							<MkAcct :user="page.user"/>
 						</div>
 						<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
index 8fa30bccba..a5eaae2bad 100644
--- a/packages/frontend/src/pages/settings/accounts.vue
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -9,7 +9,9 @@
 					<MkAvatar :user="account" class="avatar"/>
 				</div>
 				<div class="body">
-					<div class="name _nowrap">{{ account.name ?? account.username }}</div>
+					<div class="name">
+						<MkUserName :user="account"/>
+					</div>
 					<div class="acct">
 						<MkAcct :user="account"/>
 					</div>
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
index 40e5ec83c9..7ba8a3d16b 100644
--- a/packages/frontend/src/pages/user-info.vue
+++ b/packages/frontend/src/pages/user-info.vue
@@ -7,7 +7,7 @@
 				<div class="aeakzknw">
 					<MkAvatar class="avatar" :user="user" indicator link preview/>
 					<div class="body">
-						<span class="name _nowrap">{{ user.name ?? user.username }}</span>
+						<span class="name"><MkUserName class="name" :user="user"/></span>
 						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
 						<span class="state">
 							<span v-if="suspended" class="suspended">Suspended</span>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index e4bb024a83..56858a9377 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -14,7 +14,7 @@
 						<div ref="bannerEl" class="banner" :style="style"></div>
 						<div class="fade"></div>
 						<div class="title">
-							<span class="name _nowrap">{{ user.name ?? user.username }}</span>
+							<MkUserName class="name" :user="user" :nowrap="true"/>
 							<div class="bottom">
 								<span class="username"><MkAcct :user="user" :detail="true"/></span>
 								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
@@ -30,7 +30,7 @@
 					</div>
 					<MkAvatar class="avatar" :user="user" indicator/>
 					<div class="title">
-						<span class="name _nowrap">{{ user.name ?? user.username }}</span>
+						<MkUserName :user="user" :nowrap="false" class="name"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true"/></span>
 							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue
index b2a5c87104..7e8ac429e5 100644
--- a/packages/frontend/src/widgets/WidgetProfile.vue
+++ b/packages/frontend/src/widgets/WidgetProfile.vue
@@ -6,7 +6,9 @@
 		</div>
 		<div :class="$style.bodyContainer">
 			<div :class="$style.body">
-				<MkA :class="$style.name" :to="userPage($i)" class="_nowrap">{{ $i.name ?? $i.username }}</MkA>
+				<MkA :class="$style.name" :to="userPage($i)">
+					<MkUserName :user="$i"/>
+				</MkA>
 				<div :class="$style.username"><MkAcct :user="$i" detail/></div>
 			</div>
 		</div>