From 3815ec7aba70ceed762f920347e8a63bade7404d Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 18 Nov 2022 19:00:33 -0800
Subject: [PATCH] remote follow button

---
 CALCKEY.md                                    |  3 +--
 package.json                                  |  2 +-
 .../client/src/components/MkFollowButton.vue  | 21 +++++++++++++++++--
 .../client/src/components/MkNotification.vue  |  2 +-
 packages/client/src/pages/user/home.vue       |  5 +++--
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 4a85c43b4a..a23953b3fc 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -9,7 +9,6 @@
 - User "choices" (recommended users) like Mastodon and Soapbox
 - Option to publicize instance blocks
 - Fully revamp non-logged-in screen
-- Remote follow button
 - Personal notes for all accounts
 - Non-nyaify cat mode
 - Timeline filters
@@ -21,8 +20,8 @@
 ## Work in progress
 
 - Better Messaging UI
-  - Videos can be played in DMs
 - Make your password hasn't been pwned
+- Remote follow button
 - Admin custom CSS
 - Add back time machine (jump to date)
 - Improve accesibility score
diff --git a/package.json b/package.json
index bbf7d11966..4c49c5d967 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.15-beta.6",
+	"version": "12.119.0-calc.15-beta.7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index a2ba06faf5..bfeb42182a 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -4,7 +4,10 @@
 	:disabled="wait"
 	@click="onClick"
 >
-	<template v-if="!wait">
+	<template v-if="remote">
+		<span v-if="full">{{ i18n.ts.remoteFollow }}</span><i class="ph-plus-bold ph-lg"></i>
+	</template>
+	<template v-else-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
 			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium-bold ph-lg"></i>
 		</template>
@@ -31,15 +34,20 @@
 import { onBeforeUnmount, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os';
+import { useRouter } from '@/router';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 
+const router = useRouter();
+
 const props = withDefaults(defineProps<{
 	user: Misskey.entities.UserDetailed,
 	full?: boolean,
+	remote?: boolean,
 	large?: boolean,
 }>(), {
 	full: false,
+	remote: false,
 	large: false,
 });
 
@@ -66,7 +74,16 @@ async function onClick() {
 	wait = true;
 
 	try {
-		if (isFollowing) {
+		if (props.remote) {
+			os.inputText({
+				title: i18n.ts.remoteFollow,
+				placeholder: 'thatonecalculator@i.calckey.cloud',
+			}).then(({ canceled, result: instance }) => {
+				if (canceled) return;
+				window.open(`${instance}/?authorize-follow?acct=${props.user.uri}`);
+			});
+		}
+		else if (isFollowing) {
 			const { canceled } = await os.confirm({
 				type: 'warning',
 				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 4dd369ff5b..e24f7b6aba 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -5,7 +5,7 @@
 		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="ph-plus-bold"></i>
+			<i v-if="notification.type === 'follow'" class="ph-hand-waving-bold"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ph-clock-bold"></i>
 			<i v-else-if="notification.type === 'followRequestAccepted'" class="ph-check-bold"></i>
 			<i v-else-if="notification.type === 'groupInvited'" class="ph-identification-card-bold"></i>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index b0ff75eefe..88ecd45ee9 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -24,9 +24,10 @@
 							</div>
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-						<div v-if="$i" class="actions">
+						<div class="actions">
 							<button class="menu _button" @click="menu"><i class="ph-dots-three-outline-bold ph-lg"></i></button>
-							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+							<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+							<MkFollowButton v-else :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
 					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>