Improve mention display

3 files changed, 79 insertions, 15 deletions

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a98d055f83..ade4e68873 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -179,6 +179,7 @@ common:
 
   dev: "アプリの作成に失敗しました。再度お試しください。"
   ai-chan-kawaii: "藍ちゃかわいい"
+  you: "あなた"
 
 auth/views/form.vue:
   share-access: "<i>{name}</i>があなたのアカウントにアクセスすることを許可しますか？"
diff --git a/src/client/app/common/views/components/mention.vue b/src/client/app/common/views/components/mention.vue
new file mode 100644
index 0000000000..45c033743e
--- /dev/null
+++ b/src/client/app/common/views/components/mention.vue
@@ -0,0 +1,70 @@
+<template>
+<router-link class="ldlomzub" :to="`/@${ canonical }`" v-user-preview="canonical">
+	<span class="me" v-if="isMe">{{ $t('@.you') }}</span>
+	<span class="main">
+		<span class="username">@{{ username }}</span>
+		<span class="host" :class="{ fade: $store.state.settings.contrastedAcct }" v-if="(host != localHost) || $store.state.settings.showFullAcct">@{{ toUnicode(host) }}</span>
+	</span>
+</router-link>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { toUnicode } from 'punycode';
+import { host as localHost } from '../../../config';
+
+export default Vue.extend({
+	i18n: i18n(),
+	props: {
+		username: {
+			type: String,
+			required: true
+		},
+		host: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			localHost
+		};
+	},
+	computed: {
+		canonical(): string {
+			return `@${this.username}@${toUnicode(this.host)}`;
+		},
+		isMe(): boolean {
+			return this.$store.getters.isSignedIn && this.canonical.toLowerCase() === `@${this.$store.state.i.username}@${toUnicode(localHost)}`.toLowerCase();
+		}
+	},
+	methods: {
+		toUnicode
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ldlomzub
+	color var(--mfmMention)
+
+	> .me
+		pointer-events none
+		user-select none
+		padding 0 4px
+		background var(--primary)
+		border solid 1px var(--primary)
+		border-radius 4px 0 0 4px
+		color var(--primaryForeground)
+
+		& + .main
+			padding 0 4px
+			border solid 1px var(--primary)
+			border-radius 0 4px 4px 0
+
+	> .main
+		> .host.fade
+			opacity 0.5
+
+</style>
diff --git a/src/client/app/common/views/components/mfm.ts b/src/client/app/common/views/components/mfm.ts
index a6487aa4fb..399e8e884b 100644
--- a/src/client/app/common/views/components/mfm.ts
+++ b/src/client/app/common/views/components/mfm.ts
@@ -3,11 +3,12 @@ import { length } from 'stringz';
 import { Node } from '../../../../../mfm/parser';
 import parse from '../../../../../mfm/parse';
 import MkUrl from './url.vue';
+import MkMention from './mention.vue';
 import { concat, sum } from '../../../../../prelude/array';
 import MkFormula from './formula.vue';
 import MkGoogle from './google.vue';
-import { toUnicode } from 'punycode';
 import syntaxHighlight from '../../../../../mfm/syntax-highlight';
+import { host } from '../../../config';
 
 function getTextCount(tokens: Node[]): number {
 	const rootCount = sum(tokens.filter(x => x.name === 'text').map(x => length(x.props.text)));
@@ -158,21 +159,13 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'mention': {
-					const host = token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host;
-					const canonical = host != null ? `@${token.props.username}@${toUnicode(host)}` : `@${token.props.username}`;
-					return (createElement as any)('router-link', {
+					return [createElement(MkMention, {
 						key: Math.random(),
-						attrs: {
-							to: `/${canonical}`,
-							// TODO
-							//dataIsMe: (this as any).i && getAcct((this as any).i) == getAcct(token),
-							style: 'color:var(--mfmMention);'
-						},
-						directives: [{
-							name: 'user-preview',
-							value: canonical
-						}]
-					}, canonical);
+						props: {
+							host: (token.props.host == null && this.author && this.author.host != null ? this.author.host : token.props.host) || host,
+							username: token.props.username
+						}
+					})];
 				}
 
 				case 'hashtag': {