remote follow button

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

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",

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 }),

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>

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"/>