リモートフォローボタン Resolve #3047

locales/en-US.yml

@@ -1785,6 +1785,8 @@ common/views/components/follow-button.vue:
   request-pending: "Pending"
   follow-processing: "Processing"
   follow-request: "Follow request"
+  remoteFollow: "Remote follow"
+  remoteFollowMessage: "Enter the following account in the search box of the instance you want to follow and follow.\n`{acct}`"
 mobile/views/components/note.vue:
   private: "This post is private"
   deleted: "This post has been deleted"

locales/ja-JP.yml

@@ -1983,6 +1983,8 @@ common/views/components/follow-button.vue:
   request-pending: "フォロー許可待ち"
   follow-processing: "フォロー処理中"
   follow-request: "フォロー申請"
+  remoteFollow: "リモートフォロー"
+  remoteFollowMessage: "以下のアカウントをフォローしたいインスタンスの検索ボックスに入れてフォローして下さい。\n`{acct}`"
 
 mobile/views/components/note.vue:
   private: "この投稿は非公開です"

src/client/app/common/views/components/dialog.vue

@@ -10,8 +10,8 @@
 		</template>
 		<template v-else>
 			<div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div>
-			<header v-if="title">{{ title }}</header>
-			<div class="body" v-if="text">{{ text }}</div>
+			<header v-if="title"><mfm :text="title"/></header>
+			<div class="body" v-if="text"><mfm :text="text"/></div>
 			<ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input>
 			<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></ui-input>
 			<ui-select v-if="select" v-model="selectedValue" autofocus>

src/client/app/common/views/components/follow-button.vue

@@ -15,6 +15,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
+import { host } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/follow-button.vue'),
@@ -57,6 +58,10 @@ export default Vue.extend({
 
 	computed: {
 		iconAndText(): any[] {
+			if (!this.$store.getters.isSignedIn) {
+				return [ 'plus', this.$t('remoteFollow') ];
+			}
+
 			return (
 				(this.hasPendingFollowRequestFromYou && this.user.isLocked) ? ['hourglass-half', this.$t('request-pending')] :
 				(this.hasPendingFollowRequestFromYou && !this.user.isLocked) ? ['spinner', this.$t('follow-processing')] :
@@ -91,6 +96,14 @@ export default Vue.extend({
 			this.wait = true;
 
 			try {
+				if (!this.$store.getters.isSignedIn) {
+					await this.$root.dialog({
+						type: 'info',
+						text: this.$t('remoteFollowMessage', { acct: `@${this.user.username}@${host}` }),
+					});
+					return;
+				}
+
 				if (this.isFollowing) {
 					const { canceled } = await this.$root.dialog({
 						type: 'warning',

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

@@ -19,6 +19,9 @@
 			<button @click="listMenu" class="listMenu" ref="listMenu"><fa :icon="['fas', 'list']"/></button>
 			<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" class="follow"/>
 		</div>
+		<div class="actions" v-else>
+			<mk-follow-button :user="user" :inline="true" :transparent="false" class="follow"/>
+		</div>
 	</div>
 	<mk-avatar class="avatar" :user="user" :disable-preview="true" :disable-link="true" @click="onAvatarClick()" style="cursor: pointer"/>
 	<div class="body">

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

@@ -14,9 +14,9 @@
 					<a class="avatar" :href="user.avatarUrl">
 						<img :src="avator" alt="avatar"/>
 					</a>
-					<button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
-					<button class="listMenu" ref="listMenu" @click="listMenu"><fa :icon="['fas', 'list']"/></button>
-					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user" :key="user.id"/>
+					<button v-if="$store.getters.isSignedIn" class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
+					<button v-if="$store.getters.isSignedIn" class="listMenu" ref="listMenu" @click="listMenu"><fa :icon="['fas', 'list']"/></button>
+					<mk-follow-button v-if="!$store.getters.isSignedIn || ($store.getters.isSignedIn && $store.state.i.id != user.id)" :user="user" :key="user.id"/>
 				</div>
 				<div class="title">
 					<h1><mk-user-name :user="user" :key="user.id" :nowrap="false"/></h1>