Improve mention display

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>