Emoji support in profile (#3514)

* Emoji in profile

* Add emojis to fields

src/client/app/mobile/views/components/note-card.vue

@@ -2,7 +2,9 @@
 <div class="mk-note-card">
 	<a :href="note | notePage">
 		<header>
-			<img :src="note.user.avatarUrl" alt="avatar"/><h3>{{ note.user | userName }}</h3>
+			<img :src="note.user.avatarUrl" alt="avatar"/><h3>
+				<misskey-flavored-markdown :text="note.user.name || note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="note.user.emojis"/>
+			</h3>
 		</header>
 		<div>
 			{{ text }}

src/client/app/mobile/views/components/note-detail.vue

@@ -20,7 +20,9 @@
 		<header>
 			<mk-avatar class="avatar" :user="appearNote.user"/>
 			<div>
-				<router-link class="name" :to="appearNote.user | userPage">{{ appearNote.user | userName }}</router-link>
+				<router-link class="name" :to="appearNote.user | userPage">
+					<misskey-flavored-markdown :text="appearNote.user.name || appearNote.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="appearNote.user.emojis"/>
+				</router-link>
 				<span class="username"><mk-acct :user="appearNote.user"/></span>
 			</div>
 		</header>

src/client/app/mobile/views/components/notification-preview.vue

@@ -3,7 +3,7 @@
 	<template v-if="notification.type == 'reaction'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
-			<p><mk-reaction-icon :reaction="notification.reaction"/>{{ notification.user | userName }}</p>
+			<p><mk-reaction-icon :reaction="notification.reaction"/><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></p>
 			<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/></p>
 		</div>
 	</template>
@@ -11,7 +11,7 @@
 	<template v-if="notification.type == 'renote'">
 		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
-			<p><fa icon="retweet"/>{{ notification.note.user | userName }}</p>
+			<p><fa icon="retweet"/><misskey-flavored-markdown :text="notification.note.user.name || notification.note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.note.user.emojis"/></p>
 			<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note.renote) }}<fa icon="quote-right"/></p>
 		</div>
 	</template>
@@ -19,7 +19,7 @@
 	<template v-if="notification.type == 'quote'">
 		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
-			<p><fa icon="quote-left"/>{{ notification.note.user | userName }}</p>
+			<p><fa icon="quote-left"/><misskey-flavored-markdown :text="notification.note.user.name || notification.note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.note.user.emojis"/></p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -27,21 +27,21 @@
 	<template v-if="notification.type == 'follow'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
-			<p><fa icon="user-plus"/>{{ notification.user | userName }}</p>
+			<p><fa icon="user-plus"/><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'receiveFollowRequest'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
-			<p><fa icon="user-clock"/>{{ notification.user | userName }}</p>
+			<p><fa icon="user-clock"/><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></p>
 		</div>
 	</template>
 
 	<template v-if="notification.type == 'reply'">
 		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
-			<p><fa icon="reply"/>{{ notification.note.user | userName }}</p>
+			<p><fa icon="reply"/><misskey-flavored-markdown :text="notification.note.user.name || notification.note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.note.user.emojis"/></p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -49,7 +49,7 @@
 	<template v-if="notification.type == 'mention'">
 		<mk-avatar class="avatar" :user="notification.note.user"/>
 		<div class="text">
-			<p><fa icon="at"/>{{ notification.note.user | userName }}</p>
+			<p><fa icon="at"/><misskey-flavored-markdown :text="notification.note.user.name || notification.note.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.note.user.emojis"/></p>
 			<p class="note-preview">{{ getNoteSummary(notification.note) }}</p>
 		</div>
 	</template>
@@ -57,7 +57,7 @@
 	<template v-if="notification.type == 'poll_vote'">
 		<mk-avatar class="avatar" :user="notification.user"/>
 		<div class="text">
-			<p><fa icon="chart-pie"/>{{ notification.user | userName }}</p>
+			<p><fa icon="chart-pie"/><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></p>
 			<p class="note-ref"><fa icon="quote-left"/>{{ getNoteSummary(notification.note) }}<fa icon="quote-right"/></p>
 		</div>
 	</template>

src/client/app/mobile/views/components/notification.vue

@@ -5,7 +5,7 @@
 		<div>
 			<header>
 				<mk-reaction-icon :reaction="notification.reaction"/>
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<router-link :to="notification.user | userPage"><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
@@ -20,7 +20,7 @@
 		<div>
 			<header>
 				<fa icon="retweet"/>
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<router-link :to="notification.user | userPage"><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
@@ -34,7 +34,7 @@
 		<div>
 			<header>
 				<fa icon="user-plus"/>
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<router-link :to="notification.user | userPage"><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 		</div>
@@ -45,7 +45,7 @@
 		<div>
 			<header>
 				<fa icon="user-clock"/>
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<router-link :to="notification.user | userPage"><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 		</div>
@@ -56,7 +56,7 @@
 		<div>
 			<header>
 				<fa icon="chart-pie"/>
-				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<router-link :to="notification.user | userPage"><misskey-flavored-markdown :text="notification.user.name || notification.user.username" :shouldBreak="false" :plainText="true" :custom-emojis="notification.user.emojis"/></router-link>
 				<mk-time :time="notification.createdAt"/>
 			</header>
 			<router-link class="note-ref" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">

src/client/app/mobile/views/components/post-form.vue

@@ -13,7 +13,10 @@
 			<mk-note-preview class="preview" v-if="reply" :note="reply"/>
 			<mk-note-preview class="preview" v-if="renote" :note="renote"/>
 			<div v-if="visibility == 'specified'" class="visibleUsers">
-				<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
+				<span v-for="u in visibleUsers">
+					<misskey-flavored-markdown :text="u.name || u.username" :shouldBreak="false" :plainText="true" :custom-emojis="u.emojis"/>
+					<a @click="removeVisibleUser(u)">[x]</a>
+				</span>
 				<a @click="addVisibleUser">+{{ $t('add-visible-user') }}</a>
 			</div>
 			<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="'cw'">

src/client/app/mobile/views/components/ui.nav.vue

@@ -11,7 +11,9 @@
 		<div class="body" v-if="isOpen">
 			<router-link class="me" v-if="$store.getters.isSignedIn" :to="`/@${$store.state.i.username}`">
 				<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
-				<p class="name">{{ $store.state.i | userName }}</p>
+				<p class="name">
+					<misskey-flavored-markdown :text="$store.state.i.name || $store.state.i.username" :shouldBreak="false" :plainText="true" :custom-emojis="$store.state.i.emojis"/>
+				</p>
 			</router-link>
 			<div class="links">
 				<ul>

src/client/app/mobile/views/components/user-card.vue

@@ -3,7 +3,9 @@
 	<header :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
 		<mk-avatar class="avatar" :user="user"/>
 	</header>
-	<a class="name" :href="user | userPage" target="_blank">{{ user | userName }}</a>
+	<a class="name" :href="user | userPage" target="_blank">
+		<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+	</a>
 	<p class="username"><mk-acct :user="user"/></p>
 	<mk-follow-button class="follow-button" :user="user"/>
 </div>

src/client/app/mobile/views/components/user-preview.vue

@@ -3,11 +3,15 @@
 	<mk-avatar class="avatar" :user="user"/>
 	<div class="main">
 		<header>
-			<router-link class="name" :to="user | userPage">{{ user | userName }}</router-link>
+			<router-link class="name" :to="user | userPage">
+				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+			</router-link>
 			<span class="username"><mk-acct :user="user"/></span>
 		</header>
 		<div class="body">
-			<div class="description">{{ user.description }}</div>
+			<div class="description">
+				<misskey-flavored-markdown v-if="u.description" :text="u.description" :author="u" :i="$store.state.i" :custom-emojis="u.emojis"/>
+			</div>
 		</div>
 	</div>
 </div>

src/client/app/mobile/views/pages/received-follow-requests.vue

@@ -4,7 +4,9 @@
 
 	<main>
 		<div v-for="req in requests">
-			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
+			<router-link :key="req.id" :to="req.follower | userPage">
+				<misskey-flavored-markdown :text="req.follower.name || req.follower.username" :shouldBreak="false" :plainText="true" :custom-emojis="req.follower.emojis"/>
+			</router-link>
 			<span>
 				<a @click="accept(req.follower)">{{ $t('accept') }}</a>|<a @click="reject(req.follower)">{{ $t('reject') }}</a>
 			</span>

src/client/app/mobile/views/pages/user-list.vue

@@ -4,7 +4,9 @@
 
 	<main v-if="!fetching">
 		<ul>
-			<li v-for="user in users" :key="user.id"><router-link :to="user | userPage">{{ user | userName }}</router-link></li>
+			<li v-for="user in users" :key="user.id"><router-link :to="user | userPage">
+				<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+			</router-link></li>
 		</ul>
 	</main>
 </mk-ui>

src/client/app/mobile/views/pages/user.vue

@@ -1,6 +1,8 @@
 <template>
 <mk-ui>
-	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
+	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">
+		<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
+	</template>
 	<main v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('is-suspended') }}</p></div>
 		<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></p></div>
@@ -15,12 +17,12 @@
 					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
-					<h1>{{ user | userName }}</h1>
+					<h1><misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/></h1>
 					<span class="username"><mk-acct :user="user" :detail="true" /></span>
 					<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
 				</div>
 				<div class="description">
-					<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i"/>
+					<misskey-flavored-markdown v-if="user.description" :text="user.description" :author="user" :i="$store.state.i" :custom-emojis="user.emojis"/>
 				</div>
 				<div class="info">
 					<p class="location" v-if="user.host === null && user.profile.location">

src/client/app/mobile/views/widgets/profile.vue

@@ -8,7 +8,9 @@
 			:src="$store.state.i.avatarUrl"
 			alt="avatar"
 		/>
-		<router-link :class="$style.name" :to="$store.state.i | userPage">{{ $store.state.i | userName }}</router-link>
+		<router-link :class="$style.name" :to="$store.state.i | userPage">
+			<misskey-flavored-markdown :text="$store.state.i.name || $store.state.i.username" :shouldBreak="false" :plainText="true" :custom-emojis="$store.state.i.emojis"/>
+		</router-link>
 	</mk-widget-container>
 </div>
 </template>