user mention (#3771)

locales/ja-JP.yml

@@ -360,6 +360,7 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  mention: "メンション"
   detail: "詳細"
   copy-link: "リンクをコピー"
   favorite: "お気に入り"
@@ -1365,6 +1366,7 @@ desktop/views/pages/user/user.header.vue:
   posts: "投稿"
   following: "フォロー"
   followers: "フォロワー"
+  mention: "メンション"
   is-bot: "このアカウントはBotです"
   years-old: "{age}歳"
   year: "年"
@@ -1715,6 +1717,7 @@ deck/deck.user-column.vue:
   posts: "投稿"
   following: "フォロー"
   followers: "フォロワー"
+  mention: "メンション"
   images: "画像"
   activity: "アクティビティ"
   timeline: "タイムライン"

src/client/app/common/views/components/note-menu.vue

@@ -17,6 +17,13 @@ export default Vue.extend({
 	computed: {
 		items(): any[] {
 			return concat(intersperse([null], [
+				[
+					[{
+						icon: 'at',
+						text: this.$t('mention'),
+						action: this.mention
+					}]
+				],
 				[
 					[{
 						icon: 'info-circle',
@@ -66,6 +73,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		mention() {
+			this.$post({ mention: this.note.user });
+		},
+
 		detail() {
 			this.$router.push(`/notes/${this.note.id}`);
 		},

src/client/app/desktop/script.ts

@@ -70,6 +70,7 @@ init(async (launch) => {
 				} else {
 					const vm = this.$root.new(PostFormWindow, {
 						reply: o.reply,
+						mention: o.mention,
 						animation: o.animation == null ? true : o.animation
 					});
 					if (o.cb) vm.$once('closed', o.cb);

src/client/app/desktop/views/components/post-form-window.vue

@@ -12,6 +12,7 @@
 		<mk-note-preview v-if="reply" class="notePreview" :note="reply"/>
 		<mk-post-form ref="form"
 			:reply="reply"
+			:mention="mention"
 			@posted="onPosted"
 			@change-uploadings="onChangeUploadings"
 			@change-attached-files="onChangeFiles"
@@ -32,6 +33,10 @@ export default Vue.extend({
 			type: Object,
 			required: false
 		},
+		mention: {
+			type: Object,
+			required: false
+		},
 
 		animation: {
 			type: Boolean,

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

@@ -92,6 +92,10 @@ export default Vue.extend({
 			type: Object,
 			required: false
 		},
+		mention: {
+			type: Object,
+			required: false
+		},
 		initialText: {
 			type: String,
 			required: false
@@ -178,6 +182,11 @@ export default Vue.extend({
 			this.text = this.initialText;
 		}
 
+		if (this.mention) {
+			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
+			this.text += ' ';
+		}
+
 		if (this.reply && this.reply.user.host != null) {
 			this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
 		}
@@ -215,7 +224,7 @@ export default Vue.extend({
 
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
-			if (!this.instant) {
+			if (!this.instant && !this.mention) {
 				const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId];
 				if (draft) {
 					this.text = draft.data.text;

src/client/app/desktop/views/pages/deck/deck.user-column.vue

@@ -49,6 +49,9 @@
 					<b>{{ user.followersCount | number }}</b>
 					<span>{{ $t('followers') }}</span>
 				</div>
+				<div class="mention">
+					<button @click="mention" :title="$t('mention')"><fa icon="at"/></button>
+				</div>
 			</div>
 		</div>
 		<div class="pinned" v-if="user.pinnedNotes && user.pinnedNotes.length > 0">
@@ -307,6 +310,10 @@ export default Vue.extend({
 			return promise;
 		},
 
+		mention() {
+			this.$post({ mention: this.user });
+		},
+
 		menu() {
 			let menu = [{
 				icon: 'list',
@@ -454,7 +461,7 @@ export default Vue.extend({
 
 		> .counts
 			display grid
-			grid-template-columns 1fr 1fr 1fr
+			grid-template-columns 2fr 2fr 2fr 1fr
 			margin-top 8px
 			border-top solid 1px var(--faceDivider)
 
@@ -471,6 +478,9 @@ export default Vue.extend({
 					font-size 80%
 					opacity 0.7
 
+			> .mention
+				display flex
+
 	> *
 		> p.caption
 			margin 0

src/client/app/desktop/views/pages/user/user.header.vue

@@ -36,6 +36,7 @@
 			<span class="notes-count"><b>{{ user.notesCount | number }}</b>{{ $t('posts') }}</span>
 			<router-link :to="user | userPage('following')" class="following clickable"><b>{{ user.followingCount | number }}</b>{{ $t('following') }}</router-link>
 			<router-link :to="user | userPage('followers')" class="followers clickable"><b>{{ user.followersCount | number }}</b>{{ $t('followers') }}</router-link>
+			<button @click="mention" :title="$t('mention')"><fa icon="at"/></button>
 		</div>
 	</div>
 </div>
@@ -77,6 +78,9 @@ export default Vue.extend({
 		}
 	},
 	methods: {
+		mention() {
+			this.$post({ mention: this.user });
+		},
 		onScroll() {
 			const banner = this.$refs.banner as any;
 

src/client/app/mobile/script.ts

@@ -60,6 +60,7 @@ init((launch) => {
 
 				const vm = this.$root.new(PostForm, {
 					reply: o.reply,
+					mention: o.mention,
 					renote: o.renote
 				});
 

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

@@ -5,6 +5,7 @@
 		<mk-post-form ref="form"
 			:reply="reply"
 			:renote="renote"
+			:mention="mention"
 			:initial-text="initialText"
 			:instant="instant"
 			@posted="onPosted"
@@ -27,6 +28,10 @@ export default Vue.extend({
 			type: Object,
 			required: false
 		},
+		mention: {
+			type: Object,
+			required: false
+		},
 		initialText: {
 			type: String,
 			required: false

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

@@ -84,6 +84,10 @@ export default Vue.extend({
 			type: Object,
 			required: false
 		},
+		mention: {
+			type: Object,
+			required: false
+		},
 		initialText: {
 			type: String,
 			required: false
@@ -172,6 +176,11 @@ export default Vue.extend({
 			this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
 		}
 
+		if (this.mention) {
+			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
+			this.text += ' ';
+		}
+
 		if (this.reply && this.reply.text != null) {
 			const ast = parse(this.reply.text);
 

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

@@ -55,6 +55,7 @@
 						<b>{{ user.followersCount | number }}</b>
 						<i>{{ $t('followers') }}</i>
 					</a>
+					<button @click="mention"><fa icon="at"/></button>
 				</div>
 			</div>
 		</header>
@@ -126,6 +127,10 @@ export default Vue.extend({
 			});
 		},
 
+		mention() {
+			this.$post({ mention: this.user });
+		},
+
 		menu() {
 			let menu = [{
 				icon: ['fas', 'list'],
@@ -365,6 +370,9 @@ main
 					> i
 						font-size 14px
 
+				> button
+					color var(--text)
+
 	> nav
 		position -webkit-sticky
 		position sticky